@justeattakeaway/pie-webc-core 15.0.1 → 15.1.0

package/dist/index.js

@@ -1,49 +1,49 @@
 import { customElement as d } from "lit/decorators.js";
-const b = (t, e, s) => function(i, r) {
+const p = (t, s, i) => function(n, r) {
   const o = `#${r}`;
-  Object.defineProperty(i, r, {
+  Object.defineProperty(n, r, {
     get() {
       return this[o];
     },
-    set(c) {
-      e.includes(c) ? this[o] = c : (console.error(
-        `<${t}> Invalid value "${c}" provided for property "${r}".`,
-        `Must be one of: ${e.join(" | ")}.`,
-        `Falling back to default value: "${s}"`
-      ), this[o] = s);
+    set(a) {
+      s.includes(a) ? this[o] = a : (console.error(
+        `<${t}> Invalid value "${a}" provided for property "${r}".`,
+        `Must be one of: ${s.join(" | ")}.`,
+        `Falling back to default value: "${i}"`
+      ), this[o] = i);
     },
     configurable: !0
   });
-}, l = (t) => t == null || typeof t == "string" && t.trim() === "", f = (t) => function(s, n) {
-  const i = `#${n}`, r = `#${n}HasBeenSet`, o = `#${n}HasWarned`;
-  Object.defineProperty(s, n, {
+}, u = (t) => t == null || typeof t == "string" && t.trim() === "", v = (t) => function(i, e) {
+  const n = `#${e}`, r = `#${e}HasBeenSet`, o = `#${e}HasWarned`;
+  Object.defineProperty(i, e, {
     get() {
-      return this[i];
+      return this[n];
     },
-    set(u) {
-      this[r] = !0, l(u) && console.error(`<${t}> Missing required attribute "${n}"`), this[i] = u;
+    set(l) {
+      this[r] = !0, u(l) && console.error(`<${t}> Missing required attribute "${e}"`), this[n] = l;
     },
     configurable: !0
   });
-  const c = s, a = c.connectedCallback;
-  c.connectedCallback = function() {
-    a == null || a.call(this), !this[r] && !this[o] && (this[o] = !0, console.error(`<${t}> Missing required attribute "${n}"`));
+  const a = i, c = a.connectedCallback;
+  a.connectedCallback = function() {
+    c == null || c.call(this), !this[r] && !this[o] && (this[o] = !0, console.error(`<${t}> Missing required attribute "${e}"`));
   };
 };
 function m(t) {
-  return (e) => {
+  return (s) => {
     try {
-      d(t)(e);
-    } catch (s) {
-      const n = customElements.get(t), i = n == null ? void 0 : n.v;
-      e.v !== i && console.warn(
-        `PIE Web Component: "${t}" was already registered with version: ${i ?? "No version data found. Icon components do not contain version data. If the component is not an icon, please report the missing version data."}.`,
-        s
+      d(t)(s);
+    } catch (i) {
+      const e = customElements.get(t), n = e == null ? void 0 : e.v;
+      s.v !== n && console.warn(
+        `PIE Web Component: "${t}" was already registered with version: ${n ?? "No version data found. Icon components do not contain version data. If the component is not an icon, please report the missing version data."}.`,
+        i
       );
     }
   };
 }
-function v(t) {
+function g(t) {
   return new CustomEvent(t.type, {
     detail: {
       sourceEvent: t
@@ -52,25 +52,28 @@ function v(t) {
     cancelable: t.cancelable
   });
 }
-function g(t, e, s) {
-  e.startsWith("pie-") || console.warn("A custom event name should start with `pie-`");
-  const n = new CustomEvent(e, {
+function x(t, s, i) {
+  s.startsWith("pie-") || console.warn("A custom event name should start with `pie-`");
+  const e = new CustomEvent(s, {
     bubbles: !0,
     composed: !0,
-    detail: s
+    detail: i
   });
-  t.dispatchEvent(n);
+  t.dispatchEvent(e);
 }
-const p = (t) => {
-  class e extends t {
+function b() {
+  return typeof navigator < "u" && /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+}
+const L = (t) => {
+  class s extends t {
     constructor() {
       super(...arguments), this._isRTL = !1, this.observer = null;
     }
     get isRTL() {
       return this._isRTL;
     }
-    set isRTL(n) {
-      this._isRTL = n, this.requestUpdate();
+    set isRTL(e) {
+      this._isRTL = e, this.requestUpdate();
     }
     connectedCallback() {
       super.connectedCallback(), this.handleWritingDirectionUpdate(), this.observer = new MutationObserver(() => {
@@ -92,24 +95,24 @@ const p = (t) => {
       this.isRTL = this.dir === "rtl" || document.documentElement.getAttribute("dir") === "rtl";
     }
   }
-  return e;
-}, $ = (t) => {
-  const s = class s extends t {
+  return s;
+}, M = (t) => {
+  const i = class i extends t {
     get form() {
       return this._internals.form;
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    constructor(...i) {
-      super(...i), this._internals = this.attachInternals();
+    constructor(...n) {
+      super(...n), this._internals = this.attachInternals();
     }
   };
-  s.formAssociated = !0;
-  let e = s;
-  return e;
-}, w = (t) => {
-  const s = class s extends t {
+  i.formAssociated = !0;
+  let s = i;
+  return s;
+}, T = (t) => {
+  const i = class i extends t {
   };
-  s.shadowRootOptions = {
+  i.shadowRootOptions = {
     // The `as any` cast is a safe way to access the static property
     // from the generic superclass constructor. LitElement provides a default.
     // This is unfortunately unavoidable and a common issue with mixins in TS.
@@ -117,16 +120,45 @@ const p = (t) => {
     ...t.shadowRootOptions,
     delegatesFocus: !0
   };
-  let e = s;
-  return e;
+  let s = i;
+  return s;
+}, h = (t) => Array.from(t).map((i) => {
+  var e;
+  return ((e = i.textContent) == null ? void 0 : e.replace(/\s+/g, " ").trim()) ?? "";
+}).filter(Boolean).join(" ").trim() || void 0, $ = (t) => {
+  class s extends t {
+    get associatedLabelText() {
+      return this._associatedLabelText;
+    }
+    firstUpdated(e) {
+      super.firstUpdated(e), this.observeAssociatedLabels();
+    }
+    disconnectedCallback() {
+      var e;
+      super.disconnectedCallback(), (e = this._labelMutationObserver) == null || e.disconnect();
+    }
+    updateAssociatedLabelText() {
+      this._associatedLabelText = h(this._internals.labels), this.requestUpdate();
+    }
+    observeAssociatedLabels() {
+      const { labels: e } = this._internals;
+      !b() || !e.length || (this.updateAssociatedLabelText(), this._labelMutationObserver = new MutationObserver(() => this.updateAssociatedLabelText()), e.forEach((n) => {
+        var r;
+        (r = this._labelMutationObserver) == null || r.observe(n, { childList: !0, characterData: !0, subtree: !0 });
+      }));
+    }
+  }
+  return s;
 };
 export {
-  w as DelegatesFocusMixin,
-  $ as FormControlMixin,
-  p as RtlMixin,
-  g as dispatchCustomEvent,
-  f as requiredProperty,
+  $ as AssociatedLabelMixin,
+  T as DelegatesFocusMixin,
+  M as FormControlMixin,
+  L as RtlMixin,
+  x as dispatchCustomEvent,
+  b as isSafari,
+  v as requiredProperty,
   m as safeCustomElement,
-  b as validPropertyValues,
-  v as wrapNativeEvent
+  p as validPropertyValues,
+  g as wrapNativeEvent
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-webc-core",
-  "version": "15.0.1",
+  "version": "15.1.0",
   "description": "PIE design system base classes, mixins and utilities for web components",
   "type": "module",
   "main": "dist/index.js",

package/src/functions/index.ts

@@ -1,2 +1,3 @@
 export * from './wrapNativeEvent';
 export * from './dispatchCustomEvent';
+export * from './isSafari';

package/src/functions/isSafari.ts

@@ -0,0 +1,6 @@
+/**
+ * Detects whether the current browser is Safari.
+ */
+export function isSafari (): boolean {
+    return typeof navigator !== 'undefined' && /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+}

package/src/mixins/associatedLabel/associatedLabelMixin.ts

@@ -0,0 +1,106 @@
+import { type LitElement, type PropertyValues } from 'lit';
+import type { GenericConstructor } from '../types/GenericConstructor';
+import { isSafari } from '../../functions/isSafari';
+
+/**
+ * Joins and normalises the text content of a set of `<label>` elements into a single string.
+ */
+const getLabelText = (labels: NodeList): string | undefined => {
+    const labelText = Array.from(labels)
+        .map((label) => label.textContent?.replace(/\s+/g, ' ').trim() ?? '')
+        .filter(Boolean)
+        .join(' ')
+        .trim();
+
+    return labelText || undefined;
+};
+
+/**
+ * An interface representing the structure of a class that has been extended
+ * with the AssociatedLabelMixin.
+ * @interface
+ */
+export interface AssociatedLabelInterface {
+    /** The text content of the element's associated `<label>`(s) */
+    readonly associatedLabelText?: string;
+}
+
+/**
+ * A mixin that mirrors the text content of a form-associated custom element's associated
+ * `<label>`(s) onto an `associatedLabelText` property.
+ *
+ * Safari doesn't compute the accessible name of a form-associated
+ * custom element from its associated `<label>` the way others do, so we need to use
+ * `associatedLabelText` as a fallback `aria-label`.
+ * https://bugs.webkit.org/show_bug.cgi?id=259124
+ *
+ *
+ * The class this mixin is applied to must already provide `_internals: ElementInternals`
+ * (for example via `FormControlMixin`), and must call `super.firstUpdated()` if it overrides
+ * `firstUpdated`.
+ *
+ * @param superClass - The LitElement class (with `_internals`) to extend.
+ * @returns A new class extending both the provided LitElement and AssociatedLabelInterface.
+ *
+ * @example
+ * ```typescript
+ * import { html } from 'lit';
+ * import { FormControlMixin, AssociatedLabelMixin } from '@justeattakeaway/pie-webc-core';
+ *
+ * class MyFormElement extends AssociatedLabelMixin(FormControlMixin(LitElement)) {
+ *   render () {
+ *     return html`<input aria-label="${this.associatedLabelText}">`;
+ *   }
+ * }
+ * ```
+ */
+export const AssociatedLabelMixin =
+    <T extends GenericConstructor<LitElement & { _internals: ElementInternals }>>(superClass: T) => {
+        /**
+         * Class representing a LitElement with associated label handling.
+         * @extends {LitElement}
+         * @implements {AssociatedLabelInterface}
+         */
+        class AssociatedLabelElement extends superClass implements AssociatedLabelInterface {
+            private _associatedLabelText?: string;
+
+            get associatedLabelText () {
+                return this._associatedLabelText;
+            }
+
+            private _labelMutationObserver?: MutationObserver;
+
+            protected firstUpdated (changedProperties: PropertyValues) {
+                super.firstUpdated(changedProperties);
+                this.observeAssociatedLabels();
+            }
+
+            disconnectedCallback () {
+                super.disconnectedCallback();
+                this._labelMutationObserver?.disconnect();
+            }
+
+            private updateAssociatedLabelText () : void {
+                this._associatedLabelText = getLabelText(this._internals.labels);
+                this.requestUpdate();
+            }
+
+            private observeAssociatedLabels () : void {
+                const { labels } = this._internals;
+
+                if (!isSafari() || !labels.length) {
+                    return;
+                }
+
+                this.updateAssociatedLabelText();
+
+                this._labelMutationObserver = new MutationObserver(() => this.updateAssociatedLabelText());
+
+                labels.forEach((label) => {
+                    this._labelMutationObserver?.observe(label, { childList: true, characterData: true, subtree: true });
+                });
+            }
+        }
+
+        return AssociatedLabelElement as GenericConstructor<AssociatedLabelInterface> & T;
+    };

package/src/mixins/index.ts

@@ -1,5 +1,6 @@
 export * from './rtl/rtlMixin';
 export * from './formControl/formControlMixin';
 export * from './delegatesFocus/delegatesFocusMixin';
+export * from './associatedLabel/associatedLabelMixin';
 
 export * from './types/GenericConstructor';