wj-elements 0.1.48 → 0.1.49

package/dist/wje-masonry.js

@@ -0,0 +1,218 @@
+var p = Object.defineProperty;
+var b = (o, s, t) => s in o ? p(o, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[s] = t;
+var r = (o, s, t) => (b(o, typeof s != "symbol" ? s + "" : s, t), t);
+import w from "./wje-element.js";
+const A = 500, C = 300, x = "--wje-masonry-layout-col-count", v = "--wje-masonry-layout-gap", d = 1, m = /* @__PURE__ */ new Map();
+function c(o, s, t) {
+  const e = parseFloat(o.getAttribute(s) || "");
+  return isNaN(e) ? t : e;
+}
+function g(o, s, t) {
+  return isNaN(s) ? Math.max(1, Math.ceil(o / t)) : s;
+}
+function E(o, s, t) {
+  const e = m.get(t);
+  e != null && window.clearTimeout(e), m.set(t, window.setTimeout(o, s));
+}
+function S(o) {
+  let s = 0, t = 1 / 0;
+  return o.forEach((e, n) => {
+    e < t && (t = e, s = n);
+  }), s;
+}
+const N = ":host{display:flex;align-items:flex-start;justify-content:stretch;width:100%}.column{max-width:calc((100% / var(--wje-masonry-layout-col-count, 1) - ((var(--wje-masonry-layout-gap, 1rem) * (var(--wje-masonry-layout-col-count, 1) - 1) / var(--wje-masonry-layout-col-count, 1)))));width:100%;flex:1;display:flex;flex-direction:column}.column:not(:last-child){margin-inline-end:var(--wje-masonry-layout-gap, 1rem)}.column ::slotted(*){margin-block-end:var(--wje-masonry-layout-gap, 1rem);box-sizing:border-box;width:100%}#unset-items{opacity:0;position:absolute;pointer-events:none}";
+class f extends w {
+  /**
+   * Constructor for the Masonry class.
+   */
+  constructor() {
+    super();
+    r(this, "debounceId", `layout_${Math.random()}`);
+    r(this, "ro");
+    r(this, "className", "Masonry");
+    /**
+     * Called when the slot changes.
+     */
+    r(this, "onSlotChange", () => {
+      (this.unsetSlot.assignedNodes() || []).filter((e) => e.nodeType === d).length > 0 && this.layout();
+    });
+    /**
+     * Called when the window resizes.
+     * @param {Array} entries - The entries to use.
+     */
+    r(this, "onResize", (t) => {
+      const { width: e } = t != null && Array.isArray(t) && t.length > 0 ? t[0].contentRect : { width: this.offsetWidth };
+      g(e, this.cols, this.maxColWidth) !== this.columns.length && this.scheduleLayout();
+    });
+    /**
+     * Lays out the element.
+     */
+    r(this, "layout", () => {
+      this.currentRequestAnimationFrameCallback != null && window.cancelAnimationFrame(this.currentRequestAnimationFrameCallback), this.currentRequestAnimationFrameCallback = requestAnimationFrame(() => {
+        const t = this.gap, e = Array.from(this.children).filter((l) => l.nodeType === d), n = g(this.offsetWidth, this.cols, this.maxColWidth), a = Array(n).fill(0), i = [];
+        for (const l of e) {
+          const y = l.getBoundingClientRect().height;
+          let u = S(a);
+          a[u] += y + +t;
+          const h = u;
+          l.slot !== h && i.push(() => l.slot = h);
+        }
+        for (const l of i)
+          l();
+        this.renderCols(n);
+      });
+    });
+    this.debounceId = `layout_${Math.random()}`, this.ro = void 0, this.currentRequestAnimationFrameCallback = void 0, this.unsetSlot = void 0;
+  }
+  /**
+   * Setter for the maxColWidth property.
+   * @param {number} value - The maximum column width.
+   */
+  set maxColWidth(t) {
+    this.setAttribute("max-col-width", t);
+  }
+  /**
+   * Getter for the maxColWidth property.
+   * @returns {number} The maximum column width.
+   */
+  get maxColWidth() {
+    return this.hasAttribute("max-col-width") ? +this.getAttribute("max-col-width") : +A;
+  }
+  /**
+   * Setter for the cols property.
+   * @param {number} value - The number of columns.
+   */
+  set cols(t) {
+    this.hasAttribute("cols") && this.setAttribute("cols", t);
+  }
+  /**
+   * Getter for the cols property.
+   * @returns {number} The number of columns.
+   */
+  get cols() {
+    return c(this, "cols", "auto");
+  }
+  /**
+   * Setter for the gap property.
+   * @param {number} value - The gap between columns.
+   */
+  set gap(t) {
+    this.setAttribute("gap", t);
+  }
+  /**
+   * Getter for the gap property.
+   * @returns {number} The gap between columns.
+   */
+  get gap() {
+    return c(this, "gap", "24");
+  }
+  /**
+   * Setter for the debounce property.
+   * @param {number} value - The debounce time.
+   */
+  set debounce(t) {
+    this.setAttribute("debounce", t);
+  }
+  /**
+   * Getter for the debounce property.
+   * @returns {number} The debounce time.
+   */
+  get debounce() {
+    return c(this, "debounce", C);
+  }
+  /**
+   * Getter for the columns property.
+   * @returns {Array} An array of all the columns.
+   */
+  get columns() {
+    return Array.from(this.shadowRoot.querySelectorAll(".column"));
+  }
+  /**
+   * Getter for the cssStyleSheet property.
+   * @returns {CSSStyleSheet} The CSS style sheet.
+   */
+  static get cssStyleSheet() {
+    return N;
+  }
+  /**
+   * Getter for the observedAttributes property.
+   * @returns {Array} An array of the observed attributes.
+   */
+  static get observedAttributes() {
+    return ["max-col-width", "gap", "cols"];
+  }
+  /**
+   * Callback for when an attribute changes.
+   * @param {string} name - The name of the attribute.
+   * @param {string} old - The old value of the attribute.
+   * @param {string} newName - The new value of the attribute.
+   */
+  attributeChangedCallback(t, e, n) {
+    switch (t) {
+      case "gap":
+        this.style.setProperty(v, `${this.gap}px`);
+        break;
+    }
+    this.scheduleLayout();
+  }
+  /**
+   * Callback for when the element is disconnected.
+   */
+  disconnectedCallback() {
+    this.unsetSlot.removeEventListener("slotchange", this.onSlotChange), window.removeEventListener("resize", this.onResize), this.ro != null && this.ro.unobserve(this);
+  }
+  /**
+   * Sets up the attributes for the element.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Draws the element.
+   * @param {CanvasRenderingContext2D} context - The context to draw on.
+   * @param {Object} store - The store to use.
+   * @param {Object} params - The parameters to use.
+   * @returns {DocumentFragment} The drawn element.
+   */
+  draw(t, e, n) {
+    let a = document.createDocumentFragment(), i = document.createElement("div");
+    i.setAttribute("id", "unset-items"), i.setAttribute("part", "native");
+    let l = document.createElement("slot");
+    return i.appendChild(l), this.unsetSlot = l, this.native = i, a.appendChild(i), a;
+  }
+  /**
+   * Called after the element is drawn.
+   */
+  afterDraw() {
+    this.onSlotChange(), this.onResize(), this.layout(), this.unsetSlot.addEventListener("slotchange", this.onSlotChange), "ResizeObserver" in window ? (this.ro = new ResizeObserver(this.onResize), this.ro.observe(this)) : window.addEventListener("resize", this.onResize);
+  }
+  /**
+   * Renders the columns.
+   * @param {number} colCount - The number of columns to render.
+   */
+  renderCols(t) {
+    const e = this.columns;
+    if (e.length !== t) {
+      for (const n of e)
+        n.parentNode && n.parentNode.removeChild(n);
+      for (let n = 0; n < t; n++) {
+        const a = document.createElement("div");
+        a.classList.add("column"), a.setAttribute("part", `column column-${n}`);
+        const i = document.createElement("slot");
+        i.setAttribute("name", n), a.appendChild(i), this.context.appendChild(a);
+      }
+      this.style.setProperty(x, t);
+    }
+  }
+  /**
+   * Schedules a layout.
+   * @param {number} ms - The number of milliseconds to wait before laying out.
+   */
+  scheduleLayout(t = this.debounce) {
+    E(this.layout, t, this.debounceId);
+  }
+}
+f.define("wje-masonry", f);
+export {
+  f as default
+};

package/dist/wje-master.js

@@ -0,0 +1,423 @@
+var y = Object.defineProperty;
+var C = (o, l, e) => l in o ? y(o, l, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[l] = e;
+var f = (o, l, e) => (C(o, typeof l != "symbol" ? l + "" : l, e), e);
+import g from "./wje-element.js";
+import { event as q } from "./wje-element.js";
+import { defaultStoreActions as P, store as U } from "./wje-store.js";
+import { b as V, w as $ } from "./router-links-FtZbFUto.js";
+import { fetchAndParseCSS as W } from "./wje-fetchAndParseCSS.js";
+import { Localizer as j } from "./localize.js";
+import { default as Q } from "./wje-accordion.js";
+import { default as K } from "./wje-accordion-item.js";
+import { default as Z } from "./wje-animation.js";
+import { default as ee } from "./wje-aside.js";
+import { default as re } from "./wje-avatar.js";
+import { default as oe } from "./wje-badge.js";
+import { default as ie } from "./wje-breadcrumb.js";
+import { default as le } from "./wje-breadcrumbs.js";
+import { default as ce } from "./wje-button.js";
+import { default as me } from "./wje-button-group.js";
+import { default as fe } from "./wje-card.js";
+import { default as ge } from "./wje-card-content.js";
+import { default as ve } from "./wje-card-controls.js";
+import { default as be } from "./wje-card-header.js";
+import { default as je } from "./wje-card-subtitle.js";
+import { default as Ce } from "./wje-card-title.js";
+import { default as Ee } from "./wje-carousel.js";
+import { default as Me } from "./wje-carousel-item.js";
+import { default as Te } from "./wje-checkbox.js";
+import { default as He } from "./wje-chip.js";
+import { default as De } from "./wje-col.js";
+import { default as Ne } from "./wje-color-picker.js";
+import { default as qe } from "./wje-container.js";
+import { default as Pe } from "./wje-copy-button.js";
+import { default as Ge } from "./wje-dialog.js";
+import { default as $e } from "./wje-divider.js";
+import { default as We } from "./wje-dropdown.js";
+import { default as Qe } from "./wje-file-upload.js";
+import { default as Ke } from "./wje-file-upload-item.js";
+import { default as Ze } from "./wje-footer.js";
+import { default as et } from "./wje-format-digital.js";
+import { default as rt } from "./wje-grid.js";
+import { default as ot } from "./wje-header.js";
+import { default as it } from "./wje-icon.js";
+import { default as lt } from "./wje-icon-picker.js";
+import { default as ct } from "./wje-img.js";
+import { default as mt } from "./wje-img-comparer.js";
+import { default as ft } from "./wje-infinite-scroll.js";
+import { default as gt } from "./wje-inline-edit.js";
+import { default as vt } from "./wje-input.js";
+import { default as bt } from "./wje-input-file.js";
+import { default as jt } from "./wje-item.js";
+import { default as Ct } from "./wje-label.js";
+import { default as Et } from "./wje-list.js";
+import { default as Mt } from "./wje-main.js";
+import { default as Tt } from "./wje-masonry.js";
+import { default as Ht } from "./wje-menu.js";
+import { default as Dt } from "./wje-menu-button.js";
+import { default as Nt } from "./wje-menu-item.js";
+import { default as qt } from "./wje-menu-label.js";
+import { default as Pt } from "./wje-option.js";
+import { default as Gt } from "./wje-options.js";
+import "./wje-popup.js";
+import { default as $t } from "./wje-progress-bar.js";
+import { default as Wt } from "./wje-qr-code.js";
+import { default as Qt } from "./wje-radio.js";
+import { default as Kt } from "./wje-radio-group.js";
+import { default as Zt } from "./wje-rate.js";
+import { default as er } from "./wje-relative-time.js";
+import { default as rr } from "./wje-reorder.js";
+import { default as or } from "./wje-reorder-dropzone.js";
+import { default as ir } from "./wje-reorder-handle.js";
+import { default as lr } from "./wje-reorder-item.js";
+import { default as cr } from "./wje-route.js";
+import { default as mr } from "./wje-routerx.js";
+import { default as fr } from "./wje-router-link.js";
+import { default as gr } from "./wje-router-outlet.js";
+import { default as vr } from "./wje-row.js";
+import { default as br } from "./wje-select.js";
+import { default as jr } from "./wje-slider.js";
+import { default as Cr } from "./wje-split-view.js";
+import { default as Er } from "./wje-status.js";
+import { default as Mr } from "./wje-tab.js";
+import { default as Tr } from "./wje-tab-group.js";
+import { default as Hr } from "./wje-tab-panel.js";
+import { default as Dr } from "./wje-textarea.js";
+import { default as Nr } from "./wje-thumbnail.js";
+import { default as qr } from "./wje-toast.js";
+import { default as Pr } from "./wje-toggle.js";
+import { default as Gr } from "./wje-toolbar.js";
+import { default as $r } from "./wje-toolbar-action.js";
+import { default as Wr } from "./wje-tooltip.js";
+import { default as Qr } from "./wje-visually-hidden.js";
+import { default as Kr } from "./wje-sliding-container.js";
+import { P as Zr } from "./popup.element-CWsSOxs2.js";
+const A = {
+  code: "sk",
+  name: "Slovak",
+  dir: "ltr",
+  welcome: "Vitajte",
+  "wj.file.upload.button": "Vybrať súbor",
+  "wj.file.upload.uploaded": "Nahraných: ",
+  "wj.file.upload.from": "z"
+};
+j.registerTranslation(A);
+const E = {
+  code: "en",
+  name: "English",
+  dir: "ltr",
+  welcome: "Welcome",
+  "wj.file.upload.button": "Browse files",
+  "wj.file.upload.uploaded": "Uploaded: ",
+  "wj.file.upload.from": "from"
+};
+j.registerTranslation(E);
+const L = "";
+class v extends g {
+  constructor() {
+    super();
+    f(this, "className", "Step");
+  }
+  static get cssStyleSheet() {
+    return L;
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw() {
+    let e = document.createDocumentFragment(), r = document.createElement("div");
+    const s = document.createElement("slot");
+    return r.appendChild(s), e.appendChild(r), e;
+  }
+}
+v.define("wje-step", v);
+const M = ".stepper-container{display:flex;flex-direction:column}.step-headers{display:flex;justify-content:space-between;margin-bottom:var(--wje-spacing-medium)}.step-header{display:flex;padding:var(--wje-spacing-medium);gap:var(--wje-spacing-x-small);color:var(--wje-color-contrast-5);flex-grow:1;text-align:center}.pointer{cursor:pointer}.active{color:var(--wje-color-contrast-11)}.steps-content{margin-bottom:var(--wje-spacing-medium)}.arrow-icon{margin-top:var(--wje-stepper-margin)}.step{padding:var(--wje-spacing-medium);text-align:center}.done{color:var(--wje-color-contrast-11)}.nav-buttons{display:flex;justify-content:space-between}";
+class w extends g {
+  constructor() {
+    super();
+    f(this, "className", "Stepper");
+    this.currentStep = 0, this.completedSteps = [];
+  }
+  static get cssStyleSheet() {
+    return M;
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw() {
+    let e = document.createDocumentFragment();
+    const r = document.createElement("div");
+    r.className = "stepper-container";
+    const s = document.createElement("div");
+    s.className = "step-headers";
+    const a = document.createElement("div");
+    a.className = "steps-content";
+    const t = Array.from(this.children);
+    this.steps = t.map((c, m) => {
+      if (c.nodeName === "WJE-STEP") {
+        const n = document.createElement("div");
+        n.className = "step-header";
+        const u = document.createElement("wje-badge");
+        u.className = "step-badge", u.setAttribute("label", (m + 1).toString()), u.innerHTML = "12";
+        const x = document.createElement("span");
+        if (x.innerText = c.getAttribute("label") || `Step ${m + 1}`, m === this.currentStep && (n.classList.add("active"), u.setAttribute("color", "primary")), c.hasAttribute("disabled") || (n.addEventListener("click", () => this.gotoStep(m)), n.classList.add("pointer")), n.appendChild(u), n.appendChild(x), s.appendChild(n), m < t.length - 1) {
+          const h = document.createElement("wje-icon");
+          h.setAttribute("name", "chevron-right"), h.classList.add("arrow-icon"), h.setAttribute("size", "small"), s.appendChild(h);
+        }
+        return c.classList.add("step"), m !== this.currentStep && (c.style.display = "none"), c;
+      }
+    }), this.steps.forEach((c) => a.appendChild(c));
+    const i = document.createElement("div");
+    i.className = "nav-buttons";
+    const d = document.createElement("wje-button");
+    d.setAttribute("label", "Previous"), d.disabled = this.currentStep === 0, d.addEventListener("click", () => this.navigate(-1)), d.innerHTML = "Prev";
+    const p = document.createElement("wje-button");
+    return p.setAttribute("label", "Next"), p.disabled = this.currentStep === this.steps.length - 1, p.addEventListener("click", () => this.navigate(1)), p.innerHTML = "Next", i.appendChild(d), i.appendChild(p), r.appendChild(s), r.appendChild(a), r.appendChild(i), e.appendChild(r), e;
+  }
+  navigate(e) {
+    this.gotoStep(this.currentStep + e);
+  }
+  gotoStep(e) {
+    if (e >= 0 && e < this.steps.length) {
+      e > this.currentStep && (this.completedSteps[this.currentStep] = !0), this.steps[this.currentStep].style.display = "none", this.steps[e].style.display = "block";
+      const r = this.shadowRoot.querySelectorAll(".step-header");
+      r[this.currentStep].classList.remove("active"), r[this.currentStep].classList.add("done"), r[e].classList.add("active");
+      const s = this.shadowRoot.querySelectorAll("wje-badge");
+      s[this.currentStep].shadowRoot.querySelector("div").classList.remove("wje-color-primary"), this.currentStep = e, s[this.currentStep].shadowRoot.querySelector("div").classList.add("wje-color-primary");
+      const a = this.shadowRoot.querySelectorAll("wje-button");
+      a[0].disabled = this.currentStep === 0, a[1].disabled = this.currentStep === this.steps.length - 1, this.updateBadges();
+    }
+  }
+  updateBadges() {
+    this.shadowRoot.querySelectorAll(".step-header").forEach((r, s) => {
+      const a = r.querySelector("wje-badge");
+      if (this.completedSteps[s]) {
+        if (!a.querySelector("wje-status")) {
+          a.innerHTML = "";
+          const t = document.createElement("wje-icon");
+          t.setAttribute("name", "check"), t.setAttribute("color", "success"), t.setAttribute("size", "medium"), a.shadowRoot.querySelector("div").classList.add("wje-color-success"), a.appendChild(t);
+        }
+      } else
+        a.innerHTML = "12";
+    });
+  }
+}
+w.define("wje-stepper", w);
+const R = ".native-timeline{position:relative}.vertical-line{position:absolute;margin-left:calc(var(--wje-spacing-x-large) + 1px);top:0;bottom:0;width:1px;background-color:var(--wje-color-info-3)}";
+class b extends g {
+  constructor() {
+    super();
+    /**
+     * Returns the class name of the tab.
+     *
+     * @returns {string} The class name of the tab.
+     */
+    f(this, "className", "Timeline");
+  }
+  /**
+   * Returns the CSS styles for the component.
+   *
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return R;
+  }
+  /**
+   * Sets up the attributes for the component.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Draws the component.
+   *
+   * @param {Object} context - The context for drawing.
+   * @param {Object} store - The store for drawing.
+   * @param {Object} params - The parameters for drawing.
+   * @returns {DocumentFragment}
+   */
+  draw(e, r, s) {
+    let a = document.createDocumentFragment();
+    const t = document.createElement("div");
+    t.setAttribute("part", "native"), t.classList.add("native-timeline");
+    const i = document.createElement("div");
+    i.setAttribute("part", "vertical-line"), i.classList.add("vertical-line");
+    const d = document.createElement("slot");
+    return t.appendChild(i), t.appendChild(d), a.appendChild(t), a;
+  }
+}
+b.define("wje-timeline", b);
+function T(o, l) {
+  let e;
+  if (typeof o == "string")
+    e = new Date(o);
+  else if (typeof o == "number")
+    e = new Date(o);
+  else if (o instanceof Date)
+    e = o;
+  else
+    throw new Error("Invalid date input");
+  const r = {
+    yyyy: e.getFullYear(),
+    MM: String(e.getMonth() + 1).padStart(2, "0"),
+    // Mesiace sú indexované od 0
+    dd: String(e.getDate()).padStart(2, "0"),
+    HH: String(e.getHours()).padStart(2, "0"),
+    mm: String(e.getMinutes()).padStart(2, "0"),
+    ss: String(e.getSeconds()).padStart(2, "0"),
+    MMMM: e.toLocaleString("en-US", { month: "long" }),
+    // Full month name
+    MMM: e.toLocaleString("en-US", { month: "short" })
+    // Short month name
+  };
+  return l.replace(/yyyy|MM|dd|HH|mm|ss|MMMM|MMM/g, (s) => r[s]);
+}
+const k = ":host{--wje-card-content-padding: var(--wje-spacing-medium);margin-bottom:.5rem;display:block}.native-timeline-item>wje-icon{color:var(--wje-color-contrast-5)!important}.timeline-items{display:flex;flex-direction:column}.native-timeline-item{display:flex;position:relative;padding:var(--wje-spacing-medium) var(--wje-spacing-medium) var(--wje-spacing-medium) var(--wje-spacing-large);gap:var(--wje-spacing-medium);border-width:1px;border-style:solid;border-color:transparent;border-radius:var(--wje-border-radius-large)}:host .native-timeline-item:hover{background-color:var(--wje-color-contrast-1);border-color:var(--wje-color-contrast-3)}:host([active]) .native-timeline-item{background-color:var(--wje-color-primary-1);border-color:var(--wje-color-primary-3)}:host([active]) .native-timeline-item:hover{background-color:var(--wje-color-primary-2)}.icon-container{position:absolute;display:flex;width:var(--wje-size-small);height:var(--wje-size-small);padding:var(--wje-spacing-2x-small);border-radius:var(--wje-border-radius-circle);opacity:0}.content-container{height:fit-content;gap:var(--wje-spacing-small)}.event{margin:0;font-size:var(--wje-font-size-large);font-weight:var(--wje-font-weight-bold);line-height:var(--wje-line-height-dense);letter-spacing:var(--wje-spacing-4x-small)}.additional-content{font-size:var(--wje-font-size-medium);margin-top:1rem}wje-status{position:relative;z-index:1}wje-relative-time{display:block;margin-bottom:var(--wje-spacing-2x-small)}";
+class S extends g {
+  constructor() {
+    super();
+    /**
+     * Returns the class name of the tab.
+     *
+     * @returns {string} The class name of the tab.
+     */
+    f(this, "className", "TimelineItem");
+  }
+  /**
+   * Returns the CSS styles for the component.
+   *
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return k;
+  }
+  /**
+   * Sets up the attributes for the component.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open", this.setAttribute("relative-time", "");
+  }
+  /**
+   * Draws the component.
+   *
+   * @param {Object} context - The context for drawing.
+   * @param {Object} store - The store for drawing.
+   * @param {Object} params - The parameters for drawing.
+   * @returns {DocumentFragment}
+   */
+  draw(e, r, s) {
+    let a = document.createDocumentFragment(), t = document.createElement("div");
+    t.setAttribute("part", "native"), t.classList.add("native-timeline-item");
+    let i = document.createElement("div");
+    i.classList.add("content-container");
+    let d = document.createElement("wje-tooltip");
+    d.setAttribute("text", this.getAttribute("tooltip") || ""), d.setAttribute("position", "top"), d.setAttribute("content", T(this.datetime, "dd.MM.yyyy HH:mm"));
+    let p = document.createElement("wje-relative-time");
+    p.setAttribute("date", this.datetime || ""), p.setAttribute("format", this.getAttribute("format") || ""), d.appendChild(p);
+    let c = document.createElement("h3");
+    c.classList.add("event"), c.textContent = this.getAttribute("event") || "";
+    let m = document.createElement("slot"), n = document.createElement("wje-icon");
+    return n.setAttribute("name", "circle-dot"), n.setAttribute("filled", ""), n.setAttribute("part", "default-icon"), this.querySelector('[slot="status"]') && (n = document.createElement("slot"), n.setAttribute("name", "status")), i.appendChild(d), i.appendChild(c), i.appendChild(m), t.appendChild(n), t.appendChild(i), a.appendChild(t), a;
+  }
+}
+S.define("wje-timeline-item", S);
+export {
+  Q as Accordion,
+  K as AccordionItem,
+  Z as Animation,
+  ee as Aside,
+  re as Avatar,
+  oe as Badge,
+  ie as Breadcrumb,
+  le as Breadcrumbs,
+  ce as Button,
+  me as ButtonGroup,
+  fe as Card,
+  ge as CardContent,
+  ve as CardControls,
+  be as CardHeader,
+  je as CardSubtitle,
+  Ce as CardTitle,
+  Ee as Carousel,
+  Me as CarouselItem,
+  Te as Checkbox,
+  He as Chip,
+  De as Col,
+  Ne as ColorPicker,
+  qe as Container,
+  Pe as CopyButton,
+  Ge as Dialog,
+  $e as Divider,
+  We as Dropdown,
+  Qe as FileUpload,
+  Ke as FileUploadItem,
+  Ze as Footer,
+  et as FormatDigital,
+  rt as Grid,
+  ot as Header,
+  it as Icon,
+  lt as IconPicker,
+  ct as Img,
+  mt as ImgComparer,
+  ft as InfiniteScroll,
+  gt as InlineEdit,
+  vt as Input,
+  bt as InputFile,
+  jt as Item,
+  Ct as Label,
+  Et as List,
+  j as Localizer,
+  Mt as Main,
+  Tt as Masonry,
+  Ht as Menu,
+  Dt as MenuButton,
+  Nt as MenuItem,
+  qt as MenuLabel,
+  Pt as Option,
+  Gt as Options,
+  Zr as Popup,
+  $t as ProgressBar,
+  Wt as QrCode,
+  Qt as Radio,
+  Kt as RadioGroup,
+  Zt as Rate,
+  er as RelativeTime,
+  rr as Reorder,
+  or as ReorderDropzone,
+  ir as ReorderHandle,
+  lr as ReorderItem,
+  cr as Route,
+  fr as RouterLink,
+  gr as RouterOutlet,
+  mr as Routerx,
+  vr as Row,
+  br as Select,
+  jr as Slider,
+  Kr as SlidingContainer,
+  Cr as SplitView,
+  Er as Status,
+  v as Step,
+  w as Stepper,
+  Mr as Tab,
+  Tr as TabGroup,
+  Hr as TabPanel,
+  Dr as Textarea,
+  Nr as Thumbnail,
+  b as Timeline,
+  S as TimelineItem,
+  qr as Toast,
+  Pr as Toggle,
+  Gr as Toolbar,
+  $r as ToolbarAction,
+  Wr as Tooltip,
+  Qr as VisuallyHidden,
+  g as WJElement,
+  V as bindRouterLinks,
+  P as defaultStoreActions,
+  q as event,
+  W as fetchAndParseCSS,
+  U as store,
+  $ as withRouterLinks
+};