wj-elements 0.1.128 → 0.1.129

package/dist/wje-animation.js

@@ -4090,6 +4090,132 @@ class Animation extends WJElement {
     __publicField(this, "className", "Animation");
     this._animations = [];
   }
+  /**
+   * Setter for the name attribute.
+   * @param value
+   */
+  set name(value) {
+    this.setAttribute("name", value);
+  }
+  /**
+   * Getter for the name attribute.
+   * @returns {string}
+   */
+  get name() {
+    return this.getAttribute("name");
+  }
+  /**
+   * Setter for the name attribute.
+   * @param value
+   */
+  set duration(value) {
+    this.setAttribute("duration", value);
+  }
+  /**
+   * Getter for the name attribute.
+   * @returns {number}
+   */
+  get duration() {
+    return +this.getAttribute("duration") || 1e3;
+  }
+  /**
+   * Setter for the name attribute.
+   * @param value
+   */
+  set delay(value) {
+    this.setAttribute("delay", value);
+  }
+  /**
+   * Getter for the name attribute.
+   * @returns {number}
+   */
+  get delay() {
+    return +this.getAttribute("delay") || 0;
+  }
+  /**
+   * Setter for the name attribute.
+   * @param value
+   */
+  set endDelay(value) {
+    this.setAttribute("endDelay", value);
+  }
+  /**
+   * Getter for the name attribute.
+   * @returns {number}
+   */
+  get endDelay() {
+    return +this.getAttribute("endDelay") || 0;
+  }
+  /**
+   * Setter for the name attribute.
+   * @param value
+   */
+  set fill(value) {
+    this.setAttribute("fill", value);
+  }
+  /**
+   * Getter for the name attribute.
+   * @returns {string}
+   */
+  get fill() {
+    return this.getAttribute("fill") || "auto";
+  }
+  /**
+   * Setter for the name attribute.
+   * @param value
+   */
+  set iterations(value) {
+    this.setAttribute("iterations", value);
+  }
+  /**
+   * Getter for the name attribute.
+   * @returns {string|number}
+   */
+  get iterations() {
+    return this.getAttribute("iterations") || Infinity;
+  }
+  /**
+   * Setter for the name attribute.
+   * @param value
+   */
+  set iterationStart(value) {
+    this.setAttribute("iterationStart", value);
+  }
+  /**
+   * Getter for the name attribute.
+   * @returns {number}
+   */
+  get iterationStart() {
+    return +this.getAttribute("iterationStart") || 0;
+  }
+  /**
+   * Setter for the name attribute.
+   * @param value
+   */
+  set direction(value) {
+    this.setAttribute("direction", value);
+  }
+  /**
+   * Getter for the name attribute.
+   * @returns {string}
+   */
+  get direction() {
+    return this.getAttribute("direction") || "normal";
+  }
+  /**
+   * Setter for the name attribute.
+   * @param value
+   */
+  set easing(value) {
+    this.setAttribute("easing", value);
+  }
+  /**
+   * Getter for the name attribute.
+   * @returns {string}
+   */
+  get easing() {
+    return this.getAttribute("easing") || "linear";
+  }
   /**
    * Setter for the animations property.
    * @param {Array} value - The new value for the animations property.
@@ -4098,8 +4224,8 @@ class Animation extends WJElement {
     this._animations = value;
   }
   /**
-   * Getter for the animations property.
-   * @return {Array} The current value of the animations property.
+   * Getter for the animations' property.
+   * @return {Array} The current value of the animations' property.
    */
   get animations() {
     return this._animations;
@@ -4131,7 +4257,7 @@ class Animation extends WJElement {
    * @param {Object} params - The parameters for drawing the element.
    * @return {Object} The document fragment containing the drawn element.
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let slot = document.createElement("slot");
     fragment.appendChild(slot);
@@ -4149,14 +4275,14 @@ class Animation extends WJElement {
     this.animations = await this.getAnimationsArray();
     const selected = this.animations.find((k) => k.name === this.name);
     this.animation = element == null ? void 0 : element.animate(selected.keyframes, {
-      delay: +this.delay || 0,
-      endDelay: +this.endDelay || 0,
-      fill: this.fill || "auto",
-      duration: +this.duration || 1e3,
-      iterationStart: +this.iterationStart || 0,
-      iterations: this.iterations || Infinity,
-      direction: this.direction || "normal",
-      easing: this.easing || "linear"
+      delay: +this.delay,
+      endDelay: +this.endDelay,
+      fill: this.fill,
+      duration: +this.duration,
+      iterationStart: +this.iterationStart,
+      iterations: this.iterations,
+      direction: this.direction,
+      easing: this.easing
     });
     if (this.animation)
       this.animation.play();
@@ -4166,7 +4292,7 @@ class Animation extends WJElement {
    * @return {Array} The animations array.
    */
   async getAnimationsArray() {
-    return fetchAndParseCSS(animations);
+    return await fetchAndParseCSS(animations);
   }
   /**
    * Method to destroy the current animation.
@@ -4188,8 +4314,10 @@ class Animation extends WJElement {
    * Method to cancel the current animation.
    */
   cancel() {
-    if (this.animation) {
+    if (this.animation && typeof this.animation.cancel === "function") {
       this.animation.cancel();
+    } else {
+      console.warn("Animation is not initialized or cancel is not available");
     }
   }
 }

package/dist/wje-aside.js

@@ -42,7 +42,7 @@ class Aside extends WJElement {
    * @param {Object} params - The parameters for drawing the element.
    * @return {Object} The document fragment containing the drawn element.
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     if (this.width)
       this.style.setProperty("--wje-aside-width", this.width);

package/dist/wje-avatar.js

@@ -3,13 +3,13 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
 function getHsl(text, s = 40, l = 65) {
-  let str = text, hash = 0;
+  let str = text;
+  let hash = 0;
   for (let i = 0; i < (str == null ? void 0 : str.length); i++) {
-    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    hash = str.charCodeAt(i) + hash * 31;
   }
   let h = hash % 360;
-  let hexColor = "hsl(" + h + ", " + s + "%, " + l + "%)";
-  return hexColor;
+  return `hsl(${h}, ${s}%, ${l}%)`;
 }
 function getInitials(string, length = 2) {
   let names = string.split(" ");
@@ -51,7 +51,7 @@ class Avatar extends WJElement {
    * @param {object} params - The parameters
    * @returns {object} fragment - The document fragment
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let element = document.createElement("div");
     element.setAttribute("part", "native");

package/dist/wje-badge.js

@@ -44,7 +44,7 @@ class Badge extends WJElement {
    * @param {Object} params - The parameters
    * @returns {Object} fragment - The document fragment
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("div");
     native.setAttribute("part", "native");

package/dist/wje-breadcrumb.js

@@ -17,7 +17,18 @@ class Breadcrumb extends WJElement {
     __publicField(this, "className", "Breadcrumb");
     this._showSeparator = true;
     this._collapsedVariant = ((_a = this.parentElement) == null ? void 0 : _a.collapsedVariant) || "BUTTON";
+    this.showCollapsedIndicator = false;
   }
+  // set showCollapsedIndicator(value) {
+  //     // this.removeAttribute("show-collapsed-indicator");
+  //
+  //     if(WjElementUtils.stringToBoolean(value))
+  //         this.setAttribute("show-collapsed-indicator", value);
+  // }
+  //
+  // get showCollapsedIndicator() {
+  //     return this.hasAttribute("show-collapsed-indicator");
+  // }
   /**
    * Get show separator flag
    * @returns {boolean} showSeparator - The show separator flag
@@ -71,7 +82,7 @@ class Breadcrumb extends WJElement {
    */
   attributeChangedCallback(name, oldValue, newValue) {
     if (name === "collapsed") {
-      if (WjElementUtils.stringToBoolean(newValue))
+      if (WjElementUtils.stringToBoolean(newValue) && !this.hasAttribute("show-collapsed-indicator"))
         this.classList.add("collapsed");
     } else if (name === "show-collapsed-indicator") {
       if (WjElementUtils.stringToBoolean(newValue)) {
@@ -98,7 +109,7 @@ class Breadcrumb extends WJElement {
    * @param {Object} params - The parameters
    * @returns {Object} fragment - The document fragment
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("a");
     native.classList.add("native-breadcrumb");
@@ -114,9 +125,8 @@ class Breadcrumb extends WJElement {
     native.appendChild(slot);
     native.appendChild(end);
     fragment.appendChild(native);
-    if (this.showCollapsedIndicator) {
+    if (WjElementUtils.stringToBoolean(this.showCollapsedIndicator)) {
       fragment.appendChild(this.drawCollapsedIndicator());
-      this.classList.remove("collapsed");
       native.classList.add("hidden");
     }
     if (this.showSeparator) {
@@ -188,8 +198,8 @@ class Breadcrumb extends WJElement {
     event.addListener(button, "click", null, (e) => {
       this.native.classList.remove("hidden");
       button.remove();
-      this.parentElement.querySelectorAll("wje-breadcrumb").forEach((e2) => {
-        e2.classList.remove("collapsed");
+      this.parentElement.querySelectorAll("wje-breadcrumb").forEach((el) => {
+        el.classList.remove("collapsed");
       });
       e.stopPropagation();
     });

package/dist/wje-breadcrumbs.js

@@ -38,7 +38,7 @@ class Breadcrumbs extends WJElement {
    * @param {Object} params - The parameters
    * @returns {Object} fragment - The document fragment
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let element = document.createElement("slot");
     fragment.appendChild(element);
@@ -58,12 +58,12 @@ class Breadcrumbs extends WJElement {
     breadcrumb.setAttribute("last", true);
     const shouldCollapse = maxItems !== void 0 && breadcrumbs.length > maxItems && itemsBeforeCollapse + itemsAfterCollapse <= maxItems;
     if (shouldCollapse) {
-      breadcrumbs.forEach((breadcrumb2, index) => {
+      breadcrumbs.forEach((b, index) => {
         if (index === itemsBeforeCollapse) {
-          breadcrumb2.setAttribute("show-collapsed-indicator", true);
+          b.setAttribute("show-collapsed-indicator", true);
         }
         if (index >= itemsBeforeCollapse && index < breadcrumbs.length - itemsAfterCollapse) {
-          breadcrumb2.setAttribute("collapsed", true);
+          b.setAttribute("collapsed", true);
         }
       });
     }

package/dist/wje-button-group.js

@@ -45,7 +45,7 @@ class ButtonGroup extends WJElement {
    * @param {Object} params - The parameters
    * @returns {Object} fragment - The document fragment
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let element = document.createElement("div");
     element.classList.add("native-button-group");
@@ -61,7 +61,7 @@ class ButtonGroup extends WJElement {
    * @param {Object} store - The store
    * @param {Object} params - The parameters
    */
-  afterDraw(context, store, params) {
+  afterDraw() {
     const slottedElements = [...this.slotElement.assignedElements({ flatten: true })];
     slottedElements.forEach((el) => {
       let index = slottedElements.indexOf(el);

package/dist/wje-button.js

@@ -49,6 +49,62 @@ class Button extends WJElement {
     });
     this.internals_ = this.attachInternals();
   }
+  /**
+   * Properties of the element
+   * @param value
+   */
+  set color(value) {
+    this.setAttribute("color", value || "default");
+  }
+  /**
+   * Get color
+   * @returns {string|string}
+   */
+  get color() {
+    return this.getAttribute("color") || "default";
+  }
+  /**
+   * Set variant
+   * @param value
+   */
+  set caret(value) {
+    this.setAttribute("caret", value);
+  }
+  /**
+   * Get variant
+   * @returns {boolean}
+   */
+  get caret() {
+    return this.hasAttribute("caret");
+  }
+  /**
+   * Set variant
+   * @param value
+   */
+  set tooltip(value) {
+    this.setAttribute("tooltip", value);
+  }
+  /**
+   * Get variant
+   * @returns {boolean}
+   */
+  get tooltip() {
+    return this.hasAttribute("tooltip");
+  }
+  /**
+   * Set variant
+   * @param value
+   */
+  set dialog(value) {
+    this.setAttribute("dialog", value);
+  }
+  /**
+   * Get variant
+   * @returns {string|object}
+   */
+  get dialog() {
+    return this.getAttribute("dialog");
+  }
   /**
    * Set active state
    * @param {boolean} value - The value to set
@@ -171,7 +227,7 @@ class Button extends WJElement {
    * @param {Object} params - The parameters
    * @returns {Object} fragment - The document fragment
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let native = document.createElement(this.hasAttribute("href") ? "a" : "button");
     if (this.hasAttribute("href")) {
@@ -198,15 +254,12 @@ class Button extends WJElement {
       native.classList.add("wje-button-" + this.fill);
     if (this.size)
       native.classList.add("wje-button-" + this.size);
-    if (this.hasAttribute("color"))
-      native.classList.add("wje-color-" + this.color, "wje-color");
-    else
-      native.classList.add("wje-color-default", "wje-color");
     if (this.querySelectorAll("[slot=caret]").length < 1 && this.hasAttribute("caret") || this.hasAttribute("only-caret")) {
       let i = document.createElement("wje-icon");
       i.style.setProperty("--wje-icon-size", "14px");
       i.setAttribute("slot", "caret");
       i.setAttribute("name", "chevron-down");
+      i.setAttribute("part", "caret");
       this.appendChild(i);
     }
     if (this.active) {
@@ -215,6 +268,7 @@ class Button extends WJElement {
       i.setAttribute("name", "check");
       this.appendChild(i);
     }
+    native.classList.add("wje-color-" + this.color, "wje-color");
     let span = document.createElement("span");
     span.setAttribute("part", "inner");
     span.classList.add("button-inner");
@@ -239,7 +293,7 @@ class Button extends WJElement {
       span.appendChild(this.slotToggle);
     }
     native.appendChild(span);
-    if (this.hasAttribute("tooltip")) {
+    if (this.tooltip) {
       let tooltip = document.createElement("wje-tooltip");
       tooltip.setAttribute("content", this.getAttribute("tooltip"));
       tooltip.setAttribute("placement", this.getAttribute("tooltip-placement") || "top");
@@ -252,6 +306,9 @@ class Button extends WJElement {
   }
   /**
    * After draw method
+   * @param {Object} context - The context
+   * @param {Object} store - The store
+   * @param {Object} params - The parameters
    */
   afterDraw() {
     if (this.hasToggle) {
@@ -272,6 +329,7 @@ class Button extends WJElement {
       event.addListener(this, "click", "wje-button:toggle", this.toggleStates, { stopPropagation: this.stopPropagation });
     if (this.type === "submit") {
       event.addListener(this, "click", "wje-button:submit", () => {
+        console.log("submit", this.internals_.form);
         event.dispatchCustomEvent(this.internals_.form, "submit", {});
       });
     }

package/dist/wje-card-content.js

@@ -37,7 +37,7 @@ class CardContent extends WJElement {
    * @param {Object} params - The parameters
    * @returns {Object} fragment - The document fragment
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let element = document.createElement("slot");
     fragment.appendChild(element);

package/dist/wje-card-controls.js

@@ -37,7 +37,7 @@ class CardControls extends WJElement {
    * @param {Object} params - The parameters
    * @returns {Object} fragment - The document fragment
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let element = document.createElement("slot");
     fragment.appendChild(element);

package/dist/wje-card-header.js

@@ -36,7 +36,7 @@ class CardHeader extends WJElement {
    * @param {Object} params - The parameters to use.
    * @returns {DocumentFragment} The created document fragment.
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let element = document.createElement("slot");
     if (this.hasAttribute("separator"))

package/dist/wje-card-subtitle.js

@@ -44,7 +44,7 @@ class CardSubtitle extends WJElement {
    * @param {Object} params - The parameters to use.
    * @returns {DocumentFragment} The created document fragment.
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let element = document.createElement("slot");
     fragment.appendChild(element);

package/dist/wje-card-title.js

@@ -44,7 +44,7 @@ class CardTitle extends WJElement {
    * @param {Object} params - The parameters to use.
    * @returns {DocumentFragment} The created document fragment.
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let element = document.createElement("slot");
     fragment.appendChild(element);

package/dist/wje-carousel-item.js

@@ -17,7 +17,7 @@ class CarouselItem extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("div");
     native.classList.add("native-carousel-item");

package/dist/wje-carousel.js

@@ -47,7 +47,7 @@ class Carousel extends WJElement {
   beforeDraw(context, store, params) {
     this.cloneFirstAndLastItems();
   }
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("div");
     native.classList.add("native-carousel");

package/dist/wje-checkbox.js

@@ -46,6 +46,16 @@ class Checkbox extends WJElement {
   get validateOnChange() {
     return this.hasAttribute("validate-on-change");
   }
+  /**
+   * Setter for the invalid attribute.
+   * @param {boolean} isInvalid - Whether the input is invalid.
+   */
+  set invalid(isInvalid) {
+    if (isInvalid)
+      this.setAttribute("invalid", "");
+    else
+      this.removeAttribute("invalid");
+  }
   /**
    * Getter for the invalid attribute.
    * @returns {boolean} Whether the attribute is present.
@@ -53,13 +63,6 @@ class Checkbox extends WJElement {
   get invalid() {
     return this.hasAttribute("invalid");
   }
-  /**
-   * Setter for the invalid attribute.
-   * @param {boolean} isInvalid - Whether the input is invalid.
-   */
-  set invalid(isInvalid) {
-    isInvalid ? this.setAttribute("invalid", "") : this.removeAttribute("invalid");
-  }
   /**
    * Getter for the form attribute.
    * @returns {HTMLFormElement} The form the input is associated with.
@@ -123,7 +126,7 @@ class Checkbox extends WJElement {
   }
   /**
    * @summary Set checked attribute
-   * @returns {boolean} true if the toggle is checked, false otherwise
+   * @param {boolean} value - true if the toggle is checked, false otherwise
    */
   set disabled(value) {
     if (value)
@@ -139,8 +142,8 @@ class Checkbox extends WJElement {
     return this.hasAttribute("disabled");
   }
   /**
-  * @summary Set checked attribute
-  * @returns {boolean} true if the toggle is checked, false otherwise
+   * @summary Set checked attribute
+   * @param {boolean} value - true if the toggle is checked, false otherwise
   */
   set checked(value) {
     if (value)
@@ -178,7 +181,7 @@ class Checkbox extends WJElement {
    * @param {object} params - The parameters.
    * @returns {DocumentFragment} The created fragment.
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("div");
     native.setAttribute("part", "native");

package/dist/wje-chip.js

@@ -14,7 +14,7 @@ class Chip extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("div");
     native.classList.add("native-chip");

package/dist/wje-col.js

@@ -14,9 +14,15 @@ class Col extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  beforeDraw(context, store, params) {
-  }
-  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() {
     let fragment = document.createDocumentFragment();
     let element = document.createElement("slot");
     if (this.order)