wj-elements 0.1.128 → 0.1.129

package/dist/wje-fetchAndParseCSS.js

@@ -47,9 +47,10 @@ async function fetchAndParseCSS(css) {
       return animations;
     }
     animations = parseCSS(css);
-    return animations;
+    return await animations;
   } catch (error) {
     console.error("Error:", error);
+    return null;
   }
 }
 export {

package/dist/wje-file-upload-item.js

@@ -7,7 +7,7 @@ import FormatDigital from "./wje-format-digital.js";
 import Button from "./wje-button.js";
 import Slider from "./wje-slider.js";
 import Icon from "./wje-icon.js";
-const styles = '/*\n[ WJ File Upload Item ]\n*/\n\n:host {\n    width: 100%;\n}\n\n.native-file-upload-item {\n    display: grid;\n    grid-template-columns: auto 1fr 1fr;\n    grid-template-rows: auto auto auto;\n    gap: 0 .5rem;\n    grid-template-areas:\n    "image name actions"\n    "image size actions"\n    "progress progress progress";\n    padding: .5rem;\n    border-width: 1px;\n    border-style: solid;\n    border-color: var(--wje-border-color);\n    border-radius: var(--wje-border-radius-medium);\n}\n\n.image {\n    grid-area: image;\n    align-items: center;\n    display: flex;\n}\n\n::slotted([slot="img"]) {\n    --wje-img-border-radius: var(--wje-border-radius-medium) !important;\n}\n\n.name {\n    grid-area: name;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-weight: bold;\n}\n\n.size {\n    grid-area: size;\n    display: flex;\n}\n\n.actions {\n    grid-area: actions;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n}\n\n.file-progress { grid-area: progress; }\n\nwje-icon {\n    /*margin-right: .25rem;*/\n}\n\nwje-img {\n    /*margin-right: .25rem;*/\n}\n\n.file-info > span {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\nwje-slider {\n    flex-basis: 100%;\n    margin-top: .5rem;\n}\n\nwje-slider::part(slider) {\n    color: yellow;\n}\n\nwje-slider::part(slider)::-webkit-slider-thumb {\n    visibility: hidden;\n}\n\nwje-slider::part(slider)::-moz-range-thumb {\n    visibility: hidden;\n}\n\nwje-slider::part(slider)::-ms-thumb {\n    visibility: hidden;\n}\n\n\nwje-img {\n    width: 50px;\n    height: 50px;\n    display: flex;\n    align-items: center;\n    padding: .25rem;\n    border: 1px solid var(--wje-border-color);\n    border-radius: var(--wje-border-radius-medium);\n}';
+const styles = '/*\n[ WJ File Upload Item ]\n*/\n\n:host {\n    width: 100%;\n}\n\n.native-file-upload-item {\n    display: grid;\n    grid-template-columns: auto 1fr 1fr;\n    grid-template-rows: auto auto auto;\n    gap: 0 .5rem;\n    grid-template-areas:\n    "image name actions"\n    "image size actions"\n    "progress progress progress";\n    padding: .5rem;\n    border-width: var(--wje-file-upload-item-border-width);\n    border-style: var(--wje-file-upload-item-border-style);\n    border-color: var(--wje-file-upload-item-border-color);\n    border-radius: var(--wje-border-radius-medium);\n}\n\n.image {\n    grid-area: image;\n    align-items: center;\n    display: flex;\n}\n\n::slotted([slot="img"]) {\n    --wje-img-border-radius: var(--wje-border-radius-medium) !important;\n}\n\n.name {\n    grid-area: name;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-weight: bold;\n}\n\n.size {\n    grid-area: size;\n    display: flex;\n}\n\n.actions {\n    grid-area: actions;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n}\n\n.file-progress { grid-area: progress; }\n\n.file-info > span {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\nwje-slider {\n    flex-basis: 100%;\n    margin-top: .5rem;\n}\n\nwje-slider::part(slider) {\n    color: yellow;\n}\n\nwje-slider::part(slider)::-webkit-slider-thumb {\n    visibility: hidden;\n}\n\nwje-slider::part(slider)::-moz-range-thumb {\n    visibility: hidden;\n}\n\nwje-slider::part(slider)::-ms-thumb {\n    visibility: hidden;\n}\n\nwje-img {\n    width: 50px;\n    height: 50px;\n    display: flex;\n    align-items: center;\n    padding: .25rem;\n    border: 1px solid var(--wje-border-color);\n    border-radius: var(--wje-border-radius-medium);\n}';
 class FileUploadItem extends WJElement {
   /**
    * Creates an instance of FileUploadItem.
@@ -80,7 +80,7 @@ class FileUploadItem extends WJElement {
    * @param {Object} params - The parameters for the component.
    * @returns {DocumentFragment} The fragment containing the component.
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("div");
     native.classList.add("native-file-upload-item");
@@ -129,6 +129,9 @@ class FileUploadItem extends WJElement {
   }
   /**
    * Called after the component has been drawn.
+   * @params {Object} context - The context of the component.
+   * @params {Object} store - The store of the component.
+   * @params {Object} params - The parameters for the component.
    */
   afterDraw() {
     this.button.addEventListener("wje-button:click", this.onDelete);

package/dist/wje-file-upload.js

@@ -85,9 +85,9 @@ function upload(url, chunkSize = 1024 * 1024, wholeFile = false) {
   if (wholeFile) {
     return (file, preview) => uploadWholeFile(url, file, preview);
   }
-  return (file, preview) => uploadFileInChunks(url, chunkSize, file, preview);
+  return (file, preview) => uploadFileInChunks(url, file, preview, chunkSize);
 }
-async function uploadFileInChunks(url, chunkSize = 1024 * 1024, file, preview) {
+async function uploadFileInChunks(url, file, preview, chunkSize = 1024 * 1024) {
   let offset = 0;
   const totalChunks = Math.ceil(file.size / chunkSize);
   const partResponses = [];
@@ -100,7 +100,7 @@ async function uploadFileInChunks(url, chunkSize = 1024 * 1024, file, preview) {
         reader.read().then(function process({ done, value }) {
           if (done) {
             controller.close();
-            return;
+            return Promise.resolve();
           }
           uploadedBytes += value.byteLength;
           const percentComplete = (offset + uploadedBytes) / file.size * 100;
@@ -150,7 +150,7 @@ function uploadWholeFile(url, file, preview) {
     console.error("Error:", error);
   });
 }
-const styles = '/*\n[ WJ File Upload ]\n*/\n\n:host {\n    width: 100%;\n}\n\n.native-file-upload {\n    width: 100%;\n}\n\n.file-label {\n    background: var(--wje-color-contrast-0);\n    border: 1px dashed var(--wje-border-color);\n    border-radius: var(--wje-border-radius-medium);\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    padding: 1rem;\n    margin-bottom: .5rem;\n    flex-direction: column;\n}\n\n.file-preview {\n    display: grid;\n    grid-template-columns: auto 1fr 1fr;\n    grid-template-rows: auto auto auto;\n    gap: 0 0;\n    grid-template-areas:\n    "image name name"\n    "image size size"\n    "progress progress progress";\n}\n\n.file-image {\n    grid-area: image;\n    align-items: center;\n    display: flex;\n}\n\n.file-name {\n    grid-area: name;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.file-size {\n    grid-area: size;\n    display: flex;\n}\n\n.file-progress { grid-area: progress; }\n\nwje-icon {\n    margin-right: .25rem;\n}\n\nwje-img {\n    margin-right: .25rem;\n}\n\n.file-info > span {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\nwje-slider {\n    flex-basis: 100%;\n    margin-top: .5rem;\n}\n\n::part(slider) {\n    &::-webkit-slider-thumb {\n        visibility: hidden;\n    }\n\n    &::-moz-range-thumb {\n        visibility: hidden;\n    }\n\n    &::-ms-thumb {\n        visibility: hidden;\n    }\n}\n\nwje-img {\n    width: 50px;\n    height: 50px;\n    display: flex;\n    align-items: center;\n    padding: .25rem;\n    border: 1px solid var(--wje-border-color);\n    border-radius: var(--wje-border-radius-medium);\n}';
+const styles = '/*\n[ WJ File Upload ]\n*/\n\n:host {\n    width: 100%;\n}\n\n.native-file-upload {\n    width: 100%;\n    position: relative;\n    border: 1px dashed var(--wje-border-color);\n    border-radius: var(--wje-border-radius-medium);\n}\n\n.file-label {\n    background: var(--wje-color-contrast-0);\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    padding: 1rem;\n    margin-bottom: .5rem;\n    flex-direction: column;\n    position: relative;\n}\n\n.file-preview {\n    display: grid;\n    grid-template-columns: auto 1fr 1fr;\n    grid-template-rows: auto auto auto;\n    gap: 0 0;\n    grid-template-areas:\n    "image name name"\n    "image size size"\n    "progress progress progress";\n}\n\n.file-image {\n    grid-area: image;\n    align-items: center;\n    display: flex;\n}\n\n.file-name {\n    grid-area: name;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.file-size {\n    grid-area: size;\n    display: flex;\n}\n\n.file-progress { grid-area: progress; }\n\nwje-icon {\n    margin-right: .25rem;\n}\n\nwje-img {\n    margin-right: .25rem;\n}\n\n.file-info > span {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\nwje-slider {\n    flex-basis: 100%;\n    margin-top: .5rem;\n}\n\n::part(slider) {\n    &::-webkit-slider-thumb {\n        visibility: hidden;\n    }\n\n    &::-moz-range-thumb {\n        visibility: hidden;\n    }\n\n    &::-ms-thumb {\n        visibility: hidden;\n    }\n}\n\nwje-img {\n    width: 50px;\n    height: 50px;\n    display: flex;\n    align-items: center;\n    padding: .25rem;\n    border: 1px solid var(--wje-border-color);\n    border-radius: var(--wje-border-radius-medium);\n}';
 class FileUpload extends WJElement {
   /**
    * Constructor for FileUpload.
@@ -184,9 +184,13 @@ class FileUpload extends WJElement {
       try {
         this.handleSubmit(event);
       } catch (err) {
-        return;
       }
     });
+    /**
+     * Method to create an upload promise.
+     * @param file
+     * @returns {Promise<unknown>}
+     */
     __publicField(this, "createUploadPromise", (file) => {
       return new Promise((resolve, reject) => {
         this.assertFilesValid(file);
@@ -197,7 +201,7 @@ class FileUpload extends WJElement {
           this.dispatchEvent(new CustomEvent("file-upload:upload-started", { detail: file, bubbles: true, composed: true }));
           (_a = this.onUploadStarted) == null ? void 0 : _a.call(this, file);
           preview = this.createPreview(file, reader);
-          this.fileList.appendChild(preview);
+          this.appendChild(preview);
           this.uploadFunction(file, preview).then((res) => {
             var _a2;
             this.dispatchEvent(new CustomEvent("file-upload:upladed-file-complete", { detail: res, bubbles: true, composed: true }));
@@ -259,33 +263,61 @@ class FileUpload extends WJElement {
     return this.hasAttribute("max-file-size") ? fileSize * 1024 * 1024 : 1024 * 1024;
   }
   /**
-   * Sets the upload URL for the file upload element.
-   *
+   * Setter for label attribute.
    * @param {string} value - The URL to set as the upload URL.
    */
   set uploadUrl(value) {
     this.setAttribute("upload-url", value);
   }
   /**
-   * Retrieves the upload URL for the file upload element.
-   * 
+   * Gets the upload URL for the file upload element.
    * @returns {string} The upload URL.
    */
   get uploadUrl() {
     return this.getAttribute("upload-url") ?? "/upload";
   }
+  /**
+   * Sets the autoProcessFiles attribute.
+   * @param value
+   */
   set autoProcessFiles(value) {
     this.setAttribute("auto-process-files", value);
   }
+  /**
+   * Gets the autoProcessFiles attribute.
+   * @returns {any|boolean}
+   */
   get autoProcessFiles() {
     return JSON.parse(this.getAttribute("auto-process-files")) ?? true;
   }
+  /**
+   * Sets the uploaded files.
+   * @param value
+   */
   set uploadedFiles(value) {
     this._uploadedFiles = value;
   }
+  /**
+   * Return the uploaded files.
+   * @returns {[]}
+   */
   get uploadedFiles() {
     return this._uploadedFiles;
   }
+  /**
+   * Sets the to-chunk attribute.
+   * @param value
+   */
+  set toChunk(value) {
+    this.setAttribute("to-chunk", value);
+  }
+  /**
+   * Gets the to-chunk attribute.
+   * @returns {boolean}
+   */
+  get toChunk() {
+    return this.hasAttribute("to-chunk");
+  }
   /**
    * Getter for cssStyleSheet.
    * @returns {string} The CSS styles for the component.
@@ -307,7 +339,8 @@ class FileUpload extends WJElement {
     this.isShadowRoot = "open";
   }
   beforeDraw() {
-    this.uploadFunction = upload(this.uploadUrl, this.chunkSize, true);
+    console.log("beforeDraw", this.toChunk, !this.toChunk);
+    this.uploadFunction = upload(this.uploadUrl, this.chunkSize, !this.toChunk);
   }
   /**
    * Method to draw the component.
@@ -316,12 +349,13 @@ class FileUpload extends WJElement {
    * @param {Object} params - The parameters for the component.
    * @returns {DocumentFragment} The fragment containing the component.
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("div");
     native.classList.add("native-file-upload");
     native.setAttribute("part", "native");
     let label = document.createElement("div");
+    label.setAttribute("part", "label");
     label.classList.add("file-label");
     label.setAttribute("part", "file-label");
     let button = document.createElement("wje-button");
@@ -334,7 +368,9 @@ class FileUpload extends WJElement {
     button.appendChild(slot);
     button.appendChild(fileInput);
     this.fileInput = fileInput;
-    let fileList = document.createElement("div");
+    let fileList = document.createElement("slot");
+    fileList.setAttribute("name", "item");
+    fileList.setAttribute("part", "items");
     fileList.classList.add("file-list");
     label.appendChild(slot);
     label.appendChild(button);
@@ -349,6 +385,9 @@ class FileUpload extends WJElement {
   }
   /**
    * Method to perform actions after the component is drawn.
+   * @params {Object} context - The context to draw in.
+   * @params {Object} store - The store to use.
+   * @params {Object} params - The parameters to use.
    */
   afterDraw() {
     this.button.addEventListener("click", () => {
@@ -392,6 +431,10 @@ class FileUpload extends WJElement {
     event.preventDefault();
     this.addFilesToQueue(this.fileInput.files);
   }
+  /**
+   * Method to add files to the queue.
+   * @param files
+   */
   addFilesToQueue(files) {
     var _a;
     this._queuedFiles = [...files];
@@ -429,6 +472,7 @@ class FileUpload extends WJElement {
    */
   createPreview(file, reader) {
     let preview = document.createElement("wje-file-upload-item");
+    preview.setAttribute("slot", "item");
     preview.setAttribute("name", file.name);
     preview.setAttribute("size", file.size);
     preview.setAttribute("uploaded", "0");

package/dist/wje-footer.js

@@ -45,7 +45,7 @@ class Footer extends WJElement {
    * @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-form.js

@@ -17,7 +17,7 @@ class Form extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let element = document.createElement("slot");
     fragment.appendChild(element);

package/dist/wje-format-digital.js

@@ -72,7 +72,7 @@ class FormatDigital 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");

package/dist/wje-grid.js

@@ -17,7 +17,7 @@ class Grid extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let element = document.createElement("slot");
     if (this.color)

package/dist/wje-header.js

@@ -45,7 +45,7 @@ class Header extends WJElement {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment}
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let element = document.createElement("header");
     element.classList.add("native-header");

package/dist/wje-icon-picker.js

@@ -6,8 +6,8 @@ import "./wje-infinite-scroll.js";
 import Input from "./wje-input.js";
 import Tooltip from "./wje-tooltip.js";
 import "./wje-popup.js";
-import { I as InfiniteScroll } from "./infinite-scroll.element-DcO1E5Es.js";
-import { P as Popup } from "./popup.element-l8v-dMoK.js";
+import { I as InfiniteScroll } from "./infinite-scroll.element-R3y_ZQj6.js";
+import { P as Popup } from "./popup.element-C0a1z1y2.js";
 const styles = "/*\n[ Wj Icon Picker ]\n*/\n\n:host {\n  --wje-icon-picker-radius: var(--wje-border-radius-small);\n  --wje-icon-picker-icon-size: 1.5rem;\n  --wje-icon-picker-border-width: 1px;\n  --wje-icon-picker-border-style: solid;\n  --wje-icon-picker-border-color: var(--wje-border-color);\n  --wje-icon-picker-padding: .25rem;\n  padding: 0 1rem;\n}\n\n.anchor {\n  width: var(--wje-icon-picker-icon-size);\n  height: var(--wje-icon-picker-icon-size);\n  padding: var(--wje-icon-picker-padding);\n  border-width: var(--wje-icon-picker-border-width);\n  border-style: var(--wje-icon-picker-border-style);\n  border-color: var(--wje-icon-picker-border-color);\n  box-sizing: border-box;\n  border-radius: var(--wje-icon-picker-radius);\n}\n\n.picker {\n  width: 320px;\n  height: 271px;\n  box-shadow: 0 0 5px rgba(0,0,0,.05), 0 5px 20px rgba(0,0,0,.1);\n  border-radius: var(--wje-icon-picker-radius);\n  border-width: var(--wje-icon-picker-border-width);\n  border-style: var(--wje-icon-picker-border-style);\n  border-color: var(--wje-icon-picker-border-color);\n  overflow: auto;\n  padding: 1rem;\n  background: var(--wje-background);\n}\n\n.icon-items {\n  --icon-min-width: 2rem;\n  display: grid;\n  grid-gap: .5rem;\n  grid-template-columns: repeat(auto-fit,minmax(var(--icon-min-width),1fr));\n}\n\n.icon-item {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: inherit;\n  padding: .25rem;\n  min-height: var(--wje-icon-picker-icon-size);\n  min-width: var(--wje-icon-picker-icon-size);\n  text-decoration: none;\n\n  &:hover {\n    border-radius: .25rem;\n    background: var(--wje-border-color);\n  }\n}\n\n.wje-size {\n  --wje-icon-size: 24px !important;\n}\n\nicon-item svg {\n  width: var(--wje-icon-picker-icon-size);\n  height: var(--wje-icon-picker-icon-size);\n}\n\nwje-input {\n  --wje-input-border-radius: 4px;\n  --wje-input-margin-bottom: 0;\n}\n\nwje-infinite-scroll {\n  margin-top: 1rem;\n}\n\nwje-select {\n  --wje-select-border-width: 0 0 1px 0 !important;\n  --wje-select-border-radius: 0 !important;\n  margin-bottom: 1rem;\n}\n\n.anchor wje-icon {\n  --wje-icon-size: 100% !important;\n}";
 class IconPicker extends WJElement {
   /**
@@ -141,7 +141,7 @@ class IconPicker 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.classList.add("native-color-picker");
@@ -193,6 +193,9 @@ class IconPicker extends WJElement {
   }
   /**
    * Called after the component has been drawn.
+   * @params {Object} context - The context for drawing.
+   * @params {Object} store - The store for drawing.
+   * @params {Object} params - The parameters for drawing.
    */
   afterDraw() {
     this.addEventListener("wje-popup:show", (e) => {

package/dist/wje-icon.js

@@ -73,7 +73,7 @@ const getSvgContent = (url, sanitize) => {
               iconContent.set(url, svgContent || "");
             });
           }
-          iconContent.set(url, "");
+          return iconContent.set(url, "");
         });
         requests.set(url, req);
       }
@@ -166,6 +166,9 @@ class Icon extends WJElement {
   }
   /**
    * Called after the component has been drawn.
+   * @params {Object} context - The context for drawing.
+   * @params {Object} store - The store for drawing.
+   * @params {Object} params - The parameters for drawing.
    */
   afterDraw() {
     let lazyImageObserver = new IntersectionObserver((entries, observer) => {

package/dist/wje-img-comparer.js

@@ -48,7 +48,6 @@ class ImgComparer extends WJElement {
     __publicField(this, "className", "ImgComparer");
     /**
      * Handles the drag event.
-     *
      * @param {Event} e - The event.
      */
     __publicField(this, "handleDrag", (e) => {
@@ -65,7 +64,6 @@ class ImgComparer extends WJElement {
     });
     /**
      * Clamps a number between a minimum and maximum value.
-     *
      * @param {number} num - The number to clamp.
      * @param {number} min - The minimum value.
      * @param {number} max - The maximum value.
@@ -105,7 +103,7 @@ class ImgComparer 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.classList.add("native-split-view");

package/dist/wje-img.js

@@ -44,7 +44,7 @@ class Img extends WJElement {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment}
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("img");
     native.setAttribute("part", "native");
@@ -57,8 +57,11 @@ class Img extends WJElement {
   }
   /**
    * Called after the component has been drawn.
+   * @params {Object} context - The context for drawing.
+   * @params {Object} store - The store for drawing.
+   * @params {Object} params - The parameters for drawing.
    */
-  afterDraw(context, store, params) {
+  afterDraw() {
     let lazyImageObserver = new IntersectionObserver((entries, observer) => {
       entries.forEach((entry) => {
         if (entry.isIntersecting) {

package/dist/wje-infinite-scroll.js

@@ -1,4 +1,4 @@
-import { I as InfiniteScroll } from "./infinite-scroll.element-DcO1E5Es.js";
+import { I as InfiniteScroll } from "./infinite-scroll.element-R3y_ZQj6.js";
 InfiniteScroll.define("wje-infinite-scroll", InfiniteScroll);
 export {
   InfiniteScroll as default

package/dist/wje-input-file.js

@@ -53,7 +53,7 @@ class InputFile extends WJElement {
    * @param {Object} params - The parameters
    * @returns {Object} Document fragment
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("div");
     native.setAttribute("part", "native");
@@ -84,6 +84,9 @@ class InputFile extends WJElement {
   }
   /**
    * @summary After draw method
+   * @params {Object} context - The context
+   * @params {Object} store - The store
+   * @params {Object} params - The parameters
    */
   afterDraw() {
     this.input.addEventListener("click", () => {

package/dist/wje-input.js

@@ -75,7 +75,10 @@ class Input 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.
@@ -150,7 +153,6 @@ class Input extends WJElement {
    * @returns {Array} The attributes to observe for changes.
    */
   static get observedAttributes() {
-    return;
   }
   /**
    * Sets up the attributes for the input.
@@ -172,7 +174,7 @@ class Input extends WJElement {
    * @param {Object} params - The parameters to use.
    * @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");
@@ -266,6 +268,9 @@ class Input extends WJElement {
   }
   /**
    * Runs after the input 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.input.addEventListener("focus", (e) => {
@@ -447,7 +452,7 @@ class Input extends WJElement {
   formDisabledCallback(disabled) {
     console.warn("formDisabledCallback not implemented yet");
   }
-  dispatchEvent(event2) {
+  dispatchEvent(e) {
     return false;
   }
 }

package/dist/wje-item.js

@@ -4,9 +4,23 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 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}';
 class Item extends WJElement {
+  /**
+   * @constructor
+   * @summary Item constructor
+   */
   constructor() {
     super();
+    /**
+     * @summary Class name
+     * @type {string}
+     */
     __publicField(this, "className", "Item");
+    /**
+     * Returns the list of attributes to observe for changes.
+     * @param selector
+     * @param el
+     * @returns {boolean}
+     */
     __publicField(this, "hostContext", (selector, el) => {
       return el.closest(selector) !== null;
     });
@@ -22,18 +36,35 @@ 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;
   }
+  /**
+   * @summary Get CSS stylesheet
+   * @static
+   * @returns {Object} styles
+   */
   static get cssStyleSheet() {
     return styles;
   }
+  /**
+   * @summary Setup attributes
+   */
   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() {
     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

@@ -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}
@@ -229,7 +214,7 @@ class Kanban 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.classList.add("native");
@@ -249,8 +234,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 +260,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 +383,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,7 +402,7 @@ class Kanban extends WJElement {
    */
   live(eventType, selector, callback) {
     const attachListener = (root) => {
-      root.addEventListener(eventType, function(e) {
+      root.addEventListener(eventType, (e) => {
         if (e.target.matches(selector)) {
           callback.call(e.target, e);
         }
@@ -425,7 +410,7 @@ class Kanban extends WJElement {
     };
     const traverseAndAttach = (root) => {
       attachListener(root);
-      root.querySelectorAll("*").forEach(function(node) {
+      root.querySelectorAll("*").forEach((node) => {
         if (node.shadowRoot) {
           traverseAndAttach(node.shadowRoot);
         }

package/dist/wje-label.js

@@ -37,15 +37,6 @@ class Label extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  /**
-   * 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.
-   */
-  beforeDraw(context, store, params) {
-  }
   /**
    * Draws the component.
    *
@@ -54,7 +45,7 @@ class Label extends WJElement {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment}
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     if (this.color)
       this.classList.add("wje-color-" + params.color, "wje-color");

package/dist/wje-list.js

@@ -1,4 +1,4 @@
-import { L as List } from "./list.element-TZXMx1rt.js";
+import { L as List } from "./list.element-syl98NWS.js";
 List.define("wje-list", List);
 export {
   List as default