wj-elements 0.1.128 → 0.1.130

package/dist/wje-input.js

@@ -2,23 +2,14 @@ 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, { event } from "./wje-element.js";
-const styles = '/*\n[ WJ Input ]\n*/\n\n:host {\n  width: 100%;\n  margin-bottom: var(--wje-input-margin-bottom);\n  display: block;\n\n  .wrapper {\n    display: flex;\n    width: 100%;\n  }\n  .native-input {\n    .input-wrapper {\n      width: 100%;\n      position: relative;\n      box-sizing: border-box;\n    }\n    &.default {\n      background-color: var(--wje-input-background-color);\n      font-family: var(--wje-input-font-family);\n      position: relative;\n      border-radius: var(--wje-input-border-radius);\n      border-width: var(--wje-input-border-width);\n      border-style: var(--wje-input-border-style);\n      border-color: var(--wje-input-border-color);\n      padding-inline: 0;\n      padding-top: .25rem;\n      padding-bottom: .25rem;\n      transition: background-color 0.2s ease;\n      cursor: text;\n      .input-wrapper {\n        margin-inline: .5rem;\n      }\n      &.focused {\n        border-color: var(--wje-input-border-color-focus) !important;\n        label {\n          opacity: 0.67;\n          font-size: 12px;\n          letter-spacing: normal;\n        }\n      }\n      input {\n        border: none;\n        height: 25px;\n        min-height: 25px;\n        padding: 0;\n        margin-top: -4px;\n        background: none;\n        box-shadow: none;\n        width: 100%;\n      }\n      label {\n        margin: 0;\n        display: block;\n        opacity: 1;\n        cursor: text;\n        transition: opacity 0.2s ease;\n        line-height: var(--wje-input-line-height);\n        &.fade {\n          opacity: 0.5;\n          font-size: 12px;\n          letter-spacing: normal;\n        }\n      }\n      ::slotted([slot="start"]) {\n        border-left: none;\n        border-top: none;\n        border-bottom: none;\n      }\n\n      ::slotted([slot="end"]) {\n        border-right: none;\n        border-top: none;\n        border-bottom: none;\n      }\n    }\n    &.standard {\n      font-family: var(--wje-input-font-family);\n      position: relative;\n      border-radius: var(--wje-input-border-radius);\n      padding-inline: 0;\n      padding-top: 0;\n      padding-bottom: 0;\n      transition: background-color 0.2s ease;\n      cursor: text;\n      &.focused {\n        input {\n          border-color: var(--wje-input-border-color-focus) !important;\n        }\n      }\n      input {\n        background-color: var(--wje-input-background-color);\n        display: block;\n        min-height: 32px;\n        padding-inline: .5rem;\n        padding-top: 0;\n        padding-bottom: 0;\n        /*background: none;*/\n        box-shadow: none;\n        width: 100%;\n        box-sizing: border-box;\n        border-radius: var(--wje-input-border-radius);\n        border-width: var(--wje-input-border-width);\n        border-style: var(--wje-input-border-style);\n        border-color: var(--wje-input-border-color);\n      }\n      label {\n        margin: 0;\n        display: inline-block;\n        opacity: 1;\n        cursor: text;\n        transition: opacity 0.2s ease;\n        line-height: var(--wje-input-line-height);\n      }\n      .input-wrapper {\n        &:hover .clear {\n          visibility: visible;\n        }\n      }\n      ::slotted([slot="start"]) {\n        border-right: none;\n        border-radius: var(--wje-input-border-radius) 0 0 var(--wje-input-border-radius);\n      }\n\n      ::slotted([slot="end"]) {\n        border-left: none;\n        border-radius: 0 var(--wje-input-border-radius) var(--wje-input-border-radius) 0;\n      }\n\n      &.has-start input{\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n      }\n\n      &.has-end input{\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n      .error-message {\n        position: static;\n\n        background: transparent;\n        padding: 0.25rem 0;\n        left: auto;\n        transform: none;\n        color: var(--wje-input-color-invalid);\n        font-size: 12px;\n        line-height: normal;\n      }\n    }\n  }\n}\n\n.clear {\n  visibility: hidden;\n  position: absolute;\n  right: 0;\n  top: 3px;\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:host([required]) .input-wrapper::after {\n  color: var(--wje-input-color-invalid);\n  content: "*";\n  font-family: var(--wje-force-mac-font-family);\n  font-size: 20px;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n:host([required]) .standard .input-wrapper::after {\n  top: 0;\n}\n\n:host([invalid]) {\n  .error-message {\n    display: block;\n  }\n  .default {\n    label {\n      opacity: 1 !important;\n      color: var(--wje-input-color-invalid) !important;\n      animation-name: shake;\n      animation-duration: 0.4s;\n      animation-iteration-count: 1;\n    }\n  }\n}\n\n::slotted([slot="start"]), ::slotted([slot="end"]) {\n  display: flex;\n  align-items: center;\n  border-width: var(--wje-input-border-width);\n  border-style: var(--wje-input-border-style);\n  border-color: var(--wje-input-border-color);\n  padding-inline: var(--wje-input-slot-padding-inline);\n}\n\n/*\n    .options-show is a class that is added to the host element when the select options are shown\n */\n:host(.options-show) ::slotted([slot="start"]) {\n  border-bottom-left-radius: 0 !important;\n}\n\n:host(.options-show) ::slotted([slot="end"]) {\n  border-bottom-right-radius: 0 !important;\n}\n\nslot[name="start"], slot[name="end"] {\n  display: flex;\n}\n\nslot[name="error"] {\n  display: none;\n  margin-inline: .5rem;\n}\n\n:host([invalid]) slot[name="error"] {\n  display: block;\n}\n\ninput {\n  background-color: var(--wje-input-background-color);\n  border-width: var(--wje-input-border-width);\n  border-style: var(--wje-input-border-style);\n  border-color: var(--wje-input-border-color);\n  font-family: var(--wje-input-font-family);\n  color: var(--wje-input-color);\n  appearance: none;\n  outline: 0;\n  padding: .25rem .5rem;\n  line-height: var(--wje-input-line-height);\n  font-size: 14px;\n  font-weight: normal;\n  vertical-align: middle;\n  min-height: 32px;\n}\n\n.error-message {\n  display: none;\n  position: absolute;\n  width: auto;\n  max-width: 100%;\n  min-width: auto;\n  border-radius: 50px;\n  background: black;\n  padding: .25rem .5rem;\n  top: 0;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  color: white;\n  font-size: 12px;\n  line-height: normal;\n}\n\n@keyframes shake {\n  8%,\n  41% {\n    transform: translateX(-4px);\n  }\n  25%,\n  58% {\n    transform: translateX(4px);\n  }\n  75% {\n    transform: translateX(-2px);\n  }\n  92% {\n    transform: translateX(2px);\n  }\n  0%,\n  100% {\n    transform: translateX(0);\n  }\n}';
+const styles = "/*\n[ WJ Input ]\n*/\n\n:host {\n    width: 100%;\n    margin-bottom: var(--wje-input-margin-bottom);\n    display: block;\n\n    .wrapper {\n        display: flex;\n        width: 100%;\n        flex-direction: column;\n    }\n    .native-input {\n        .input-wrapper {\n            flex-wrap: wrap;\n            display: flex;\n            width: 100%;\n            position: relative;\n            box-sizing: border-box;\n\n            label {\n                width: 100%;\n            }\n        }\n        &.default {\n            background-color: var(--wje-input-background-color);\n            font-family: var(--wje-input-font-family);\n            position: relative;\n            border-radius: var(--wje-input-border-radius);\n            border-width: var(--wje-input-border-width);\n            border-style: var(--wje-input-border-style);\n            border-color: var(--wje-input-border-color);\n            padding-inline: 0;\n            padding-top: 0.25rem;\n            padding-bottom: 0.25rem;\n            transition: background-color 0.2s ease;\n            cursor: text;\n            .input-wrapper {\n                padding-inline: 0.5rem;\n            }\n            &.focused {\n                border-color: var(--wje-input-border-color-focus) !important;\n                label {\n                    opacity: 0.67;\n                    font-size: 12px;\n                    letter-spacing: normal;\n                }\n            }\n            input {\n                border: none;\n                height: 25px;\n                min-height: 25px;\n                padding: 0;\n                margin-top: -4px;\n                background: none;\n                box-shadow: none;\n                width: 100%;\n            }\n            label {\n                margin: 0;\n                display: block;\n                opacity: 1;\n                cursor: text;\n                transition: opacity 0.2s ease;\n                line-height: var(--wje-input-line-height);\n                &.fade {\n                    opacity: 0.5;\n                    font-size: 12px;\n                    letter-spacing: normal;\n                }\n            }\n            ::slotted([slot='start']) {\n                border-left: none;\n                border-top: none;\n                border-bottom: none;\n            }\n\n            ::slotted([slot='end']) {\n                border-right: none;\n                border-top: none;\n                border-bottom: none;\n            }\n        }\n        &.standard {\n            font-family: var(--wje-input-font-family);\n            position: relative;\n            border-radius: var(--wje-input-border-radius);\n            padding-inline: 0;\n            padding-top: 0;\n            padding-bottom: 0;\n            transition: background-color 0.2s ease;\n            cursor: text;\n            &.focused {\n                input {\n                    border-color: var(--wje-input-border-color-focus) !important;\n                }\n            }\n            input {\n                background-color: var(--wje-input-background-color);\n                display: block;\n                min-height: 32px;\n                padding-inline: 0.5rem;\n                padding-top: 0;\n                padding-bottom: 0;\n                /*background: none;*/\n                box-shadow: none;\n                width: 100%;\n                box-sizing: border-box;\n                border-radius: var(--wje-input-border-radius);\n                border-width: var(--wje-input-border-width);\n                border-style: var(--wje-input-border-style);\n                border-color: var(--wje-input-border-color);\n            }\n            label {\n                margin: 0;\n                display: inline-block;\n                opacity: 1;\n                cursor: text;\n                transition: opacity 0.2s ease;\n                line-height: var(--wje-input-line-height);\n            }\n            .input-wrapper {\n                flex-wrap: nowrap;\n                &:hover .clear {\n                    visibility: visible;\n                }\n            }\n            ::slotted([slot='start']) {\n                border-right: none;\n                border-radius: var(--wje-input-border-radius) 0 0 var(--wje-input-border-radius);\n            }\n\n            ::slotted([slot='end']) {\n                border-left: none;\n                border-radius: 0 var(--wje-input-border-radius) var(--wje-input-border-radius) 0;\n            }\n\n            &.has-start input {\n                border-top-left-radius: 0;\n                border-bottom-left-radius: 0;\n            }\n\n            &.has-end input {\n                border-top-right-radius: 0;\n                border-bottom-right-radius: 0;\n            }\n            .error-message {\n                position: static;\n\n                background: transparent;\n                padding: 0.25rem 0;\n                left: auto;\n                transform: none;\n                color: var(--wje-input-color-invalid);\n                font-size: 12px;\n                line-height: normal;\n            }\n        }\n    }\n}\n\n.clear {\n    visibility: hidden;\n    position: absolute;\n    right: 0;\n    top: 3px;\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n    --wje-button-margin-inline: 0 0.25rem;\n}\n\n:host([required]) .input-wrapper::after {\n    color: var(--wje-input-color-invalid);\n    content: '*';\n    font-family: var(--wje-force-mac-font-family);\n    font-size: 20px;\n    position: absolute;\n    right: 0;\n    top: 0;\n}\n\n:host([required]) .standard .input-wrapper::after {\n    top: 0;\n}\n\n:host([invalid]) {\n    .error-message {\n        display: block;\n    }\n    .default {\n        label {\n            opacity: 1 !important;\n            color: var(--wje-input-color-invalid) !important;\n            animation-name: shake;\n            animation-duration: 0.4s;\n            animation-iteration-count: 1;\n        }\n    }\n}\n\n::slotted([slot='start']),\n::slotted([slot='end']) {\n    display: flex;\n    align-items: center;\n    border-width: var(--wje-input-border-width);\n    border-style: var(--wje-input-border-style);\n    border-color: var(--wje-input-border-color);\n    padding-inline: var(--wje-input-slot-padding-inline);\n}\n\n/*\n    .options-show is a class that is added to the host element when the select options are shown\n */\n:host(.options-show) ::slotted([slot='start']) {\n    border-bottom-left-radius: 0 !important;\n}\n\n:host(.options-show) ::slotted([slot='end']) {\n    border-bottom-right-radius: 0 !important;\n}\n\nslot[name='start'],\nslot[name='end'] {\n    display: flex;\n}\n\nslot[name='error'] {\n    display: none;\n    margin-inline: 0.5rem;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\n}\n\ninput {\n    background-color: var(--wje-input-background-color);\n    border-width: var(--wje-input-border-width);\n    border-style: var(--wje-input-border-style);\n    border-color: var(--wje-input-border-color);\n    font-family: var(--wje-input-font-family);\n    color: var(--wje-input-color);\n    appearance: none;\n    outline: 0;\n    padding: 0.25rem 0.5rem;\n    line-height: var(--wje-input-line-height);\n    font-size: 14px;\n    font-weight: normal;\n    vertical-align: middle;\n    min-height: 32px;\n}\n\n.error-message {\n    display: none;\n    position: absolute;\n    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    background: black;\n    padding: 0.25rem 0.5rem;\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -75%);\n    color: white;\n    font-size: 12px;\n    width: max-content;\n    line-height: normal;\n}\n\n@keyframes shake {\n    8%,\n    41% {\n        transform: translateX(-4px);\n    }\n    25%,\n    58% {\n        transform: translateX(4px);\n    }\n    75% {\n        transform: translateX(-2px);\n    }\n    92% {\n        transform: translateX(2px);\n    }\n    0%,\n    100% {\n        transform: translateX(0);\n    }\n}\n";
 class Input extends WJElement {
   /**
-   * Constructor for the Input class.
-   * @param {Object} options - The options for the Input class.
+   * Creates an instance of Input.
    */
-  constructor(options = {}) {
+  constructor() {
     super();
-    /**
-     * The class name of the input.
-     * @type {string}
-     */
-    __publicField(this, "className", "Input");
-    this.invalid = false;
-    this.pristine = true;
-    this.internals = this.attachInternals();
-    this.observer = new MutationObserver((mutations) => {
+    __publicField(this, "observeFunction", (mutations) => {
       mutations.forEach((mutation) => {
         if (mutation.type === "attributes") {
           const attributeName = mutation.attributeName;
@@ -29,15 +20,23 @@ class Input extends WJElement {
       });
       this.refresh();
     });
+    /**
+     * The class name of the input element.
+     * @type {string}
+     */
+    __publicField(this, "className", "Input");
+    this.invalid = false;
+    this.pristine = true;
+    this.internals = this.attachInternals();
+    this.observer = new MutationObserver(this.observeFunction);
   }
   /**
    * Setter for the value attribute.
-   * @param {string} value - The value to set.
+   * @param {string} value The value to set.
    */
   set value(value) {
     this.internals.setFormValue(value);
-    if (this.input)
-      this.input.value = value;
+    if (this.input) this.input.value = value;
     this.pristine = false;
     this._value = value;
   }
@@ -72,10 +71,11 @@ class Input extends WJElement {
   }
   /**
    * Setter for the invalid attribute.
-   * @param {boolean} isInvalid - Whether the input is invalid.
+   * @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.
@@ -86,14 +86,14 @@ class Input extends WJElement {
   }
   /**
    * Getter for the name attribute.
-   * @returns {string} The name of the input.
+   * @returns {string} The name of the input element.
    */
   get name() {
     return this.getAttribute("name");
   }
   /**
    * Getter for the type attribute.
-   * @returns {string} The type of the input.
+   * @returns {string} The type of the input element.
    */
   get type() {
     return this.localName;
@@ -107,7 +107,7 @@ class Input extends WJElement {
   }
   /**
    * Getter for the validationMessage attribute.
-   * @returns {string} The validation message of the input.
+   * @returns {string} The validation message of the input element.
    */
   get validationMessage() {
     return this.internals.validationMessage;
@@ -133,24 +133,24 @@ class Input extends WJElement {
    * @summary Setter for the defaultValue attribute.
    * This method sets the 'value' attribute of the custom input element to the provided value.
    * The 'value' attribute represents the default value of the input element.
-   * @param {string} value - The value to set as the default value.
+   * @param {string} value The value to set as the default value.
    */
   set defaultValue(value) {
     this.setAttribute("value", value);
   }
   /**
    * Getter for the cssStyleSheet attribute.
-   * @returns {CSSStyleSheet} The CSS style sheet of the input.
+   * @returns {CSSStyleSheet} The CSS style sheet of the input element.
    */
   static get cssStyleSheet() {
     return styles;
   }
   /**
-   * Getter for the observedAttributes attribute.
+   * Getter for the observedAttributes attribute of the input element.
    * @returns {Array} The attributes to observe for changes.
    */
   static get observedAttributes() {
-    return;
+    return [];
   }
   /**
    * Sets up the attributes for the input.
@@ -166,13 +166,10 @@ class Input extends WJElement {
     this.observer.disconnect();
   }
   /**
-   * Draws the input.
-   * @param {CanvasRenderingContext2D} context - The context to draw on.
-   * @param {Object} store - The store to use.
-   * @param {Object} params - The parameters to use.
+   * Draws the input element.
    * @returns {DocumentFragment} The drawn input.
    */
-  draw(context, store, params) {
+  draw() {
     let hasSlotStart = this.hasSlot(this, "start");
     let hasSlotEnd = this.hasSlot(this, "end");
     let hasSlotError = this.hasSlot(this, "error");
@@ -180,8 +177,7 @@ class Input extends WJElement {
     let native = document.createElement("div");
     native.setAttribute("part", "native");
     native.classList.add("native-input", this.variant || "default");
-    if (this.hasAttribute("invalid"))
-      native.classList.add("has-error");
+    if (this.hasAttribute("invalid")) native.classList.add("has-error");
     let wrapper = document.createElement("div");
     wrapper.classList.add("wrapper");
     let inputWrapper = document.createElement("div");
@@ -189,8 +185,7 @@ class Input extends WJElement {
     inputWrapper.classList.add("input-wrapper");
     let label = document.createElement("label");
     label.innerText = this.label;
-    if (this.value && !this.hasAttribute("error"))
-      label.classList.add("fade");
+    if (this.value && !this.hasAttribute("error")) label.classList.add("fade");
     let input = document.createElement("input");
     input.setAttribute("type", "text");
     input.setAttribute("part", "input");
@@ -231,12 +226,11 @@ class Input extends WJElement {
       end.setAttribute("part", "end");
     }
     if (hasSlotStart) {
-      wrapper.appendChild(start);
+      inputWrapper.appendChild(start);
       native.classList.add("has-start");
     }
     if (this.variant === "standard") {
-      if (this.label)
-        native.appendChild(label);
+      if (this.label) native.appendChild(label);
     } else {
       inputWrapper.appendChild(label);
     }
@@ -254,7 +248,7 @@ class Input extends WJElement {
       inputWrapper.appendChild(this.clear);
     }
     if (hasSlotEnd) {
-      wrapper.appendChild(end);
+      inputWrapper.appendChild(end);
       native.classList.add("has-end");
     }
     fragment.appendChild(native);
@@ -265,7 +259,7 @@ class Input extends WJElement {
     return fragment;
   }
   /**
-   * Runs after the input is drawn.
+   * Runs after the input is drawn to the DOM.
    */
   afterDraw() {
     this.input.addEventListener("focus", (e) => {
@@ -274,8 +268,7 @@ class Input extends WJElement {
     });
     this.input.addEventListener("blur", (e) => {
       this.native.classList.remove("focused");
-      if (!e.target.value)
-        this.labelElement.classList.remove("fade");
+      if (!e.target.value) this.labelElement.classList.remove("fade");
     });
     this.input.addEventListener("input", (e) => {
       this.validateInput();
@@ -308,6 +301,9 @@ class Input extends WJElement {
       });
     }
     this.validateInput();
+    if (this.hasAttribute("invalid")) {
+      this.showInvalidMessage();
+    }
     this.observer.observe(this, {
       attributes: true,
       // Watch for attribute changes
@@ -358,10 +354,7 @@ class Input extends WJElement {
           let errorMessage = this.message;
           if (!this.hasAttribute("message"))
             errorMessage = this.hasAttribute(attr) ? this.getAttribute(attr) : this.input.validationMessage;
-          this.internals.setValidity(
-            { [this.validationError]: true },
-            errorMessage
-          );
+          this.internals.setValidity({ [this.validationError]: true }, errorMessage);
         }
       }
     } else {
@@ -381,8 +374,8 @@ class Input extends WJElement {
   }
   /**
    * Checks whether the input has a slot.
-   * @param {HTMLElement} el - The element to check.
-   * @param {string} slotName - The name of the slot to check for.
+   * @param {HTMLElement} el The element to check.
+   * @param {string} slotName The name of the slot to check for.
    * @returns {boolean} Whether the input has the slot.
    */
   hasSlot(el, slotName = null) {
@@ -392,7 +385,7 @@ class Input extends WJElement {
   /**
    * @summary Callback function that is called when the custom element is associated with a form.
    * This function adds an event listener to the form's submit event, which validates the input and propagates the validation.
-   * @param {HTMLFormElement} form - The form the custom element is associated with.
+   * @param {HTMLFormElement} form The form the custom element is associated with.
    */
   formAssociatedCallback(form) {
     form == null ? void 0 : form.addEventListener("submit", () => {
@@ -404,8 +397,7 @@ class Input extends WJElement {
    * The formResetCallback method is a built-in lifecycle callback that gets called when a form gets reset.
    * This method is responsible for resetting the value of the custom input element to its default value.
    * It also resets the form value and validity state in the form internals.
-   *
-   * @method
+   * @function
    */
   formResetCallback() {
     this.value = this.defaultValue;
@@ -416,9 +408,8 @@ class Input extends WJElement {
    * The formStateRestoreCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is restored.
    * This method is responsible for restoring the value of the custom input element to its saved state.
    * It also restores the form value and validity state in the form internals to their saved states.
-   *
-   * @param {Object} state - The saved state of the custom input element.
-   * @method
+   * @param {object} state The saved state of the custom input element.
+   * @function
    */
   formStateRestoreCallback(state) {
     this.value = state.value;
@@ -428,9 +419,8 @@ class Input extends WJElement {
   /**
    * The formStateSaveCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is saved.
    * This method is responsible for saving the value of the custom input element.
-   *
-   * @returns {Object} The saved state of the custom input element.
-   * @method
+   * @returns {object} The saved state of the custom input element.
+   * @function
    */
   formStateSaveCallback() {
     return {
@@ -440,16 +430,15 @@ class Input extends WJElement {
   /**
    * The formDisabledCallback method is a built-in lifecycle callback that gets called when the disabled state of a form-associated custom element changes.
    * This method is not implemented yet.
-   *
-   * @param {boolean} disabled - The new disabled state of the custom input element.
-   * @method
+   * @param {boolean} disabled The new disabled state of the custom input element.
+   * @function
    */
   formDisabledCallback(disabled) {
     console.warn("formDisabledCallback not implemented yet");
   }
-  dispatchEvent(event2) {
-    return false;
-  }
+  // dispatchEvent(e) {
+  //     return false;
+  // }
 }
 /**
  * Whether the input is associated with a form.

package/dist/wje-item.js

@@ -2,11 +2,24 @@ 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 = '/*\n[ WJ Item ]\n*/\n\n:host {\n    display: block;\n    position: relative;\n    align-items: center;\n    justify-content: space-between;\n    outline: none;\n    color: var(--wje-item-color);\n    text-align: initial;\n    text-decoration: none;\n    overflow: hidden;\n    box-sizing: border-box;\n    width: 100%;\n}\n\n.item-native {\n    border-radius: var(--wje-item-border-radius);\n    padding-top: var(--wje-item-padding-top);\n    padding-bottom: var(--wje-item-padding-bottom);\n    padding-inline: var(--wje-item-padding-start) var(--wje-item-padding-end);\n    margin: 0;\n    display: flex;\n    position: relative;\n    align-items: inherit;\n    justify-content: inherit;\n    width: 100%;\n    min-height: var(--wje-item-min-height);\n    transition: var(--wje-item-transition);\n    outline: none;\n    background: var(--wje-item-background);\n    overflow: inherit;\n    box-sizing: border-box;\n    z-index: 1;\n    text-decoration: none;\n    color: var(--wje-item-color);\n\n    .item-inner {\n        margin: 0;\n        padding: var(--wje-item-inner-padding-top) var(--wje-item-inner-padding-end) var(--wje-item-inner-padding-bottom) var(--wje-item-inner-padding-start);\n\n        display: flex;\n        position: relative;\n\n        flex: 1 1 0;\n        flex-direction: inherit;\n        align-items: inherit;\n        align-self: stretch;\n\n        min-height: inherit;\n\n        border-width: var(--wje-item-border-width);\n        border-style: var(--wje-item-border-style);\n        border-color: var(--wje-item-border-color);\n\n        box-shadow: var(--wje-item-inner-box-shadow);\n        overflow: inherit;\n        box-sizing: border-box;\n\n        .input-wrapper {\n            display: flex;\n            flex: 1 1 0;\n            flex-direction: inherit;\n            align-items: inherit;\n            align-self: stretch;\n            text-overflow: ellipsis;\n            overflow: inherit;\n            box-sizing: border-box;\n        }\n    }\n\n    .item-bottom {\n        padding: 0 var(--wje-item-inner-padding-end) 0 var(--wje-item-padding-start);\n        display: flex;\n        justify-content: space-between;\n    }\n}\n\n@media (any-hover: hover) {\n    :host(:hover) .item-native {\n        color: var(--wje-item-color);\n\n        :after {\n            transition: var(--wje-item-transition);\n            z-index: -1;\n            inset: 0;\n            position: absolute;\n            content: "";\n            background: var(--wje-item-background-hover);\n            opacity: 0.7;\n        }\n    }\n}\n\nbutton,\na {\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-drag: none;\n}\n\n::slotted([slot="start"]) {\n    margin-inline: 0 1rem;\n}\n\n::slotted(wje-label:not([slot="end"])) {\n    flex: 1 1 0;\n}';
+const styles = "/*\n[ WJ Item ]\n*/\n\n:host {\n    display: block;\n    position: relative;\n    align-items: center;\n    justify-content: space-between;\n    outline: none;\n    color: var(--wje-item-color);\n    text-align: initial;\n    text-decoration: none;\n    overflow: hidden;\n    box-sizing: border-box;\n    width: 100%;\n}\n\n.item-native {\n    border-radius: var(--wje-item-border-radius);\n    padding-top: var(--wje-item-padding-top);\n    padding-bottom: var(--wje-item-padding-bottom);\n    padding-inline: var(--wje-item-padding-start) var(--wje-item-padding-end);\n    margin: 0;\n    display: flex;\n    position: relative;\n    align-items: inherit;\n    justify-content: inherit;\n    width: 100%;\n    min-height: var(--wje-item-min-height);\n    transition: var(--wje-item-transition);\n    outline: none;\n    background: var(--wje-item-background);\n    overflow: inherit;\n    box-sizing: border-box;\n    z-index: 1;\n    text-decoration: none;\n    color: var(--wje-item-color);\n\n    .item-inner {\n        margin: 0;\n        padding: var(--wje-item-inner-padding-top) var(--wje-item-inner-padding-end)\n            var(--wje-item-inner-padding-bottom) var(--wje-item-inner-padding-start);\n\n        display: flex;\n        position: relative;\n\n        flex: 1 1 0;\n        flex-direction: inherit;\n        align-items: inherit;\n        align-self: stretch;\n\n        min-height: inherit;\n\n        border-width: var(--wje-item-border-width);\n        border-style: var(--wje-item-border-style);\n        border-color: var(--wje-item-border-color);\n\n        box-shadow: var(--wje-item-inner-box-shadow);\n        overflow: inherit;\n        box-sizing: border-box;\n\n        .input-wrapper {\n            display: flex;\n            flex: 1 1 0;\n            flex-direction: inherit;\n            align-items: inherit;\n            align-self: stretch;\n            text-overflow: ellipsis;\n            overflow: inherit;\n            box-sizing: border-box;\n        }\n    }\n\n    .item-bottom {\n        padding: 0 var(--wje-item-inner-padding-end) 0 var(--wje-item-padding-start);\n        display: flex;\n        justify-content: space-between;\n    }\n}\n\n@media (any-hover: hover) {\n    :host(:hover) .item-native {\n        color: var(--wje-item-color);\n\n        :after {\n            transition: var(--wje-item-transition);\n            z-index: -1;\n            inset: 0;\n            position: absolute;\n            content: '';\n            background: var(--wje-item-background-hover);\n            opacity: 0.7;\n        }\n    }\n}\n\nbutton,\na {\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-drag: none;\n}\n\n::slotted([slot='start']) {\n    margin-inline: 0 1rem;\n}\n\n::slotted(wje-label:not([slot='end'])) {\n    flex: 1 1 0;\n}\n";
 class Item extends WJElement {
+  /**
+   * Item constructor for the class.
+   */
   constructor() {
     super();
+    /**
+     * Returns the CSS styles for the component.
+     * @type {string}
+     */
     __publicField(this, "className", "Item");
+    /**
+     * Determines if the given element or any of its ancestors matches the specified selector.
+     * @param {string} selector The CSS selector to match against the element's ancestors.
+     * @param {HTMLElement} el The element from which to start the search.
+     * @returns {boolean} - Returns `true` if the element or one of its ancestors matches the selector; otherwise, `false`.
+     */
     __publicField(this, "hostContext", (selector, el) => {
       return el.closest(selector) !== null;
     });
@@ -22,18 +35,32 @@ class Item extends WJElement {
     this.routerDirection = "forward";
     this.type = "button";
   }
+  /**
+   * Returns the CSS styles for the component.
+   * @returns {boolean}
+   */
   isClickable() {
     return this.hasAttribute("href") || this.button;
   }
+  /**
+   * Returns the CSS styles for the component.
+   * @static
+   * @returns {object} styles
+   */
   static get cssStyleSheet() {
     return styles;
   }
+  /**
+   * Sets up the attributes for the component.
+   */
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  beforeDraw(context, store, params) {
-  }
-  draw(context, store, params) {
+  /**
+   * Draws the component for the item.
+   * @returns {DocumentFragment}
+   */
+  draw() {
     const TagType = this.isClickable() ? this.hasAttribute("href") === void 0 ? "button" : "a" : "div";
     if (this.hostContext("wje-list", this)) {
       this.classList.add("wje-item-list");

package/dist/wje-kanban.js

@@ -1,14 +1,14 @@
 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";
 import Checkbox from "./wje-checkbox.js";
+import WJElement from "./wje-element.js";
 import MenuItem from "./wje-menu-item.js";
-const styles = "/*\n[ Wj kanban ]\n*/\n\n:host {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n}\n.native {\n  height: 100%;\n  display: grid;\n  grid-auto-flow: column;\n  grid-auto-columns: 300px;\n  overflow-x: auto;\n  gap: 1rem;\n}\n\n.pool {\n  display: inline-block;\n  width: 300px;\n  flex: 0 0 300px;\n  vertical-align: top;\n  overflow: auto;\n  padding: 8px;\n  border-radius: 8px;\n  margin-right: 15px;\n}\n\nh4 {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin: 0;\n}\n\n.card {\n  border-radius: 5px;\n  background: #fff;\n  border: 1px solid #ddd;\n  margin-bottom: 5px;\n  padding: 8px 10px;\n  color: #000\n}\n\n.card:hover {\n  opacity: 0.5;\n}\n\n.dragging {\n  box-shadow: 0 0 5px rgba(0,0,0,0.1);\n  transform: rotate(-2deg);\n  opacity: 0.5;\n  position: relative;\n  z-index: 1000;\n}\n\n.card-placeholder {\n  display: block;\n  height: 34px;\n  border: 1px dashed #ddd;\n  margin: 3px 0;\n  border-radius: 5px;\n}\n\n.pool-header {\n  display: flex;\n  align-items: center;\n  margin-bottom: .25rem;\n  gap: 0 .25rem;\n  wje-checkbox {\n    margin: 0;\n  }\n  wje-badge {\n    margin-inline-start: auto;\n  }\n}";
+const styles = "/*\n[ Wj kanban ]\n*/\n\n:host {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n}\n.native {\n    height: 100%;\n    display: grid;\n    grid-auto-flow: column;\n    grid-auto-columns: 300px;\n    overflow-x: auto;\n    gap: 1rem;\n}\n\n.pool {\n    display: inline-block;\n    width: 300px;\n    flex: 0 0 300px;\n    vertical-align: top;\n    overflow: auto;\n    padding: 8px;\n    border-radius: 8px;\n    margin-right: 15px;\n}\n\nh4 {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin: 0;\n}\n\n.card {\n    border-radius: 5px;\n    background: #fff;\n    border: 1px solid #ddd;\n    margin-bottom: 5px;\n    padding: 8px 10px;\n    color: #000;\n}\n\n.card:hover {\n    opacity: 0.5;\n}\n\n.dragging {\n    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n    transform: rotate(-2deg);\n    opacity: 0.5;\n    position: relative;\n    z-index: 1000;\n}\n\n.card-placeholder {\n    display: block;\n    height: 34px;\n    border: 1px dashed #ddd;\n    margin: 3px 0;\n    border-radius: 5px;\n}\n\n.pool-header {\n    display: flex;\n    align-items: center;\n    margin-bottom: 0.25rem;\n    gap: 0 0.25rem;\n    wje-checkbox {\n        margin: 0;\n    }\n    wje-badge {\n        margin-inline-start: auto;\n    }\n}\n";
 class Kanban extends WJElement {
   /**
    * Creates an instance of Kanban.
-   * @constructor
+   * @class
    */
   constructor() {
     super();
@@ -25,9 +25,9 @@ class Kanban extends WJElement {
      */
     __publicField(this, "className", "Kanban");
     /**
-     * Called after the component has been drawn.
-     * @param pool
-     * @param items
+     * Iterates over a list of items, generates an HTML card for each, and appends it to the specified pool's content area.
+     * @param {HTMLElement} pool The container element where the cards will be appended. It should contain an element with the class `.pool-content`.
+     * @param {Array} items An array of items used to generate HTML cards.
      */
     __publicField(this, "customForeach", (pool, items) => {
       for (const item of items) {
@@ -158,21 +158,6 @@ class Kanban extends WJElement {
   get response() {
     return this._response;
   }
-  // /**
-  //  * Sets the URL for fetching data.
-  //  * @param value {string}
-  //  */
-  // set poolName(value) {
-  //     this.setAttribute("pool-name", value);
-  // }
-  //
-  // /**
-  //  * Gets the URL for fetching data.
-  //  * @returns {string|string}
-  //  */
-  // get poolName() {
-  //     return this.getAttribute("pool-name") || "status";
-  // }
   /**
    * Sets the URL for fetching data.
    * @param value {array}
@@ -189,7 +174,6 @@ class Kanban extends WJElement {
   }
   /**
    * Returns the CSS styles for the component.
-   *
    * @static
    * @returns {CSSStyleSheet}
    */
@@ -198,7 +182,6 @@ class Kanban extends WJElement {
   }
   /**
    * Returns the list of attributes to observe for changes.
-   *
    * @static
    * @returns {Array<string>}
    */
@@ -213,23 +196,18 @@ class Kanban extends WJElement {
   }
   /**
    * Prepares the component before drawing.
-   *
-   * @param {Object} context - The context for drawing.
-   * @param {Object} store - The store for drawing.
-   * @param {Object} params - The parameters for drawing.
+   * @param {object} context The context for drawing.
+   * @param {object} store The store for drawing.
+   * @param {object} params The parameters for drawing.
    */
   async beforeDraw(context, store, params) {
     this.response = await this.getPages();
   }
   /**
-   * 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 after it has been prepared.
    * @returns {DocumentFragment}
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("div");
     native.classList.add("native");
@@ -249,8 +227,8 @@ class Kanban extends WJElement {
   /**
    * Called after the component has been drawn.
    */
-  async afterDraw() {
-    this.UI = {
+  afterDraw() {
+    this.ui = {
       elBoard: this.shadowRoot.getElementById("board"),
       elTotalCardCount: this.shadowRoot.getElementById("totalCards"),
       elCardPlaceholder: null
@@ -275,10 +253,10 @@ class Kanban extends WJElement {
     });
     this.live("dragend", ".pool .card", (e) => {
       e.target.style.opacity = "";
-      if (this.UI.elCardPlaceholder) {
-        this.UI.elCardPlaceholder.remove();
+      if (this.ui.elCardPlaceholder) {
+        this.ui.elCardPlaceholder.remove();
       }
-      this.UI.elCardPlaceholder = null;
+      this.ui.elCardPlaceholder = null;
       this.isDragging = false;
     });
     this.live("dragover", ".pool, .pool .card, .pool .card-placeholder", (e) => {
@@ -398,16 +376,16 @@ class Kanban extends WJElement {
    * @returns {null|*}
    */
   getCardPlaceholder() {
-    if (!this.UI.elCardPlaceholder) {
-      this.UI.elCardPlaceholder = document.createElement("div");
-      this.UI.elCardPlaceholder.className = "card-placeholder";
-      this.UI.elCardPlaceholder.style.width = this.draggedElementWidth + "px";
-      this.UI.elCardPlaceholder.style.height = this.draggedElementHeight + "px";
+    if (!this.ui.elCardPlaceholder) {
+      this.ui.elCardPlaceholder = document.createElement("div");
+      this.ui.elCardPlaceholder.className = "card-placeholder";
+      this.ui.elCardPlaceholder.style.width = this.draggedElementWidth + "px";
+      this.ui.elCardPlaceholder.style.height = this.draggedElementHeight + "px";
     } else {
-      this.UI.elCardPlaceholder.style.width = this.draggedElementWidth + "px";
-      this.UI.elCardPlaceholder.style.height = this.draggedElementHeight + "px";
+      this.ui.elCardPlaceholder.style.width = this.draggedElementWidth + "px";
+      this.ui.elCardPlaceholder.style.height = this.draggedElementHeight + "px";
     }
-    return this.UI.elCardPlaceholder;
+    return this.ui.elCardPlaceholder;
   }
   /**
    * Adds a live event listener to the component.
@@ -417,15 +395,19 @@ class Kanban extends WJElement {
    */
   live(eventType, selector, callback) {
     const attachListener = (root) => {
-      root.addEventListener(eventType, function(e) {
-        if (e.target.matches(selector)) {
-          callback.call(e.target, e);
-        }
-      }, false);
+      root.addEventListener(
+        eventType,
+        (e) => {
+          if (e.target.matches(selector)) {
+            callback.call(e.target, e);
+          }
+        },
+        false
+      );
     };
     const traverseAndAttach = (root) => {
       attachListener(root);
-      root.querySelectorAll("*").forEach(function(node) {
+      root.querySelectorAll("*").forEach((node) => {
         if (node.shadowRoot) {
           traverseAndAttach(node.shadowRoot);
         }
@@ -461,7 +443,9 @@ class Kanban extends WJElement {
    */
   async getPages(page = 0) {
     let hasParams = this.url.includes("?");
-    const response = await fetch(`${this.url}${hasParams ? "&" : "?"}page=${page}&size=${this.size}${this == null ? void 0 : this.queryParams}`);
+    const response = await fetch(
+      `${this.url}${hasParams ? "&" : "?"}page=${page}&size=${this.size}${this == null ? void 0 : this.queryParams}`
+    );
     if (!response.ok) {
       throw new Error(`An error occurred: ${response.status}`);
     }