@justeattakeaway/pie-checkbox-group 0.7.3 → 0.7.5

package/custom-elements.json

@@ -102,17 +102,18 @@
           "members": [
             {
               "kind": "field",
-              "name": "hasLabel",
+              "name": "_hasLabel",
               "type": {
                 "text": "boolean"
               },
+              "privacy": "private",
               "default": "false"
             },
             {
               "kind": "field",
               "name": "name",
               "type": {
-                "text": "CheckboxGroupProps['name'] | undefined"
+                "text": "CheckboxGroupProps['name']"
               },
               "privacy": "public",
               "attribute": "name"
@@ -148,13 +149,6 @@
             {
               "kind": "field",
               "name": "_slottedChildren",
-              "type": {
-                "text": "Array<HTMLElement> | undefined"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_labelSlot",
               "type": {
                 "text": "Array<HTMLElement>"
               }
@@ -191,7 +185,7 @@
                   }
                 }
               ],
-              "description": "Function that updates the local `hasLabel` state in case\nwhen the label slot receives content."
+              "description": "Function that updates the local `_hasLabel` state in case\nwhen the label slot receives content."
             },
             {
               "kind": "method",
@@ -199,7 +193,7 @@
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "TemplateResult | typeof nothing"
+                  "text": "TemplateResult"
                 }
               },
               "description": "Template for the label slot to correctly wrap it into a legend element when it has content.\nCalled within the main render function."
@@ -225,7 +219,7 @@
             {
               "name": "name",
               "type": {
-                "text": "CheckboxGroupProps['name'] | undefined"
+                "text": "CheckboxGroupProps['name']"
               },
               "fieldName": "name"
             },

package/dist/index.d.ts

@@ -51,18 +51,17 @@ export declare const ON_CHECKBOX_GROUP_ERROR = "pie-checkbox-group-error";
  * @event {CustomEvent} pie-checkbox-group-error - triggered after the state of the checkbox group changes to error.
  */
 export declare class PieCheckboxGroup extends PieCheckboxGroup_base implements CheckboxGroupProps {
-    hasLabel: boolean;
-    name?: CheckboxGroupProps['name'];
+    private _hasLabel;
+    name: CheckboxGroupProps['name'];
     assistiveText?: CheckboxGroupProps['assistiveText'];
     isInline: boolean;
     status: "default" | "error" | "success";
     disabled: boolean;
-    _slottedChildren: Array<HTMLElement> | undefined;
-    _labelSlot: Array<HTMLElement>;
+    _slottedChildren: Array<HTMLElement>;
     private _handleDisabled;
     private _handleStatus;
     /**
-     * Function that updates the local `hasLabel` state in case
+     * Function that updates the local `_hasLabel` state in case
      * when the label slot receives content.
      * @private
      */

package/dist/index.js

@@ -1,6 +1,6 @@
-import { LitElement as g, html as n, unsafeCSS as k } from "lit";
-import { state as v, property as c, queryAssignedElements as f } from "lit/decorators.js";
-import { FormControlMixin as m, RtlMixin as y, validPropertyValues as G, defineCustomElement as _ } from "@justeattakeaway/pie-webc-core";
+import { LitElement as x, html as n, unsafeCSS as g } from "lit";
+import { state as k, property as c, queryAssignedElements as v } from "lit/decorators.js";
+import { FormControlMixin as m, RtlMixin as y, validPropertyValues as _, defineCustomElement as G } from "@justeattakeaway/pie-webc-core";
 import { ifDefined as b } from "lit/directives/if-defined.js";
 import { classMap as C } from "lit/directives/class-map.js";
 import "@justeattakeaway/pie-assistive-text";
@@ -9,37 +9,35 @@ const E = "*,*:after,*:before{box-sizing:inherit}.c-checkboxGroup{--checkbox-gro
   disabled: !1,
   isInline: !1
 };
