wj-elements 0.1.45 → 0.1.46

package/dist/wje-master.js

@@ -1,6 +1,6 @@
 var y = Object.defineProperty;
-var C = (o, n, e) => n in o ? y(o, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[n] = e;
-var f = (o, n, e) => (C(o, typeof n != "symbol" ? n + "" : n, e), e);
+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";
@@ -155,24 +155,24 @@ class w extends g {
     const t = Array.from(this.children);
     this.steps = t.map((c, m) => {
       if (c.nodeName === "WJE-STEP") {
-        const i = document.createElement("div");
-        i.className = "step-header";
+        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 && (i.classList.add("active"), u.setAttribute("color", "primary")), c.hasAttribute("disabled") || (i.addEventListener("click", () => this.gotoStep(m)), i.classList.add("pointer")), i.appendChild(u), i.appendChild(x), s.appendChild(i), m < t.length - 1) {
+        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 l = document.createElement("div");
-    l.className = "nav-buttons";
+    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", l.appendChild(d), l.appendChild(p), r.appendChild(s), r.appendChild(a), r.appendChild(l), e.appendChild(r), e;
+    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);
@@ -241,14 +241,14 @@ class b extends g {
     let a = document.createDocumentFragment();
     const t = document.createElement("div");
     t.setAttribute("part", "native"), t.classList.add("native-timeline");
-    const l = document.createElement("div");
-    l.classList.add("vertical-line");
+    const i = document.createElement("div");
+    i.setAttribute("part", "vertical-line"), i.classList.add("vertical-line");
     const d = document.createElement("slot");
-    return t.appendChild(l), t.appendChild(d), a.appendChild(t), a;
+    return t.appendChild(i), t.appendChild(d), a.appendChild(t), a;
   }
 }
 b.define("wje-timeline", b);
-function T(o, n) {
+function T(o, l) {
   let e;
   if (typeof o == "string")
     e = new Date(o);
@@ -271,7 +271,7 @@ function T(o, n) {
     MMM: e.toLocaleString("en-US", { month: "short" })
     // Short month name
   };
-  return n.replace(/yyyy|MM|dd|HH|mm|ss|MMMM|MMM/g, (s) => r[s]);
+  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 {
@@ -310,16 +310,16 @@ class S extends g {
   draw(e, r, s) {
     let a = document.createDocumentFragment(), t = document.createElement("div");
     t.setAttribute("part", "native"), t.classList.add("native-timeline-item");
-    let l = document.createElement("div");
-    l.classList.add("content-container");
+    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"), i = document.createElement("wje-icon");
-    return i.setAttribute("name", "circle-dot"), i.setAttribute("filled", ""), i.setAttribute("part", "default-icon"), this.querySelector('[slot="status"]') && (i = document.createElement("slot"), i.setAttribute("name", "status")), l.appendChild(d), l.appendChild(c), l.appendChild(m), t.appendChild(i), t.appendChild(l), a.appendChild(t), a;
+    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);

package/dist/wje-sliding-container.js

@@ -1,9 +1,9 @@
-var g = Object.defineProperty;
-var m = (r, s, t) => s in r ? g(r, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[s] = t;
-var l = (r, s, t) => (m(r, typeof s != "symbol" ? s + "" : s, t), t);
-import p from "./wje-element.js";
-const u = ":host{display:block;overflow:hidden;display:table}";
-class h extends p {
+var p = Object.defineProperty;
+var u = (r, n, t) => n in r ? p(r, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[n] = t;
+var h = (r, n, t) => (u(r, typeof n != "symbol" ? n + "" : n, t), t);
+import f from "./wje-element.js";
+const v = ":host{display:block;overflow:hidden;display:table}";
+class l extends f {
   /**
    * Creates an instance of SlidingContainer.
    *
@@ -11,14 +11,14 @@ class h extends p {
    */
   constructor() {
     super();
-    l(this, "className", "SlidingContainer");
+    h(this, "className", "SlidingContainer");
     /**
      * Triggers the event based on the target element.
      * If the target element is different from the last caller, it refreshes the children by calling the `open` method.
      * If the target element is the same as the last caller, it toggles the state by calling the `toggle` method.
      * @param {Event} e - The event object.
      */
-    l(this, "triggerEvent", (t) => {
+    h(this, "triggerEvent", (t) => {
       this._lastCaller && this._lastCaller !== t.target ? this.open() : this.toggle(), this._lastCaller = t.target;
     });
     this._isOpen = !1, this._lastCaller = null;
@@ -65,8 +65,23 @@ class h extends p {
   set screenBreakPoint(t) {
     this.setAttribute("screen-break-point", t);
   }
+  get animationDuration() {
+    return this.getAttribute("animation-duration") ?? "500";
+  }
+  set animationDuration(t) {
+    this.setAttribute("animation-duration", t);
+  }
+  get animationEasing() {
+    return this.getAttribute("animation-easing") ?? "linear";
+  }
+  set animationEasing(t) {
+    this.setAttribute("animation-easing", t);
+  }
+  get hasOpacity() {
+    return this.hasAttribute("has-opacity") ?? !1;
+  }
   static get observedAttributes() {
-    return ["max-width", "max-height", "trigger", "direction", "variant", "screen-break-point", "remove-child-after-close"];
+    return ["max-width", "max-height", "trigger", "direction", "variant", "screen-break-point", "remove-child-after-close", "animation-duration", "animation-easing", "has-opacity"];
   }
   /**
    * Returns the CSS styles for the component.
@@ -75,7 +90,7 @@ class h extends p {
    * @returns {CSSStyleSheet}
    */
   static get cssStyleSheet() {
-    return u;
+    return v;
   }
   /**
    * Sets up the attributes for the component.
@@ -91,13 +106,13 @@ class h extends p {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment}
    */
-  draw(t, i, n) {
-    let a = document.createDocumentFragment();
+  draw(t, i, a) {
+    let s = document.createDocumentFragment();
     this.style.position = "relative", this.style.height = "100%", this.transparentDiv = document.createElement("div"), this.transparentDiv.classList.add("sliding-container-transparent");
     let e = document.createElement("div");
-    e.style.position = "absolute", e.style.width = this.maxWidth, e.style.height = "100%", e.classList.add("native-sliding-container"), e.setAttribute("part", "sliding-container"), this.direction === "right" ? e.style.right = 0 : e.style.left = 0;
+    e.style.position = "absolute", e.style.width = this.maxWidth, this.hasOpacity && (e.style.opacity = 0), e.style.height = "100%", e.classList.add("native-sliding-container"), e.setAttribute("part", "sliding-container"), this.direction === "right" ? e.style.right = 0 : e.style.left = 0;
     let o = document.createElement("slot");
-    return e.appendChild(this.getCloseButton()), e.appendChild(o), a.appendChild(this.transparentDiv), a.appendChild(e), a;
+    return e.appendChild(this.getCloseButton()), e.appendChild(o), s.appendChild(this.transparentDiv), s.appendChild(e), this.nativeElement = e, s;
   }
   /**
    * Creates and returns a close button element.
@@ -127,18 +142,23 @@ class h extends p {
   async afterDraw() {
     document.addEventListener(this.trigger, this.triggerEvent), this.screenBreakPoint && window.innerWidth < this.screenBreakPoint && (this.variant = "over"), this.checkForVariant(this.variant);
   }
+  getParentElement() {
+    let t = this.parentElement;
+    return t || (t = this.getRootNode().host), t;
+  }
   /**
    * Checks for a specific variant and applies corresponding styles.
    *
    * @param {string} variant - The variant to check for.
    */
   checkForVariant(t) {
+    var i, a;
     if (t === "over") {
       this.style.position = "fixed";
-      let i = window.getComputedStyle(this.parentElement), n = this.parentElement.getBoundingClientRect(), a = parseFloat(i.height), e = parseFloat(i.width), o = parseFloat(i.top);
-      this.style.height = a + "px", this.style.top = o + "px";
-      let d = this.parentElement.firstElementChild === this, c = this.parentElement.lastElementChild === this;
-      d && (this.direction === "right" ? this.style.left = n.left + "px" : this.style.right = window.innerWidth - (n.left + n.width) + e + "px"), c && (this.style.right = window.innerWidth - (n.left + n.width) + "px");
+      let s = window.getComputedStyle(this.getParentElement()), e = this.getParentElement().getBoundingClientRect(), o = parseFloat(s.height), d = parseFloat(s.width), m = parseFloat(s.top);
+      this.style.height = o + "px", this.style.top = m + "px";
+      let c = this.getParentElement().firstElementChild === this || ((i = this.getParentElement().shadowRoot) == null ? void 0 : i.firstElementChild) === this, g = this.getParentElement().lastElementChild === this || ((a = this.getParentElement().shadowRoot) == null ? void 0 : a.lastElementChild) === this;
+      c && (this.direction === "right" ? this.style.left = e.left + "px" : this.style.right = window.innerWidth - (e.left + e.width) + d + "px"), g && (this.style.right = window.innerWidth - (e.left + e.width) + "px");
     }
   }
   /**
@@ -170,29 +190,38 @@ class h extends p {
       delay: 0,
       endDelay: 0,
       fill: "both",
-      duration: 500,
+      duration: +this.animationDuration,
       iterationStart: 0,
       iterations: 1,
       direction: "normal",
-      easing: "linear"
+      easing: this.animationEasing
     };
     if (this._isOpen)
-      this.animation.reverse();
+      this.animation.reverse(), this.hasOpacity && this.nativeAnimation.reverse();
     else {
       if (this.animation) {
-        this.animation.reverse();
+        this.animation.reverse(), this.hasOpacity && this.nativeAnimation.reverse();
         return;
       }
       this.animation = this.transparentDiv.animate([
         {
-          width: 0
+          width: 0,
+          opacity: 0
+        },
+        {
+          width: this.maxWidth,
+          opacity: +this.containerOpacity
+        }
+      ], t), this.hasOpacity && (this.nativeAnimation = this.nativeElement.animate([
+        {
+          opacity: 0
         },
         {
-          width: this.maxWidth
+          opacity: 1
         }
-      ], t);
+      ], t));
     }
-    return new Promise((i, n) => {
+    return new Promise((i, a) => {
       this.animation.onfinish = () => {
         i();
       };
@@ -238,8 +267,8 @@ class h extends p {
     this._isOpen ? await this.close() : await this.open();
   }
 }
-customElements.define("wje-sliding-container", h);
-h.define("wje-sliding-container", h);
+customElements.define("wje-sliding-container", l);
+l.define("wje-sliding-container", l);
 export {
-  h as default
+  l as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
-  "version": "0.1.45",
+  "version": "0.1.46",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",