@justeattakeaway/pie-checkbox 0.15.6 → 0.16.0

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 (3) hide show
  1. package/dist/index.js +86 -89
  2. package/package.json +3 -3
  3. package/src/index.ts +2 -3
package/dist/index.js CHANGED
@@ -1,24 +1,18 @@
1
- import { LitElement as f, nothing as F, html as p, unsafeCSS as P } from "lit";
2
- import { property as i, state as y, query as S } from "lit/decorators.js";
3
- import { classMap as u } from "lit/directives/class-map.js";
4
- import { ifDefined as g } from "lit/directives/if-defined.js";
5
- import { live as q } from "lit/directives/live.js";
6
- import { FormControlMixin as A, RtlMixin as T, wrapNativeEvent as z, validPropertyValues as D, defineCustomElement as H } from "@justeattakeaway/pie-webc-core";
1
+ import { LitElement as y, nothing as E, html as u, unsafeCSS as A } from "lit";
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";
7
7
  import "@justeattakeaway/pie-assistive-text";
8
- var R = Object.defineProperty, L = (s, c, r, d) => {
9
- for (var o = void 0, a = s.length - 1, l; a >= 0; a--)
10
- (l = s[a]) && (o = l(c, r, o) || o);
11
- return o && R(c, r, o), o;
12
- };
13
- class w extends f {
14
- constructor() {
15
- super(...arguments), this.v = "0.15.6";
8
+ const k = class k extends y {
9
+ willUpdate() {
10
+ this.getAttribute("v") || this.setAttribute("v", k.v);
16
11
  }
17
- }
18
- L([
19
- i({ type: String, reflect: !0 })
20
- ], w.prototype, "v");
21
- const O = '*,*:after,*:before{box-sizing:inherit}@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)}}', I = ["default", "success", "error"], n = {
12
+ };
13
+ k.v = "0.16.0";
14
+ let p = k;
15
+ const T = '*,*:after,*:before{box-sizing:inherit}@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 = {
22
16
  // a default value for the html <input type="checkbox" /> value attribute.
23
17
  // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value
24
18
  value: "on",
@@ -29,14 +23,15 @@ const O = '*,*:after,*:before{box-sizing:inherit}@keyframes checkboxCheck{0%{wid
29
23
  required: !1,
30
24
  status: "default"
31
25
  };
32
- var M = Object.defineProperty, t = (s, c, r, d) => {
33
- for (var o = void 0, a = s.length - 1, l; a >= 0; a--)
34
- (l = s[a]) && (o = l(c, r, o) || o);
35
- return o && M(c, r, o), o;
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;
36
30
  };
37
- const _ = "pie-checkbox", m = "assistive-text", k = class k extends A(T(w)) {
31
+ const L = "pie-checkbox", f = "assistive-text";
32
+ let o = class extends P(q(p)) {
38
33
  constructor() {
39
- super(...arguments), this._disabledByParent = !1, this._visuallyHiddenError = !1, this.value = n.value, this.checked = n.checked, this.defaultChecked = n.defaultChecked, this.disabled = n.disabled, this.required = n.required, this.indeterminate = n.indeterminate, this.status = n.status;
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;
40
35
  }
41
36
  connectedCallback() {
42
37
  super.connectedCallback(), this._abortController = new AbortController();
@@ -82,8 +77,8 @@ const _ = "pie-checkbox", m = "assistive-text", k = class k extends A(T(w)) {
82
77
  _handleChange(c) {
83
78
  const { checked: r } = c == null ? void 0 : c.currentTarget;
84
79
  this.checked = r;
85
- const d = z(c);
86
- this.dispatchEvent(d), this._handleFormAssociation();
80
+ const l = D(c);
81
+ this.dispatchEvent(l), this._handleFormAssociation();
87
82
  }
88
83
  /**
89
84
  * Called when the form that contains this component is reset.
@@ -101,106 +96,108 @@ const _ = "pie-checkbox", m = "assistive-text", k = class k extends A(T(w)) {
101
96
  const {
102
97
  checked: c,
103
98
  value: r,
104
- name: d,
105
- disabled: o,
106
- _disabledByParent: a,
107
- _visuallyHiddenError: l,
108
- required: C,
99
+ name: l,
100
+ disabled: s,
101
+ _disabledByParent: t,
102
+ _visuallyHiddenError: h,
103
+ required: b,
109
104
  indeterminate: x,
110
105
  assistiveText: v,
111
- status: b,
112
- isRTL: $
113
- } = this, h = o || a, E = {
106
+ status: d,
107
+ isRTL: C
108
+ } = this, n = s || t, _ = {
114
109
  "c-checkbox": !0,
115
- [`c-checkbox--status-${b}`]: !h,
116
- "is-disabled": h,
110
+ [`c-checkbox--status-${d}`]: !n,
111
+ "is-disabled": n,
117
112
  "c-checkbox--checked": c,
118
113
  "c-checkbox--indeterminate": x && !c
119
- }, B = {
114
+ }, $ = {
120
115
  "c-checkbox-tick": !0,
121
- [`c-checkbox-tick--status-${b}`]: !h,
122
- "is-disabled": h,
116
+ [`c-checkbox-tick--status-${d}`]: !n,
117
+ "is-disabled": n,
123
118
  "c-checkbox-tick--checked": c,
124
119
  "c-checkbox-tick--indeterminate": x && !c,
125
- "c-checkbox-tick--rtl": $
120
+ "c-checkbox-tick--rtl": C
126
121
  };
127
- return p`
122
+ return u`
128
123
  <div
129
- class="${u(E)}">
124
+ class="${g(_)}">
130
125
  <input
131
126
  type="checkbox"
132
127
  id="inputId"
133
128
  .value=${r}
134
- .checked=${q(c)}
135
- name=${g(d)}
136
- ?disabled=${h}
137
- ?required=${C}
129
+ .checked=${F(c)}
130
+ name=${m(l)}
131
+ ?disabled=${n}
132
+ ?required=${b}
138
133
  .indeterminate=${x}
139
- aria-invalid=${b === "error" ? "true" : "false"}
140
- aria-describedby=${g(v ? m : void 0)}
134
+ aria-invalid=${d === "error" ? "true" : "false"}
135
+ aria-describedby=${m(v ? f : void 0)}
141
136
  @change=${this._handleChange}
142
137
  data-test-id="pie-checkbox-input"
143
138
  />
144
139
  <label for="inputId" data-test-id="pie-checkbox-label">
145
140
  <span
146
- class="${u(B)}"></span>
141
+ class="${g($)}"></span>
147
142
  <span class="c-checkbox-text">
148
143
  <slot></slot>
149
144
  </span>
150
145
  </label>
151
- ${v ? p`
146
+ ${v ? u`
152
147
  <pie-assistive-text
153
- id="${m}"
154
- variant=${b}
155
- ?isVisuallyHidden=${l}
148
+ id="${f}"
149
+ variant=${d}
150
+ ?isVisuallyHidden=${h}
156
151
  data-test-id="pie-checkbox-assistive-text">
157
152
  ${v}
158
- </pie-assistive-text>` : F}
153
+ </pie-assistive-text>` : E}
159
154
  </div>`;
160
155
  }
161
156
  };
162
- k.shadowRootOptions = { ...f.shadowRootOptions, delegatesFocus: !0 }, k.styles = P(O);
163
- let e = k;
164
- t([
165
- y()
166
- ], e.prototype, "_disabledByParent");
167
- t([
168
- y()
169
- ], e.prototype, "_visuallyHiddenError");
170
- t([
157
+ o.shadowRootOptions = { ...y.shadowRootOptions, delegatesFocus: !0 };
158
+ o.styles = A(T);
159
+ e([
160
+ w()
161
+ ], o.prototype, "_disabledByParent", 2);
162
+ e([
163
+ w()
164
+ ], o.prototype, "_visuallyHiddenError", 2);
165
+ e([
171
166
  i({ type: String })
172
- ], e.prototype, "value");
173
- t([
167
+ ], o.prototype, "value", 2);
168
+ e([
174
169
  i({ type: String, reflect: !0 })
175
- ], e.prototype, "name");
176
- t([
170
+ ], o.prototype, "name", 2);
171
+ e([
177
172
  i({ type: Boolean, reflect: !0 })
178
- ], e.prototype, "checked");
179
- t([
173
+ ], o.prototype, "checked", 2);
174
+ e([
180
175
  i({ type: Boolean, reflect: !0 })
181
- ], e.prototype, "defaultChecked");
182
- t([
176
+ ], o.prototype, "defaultChecked", 2);
177
+ e([
183
178
  i({ type: Boolean, reflect: !0 })
184
- ], e.prototype, "disabled");
185
- t([
179
+ ], o.prototype, "disabled", 2);
180
+ e([
186
181
  i({ type: Boolean, reflect: !0 })
187
- ], e.prototype, "required");
188
- t([
182
+ ], o.prototype, "required", 2);
183
+ e([
189
184
  i({ type: Boolean, reflect: !0 })
190
- ], e.prototype, "indeterminate");
191
- t([
192
- S('input[type="checkbox"]')
193
- ], e.prototype, "_checkbox");
194
- t([
185
+ ], o.prototype, "indeterminate", 2);
186
+ e([
187
+ B('input[type="checkbox"]')
188
+ ], o.prototype, "_checkbox", 2);
189
+ e([
195
190
  i({ type: String })
196
- ], e.prototype, "assistiveText");
197
- t([
191
+ ], o.prototype, "assistiveText", 2);
192
+ e([
198
193
  i({ type: String }),
199
- D(_, I, n.status)
200
- ], e.prototype, "status");
201
- H(_, e);
194
+ S(L, z, a.status)
195
+ ], o.prototype, "status", 2);
196
+ o = e([
197
+ O("pie-checkbox")
198
+ ], o);
202
199
  export {
203
- e as PieCheckbox,
204
- n as defaultProps,
205
- I as statusTypes
200
+ o as PieCheckbox,
201
+ a as defaultProps,
202
+ z as statusTypes
206
203
  };
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.15.6",
4
+ "version": "0.16.0",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/justeattakeaway/pie",
@@ -45,8 +45,8 @@
45
45
  "cem-plugin-module-file-extensions": "0.0.5"
46
46
  },
47
47
  "dependencies": {
48
- "@justeattakeaway/pie-assistive-text": "0.9.4",
49
- "@justeattakeaway/pie-webc-core": "0.25.1"
48
+ "@justeattakeaway/pie-assistive-text": "0.10.0",
49
+ "@justeattakeaway/pie-webc-core": "0.26.0"
50
50
  },
51
51
  "volta": {
52
52
  "extends": "../../../package.json"
package/src/index.ts CHANGED
@@ -9,10 +9,10 @@ import { live } from 'lit/directives/live.js';
9
9
 
10
10
  import {
11
11
  RtlMixin,
12
- defineCustomElement,
13
12
  wrapNativeEvent,
14
13
  FormControlMixin,
15
14
  validPropertyValues,
15
+ safeCustomElement,
16
16
  } from '@justeattakeaway/pie-webc-core';
17
17
  import '@justeattakeaway/pie-assistive-text';
18
18
 
@@ -30,6 +30,7 @@ const assistiveTextId = 'assistive-text';
30
30
  * @slot - Default slot
31
31
  * @event {CustomEvent} change - when checked state is changed.
32
32
  */
33
+ @safeCustomElement('pie-checkbox')
33
34
  export class PieCheckbox extends FormControlMixin(RtlMixin(PieElement)) implements CheckboxProps {
34
35
  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
35
36
 
@@ -225,8 +226,6 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(PieElement)) implemen
225
226
  static styles = unsafeCSS(styles);
226
227
  }
227
228
 
228
- defineCustomElement(componentSelector, PieCheckbox);
229
-
230
229
  declare global {
231
230
  interface HTMLElementTagNameMap {
232
231
  [componentSelector]: PieCheckbox;