@proximus/lavender-breadcrumb 1.4.6-beta.2 → 1.4.6

package/dist/Breadcrumb-item.d.ts

@@ -1,6 +1,5 @@
 import { PxElement } from '@proximus/lavender-common';
 import type { Icon } from '@proximus/lavender-icon';
-export declare const BREADCRUMB_ITEM_CONNECTED_EVENT = "px-breadcrumb-item-connected";
 export declare class BreadcrumbItem extends PxElement<HTMLElement> {
     static nativeName: string;
     private template;

package/dist/Breadcrumb.d.ts

@@ -1,6 +1,5 @@
 import { WithExtraAttributes } from '@proximus/lavender-common';
 export declare class Breadcrumb extends WithExtraAttributes {
-    #private;
     private template;
     constructor();
     connectedCallback(): void;

package/dist/index.es.js

@@ -1,67 +1,7 @@
-var d = (r) => {
-  throw TypeError(r);
-};
-var u = (r, t, e) => t.has(r) || d("Cannot " + e);
-var b = (r, t, e) => t.has(r) ? d("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, e);
-var n = (r, t, e) => (u(r, t, "access private method"), e);
-import { PxElement as v, WithExtraAttributes as x } from "@proximus/lavender-common";
-const g = `:host{display:block}:host *{box-sizing:border-box}.breadcrumb{font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);margin:calc(var(--px-spacing-s-mobile) * -1) 0 0 0;padding:0}.breadcrumb div[role=list]{display:flex;flex-wrap:wrap;align-items:center}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-mobile)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){display:flex;align-items:center;margin-right:var(--px-spacing-xs-mobile)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{display:inline-block;content:"";width:16px;height:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.90255 3.61987C5.6515 3.8749 5.6515 4.2884 5.90255 4.54343L9.30512 8.00002L5.90255 11.4566C5.6515 11.7116 5.6515 12.1251 5.90255 12.3802C6.1536 12.6352 6.56063 12.6352 6.81169 12.3802L10.6688 8.4618C10.9199 8.20677 10.9199 7.79327 10.6688 7.53823L6.81169 3.61987C6.56063 3.36483 6.1536 3.36483 5.90255 3.61987Z' fill='%23252525'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.90255 3.61987C5.6515 3.8749 5.6515 4.2884 5.90255 4.54343L9.30512 8.00002L5.90255 11.4566C5.6515 11.7116 5.6515 12.1251 5.90255 12.3802C6.1536 12.6352 6.56063 12.6352 6.81169 12.3802L10.6688 8.4618C10.9199 8.20677 10.9199 7.79327 10.6688 7.53823L6.81169 3.61987C6.56063 3.36483 6.1536 3.36483 5.90255 3.61987Z' fill='%23252525'/%3E%3C/svg%3E");background-color:currentColor;color:var(--px-color-icon-neutral-default);margin-left:var(--px-spacing-xs-mobile)}@media only screen and (min-width: 48em){.breadcrumb{margin:calc(var(--px-spacing-s-tablet) * -1) 0 0 0}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-tablet)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){margin-right:var(--px-spacing-xs-tablet)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{margin-left:var(--px-spacing-xs-tablet)}}@media only screen and (min-width: 64.0625em){.breadcrumb{margin:calc(var(--px-spacing-s-laptop) * -1) 0 0 0}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-laptop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){margin-right:var(--px-spacing-xs-laptop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{margin-left:var(--px-spacing-xs-laptop)}}@media only screen and (min-width: 90.0625em){.breadcrumb{margin:calc(var(--px-spacing-s-desktop) * -1) 0 0 0}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-desktop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){margin-right:var(--px-spacing-xs-desktop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{margin-left:var(--px-spacing-xs-desktop)}}:host([inverted]) .breadcrumb{color:var(--px-color-text-neutral-inverted)}:host([inverted]) .breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{color:var(--px-color-icon-neutral-inverted)}`, f = ":host{display:block}:host *{box-sizing:border-box}.breadcrumb-item{display:flex}:host:has(px-a[variant=icon-link][color=inherit]) .breadcrumb-item{color:var(--px-color-icon-accent-default)}:host:has(px-a[variant=icon-link][color=inherit]) .breadcrumb-item:hover{color:var(--px-color-text-state-hover-default)}:host:not(:has(px-a[variant=icon-link][color=inherit])) .breadcrumb-item{line-height:var(--px-font-line-height-s);font-size:var(--px-text-size-link-s-mobile)}@media only screen and (min-width: 48em){:host:not(:has(px-a[variant=icon-link][color=inherit])) .breadcrumb-item{font-size:var(--px-text-size-link-s-tablet)}}@media only screen and (min-width: 64.0625em){:host:not(:has(px-a[variant=icon-link][color=inherit])) .breadcrumb-item{font-size:var(--px-text-size-link-s-laptop)}}@media only screen and (min-width: 90.0625em){:host:not(:has(px-a[variant=icon-link][color=inherit])) .breadcrumb-item{font-size:var(--px-text-size-link-s-desktop)}}:host([inverted]):has(px-a[variant=icon-link][color=inherit]) .breadcrumb-item{color:var(--px-color-icon-accent-inverted)}:host([inverted]):has(px-a[variant=icon-link][color=inherit]) .breadcrumb-item:hover{color:var(--px-color-text-state-hover-inverted)}", m = new CSSStyleSheet();
-m.replaceSync(f);
-const h = "px-breadcrumb-item-connected", c = class c extends v {
-  constructor() {
-    super(m), this.template = () => '<div class="breadcrumb-item" role="listitem"><slot></slot></div>', this.shadowRoot && (this.shadowRoot.innerHTML = this.template());
-  }
-  static get observedAttributes() {
-    return [...super.observedAttributes, "inverted"];
-  }
-  connectedCallback() {
-    this.$icon && this.$icon.setAttribute("size", "s"), this.$link || this.$el.setAttribute("aria-current", "page"), this.dispatchEvent(
-      new CustomEvent(h, {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  attributeChangedCallback(t, e, i) {
-    if (e !== i)
-      switch (t) {
-        case "inverted":
-          for (let a = 0; a < this.$children.length; a++)
-            this.$children[a].hasAttribute("inverted") || this.$children[a].toggleAttribute("inverted");
-          break;
-        default:
-          super.attributeChangedCallback(t, e, i);
-          break;
-      }
-  }
-  get $link() {
-    return this.querySelector("px-a");
-  }
-  get $icon() {
-    return this.querySelector("px-icon");
-  }
-  get $children() {
-    return this.querySelectorAll("px-breadcrumb-item > *");
-  }
-  get inverted() {
-    return this.hasAttribute("inverted");
-  }
-  set inverted(t) {
-    t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
-  }
-};
-c.nativeName = "div";
-let o = c;
-customElements.get("px-breadcrumb-item") || customElements.define("px-breadcrumb-item", o);
-const p = new CSSStyleSheet();
-p.replaceSync(g);
-var s, l;
-class k extends x {
-  constructor() {
-    super(p);
-    b(this, s);
-    this.shadowRoot.innerHTML = this.template();
-  }
+import { WithExtraAttributes as o, PxElement as c } from "@proximus/lavender-common";
+const d = `:host{display:block}:host *{box-sizing:border-box}.breadcrumb{font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);margin:calc(var(--px-spacing-s-mobile) * -1) 0 0 0;padding:0}.breadcrumb div[role=list]{display:flex;flex-wrap:wrap;align-items:center}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-mobile)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){display:flex;align-items:center;margin-right:var(--px-spacing-xs-mobile)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{display:inline-block;content:"";width:16px;height:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.90255 3.61987C5.6515 3.8749 5.6515 4.2884 5.90255 4.54343L9.30512 8.00002L5.90255 11.4566C5.6515 11.7116 5.6515 12.1251 5.90255 12.3802C6.1536 12.6352 6.56063 12.6352 6.81169 12.3802L10.6688 8.4618C10.9199 8.20677 10.9199 7.79327 10.6688 7.53823L6.81169 3.61987C6.56063 3.36483 6.1536 3.36483 5.90255 3.61987Z' fill='%23252525'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.90255 3.61987C5.6515 3.8749 5.6515 4.2884 5.90255 4.54343L9.30512 8.00002L5.90255 11.4566C5.6515 11.7116 5.6515 12.1251 5.90255 12.3802C6.1536 12.6352 6.56063 12.6352 6.81169 12.3802L10.6688 8.4618C10.9199 8.20677 10.9199 7.79327 10.6688 7.53823L6.81169 3.61987C6.56063 3.36483 6.1536 3.36483 5.90255 3.61987Z' fill='%23252525'/%3E%3C/svg%3E");background-color:currentColor;color:var(--px-color-icon-neutral-default);margin-left:var(--px-spacing-xs-mobile)}@media only screen and (min-width: 48em){.breadcrumb{margin:calc(var(--px-spacing-s-tablet) * -1) 0 0 0}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-tablet)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){margin-right:var(--px-spacing-xs-tablet)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{margin-left:var(--px-spacing-xs-tablet)}}@media only screen and (min-width: 64.0625em){.breadcrumb{margin:calc(var(--px-spacing-s-laptop) * -1) 0 0 0}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-laptop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){margin-right:var(--px-spacing-xs-laptop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{margin-left:var(--px-spacing-xs-laptop)}}@media only screen and (min-width: 90.0625em){.breadcrumb{margin:calc(var(--px-spacing-s-desktop) * -1) 0 0 0}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-desktop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){margin-right:var(--px-spacing-xs-desktop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{margin-left:var(--px-spacing-xs-desktop)}}:host([inverted]) .breadcrumb{color:var(--px-color-text-neutral-inverted)}:host([inverted]) .breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{color:var(--px-color-icon-neutral-inverted)}`, n = new CSSStyleSheet();
+n.replaceSync(d);
+class b extends o {
   template() {
     return `
       <nav class="breadcrumb">
@@ -71,25 +11,27 @@ class k extends x {
       </nav>
     `;
   }
+  constructor() {
+    super(n), this.shadowRoot.innerHTML = this.template();
+  }
   connectedCallback() {
-    this.ariaLabel || (this.ariaLabel = "Breadcrumb"), this.addEventListener(h, () => {
-      n(this, s, l).call(this);
-    }), n(this, s, l).call(this);
+    this.ariaLabel || (this.ariaLabel = "Breadcrumb");
   }
   static get observedAttributes() {
     return [...super.observedAttributes, "inverted", "aria-label"];
   }
-  attributeChangedCallback(e, i, a) {
-    if (i !== a)
+  attributeChangedCallback(e, r, i) {
+    if (r !== i)
       switch (e) {
         case "aria-label":
           this.$el.setAttribute("aria-label", this.ariaLabel);
           break;
         case "inverted":
-          this.isConnected && n(this, s, l).call(this);
+          for (let t = 0; t < this.$children.length; t++)
+            this.$children[t].hasAttribute("inverted") || this.$children[t].toggleAttribute("inverted");
           break;
         default:
-          super.attributeChangedCallback(e, i, a);
+          super.attributeChangedCallback(e, r, i);
           break;
       }
   }
@@ -112,14 +54,51 @@ class k extends x {
     e ? this.setAttribute("aria-label", e) : this.removeAttribute("aria-label");
   }
 }
-s = new WeakSet(), l = function() {
-  const e = this.hasAttribute("inverted");
-  for (let i = 0; i < this.$children.length; i++)
-    this.$children[i].toggleAttribute("inverted", e);
+customElements.get("px-breadcrumb") || customElements.define("px-breadcrumb", b);
+const m = ":host{display:block}:host *{box-sizing:border-box}.breadcrumb-item{display:flex}:host:has(px-a[variant=icon-link][color=inherit]) .breadcrumb-item{color:var(--px-color-icon-accent-default)}:host:has(px-a[variant=icon-link][color=inherit]) .breadcrumb-item:hover{color:var(--px-color-text-state-hover-default)}:host:not(:has(px-a[variant=icon-link][color=inherit])) .breadcrumb-item{line-height:var(--px-font-line-height-s);font-size:var(--px-text-size-link-s-mobile)}@media only screen and (min-width: 48em){:host:not(:has(px-a[variant=icon-link][color=inherit])) .breadcrumb-item{font-size:var(--px-text-size-link-s-tablet)}}@media only screen and (min-width: 64.0625em){:host:not(:has(px-a[variant=icon-link][color=inherit])) .breadcrumb-item{font-size:var(--px-text-size-link-s-laptop)}}@media only screen and (min-width: 90.0625em){:host:not(:has(px-a[variant=icon-link][color=inherit])) .breadcrumb-item{font-size:var(--px-text-size-link-s-desktop)}}:host([inverted]):has(px-a[variant=icon-link][color=inherit]) .breadcrumb-item{color:var(--px-color-icon-accent-inverted)}:host([inverted]):has(px-a[variant=icon-link][color=inherit]) .breadcrumb-item:hover{color:var(--px-color-text-state-hover-inverted)}", l = new CSSStyleSheet();
+l.replaceSync(m);
+const s = class s extends c {
+  constructor() {
+    super(l), this.template = () => '<div class="breadcrumb-item" role="listitem"><slot></slot></div>', this.shadowRoot && (this.shadowRoot.innerHTML = this.template());
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "inverted"];
+  }
+  connectedCallback() {
+    this.$icon && this.$icon.setAttribute("size", "s"), this.$link || this.$el.setAttribute("aria-current", "page");
+  }
+  attributeChangedCallback(e, r, i) {
+    if (r !== i)
+      switch (e) {
+        case "inverted":
+          for (let t = 0; t < this.$children.length; t++)
+            this.$children[t].hasAttribute("inverted") || this.$children[t].toggleAttribute("inverted");
+          break;
+        default:
+          super.attributeChangedCallback(e, r, i);
+          break;
+      }
+  }
+  get $link() {
+    return this.querySelector("px-a");
+  }
+  get $icon() {
+    return this.querySelector("px-icon");
+  }
+  get $children() {
+    return this.querySelectorAll("px-breadcrumb-item > *");
+  }
+  get inverted() {
+    return this.hasAttribute("inverted");
+  }
+  set inverted(e) {
+    e ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
+  }
 };
-customElements.get("px-breadcrumb") || customElements.define("px-breadcrumb", k);
+s.nativeName = "div";
+let a = s;
+customElements.get("px-breadcrumb-item") || customElements.define("px-breadcrumb-item", a);
 export {
-  h as BREADCRUMB_ITEM_CONNECTED_EVENT,
-  k as Breadcrumb,
-  o as BreadcrumbItem
+  b as Breadcrumb,
+  a as BreadcrumbItem
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-breadcrumb",
-  "version": "1.4.6-beta.2",
+  "version": "1.4.6",
   "description": "",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",