wj-elements 0.1.128 → 0.1.130

package/dist/wje-reorder.js

@@ -2,15 +2,18 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
-const styles = ".container {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: auto;\n  flex-direction: var(--flex-direction);\n}\n\n.container-w-dropzones {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: row;\n}\n\n.reversed {\n  --flex-direction: column-reverse;\n}\n\n.basic {\n  --flex-direction: column;\n}\n\n.dragging {\n  position: absolute;\n  pointer-events: none;\n  z-index: 1000;\n}\n\n.reorder-item {\n  transition: top 0.3s ease, left 0.3s ease;\n}";
+const styles = ".container {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: auto;\n    flex-direction: var(--flex-direction);\n}\n\n.container-w-dropzones {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: row;\n}\n\n.reversed {\n    --flex-direction: column-reverse;\n}\n\n.basic {\n    --flex-direction: column;\n}\n\n.dragging {\n    position: absolute;\n    pointer-events: none;\n    z-index: 1000;\n}\n\n.reorder-item {\n    transition:\n        top 0.3s ease,\n        left 0.3s ease;\n}\n";
 class Reorder extends WJElement {
   /**
    * Creates an instance of Select.
-   *
-   * @constructor
+   * @class
    */
   constructor() {
     super();
+    /**
+     * The class name for the component.
+     * @type {string}
+     */
     __publicField(this, "className", "Select");
     this.dragEl = null;
     this.items = [];
@@ -22,7 +25,6 @@ class Reorder extends WJElement {
   }
   /**
    * Returns the CSS styles for the component.
-   *
    * @static
    * @returns {CSSStyleSheet}
    */
@@ -31,7 +33,6 @@ class Reorder extends WJElement {
   }
   /**
    * Returns the list of attributes to observe for changes.
-   *
    * @static
    * @returns {Array<string>}
    */
@@ -44,7 +45,11 @@ class Reorder extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
+  /**
+   * Draws the component after it is connected to the DOM.
+   * @returns {DocumentFragment}
+   */
+  draw() {
     const fragment = document.createDocumentFragment();
     const container = document.createElement("div");
     container.classList.add("container");
@@ -56,7 +61,10 @@ class Reorder extends WJElement {
     this.container = container;
     return fragment;
   }
-  afterDraw(context, store, params) {
+  /**
+   * Adds event listeners after the component is drawn.
+   */
+  afterDraw() {
     const items = this.querySelectorAll("wje-reorder-item");
     const dropZones = this.querySelectorAll("wje-reorder-dropzone");
     this.container.classList.add(this.hasAttribute("reverse") ? "reversed" : "basic");
@@ -76,26 +84,42 @@ class Reorder extends WJElement {
       });
     }
   }
+  /**
+   * Attaches event listeners to the element.
+   * @param element
+   */
   attachEventListeners(element) {
-    element.addEventListener("mousedown", this.onMouseDown.bind(this), false);
-    element.addEventListener("touchstart", this.onTouchStart.bind(this), false);
-    element.addEventListener("dragstart", this.onDragStart.bind(this), false);
+    element.addEventListener("mousedown", this.mouseDown.bind(this), false);
+    element.addEventListener("touchstart", this.touchStart.bind(this), false);
+    element.addEventListener("dragstart", this.dragStart.bind(this), false);
   }
-  /*Initialization of dragging
-  **********************************************************************************/
-  onMouseDown(e) {
+  /**
+   * Handles the mouse down event.
+   * @param {object} e
+   */
+  mouseDown(e) {
     this.startDragging(e.clientX, e.clientY, e.currentTarget);
-    document.addEventListener("mousemove", this.onMouseMove.bind(this), false);
-    document.addEventListener("mouseup", this.onMouseUp.bind(this), false);
+    document.addEventListener("mousemove", this.mouseMove.bind(this), false);
+    document.addEventListener("mouseup", this.mouseUp.bind(this), false);
     document.body.style.userSelect = "none";
   }
-  onTouchStart(e) {
+  /**
+   * Handles the touch start event.
+   * @param e
+   */
+  touchStart(e) {
     const touch = e.touches[0];
     this.startDragging(touch.clientX, touch.clientY, e.currentTarget);
-    document.addEventListener("touchmove", this.onTouchMove.bind(this), false);
-    document.addEventListener("touchend", this.onTouchEnd.bind(this), false);
+    document.addEventListener("touchmove", this.touchMove.bind(this), false);
+    document.addEventListener("touchend", this.touchEnd.bind(this), false);
     document.body.style.userSelect = "none";
   }
+  /**
+   * Initializes the dragging process for a reorderable item.
+   * @param {number} clientX The x-coordinate of the mouse pointer when the drag starts.
+   * @param {number} clientY The y-coordinate of the mouse pointer when the drag starts.
+   * @param {HTMLElement} target The target element where the drag event originated.
+   */
   startDragging(clientX, clientY, target) {
     if (this.hasAttribute("disabled")) {
       return;
@@ -111,9 +135,11 @@ class Reorder extends WJElement {
     this.originalIndex = [...this.dragEl.parentNode.children].indexOf(this.dragEl);
     this.originalParent = this.dragEl.parentNode;
   }
-  /*Initialization of movement
-  **********************************************************************************/
-  onMouseMove(e) {
+  /**
+   * Handles the mouse move event.
+   * @param e
+   */
+  mouseMove(e) {
     if (!this.isDragging) return;
     this.moveElement(e.pageX, e.pageY);
     if (this.cloneEl) {
@@ -121,11 +147,20 @@ class Reorder extends WJElement {
       this.cloneEl.style.top = `${e.pageY - this.offsetY}px`;
     }
   }
-  onTouchMove(e) {
+  /**
+   * Handles the `touchmove` event and updates the position of the dragged element.
+   * @param {TouchEvent} e The touch event containing touch position data.
+   */
+  touchMove(e) {
     if (!this.isDragging) return;
     const touch = e.touches[0];
     this.moveElement(touch.pageX, touch.pageY);
   }
+  /**
+   * Updates the position of the dragged element and handles reordering logic based on the mouse position.
+   * @param {number} pageX The x-coordinate of the mouse pointer relative to the viewport during the move event.
+   * @param {number} pageY The y-coordinate of the mouse pointer relative to the viewport during the move event.
+   */
   moveElement(pageX, pageY) {
     const scrollX = window.scrollX || document.documentElement.scrollLeft;
     const scrollY = window.scrollY || document.documentElement.scrollTop;
@@ -150,12 +185,13 @@ class Reorder extends WJElement {
       }
     });
   }
-  /*End of dragging
-  **********************************************************************************/
-  onMouseUp() {
+  /**
+   * Handles the mouse up event.
+   */
+  mouseUp() {
     this.stopDragging();
-    document.removeEventListener("mousemove", this.onMouseMove.bind(this), false);
-    document.removeEventListener("mouseup", this.onMouseUp.bind(this), false);
+    document.removeEventListener("mousemove", this.mouseMove.bind(this), false);
+    document.removeEventListener("mouseup", this.mouseUp.bind(this), false);
     if (this.cloneEl) {
       this.cloneEl.remove();
       this.cloneEl = null;
@@ -164,11 +200,17 @@ class Reorder extends WJElement {
       this.dragEl.style.opacity = "1";
     }
   }
-  onTouchEnd() {
+  /**
+   * Handles the touch end event.
+   */
+  touchEnd() {
     this.stopDragging();
-    document.removeEventListener("touchmove", this.onTouchMove.bind(this), false);
-    document.removeEventListener("touchend", this.onTouchEnd.bind(this), false);
+    document.removeEventListener("touchmove", this.touchMove.bind(this), false);
+    document.removeEventListener("touchend", this.touchEnd.bind(this), false);
   }
+  /**
+   * Stops dragging the element.
+   */
   stopDragging() {
     if (!this.isDragging) return;
     this.isDragging = false;
@@ -188,11 +230,16 @@ class Reorder extends WJElement {
     this.dispatchChange(this.originalIndex, newIndex, newOrder);
     document.body.style.userSelect = "";
   }
-  onDragStart(e) {
+  /**
+   * Prevents the default behavior of the `dragstart` event.
+   * @param {DragEvent} e The drag event triggered when a drag operation starts.
+   */
+  dragStart(e) {
     e.preventDefault();
   }
-  /*Helpers
-  **********************************************************************************/
+  /**
+   * Creates a clone of the element.
+   */
   createClone() {
     this.cloneEl = this.dragEl.cloneNode(true);
     this.cloneEl.style.position = "absolute";
@@ -200,16 +247,26 @@ class Reorder extends WJElement {
     this.cloneEl.style.visibility = "visible";
     document.body.appendChild(this.cloneEl);
   }
+  /**
+   * Checks if the dragged element is moving down.
+   * @param droppedElement
+   * @returns {boolean}
+   */
   isMovingDown(droppedElement) {
     const parent = droppedElement.parentNode;
     const dragIndex = Array.from(parent.children).indexOf(this.dragEl);
     const dropIndex = Array.from(parent.children).indexOf(droppedElement);
     return dragIndex < dropIndex;
   }
+  /**
+   * Dispatches a custom event to signal that a reordering operation has occurred.
+   * @param {number} from The original index of the dragged item.
+   * @param {number} to The new index of the dragged item after reordering.
+   * @param {Array<number>} order The updated order of items after the reordering.
+   * // @fires wje-reorder:change - Dispatched when the reordering is completed.
+   * The event includes details about the initial position, the new position, and the new order.
+   */
   dispatchChange(from, to, order) {
-    console.log("FROM:", from);
-    console.log("TO:", to);
-    console.log("ORDER:", order);
     this.dispatchEvent(
       new CustomEvent("wje-reorder:change", {
         detail: { from, to, order }

package/dist/wje-route.js

@@ -5,8 +5,7 @@ import WJElement from "./wje-element.js";
 class Route extends WJElement {
   /**
    * Creates an instance of Route.
-   *
-   * @constructor
+   * @class
    */
   constructor() {
     super();
@@ -14,7 +13,6 @@ class Route extends WJElement {
   }
   /**
    * Returns the list of attributes to observe for changes.
-   *
    * @static
    * @returns {Array<string>}
    */
@@ -28,14 +26,10 @@ class Route extends WJElement {
     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.
+   * Draws the component for the route.
    * @returns {DocumentFragment}
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let slot = document.createElement("slot");
     fragment.appendChild(slot);

package/dist/wje-router-link.js

@@ -1,23 +1,20 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { b as bindRouterLinks } from "./router-links-CJnOdbas.js";
 import WJElement from "./wje-element.js";
-import { b as bindRouterLinks } from "./router-links-I2vcmVCs.js";
-const styles = "/*\n[ WJ Router Link ]\n*/\n\n:host{\n    display: block;\n    background: transparent !important;\n}\n\n:host(.active){\n    cursor: pointer;\n    font-weight: bold;\n}";
+const styles = "/*\n[ WJ Router Link ]\n*/\n\n:host {\n    display: block;\n    background: transparent !important;\n}\n\n:host(.active) {\n    cursor: pointer;\n    font-weight: bold;\n}\n";
 class RouterLink extends WJElement {
   /**
    * Creates an instance of RouterLink.
-   *
-   * @constructor
+   * @class
    */
   constructor() {
     super();
     __publicField(this, "className", "RouterLink");
-    this.unbindRouterLinks = bindRouterLinks(this, { selector: false });
   }
   /**
    * Returns the CSS styles for the component.
-   *
    * @static
    * @returns {CSSStyleSheet}
    */
@@ -26,7 +23,6 @@ class RouterLink extends WJElement {
   }
   /**
    * Returns the list of attributes to observe for changes.
-   *
    * @static
    * @returns {Array<string>}
    */
@@ -41,24 +37,24 @@ class RouterLink extends WJElement {
     this.setAttribute("active-class", "active");
   }
   /**
-   * Draws the component.
-   *
-   * @param {Object} context - The context for drawing.
-   * @param {Object} store - The store for drawing.
-   * @param {Object} params - The parameters for drawing.
+   * Draws the component for the router link.
    * @returns {DocumentFragment}
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let element = document.createElement("slot");
     fragment.appendChild(element);
     return fragment;
   }
+  afterDraw(context, appStore, attributes) {
+    this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });
+  }
   /**
    * Cleans up before the component is disconnected.
    */
   beforeDisconnect() {
-    this.unbindRouterLinks();
+    var _a;
+    (_a = this.unbindRouterLinks) == null ? void 0 : _a.call(this);
   }
 }
 RouterLink.define("wje-router-link", RouterLink);

package/dist/wje-router-outlet.js

@@ -23,35 +23,33 @@ class AnimationHook {
     done();
   }
 }
-var raf = window.requestAnimationFrame;
-var TRANSITION = "transition";
-var ANIMATION = "animation";
-var transitionProp = "transition";
-var transitionEndEvent = "transitionend";
-var animationProp = "animation";
-var animationEndEvent = "animationend";
+const raf = window.requestAnimationFrame;
+const TRANSITION = "transition";
+const ANIMATION = "animation";
+const transitionProp = "transition";
+const transitionEndEvent = "transitionend";
+const animationProp = "animation";
+const animationEndEvent = "animationend";
 function nextFrame(fn) {
-  window.scrollTo(0, 0);
   raf(function() {
-    window.scrollTo(0, 0);
     raf(fn);
   });
 }
 function whenTransitionEnds(el, cb) {
-  var ref = getTransitionInfo(el);
-  var type = ref.type;
-  var timeout = ref.timeout;
-  var propCount = ref.propCount;
+  const ref = getTransitionInfo(el);
+  const type = ref.type;
+  const timeout = ref.timeout;
+  const propCount = ref.propCount;
   if (!type) {
     return cb();
   }
-  var event = type === TRANSITION ? transitionEndEvent : animationEndEvent;
-  var ended = 0;
-  var end = function() {
+  const event = type === TRANSITION ? transitionEndEvent : animationEndEvent;
+  let ended = 0;
+  const end = function() {
     el.removeEventListener(event, onEnd);
     cb();
   };
-  var onEnd = function(e) {
+  const onEnd = function(e) {
     if (e.target === el) {
       if (++ended >= propCount) {
         end();
@@ -66,19 +64,16 @@ function whenTransitionEnds(el, cb) {
   el.addEventListener(event, onEnd);
 }
 function getTransitionInfo(el) {
-  var styles = window.getComputedStyle(el);
-  var transitionDelays = (styles[transitionProp + "Delay"] || "").split(", ");
-  var transitionDurations = (styles[transitionProp + "Duration"] || "").split(", ");
-  var transitionTimeout = getTimeout(transitionDelays, transitionDurations);
-  var animationDelays = (styles[animationProp + "Delay"] || "").split(", ");
-  var animationDurations = (styles[animationProp + "Duration"] || "").split(", ");
-  var animationTimeout = getTimeout(animationDelays, animationDurations);
-  var type;
-  var timeout = 0;
-  var propCount = 0;
-  timeout = Math.max(transitionTimeout, animationTimeout);
-  type = timeout > 0 ? transitionTimeout > animationTimeout ? TRANSITION : ANIMATION : null;
-  propCount = type ? type === TRANSITION ? transitionDurations.length : animationDurations.length : 0;
+  const styles = window.getComputedStyle(el);
+  const transitionDelays = (styles[transitionProp + "Delay"] || "").split(", ");
+  const transitionDurations = (styles[transitionProp + "Duration"] || "").split(", ");
+  const transitionTimeout = getTimeout(transitionDelays, transitionDurations);
+  const animationDelays = (styles[animationProp + "Delay"] || "").split(", ");
+  const animationDurations = (styles[animationProp + "Duration"] || "").split(", ");
+  const animationTimeout = getTimeout(animationDelays, animationDurations);
+  const timeout = Math.max(transitionTimeout, animationTimeout);
+  const type = timeout > 0 ? transitionTimeout > animationTimeout ? TRANSITION : ANIMATION : null;
+  const propCount = type ? type === TRANSITION ? transitionDurations.length : animationDurations.length : 0;
   return {
     type,
     timeout,
@@ -89,9 +84,12 @@ function getTimeout(delays, durations) {
   while (delays.length < durations.length) {
     delays = delays.concat(delays);
   }
-  return Math.max.apply(null, durations.map(function(d, i) {
-    return toMs(d) + toMs(delays[i]);
-  }));
+  return Math.max.apply(
+    null,
+    durations.map(function(d, i) {
+      return toMs(d) + toMs(delays[i]);
+    })
+  );
 }
 function toMs(s) {
   return Number(s.slice(0, -1).replace(",", ".")) * 1e3;
@@ -99,7 +97,6 @@ function toMs(s) {
 function runTransition(el, name, type, cb) {
   el.classList.add(`${name}-${type}-active`);
   nextFrame(function() {
-    window.scrollTo(0, 0);
     el.classList.remove(`${name}-${type}`);
     el.classList.add(`${name}-${type}-to`);
     whenTransitionEnds(el, function() {
@@ -120,7 +117,6 @@ class GenericCSS extends AnimationHook {
   leave(outlet, el, done) {
     const name = outlet.getAttribute("animation") || "outlet";
     el.classList.add(`${name}-leave`);
-    el.style.display = "none";
     runTransition(el, name, "leave", done);
   }
 }
@@ -179,11 +175,13 @@ setDefaultAnimation(GenericCSS);
 class RouterOutlet extends AnimatedOutlet {
   /**
    * Creates an instance of Route.
-   *
-   * @constructor
    */
   constructor() {
     super();
+    /**
+     * The class name for the component.
+     * @type {string}
+     */
     __publicField(this, "className", "RouterOutlet");
   }
 }