@justeattakeaway/pie-webc-core 18.0.0 → 18.1.0

package/README.md

@@ -34,16 +34,10 @@ $ yarn add @justeattakeaway/pie-webc-core
 ## Importing the package
 
 ```js
-import { RequiredProperty, RtlMixin } from '@justeattakeaway/pie-webc-core';
+import { RtlMixin } from '@justeattakeaway/pie-webc-core';
 
 export class MyComponent extends RtlMixin(LitElement) implements MyComponentProps {
   // ...
-
-  @property({ type: String })
-  @requiredProperty('my-component')
-  public value!: string;
-
-  // ...
 }
 ```
 ## Internals

package/dist/index.js

@@ -1,54 +1,39 @@
-import { customElement as d } from "lit/decorators.js";
+import { customElement as c } from "lit/decorators.js";
 /**
  * @license
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const p = Symbol("pie-aria"), m = Symbol("pie-parent-disabled"), v = (t, s, n) => function(i, r) {
+const b = Symbol("pie-aria"), h = Symbol("pie-parent-disabled"), p = (t, e, n) => function(i, r) {
   const o = `#${r}`;
   Object.defineProperty(i, r, {
     get() {
       return this[o];
     },
     set(a) {
-      s.includes(a) ? this[o] = a : (console.error(
+      e.includes(a) ? this[o] = a : (console.error(
         `<${t}> Invalid value "${a}" provided for property "${r}".`,
-        `Must be one of: ${s.join(" | ")}.`,
+        `Must be one of: ${e.join(" | ")}.`,
         `Falling back to default value: "${n}"`
       ), this[o] = n);
     },
     configurable: !0
   });
-}, u = (t) => t == null || typeof t == "string" && t.trim() === "", g = (t) => function(n, e) {
-  const i = `#${e}`, r = `#${e}HasBeenSet`, o = `#${e}HasWarned`;
-  Object.defineProperty(n, e, {
-    get() {
-      return this[i];
-    },
-    set(l) {
-      this[r] = !0, u(l) && console.error(`<${t}> Missing required attribute "${e}"`), this[i] = l;
-    },
-    configurable: !0
-  });
-  const a = n, 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 x(t) {
-  return (s) => {
+function m(t) {
+  return (e) => {
     try {
-      d(t)(s);
+      c(t)(e);
     } catch (n) {
-      const e = customElements.get(t), i = e == null ? void 0 : e.v;
-      s.v !== i && console.warn(
+      const s = customElements.get(t), i = s == null ? void 0 : s.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."}.`,
         n
       );
     }
   };
 }
-function L(t) {
+function v(t) {
   return new CustomEvent(t.type, {
     detail: {
       sourceEvent: t
@@ -57,28 +42,28 @@ function L(t) {
     cancelable: t.cancelable
   });
 }
-function M(t, s, n) {
-  s.startsWith("pie-") || console.warn("A custom event name should start with `pie-`");
-  const e = new CustomEvent(s, {
+function f(t, e, n) {
+  e.startsWith("pie-") || console.warn("A custom event name should start with `pie-`");
+  const s = new CustomEvent(e, {
     bubbles: !0,
     composed: !0,
     detail: n
   });
-  t.dispatchEvent(e);
+  t.dispatchEvent(s);
 }
-function b() {
+function l() {
   return typeof navigator < "u" && /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 }
-const T = (t) => {
-  class s extends t {
+const g = (t) => {
+  class e extends t {
     constructor() {
       super(...arguments), this._isRTL = !1, this.observer = null;
     }
     get isRTL() {
       return this._isRTL;
     }
-    set isRTL(e) {
-      this._isRTL = e, this.requestUpdate();
+    set isRTL(s) {
+      this._isRTL = s, this.requestUpdate();
     }
     connectedCallback() {
       super.connectedCallback(), this.handleWritingDirectionUpdate(), this.observer = new MutationObserver(() => {
@@ -100,8 +85,8 @@ const T = (t) => {
       this.isRTL = this.dir === "rtl" || document.documentElement.getAttribute("dir") === "rtl";
     }
   }
-  return s;
-}, $ = (t) => {
+  return e;
+}, x = (t) => {
   const n = class n extends t {
     get form() {
       return this._internals.form;
@@ -112,9 +97,9 @@ const T = (t) => {
     }
   };
   n.formAssociated = !0;
-  let s = n;
-  return s;
-}, E = (t) => {
+  let e = n;
+  return e;
+}, L = (t) => {
   const n = class n extends t {
   };
   n.shadowRootOptions = {
@@ -125,47 +110,46 @@ const T = (t) => {
     ...t.shadowRootOptions,
     delegatesFocus: !0
   };
-  let s = n;
-  return s;
-}, h = (t) => Array.from(t).map((n) => {
-  var e;
-  return ((e = n.textContent) == null ? void 0 : e.replace(/\s+/g, " ").trim()) ?? "";
-}).filter(Boolean).join(" ").trim() || void 0, w = (t) => {
-  class s extends t {
+  let e = n;
+  return e;
+}, d = (t) => Array.from(t).map((n) => {
+  var s;
+  return ((s = n.textContent) == null ? void 0 : s.replace(/\s+/g, " ").trim()) ?? "";
+}).filter(Boolean).join(" ").trim() || void 0, T = (t) => {
+  class e extends t {
     get associatedLabelText() {
       return this._associatedLabelText;
     }
-    firstUpdated(e) {
-      super.firstUpdated(e), this.observeAssociatedLabels();
+    firstUpdated(s) {
+      super.firstUpdated(s), this.observeAssociatedLabels();
     }
     disconnectedCallback() {
-      var e;
-      super.disconnectedCallback(), (e = this._labelMutationObserver) == null || e.disconnect();
+      var s;
+      super.disconnectedCallback(), (s = this._labelMutationObserver) == null || s.disconnect();
     }
     updateAssociatedLabelText() {
-      this._associatedLabelText = h(this._internals.labels), this.requestUpdate();
+      this._associatedLabelText = d(this._internals.labels), this.requestUpdate();
     }
     observeAssociatedLabels() {
-      const { labels: e } = this._internals;
-      !b() || !e.length || (this.updateAssociatedLabelText(), this._labelMutationObserver = new MutationObserver(() => this.updateAssociatedLabelText()), e.forEach((i) => {
+      const { labels: s } = this._internals;
+      !l() || !s.length || (this.updateAssociatedLabelText(), this._labelMutationObserver = new MutationObserver(() => this.updateAssociatedLabelText()), s.forEach((i) => {
         var r;
         (r = this._labelMutationObserver) == null || r.observe(i, { childList: !0, characterData: !0, subtree: !0 });
       }));
     }
   }
-  return s;
+  return e;
 };
 export {
-  w as AssociatedLabelMixin,
-  E as DelegatesFocusMixin,
-  $ as FormControlMixin,
-  T as RtlMixin,
-  p as ariaContext,
-  M as dispatchCustomEvent,
-  b as isSafari,
-  m as parentDisabledContext,
-  g as requiredProperty,
-  x as safeCustomElement,
-  v as validPropertyValues,
-  L as wrapNativeEvent
+  T as AssociatedLabelMixin,
+  L as DelegatesFocusMixin,
+  x as FormControlMixin,
+  g as RtlMixin,
+  b as ariaContext,
+  f as dispatchCustomEvent,
+  l as isSafari,
+  h as parentDisabledContext,
+  m as safeCustomElement,
+  p as validPropertyValues,
+  v as wrapNativeEvent
 };

package/package.json

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

package/src/decorators/index.ts

@@ -1,3 +1,2 @@
 export * from './valid-property-values';
-export * from './required-property';
 export * from './safe-custom-element';

package/src/decorators/required-property.ts

@@ -1,46 +0,0 @@
-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 {
-            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}"`);
-        }
-    };
-};