@justeattakeaway/pie-checkbox-group 0.8.4 → 0.9.0

package/dist/index.js

@@ -1,38 +1,33 @@
-import { LitElement as g, html as p, unsafeCSS as v } from "lit";
-import { property as l, state as k, queryAssignedElements as m } from "lit/decorators.js";
-import { FormControlMixin as y, RtlMixin as _, validPropertyValues as G, defineCustomElement as C } from "@justeattakeaway/pie-webc-core";
-import { ifDefined as b } from "lit/directives/if-defined.js";
-import { classMap as E } from "lit/directives/class-map.js";
+import { LitElement as x, html as n, unsafeCSS as g } from "lit";
+import { state as v, property as l, queryAssignedElements as k } from "lit/decorators.js";
+import { FormControlMixin as m, RtlMixin as y, validPropertyValues as _, safeCustomElement as G } from "@justeattakeaway/pie-webc-core";
+import { ifDefined as u } from "lit/directives/if-defined.js";
+import { classMap as C } from "lit/directives/class-map.js";
 import "@justeattakeaway/pie-assistive-text";
-var S = Object.defineProperty, $ = (c, e, o, n) => {
-  for (var t = void 0, i = c.length - 1, a; i >= 0; i--)
-    (a = c[i]) && (t = a(e, o, t) || t);
-  return t && S(e, o, t), t;
-};
-class f extends g {
-  constructor() {
-    super(...arguments), this.v = "0.8.4";
+const d = class d extends x {
+  willUpdate() {
+    this.getAttribute("v") || this.setAttribute("v", d.v);
   }
-}
-$([
-  l({ type: String, reflect: !0 })
-], f.prototype, "v");
-const O = "*,*:after,*:before{box-sizing:inherit}.c-checkboxGroup{--checkbox-group-offset: var(--dt-spacing-c);--checkbox-group-offset--inline: var(--dt-spacing-e);--checkbox-group-label-offset: var(--dt-spacing-a);margin:0;padding:0;border:0;min-width:0}.c-checkboxGroup ::slotted(pie-checkbox){display:flex}.c-checkboxGroup ::slotted(pie-form-label){display:block;padding-block-end:var(--checkbox-group-label-offset)}.c-checkboxGroup:not(.c-checkboxGroup--inline) ::slotted(pie-checkbox:not(:last-child)){margin-block-end:var(--checkbox-group-offset)}.c-checkboxGroup--inline{display:flex;align-items:flex-start;flex-wrap:wrap}.c-checkboxGroup.c-checkboxGroup--inline{margin:calc(-1 * var(--checkbox-group-offset) / 2) calc(-1 * var(--checkbox-group-offset--inline) / 2)}.c-checkboxGroup.c-checkboxGroup--inline ::slotted(pie-checkbox){margin:calc(var(--checkbox-group-offset) / 2) calc(var(--checkbox-group-offset--inline) / 2)}.c-checkboxGroup.c-checkboxGroup--inline ::slotted(pie-form-label){margin:0 calc(var(--checkbox-group-offset--inline) / 2) calc(-1 * (var(--checkbox-group-offset) / 2 - var(--checkbox-group-label-offset)));padding-block-end:0}.c-checkboxGroup-assistiveText{--checkbox-group-assistive-text-offset: var(--dt-spacing-a);display:block;margin-block-start:var(--checkbox-group-assistive-text-offset)}", T = ["default", "success", "error"], L = "pie-checkbox-group-disabled", I = "pie-checkbox-group-error", d = {
+};
+d.v = "0.9.0";
+let b = d;
+const S = "*,*:after,*:before{box-sizing:inherit}.c-checkboxGroup{--checkbox-group-offset: var(--dt-spacing-c);--checkbox-group-offset--inline: var(--dt-spacing-e);--checkbox-group-label-offset: var(--dt-spacing-a);margin:0;padding:0;border:0;min-width:0}.c-checkboxGroup ::slotted(pie-checkbox){display:flex}.c-checkboxGroup ::slotted(pie-form-label){display:block;padding-block-end:var(--checkbox-group-label-offset)}.c-checkboxGroup:not(.c-checkboxGroup--inline) ::slotted(pie-checkbox:not(:last-child)){margin-block-end:var(--checkbox-group-offset)}.c-checkboxGroup--inline{display:flex;align-items:flex-start;flex-wrap:wrap}.c-checkboxGroup.c-checkboxGroup--inline{margin:calc(-1 * var(--checkbox-group-offset) / 2) calc(-1 * var(--checkbox-group-offset--inline) / 2)}.c-checkboxGroup.c-checkboxGroup--inline ::slotted(pie-checkbox){margin:calc(var(--checkbox-group-offset) / 2) calc(var(--checkbox-group-offset--inline) / 2)}.c-checkboxGroup.c-checkboxGroup--inline ::slotted(pie-form-label){margin:0 calc(var(--checkbox-group-offset--inline) / 2) calc(-1 * (var(--checkbox-group-offset) / 2 - var(--checkbox-group-label-offset)));padding-block-end:0}.c-checkboxGroup-assistiveText{--checkbox-group-assistive-text-offset: var(--dt-spacing-a);display:block;margin-block-start:var(--checkbox-group-assistive-text-offset)}", E = ["default", "success", "error"], O = "pie-checkbox-group-disabled", $ = "pie-checkbox-group-error", p = {
   status: "default",
   disabled: !1,
   isInline: !1
 };
-var P = Object.defineProperty, r = (c, e, o, n) => {
-  for (var t = void 0, i = c.length - 1, a; i >= 0; i--)
-    (a = c[i]) && (t = a(e, o, t) || t);
-  return t && P(e, o, t), t;
+var T = Object.defineProperty, w = Object.getOwnPropertyDescriptor, i = (e, o, a, c) => {
+  for (var s = c > 1 ? void 0 : c ? w(o, a) : o, r = e.length - 1, h; r >= 0; r--)
+    (h = e[r]) && (s = (c ? h(o, a, s) : h(s)) || s);
+  return c && s && T(o, a, s), s;
 };
-const x = "pie-checkbox-group", u = "assistive-text", h = class h extends y(_(f)) {
+const L = "pie-checkbox-group", f = "assistive-text";
+let t = class extends m(y(b)) {
   constructor() {
-    super(...arguments), this._hasLabel = !1, this.isInline = d.isInline, this.status = d.status, this.disabled = d.disabled;
+    super(...arguments), this._hasLabel = !1, this.isInline = p.isInline, this.status = p.status, this.disabled = p.disabled;
   }
   _handleDisabled() {
-    this._slottedChildren.forEach((e) => e.dispatchEvent(new CustomEvent(L, {
+    this._slottedChildren.forEach((e) => e.dispatchEvent(new CustomEvent(O, {
       bubbles: !1,
       composed: !1,
       detail: { disabled: this.disabled }
@@ -40,7 +35,7 @@ const x = "pie-checkbox-group", u = "assistive-text", h = class h extends y(_(f)
   }
   _handleStatus() {
     this._slottedChildren.forEach((e) => {
-      e.setAttribute("status", this.status), this.status === "error" && this.assistiveText && (e.setAttribute("assistiveText", this.assistiveText), e.dispatchEvent(new CustomEvent(I, { bubbles: !1, composed: !1, detail: { error: !0 } })));
+      e.setAttribute("status", this.status), this.status === "error" && this.assistiveText && (e.setAttribute("assistiveText", this.assistiveText), e.dispatchEvent(new CustomEvent($, { bubbles: !1, composed: !1, detail: { error: !0 } })));
     });
   }
   /**
@@ -58,7 +53,7 @@ const x = "pie-checkbox-group", u = "assistive-text", h = class h extends y(_(f)
    * @private
    */
   renderWrappedLabel() {
-    return this._hasLabel ? p`<legend><slot name='label' @slotchange=${this.handleSlotChange}></slot></legend>` : p`<slot name='label' @slotchange=${this.handleSlotChange}></slot>`;
+    return this._hasLabel ? n`<legend><slot name='label' @slotchange=${this.handleSlotChange}></slot></legend>` : n`<slot name='label' @slotchange=${this.handleSlotChange}></slot>`;
   }
   updated(e) {
     e.has("disabled") && this._handleDisabled(), e.has("status") && this._handleStatus();
@@ -67,64 +62,65 @@ const x = "pie-checkbox-group", u = "assistive-text", h = class h extends y(_(f)
     const {
       name: e,
       isInline: o,
-      assistiveText: n,
-      status: t,
-      disabled: i
-    } = this, a = {
+      assistiveText: a,
+      status: c,
+      disabled: s
+    } = this, r = {
       "c-checkboxGroup": !0,
       "c-checkboxGroup--inline": o
     };
-    return p`
+    return n`
             <fieldset
-                name=${b(e)}
-                ?disabled=${i}
-                aria-describedby="${b(n ? u : void 0)}"
+                name=${u(e)}
+                ?disabled=${s}
+                aria-describedby="${u(a ? f : void 0)}"
                 data-test-id="pie-checkbox-group-fieldset"
-                class="${E(a)}"
+                class="${C(r)}"
             >
                 ${this.renderWrappedLabel()}
                 <slot></slot>
             </fieldset>
-            ${n && p`
+            ${a && n`
                 <pie-assistive-text
-                    id="${u}"
-                    variant=${t}
+                    id="${f}"
+                    variant=${c}
                     class="c-checkboxGroup-assistiveText"
                     data-test-id="pie-checkbox-group-assistive-text">
-                        ${n}
+                        ${a}
                 </pie-assistive-text>`}
         `;
   }
 };
-h.styles = v(O);
-let s = h;
-r([
-  k()
-], s.prototype, "_hasLabel");
-r([
+t.styles = g(S);
+i([
+  v()
+], t.prototype, "_hasLabel", 2);
+i([
   l({ type: String, reflect: !0 })
-], s.prototype, "name");
-r([
+], t.prototype, "name", 2);
+i([
   l({ type: String })
-], s.prototype, "assistiveText");
-r([
+], t.prototype, "assistiveText", 2);
+i([
   l({ type: Boolean })
-], s.prototype, "isInline");
-r([
+], t.prototype, "isInline", 2);
+i([
   l({ type: String }),
-  G(x, T, d.status)
-], s.prototype, "status");
-r([
+  _(L, E, p.status)
+], t.prototype, "status", 2);
+i([
   l({ type: Boolean, reflect: !0 })
-], s.prototype, "disabled");
-r([
-  m({ selector: "pie-checkbox" })
-], s.prototype, "_slottedChildren");
-C(x, s);
+], t.prototype, "disabled", 2);
+i([
+  k({ selector: "pie-checkbox" })
+], t.prototype, "_slottedChildren", 2);
+t = i([
+  G("pie-checkbox-group")
+], t);
 export {
-  L as ON_CHECKBOX_GROUP_DISABLED,
-  I as ON_CHECKBOX_GROUP_ERROR,
-  s as PieCheckboxGroup,
-  d as defaultProps,
-  T as statusTypes
+  O as ON_CHECKBOX_GROUP_DISABLED,
+  $ as ON_CHECKBOX_GROUP_ERROR,
+  t as PieCheckboxGroup,
+  p as defaultProps,
+  E as statusTypes
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-checkbox-group",
   "description": "PIE Design System Checkbox Group built using Web Components",
-  "version": "0.8.4",
+  "version": "0.9.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -39,15 +39,15 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-checkbox": "0.15.5",
+    "@justeattakeaway/pie-checkbox": "0.16.0",
     "@justeattakeaway/pie-components-config": "0.20.1",
     "@justeattakeaway/pie-css": "0.16.0",
     "@justeattakeaway/pie-monorepo-utils": "0.5.1",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-assistive-text": "0.9.3",
-    "@justeattakeaway/pie-webc-core": "0.25.1"
+    "@justeattakeaway/pie-assistive-text": "0.10.0",
+    "@justeattakeaway/pie-webc-core": "0.26.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/index.ts

@@ -2,12 +2,14 @@ import {
     html, unsafeCSS, type PropertyValues, type TemplateResult,
 } from 'lit';
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
-import { property, queryAssignedElements, state } from 'lit/decorators.js';
+import {
+    property, queryAssignedElements, state,
+} from 'lit/decorators.js';
 import {
     RtlMixin,
-    defineCustomElement,
     FormControlMixin,
     validPropertyValues,
+    safeCustomElement,
 } from '@justeattakeaway/pie-webc-core';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -34,6 +36,7 @@ const assistiveTextId = 'assistive-text';
  * @event {CustomEvent} pie-checkbox-group-disabled - triggered after the disabled state of the checkbox group changes.
  * @event {CustomEvent} pie-checkbox-group-error - triggered after the state of the checkbox group changes to error.
  */
+@safeCustomElement('pie-checkbox-group')
 export class PieCheckboxGroup extends FormControlMixin(RtlMixin(PieElement)) implements CheckboxGroupProps {
     @state()
     private _hasLabel = false;
@@ -142,8 +145,6 @@ export class PieCheckboxGroup extends FormControlMixin(RtlMixin(PieElement)) imp
     static styles = unsafeCSS(styles);
 }
 
-defineCustomElement(componentSelector, PieCheckboxGroup);
-
 declare global {
     interface HTMLElementTagNameMap {
         [componentSelector]: PieCheckboxGroup;