wj-elements 0.1.127 → 0.1.129

package/dist/wje-input.js

@@ -1,9 +1,6 @@
 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);
-  return 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}';
 class Input extends WJElement {
@@ -78,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.
@@ -153,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.
@@ -175,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");
@@ -188,6 +187,7 @@ class Input extends WJElement {
     let wrapper = document.createElement("div");
     wrapper.classList.add("wrapper");
     let inputWrapper = document.createElement("div");
+    inputWrapper.setAttribute("part", "wrapper");
     inputWrapper.classList.add("input-wrapper");
     let label = document.createElement("label");
     label.innerText = this.label;
@@ -268,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) => {
@@ -449,6 +452,9 @@ class Input extends WJElement {
   formDisabledCallback(disabled) {
     console.warn("formDisabledCallback not implemented yet");
   }
+  dispatchEvent(e) {
+    return false;
+  }
 }
 /**
  * Whether the input is associated with a form.

package/dist/wje-item.js

@@ -1,15 +1,26 @@
 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);
-  return 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}';
 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;
     });
@@ -25,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

@@ -1,9 +1,6 @@
 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);
-  return 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 MenuItem from "./wje-menu-item.js";
@@ -161,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}
@@ -232,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");
@@ -252,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
@@ -278,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) => {
@@ -295,8 +277,7 @@ class Kanban extends WJElement {
     });
     this.live("drop", ".pool, .pool .card-placeholder", (e) => {
       e.preventDefault();
-      if (!this.isDragging)
-        return;
+      if (!this.isDragging) return;
       const todo_id = +e.dataTransfer.getData("text");
       const card = this.shadowRoot.querySelector('.card[data-id="' + todo_id + '"]');
       if (e.target.classList.contains("pool")) {
@@ -402,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.
@@ -421,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);
         }
@@ -429,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

@@ -1,9 +1,6 @@
 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);
-  return value;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
 const styles = "/*\n[ WJ Label ]\n*/\n\n:host(.wje-color-primary) {\n  --wje-color: var(--wje-color-primary) !important;\n}\n\n:host(.wje-color-complete) {\n  --wje-color: var(--wje-color-complete) !important;\n}\n\n:host(.wje-color-success) {\n  --wje-color-base: var(--wje-color-success) !important;\n  --wje-color-contrast: var(--wje-color-contrast-0) !important;\n}\n\n:host(.wje-color-warning) {\n  --wje-color-base: var(--wje-color-warning) !important;\n  --wje-color-contrast: var(--wje-color-contrast-11) !important;\n}\n\n:host(.wje-color-danger) {\n  --wje-color-base: var(--wje-color-danger) !important;\n  --wje-color-contrast: var(--wje-color-contrast-0) !important;\n}\n\n:host(.wje-color-info) {\n  --wje-color-base: var(--wje-color-info) !important;\n  --wje-color-contrast: var(--wje-color-contrast-0) !important;\n}\n\n:host(.wje-color-menu) {\n  --wje-color-base: var(--wje-color-menu) !important;\n  --wje-color-contrast: var(--wje-color-contrast-0) !important;\n}\n\n:host {\n  --wje-color: initial;\n  display: block;\n  font-size: inherit;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  box-sizing :border-box;\n}\n\n:host(.wje-color) {\n  color: current-color(base);\n}\n\n:host(.wje-text-wrap),\n:host([text-wrap]) {\n  white-space: normal !important;\n}\n\n/*Fixed Inputs*/\n\n:host(.label-fixed) {\n  flex: 0 0 100px;\n  width: 100px;\n  min-width: 100px;\n  max-width: 200px;\n}\n\n/*Stacked & Floating Inputs*/\n\n:host(.label-stacked),\n:host(.label-floating) {\n  margin-bottom: 0;\n  align-self: stretch;\n  width: auto;\n  max-width: 100%;\n}\n\n:host(.label-no-animate.label-floating) {\n  transition: none;\n}\n\n/*Headings*/\n\n::slotted(*) h1,\n::slotted(*) h2,\n::slotted(*) h3,\n::slotted(*) h4,\n::slotted(*) h5,\n::slotted(*) h6 {\n  text-overflow: inherit;\n  overflow: inherit;\n}\n\n:host(.wje-color) {\n  color: var(--wje-color);\n}\n\n::slotted(*:first-child) {\n  margin-top: 0 !important;\n}\n\n::slotted(*:last-child) {\n  margin-bottom: 0 !important;\n}";
 class Label extends WJElement {
@@ -40,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.
    *
@@ -57,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-BkOOqBtW.js";
+import { L as List } from "./list.element-syl98NWS.js";
 List.define("wje-list", List);
 export {
   List as default

package/dist/wje-main.js

@@ -1,9 +1,6 @@
 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);
-  return value;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
 const styles = "/*\n[ WJ Main ]\n*/\n\n:host {\n    display: block;\n    flex: 1;\n    flex-basis: auto;\n    padding: 1.5rem;\n    box-sizing: border-box;\n}";
 class Main extends WJElement {
@@ -48,7 +45,7 @@ class Main 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-masonry.js

@@ -1,9 +1,6 @@
 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);
-  return value;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
 const DEFAULT_MAX_COL_WIDTH = 500;
 const DEFAULT_DEBOUNCE_MS = 300;
@@ -20,8 +17,7 @@ function getColCount(totalWidth, cols, maxColWidth) {
 }
 function debounce(cb, ms, id) {
   const existingTimeout = DEBOUNCE_MAP.get(id);
-  if (existingTimeout != null)
-    window.clearTimeout(existingTimeout);
+  if (existingTimeout !== null && existingTimeout !== void 0) window.clearTimeout(existingTimeout);
   DEBOUNCE_MAP.set(id, window.setTimeout(cb, ms));
 }
 function findSmallestColIndex(colHeights) {
@@ -59,7 +55,7 @@ class Masonry extends WJElement {
      * @param {Array} entries - The entries to use.
      */
     __publicField(this, "onResize", (entries) => {
-      const { width } = entries != null && Array.isArray(entries) && entries.length > 0 ? entries[0].contentRect : { width: this.offsetWidth };
+      const { width } = entries !== null && entries !== void 0 && Array.isArray(entries) && entries.length > 0 ? entries[0].contentRect : { width: this.offsetWidth };
       const colCount = getColCount(width, this.cols, this.maxColWidth);
       if (colCount !== this.columns.length) {
         this.scheduleLayout();
@@ -69,7 +65,7 @@ class Masonry extends WJElement {
      * Lays out the element.
      */
     __publicField(this, "layout", () => {
-      if (this.currentRequestAnimationFrameCallback != null) {
+      if (this.currentRequestAnimationFrameCallback !== null && this.currentRequestAnimationFrameCallback !== void 0) {
         window.cancelAnimationFrame(this.currentRequestAnimationFrameCallback);
       }
       this.currentRequestAnimationFrameCallback = requestAnimationFrame(() => {
@@ -117,7 +113,10 @@ class Masonry extends WJElement {
    * @param {number} value - The number of columns.
    */
   set cols(value) {
-    this.hasAttribute("cols") ? this.setAttribute("cols", value) : "auto";
+    if (this.hasAttribute("cols"))
+      this.setAttribute("cols", value);
+    else
+      this.setAttribute("cols", "auto");
   }
   /**
    * Getter for the cols property.
@@ -195,7 +194,7 @@ class Masonry extends WJElement {
   beforeDisconnect() {
     this.unsetSlot.removeEventListener("slotchange", this.onSlotChange);
     window.removeEventListener("resize", this.onResize);
-    if (this.ro != null) {
+    if (this.ro !== null && this.ro !== void 0) {
       this.ro.unobserve(this);
     }
   }
@@ -212,7 +211,7 @@ class Masonry extends WJElement {
    * @param {Object} params - The parameters to use.
    * @returns {DocumentFragment} The drawn element.
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("div");
     native.setAttribute("id", "unset-items");
@@ -248,9 +247,6 @@ class Masonry extends WJElement {
     if (columns.length === colCount) {
       return;
     }
-    for (const column of columns) {
-      column.parentNode && column.parentNode.removeChild(column);
-    }
     for (let i = 0; i < colCount; i++) {
       const column = document.createElement("div");
       column.classList.add("column");

package/dist/wje-master.js

@@ -1,13 +1,10 @@
 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);
-  return value;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
 import { WjePermissionsApi, event } from "./wje-element.js";
 import { defaultStoreActions, store } from "./wje-store.js";
-import { b, w } from "./router-links-F7MJWhZi.js";
+import { b, w } from "./router-links-I2vcmVCs.js";
 import { fetchAndParseCSS } from "./wje-fetchAndParseCSS.js";
 import { Localizer } from "./localize.js";
 import { default as default2 } from "./wje-accordion.js";
@@ -99,9 +96,9 @@ import { default as default84 } from "./wje-toolbar-action.js";
 import { default as default85 } from "./wje-tooltip.js";
 import { default as default86 } from "./wje-visually-hidden.js";
 import { default as default87 } from "./wje-sliding-container.js";
-import { L } from "./list.element-BkOOqBtW.js";
-import { I } from "./infinite-scroll.element-DEQ-AqTB.js";
-import { P } from "./popup.element-DvPGL_NN.js";
+import { L } from "./list.element-syl98NWS.js";
+import { I } from "./infinite-scroll.element-R3y_ZQj6.js";
+import { P } from "./popup.element-C0a1z1y2.js";
 function formatDate(input, format) {
   let date;
   if (typeof input === "string") {
@@ -156,7 +153,7 @@ const enGb = {
   "wj.stepper.step": "Step"
 };
 Localizer.registerTranslation(enGb);
-const styles$2 = ".native-timeline {\n    position: relative;\n}\n\n.vertical-line {\n    position: absolute;\n    margin-left: calc(var(--wje-spacing-x-large) + 1px);\n    top: 0;\n    bottom: 0;\n    width: 1px;\n    background-color: var(--wje-color-info-3);\n}\n\n\n";
+const styles$1 = ".native-timeline {\n    position: relative;\n}\n\n.vertical-line {\n    position: absolute;\n    margin-left: calc(var(--wje-spacing-x-large) + 1px);\n    top: 0;\n    bottom: 0;\n    width: 1px;\n    background-color: var(--wje-color-info-3);\n}\n\n\n";
 class Timeline extends WJElement {
   constructor() {
     super();
@@ -174,7 +171,7 @@ class Timeline extends WJElement {
    * @returns {CSSStyleSheet}
    */
   static get cssStyleSheet() {
-    return styles$2;
+    return styles$1;
   }
   /**
    * Sets up the attributes for the component.
@@ -190,7 +187,7 @@ class Timeline extends WJElement {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment}
    */
-  draw(context, store2, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     const native = document.createElement("div");
     native.setAttribute("part", "native");
@@ -206,7 +203,7 @@ class Timeline extends WJElement {
   }
 }
 Timeline.define("wje-timeline", Timeline);
-const styles$1 = ":host {\n    --wje-card-content-padding: var(--wje-spacing-medium);\n    margin-bottom: .5rem;\n    display: block;\n}\n\n.native-timeline-item > wje-icon {\n    color: var(--wje-color-contrast-5) !important;\n}\n\n.timeline-items {\n    display: flex;\n    flex-direction: column;\n}\n\n.native-timeline-item {\n    display: flex;\n    position: relative;\n    padding: var(--wje-spacing-medium) var(--wje-spacing-medium) var(--wje-spacing-medium) var(--wje-spacing-large);\n    gap: var(--wje-spacing-medium);\n    border-width: 1px;\n    border-style: solid;\n    border-color: transparent;\n    border-radius: var(--wje-border-radius-large);\n}\n\n:host .native-timeline-item:hover {\n    background-color: var(--wje-color-contrast-1);\n    border-color: var(--wje-color-contrast-3);\n}\n\n:host([active]) .native-timeline-item {\n    background-color: var(--wje-color-primary-1);\n    border-color: var(--wje-color-primary-3);\n}\n\n:host([active]) .native-timeline-item:hover {\n    background-color: var(--wje-color-primary-2);\n}\n\n.icon-container {\n    position: absolute;\n    display: flex;\n    width: var(--wje-size-small); \n    height: var(--wje-size-small); \n    padding: var(--wje-spacing-2x-small);\n    border-radius: var(--wje-border-radius-circle); \n    opacity: 0;\n}\n\n.content-container {\n    height: fit-content;\n    gap: var(--wje-spacing-small);\n}\n\n.event {\n    margin: 0;\n    font-size: var(--wje-font-size-large);\n    font-weight: var(--wje-font-weight-bold);\n    line-height: var(--wje-line-height-dense);\n    letter-spacing: var(--wje-spacing-4x-small);\n}\n\n.additional-content {\n    font-size: var(--wje-font-size-medium);\n    margin-top: 1rem;\n}\n\nwje-status {\n    position: relative;\n    z-index: 1;\n}\n\nwje-relative-time {\n    display: block;\n    margin-bottom: var(--wje-spacing-2x-small);\n}";
+const styles = ":host {\n    --wje-card-content-padding: var(--wje-spacing-medium);\n    margin-bottom: .5rem;\n    display: block;\n}\n\n.native-timeline-item > wje-icon {\n    color: var(--wje-color-contrast-5) !important;\n}\n\n.timeline-items {\n    display: flex;\n    flex-direction: column;\n}\n\n.native-timeline-item {\n    display: flex;\n    position: relative;\n    padding: var(--wje-spacing-medium) var(--wje-spacing-medium) var(--wje-spacing-medium) var(--wje-spacing-large);\n    gap: var(--wje-spacing-medium);\n    border-width: 1px;\n    border-style: solid;\n    border-color: transparent;\n    border-radius: var(--wje-border-radius-large);\n}\n\n:host .native-timeline-item:hover {\n    background-color: var(--wje-color-contrast-1);\n    border-color: var(--wje-color-contrast-3);\n}\n\n:host([active]) .native-timeline-item {\n    background-color: var(--wje-color-primary-1);\n    border-color: var(--wje-color-primary-3);\n}\n\n:host([active]) .native-timeline-item:hover {\n    background-color: var(--wje-color-primary-2);\n}\n\n.icon-container {\n    position: absolute;\n    display: flex;\n    width: var(--wje-size-small); \n    height: var(--wje-size-small); \n    padding: var(--wje-spacing-2x-small);\n    border-radius: var(--wje-border-radius-circle); \n    opacity: 0;\n}\n\n.content-container {\n    height: fit-content;\n    gap: var(--wje-spacing-small);\n}\n\n.event {\n    margin: 0;\n    font-size: var(--wje-font-size-large);\n    font-weight: var(--wje-font-weight-bold);\n    line-height: var(--wje-line-height-dense);\n    letter-spacing: var(--wje-spacing-4x-small);\n}\n\n.additional-content {\n    font-size: var(--wje-font-size-medium);\n    margin-top: 1rem;\n}\n\nwje-status {\n    position: relative;\n    z-index: 1;\n}\n\nwje-relative-time {\n    display: block;\n    margin-bottom: var(--wje-spacing-2x-small);\n}";
 class TimelineItem extends WJElement {
   constructor() {
     super();
@@ -224,7 +221,7 @@ class TimelineItem extends WJElement {
    * @returns {CSSStyleSheet}
    */
   static get cssStyleSheet() {
-    return styles$1;
+    return styles;
   }
   /**
    * Sets up the attributes for the component.
@@ -241,7 +238,7 @@ class TimelineItem extends WJElement {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment}
    */
-  draw(context, store2, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("div");
     native.setAttribute("part", "native");
@@ -279,113 +276,6 @@ class TimelineItem extends WJElement {
   }
 }
 TimelineItem.define("wje-timeline-item", TimelineItem);
-const styles = '/*\n[ WJ Toast ]\n*/\n\n:host {\n  position: fixed;\n  z-index: 9999;\n  width: 300px;\n}\n\n.native-toast {\n  display: flex;\n  align-items: center;\n  padding: 1rem;\n  overflow: hidden;\n  margin: 0;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: var(--wje-border-radius-large);\n\n  slot[name="avatar"]::slotted(wje-avatar) {\n    margin-right: .5rem;\n  }\n\n  .content {\n    font-size: var(--wje-font-size-small);\n    .title {\n      font-size: var(--wje-font-size);\n      font-weight: var(--wje-font-weight-bold);\n    }\n  }\n\n  wje-button {\n    --wje-button-margin-inline: auto 0;\n    margin-left: auto !important;\n  }\n}\n\n:host([position=top]) {\n  animation: slideDown .3s ease-out forwards;\n  top: 1rem;\n  left: auto;\n  right: auto;\n}\n\n:host([position=bottom]) {\n  animation: slideUp .3s ease-out forwards;\n  bottom: 1rem;\n  left: auto;\n  right: auto;\n}\n\n:host([position=top-start]) {\n  animation: slideStart .3s ease-out forwards;\n  top: 1rem;\n  left: 1rem;\n  right: auto;\n}\n\n:host([position=top-end]) {\n  animation: slideEnd .3s ease-out forwards;\n  top: 1rem;\n  left: auto;\n  right: 1rem;\n}\n\n:host([position=bottom-start]) {\n  animation: slideStart .3s ease-out forwards;\n  bottom: 1rem;\n  left: 1rem;\n  right: auto;\n}\n\n:host([position=bottom-end]) {\n  animation: slideEnd .3s ease-out forwards;\n  bottom: 1rem;\n  left: auto;\n  right: 1rem;\n}\n\n@keyframes slideDown {\n  0% {\n    transform: translateY(-100%);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}\n\n@keyframes slideUp {\n  0% {\n    transform: translateY(100%);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}\n\n@keyframes slideStart {\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n\n@keyframes slideEnd {\n  0% {\n    transform: translateX(100%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n\n/*PRIMARY*/\n:host([type=primary]) .native-toast {\n  background-color: var(--wje-color-primary-1);\n  color: var(--wje-color-primary-9);\n  border-color: var(--wje-color-primary-3);\n}\n\n/*COMPLETE*/\n:host([type=complete]) .native-toast {\n  background-color: var(--wje-color-complete-1);\n  color: var(--wje-color-complete-9);\n  border-color: var(--wje-color-complete-3);\n}\n\n/*SUCCESS*/\n:host([type=success]) .native-toast {\n  background-color: var(--wje-color-success-1);\n  color: var(--wje-color-success-9);\n  border-color: var(--wje-color-success-3);\n}\n\n/*WARNING*/\n:host([type=warning]) .native-toast{\n  background-color: var(--wje-color-warning-1);\n  color: var(--wje-color-warning-11);\n  border-color: var(--wje-color-warning-3);\n}\n\n/*DANGER*/\n:host([type=danger]) .native-toast {\n  background-color: var(--wje-color-danger-1);\n  color: var(--wje-color-danger-9);\n  border-color: var(--wje-color-danger-3);\n}\n\n/*INFO*/\n:host([type=info]) .native-toast {\n  background-color: var(--wje-color-info-1);\n  color: var(--wje-color-info-11);\n  border-color: var(--wje-color-info-4);\n}\n\n/*CONTRAST*/\n:host([type=contrast]) .native-toast {\n  background-color: var(--wje-color-contrast-2);\n  color: var(--wje-color-primary-9);\n  border-color: var(--wje-color-contrast-3);\n}';
-class ToastItem extends WJElement {
-  /**
-   * Toast constructor
-   * @constructor
-   */
-  constructor() {
-    super();
-    /**
-     * Class name
-     * @type {string}
-     */
-    __publicField(this, "className", "ToastItem");
-    __publicField(this, "removeToast", () => {
-      clearTimeout(this.timeout);
-      this.remove();
-    });
-  }
-  set duration(value) {
-    this.setAttribute("duration", value);
-  }
-  get duration() {
-    return +this.getAttribute("duration");
-  }
-  set position(value) {
-    this.setAttribute("position", value);
-  }
-  get position() {
-    return this.getAttribute("position");
-  }
-  set type(value) {
-    this.setAttribute("type", value);
-  }
-  get type() {
-    return this.getAttribute("type");
-  }
-  /**
-   * Get CSS stylesheet
-   * @static
-   * @returns {Object} styles
-   */
-  static get cssStyleSheet() {
-    return styles;
-  }
-  /**
-   * Returns the list of attributes to observe for changes.
-   *
-   * @static
-   * @returns {Array<string>}
-   */
-  static get observedAttributes() {
-    return ["position", "type", "duration"];
-  }
-  /**
-   * Setup attributes
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Draw method
-   * @param {Object} context - The context
-   * @param {Object} store - The store
-   * @param {Object} params - The parameters
-   * @returns {Object} Document fragment
-   */
-  draw(context, store2, params) {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    native.setAttribute("part", "native");
-    native.classList.add("native-toast");
-    let avatarSlot = document.createElement("slot");
-    avatarSlot.setAttribute("name", "avatar");
-    avatarSlot.classList.add("avatar");
-    let content = document.createElement("div");
-    content.classList.add("content");
-    content.innerHTML = `<div class="title">${this.title}</div><div class="message"><slot></slot></div>`;
-    let icon = document.createElement("wje-icon");
-    icon.setAttribute("name", "x");
-    let closeBtn = document.createElement("wje-button");
-    closeBtn.setAttribute("fill", "link");
-    closeBtn.setAttribute("color", this.type);
-    closeBtn.setAttribute("size", "small");
-    closeBtn.classList.add("close");
-    closeBtn.appendChild(icon);
-    native.appendChild(avatarSlot);
-    native.appendChild(content);
-    if (this.hasAttribute("close"))
-      native.appendChild(closeBtn);
-    fragment.appendChild(native);
-    this.closeBtn = closeBtn;
-    return fragment;
-  }
-  afterDraw() {
-    this.closeBtn.addEventListener("wje-button:click", this.removeToast);
-    if (this.duration > 0) {
-      this.timeout = setTimeout(() => {
-        this.removeToast();
-      }, this.duration);
-    }
-  }
-  beforeDisconnect() {
-    this.closeBtn.removeEventListener("wje-button:click", this.removeToast);
-    clearTimeout(this.timeout);
-  }
-}
-ToastItem.define("wje-toast-item", ToastItem);
 export {
   default2 as Accordion,
   default3 as AccordionItem,
@@ -474,7 +364,6 @@ export {
   Timeline,
   TimelineItem,
   default81 as Toast,
-  ToastItem,
   default82 as Toggle,
   default83 as Toolbar,
   default84 as ToolbarAction,

package/dist/wje-menu-button.js

@@ -1,9 +1,6 @@
 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);
-  return 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 Menu Label ]\n*/\n\n:host {\n  display: inline-flex;\n}\n@media (min-width: 768px) {\n  :host {\n    display: none;\n  }\n}";
 class MenuButton extends WJElement {
@@ -48,7 +45,7 @@ class MenuButton extends WJElement {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment}
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let slot = document.createElement("slot");
     fragment.appendChild(slot);
@@ -57,6 +54,9 @@ class MenuButton extends WJElement {
   /**
    * Refreshes the component after drawing.
    * Adds a click event listener that toggles the "open" class on the content element.
+   * @params {Object} context - The context for drawing.
+   * @params {Object} store - The store for drawing.
+   * @params {Object} params - The parameters for drawing.
    */
   afterDraw() {
     event.addListener(this, "click", null, (e) => {