@justeattakeaway/pie-webc-core 15.0.0 → 15.1.0

package/dist/index.js

@@ -1,45 +1,49 @@
-import { customElement as a } from "lit/decorators.js";
-const d = (t, e, s) => function(r, i) {
-  const o = `#${i}`;
-  Object.defineProperty(r, i, {
+import { customElement as d } from "lit/decorators.js";
+const p = (t, s, i) => function(n, r) {
+  const o = `#${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 "${i}".`,
-        `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) => function(s, n) {
-  const r = `#${n}`;
-  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[r];
+      return this[n];
     },
-    set(i) {
-      (i == null || typeof i == "string" && i.trim() === "") && console.error(`<${t}> Missing required attribute "${n}"`), this[r] = i;
+    set(l) {
+      this[r] = !0, u(l) && console.error(`<${t}> Missing required attribute "${e}"`), this[n] = l;
     },
     configurable: !0
   });
+  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 h(t) {
-  return (e) => {
+function m(t) {
+  return (s) => {
     try {
-      a(t)(e);
-    } catch (s) {
-      const n = customElements.get(t), r = n == null ? void 0 : n.v;
-      e.v !== r && console.warn(
-        `PIE Web Component: "${t}" was already registered with version: ${r ?? "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 b(t) {
+function g(t) {
   return new CustomEvent(t.type, {
     detail: {
       sourceEvent: t
@@ -48,25 +52,28 @@ function b(t) {
     cancelable: t.cancelable
   });
 }
-function p(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);
+}
+function b() {
+  return typeof navigator < "u" && /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 }
-const m = (t) => {
-  class e extends t {
+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(() => {
@@ -88,24 +95,24 @@ const m = (t) => {
       this.isRTL = this.dir === "rtl" || document.documentElement.getAttribute("dir") === "rtl";
     }
   }
-  return e;
-}, f = (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(...r) {
-      super(...r), this._internals = this.attachInternals();
+    constructor(...n) {
+      super(...n), this._internals = this.attachInternals();
     }
   };
-  s.formAssociated = !0;
-  let e = s;
-  return e;
-}, v = (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.
@@ -113,16 +120,45 @@ const m = (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 {
-  v as DelegatesFocusMixin,
-  f as FormControlMixin,
-  m as RtlMixin,
-  p as dispatchCustomEvent,
-  l as requiredProperty,
-  h as safeCustomElement,
-  d as validPropertyValues,
-  b as wrapNativeEvent
+  $ as AssociatedLabelMixin,
+  T as DelegatesFocusMixin,
+  M as FormControlMixin,
+  L as RtlMixin,
+  x as dispatchCustomEvent,
+  b as isSafari,
+  v as requiredProperty,
+  m as safeCustomElement,
+  p as validPropertyValues,
+  g as wrapNativeEvent
 };

package/package.json

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

package/src/decorators/required-property.ts

@@ -1,21 +1,46 @@
+const isMissing = <T>(value: T): boolean => value === undefined || value === null || (typeof value === 'string' && value.trim() === '');
+
 /**
  * A decorator for marking a property as required.
  * If the property's value is `undefined`, `null` or empty string, an error is logged.
+ *
+ * This also checks on `connectedCallback` so a missing required property is still reported
+ * even when the corresponding attribute is never set at all (in which case the property
+ * setter below is never invoked).
  * @returns {Function} - The decorator function.
  */
 export const requiredProperty = <T>(componentName: string) => function validateRequiredProperty (target: object, propertyKey: string): void {
     const privatePropertyKey = `#${propertyKey}`;
+    const hasBeenSetKey = `#${propertyKey}HasBeenSet`;
+    const hasWarnedKey = `#${propertyKey}HasWarned`;
 
     Object.defineProperty(target, propertyKey, {
         get (): T {
             return this[privatePropertyKey];
         },
         set (value: T): void {
-            if (value === undefined || value === null || (typeof value === 'string' && value.trim() === '')) {
+            this[hasBeenSetKey] = true;
+
+            if (isMissing(value)) {
                 console.error(`<${componentName}> Missing required attribute "${propertyKey}"`);
             }
             this[privatePropertyKey] = value;
         },
         configurable: true,
     });
+
+    const elementProto = target as { connectedCallback?: (this: Record<string, unknown>) => void };
+    const originalConnectedCallback = elementProto.connectedCallback;
+
+    elementProto.connectedCallback = function connectedCallback (this: Record<string, unknown>): void {
+        originalConnectedCallback?.call(this);
+
+        // Guard with a dedicated "has warned" flag (rather than reusing hasBeenSetKey) so an
+        // element that reconnects repeatedly while still missing the prop (e.g. a virtualised
+        // list recycling DOM nodes) only logs once, instead of on every reconnect.
+        if (!this[hasBeenSetKey] && !this[hasWarnedKey]) {
+            this[hasWarnedKey] = true;
+            console.error(`<${componentName}> Missing required attribute "${propertyKey}"`);
+        }
+    };
 };

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';