wj-elements 0.7.6 → 0.8.0

package/dist/wje-kanban.js

@@ -1,476 +1,199 @@
 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 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: 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.
-   * @class
-   */
+import e from "./wje-checkbox.js";
+import t from "./wje-element.js";
+import a from "./wje-menu-item.js";
+class r extends t {
   constructor() {
     super();
-    /**
-     * Dependencies of the Option component.
-     */
-    __publicField(this, "dependencies", {
-      "wje-checkbox": Checkbox,
-      "wje-menu-item": MenuItem
-    });
-    /**
-     * Sets the URL for fetching data.
-     * @type {string}
-     */
+    __publicField(this, "dependencies", { "wje-checkbox": e, "wje-menu-item": a });
     __publicField(this, "className", "Kanban");
-    /**
-     * 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) {
-        let card = this.htmlCard(item);
-        pool.querySelector(".pool-content").appendChild(card);
+    __publicField(this, "customForeach", (e2, t2) => {
+      for (const a2 of t2) {
+        let t3 = this.htmlCard(a2);
+        e2.querySelector(".pool-content").appendChild(t3);
       }
     });
-    /**
-     * Handles the menu item click event.
-     * @param e
-     */
-    __publicField(this, "menuItemClickHandler", (e) => {
-      const action = e.target.dataset.action;
-      const pool = e.target.closest(".pool");
-      this.handlePoolAction(action, pool);
+    __publicField(this, "menuItemClickHandler", (e2) => {
+      const t2 = e2.target.dataset.action, a2 = e2.target.closest(".pool");
+      this.handlePoolAction(t2, a2);
     });
-    /**
-     * Updates the column item count.
-     */
     __publicField(this, "updateColumnItemCount", () => {
-      const pools = this.shadowRoot.querySelectorAll(".pool");
-      pools.forEach((pool) => {
-        const itemCount = pool.querySelectorAll(".pool-content .card").length;
-        let itemCountDisplay = pool.querySelector(".item-count");
-        itemCountDisplay.innerHTML = itemCount;
+      this.shadowRoot.querySelectorAll(".pool").forEach((e2) => {
+        const t2 = e2.querySelectorAll(".pool-content .card").length;
+        e2.querySelector(".item-count").innerHTML = t2;
       });
     });
-    /**
-     * Gets the pool.
-     * @param data {Array}
-     * @param poolName {string}
-     * @returns {*}
-     */
-    __publicField(this, "getPool", (data, poolName) => {
-      return data.reduce((acc, item) => {
-        const statusName = item.status.name;
-        if (!acc[statusName]) {
-          acc[statusName] = [];
-        }
-        acc[statusName].push(item);
-        return acc;
-      }, {});
-    });
-    /**
-     * Returns the HTML for the pool.
-     * @param title {string}
-     * @param countItems {number}
-     * @returns {Element}
-     */
-    __publicField(this, "htmlPool", (title, countItems) => {
-      let poolHtml = document.createElement("div");
-      poolHtml.classList.add("pool");
-      let header = document.createElement("div");
-      header.classList.add("pool-header");
-      let checkbox = document.createElement("wje-checkbox");
-      checkbox.setAttribute("type", "checkbox");
-      checkbox.classList.add("select-all-cards");
-      checkbox.title = "Select all cards";
-      let h4 = document.createElement("h4");
-      h4.textContent = title;
-      let badge = document.createElement("wje-badge");
-      badge.setAttribute("color", "danger");
-      badge.classList.add("item-count");
-      badge.textContent = countItems;
-      let dropdown = document.createElement("wje-dropdown");
-      dropdown.setAttribute("placement", "bottom-start");
-      dropdown.setAttribute("offset", "5");
-      dropdown.setAttribute("collapsible", "");
-      dropdown.innerHTML = `
-            <wje-button fill="link" slot="trigger" size="small" round>
-                <wje-icon name="dots-vertical"></wje-icon>
-            </wje-button>
-            <wje-menu active>
-                <wje-menu-item data-action="rename-pool">
-                    <wj-label>Zmeniť názov</wj-label>
-                </wje-menu-item>
-                <wje-menu-item data-action="move-left">
-                    <wj-label>Posunúť doľava</wj-label>
-                </wje-menu-item>
-                <wje-menu-item data-action="move-right">
-                    <wj-label>Posunúť doprava</wj-label>
-                </wje-menu-item>
-            </wje-menu>
-        `;
-      header.appendChild(checkbox);
-      header.appendChild(h4);
-      header.appendChild(badge);
-      header.appendChild(dropdown);
-      let content = document.createElement("div");
-      content.classList.add("pool-content");
-      poolHtml.appendChild(header);
-      poolHtml.appendChild(content);
-      return poolHtml;
-    });
-    /**
-     * Returns the HTML for the card.
-     * @param item {Object}
-     * @returns {Element}
-     */
-    __publicField(this, "htmlCard", (item) => {
-      let card = document.createElement("div");
-      card.classList.add("card");
-      card.draggable = true;
-      card.setAttribute("data-id", item.id);
-      card.innerHTML = `
+    __publicField(this, "getPool", (e2, t2) => e2.reduce((e3, t3) => {
+      const a2 = t3.status.name;
+      return e3[a2] || (e3[a2] = []), e3[a2].push(t3), e3;
+    }, {}));
+    __publicField(this, "htmlPool", (e2, t2) => {
+      let a2 = document.createElement("div");
+      a2.classList.add("pool");
+      let r2 = document.createElement("div");
+      r2.classList.add("pool-header");
+      let s = document.createElement("wje-checkbox");
+      s.setAttribute("type", "checkbox"), s.classList.add("select-all-cards"), s.title = "Select all cards";
+      let l = document.createElement("h4");
+      l.textContent = e2;
+      let o = document.createElement("wje-badge");
+      o.setAttribute("color", "danger"), o.classList.add("item-count"), o.textContent = t2;
+      let i = document.createElement("wje-dropdown");
+      i.setAttribute("placement", "bottom-start"), i.setAttribute("offset", "5"), i.setAttribute("collapsible", ""), i.innerHTML = '\n            <wje-button fill="link" slot="trigger" size="small" round>\n                <wje-icon name="dots-vertical"></wje-icon>\n            </wje-button>\n            <wje-menu active>\n                <wje-menu-item data-action="rename-pool">\n                    <wj-label>Zmeniť názov</wj-label>\n                </wje-menu-item>\n                <wje-menu-item data-action="move-left">\n                    <wj-label>Posunúť doľava</wj-label>\n                </wje-menu-item>\n                <wje-menu-item data-action="move-right">\n                    <wj-label>Posunúť doprava</wj-label>\n                </wje-menu-item>\n            </wje-menu>\n        ', r2.appendChild(s), r2.appendChild(l), r2.appendChild(o), r2.appendChild(i);
+      let n = document.createElement("div");
+      return n.classList.add("pool-content"), a2.appendChild(r2), a2.appendChild(n), a2;
+    });
+    __publicField(this, "htmlCard", (e2) => {
+      let t2 = document.createElement("div");
+      return t2.classList.add("card"), t2.draggable = true, t2.setAttribute("data-id", e2.id), t2.innerHTML = `
             <wje-checkbox type="checkbox" class="select-card" title="Select card"></wje-checkbox>
-            <div>${item.body}</div>
-        `;
-      return card;
+            <div>${e2.body}</div>
+        `, t2;
     });
-    this.totalPages = 0;
-    this.isLoading = [];
-    this._response = {};
-    this.isDragging = false;
-    this.selectedCards = [];
+    this.totalPages = 0, this.isLoading = [], this._response = {}, this.isDragging = false, this.selectedCards = [];
   }
-  /**
-   * Sets the URL for fetching data.
-   * @param value {string}
-   */
-  set response(value) {
-    this._response = value;
+  set response(e2) {
+    this._response = e2;
   }
-  /**
-   * Gets the URL for fetching data.
-   * @returns {*|{}|{}}
-   */
   get response() {
     return this._response;
   }
-  /**
-   * Sets the URL for fetching data.
-   * @param value {array}
-   */
-  set selectedItems(value) {
-    this._selectedItems = value;
+  set selectedItems(e2) {
+    this._selectedItems = e2;
   }
-  /**
-   * Gets the URL for fetching data.
-   * @returns {Array}
-   */
   get selectedItems() {
     return this._selectedItems;
   }
-  /**
-   * Returns the CSS styles for the component.
-   * @static
-   * @returns {CSSStyleSheet}
-   */
   static get cssStyleSheet() {
-    return styles;
+    return ":host{display:flex;flex-direction:column;width:100%;height:100%}.native{height:100%;display:grid;grid-auto-flow:column;grid-auto-columns:300px;overflow-x:auto;gap:1rem}.pool{display:inline-block;width:300px;flex:0 0 300px;vertical-align:top;overflow:auto;padding:8px;border-radius:8px;margin-right:15px}h4{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.card{border-radius:5px;background:#fff;border:1px solid #ddd;margin-bottom:5px;padding:8px 10px;color:#000}.card:hover{opacity:.5}.dragging{box-shadow:0 0 5px #0000001a;transform:rotate(-2deg);opacity:.5;position:relative;z-index:1000}.card-placeholder{display:block;height:34px;border:1px dashed #ddd;margin:3px 0;border-radius:5px}.pool-header{display:flex;align-items:center;margin-bottom:.25rem;gap:0 .25rem}.pool-header wje-checkbox{margin:0}.pool-header wje-badge{margin-inline-start:auto}";
   }
-  /**
-   * Returns the list of attributes to observe for changes.
-   * @static
-   * @returns {Array<string>}
-   */
   static get observedAttributes() {
     return [];
   }
-  /**
-   * Sets up the attributes for the component.
-   */
   setupAttributes() {
-    this.isShadowRoot = "open";
-    this.syncAria();
+    this.isShadowRoot = "open", this.syncAria();
   }
-  /**
-   * 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.
-   */
-  async beforeDraw(context, store, params) {
+  async beforeDraw(e2, t2, a2) {
     this.response = await this.getPages();
   }
-  /**
-   * Draws the component after it has been prepared.
-   * @returns {DocumentFragment}
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    native.classList.add("native");
-    native.setAttribute("part", "native-infinite-scroll");
-    let pools = this.getPool(this.response, this.poolName);
-    for (const statusName in pools) {
-      if (pools.hasOwnProperty(statusName)) {
-        let pool = this.htmlPool(statusName, pools[statusName].length);
-        native.appendChild(pool);
-        const items = pools[statusName];
-        this.customForeach(pool, items);
-      }
+    let e2 = document.createDocumentFragment(), t2 = document.createElement("div");
+    t2.classList.add("native"), t2.setAttribute("part", "native-infinite-scroll");
+    let a2 = this.getPool(this.response, this.poolName);
+    for (const e3 in a2) if (a2.hasOwnProperty(e3)) {
+      let r2 = this.htmlPool(e3, a2[e3].length);
+      t2.appendChild(r2);
+      const s = a2[e3];
+      this.customForeach(r2, s);
     }
-    fragment.appendChild(native);
-    return fragment;
+    return e2.appendChild(t2), e2;
   }
-  /**
-   * Sync ARIA attributes on host.
-   */
   syncAria() {
-    if (!this.hasAttribute("role")) {
-      this.setAriaState({ role: "region" });
-    }
-    const ariaLabel = this.getAttribute("aria-label");
-    const label = this.getAttribute("label");
-    if (!ariaLabel && label) {
-      this.setAriaState({ label });
-    }
+    this.hasAttribute("role") || this.setAriaState({ role: "region" });
+    const e2 = this.getAttribute("aria-label"), t2 = this.getAttribute("label");
+    !e2 && t2 && this.setAriaState({ label: t2 });
   }
-  /**
-   * Called after the component has been drawn.
-   */
   afterDraw() {
-    this.ui = {
-      elBoard: this.shadowRoot.getElementById("board"),
-      elTotalCardCount: this.shadowRoot.getElementById("totalCards"),
-      elCardPlaceholder: null
-    };
-    this.setupDragAndDropEvents();
-    this.setupSelectAllCardsEvent();
-    this.setupMenuItemClickEvents();
+    this.ui = { elBoard: this.shadowRoot.getElementById("board"), elTotalCardCount: this.shadowRoot.getElementById("totalCards"), elCardPlaceholder: null }, this.setupDragAndDropEvents(), this.setupSelectAllCardsEvent(), this.setupMenuItemClickEvents();
   }
-  /**
-   * Sets up the drag and drop events for the component.
-   */
   setupDragAndDropEvents() {
-    this.live("dragstart", ".pool .card", (e) => {
-      this.isDragging = true;
-      e.dataTransfer.clearData();
-      e.dataTransfer.setData("text/plain", e.target.dataset.id);
-      e.dataTransfer.dropEffect = "move";
-      e.target.style.opacity = "0.5";
-      const rect = e.target.getBoundingClientRect();
-      this.draggedElementWidth = rect.width;
-      this.draggedElementHeight = rect.height;
-    });
-    this.live("dragend", ".pool .card", (e) => {
-      e.target.style.opacity = "";
-      if (this.ui.elCardPlaceholder) {
-        this.ui.elCardPlaceholder.remove();
-      }
-      this.ui.elCardPlaceholder = null;
-      this.isDragging = false;
-    });
-    this.live("dragover", ".pool, .pool .card, .pool .card-placeholder", (e) => {
-      e.preventDefault();
-      e.dataTransfer.dropEffect = "move";
-      if (e.target.classList.contains("pool")) {
-        e.target.appendChild(this.getCardPlaceholder());
-      } else if (e.target.classList.contains("card")) {
-        e.target.parentNode.insertBefore(this.getCardPlaceholder(), e.target);
-      }
-    });
-    this.live("drop", ".pool, .pool .card-placeholder", (e) => {
-      e.preventDefault();
-      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")) {
-        e.target.querySelector(".pool-content").appendChild(card);
-      } else if (e.target.classList.contains("card-placeholder")) {
-        e.target.parentNode.replaceChild(card, e.target);
-      }
-      window.setTimeout(this.updateColumnItemCount, 100);
+    this.live("dragstart", ".pool .card", (e2) => {
+      this.isDragging = true, e2.dataTransfer.clearData(), e2.dataTransfer.setData("text/plain", e2.target.dataset.id), e2.dataTransfer.dropEffect = "move", e2.target.style.opacity = "0.5";
+      const t2 = e2.target.getBoundingClientRect();
+      this.draggedElementWidth = t2.width, this.draggedElementHeight = t2.height;
+    }), this.live("dragend", ".pool .card", (e2) => {
+      e2.target.style.opacity = "", this.ui.elCardPlaceholder && this.ui.elCardPlaceholder.remove(), this.ui.elCardPlaceholder = null, this.isDragging = false;
+    }), this.live("dragover", ".pool, .pool .card, .pool .card-placeholder", (e2) => {
+      e2.preventDefault(), e2.dataTransfer.dropEffect = "move", e2.target.classList.contains("pool") ? e2.target.appendChild(this.getCardPlaceholder()) : e2.target.classList.contains("card") && e2.target.parentNode.insertBefore(this.getCardPlaceholder(), e2.target);
+    }), this.live("drop", ".pool, .pool .card-placeholder", (e2) => {
+      if (e2.preventDefault(), !this.isDragging) return;
+      const t2 = +e2.dataTransfer.getData("text"), a2 = this.shadowRoot.querySelector('.card[data-id="' + t2 + '"]');
+      e2.target.classList.contains("pool") ? e2.target.querySelector(".pool-content").appendChild(a2) : e2.target.classList.contains("card-placeholder") && e2.target.parentNode.replaceChild(a2, e2.target), window.setTimeout(this.updateColumnItemCount, 100);
     });
   }
-  /**
-   * Sets up the select all cards event for the component.
-   */
   setupSelectAllCardsEvent() {
-    this.live("wje-toggle:change", ".select-all-cards", (e) => {
-      const pool = e.target.closest(".pool");
-      this.updateSelectedCards(pool, e.target.checked);
-    });
-    this.live("wje-toggle:change", ".select-card", (e) => {
-      const card = e.target.closest(".card");
-      this.setSelectedCards(e.target.checked, card);
-      if (this.selectedCards.length === 0) {
-        e.target.closest(".pool").querySelector(".select-all-cards").checked = false;
-      }
-      this.setSelectedItems();
+    this.live("wje-toggle:change", ".select-all-cards", (e2) => {
+      const t2 = e2.target.closest(".pool");
+      this.updateSelectedCards(t2, e2.target.checked);
+    }), this.live("wje-toggle:change", ".select-card", (e2) => {
+      const t2 = e2.target.closest(".card");
+      this.setSelectedCards(e2.target.checked, t2), 0 === this.selectedCards.length && (e2.target.closest(".pool").querySelector(".select-all-cards").checked = false), this.setSelectedItems();
     });
   }
-  /**
-   * Sets up the menu item click events for the component.
-   */
   setupMenuItemClickEvents() {
-    this.context.querySelectorAll("wje-menu-item").forEach((menuItem) => {
-      menuItem.removeEventListener("wje-menu-item:click", this.menuItemClickHandler);
-    });
-    this.context.querySelectorAll("wje-menu-item").forEach((menuItem) => {
-      menuItem.addEventListener("wje-menu-item:click", this.menuItemClickHandler);
+    this.context.querySelectorAll("wje-menu-item").forEach((e2) => {
+      e2.removeEventListener("wje-menu-item:click", this.menuItemClickHandler);
+    }), this.context.querySelectorAll("wje-menu-item").forEach((e2) => {
+      e2.addEventListener("wje-menu-item:click", this.menuItemClickHandler);
     });
   }
-  /**
-   * Updates the selected cards in the pool.
-   * @param pool {HTMLElement}
-   * @param isChecked {boolean}
-   */
-  updateSelectedCards(pool, isChecked) {
-    const cards = pool.querySelectorAll(".pool-content .card");
-    cards.forEach((card) => {
-      const checkbox = card.querySelector("wje-checkbox");
-      if (checkbox) {
-        checkbox.checked = isChecked;
-      }
-      this.setSelectedCards(isChecked, card);
-    });
-    this.setSelectedItems();
+  updateSelectedCards(e2, t2) {
+    e2.querySelectorAll(".pool-content .card").forEach((e3) => {
+      const a2 = e3.querySelector("wje-checkbox");
+      a2 && (a2.checked = t2), this.setSelectedCards(t2, e3);
+    }), this.setSelectedItems();
   }
-  /**
-   * Handles the pool action.
-   * @param action {string}
-   * @param pool {HTMLElement}
-   */
-  handlePoolAction(action, pool) {
-    switch (action) {
+  handlePoolAction(e2, t2) {
+    switch (e2) {
       case "move-left":
-        this.movePool(pool, "left");
+        this.movePool(t2, "left");
         break;
       case "move-right":
-        this.movePool(pool, "right");
+        this.movePool(t2, "right");
         break;
       case "rename-pool":
-        this.renamePool(pool);
+        this.renamePool(t2);
         break;
       default:
-        console.error(`Neznáma akcia: ${action}`);
+        console.error(`Neznáma akcia: ${e2}`);
     }
   }
-  /**
-   * Moves the pool in the specified direction.
-   * @param pool {HTMLElement}
-   * @param direction {string}
-   */
-  movePool(pool, direction) {
-    const parent = pool.parentElement;
-    if (direction === "left" && pool.previousElementSibling) {
-      parent.insertBefore(pool, pool.previousElementSibling);
-    } else if (direction === "right" && pool.nextElementSibling) {
-      parent.insertBefore(pool.nextElementSibling, pool);
-    }
-    this.setupMenuItemClickEvents();
+  movePool(e2, t2) {
+    const a2 = e2.parentElement;
+    "left" === t2 && e2.previousElementSibling ? a2.insertBefore(e2, e2.previousElementSibling) : "right" === t2 && e2.nextElementSibling && a2.insertBefore(e2.nextElementSibling, e2), this.setupMenuItemClickEvents();
   }
-  /**
-   * Renames the pool.
-   * @param pool {HTMLElement}
-   */
-  renamePool(pool) {
-    const newName = prompt("Zadajte nový názov pre stĺpec:");
-    if (newName) {
-      const header = pool.querySelector(".pool-header h4");
-      header.innerHTML = `${newName} (<span class="item-count">0</span> položiek)`;
-      this.updateColumnItemCount();
+  renamePool(e2) {
+    const t2 = prompt("Zadajte nový názov pre stĺpec:");
+    if (t2) {
+      e2.querySelector(".pool-header h4").innerHTML = `${t2} (<span class="item-count">0</span> položiek)`, this.updateColumnItemCount();
     }
   }
-  /**
-   * Gets the card placeholder.
-   * @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";
-    } else {
-      this.ui.elCardPlaceholder.style.width = this.draggedElementWidth + "px";
-      this.ui.elCardPlaceholder.style.height = this.draggedElementHeight + "px";
-    }
-    return this.ui.elCardPlaceholder;
-  }
-  /**
-   * Adds a live event listener to the component.
-   * @param eventType {string}
-   * @param selector {string}
-   * @param callback {function}
-   */
-  live(eventType, selector, callback) {
-    const attachListener = (root) => {
-      root.addEventListener(
-        eventType,
-        (e) => {
-          if (e.target.matches(selector)) {
-            callback.call(e.target, e);
-          }
-        },
-        false
-      );
-    };
-    const traverseAndAttach = (root) => {
-      attachListener(root);
-      root.querySelectorAll("*").forEach((node) => {
-        if (node.shadowRoot) {
-          traverseAndAttach(node.shadowRoot);
-        }
+    return this.ui.elCardPlaceholder ? (this.ui.elCardPlaceholder.style.width = this.draggedElementWidth + "px", this.ui.elCardPlaceholder.style.height = this.draggedElementHeight + "px") : (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"), this.ui.elCardPlaceholder;
+  }
+  live(e2, t2, a2) {
+    const r2 = (s) => {
+      ((r3) => {
+        r3.addEventListener(e2, (e3) => {
+          e3.target.matches(t2) && a2.call(e3.target, e3);
+        }, false);
+      })(s), s.querySelectorAll("*").forEach((e3) => {
+        e3.shadowRoot && r2(e3.shadowRoot);
       });
     };
-    traverseAndAttach(this.shadowRoot || this);
+    r2(this.shadowRoot || this);
   }
-  /**
-   * Sets the selected cards.
-   * @param isChecked {boolean}
-   * @param card {HTMLElement}
-   */
-  setSelectedCards(isChecked, card) {
-    if (isChecked) {
-      if (!this.selectedCards.includes(card)) {
-        this.selectedCards.push(card);
-      }
-    } else {
-      this.selectedCards = this.selectedCards.filter((selectedCard) => selectedCard !== card);
-    }
+  setSelectedCards(e2, t2) {
+    e2 ? this.selectedCards.includes(t2) || this.selectedCards.push(t2) : this.selectedCards = this.selectedCards.filter((e3) => e3 !== t2);
   }
-  /**
-   * Sets the selected items.
-   */
   setSelectedItems() {
-    const selectedIds = this.selectedCards.map((card) => card.getAttribute("data-id"));
-    this.selectedItems = this.response.filter((item) => selectedIds.includes(item.id));
+    const e2 = this.selectedCards.map((e3) => e3.getAttribute("data-id"));
+    this.selectedItems = this.response.filter((t2) => e2.includes(t2.id));
   }
-  /**
-   * Fetches the pages.
-   * @param page
-   * @returns {Promise<any>}
-   */
-  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}`
-    );
-    if (!response.ok) {
-      throw new Error(`An error occurred: ${response.status}`);
-    }
-    return await response.json();
+  async getPages(e2 = 0) {
+    let t2 = this.url.includes("?");
+    const a2 = await fetch(`${this.url}${t2 ? "&" : "?"}page=${e2}&size=${this.size}${this == null ? void 0 : this.queryParams}`);
+    if (!a2.ok) throw new Error(`An error occurred: ${a2.status}`);
+    return await a2.json();
   }
-  dispatchEvent(event) {
+  dispatchEvent(e2) {
     return false;
   }
 }
-Kanban.define("wje-kanban", Kanban);
+r.define("wje-kanban", r);
 export {
-  Kanban as default
+  r as default
 };
 //# sourceMappingURL=wje-kanban.js.map