wj-elements 0.1.44 → 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";
@@ -90,7 +90,8 @@ 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 { P as Kr } from "./popup.element-CWsSOxs2.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",
@@ -154,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);
@@ -240,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);
@@ -270,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 {
@@ -309,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);
@@ -376,7 +377,7 @@ export {
   qt as MenuLabel,
   Pt as Option,
   Gt as Options,
-  Kr as Popup,
+  Zr as Popup,
   $t as ProgressBar,
   Wt as QrCode,
   Qt as Radio,
@@ -394,6 +395,7 @@ export {
   vr as Row,
   br as Select,
   jr as Slider,
+  Kr as SlidingContainer,
   Cr as SplitView,
   Er as Status,
   v as Step,

package/dist/wje-menu-item.js

@@ -12,6 +12,11 @@ class j extends E {
   constructor() {
     super();
     c(this, "className", "MenuItem");
+    /**
+     * Checks if the submenu should be hidden based on the event.
+     *
+     * @param {Event} e - The event object.
+     */
     c(this, "shouldHideSubmenu", (e) => {
       if (this.collapse || this.variant === "CONTEXT" && this.hasSubmenu) {
         if (e.relatedTarget && this.contains(e.relatedTarget) || this.variant === "NAV" && !this.collapse)

package/dist/wje-sliding-container.js

@@ -0,0 +1,274 @@
+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.
+   *
+   * @constructor
+   */
+  constructor() {
+    super();
+    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.
+     */
+    h(this, "triggerEvent", (t) => {
+      this._lastCaller && this._lastCaller !== t.target ? this.open() : this.toggle(), this._lastCaller = t.target;
+    });
+    this._isOpen = !1, this._lastCaller = null;
+  }
+  set maxWidth(t) {
+    this.setAttribute("max-width", t);
+  }
+  get maxWidth() {
+    return this.getAttribute("max-width") ?? "auto";
+  }
+  set maxHeight(t) {
+    this.setAttribute("max-height", t);
+  }
+  get maxHeight() {
+    return this.getAttribute("max-height") ?? "auto";
+  }
+  set trigger(t) {
+    this.setAttribute("trigger", t);
+  }
+  get trigger() {
+    return this.getAttribute("trigger") ?? "sliding-container";
+  }
+  set direction(t) {
+    this.setAttribute("direction", t);
+  }
+  get direction() {
+    return this.getAttribute("direction") ?? "right";
+  }
+  set removeChildAfterClose(t) {
+    this.setAttribute("remove-child-after-close", t);
+  }
+  get removeChildAfterClose() {
+    return this.hasAttribute("remove-child-after-close") ?? !1;
+  }
+  set variant(t) {
+    this.setAttribute("variant", t);
+  }
+  get variant() {
+    return this.getAttribute("variant") ?? "in-place";
+  }
+  get screenBreakPoint() {
+    return this.getAttribute("screen-break-point");
+  }
+  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", "animation-duration", "animation-easing", "has-opacity"];
+  }
+  /**
+   * Returns the CSS styles for the component.
+   *
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return v;
+  }
+  /**
+   * 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(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, 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), s.appendChild(this.transparentDiv), s.appendChild(e), this.nativeElement = e, s;
+  }
+  /**
+   * Creates and returns a close button element.
+   * @returns {HTMLElement} The close button element.
+   */
+  getCloseButton() {
+    let t = document.createElement("wje-button");
+    t.setAttribute("part", "close-button"), t.style.position = "absolute", t.style.top = "0", t.style.right = "0", t.style.zIndex = "1000";
+    let i = document.createElement("wje-icon");
+    return i.setAttribute("slot", "icon-only"), i.setAttribute("name", "x"), t.appendChild(i), t.addEventListener("click", () => {
+      this.close();
+    }), t;
+  }
+  /**
+   * Executes before drawing the element.
+   */
+  beforeDraw() {
+    document.removeEventListener(this.trigger, this.triggerEvent);
+  }
+  /**
+   * Performs actions after the element is drawn on the screen.
+   * Attaches an event listener to the document based on the specified trigger.
+   * Sets the variant to "over" if the document width is smaller than the screen break point.
+   * Calls the checkForVariant method with the current variant.
+   * @returns {Promise<void>} A promise that resolves after the actions are completed.
+   */
+  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 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");
+    }
+  }
+  /**
+   * Executes before the element is opened.
+   */
+  beforeOpen() {
+  }
+  /**
+   * Callback function called after the element is opened.
+   */
+  afterOpen() {
+  }
+  /**
+   * Executes before closing the element.
+   */
+  beforeClose() {
+  }
+  /**
+   * Callback function that is called after the container is closed.
+   */
+  afterClose() {
+  }
+  /**
+   * Animates the transition of the element's width from 0 to the maximum width or vice versa.
+   * @returns {Promise<void>} A promise that resolves when the animation finishes.
+   */
+  doAnimateTransition() {
+    const t = {
+      delay: 0,
+      endDelay: 0,
+      fill: "both",
+      duration: +this.animationDuration,
+      iterationStart: 0,
+      iterations: 1,
+      direction: "normal",
+      easing: this.animationEasing
+    };
+    if (this._isOpen)
+      this.animation.reverse(), this.hasOpacity && this.nativeAnimation.reverse();
+    else {
+      if (this.animation) {
+        this.animation.reverse(), this.hasOpacity && this.nativeAnimation.reverse();
+        return;
+      }
+      this.animation = this.transparentDiv.animate([
+        {
+          width: 0,
+          opacity: 0
+        },
+        {
+          width: this.maxWidth,
+          opacity: +this.containerOpacity
+        }
+      ], t), this.hasOpacity && (this.nativeAnimation = this.nativeElement.animate([
+        {
+          opacity: 0
+        },
+        {
+          opacity: 1
+        }
+      ], t));
+    }
+    return new Promise((i, a) => {
+      this.animation.onfinish = () => {
+        i();
+      };
+    });
+  }
+  /**
+   * Opens the container with an animation.
+   * @returns {Promise<void>} A promise that resolves when the container is opened.
+   */
+  async open() {
+    await Promise.resolve(this.beforeOpen()).then(() => {
+      Promise.resolve(this._isOpen ? () => {
+      } : this.doAnimateTransition()).then(() => {
+        Promise.resolve(this.afterOpen()).then(() => {
+          this._isOpen = !0;
+        });
+      });
+    });
+  }
+  /**
+   * Closes the animation container.
+   * 
+   * @returns {Promise<void>} A promise that resolves when the container is closed.
+   */
+  async close() {
+    await Promise.resolve(this.beforeClose()).then(() => {
+      Promise.resolve(this._isOpen ? this.doAnimateTransition() : () => {
+      }).then(() => {
+        Promise.resolve(this.afterClose()).then(() => {
+          this.removeChildAfterClose && this.childNodes.forEach((t) => {
+            t.remove();
+          }), this._isOpen = !1;
+        });
+      });
+    });
+  }
+  /**
+   * Toggles the state of the element.
+   * If the element is open, it will be closed. If it is closed, it will be opened.
+   * @returns {Promise<void>} A promise that resolves when the toggle operation is complete.
+   */
+  async toggle() {
+    this._isOpen ? await this.close() : await this.open();
+  }
+}
+customElements.define("wje-sliding-container", l);
+l.define("wje-sliding-container", l);
+export {
+  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.44",
+  "version": "0.1.46",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",
@@ -47,7 +47,6 @@
     "@faker-js/faker": "^8.0.0",
     "@floating-ui/dom": "^1.5.1",
     "animate.css": "^4.1.1",
-    "fs-extra": "^11.2.0",
     "qrious": "^4.0.2",
     "tinycolor2": "^1.6.0",
     "wj-elements": "^0.1.19"