@justeattakeaway/pie-link 0.11.2 → 0.11.3

package/dist/index.js

@@ -1,33 +1,15 @@
-import { unsafeCSS as v, LitElement as g, html as u, nothing as l } from "lit";
+import { unsafeCSS as u, LitElement as f, html as c, nothing as o } from "lit";
 import { property as i } from "lit/decorators.js";
-const p = (o, t, r) => function(s, a) {
-  const c = `#${a}`;
-  Object.defineProperty(s, a, {
-    get() {
-      return this[c];
-    },
-    set(f) {
-      t.includes(f) ? this[c] = f : (console.error(
-        `<${o}> Invalid value "${f}" provided for property "${a}".`,
-        `Must be one of: ${t.join(" | ")}.`,
-        `Falling back to default value: "${r}"`
-      ), this[c] = r);
-    },
-    configurable: !0
-  });
+import { validPropertyValues as a, defineCustomElement as k } from "@justeattakeaway/pie-webc-core";
+const g = `.c-link{--link-font-family: var(--dt-font-interactive-m-family);--link-font-size: calc(var(--dt-font-size-16) * 1px);--link-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--link-font-weight: var(--dt-font-weight-regular);--link-text-color: var(--dt-color-content-link);--link-text-decoration: var(--dt-font-style-underline);--link-icon-size: 16px;--link-icon-offset-top: var(--dt-spacing-a);display:inline-block;font-family:var(--link-font-family);font-size:var(--link-font-size);line-height:var(--link-line-height);font-weight:var(--link-font-weight);color:var(--link-text-color);text-decoration:var(--link-text-decoration);cursor:pointer}.c-link:hover,.c-link:active{--link-text-decoration: none}.c-link[tag=button]{outline:none;border:none;user-select:none;background:transparent;padding:0}.c-link[variant=high-visibility]{--link-text-color: var(--dt-color-content-link-distinct)}.c-link[variant=inverse]{--link-text-color: var(--dt-color-content-link-inverse)}.c-link[size=small]{--link-font-size: calc(var(--dt-font-size-14) * 1px);--link-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--link-icon-offset-top: 2px}.c-link[underline=reversed][isStandalone]{--link-text-decoration: none}.c-link[underline=reversed][isStandalone]:hover,.c-link[underline=reversed][isStandalone]:active{--link-text-decoration: var(--dt-font-style-underline)}.c-link[isBold]{--link-font-weight: var(--dt-font-weight-bold)}.c-link[isStandalone]{display:block;width:fit-content}.c-link[hasVisited]:visited{color:var(--dt-color-content-link-visited)}.c-link[hasVisited]:visited[variant=inverse]{color:var(--dt-color-content-link-visited-inverse)}.c-link:focus-visible{outline:none;border-radius:2px;box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer)}.c-link-content{display:flex;gap:var(--dt-spacing-a)}::slotted(.c-pieIcon),::slotted(svg){display:inline-flex;margin-block-start:var(--link-icon-offset-top);height:var(--link-icon-size);width:var(--link-icon-size)}
+`, y = ["default", "high-visibility", "inverse"], m = ["small", "medium"], b = ["leading", "trailing"], x = ["a", "button"], $ = ["submit", "button", "reset", "menu"], S = ["default", "reversed"];
+var z = Object.defineProperty, B = Object.getOwnPropertyDescriptor, n = (p, e, s, d) => {
+  for (var r = d > 1 ? void 0 : d ? B(e, s) : e, h = p.length - 1, v; h >= 0; h--)
+    (v = p[h]) && (r = (d ? v(e, s, r) : v(r)) || r);
+  return d && r && z(e, s, r), r;
 };
-function k(o, t) {
-  customElements.get(o) ? console.warn(`PIE Web Component: "${o}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(o, t);
-}
-const y = `.c-link{--link-font-family: var(--dt-font-interactive-m-family);--link-font-size: calc(var(--dt-font-size-16) * 1px);--link-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--link-font-weight: var(--dt-font-weight-regular);--link-text-color: var(--dt-color-content-link);--link-text-decoration: var(--dt-font-style-underline);--link-icon-size: 16px;--link-icon-offset-top: var(--dt-spacing-a);display:inline-block;font-family:var(--link-font-family);font-size:var(--link-font-size);line-height:var(--link-line-height);font-weight:var(--link-font-weight);color:var(--link-text-color);text-decoration:var(--link-text-decoration);cursor:pointer}.c-link:hover,.c-link:active{--link-text-decoration: none}.c-link[tag=button]{outline:none;border:none;user-select:none;background:transparent;padding:0}.c-link[variant=high-visibility]{--link-text-color: var(--dt-color-content-link-distinct)}.c-link[variant=inverse]{--link-text-color: var(--dt-color-content-link-inverse)}.c-link[size=small]{--link-font-size: calc(var(--dt-font-size-14) * 1px);--link-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--link-icon-offset-top: 2px}.c-link[underline=reversed][isStandalone]{--link-text-decoration: none}.c-link[underline=reversed][isStandalone]:hover,.c-link[underline=reversed][isStandalone]:active{--link-text-decoration: var(--dt-font-style-underline)}.c-link[isBold]{--link-font-weight: var(--dt-font-weight-bold)}.c-link[isStandalone]{display:block;width:fit-content}.c-link[hasVisited]:visited{color:var(--dt-color-content-link-visited)}.c-link[hasVisited]:visited[variant=inverse]{color:var(--dt-color-content-link-visited-inverse)}.c-link:focus-visible{outline:none;border-radius:2px;box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer)}.c-link-content{display:flex;gap:var(--dt-spacing-a)}::slotted(.c-pieIcon),::slotted(svg){display:inline-flex;margin-block-start:var(--link-icon-offset-top);height:var(--link-icon-size);width:var(--link-icon-size)}
-`, m = ["default", "high-visibility", "inverse"], b = ["small", "medium"], $ = ["leading", "trailing"], x = ["a", "button"], z = ["submit", "button", "reset", "menu"], S = ["default", "reversed"];
-var P = Object.defineProperty, B = Object.getOwnPropertyDescriptor, n = (o, t, r, h) => {
-  for (var s = h > 1 ? void 0 : h ? B(t, r) : t, a = o.length - 1, c; a >= 0; a--)
-    (c = o[a]) && (s = (h ? c(t, r, s) : c(s)) || s);
-  return h && s && P(t, r, s), s;
-};
-const d = "pie-link";
-class e extends g {
+const l = "pie-link";
+class t extends f {
   constructor() {
     super(...arguments), this.tag = "a", this.variant = "default", this.size = "medium", this.underline = "default", this.iconPlacement = "leading", this.isBold = !1, this.isStandalone = !1, this.hasVisited = !1, this.type = "submit";
   }
@@ -37,12 +19,12 @@ class e extends g {
    * @private
    */
   renderContent() {
-    const { iconPlacement: t, isStandalone: r } = this;
-    return u`
+    const { iconPlacement: e, isStandalone: s } = this;
+    return c`
                 <span class="c-link-content">
-                    ${r && t === "leading" ? u`<slot name="icon"></slot>` : l}
+                    ${s && e === "leading" ? c`<slot name="icon"></slot>` : o}
                     <slot></slot>
-                    ${r && t === "trailing" ? u`<slot name="icon"></slot>` : l}
+                    ${s && e === "trailing" ? c`<slot name="icon"></slot>` : o}
                 </span>`;
   }
   /**
@@ -51,8 +33,8 @@ class e extends g {
    * @private
    */
   renderButton() {
-    var t;
-    return u`
+    var e;
+    return c`
             <button
                 data-test-id="pie-link"
                 class="c-link"
@@ -63,8 +45,8 @@ class e extends g {
                 ?isBold=${this.isBold}
                 ?isStandalone=${this.isStandalone}
                 ?hasVisited=${this.hasVisited}
-                type=${this.type || l}
-                aria-label=${((t = this.aria) == null ? void 0 : t.label) || l}>
+                type=${this.type || o}
+                aria-label=${((e = this.aria) == null ? void 0 : e.label) || o}>
                     ${this.renderContent()}
             </button>`;
   }
@@ -74,8 +56,8 @@ class e extends g {
    * @private
    */
   renderAnchor() {
-    var t;
-    return u`
+    var e;
+    return c`
             <a
                 data-test-id="pie-link"
                 class="c-link"
@@ -86,10 +68,10 @@ class e extends g {
                 ?isBold=${this.isBold}
                 ?isStandalone=${this.isStandalone}
                 ?hasVisited=${this.hasVisited}
-                href=${this.href || l}
-                target=${this.target || l}
-                rel=${this.rel || l}
-                aria-label=${((t = this.aria) == null ? void 0 : t.label) || l}>
+                href=${this.href || o}
+                target=${this.target || o}
+                rel=${this.rel || o}
+                aria-label=${((e = this.aria) == null ? void 0 : e.label) || o}>
                     ${this.renderContent()}
             </a>`;
   }
@@ -97,59 +79,59 @@ class e extends g {
     return this.tag === "button" ? this.renderButton() : this.renderAnchor();
   }
 }
-e.styles = v(y);
+t.styles = u(g);
 n([
   i(),
-  p(d, x, "a")
-], e.prototype, "tag", 2);
+  a(l, x, "a")
+], t.prototype, "tag", 2);
 n([
   i({ type: String }),
-  p(d, m, "default")
-], e.prototype, "variant", 2);
+  a(l, y, "default")
+], t.prototype, "variant", 2);
 n([
   i({ type: String }),
-  p(d, b, "medium")
-], e.prototype, "size", 2);
+  a(l, m, "medium")
+], t.prototype, "size", 2);
 n([
   i({ type: String }),
-  p(d, S, "default")
-], e.prototype, "underline", 2);
+  a(l, S, "default")
+], t.prototype, "underline", 2);
 n([
   i({ type: String }),
-  p(d, $, "leading")
-], e.prototype, "iconPlacement", 2);
+  a(l, b, "leading")
+], t.prototype, "iconPlacement", 2);
 n([
   i({ type: String, reflect: !0 })
-], e.prototype, "href", 2);
+], t.prototype, "href", 2);
 n([
   i({ type: String, reflect: !0 })
-], e.prototype, "target", 2);
+], t.prototype, "target", 2);
 n([
   i({ type: String, reflect: !0 })
-], e.prototype, "rel", 2);
+], t.prototype, "rel", 2);
 n([
   i({ type: Boolean })
-], e.prototype, "isBold", 2);
+], t.prototype, "isBold", 2);
 n([
   i({ type: Boolean })
-], e.prototype, "isStandalone", 2);
+], t.prototype, "isStandalone", 2);
 n([
   i({ type: Boolean })
-], e.prototype, "hasVisited", 2);
+], t.prototype, "hasVisited", 2);
 n([
   i(),
-  p(d, z, "submit")
-], e.prototype, "type", 2);
+  a(l, $, "submit")
+], t.prototype, "type", 2);
 n([
   i({ type: Object })
-], e.prototype, "aria", 2);
-k(d, e);
+], t.prototype, "aria", 2);
+k(l, t);
 export {
-  e as PieLink,
-  z as buttonTypes,
-  $ as iconPlacements,
-  b as sizes,
+  t as PieLink,
+  $ as buttonTypes,
+  b as iconPlacements,
+  m as sizes,
   x as tags,
   S as underlineTypes,
-  m as variants
+  y as variants
 };

