@proximus/lavender-timeline 1.0.0-alpha.16

package/dist/index.js

@@ -0,0 +1,113 @@
+const l = ".timeline{list-style:none;margin:0;padding:0}", o = new CSSStyleSheet();
+o.replaceSync(l);
+class c 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 r = 0; r < this.$children.length; r++)
+            this.$children[r].toggleAttribute("inverted");
+          break;
+      }
+  }
+  configureChildren() {
+    const t = this.$children[this.$children.length - 1];
+    t == null || t.toggleAttribute("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", c);
+const d = '.timeline-item{display:flex;gap:var(--px-spacing-text-to-icon-horizontal);font-family:var(--px-font-family);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m)}.indicator-area{position:relative}.indicator-area:before{display:block;content:"";position:absolute;top:26px;left:12px;width:var(--px-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:700;font-size:var(--px-text-size-s-mobile);color:var(--px-color-icon-body-default);border-radius:var(--px-radius-pill);background:var(--px-color-bg-container-weak-default)}.content-area{margin-bottom:var(--px-spacing-component-default-vertical)}.content-area ::slotted([slot="title"]){font-weight:700;color:var(--px-color-txt-body-default)}.content-area ::slotted([slot="content"]){font-weight:400;color:var(--px-color-txt-details-default);margin-top:var(--px-spacing-under-text-vertical)}: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-area .indicator{color:var(--px-color-icon-body-inverted);background:var(--px-color-bg-container-weak-inverted)}:host([inverted]) .content-area ::slotted([slot="title"]){color:var(--px-color-txt-body-inverted)}:host([inverted]) .content-area ::slotted([slot="content"]){color:var(--px-color-txt-details-inverted)}@media only screen and (min-width: 64rem){.timeline-item{font-size:var(--px-text-size-base-tablet)}.indicator-area .indicator{font-size:var(--px-text-size-s-tablet)}}@media only screen and (min-width: 90rem){.timeline-item{font-size:var(--px-text-size-base-desktop)}.indicator-area .indicator{font-size:var(--px-text-size-s-desktop)}}', a = new CSSStyleSheet();
+a.replaceSync(d);
+let n = "1";
+class h extends HTMLElement {
+  template() {
+    return `
+        <li class="timeline-item" role="listitem">
+            <div class="indicator-area">
+                <div class="indicator"></div>
+            </div>
+            <div class="content-area">
+                <slot name="title"></slot>
+                <slot name="content"></slot>
+            </div>
+        </li>
+    `;
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [a];
+  }
+  static get observedAttributes() {
+    return ["inverted", "lastchild", "item"];
+  }
+  attributeChangedCallback(t, e, i) {
+    if (e !== i)
+      switch (t) {
+        case "item":
+          this.updateItem(e, i), this.updateIndicator(n);
+          break;
+      }
+  }
+  updateItem(t, e) {
+    t !== null && t !== "" && (n = t), e !== null && e !== "" && (n = e);
+  }
+  updateIndicator(t) {
+    const e = this.$el.querySelector(".indicator");
+    e.innerHTML = t;
+  }
+  get $el() {
+    return this.shadowRoot.querySelector(".timeline-item");
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(t) {
+    this.setAttribute("inverted", t);
+  }
+  get lastchild() {
+    return this.getAttribute("lastchild");
+  }
+  set lastchild(t) {
+    this.setAttribute("lastchild", t);
+  }
+  get item() {
+    return this.getAttribute("item");
+  }
+  set item(t) {
+    this.setAttribute("item", t);
+  }
+}
+customElements.get("px-timeline-item") || customElements.define("px-timeline-item", h);
+export {
+  c as Timeline,
+  h as TimelineItem
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@proximus/lavender-timeline",
+  "version": "1.0.0-alpha.16",
+  "description": "",
+  "main": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/index.js"
+    },
+    "./src/*.css": {
+      "development": "src/*.css"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "scripts": {
+    "build": "rm -rf dist;tsc; vite build",
+    "test": "vitest run --coverage"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "15a231df98020f83813279639a9a7712a5a5e759",
+  "lerna": {
+    "command": {
+      "publish": {
+        "assets": [
+          "CHANGELOG.md",
+          "package.json",
+          "dist/*.js",
+          "dist/css/**/*.css"
+        ]
+      }
+    }
+  }
+}