@proximus/lavender-timeline 2.0.0-alpha.63 → 2.0.0-alpha.64

package/dist/Timeline.d.ts

@@ -1,4 +1,5 @@
 export declare class Timeline extends HTMLElement {
+    #private;
     private template;
     constructor();
     static get observedAttributes(): string[];

package/dist/TimelineItem.d.ts

@@ -1,6 +1,8 @@
+export declare const TIMELINE_ITEM_CONNECTED_EVENT = "px-timeline-item-connected";
 export declare class TimelineItem extends HTMLElement {
     private template;
     constructor();
+    connectedCallback(): void;
     static get observedAttributes(): string[];
     attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
     updateItem(oldValue: string, newValue: string): void;

package/dist/index.es.js

@@ -1,55 +1,14 @@
-const s = ".timeline{list-style:none;margin:0;padding:0}", o = new CSSStyleSheet();
-o.replaceSync(s);
-class d extends HTMLElement {
-  template() {
-    return `
-      <ol class="timeline" role="list">
-        <slot></slot>
-      </ol>
-    `;
-  }
-  constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [o];
-  }
-  static get observedAttributes() {
-    return ["inverted"];
-  }
-  connectedCallback() {
-    this.configureChildren();
-  }
-  attributeChangedCallback(t, e, i) {
-    if (e !== i)
-      switch (t) {
-        case "inverted":
-          for (let a = 0; a < this.$children.length; a++)
-            this.$children[a].toggleAttribute("inverted");
-          break;
-      }
-  }
-  configureChildren() {
-    const t = this.$children[this.$children.length - 1];
-    t && !t.hasAttribute("lastchild") && t.setAttribute("lastchild", "");
-    for (let e = 0; e < this.$children.length; e++)
-      this.$children[e].setAttribute("item", `${e + 1}`);
-  }
-  get $el() {
-    return this.shadowRoot.querySelector(".timeline");
-  }
-  get $children() {
-    return this.querySelectorAll("px-timeline-item");
-  }
-  get inverted() {
-    return this.getAttribute("inverted");
-  }
-  set inverted(t) {
-    this.setAttribute("inverted", t);
-  }
-}
-customElements.get("px-timeline") || customElements.define("px-timeline", d);
-const c = '.timeline-item{display:flex;gap:var(--px-spacing-default-mobile);font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l)}.indicator-area{position:relative}.indicator-area:before{display:block;content:"";position:absolute;top:26px;left:12px;width:var(--px-size-border-m);height:calc(100% - 26px);background:var(--px-color-border-main-default)}.indicator-area .indicator{display:flex;align-items:center;justify-content:center;text-align:center;width:26px;height:26px;font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);color:var(--px-color-text-neutral-default);border-radius:var(--px-radius-pill);background:var(--px-color-background-container-default-default)}.content-area{display:flex;flex-direction:column;margin-bottom:var(--px-padding-m-mobile);gap:var(--px-spacing-xs-mobile)}.content-area ::slotted([slot="title"]){font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-l-mobile);color:var(--px-color-text-neutral-default)}.content-area ::slotted([slot="content"]){font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-body-m-mobile);color:var(--px-color-text-dimmed-default)}:host([lastchild]) .indicator-area:before{display:none}:host([lastchild]) .content-area{margin-bottom:0}:host([inverted]) .indicator-area:before{background:var(--px-color-border-main-inverted)}:host([inverted]) .indicator{color:var(--px-color-text-neutral-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .content-area ::slotted([slot="title"]){color:var(--px-color-text-neutral-inverted)}:host([inverted]) .content-area ::slotted([slot="content"]){color:var(--px-color-text-dimmed-inverted)}@media only screen and (min-width: 768px){.timeline-item{gap:var(--px-spacing-default-tablet)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-tablet)}.content-area{margin-bottom:var(--px-padding-m-tablet);gap:var(--px-spacing-xs-tablet)}.content-area ::slotted([slot="title"]){font-size:var(--px-text-size-label-l-tablet)}.content-area ::slotted([slot="content"]){font-size:var(--px-text-size-body-m-tablet)}}@media only screen and (min-width: 1025px){.timeline-item{gap:var(--px-spacing-default-laptop)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-laptop)}.content-area{margin-bottom:var(--px-padding-m-laptop)}.content-area ::slotted([slot="title"]){font-size:var(--px-text-size-label-l-laptop)}.content-area ::slotted([slot="content"]){font-size:var(--px-text-size-body-m-laptop)}}@media only screen and (min-width: 90.0625em){.timeline-item{gap:var(--px-spacing-default-desktop)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-desktop)}.content-area{margin-bottom:var(--px-padding-m-desktop)}.content-area ::slotted([slot="title"]){font-size:var(--px-text-size-label-l-desktop)}.content-area ::slotted([slot="content"]){font-size:var(--px-text-size-body-m-desktop)}}', r = new CSSStyleSheet();
-r.replaceSync(c);
-let n = "1";
-class p extends HTMLElement {
+var s = (n) => {
+  throw TypeError(n);
+};
+var x = (n, e, t) => e.has(n) || s("Cannot " + t);
+var d = (n, e, t) => e.has(n) ? s("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(n) : e.set(n, t);
+var o = (n, e, t) => (x(n, e, "access private method"), t);
+const v = ".timeline{list-style:none;margin:0;padding:0}", b = '.timeline-item{display:flex;gap:var(--px-spacing-default-mobile);font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l)}.indicator-area{position:relative}.indicator-area:before{display:block;content:"";position:absolute;top:26px;left:12px;width:var(--px-size-border-m);height:calc(100% - 26px);background:var(--px-color-border-main-default)}.indicator-area .indicator{display:flex;align-items:center;justify-content:center;text-align:center;width:26px;height:26px;font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);color:var(--px-color-text-neutral-default);border-radius:var(--px-radius-pill);background:var(--px-color-background-container-default-default)}.content-area{display:flex;flex-direction:column;margin-bottom:var(--px-padding-m-mobile);gap:var(--px-spacing-xs-mobile)}.content-area ::slotted([slot="title"]){font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-l-mobile);color:var(--px-color-text-neutral-default)}.content-area ::slotted([slot="content"]){font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-body-m-mobile);color:var(--px-color-text-dimmed-default)}:host([lastchild]) .indicator-area:before{display:none}:host([lastchild]) .content-area{margin-bottom:0}:host([inverted]) .indicator-area:before{background:var(--px-color-border-main-inverted)}:host([inverted]) .indicator{color:var(--px-color-text-neutral-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .content-area ::slotted([slot="title"]){color:var(--px-color-text-neutral-inverted)}:host([inverted]) .content-area ::slotted([slot="content"]){color:var(--px-color-text-dimmed-inverted)}@media only screen and (min-width: 768px){.timeline-item{gap:var(--px-spacing-default-tablet)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-tablet)}.content-area{margin-bottom:var(--px-padding-m-tablet);gap:var(--px-spacing-xs-tablet)}.content-area ::slotted([slot="title"]){font-size:var(--px-text-size-label-l-tablet)}.content-area ::slotted([slot="content"]){font-size:var(--px-text-size-body-m-tablet)}}@media only screen and (min-width: 1025px){.timeline-item{gap:var(--px-spacing-default-laptop)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-laptop)}.content-area{margin-bottom:var(--px-padding-m-laptop)}.content-area ::slotted([slot="title"]){font-size:var(--px-text-size-label-l-laptop)}.content-area ::slotted([slot="content"]){font-size:var(--px-text-size-body-m-laptop)}}@media only screen and (min-width: 90.0625em){.timeline-item{gap:var(--px-spacing-default-desktop)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-desktop)}.content-area{margin-bottom:var(--px-padding-m-desktop)}.content-area ::slotted([slot="title"]){font-size:var(--px-text-size-label-l-desktop)}.content-area ::slotted([slot="content"]){font-size:var(--px-text-size-body-m-desktop)}}', c = new CSSStyleSheet();
+c.replaceSync(b);
+const p = "px-timeline-item-connected";
+let l = "1";
+class u extends HTMLElement {
   template() {
     return `
       <li class="timeline-item" role="listitem">
@@ -64,25 +23,33 @@ class p extends HTMLElement {
     `;
   }
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [r];
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [c];
+  }
+  connectedCallback() {
+    this.dispatchEvent(
+      new CustomEvent(p, {
+        bubbles: !0,
+        composed: !0
+      })
+    );
   }
   static get observedAttributes() {
     return ["inverted", "lastchild", "item"];
   }
-  attributeChangedCallback(t, e, i) {
-    if (e !== i)
-      switch (t) {
+  attributeChangedCallback(e, t, i) {
+    if (t !== i)
+      switch (e) {
         case "item":
-          this.updateItem(e, i), this.updateIndicator(n);
+          this.updateItem(t, i), this.updateIndicator(l);
           break;
       }
   }
-  updateItem(t, e) {
-    t !== null && t !== "" && (n = t), e !== null && e !== "" && (n = e);
+  updateItem(e, t) {
+    e !== null && e !== "" && (l = e), t !== null && t !== "" && (l = t);
   }
-  updateIndicator(t) {
-    const e = this.$el.querySelector(".indicator");
-    e.innerHTML = t;
+  updateIndicator(e) {
+    const t = this.$el.querySelector(".indicator");
+    t.innerHTML = e;
   }
   get $el() {
     return this.shadowRoot.querySelector(".timeline-item");
@@ -90,24 +57,82 @@ class p extends HTMLElement {
   get inverted() {
     return this.getAttribute("inverted");
   }
-  set inverted(t) {
-    this.setAttribute("inverted", t);
+  set inverted(e) {
+    this.setAttribute("inverted", e);
   }
   get lastchild() {
     return this.getAttribute("lastchild");
   }
-  set lastchild(t) {
-    this.setAttribute("lastchild", t);
+  set lastchild(e) {
+    this.setAttribute("lastchild", e);
   }
   get item() {
     return this.getAttribute("item");
   }
-  set item(t) {
-    this.setAttribute("item", t);
+  set item(e) {
+    this.setAttribute("item", e);
   }
 }
-customElements.get("px-timeline-item") || customElements.define("px-timeline-item", p);
+customElements.get("px-timeline-item") || customElements.define("px-timeline-item", u);
+const h = new CSSStyleSheet();
+h.replaceSync(v);
+var a, r;
+class g extends HTMLElement {
+  constructor() {
+    super();
+    d(this, a);
+    this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [h];
+  }
+  template() {
+    return `
+      <ol class="timeline" role="list">
+        <slot></slot>
+      </ol>
+    `;
+  }
+  static get observedAttributes() {
+    return ["inverted"];
+  }
+  connectedCallback() {
+    this.addEventListener(p, () => {
+      this.configureChildren(), o(this, a, r).call(this);
+    }), this.configureChildren(), o(this, a, r).call(this);
+  }
+  attributeChangedCallback(t, i, m) {
+    if (i !== m)
+      switch (t) {
+        case "inverted":
+          this.isConnected && o(this, a, r).call(this);
+          break;
+      }
+  }
+  configureChildren() {
+    const t = this.$children[this.$children.length - 1];
+    t && !t.hasAttribute("lastchild") && t.setAttribute("lastchild", "");
+    for (let i = 0; i < this.$children.length; i++)
+      this.$children[i].setAttribute("item", `${i + 1}`);
+  }
+  get $el() {
+    return this.shadowRoot.querySelector(".timeline");
+  }
+  get $children() {
+    return this.querySelectorAll("px-timeline-item");
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(t) {
+    this.setAttribute("inverted", t);
+  }
+}
+a = new WeakSet(), r = function() {
+  const t = this.hasAttribute("inverted");
+  for (let i = 0; i < this.$children.length; i++)
+    this.$children[i].toggleAttribute("inverted", t);
+};
+customElements.get("px-timeline") || customElements.define("px-timeline", g);
 export {
-  d as Timeline,
-  p as TimelineItem
+  p as TIMELINE_ITEM_CONNECTED_EVENT,
+  g as Timeline,
+  u as TimelineItem
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-timeline",
-  "version": "2.0.0-alpha.63",
+  "version": "2.0.0-alpha.64",
   "description": "",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",