-var L = Object.defineProperty, i = (h, e, t, l) => {
-  for (var o = void 0, a = h.length - 1, r; a >= 0; a--)
-    (r = h[a]) && (o = r(e, t, o) || o);
-  return o && L(e, t, o), o;
+var L = Object.defineProperty, o = (h, e, i, r) => {
+  for (var s = void 0, a = h.length - 1, l; a >= 0; a--)
+    (l = h[a]) && (s = l(e, i, s) || s);
+  return s && L(e, i, s), s;
 };
-const x = "pie-checkbox-group", u = "assistive-text", d = class d extends m(y(g)) {
+const f = "pie-checkbox-group", u = "assistive-text", d = class d extends m(y(x)) {
   constructor() {
-    super(...arguments), this.hasLabel = !1, this.isInline = p.isInline, this.status = p.status, this.disabled = p.disabled;
+    super(...arguments), this._hasLabel = !1, this.isInline = p.isInline, this.status = p.status, this.disabled = p.disabled;
   }
   _handleDisabled() {
-    var e;
-    (e = this._slottedChildren) == null || e.forEach((t) => t.dispatchEvent(new CustomEvent($, {
+    this._slottedChildren.forEach((e) => e.dispatchEvent(new CustomEvent($, {
       bubbles: !1,
       composed: !1,
       detail: { disabled: this.disabled }
     })));
   }
   _handleStatus() {
-    var e;
-    (e = this._slottedChildren) == null || e.forEach((t) => {
-      t.setAttribute("status", this.status), this.status === "error" && this.assistiveText && (t.setAttribute("assistiveText", this.assistiveText), t.dispatchEvent(new CustomEvent(T, { bubbles: !1, composed: !1, detail: { error: !0 } })));
+    this._slottedChildren.forEach((e) => {
+      e.setAttribute("status", this.status), this.status === "error" && this.assistiveText && (e.setAttribute("assistiveText", this.assistiveText), e.dispatchEvent(new CustomEvent(T, { bubbles: !1, composed: !1, detail: { error: !0 } })));
     });
   }
   /**
-   * Function that updates the local `hasLabel` state in case
+   * Function that updates the local `_hasLabel` state in case
    * when the label slot receives content.
    * @private
    */
   handleSlotChange(e) {
-    const t = e.target.assignedNodes({ flatten: !0 });
-    this.hasLabel = t.length > 0;
+    const i = e.target.assignedNodes({ flatten: !0 });
+    this._hasLabel = i.length > 0;
   }
   /**
    * Template for the label slot to correctly wrap it into a legend element when it has content.
@@ -47,7 +45,7 @@ const x = "pie-checkbox-group", u = "assistive-text", d = class d extends m(y(g)
    * @private
    */
   renderWrappedLabel() {
-    return this.hasLabel ? n`<legend><slot name='label' @slotchange=${this.handleSlotChange}></slot></legend>` : n`<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();
@@ -55,68 +53,65 @@ const x = "pie-checkbox-group", u = "assistive-text", d = class d extends m(y(g)
   render() {
     const {
       name: e,
-      isInline: t,
-      assistiveText: l,
-      status: o,
+      isInline: i,
+      assistiveText: r,
+      status: s,
       disabled: a
-    } = this, r = {
+    } = this, l = {
       "c-checkboxGroup": !0,
-      "c-checkboxGroup--inline": t
+      "c-checkboxGroup--inline": i
     };
     return n`
             <fieldset
                 name=${b(e)}
                 ?disabled=${a}
-                aria-describedby="${b(l ? u : void 0)}"
+                aria-describedby="${b(r ? u : void 0)}"
                 data-test-id="pie-checkbox-group"
-                class="${C(r)}"
+                class="${C(l)}"
             >
                 ${this.renderWrappedLabel()}
                 <slot></slot>
             </fieldset>
-            ${l && n`
+            ${r && n`
                 <pie-assistive-text
                     id="${u}"
-                    variant=${o}
+                    variant=${s}
                     class="c-checkboxGroup-assistiveText"
                     data-test-id="pie-checkbox-group-assistive-text">
-                        ${l}
+                        ${r}
                 </pie-assistive-text>`}
         `;
   }
 };
-d.styles = k(E);
-let s = d;
-i([
-  v()
-], s.prototype, "hasLabel");
-i([
+d.styles = g(E);
+let t = d;
+o([
+  k()
+], t.prototype, "_hasLabel");
+o([
   c({ type: String })
-], s.prototype, "name");
-i([
+], t.prototype, "name");
+o([
   c({ type: String })
-], s.prototype, "assistiveText");
-i([
+], t.prototype, "assistiveText");
+o([
   c({ type: Boolean })
-], s.prototype, "isInline");
-i([
+], t.prototype, "isInline");
+o([
   c({ type: String }),
-  G(x, S, p.status)
-], s.prototype, "status");
-i([
+  _(f, S, p.status)
+], t.prototype, "status");
+o([
   c({ type: Boolean, reflect: !0 })
-], s.prototype, "disabled");
-i([
-  f({ selector: "pie-checkbox" })
-], s.prototype, "_slottedChildren");
-i([
-  f({ slot: "label" })
-], s.prototype, "_labelSlot");
-_(x, s);
+], t.prototype, "disabled");
+o([
+  v({ selector: "pie-checkbox" })
+], t.prototype, "_slottedChildren");
+G(f, t);
 export {
   $ as ON_CHECKBOX_GROUP_DISABLED,
   T as ON_CHECKBOX_GROUP_ERROR,
-  s as PieCheckboxGroup,
+  t as PieCheckboxGroup,
   p as defaultProps,
   S as statusTypes
 };

package/dist/react.d.ts

@@ -54,18 +54,17 @@ export declare const PieCheckboxGroup: React_2.ForwardRefExoticComponent<Checkbo
  * @event {CustomEvent} pie-checkbox-group-error - triggered after the state of the checkbox group changes to error.
  */
 declare class PieCheckboxGroup_2 extends PieCheckboxGroup_base implements CheckboxGroupProps {
-    hasLabel: boolean;
-    name?: CheckboxGroupProps['name'];
+    private _hasLabel;
+    name: CheckboxGroupProps['name'];
     assistiveText?: CheckboxGroupProps['assistiveText'];
     isInline: boolean;
     status: "default" | "error" | "success";
     disabled: boolean;
-    _slottedChildren: Array<HTMLElement> | undefined;
-    _labelSlot: Array<HTMLElement>;
+    _slottedChildren: Array<HTMLElement>;
     private _handleDisabled;
     private _handleStatus;
     /**
-     * Function that updates the local `hasLabel` state in case
+     * Function that updates the local `_hasLabel` state in case
      * when the label slot receives content.
      * @private
      */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-checkbox-group",
   "description": "PIE Design System Checkbox Group built using Web Components",
-  "version": "0.7.3",
+  "version": "0.7.5",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -36,12 +36,13 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
+    "@justeattakeaway/pie-checkbox": "0.13.5",
     "@justeattakeaway/pie-components-config": "0.18.0",
     "@justeattakeaway/pie-css": "0.13.1",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-assistive-text": "0.7.4",
+    "@justeattakeaway/pie-assistive-text": "0.7.5",
     "@justeattakeaway/pie-webc-core": "0.24.2"
   },
   "volta": {

package/src/index.ts

@@ -1,5 +1,5 @@
 import {
-    LitElement, html, unsafeCSS, type PropertyValues, type nothing, type TemplateResult,
+    LitElement, html, unsafeCSS, type PropertyValues, type TemplateResult,
 } from 'lit';
 import { property, queryAssignedElements, state } from 'lit/decorators.js';
 import {
@@ -35,10 +35,10 @@ const assistiveTextId = 'assistive-text';
  */
 export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) implements CheckboxGroupProps {
     @state()
-        hasLabel = false;
+    private _hasLabel = false;
 
     @property({ type: String })
-    public name?: CheckboxGroupProps['name'];
+    public name: CheckboxGroupProps['name'];
 
     @property({ type: String })
     public assistiveText?: CheckboxGroupProps['assistiveText'];
@@ -53,18 +53,16 @@ export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) imp
     @property({ type: Boolean, reflect: true })
     public disabled = defaultProps.disabled;
 
-    @queryAssignedElements({ selector: 'pie-checkbox' }) _slottedChildren: Array<HTMLElement> | undefined;
-
-    @queryAssignedElements({ slot: 'label' }) _labelSlot!: Array<HTMLElement>;
+    @queryAssignedElements({ selector: 'pie-checkbox' }) _slottedChildren!: Array<HTMLElement>;
 
     private _handleDisabled () : void {
-        this._slottedChildren?.forEach((child) => child.dispatchEvent(new CustomEvent(ON_CHECKBOX_GROUP_DISABLED, {
+        this._slottedChildren.forEach((child) => child.dispatchEvent(new CustomEvent(ON_CHECKBOX_GROUP_DISABLED, {
             bubbles: false, composed: false, detail: { disabled: this.disabled },
         })));
     }
 
     private _handleStatus () : void {
-        this._slottedChildren?.forEach((child) => {
+        this._slottedChildren.forEach((child) => {
             child.setAttribute('status', this.status);
 
             if (this.status === 'error' && this.assistiveText) {
@@ -75,13 +73,13 @@ export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) imp
     }
 
     /**
-     * Function that updates the local `hasLabel` state in case
+     * Function that updates the local `_hasLabel` state in case
      * when the label slot receives content.
      * @private
      */
     private handleSlotChange (e: { target: HTMLSlotElement; }) {
         const childNodes = e.target.assignedNodes({ flatten: true });
-        this.hasLabel = childNodes.length > 0;
+        this._hasLabel = childNodes.length > 0;
     }
 
     /**
@@ -89,8 +87,8 @@ export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) imp
      * Called within the main render function.
      * @private
      */
-    private renderWrappedLabel (): TemplateResult | typeof nothing {
-        return this.hasLabel ? html`<legend><slot name='label' @slotchange=${this.handleSlotChange}></slot></legend>` : html`<slot name='label' @slotchange=${this.handleSlotChange}></slot>`;
+    private renderWrappedLabel (): TemplateResult {
+        return this._hasLabel ? html`<legend><slot name='label' @slotchange=${this.handleSlotChange}></slot></legend>` : html`<slot name='label' @slotchange=${this.handleSlotChange}></slot>`;
     }
 
     protected updated (_changedProperties: PropertyValues<this>): void {