wj-elements 0.1.44 → 0.1.45

package/dist/wje-master.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",
@@ -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,245 @@
+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 {
+  /**
+   * Creates an instance of SlidingContainer.
+   *
+   * @constructor
+   */
+  constructor() {
+    super();
+    l(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) => {
+      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);
+  }
+  static get observedAttributes() {
+    return ["max-width", "max-height", "trigger", "direction", "variant", "screen-break-point", "remove-child-after-close"];
+  }
+  /**
+   * Returns the CSS styles for the component.
+   *
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return u;
+  }
+  /**
+   * 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, n) {
+    let a = 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;
+    let o = document.createElement("slot");
+    return e.appendChild(this.getCloseButton()), e.appendChild(o), a.appendChild(this.transparentDiv), a.appendChild(e), a;
+  }
+  /**
+   * 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);
+  }
+  /**
+   * Checks for a specific variant and applies corresponding styles.
+   *
+   * @param {string} variant - The variant to check for.
+   */
+  checkForVariant(t) {
+    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");
+    }
+  }
+  /**
+   * 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: 500,
+      iterationStart: 0,
+      iterations: 1,
+      direction: "normal",
+      easing: "linear"
+    };
+    if (this._isOpen)
+      this.animation.reverse();
+    else {
+      if (this.animation) {
+        this.animation.reverse();
+        return;
+      }
+      this.animation = this.transparentDiv.animate([
+        {
+          width: 0
+        },
+        {
+          width: this.maxWidth
+        }
+      ], t);
+    }
+    return new Promise((i, n) => {
+      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", h);
+h.define("wje-sliding-container", h);
+export {
+  h 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.45",
   "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"