@justeattakeaway/pie-breadcrumb 0.3.0 → 0.3.1

package/dist/index.js

@@ -1,35 +1,30 @@
-import { LitElement as f, html as a, nothing as u, unsafeCSS as g } from "lit";
-import { property as d } from "lit/decorators.js";
-import { RtlMixin as $, validPropertyValues as y, defineCustomElement as C } from "@justeattakeaway/pie-webc-core";
-import { classMap as b } from "lit/directives/class-map.js";
+import { LitElement as h, html as t, nothing as u, unsafeCSS as f } from "lit";
+import { property as b } from "lit/decorators.js";
+import { RtlMixin as g, validPropertyValues as $, safeCustomElement as y } from "@justeattakeaway/pie-webc-core";
+import { classMap as v } from "lit/directives/class-map.js";
 import "@justeattakeaway/pie-link";
 import "@justeattakeaway/pie-icons-webc/dist/IconChevronRight.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconChevronLeft.js";
-var k = Object.defineProperty, x = (s, r, e, o) => {
-  for (var t = void 0, i = s.length - 1, c; i >= 0; i--)
-    (c = s[i]) && (t = c(r, e, t) || t);
-  return t && k(r, e, t), t;
-};
-class v extends f {
-  constructor() {
-    super(...arguments), this.v = "0.3.0";
+const o = class o extends h {
+  willUpdate() {
+    this.getAttribute("v") || this.setAttribute("v", o.v);
   }
-}
-x([
-  d({ type: String, reflect: !0 })
-], v.prototype, "v");
-const S = "*,*:after,*:before{box-sizing:inherit}.c-breadcrumb{--breadcrumb-background-color: var(--dt-color-transparent);background-color:var(--breadcrumb-background-color);padding:var(--dt-spacing-a) var(--dt-spacing-d) var(--dt-spacing-a) var(--dt-spacing-d)}.c-breadcrumb-list{margin:0;padding:0;display:flex;flex-flow:row;gap:var(--dt-spacing-a)}.c-breadcrumb-list li{list-style-type:none;display:flex;align-items:center;white-space:nowrap}.c-breadcrumb--scrim{--breadcrumb-background-color: var(--dt-color-overlay);border-radius:var(--dt-radius-rounded-e)}.c-breadcrumb-list-last-item{overflow:hidden;text-overflow:ellipsis;max-width:250px;color:var(--dt-color-content-subdued)}.c-breadcrumb-list-last-item--scrim{color:var(--dt-color-content-link-light)}.c-breadcrumb-separator{color:var(--dt-color-content-subdued)}.c-breadcrumb-separator--scrim{color:var(--dt-color-content-link-light)}", w = ["default", "scrim"], l = {
+};
+o.v = "0.3.1";
+let m = o;
+const C = "*,*:after,*:before{box-sizing:inherit}.c-breadcrumb{--breadcrumb-background-color: var(--dt-color-transparent);background-color:var(--breadcrumb-background-color);padding:var(--dt-spacing-a) var(--dt-spacing-d) var(--dt-spacing-a) var(--dt-spacing-d)}.c-breadcrumb-list{margin:0;padding:0;display:flex;flex-flow:row;gap:var(--dt-spacing-a)}.c-breadcrumb-list li{list-style-type:none;display:flex;align-items:center;white-space:nowrap}.c-breadcrumb--scrim{--breadcrumb-background-color: var(--dt-color-overlay);border-radius:var(--dt-radius-rounded-e)}.c-breadcrumb-list-last-item{overflow:hidden;text-overflow:ellipsis;max-width:250px;color:var(--dt-color-content-subdued)}.c-breadcrumb-list-last-item--scrim{color:var(--dt-color-content-link-light)}.c-breadcrumb-separator{color:var(--dt-color-content-subdued)}.c-breadcrumb-separator--scrim{color:var(--dt-color-content-link-light)}", w = ["default", "scrim"], p = {
   variant: "default",
   isCompact: !1
 };
-var B = Object.defineProperty, m = (s, r, e, o) => {
-  for (var t = void 0, i = s.length - 1, c; i >= 0; i--)
-    (c = s[i]) && (t = c(r, e, t) || t);
-  return t && B(r, e, t), t;
+var x = Object.defineProperty, B = Object.getOwnPropertyDescriptor, n = (r, e, a, i) => {
+  for (var s = i > 1 ? void 0 : i ? B(e, a) : e, d = r.length - 1, l; d >= 0; d--)
+    (l = r[d]) && (s = (i ? l(e, a, s) : l(s)) || s);
+  return i && s && x(e, a, s), s;
 };
-const h = "pie-breadcrumb", p = class p extends $(v) {
+const S = "pie-breadcrumb";
+let c = class extends g(m) {
   constructor() {
-    super(...arguments), this.items = [], this.variant = l.variant, this.isCompact = l.isCompact;
+    super(...arguments), this.items = [], this.variant = p.variant, this.isCompact = p.isCompact;
   }
   /**
    * Renders a separator icon between breadcrumb items.
@@ -41,13 +36,13 @@ const h = "pie-breadcrumb", p = class p extends $(v) {
    */
   renderSeparator() {
     const r = this.variant === "scrim" ? "c-breadcrumb-separator--scrim" : "c-breadcrumb-separator";
-    return a`
+    return t`
             <li
                 role="presentation"
                 aria-hidden="true"
                 class="${r}"
                 data-test-id="pie-breadcrumb-separator">
-                    ${this.isRTL ? a`<icon-chevron-left></icon-chevron-left>` : a`<icon-chevron-right></icon-chevron-right>`}
+                    ${this.isRTL ? t`<icon-chevron-left></icon-chevron-left>` : t`<icon-chevron-right></icon-chevron-right>`}
             </li>
         `;
   }
@@ -60,7 +55,7 @@ const h = "pie-breadcrumb", p = class p extends $(v) {
    */
   renderNavigationLink(r) {
     const e = this.variant === "scrim" ? "inverse" : "default";
-    return a`
+    return t`
             <pie-link variant="${e}" isStandalone underline="reversed" isBold href="${r.href}">
                 ${r.label}
             </pie-link>
@@ -79,7 +74,7 @@ const h = "pie-breadcrumb", p = class p extends $(v) {
       "c-breadcrumb-list-last-item": !0,
       "c-breadcrumb-list-last-item--scrim": this.variant === "scrim"
     };
-    return a`<span class="${b(e)}">${r.label}</span>`;
+    return t`<span class="${v(e)}">${r.label}</span>`;
   }
   /**
        * Renders an individual breadcrumb item.
@@ -92,7 +87,7 @@ const h = "pie-breadcrumb", p = class p extends $(v) {
        * @private
        */
   renderItem(r, e = !1) {
-    return a`
+    return t`
             <li role="listitem" data-test-id="pie-breadcrumb-item">
                 ${e ? this.renderLastItem(r) : this.renderNavigationLink(r)}
             </li>
@@ -108,7 +103,7 @@ const h = "pie-breadcrumb", p = class p extends $(v) {
    */
   renderDefaultBreadcrumb(r) {
     const e = r.length - 1;
-    return a`${r.map((o, t) => this.renderItem(o, e <= t))}`;
+    return t`${r.map((a, i) => this.renderItem(a, e <= i))}`;
   }
   /**
    * Renders a separator icon specifically for the back variant.
@@ -118,9 +113,9 @@ const h = "pie-breadcrumb", p = class p extends $(v) {
    */
   renderCompactBreadcrumbSeparator() {
     const r = this.variant === "scrim" ? "c-breadcrumb-separator--scrim" : "c-breadcrumb-separator";
-    return a`
+    return t`
             <li role="presentation" aria-hidden="true" class="${r}" data-test-id="pie-breadcrumb-separator">
-                ${this.isRTL ? a`<icon-chevron-right></icon-chevron-right>` : a`<icon-chevron-left></icon-chevron-left>`}
+                ${this.isRTL ? t`<icon-chevron-right></icon-chevron-right>` : t`<icon-chevron-left></icon-chevron-left>`}
             </li>
         `;
   }
@@ -133,10 +128,10 @@ const h = "pie-breadcrumb", p = class p extends $(v) {
    */
   renderCompactBreadcrumb(r) {
     const e = r[r.length - 1];
-    return a`
+    return t`
             ${this.renderCompactBreadcrumbSeparator()}
             <li role="listitem" data-test-id="pie-breadcrumb-item">
-                ${this.renderNavigationLink(e)}    
+                ${this.renderNavigationLink(e)}
             </li>
         `;
   }
@@ -149,41 +144,42 @@ const h = "pie-breadcrumb", p = class p extends $(v) {
    * @private
    */
   renderBreadcrumbItems(r, e) {
-    return a`
+    return t`
             <ol class="c-breadcrumb-list" data-test-id="pie-breadcrumb-list">
                 ${e ? this.renderCompactBreadcrumb(r) : this.renderDefaultBreadcrumb(r)}
             </ol>
         `;
   }
   render() {
-    const { items: r, variant: e, isCompact: o } = this;
-    return a`
+    const { items: r, variant: e, isCompact: a } = this;
+    return t`
             <nav
                 aria-label="breadcrumb"
                 data-test-id="pie-breadcrumb"
-                class="${b({
+                class="${v({
       "c-breadcrumb": !0,
       "c-breadcrumb--scrim": e === "scrim"
     })}">
-                ${r ? this.renderBreadcrumbItems(r, o) : u}
+                ${r ? this.renderBreadcrumbItems(r, a) : u}
             </nav>`;
   }
 };
-p.styles = g(S);
-let n = p;
-m([
-  d({ type: Array })
-], n.prototype, "items");
-m([
-  d({ type: String }),
-  y(h, w, l.variant)
-], n.prototype, "variant");
-m([
-  d({ type: Boolean })
-], n.prototype, "isCompact");
-C(h, n);
+c.styles = f(C);
+n([
+  b({ type: Array })
+], c.prototype, "items", 2);
+n([
+  b({ type: String }),
+  $(S, w, p.variant)
+], c.prototype, "variant", 2);
+n([
+  b({ type: Boolean })
+], c.prototype, "isCompact", 2);
+c = n([
+  y("pie-breadcrumb")
+], c);
 export {
-  n as PieBreadcrumb,
-  l as defaultProps,
+  c as PieBreadcrumb,
+  p as defaultProps,
   w as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-breadcrumb",
   "description": "PIE Design System Breadcrumb built using Web Components",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -33,13 +33,13 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "0.20.0",
+    "@justeattakeaway/pie-components-config": "0.20.1",
     "@justeattakeaway/pie-css": "0.16.0",
-    "@justeattakeaway/pie-monorepo-utils": "0.5.0",
+    "@justeattakeaway/pie-monorepo-utils": "0.5.1",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.25.1"
+    "@justeattakeaway/pie-webc-core": "0.26.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/index.ts

@@ -1,8 +1,7 @@
 import { html, nothing, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
-import { RtlMixin, defineCustomElement, validPropertyValues } from '@justeattakeaway/pie-webc-core';
+import { RtlMixin, safeCustomElement, validPropertyValues } from '@justeattakeaway/pie-webc-core';
 import { classMap } from 'lit/directives/class-map.js';
-
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 
 import '@justeattakeaway/pie-link';
@@ -25,6 +24,7 @@ export * from './defs';
 /**
  * @tagname pie-breadcrumb
  */
+@safeCustomElement('pie-breadcrumb')
 export class PieBreadcrumb extends RtlMixin(PieElement) implements BreadcrumbProps {
     @property({ type: Array })
     public items: BreadcrumbProps['items'] = [];
@@ -157,7 +157,7 @@ export class PieBreadcrumb extends RtlMixin(PieElement) implements BreadcrumbPro
         return html`
             ${this.renderCompactBreadcrumbSeparator()}
             <li role="listitem" data-test-id="pie-breadcrumb-item">
-                ${this.renderNavigationLink(lastItem)}    
+                ${this.renderNavigationLink(lastItem)}
             </li>
         `;
     }
@@ -199,8 +199,6 @@ export class PieBreadcrumb extends RtlMixin(PieElement) implements BreadcrumbPro
     static styles = unsafeCSS(styles);
 }
 
-defineCustomElement(componentSelector, PieBreadcrumb);
-
 declare global {
     interface HTMLElementTagNameMap {
         [componentSelector]: PieBreadcrumb;