package/dist/react.js

@@ -1,10 +1,11 @@
 import * as e from "react";
 import { createComponent as i } from "@lit/react";
 import { PieLink as t } from "./index.js";
-import { buttonTypes as c, iconPlacements as l, sizes as k, tags as P, underlineTypes as f, variants as L } from "./index.js";
+import { buttonTypes as l, iconPlacements as k, sizes as P, tags as f, underlineTypes as L, variants as y } from "./index.js";
 import "lit";
 import "lit/decorators.js";
-const m = i({
+import "@justeattakeaway/pie-webc-core";
+const s = i({
   displayName: "PieLink",
   elementClass: t,
   react: e,
@@ -12,11 +13,11 @@ const m = i({
   events: {}
 });
 export {
-  m as PieLink,
-  c as buttonTypes,
-  l as iconPlacements,
-  k as sizes,
-  P as tags,
-  f as underlineTypes,
-  L as variants
+  s as PieLink,
+  l as buttonTypes,
+  k as iconPlacements,
+  P as sizes,
+  f as tags,
+  L as underlineTypes,
+  y as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-link",
   "description": "PIE Design System Link built using Web Components",
-  "version": "0.11.2",
+  "version": "0.11.3",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -28,10 +28,10 @@
   "author": "Just Eat Takeaway.com - Design System Team",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@justeattakeaway/pie-components-config": "0.6.0"
+    "@justeattakeaway/pie-components-config": "0.6.1"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.12.0"
+    "@justeattakeaway/pie-webc-core": "0.13.0"
   },
   "volta": {
     "extends": "../../../package.json"