@justeattakeaway/pie-radio-group 0.7.2 → 0.8.0

package/custom-elements.json

@@ -503,8 +503,8 @@
             }
           ],
           "superclass": {
-            "name": "LitElement",
-            "package": "lit"
+            "name": "PieElement",
+            "package": "@justeattakeaway/pie-webc-core/src/internals/PieElement"
           },
           "tagName": "pie-radio-group",
           "customElement": true

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
-import type { LitElement } from 'lit';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import type { PropertyValues } from 'lit';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import type { TemplateResult } from 'lit';
@@ -147,7 +147,7 @@ export declare class PieRadioGroup extends PieRadioGroup_base implements RadioGr
     static styles: CSSResult;
 }
 
-declare const PieRadioGroup_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof LitElement;
+declare const PieRadioGroup_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof PieElement;
 
 export declare interface RadioGroupProps {
     /**

package/dist/index.js

@@ -1,25 +1,38 @@
-import { LitElement as g, html as c, nothing as u, unsafeCSS as m } from "lit";
-import { state as C, property as l, queryAssignedElements as y, query as v } from "lit/decorators.js";
-import { FormControlMixin as w, RtlMixin as x, wrapNativeEvent as S, validPropertyValues as T, defineCustomElement as A } from "@justeattakeaway/pie-webc-core";
-import { ifDefined as L } from "lit/directives/if-defined.js";
-import { classMap as E } from "lit/directives/class-map.js";
+import { LitElement as m, html as p, nothing as u, unsafeCSS as v } from "lit";
+import { property as l, state as y, queryAssignedElements as C, query as w } from "lit/decorators.js";
+import { FormControlMixin as x, RtlMixin as S, wrapNativeEvent as T, validPropertyValues as A, defineCustomElement as L } from "@justeattakeaway/pie-webc-core";
+import { ifDefined as E } from "lit/directives/if-defined.js";
+import { classMap as R } from "lit/directives/class-map.js";
 import "@justeattakeaway/pie-assistive-text";
-const R = "*,*:after,*:before{box-sizing:inherit}.c-radioGroup{--radio-group-gap: var(--dt-spacing-c);--radio-group-gap--inline: var(--dt-spacing-c) var(--dt-spacing-e);margin:0;padding:0;border:0;min-width:0;display:flex;flex-flow:column wrap;gap:var(--radio-group-gap)}.c-radioGroup>legend{margin-block-end:var(--dt-spacing-b)}.c-radioGroup.c-radioGroup--inline{flex-flow:row wrap;gap:var(--radio-group-gap--inline)}.c-radioGroup.c-radioGroup--hasAssistiveText{margin-block-end:var(--dt-spacing-a)}", k = ["default", "success", "error"], F = "pie-radio-group-disabled", h = {
+var k = Object.defineProperty, F = (h, e, t, i) => {
+  for (var s = void 0, a = h.length - 1, r; a >= 0; a--)
+    (r = h[a]) && (s = r(e, t, s) || s);
+  return s && k(e, t, s), s;
+};
+class _ extends m {
+  constructor() {
+    super(...arguments), this.v = "0.8.0";
+  }
+}
+F([
+  l({ type: String, reflect: !0 })
+], _.prototype, "v");
+const $ = "*,*:after,*:before{box-sizing:inherit}.c-radioGroup{--radio-group-gap: var(--dt-spacing-c);--radio-group-gap--inline: var(--dt-spacing-c) var(--dt-spacing-e);margin:0;padding:0;border:0;min-width:0;display:flex;flex-flow:column wrap;gap:var(--radio-group-gap)}.c-radioGroup>legend{margin-block-end:var(--dt-spacing-b)}.c-radioGroup.c-radioGroup--inline{flex-flow:row wrap;gap:var(--radio-group-gap--inline)}.c-radioGroup.c-radioGroup--hasAssistiveText{margin-block-end:var(--dt-spacing-a)}", I = ["default", "success", "error"], D = "pie-radio-group-disabled", c = {
   status: "default",
   disabled: !1,
   isInline: !1,
   value: ""
 };
-var I = Object.defineProperty, d = (p, e, t, s) => {
-  for (var i = void 0, a = p.length - 1, n; a >= 0; a--)
-    (n = p[a]) && (i = n(e, t, i) || i);
-  return i && I(e, t, i), i;
+var G = Object.defineProperty, d = (h, e, t, i) => {
+  for (var s = void 0, a = h.length - 1, r; a >= 0; a--)
+    (r = h[a]) && (s = r(e, t, s) || s);
+  return s && G(e, t, s), s;
 };
-const _ = "pie-radio-group", f = "assistive-text";
-var r;
-const o = (r = class extends w(x(g)) {
+const g = "pie-radio-group", f = "assistive-text";
+var n;
+const o = (n = class extends x(S(_)) {
   constructor() {
-    super(...arguments), this._hasLabel = !1, this.value = h.value, this.isInline = h.isInline, this.disabled = h.disabled, this.status = h.status;
+    super(...arguments), this._hasLabel = !1, this.value = c.value, this.isInline = c.isInline, this.disabled = c.disabled, this.status = c.status;
   }
   /**
    * Dispatches a custom event to notify each slotted child radio element
@@ -27,7 +40,7 @@ const o = (r = class extends w(x(g)) {
    * @private
    */
   _handleDisabled() {
-    this._slottedChildren.forEach((e) => e.dispatchEvent(new CustomEvent(F, {
+    this._slottedChildren.forEach((e) => e.dispatchEvent(new CustomEvent(D, {
       bubbles: !1,
       composed: !1,
       detail: { disabled: this.disabled }
@@ -60,8 +73,8 @@ const o = (r = class extends w(x(g)) {
     e.stopPropagation();
     const t = e.target;
     this._handleRadioSelection(t.value);
-    const s = S(e);
-    this.dispatchEvent(s);
+    const i = T(e);
+    this.dispatchEvent(i);
   }
   /**
    * Updates the `_hasLabel` state when content is added to the label slot.
@@ -84,7 +97,7 @@ const o = (r = class extends w(x(g)) {
    * @private
    */
   _renderWrappedLabel() {
-    return this._hasLabel ? c`<legend><slot name='label' @slotchange=${this._handleLabelSlotChange}></slot></legend>` : c`<slot name='label' @slotchange=${this._handleLabelSlotChange}></slot>`;
+    return this._hasLabel ? p`<legend><slot name='label' @slotchange=${this._handleLabelSlotChange}></slot></legend>` : p`<slot name='label' @slotchange=${this._handleLabelSlotChange}></slot>`;
   }
   _applyNameToChildren() {
     this._slottedChildren.forEach((e) => {
@@ -104,7 +117,7 @@ const o = (r = class extends w(x(g)) {
    * Updates the state of `_wasShiftTabPressed` based on the last `Tab` key press.
    */
   _updateShiftTabState(e) {
-    e.key === "Tab" && (r._wasShiftTabPressed = e.shiftKey);
+    e.key === "Tab" && (n._wasShiftTabPressed = e.shiftKey);
   }
   /**
    * Handles the `focusin` event to manage focus within the radio group.
@@ -114,10 +127,10 @@ const o = (r = class extends w(x(g)) {
    * and focuses the checked option, the first option, or the last option as needed.
    */
   _handleFocusIn(e) {
-    var i;
+    var s;
     if (this !== e.target) return;
-    const t = r._wasShiftTabPressed, s = ((i = this._slottedChildren) == null ? void 0 : i.find((a) => a.checked)) || (t ? this._slottedChildren.at(-1) : this._slottedChildren[0]);
-    s && (s.focus(), this._toggleFieldsetTabindex(!1));
+    const t = n._wasShiftTabPressed, i = ((s = this._slottedChildren) == null ? void 0 : s.find((a) => a.checked)) || (t ? this._slottedChildren.at(-1) : this._slottedChildren[0]);
+    i && (i.focus(), this._toggleFieldsetTabindex(!1));
   }
   /**
    * Handles the `focusout` event to restore the `tabindex` on the radio group's `fieldset`.
@@ -133,8 +146,8 @@ const o = (r = class extends w(x(g)) {
     e ? this._fieldset.setAttribute("tabindex", "0") : this._fieldset.removeAttribute("tabindex");
   }
   _moveFocus(e, t) {
-    const s = (e + t + this._slottedChildren.length) % this._slottedChildren.length;
-    this._focusAndClickOption(this._slottedChildren[s]);
+    const i = (e + t + this._slottedChildren.length) % this._slottedChildren.length;
+    this._focusAndClickOption(this._slottedChildren[i]);
   }
   /**
    * Determines if a key press indicates forward navigation within the radio group.
@@ -174,15 +187,15 @@ const o = (r = class extends w(x(g)) {
    * the default browser behaviour (e.g., scrolling) when arrow keys are used for navigation.
    */
   _handleKeyDown(e) {
-    const t = this._slottedChildren.find((i) => i === document.activeElement);
+    const t = this._slottedChildren.find((s) => s === document.activeElement);
     if (!t)
       return;
-    const s = this._slottedChildren.indexOf(t);
-    s !== -1 && (["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp"].includes(e.code) && e.preventDefault(), this._isForwardKey(e) ? this._moveFocus(s, 1) : this._isBackwardKey(e) && this._moveFocus(s, -1));
+    const i = this._slottedChildren.indexOf(t);
+    i !== -1 && (["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp"].includes(e.code) && e.preventDefault(), this._isForwardKey(e) ? this._moveFocus(i, 1) : this._isBackwardKey(e) && this._moveFocus(i, -1));
   }
   _focusAndClickOption(e) {
-    var t, s;
-    e.focus(), (s = (t = e.shadowRoot) == null ? void 0 : t.querySelector("input")) == null || s.click(), this._toggleFieldsetTabindex(!1);
+    var t, i;
+    e.focus(), (i = (t = e.shadowRoot) == null ? void 0 : t.querySelector("input")) == null || i.click(), this._toggleFieldsetTabindex(!1);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this._abortController.abort();
@@ -191,38 +204,38 @@ const o = (r = class extends w(x(g)) {
     const {
       name: e,
       isInline: t,
-      disabled: s,
-      status: i,
+      disabled: i,
+      status: s,
       assistiveText: a
-    } = this, n = !!(a != null && a.length), b = {
+    } = this, r = !!(a != null && a.length), b = {
       "c-radioGroup": !0,
       "c-radioGroup--inline": t,
-      "c-radioGroup--hasAssistiveText": n
+      "c-radioGroup--hasAssistiveText": r
     };
-    return c`
+    return p`
             <fieldset
                 role="radiogroup"
                 tabindex="0"
-                name=${L(e)}
-                ?disabled=${s}
+                name=${E(e)}
+                ?disabled=${i}
                 data-test-id="pie-radio-group-fieldset"
-                aria-describedby=${n ? f : u}
-                class="${E(b)}">
+                aria-describedby=${r ? f : u}
+                class="${R(b)}">
                     ${this._renderWrappedLabel()}
                 <slot @slotchange=${this._handleRadioSlotChange}></slot>
             </fieldset>
-            ${n ? c`
+            ${r ? p`
                 <pie-assistive-text
                     id=${f}
-                    variant=${i}
+                    variant=${s}
                     data-test-id="pie-radio-group-assistive-text">
                         ${a}
                     </pie-assistive-text>` : u}
         `;
   }
-}, r._wasShiftTabPressed = !1, r.styles = m(R), r);
+}, n._wasShiftTabPressed = !1, n.styles = v($), n);
 d([
-  C()
+  y()
 ], o.prototype, "_hasLabel");
 d([
   l({ type: String })
@@ -241,19 +254,19 @@ d([
 ], o.prototype, "assistiveText");
 d([
   l({ type: String }),
-  T(_, k, h.status)
+  A(g, I, c.status)
 ], o.prototype, "status");
 d([
-  y({ selector: "pie-radio" })
+  C({ selector: "pie-radio" })
 ], o.prototype, "_slottedChildren");
 d([
-  v("fieldset")
+  w("fieldset")
 ], o.prototype, "_fieldset");
-let $ = o;
-A(_, $);
+let O = o;
+L(g, O);
 export {
-  F as ON_RADIO_GROUP_DISABLED,
-  $ as PieRadioGroup,
-  h as defaultProps,
-  k as statusTypes
+  D as ON_RADIO_GROUP_DISABLED,
+  O as PieRadioGroup,
+  c as defaultProps,
+  I as statusTypes
 };

package/dist/react.d.ts

@@ -2,7 +2,7 @@ import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
-import type { LitElement } from 'lit';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import type { PropertyValues } from 'lit';
 import * as React_2 from 'react';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
@@ -150,7 +150,7 @@ declare class PieRadioGroup_2 extends PieRadioGroup_base implements RadioGroupPr
     static styles: CSSResult;
 }
 
-declare const PieRadioGroup_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof LitElement;
+declare const PieRadioGroup_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof PieElement;
 
 declare type PieRadioGroupEvents = {
     onChange?: (event: CustomEvent) => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-radio-group",
   "description": "PIE Design System Radio Group built using Web Components",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -33,14 +33,15 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "0.18.0",
-    "@justeattakeaway/pie-css": "0.14.1",
-    "@justeattakeaway/pie-radio": "0.8.1",
+    "@justeattakeaway/pie-components-config": "0.19.0",
+    "@justeattakeaway/pie-css": "0.16.0",
+    "@justeattakeaway/pie-monorepo-utils": "0.5.0",
+    "@justeattakeaway/pie-radio": "0.10.0",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-assistive-text": "0.8.4",
-    "@justeattakeaway/pie-webc-core": "0.24.2"
+    "@justeattakeaway/pie-assistive-text": "0.9.0",
+    "@justeattakeaway/pie-webc-core": "0.25.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/index.ts

@@ -1,11 +1,11 @@
 import {
-    LitElement,
     html,
     unsafeCSS,
     nothing,
     type PropertyValues,
     type TemplateResult,
 } from 'lit';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import {
     property, query, queryAssignedElements, state,
 } from 'lit/decorators.js';
@@ -39,7 +39,7 @@ const assistiveTextId = 'assistive-text';
  * @slot label - The label slot
  * @event {CustomEvent} change - when one of the radios state is changed.
  */
-export class PieRadioGroup extends FormControlMixin(RtlMixin(LitElement)) implements RadioGroupProps {
+export class PieRadioGroup extends FormControlMixin(RtlMixin(PieElement)) implements RadioGroupProps {
     @state()
     private _hasLabel = false;