wj-elements 0.1.128 → 0.1.129

package/dist/wje-rate.js

@@ -39,8 +39,8 @@ class Rate extends WJElement {
      */
     __publicField(this, "onMouseMove", (e) => {
       e.preventDefault();
-      let newValue = this.getValueFromXPosition(e.clientX);
-      if (newValue != this.hoverValue) {
+      let newValue = +this.getValueFromXPosition(e.clientX);
+      if (newValue !== +this.hoverValue) {
         this.hoverValue = newValue;
         this.changeRate();
       }
@@ -190,7 +190,7 @@ class Rate extends WJElement {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment}
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("div");
     native.setAttribute("part", "native");
@@ -212,6 +212,9 @@ class Rate extends WJElement {
   }
   /**
    * Adds event listeners after the component is drawn.
+   * @params {Object} context - The context for drawing.
+   * @params {Object} store - The store for drawing.
+   * @params {Object} params - The parameters for drawing.
    */
   afterDraw() {
     if (this.hasAttribute("disabled") || this.hasAttribute("readonly")) {

package/dist/wje-relative-time.js

@@ -15,22 +15,38 @@ class RelativeTime extends WJElement {
     this.localizer = new Localizer(this);
   }
   /**
-   * Gets the ISO date of the relative time component.
-   *
-   * @returns {string} The ISO date.
+   * Sets the date of the relative time component
+   * @param value
+   */
+  set date(value) {
+    this.setAttribute("date", value);
+  }
+  /**
+   * Gets the date of the relative time component
+   * @returns {string}
    */
-  get dateISO() {
+  get date() {
+    return this.getAttribute("date");
+  }
+  /**
+   * Sets the object date of the relative time component
+   * @param value
+   */
+  set objectDate(value) {
+    this.setAttribute("object-date", value);
+  }
+  /**
+   * Gets the object date of the relative time component
+   * @returns {Date}
+   */
+  get objectDate() {
     let date = /* @__PURE__ */ new Date();
-    let inputDate = this.getAttribute("date");
-    if (this.hasAttribute("date")) {
-      if (this.isISODate(inputDate)) {
-        inputDate = inputDate;
-      } else {
-        inputDate = +inputDate * 1e3;
-      }
+    let inputDate = this.date;
+    if (!!inputDate && inputDate !== "") {
+      inputDate = this.isISODate(inputDate) ? inputDate : +inputDate * 1e3;
       date = new Date(inputDate);
     }
-    return date.toISOString();
+    return date;
   }
   /**
    * Returns the list of attributes to observe for changes.
@@ -39,7 +55,7 @@ class RelativeTime extends WJElement {
    * @returns {Array<string>}
    */
   static get observedAttributes() {
-    return [""];
+    return [];
   }
   /**
    * Sets up the attributes for the component.
@@ -55,12 +71,12 @@ class RelativeTime extends WJElement {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment}
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let element = document.createElement("div");
     element.setAttribute("part", "native");
     element.classList.add("native-relative-time");
-    element.innerText = this.getRelativeTimeString(this.dateISO);
+    element.innerText = this.getRelativeTimeString();
     fragment.appendChild(element);
     return fragment;
   }
@@ -71,9 +87,11 @@ class RelativeTime extends WJElement {
    * @param {string} lang - The language.
    * @returns {string} The relative time string.
    */
-  getRelativeTimeString(date, lang = navigator.language) {
-    let dateObj = new Date(date);
-    const timeMs = dateObj.getTime();
+  getRelativeTimeString(lang = navigator.language) {
+    if (this.objectDate.toString() === "Invalid Date" || this.objectDate.toString() === "NaN") {
+      return "";
+    }
+    const timeMs = this.objectDate.getTime();
     const deltaSeconds = Math.round((timeMs - Date.now()) / 1e3);
     const cutoffs = [
       60,
@@ -87,7 +105,7 @@ class RelativeTime extends WJElement {
     const units = ["second", "minute", "hour", "day", "week", "month", "year"];
     const unitIndex = cutoffs.findIndex((cutoff) => cutoff > Math.abs(deltaSeconds));
     const divisor = unitIndex ? cutoffs[unitIndex - 1] : 1;
-    return this.localizer.relativeTime(Math.floor(deltaSeconds / divisor), units[unitIndex], { numeric: "auto" });
+    return this.localizer.relativeTime(this.getAttribute("lang"), Math.floor(deltaSeconds / divisor), units[unitIndex], { numeric: "auto" });
   }
   /**
    * Checks if the given string is an ISO date.

package/dist/wje-reorder.js

@@ -44,7 +44,14 @@ class Reorder extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
+  /**
+   * 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() {
     const fragment = document.createDocumentFragment();
     const container = document.createElement("div");
     container.classList.add("container");
@@ -56,7 +63,13 @@ class Reorder extends WJElement {
     this.container = container;
     return fragment;
   }
-  afterDraw(context, store, params) {
+  /**
+   * Adds event listeners after the component is drawn.
+   * @param context
+   * @param store
+   * @param params
+   */
+  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,19 +89,29 @@ 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);
   }
-  /*Initialization of dragging
-  **********************************************************************************/
+  /**
+   * Handles the mouse down event.
+   * @param e
+   */
   onMouseDown(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.body.style.userSelect = "none";
   }
+  /**
+   * Handles the touch start event.
+   * @param e
+   */
   onTouchStart(e) {
     const touch = e.touches[0];
     this.startDragging(touch.clientX, touch.clientY, e.currentTarget);
@@ -96,6 +119,12 @@ class Reorder extends WJElement {
     document.addEventListener("touchend", this.onTouchEnd.bind(this), false);
     document.body.style.userSelect = "none";
   }
+  /**
+   * Starts dragging the element.
+   * @param clientX
+   * @param clientY
+   * @param target
+   */
   startDragging(clientX, clientY, target) {
     if (this.hasAttribute("disabled")) {
       return;
@@ -111,8 +140,10 @@ class Reorder extends WJElement {
     this.originalIndex = [...this.dragEl.parentNode.children].indexOf(this.dragEl);
     this.originalParent = this.dragEl.parentNode;
   }
-  /*Initialization of movement
-  **********************************************************************************/
+  /**
+   * Handles the mouse move event.
+   * @param e
+   */
   onMouseMove(e) {
     if (!this.isDragging) return;
     this.moveElement(e.pageX, e.pageY);
@@ -121,11 +152,20 @@ class Reorder extends WJElement {
       this.cloneEl.style.top = `${e.pageY - this.offsetY}px`;
     }
   }
+  /**
+   * Handles the touch move event.
+   * @param e
+   */
   onTouchMove(e) {
     if (!this.isDragging) return;
     const touch = e.touches[0];
     this.moveElement(touch.pageX, touch.pageY);
   }
+  /**
+   * Moves the element.
+   * @param pageX
+   * @param pageY
+   */
   moveElement(pageX, pageY) {
     const scrollX = window.scrollX || document.documentElement.scrollLeft;
     const scrollY = window.scrollY || document.documentElement.scrollTop;
@@ -150,8 +190,9 @@ class Reorder extends WJElement {
       }
     });
   }
-  /*End of dragging
-  **********************************************************************************/
+  /**
+   * Handles the mouse up event.
+   */
   onMouseUp() {
     this.stopDragging();
     document.removeEventListener("mousemove", this.onMouseMove.bind(this), false);
@@ -164,11 +205,17 @@ class Reorder extends WJElement {
       this.dragEl.style.opacity = "1";
     }
   }
+  /**
+   * Handles the touch end event.
+   */
   onTouchEnd() {
     this.stopDragging();
     document.removeEventListener("touchmove", this.onTouchMove.bind(this), false);
     document.removeEventListener("touchend", this.onTouchEnd.bind(this), false);
   }
+  /**
+   * Stops dragging the element.
+   */
   stopDragging() {
     if (!this.isDragging) return;
     this.isDragging = false;
@@ -188,11 +235,16 @@ class Reorder extends WJElement {
     this.dispatchChange(this.originalIndex, newIndex, newOrder);
     document.body.style.userSelect = "";
   }
+  /**
+   * Handles the drag start event.
+   * @param e
+   */
   onDragStart(e) {
     e.preventDefault();
   }
-  /*Helpers
-  **********************************************************************************/
+  /**
+   * Creates a clone of the element.
+   */
   createClone() {
     this.cloneEl = this.dragEl.cloneNode(true);
     this.cloneEl.style.position = "absolute";
@@ -200,12 +252,23 @@ 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 the change event.
+   * @param from
+   * @param to
+   * @param order
+   */
   dispatchChange(from, to, order) {
     console.log("FROM:", from);
     console.log("TO:", to);

package/dist/wje-route.js

@@ -35,7 +35,7 @@ class Route extends WJElement {
    * @param {Object} params - The parameters for drawing.
    * @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

@@ -42,13 +42,12 @@ class RouterLink extends WJElement {
   }
   /**
    * 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(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let element = document.createElement("slot");
     fragment.appendChild(element);

package/dist/wje-routerx.js

@@ -1424,7 +1424,6 @@ class Routerx extends WJElement {
     __publicField(this, "className", "Routerx");
     /**
      * Sets the breadcrumb for the transition.
-     *
      * @param {Object} transition - The transition.
      */
     __publicField(this, "setBreadcrumb", (transition2) => {
@@ -1467,6 +1466,9 @@ class Routerx extends WJElement {
   }
   /**
    * Sets up the router after the component is drawn.
+   * @params {Object} context - The context for drawing.
+   * @params {Object} store - The store for drawing.
+   * @params {Object} params - The parameters for drawing.
    */
   afterDraw() {
     const htmlString = this.outerHTML;

package/dist/wje-row.js

@@ -28,24 +28,14 @@ class Row extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  /**
-   * Executes before the component is drawn.
-   *
-   * @param {Object} context - The context for drawing.
-   * @param {Object} store - The store for drawing.
-   * @param {Object} params - The parameters for drawing.
-   */
-  beforeDraw(context, store, params) {
-  }
   /**
    * 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(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     if (this.hasAttribute("wrap"))
       this.classList.add("wje-wrap");

package/dist/wje-select.js

@@ -10,7 +10,7 @@ import Chip from "./wje-chip.js";
 import Input from "./wje-input.js";
 import Option from "./wje-option.js";
 import Options from "./wje-options.js";
-import { P as Popup } from "./popup.element-l8v-dMoK.js";
+import { P as Popup } from "./popup.element-C0a1z1y2.js";
 const styles = "/*\n[ WJ Select ]\n*/\n\n:host {\n  --wje-select-border-width: 1px;\n  --wje-select-border-style: solid;\n  --wje-select-border-color: var(--wje-border-color);\n\n  --wje-select-options-border-width: 1px;\n  --wje-select-options-border-style: var(--wje-border-style);\n  --wje-select-options-border-color: var(--wje-border-color);\n\n  --wje-select-background: var(--wje-background);\n  --wje-select-line-height: 20px;\n  --wje-select-color: var(--wje-color);\n  --wje-select-border-radius: var(--wje-border-radius-medium);\n\n  --wje-select-margin-bottom: .5rem;\n  margin-bottom: var(--wje-select-margin-bottom);\n\n  width: 100%;\n  display: block;\n  [slot=arrow] {\n    transform: rotate(0deg);\n    transition: all .2s ease-in;\n  }\n}\n\n.native-select {\n  &.default{\n    .wrapper {\n      display: block;\n      border-width: var(--wje-select-border-width);\n      border-style: var(--wje-select-border-style);\n      border-color: var(--wje-select-border-color);\n      border-radius: var(--wje-select-border-radius);\n      padding-inline: .5rem;\n      padding-top: 0.125rem;\n      padding-bottom: 0.125rem;\n    }\n    .input-wrapper {\n      padding: 0;\n      min-height: 28px;\n      margin-top: -4px;\n    }\n    &.focused {\n      wje-label {\n        opacity: 0.67;\n        font-size: 12px;\n        letter-spacing: normal;\n      }\n    }\n    wje-label {\n      margin: 0;\n      display: block;\n      opacity: 1;\n      cursor: text;\n      transition: opacity 0.2s ease 0s;\n      line-height: var(--wje-select-line-height);\n      &.fade {\n        opacity: 0.5;\n        font-size: 12px;\n        letter-spacing: normal;\n      }\n    }\n  }\n  &.standard {\n    .wrapper {\n      background-color: var(--wje-select-background);\n      border-width: var(--wje-select-border-width);\n      border-style: var(--wje-select-border-style);\n      border-color: var(--wje-select-border-color);\n      border-radius: var(--wje-select-border-radius);\n    }\n    .input-wrapper {\n      background: transparent;\n      width: 100%;\n    }\n  }\n}\n\n.wrapper {\n  display: flex;\n  width: 100%;\n}\n\n.input-wrapper {\n  display: grid;\n  grid-template-columns: auto 1fr auto auto auto;\n  align-items: center;\n  background-color: var(--wje-select-background);\n  min-height: 28px;\n  color: var(--wje-select-color);\n  line-height: var(--wje-select-line-height);\n  appearance: none;\n  padding: 2px .5rem;\n  font-size: 14px !important;\n  font-weight: normal;\n  vertical-align: middle;\n}\n\ninput {\n  color: var(--wje-select-color);\n  line-height: var(--wje-select-line-height);\n  font-size: 14px !important;\n  font-weight: 400;\n  letter-spacing: .01em;\n  border: medium;\n  height: 25px;\n  min-height: 25px;\n  padding: 0;\n  background: none;\n  box-shadow: none;\n  width: 100%;\n  outline: 0;\n  font-size: 14px !important;\n}\n\n::placeholder {\n  opacity: 1;\n}\n\n:host [active] {\n  .wrapper {\n    border-radius: var(--wje-select-border-radius) var(--wje-select-border-radius) 0 0;\n  }\n  [slot=arrow] {\n    transform: rotate(180deg);\n    transition: all .2s ease-in;\n  }\n}\n\n.options-wrapper {\n  border-width: var(--wje-select-options-border-width);\n  border-style: var(--wje-select-options-border-style);\n  border-color: var(--wje-select-options-border-color);\n  border-radius: 0 0 var(--wje-select-border-radius) var(--wje-select-border-radius);\n  margin-top: calc(0px - var(--wje-select-border-width));\n  background: var(--wje-select-background);\n  overflow: hidden;\n\n}\n\n.find {\n  --wje-input-border-radius: 0;\n  --wje-input-border-width: 0 0 1px 0;\n}\n\n.list {\n  overflow: auto;\n  height: 100%;\n}\n\n.options-wrapper:has(.find) .list {\n  height: calc(100% - 32px - .5rem);\n}\n\n:host([multiple]) input {\n  position: absolute;\n  z-index: -1;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 0;\n  opacity: 0;\n}\n\n:host([multiple]) .chips {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  flex-wrap: wrap;\n}\n\n:host([disabled]) .input-wrapper{\n  opacity: 0.5;\n  pointer-events: none;\n  cursor: not-allowed;\n}\n\n.counter {\n  padding-inline: .5rem;\n}\n\nwje-chip {\n  --wje-chip-margin: 0 .25rem 0 0;\n}\n\nwje-button {\n  --wje-padding-top: .25rem;\n  --wje-padding-start: .25rem;\n  --wje-padding-end: .25rem;\n  --wje-padding-bottom: .25rem;\n  --wje-button-margin-inline: 0 .25rem;\n}\n\n.slot-start, .slot-end {\n  &:not(:empty) {\n    margin-right: .5rem;\n  }\n}\n";
 class Select extends WJElement {
   /**
@@ -108,7 +108,10 @@ class Select extends WJElement {
    * @param {boolean} isInvalid - Whether the input is invalid.
    */
   set invalid(isInvalid) {
-    isInvalid ? this.setAttribute("invalid", "") : this.removeAttribute("invalid");
+    if (isInvalid)
+      this.setAttribute("invalid", "");
+    else
+      this.removeAttribute("invalid");
   }
   /**
    * Getter for the form attribute.
@@ -235,7 +238,7 @@ class Select extends WJElement {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment}
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     this.classList.add("wje-placement", "wje-" + this.placement || "wje-start");
     let native = document.createElement("div");
@@ -329,12 +332,11 @@ class Select extends WJElement {
   }
   /**
    * Sets up the event listeners after the component is drawn.
-   *
    * @param {Object} context - The context for drawing.
    * @param {Object} store - The store for drawing.
    * @param {Object} params - The parameters for drawing.
    */
-  afterDraw(context, store, params) {
+  afterDraw() {
     this.input.addEventListener("focus", (e) => {
       this.labelElement.classList.add("fade");
       this.native.classList.add("focused");
@@ -396,13 +398,13 @@ class Select extends WJElement {
    * @param {Element} option - The option to get.
    * @returns {Array} The selected options.
    */
-  getSelected(option) {
+  getSelected() {
     let selectedOptions = this.getSelectedOptions();
     selectedOptions = Array.isArray(selectedOptions) ? selectedOptions : Array.from(selectedOptions);
-    selectedOptions = selectedOptions.map((option2) => {
+    selectedOptions = selectedOptions.map((option) => {
       return {
-        value: option2.value,
-        text: option2.textContent.trim()
+        value: option.value,
+        text: option.textContent.trim()
       };
     });
     return selectedOptions;
@@ -424,7 +426,7 @@ class Select extends WJElement {
         if (this.counterEl instanceof HTMLElement || length > +this.maxOptions) {
           this.counter();
         } else {
-          if (option != null)
+          if (option !== null)
             this.chips.appendChild(this.getChip(option));
         }
       }
@@ -509,10 +511,10 @@ class Select extends WJElement {
    */
   htmlOption(item, map = { value: "value", text: "text" }) {
     let option = document.createElement("wje-option");
-    if (item[map.value] == null) {
+    if (item[map.value] === null) {
       console.warn(`The item ${JSON.stringify(item)} does not have the property ${map.value}`);
     }
-    if (item[map.text] == null) {
+    if (item[map.text] === null) {
       console.warn(`The item ${JSON.stringify(item)} does not have the property ${map.text}`);
     }
     option.setAttribute("value", item[map.value] ?? "");
@@ -569,6 +571,7 @@ class Select extends WJElement {
     if (option) {
       option.selected = true;
     }
+    this.selections(silent);
   }
   /**
    * Selects one or multiple options in the select element.

package/dist/wje-slider.js

@@ -16,13 +16,13 @@ class Slider extends WJElement {
      * Sets the handle position of the slider.
      */
     __publicField(this, "setHandlePosition", () => {
-      this.input.style.backgroundSize = this.getPercentage(this.input.value, this.input.min, this.input.max) + "% 100%";
+      this.input.style.backgroundSize = this.getPercentage(this.input.min, this.input.max, this.input.value) + "% 100%";
     });
     /**
      * Sets the bubble of the slider.
      */
     __publicField(this, "setBubble", () => {
-      let newValue = this.getPercentage(this.input.value, this.input.min, this.input.max);
+      let newValue = this.getPercentage(this.input.min, this.input.max, this.input.value);
       this.output.style.left = `calc(${newValue}% + (${8 - newValue * 0.15}px) - ${this.output.offsetWidth / 2}px)`;
       this.output.innerHTML = this.input.value;
     });
@@ -127,7 +127,7 @@ class Slider extends WJElement {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment}
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let element = document.createElement("div");
     element.className = "native-slider";
@@ -173,6 +173,9 @@ class Slider extends WJElement {
   }
   /**
    * Sets up the event listeners after the component is drawn.
+   * @params {Object} context - The context for drawing.
+   * @params {Object} store - The store for drawing.
+   * @params {Object} params - The parameters for drawing.
    */
   afterDraw() {
     this.setHandlePosition();
@@ -210,7 +213,7 @@ class Slider extends WJElement {
    * @param {number} max - The maximum value of the slider.
    * @returns {number} The percentage of the slider value.
    */
-  getPercentage(value = 0, min, max) {
+  getPercentage(min, max, value = 0) {
     return Number((value - min) * 100 / (max - min)) || 0;
   }
 }