wj-elements 0.7.6 → 0.8.0

package/dist/wje-icon-picker.js

@@ -1,381 +1,126 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement from "./wje-element.js";
-import { getBasePath } from "./base-path.js";
-import InfiniteScroll from "./wje-infinite-scroll.js";
-import Input from "./wje-input.js";
-import Tooltip from "./wje-tooltip.js";
-import { event } from "./event.js";
-const styles = "/*\n[ Wj Icon Picker ]\n*/\n\n:host {\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: var(--wje-icon-picker-shadow);\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-icon-picker-background);\n}\n\n.icon-items {\n    --icon-min-width: 2rem;\n    display: grid;\n    grid-gap: 0.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: 0.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: 0.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}\n";
-class IconPicker extends WJElement {
-  /**
-   * Creates an instance of IconPicker.
-   * @class
-   */
+import e from "./wje-element.js";
+import { getBasePath as t } from "./base-path.js";
+import i from "./wje-infinite-scroll.js";
+import r from "./wje-input.js";
+import s from "./wje-tooltip.js";
+import { event as n } from "./event.js";
+class o extends e {
   constructor() {
     super();
-    /**
-     * Dependencies of the IconPicker component.
-     * @property {object} dependencies
-     */
-    __publicField(this, "dependencies", {
-      "wje-input": Input,
-      "wje-infinite-scroll": InfiniteScroll,
-      "wje-tooltip": Tooltip
-    });
+    __publicField(this, "dependencies", { "wje-input": r, "wje-infinite-scroll": i, "wje-tooltip": s });
     __publicField(this, "className", "IconPicker");
-    /**
-     * Handles the selection of an icon from a given input element and updates the relevant properties and events.
-     * @function selectIcon
-     * @param {HTMLElement} icon The icon element that was selected. It must have a 'name' attribute and may optionally have a 'filled' attribute.
-     * The function performs the following actions:
-     * - Retrieves the name of the selected icon from its 'name' attribute.
-     * - Determines the style type ('filled' or 'outline') based on the presence of the 'filled' attribute.
-     * - Searches for a matching object in the `transformedObjects` array based on name and style.
-     * - Creates a new `wje-icon` element and assigns its attributes based on the selected icon's properties.
-     * - Updates the selected object's properties and assigns it to the `value`, `icon`, and `type` properties of the class.
-     * - Dispatches a custom event (`wje-icon-picker:select`) to signal a change in the selected icon.
-     */
-    __publicField(this, "selectIcon", (icon) => {
+    __publicField(this, "selectIcon", (e2) => {
       var _a, _b;
-      let name = icon.getAttribute("name");
-      let stylesType = icon.hasAttribute("filled") ? "filled" : "outline";
-      let uniqueObject = this.transformedObjects.find(
-        (i) => i.name === name && Object.keys(i.styles)[0] === stylesType
-      );
-      const iconElement = document.createElement("wje-icon");
-      iconElement.setAttribute("name", name);
-      if ((_a = uniqueObject.styles) == null ? void 0 : _a.hasOwnProperty("filled")) iconElement.setAttribute("filled", "");
-      uniqueObject.icon = iconElement;
-      this.value = uniqueObject;
-      this.icon = uniqueObject.name;
-      this.type = ((_b = uniqueObject.styles) == null ? void 0 : _b.hasOwnProperty("filled")) ? "filled" : "outline";
-      event.dispatchCustomEvent(this, "wje-icon-picker:select", uniqueObject);
+      let t2 = e2.getAttribute("name"), i2 = e2.hasAttribute("filled") ? "filled" : "outline", r2 = this.transformedObjects.find((e3) => e3.name === t2 && Object.keys(e3.styles)[0] === i2);
+      const s2 = document.createElement("wje-icon");
+      s2.setAttribute("name", t2), ((_a = r2.styles) == null ? void 0 : _a.hasOwnProperty("filled")) && s2.setAttribute("filled", ""), r2.icon = s2, this.value = r2, this.icon = r2.name, this.type = ((_b = r2.styles) == null ? void 0 : _b.hasOwnProperty("filled")) ? "filled" : "outline", n.dispatchCustomEvent(this, "wje-icon-picker:select", r2);
     });
-    /**
-     * Converts an object of tags into a transformed array of objects, separating `filled` and `outline` styles.
-     * The function processes an input object containing tags, extracts its values,
-     * and for each tag that has both `filled` and `outline` styles, splits them into
-     * two separate objects. Tags without `filled` styles remain unchanged.
-     * @param {object} tags The input object containing tags as properties. Each property is an object with a `styles` key.
-     * @param {object} tags[].styles The styles object containing `filled` and/or `outline` styles.
-     * @param {object} [tags[].styles.outline] The outline style object, if present.
-     * @param {object} [tags[].styles.filled] The filled style object, if present.
-     * @returns {Array<object>} An array of transformed objects. Objects with both `filled` and `outline` styles are split into separate objects, each containing only one style.
-     * @example
-     * const tags = {
-     *     hourglass: {
-     *         styles: {
-     *             outline: { ... },
-     *             filled: { ... },
-     *         }
-     *     },
-     *     clock: {
-     *         styles: {
-     *             outline: { ... },
-     *         }
-     *     }
-     * };
-     * const result = convertObject(tags);
-     * console.log(result);
-     * // [
-     * //   { styles: { outline: { ... } } },
-     * //   { styles: { filled: { ... } } },
-     * //   { styles: { outline: { ... } } }
-     * // ]
-     */
-    __publicField(this, "convertObject", (tags = {}) => {
-      let originalObjects = Object.values(tags);
-      let transformedObjects = [];
-      for (let i = 0; i < originalObjects.length; i++) {
-        const obj = originalObjects[i];
-        if (obj.styles.filled) {
-          transformedObjects.push(
-            { ...obj, styles: { outline: obj.styles.outline } },
-            { ...obj, styles: { filled: obj.styles.filled } }
-          );
-        } else {
-          transformedObjects.push(obj);
-        }
+    __publicField(this, "convertObject", (e2 = {}) => {
+      let t2 = Object.values(e2), i2 = [];
+      for (let e3 = 0; e3 < t2.length; e3++) {
+        const r2 = t2[e3];
+        r2.styles.filled ? i2.push({ ...r2, styles: { outline: r2.styles.outline } }, { ...r2, styles: { filled: r2.styles.filled } }) : i2.push(r2);
       }
-      return transformedObjects;
+      return i2;
     });
-    /**
-     * Converts an icon data object into an HTML element structure.
-     * This function creates a styled HTML element that represents an icon with a tooltip.
-     * The tooltip displays the name of the icon, and the icon itself is styled based on
-     * whether it uses the `filled` style.
-     * @param {object} data The icon data object.
-     * @returns {HTMLElement} A `div` element containing the icon wrapped in a `wje-tooltip`. The tooltip displays the icon name, and the `wje-icon` element represents the icon with attributes set according to the data.
-     * @example
-     * const iconData = {
-     *     name: "hourglass",
-     *     styles: {
-     *         filled: { ... }
-     *     }
-     * };
-     * const htmlElement = dataToHtml(iconData);
-     * document.body.appendChild(htmlElement);
-     *
-     * // The resulting structure:
-     * // <div class="icon-item">
-     * //   <wje-tooltip content="hourglass">
-     * //     <wje-icon name="hourglass" size="large" filled></wje-icon></wje-icon>
-     * //   </wje-tooltip>
-     * // </div>
-     */
-    __publicField(this, "dataToHtml", (data) => {
-      let iconItem = document.createElement("div");
-      iconItem.classList.add("icon-item");
-      let tooltip = document.createElement("wje-tooltip");
-      tooltip.setAttribute("content", data.name);
-      let icon = document.createElement("wje-icon");
-      icon.setAttribute("name", data.name);
-      icon.setAttribute("size", "large");
-      if (data.styles.hasOwnProperty("filled")) icon.setAttribute("filled", "");
-      tooltip.appendChild(icon);
-      iconItem.appendChild(tooltip);
-      return iconItem;
+    __publicField(this, "dataToHtml", (e2) => {
+      let t2 = document.createElement("div");
+      t2.classList.add("icon-item");
+      let i2 = document.createElement("wje-tooltip");
+      i2.setAttribute("content", e2.name);
+      let r2 = document.createElement("wje-icon");
+      return r2.setAttribute("name", e2.name), r2.setAttribute("size", "large"), e2.styles.hasOwnProperty("filled") && r2.setAttribute("filled", ""), i2.appendChild(r2), t2.appendChild(i2), t2;
     });
-    /**
-     * Searches icons based on user input.
-     * This method handles the input event and filters the available icons based on the provided search string.
-     * The filtering is performed on an index that combines icon names and their tags.
-     * The results are then adjusted for infinite scrolling.
-     * @param {Event} e The input event (e.g., `wje-input:input`) containing the search query details.
-     */
-    __publicField(this, "searchIcon", (e) => {
+    __publicField(this, "searchIcon", (e2) => {
       var _a;
-      const query = !((_a = e.detail) == null ? void 0 : _a.value) ? "" : e.detail.value.toLowerCase();
-      const results = this.index.filter((item) => item.searchText.includes(query));
-      if (results.length === 0) {
+      const t2 = ((_a = e2.detail) == null ? void 0 : _a.value) ? e2.detail.value.toLowerCase() : "", i2 = this.index.filter((e3) => e3.searchText.includes(t2));
+      if (0 === i2.length) {
         this.clearIconsContainer();
-        const noResultsDiv = document.createElement("div");
-        noResultsDiv.setAttribute("part", "no-results");
-        noResultsDiv.classList.add("no-results");
-        noResultsDiv.textContent = "No icons found";
-        this.infiniteScroll.querySelector(".icon-items").append(noResultsDiv);
-        return;
+        const e3 = document.createElement("div");
+        return e3.setAttribute("part", "no-results"), e3.classList.add("no-results"), e3.textContent = "No icons found", void this.infiniteScroll.querySelector(".icon-items").append(e3);
       }
-      this.infiniteScroll.unScrollEvent();
-      this.infiniteScroll.setCustomData = (page = 0) => {
-        const data = results.slice(page * this.size, page * this.size + this.size);
-        return {
-          data,
-          page,
-          size: this.size,
-          totalPages: Math.ceil(results.length / this.size)
-        };
-      };
-      this.infiniteScroll.reset();
-      this.infiniteScroll.scrollEvent();
-      this.infiniteScroll.loadPages(0);
+      this.infiniteScroll.unScrollEvent(), this.infiniteScroll.setCustomData = (e3 = 0) => ({ data: i2.slice(e3 * this.size, e3 * this.size + this.size), page: e3, size: this.size, totalPages: Math.ceil(i2.length / this.size) }), this.infiniteScroll.reset(), this.infiniteScroll.scrollEvent(), this.infiniteScroll.loadPages(0);
     });
   }
-  /**
-   * Setter for the markerPosition property.
-   * @param {any} value The value to set.
-   */
-  set size(value) {
-    this.setAttribute("size", value);
+  set size(e2) {
+    this.setAttribute("size", e2);
   }
-  /**
-   * Getter for the markerPosition property.
-   * @returns {any} size The value of the markerPosition property.
-   */
   get size() {
     return this.getAttribute("size") || 60;
   }
-  /**
-   * Setter for the value property.
-   * @param value
-   */
-  set icon(value) {
-    this.setAttribute("icon", value);
+  set icon(e2) {
+    this.setAttribute("icon", e2);
   }
-  /**
-   * Getter for the value property.
-   * @returns {string}
-   */
   get icon() {
     return this.getAttribute("icon");
   }
-  /**
-   * Setter for the value property.
-   * @param value
-   */
-  set type(value) {
-    this.setAttribute("type", value);
+  set type(e2) {
+    this.setAttribute("type", e2);
   }
-  /**
-   * Getter for the value property.
-   * @returns {string}
-   */
   get type() {
     return this.getAttribute("type");
   }
-  /**
-   * Returns the CSS styles for the component.
-   * @static
-   * @returns {CSSStyleSheet}
-   */
   static get cssStyleSheet() {
-    return styles;
+    return ".anchor{width:var(--wje-icon-picker-icon-size);height:var(--wje-icon-picker-icon-size);padding:var(--wje-icon-picker-padding);border-width:var(--wje-icon-picker-border-width);border-style:var(--wje-icon-picker-border-style);border-color:var(--wje-icon-picker-border-color);box-sizing:border-box;border-radius:var(--wje-icon-picker-radius)}.picker{width:320px;height:271px;box-shadow:var(--wje-icon-picker-shadow);border-radius:var(--wje-icon-picker-radius);border-width:var(--wje-icon-picker-border-width);border-style:var(--wje-icon-picker-border-style);border-color:var(--wje-icon-picker-border-color);overflow:auto;padding:1rem;background:var(--wje-icon-picker-background)}.icon-items{--icon-min-width: 2rem;display:grid;grid-gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(var(--icon-min-width),1fr))}.icon-item{box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;color:inherit;padding:.25rem;min-height:var(--wje-icon-picker-icon-size);min-width:var(--wje-icon-picker-icon-size);text-decoration:none}.icon-item:hover{border-radius:.25rem;background:var(--wje-border-color)}.wje-size{--wje-icon-size: 24px !important}icon-item svg{width:var(--wje-icon-picker-icon-size);height:var(--wje-icon-picker-icon-size)}wje-input{--wje-input-border-radius: 4px;--wje-input-margin-bottom: 0}wje-infinite-scroll{margin-top:1rem}wje-select{--wje-select-border-width: 0 0 1px 0 !important;--wje-select-border-radius: 0 !important;margin-bottom:1rem}.anchor wje-icon{--wje-icon-size: 100% !important}";
   }
-  /**
-   * 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 data before the draw operation by fetching tags, transforming objects, and creating an index.
-   * @returns {Promise<void>} Resolves when data preparation is complete.
-   */
   async beforeDraw() {
-    this.tags = Object.values(await this.getTags());
-    this.transformedObjects = this.convertObject(this.tags);
-    this.index = this.transformedObjects.map((item) => ({
-      ...item,
-      searchText: `${item.name.toLowerCase()} ${item.tags.join(" ").toLowerCase()}`
-    }));
+    this.tags = Object.values(await this.getTags()), this.transformedObjects = this.convertObject(this.tags), this.index = this.transformedObjects.map((e2) => ({ ...e2, searchText: `${e2.name.toLowerCase()} ${e2.tags.join(" ").toLowerCase()}` }));
   }
-  /**
-   * Draws and initializes the native color picker component on the DOM.
-   * This method creates and appends the necessary elements, including input and infinite scroll components,
-   * and sets their attributes and event listeners. It also provides custom data handling for infinite scrolling
-   * and manages the way icons are displayed based on input.
-   * @returns {DocumentFragment} A document fragment containing the fully constructed color picker component.
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    native.classList.add("native-color-picker");
-    if (this.hasAttribute("icon") && this.icon) {
-      let icon = document.createElement("wje-icon");
-      icon.setAttribute("name", this.icon);
-      if (this.type === "filled")
-        icon.setAttribute("filled", "");
-      this.selectIcon(icon);
+    let e2 = document.createDocumentFragment(), r2 = document.createElement("div");
+    if (r2.classList.add("native-color-picker"), this.hasAttribute("icon") && this.icon) {
+      let e3 = document.createElement("wje-icon");
+      e3.setAttribute("name", this.icon), "filled" === this.type && e3.setAttribute("filled", ""), this.selectIcon(e3);
     }
-    let picker = document.createElement("div");
-    picker.classList.add("picker");
-    let input = document.createElement("wje-input");
-    input.classList.add("input");
-    input.setAttribute("variant", "standard");
-    input.setAttribute("placeholder", "type to filter...");
-    input.setAttribute("clearable", "");
-    input.addEventListener("wje-input:input", this.debounce(this.searchIcon.bind(this), 300));
-    input.addEventListener("wje-input:clear", this.searchIcon);
-    let infiniteScroll = new InfiniteScroll();
-    infiniteScroll.setAttribute("url", getBasePath("assets/tags.json"));
-    infiniteScroll.setAttribute("placement", ".icon-items");
-    infiniteScroll.setAttribute("size", this.size);
-    infiniteScroll.setAttribute("height", "223px");
-    infiniteScroll.innerHTML = '<div class="icon-items"></div>';
-    picker.append(input, infiniteScroll);
-    native.append(picker);
-    fragment.append(native);
-    this.input = input;
-    this.picker = picker;
-    this.infiniteScroll = infiniteScroll;
-    this.infiniteScroll.dataToHtml = this.dataToHtml;
-    this.infiniteScroll.compareFunction = (i, item) => i.name === item.name;
-    this.infiniteScroll.setCustomData = (page = 0) => {
-      return {
-        data: this.transformedObjects.slice(page * this.size, page * this.size + this.size),
-        page,
-        size: this.size,
-        totalPages: Math.round(this.transformedObjects.length / this.size)
-      };
-    };
-    return fragment;
+    let s2 = document.createElement("div");
+    s2.classList.add("picker");
+    let n2 = document.createElement("wje-input");
+    n2.classList.add("input"), n2.setAttribute("variant", "standard"), n2.setAttribute("placeholder", "type to filter..."), n2.setAttribute("clearable", ""), n2.addEventListener("wje-input:input", this.debounce(this.searchIcon.bind(this), 300)), n2.addEventListener("wje-input:clear", this.searchIcon);
+    let o2 = new i();
+    return o2.setAttribute("url", t("assets/tags.json")), o2.setAttribute("placement", ".icon-items"), o2.setAttribute("size", this.size), o2.setAttribute("height", "223px"), o2.innerHTML = '<div class="icon-items"></div>', s2.append(n2, o2), r2.append(s2), e2.append(r2), this.input = n2, this.picker = s2, this.infiniteScroll = o2, this.infiniteScroll.dataToHtml = this.dataToHtml, this.infiniteScroll.compareFunction = (e3, t2) => e3.name === t2.name, this.infiniteScroll.setCustomData = (e3 = 0) => ({ data: this.transformedObjects.slice(e3 * this.size, e3 * this.size + this.size), page: e3, size: this.size, totalPages: Math.round(this.transformedObjects.length / this.size) }), e2;
   }
-  /**
-   * Executes actions that occur after the component finishes its draw phase. Sets up event listeners for input clear
-   * and infinite scroll item clicks, resets initialization state, and rebinds scroll-related events.
-   * @returns {void} Does not return a value.
-   */
   afterDraw() {
-    this.syncAria();
-    this.addEventListener("wje-input:clear", () => {
-      this.clearIconsContainer();
-      this.infiniteScroll.scrollEvent();
-      this.infiniteScroll.loadPages(0);
-    });
-    this.addEventListener("wje-infinite-scroll:click-item", (e) => {
-      e.preventDefault();
-      e.stopImmediatePropagation();
-      this.selectIcon(e.detail.context.querySelector("wje-icon"));
-    });
-    this.init = false;
+    this.syncAria(), this.addEventListener("wje-input:clear", () => {
+      this.clearIconsContainer(), this.infiniteScroll.scrollEvent(), this.infiniteScroll.loadPages(0);
+    }), this.addEventListener("wje-infinite-scroll:click-item", (e2) => {
+      e2.preventDefault(), e2.stopImmediatePropagation(), this.selectIcon(e2.detail.context.querySelector("wje-icon"));
+    }), this.init = false;
   }
-  /**
-   * Sync ARIA attributes on host.
-   */
   syncAria() {
-    if (!this.hasAttribute("role")) {
-      this.setAriaState({ role: "group" });
-    }
-    const ariaLabel = this.getAttribute("aria-label");
-    const label = this.getAttribute("label");
-    if (!ariaLabel && label) {
-      this.setAriaState({ label });
-    }
+    this.hasAttribute("role") || this.setAriaState({ role: "group" });
+    const e2 = this.getAttribute("aria-label"), t2 = this.getAttribute("label");
+    !e2 && t2 && this.setAriaState({ label: t2 });
   }
-  /**
-   * Initializes the component.
-   */
   initial() {
     this.infiniteScroll.scrollEvent();
   }
-  /**
-   * Gets the tags.
-   * @returns {Promise<Array>} The tags of the component.
-   */
   async getTags() {
-    const response = await fetch(getBasePath("assets/tags.json"));
-    return response.json();
+    return (await fetch(t("assets/tags.json"))).json();
   }
-  /**
-   * Called when the component is disconnected.
-   */
   beforeDisconnect() {
     this.init = false;
   }
-  /**
-   * Clears the icons container.
-   */
   clearIconsContainer() {
     this.context.querySelector(".icon-items").innerHTML = "";
   }
-  /**
-   * Creates a debounced version of the provided function that delays its execution
-   * until after the specified delay has passed since the last time it was invoked.
-   * @param {Function} fn The function to debounce.
-   * @param {number} delay The delay duration in milliseconds.
-   * @returns {Function} A new debounced function that delays the execution of the original function.
-   */
-  debounce(fn, delay) {
-    let timeout;
-    return (...args) => {
-      clearTimeout(timeout);
-      timeout = setTimeout(() => fn(...args), delay);
+  debounce(e2, t2) {
+    let i2;
+    return (...r2) => {
+      clearTimeout(i2), i2 = setTimeout(() => e2(...r2), t2);
     };
   }
 }
-IconPicker.define("wje-icon-picker", IconPicker);
+o.define("wje-icon-picker", o);
 export {
-  IconPicker as default
+  o as default
 };
 //# sourceMappingURL=wje-icon-picker.js.map

package/dist/wje-icon-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-icon-picker.js","sources":["../packages/wje-icon-picker/icon-picker.element.js","../packages/wje-icon-picker/icon-picker.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport { getBasePath } from \"../utils/base-path.js\";\nimport InfiniteScroll from '../wje-infinite-scroll/infinite-scroll.js';\nimport Input from '../wje-input/input.js';\nimport Tooltip from '../wje-tooltip/tooltip.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element allows users to pick an icon from a set of available options.\n * `IconPicker` is a custom web component that represents an interactive icon picker. It features\n * search functionality, infinite scrolling, and popup-based selection. The component is highly customizable\n * and integrates seamlessly with other `WJElement` components.\n * @documentation https://elements.webjet.sk/components/icon-picker\n * @status stable\n * @augments {WJElement}\n * @attribute {string} icon - The selected icon's name.\n * @attribute {number} size - The number of icons displayed per page in infinite scroll. Default is 60.\n * @csspart native - The native part of the component.\n * @csspart anchor - The part representing the anchor button displaying the selected icon.\n * @csspart picker - The picker part containing the search and icon selection interface.\n * @csspart input - The input part for searching icons.\n * @cssproperty [--wje-color-picker-value=#ff0000] - The default color value.\n * @cssproperty [--wje-color-picker-area=transparent] - The background color of the color picker area.\n * @cssproperty [--wje-color-picker-swatch=transparent] - The background color of the swatch picker.\n * @cssproperty [--wje-color-picker-size=1rem] - The size of the icons in the picker.\n * @cssproperty [--wje-color-picker-radius=4px] - The border radius of the picker.\n * @tag wje-icon-picker\n */\n\nexport default class IconPicker extends WJElement {\n    /**\n     * Creates an instance of IconPicker.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Dependencies of the IconPicker component.\n     * @property {object} dependencies\n     */\n    dependencies = {\n        'wje-input': Input,\n        'wje-infinite-scroll': InfiniteScroll,\n        'wje-tooltip': Tooltip\n    };\n\n    /**\n     * Setter for the markerPosition property.\n     * @param {any} value The value to set.\n     */\n    set size(value) {\n        this.setAttribute('size', value);\n    }\n\n    /**\n     * Getter for the markerPosition property.\n     * @returns {any} size The value of the markerPosition property.\n     */\n    get size() {\n        return this.getAttribute('size') || 60;\n    }\n\n    /**\n     * Setter for the value property.\n     * @param value\n     */\n    set icon(value) {\n        this.setAttribute('icon', value);\n    }\n\n    /**\n     * Getter for the value property.\n     * @returns {string}\n     */\n    get icon() {\n        return this.getAttribute('icon');\n    }\n\n    /**\n     * Setter for the value property.\n     * @param value\n     */\n    set type(value) {\n        this.setAttribute('type', value);\n    }\n\n    /**\n     * Getter for the value property.\n     * @returns {string}\n     */\n    get type() {\n        return this.getAttribute('type');\n    }\n\n    className = 'IconPicker';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    /**\n     * Prepares data before the draw operation by fetching tags, transforming objects, and creating an index.\n     * @returns {Promise<void>} Resolves when data preparation is complete.\n     */\n    async beforeDraw() {\n        this.tags = Object.values(await this.getTags());\n\n        this.transformedObjects = this.convertObject(this.tags);\n\n        this.index = this.transformedObjects.map((item) => ({\n            ...item,\n            searchText: `${item.name.toLowerCase()} ${item.tags.join(' ').toLowerCase()}`,\n        }));\n    }\n\n    /**\n     * Draws and initializes the native color picker component on the DOM.\n     * This method creates and appends the necessary elements, including input and infinite scroll components,\n     * and sets their attributes and event listeners. It also provides custom data handling for infinite scrolling\n     * and manages the way icons are displayed based on input.\n     * @returns {DocumentFragment} A document fragment containing the fully constructed color picker component.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-color-picker');\n\n        if (this.hasAttribute('icon') && this.icon) {\n\n            let icon = document.createElement('wje-icon');\n            icon.setAttribute('name', this.icon);\n            if(this.type === 'filled')\n                icon.setAttribute('filled', '');\n\n            this.selectIcon(icon);\n        }\n\n        // PICKER\n        let picker = document.createElement('div');\n        picker.classList.add('picker');\n\n        let input = document.createElement('wje-input');\n        input.classList.add('input');\n        input.setAttribute('variant', 'standard');\n        input.setAttribute('placeholder', 'type to filter...');\n        input.setAttribute('clearable', '');\n        input.addEventListener('wje-input:input', this.debounce(this.searchIcon.bind(this), 300));\n        input.addEventListener('wje-input:clear', this.searchIcon);\n\n        let infiniteScroll = new InfiniteScroll();\n        infiniteScroll.setAttribute('url', getBasePath('assets/tags.json'));\n        infiniteScroll.setAttribute('placement', '.icon-items');\n        infiniteScroll.setAttribute('size', this.size);\n        infiniteScroll.setAttribute('height', '223px');\n        infiniteScroll.innerHTML = '<div class=\"icon-items\"></div>';\n\n        // APPEND\n        picker.append(input, infiniteScroll);\n\n        native.append(picker);\n\n        fragment.append(native);\n\n        this.input = input;\n        this.picker = picker;\n        this.infiniteScroll = infiniteScroll;\n\n        this.infiniteScroll.dataToHtml = this.dataToHtml;\n        this.infiniteScroll.compareFunction = (i, item) => i.name === item.name;\n        this.infiniteScroll.setCustomData = (page = 0) => {\n            return {\n                data: this.transformedObjects.slice(page * this.size, page * this.size + this.size),\n                page: page,\n                size: this.size,\n                totalPages: Math.round(this.transformedObjects.length / this.size),\n            };\n        };\n\n        return fragment;\n    }\n\n    /**\n     * Executes actions that occur after the component finishes its draw phase. Sets up event listeners for input clear\n     * and infinite scroll item clicks, resets initialization state, and rebinds scroll-related events.\n     * @returns {void} Does not return a value.\n     */\n    afterDraw() {\n        this.syncAria();\n\n        // udalost po vymazani inputu\n        this.addEventListener('wje-input:clear', () => {\n            this.clearIconsContainer(); // clear icons container\n            this.infiniteScroll.scrollEvent(); // bind scroll event\n            this.infiniteScroll.loadPages(0); // load first page\n        });\n\n        this.addEventListener('wje-infinite-scroll:click-item', (e) => {\n            e.preventDefault();\n            e.stopImmediatePropagation();\n\n            this.selectIcon(e.detail.context.querySelector('wje-icon'));\n        });\n\n        this.init = false;\n    }\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        if (!this.hasAttribute('role')) {\n            this.setAriaState({ role: 'group' });\n        }\n\n        const ariaLabel = this.getAttribute('aria-label');\n        const label = this.getAttribute('label');\n        if (!ariaLabel && label) {\n            this.setAriaState({ label });\n        }\n    }\n\n    /**\n     * Handles the selection of an icon from a given input element and updates the relevant properties and events.\n     * @function selectIcon\n     * @param {HTMLElement} icon The icon element that was selected. It must have a 'name' attribute and may optionally have a 'filled' attribute.\n     * The function performs the following actions:\n     * - Retrieves the name of the selected icon from its 'name' attribute.\n     * - Determines the style type ('filled' or 'outline') based on the presence of the 'filled' attribute.\n     * - Searches for a matching object in the `transformedObjects` array based on name and style.\n     * - Creates a new `wje-icon` element and assigns its attributes based on the selected icon's properties.\n     * - Updates the selected object's properties and assigns it to the `value`, `icon`, and `type` properties of the class.\n     * - Dispatches a custom event (`wje-icon-picker:select`) to signal a change in the selected icon.\n     */\n    selectIcon = (icon) => {\n        let name = icon.getAttribute('name');\n        let stylesType = icon.hasAttribute('filled') ? 'filled' : 'outline';\n        let uniqueObject = this.transformedObjects.find(\n          (i) => i.name === name && Object.keys(i.styles)[0] === stylesType\n        );\n\n        const iconElement = document.createElement('wje-icon');\n        iconElement.setAttribute('name', name);\n\n        if (uniqueObject.styles?.hasOwnProperty('filled')) iconElement.setAttribute('filled', '');\n\n        uniqueObject.icon = iconElement;\n\n        this.value = uniqueObject;\n        this.icon = uniqueObject.name;\n        this.type = uniqueObject.styles?.hasOwnProperty('filled') ? 'filled' : 'outline';\n\n        event.dispatchCustomEvent(this, 'wje-icon-picker:select', uniqueObject); // odpalenie custom eventu\n    }\n\n    /**\n     * Initializes the component.\n     */\n    initial() {\n        this.infiniteScroll.scrollEvent();\n    }\n\n    /**\n     * Converts an object of tags into a transformed array of objects, separating `filled` and `outline` styles.\n     * The function processes an input object containing tags, extracts its values,\n     * and for each tag that has both `filled` and `outline` styles, splits them into\n     * two separate objects. Tags without `filled` styles remain unchanged.\n     * @param {object} tags The input object containing tags as properties. Each property is an object with a `styles` key.\n     * @param {object} tags[].styles The styles object containing `filled` and/or `outline` styles.\n     * @param {object} [tags[].styles.outline] The outline style object, if present.\n     * @param {object} [tags[].styles.filled] The filled style object, if present.\n     * @returns {Array<object>} An array of transformed objects. Objects with both `filled` and `outline` styles are split into separate objects, each containing only one style.\n     * @example\n     * const tags = {\n     *     hourglass: {\n     *         styles: {\n     *             outline: { ... },\n     *             filled: { ... },\n     *         }\n     *     },\n     *     clock: {\n     *         styles: {\n     *             outline: { ... },\n     *         }\n     *     }\n     * };\n     * const result = convertObject(tags);\n     * console.log(result);\n     * // [\n     * //   { styles: { outline: { ... } } },\n     * //   { styles: { filled: { ... } } },\n     * //   { styles: { outline: { ... } } }\n     * // ]\n     */\n    convertObject = (tags = {}) => {\n        let originalObjects = Object.values(tags);\n        let transformedObjects = [];\n        for (let i = 0; i < originalObjects.length; i++) {\n            const obj = originalObjects[i];\n            if (obj.styles.filled) {\n                transformedObjects.push(\n                    { ...obj, styles: { outline: obj.styles.outline } },\n                    { ...obj, styles: { filled: obj.styles.filled } }\n                );\n            } else {\n                transformedObjects.push(obj);\n            }\n        }\n\n        return transformedObjects;\n    };\n\n    /**\n     * Converts an icon data object into an HTML element structure.\n     * This function creates a styled HTML element that represents an icon with a tooltip.\n     * The tooltip displays the name of the icon, and the icon itself is styled based on\n     * whether it uses the `filled` style.\n     * @param {object} data The icon data object.\n     * @returns {HTMLElement} A `div` element containing the icon wrapped in a `wje-tooltip`. The tooltip displays the icon name, and the `wje-icon` element represents the icon with attributes set according to the data.\n     * @example\n     * const iconData = {\n     *     name: \"hourglass\",\n     *     styles: {\n     *         filled: { ... }\n     *     }\n     * };\n     * const htmlElement = dataToHtml(iconData);\n     * document.body.appendChild(htmlElement);\n     *\n     * // The resulting structure:\n     * // <div class=\"icon-item\">\n     * //   <wje-tooltip content=\"hourglass\">\n     * //     <wje-icon name=\"hourglass\" size=\"large\" filled></wje-icon></wje-icon>\n     * //   </wje-tooltip>\n     * // </div>\n     */\n    dataToHtml = (data) => {\n        let iconItem = document.createElement('div');\n        iconItem.classList.add('icon-item');\n\n        let tooltip = document.createElement('wje-tooltip');\n        tooltip.setAttribute('content', data.name);\n\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', data.name);\n        icon.setAttribute('size', 'large');\n        if (data.styles.hasOwnProperty('filled')) icon.setAttribute('filled', '');\n\n        tooltip.appendChild(icon);\n        iconItem.appendChild(tooltip);\n\n        return iconItem;\n    };\n\n    /**\n     * Gets the tags.\n     * @returns {Promise<Array>} The tags of the component.\n     */\n    async getTags() {\n        const response = await fetch(getBasePath('assets/tags.json'));\n        return response.json();\n    }\n\n    /**\n     * Called when the component is disconnected.\n     */\n    beforeDisconnect() {\n        this.init = false;\n    }\n\n    /**\n     * Searches icons based on user input.\n     * This method handles the input event and filters the available icons based on the provided search string.\n     * The filtering is performed on an index that combines icon names and their tags.\n     * The results are then adjusted for infinite scrolling.\n     * @param {Event} e The input event (e.g., `wje-input:input`) containing the search query details.\n     */\n    searchIcon = (e) => {\n        const query = !e.detail?.value ? \"\" : e.detail.value.toLowerCase();\n        const results = this.index.filter((item) => item.searchText.includes(query));\n\n        if (results.length === 0) {\n            this.clearIconsContainer();\n\n            const noResultsDiv = document.createElement('div');\n            noResultsDiv.setAttribute('part', 'no-results');\n            noResultsDiv.classList.add('no-results');\n            noResultsDiv.textContent = 'No icons found';\n\n            this.infiniteScroll.querySelector('.icon-items').append(noResultsDiv);\n\n            return;\n        }\n\n        this.infiniteScroll.unScrollEvent();\n        this.infiniteScroll.setCustomData = (page = 0) => {\n            const data = results.slice(page * this.size, page * this.size + this.size);\n\n            return {\n                data: data,\n                page: page,\n                size: this.size,\n                totalPages: Math.ceil(results.length / this.size),\n            };\n        };\n\n        this.infiniteScroll.reset();\n        this.infiniteScroll.scrollEvent();\n        this.infiniteScroll.loadPages(0);\n    }\n\n    /**\n     * Clears the icons container.\n     */\n    clearIconsContainer() {\n        this.context.querySelector('.icon-items').innerHTML = '';\n    }\n\n    /**\n     * Creates a debounced version of the provided function that delays its execution\n     * until after the specified delay has passed since the last time it was invoked.\n     * @param {Function} fn The function to debounce.\n     * @param {number} delay The delay duration in milliseconds.\n     * @returns {Function} A new debounced function that delays the execution of the original function.\n     */\n    debounce(fn, delay) {\n        let timeout;\n        return (...args) => {\n            clearTimeout(timeout);\n            timeout = setTimeout(() => fn(...args), delay);\n        };\n    }\n}\n","import IconPicker from './icon-picker.element.js';\n\nexport default IconPicker;\n\nIconPicker.define('wje-icon-picker', IconPicker);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-icon-picker.js","sources":["../packages/wje-icon-picker/icon-picker.element.js","../packages/wje-icon-picker/icon-picker.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport { getBasePath } from \"../utils/base-path.js\";\nimport InfiniteScroll from '../wje-infinite-scroll/infinite-scroll.js';\nimport Input from '../wje-input/input.js';\nimport Tooltip from '../wje-tooltip/tooltip.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element allows users to pick an icon from a set of available options.\n * `IconPicker` is a custom web component that represents an interactive icon picker. It features\n * search functionality, infinite scrolling, and popup-based selection. The component is highly customizable\n * and integrates seamlessly with other `WJElement` components.\n * @documentation https://elements.webjet.sk/components/icon-picker\n * @status stable\n * @augments {WJElement}\n * @attribute {string} icon - The selected icon's name.\n * @attribute {number} size - The number of icons displayed per page in infinite scroll. Default is 60.\n * @csspart native - The native part of the component.\n * @csspart anchor - The part representing the anchor button displaying the selected icon.\n * @csspart picker - The picker part containing the search and icon selection interface.\n * @csspart input - The input part for searching icons.\n * @cssproperty [--wje-color-picker-value=#ff0000] - The default color value.\n * @cssproperty [--wje-color-picker-area=transparent] - The background color of the color picker area.\n * @cssproperty [--wje-color-picker-swatch=transparent] - The background color of the swatch picker.\n * @cssproperty [--wje-color-picker-size=1rem] - The size of the icons in the picker.\n * @cssproperty [--wje-color-picker-radius=4px] - The border radius of the picker.\n * @tag wje-icon-picker\n */\n\nexport default class IconPicker extends WJElement {\n    /**\n     * Creates an instance of IconPicker.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Dependencies of the IconPicker component.\n     * @property {object} dependencies\n     */\n    dependencies = {\n        'wje-input': Input,\n        'wje-infinite-scroll': InfiniteScroll,\n        'wje-tooltip': Tooltip\n    };\n\n    /**\n     * Setter for the markerPosition property.\n     * @param {any} value The value to set.\n     */\n    set size(value) {\n        this.setAttribute('size', value);\n    }\n\n    /**\n     * Getter for the markerPosition property.\n     * @returns {any} size The value of the markerPosition property.\n     */\n    get size() {\n        return this.getAttribute('size') || 60;\n    }\n\n    /**\n     * Setter for the value property.\n     * @param value\n     */\n    set icon(value) {\n        this.setAttribute('icon', value);\n    }\n\n    /**\n     * Getter for the value property.\n     * @returns {string}\n     */\n    get icon() {\n        return this.getAttribute('icon');\n    }\n\n    /**\n     * Setter for the value property.\n     * @param value\n     */\n    set type(value) {\n        this.setAttribute('type', value);\n    }\n\n    /**\n     * Getter for the value property.\n     * @returns {string}\n     */\n    get type() {\n        return this.getAttribute('type');\n    }\n\n    className = 'IconPicker';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    /**\n     * Prepares data before the draw operation by fetching tags, transforming objects, and creating an index.\n     * @returns {Promise<void>} Resolves when data preparation is complete.\n     */\n    async beforeDraw() {\n        this.tags = Object.values(await this.getTags());\n\n        this.transformedObjects = this.convertObject(this.tags);\n\n        this.index = this.transformedObjects.map((item) => ({\n            ...item,\n            searchText: `${item.name.toLowerCase()} ${item.tags.join(' ').toLowerCase()}`,\n        }));\n    }\n\n    /**\n     * Draws and initializes the native color picker component on the DOM.\n     * This method creates and appends the necessary elements, including input and infinite scroll components,\n     * and sets their attributes and event listeners. It also provides custom data handling for infinite scrolling\n     * and manages the way icons are displayed based on input.\n     * @returns {DocumentFragment} A document fragment containing the fully constructed color picker component.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-color-picker');\n\n        if (this.hasAttribute('icon') && this.icon) {\n\n            let icon = document.createElement('wje-icon');\n            icon.setAttribute('name', this.icon);\n            if(this.type === 'filled')\n                icon.setAttribute('filled', '');\n\n            this.selectIcon(icon);\n        }\n\n        // PICKER\n        let picker = document.createElement('div');\n        picker.classList.add('picker');\n\n        let input = document.createElement('wje-input');\n        input.classList.add('input');\n        input.setAttribute('variant', 'standard');\n        input.setAttribute('placeholder', 'type to filter...');\n        input.setAttribute('clearable', '');\n        input.addEventListener('wje-input:input', this.debounce(this.searchIcon.bind(this), 300));\n        input.addEventListener('wje-input:clear', this.searchIcon);\n\n        let infiniteScroll = new InfiniteScroll();\n        infiniteScroll.setAttribute('url', getBasePath('assets/tags.json'));\n        infiniteScroll.setAttribute('placement', '.icon-items');\n        infiniteScroll.setAttribute('size', this.size);\n        infiniteScroll.setAttribute('height', '223px');\n        infiniteScroll.innerHTML = '<div class=\"icon-items\"></div>';\n\n        // APPEND\n        picker.append(input, infiniteScroll);\n\n        native.append(picker);\n\n        fragment.append(native);\n\n        this.input = input;\n        this.picker = picker;\n        this.infiniteScroll = infiniteScroll;\n\n        this.infiniteScroll.dataToHtml = this.dataToHtml;\n        this.infiniteScroll.compareFunction = (i, item) => i.name === item.name;\n        this.infiniteScroll.setCustomData = (page = 0) => {\n            return {\n                data: this.transformedObjects.slice(page * this.size, page * this.size + this.size),\n                page: page,\n                size: this.size,\n                totalPages: Math.round(this.transformedObjects.length / this.size),\n            };\n        };\n\n        return fragment;\n    }\n\n    /**\n     * Executes actions that occur after the component finishes its draw phase. Sets up event listeners for input clear\n     * and infinite scroll item clicks, resets initialization state, and rebinds scroll-related events.\n     * @returns {void} Does not return a value.\n     */\n    afterDraw() {\n        this.syncAria();\n\n        // udalost po vymazani inputu\n        this.addEventListener('wje-input:clear', () => {\n            this.clearIconsContainer(); // clear icons container\n            this.infiniteScroll.scrollEvent(); // bind scroll event\n            this.infiniteScroll.loadPages(0); // load first page\n        });\n\n        this.addEventListener('wje-infinite-scroll:click-item', (e) => {\n            e.preventDefault();\n            e.stopImmediatePropagation();\n\n            this.selectIcon(e.detail.context.querySelector('wje-icon'));\n        });\n\n        this.init = false;\n    }\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        if (!this.hasAttribute('role')) {\n            this.setAriaState({ role: 'group' });\n        }\n\n        const ariaLabel = this.getAttribute('aria-label');\n        const label = this.getAttribute('label');\n        if (!ariaLabel && label) {\n            this.setAriaState({ label });\n        }\n    }\n\n    /**\n     * Handles the selection of an icon from a given input element and updates the relevant properties and events.\n     * @function selectIcon\n     * @param {HTMLElement} icon The icon element that was selected. It must have a 'name' attribute and may optionally have a 'filled' attribute.\n     * The function performs the following actions:\n     * - Retrieves the name of the selected icon from its 'name' attribute.\n     * - Determines the style type ('filled' or 'outline') based on the presence of the 'filled' attribute.\n     * - Searches for a matching object in the `transformedObjects` array based on name and style.\n     * - Creates a new `wje-icon` element and assigns its attributes based on the selected icon's properties.\n     * - Updates the selected object's properties and assigns it to the `value`, `icon`, and `type` properties of the class.\n     * - Dispatches a custom event (`wje-icon-picker:select`) to signal a change in the selected icon.\n     */\n    selectIcon = (icon) => {\n        let name = icon.getAttribute('name');\n        let stylesType = icon.hasAttribute('filled') ? 'filled' : 'outline';\n        let uniqueObject = this.transformedObjects.find(\n          (i) => i.name === name && Object.keys(i.styles)[0] === stylesType\n        );\n\n        const iconElement = document.createElement('wje-icon');\n        iconElement.setAttribute('name', name);\n\n        if (uniqueObject.styles?.hasOwnProperty('filled')) iconElement.setAttribute('filled', '');\n\n        uniqueObject.icon = iconElement;\n\n        this.value = uniqueObject;\n        this.icon = uniqueObject.name;\n        this.type = uniqueObject.styles?.hasOwnProperty('filled') ? 'filled' : 'outline';\n\n        event.dispatchCustomEvent(this, 'wje-icon-picker:select', uniqueObject); // odpalenie custom eventu\n    }\n\n    /**\n     * Initializes the component.\n     */\n    initial() {\n        this.infiniteScroll.scrollEvent();\n    }\n\n    /**\n     * Converts an object of tags into a transformed array of objects, separating `filled` and `outline` styles.\n     * The function processes an input object containing tags, extracts its values,\n     * and for each tag that has both `filled` and `outline` styles, splits them into\n     * two separate objects. Tags without `filled` styles remain unchanged.\n     * @param {object} tags The input object containing tags as properties. Each property is an object with a `styles` key.\n     * @param {object} tags[].styles The styles object containing `filled` and/or `outline` styles.\n     * @param {object} [tags[].styles.outline] The outline style object, if present.\n     * @param {object} [tags[].styles.filled] The filled style object, if present.\n     * @returns {Array<object>} An array of transformed objects. Objects with both `filled` and `outline` styles are split into separate objects, each containing only one style.\n     * @example\n     * const tags = {\n     *     hourglass: {\n     *         styles: {\n     *             outline: { ... },\n     *             filled: { ... },\n     *         }\n     *     },\n     *     clock: {\n     *         styles: {\n     *             outline: { ... },\n     *         }\n     *     }\n     * };\n     * const result = convertObject(tags);\n     * console.log(result);\n     * // [\n     * //   { styles: { outline: { ... } } },\n     * //   { styles: { filled: { ... } } },\n     * //   { styles: { outline: { ... } } }\n     * // ]\n     */\n    convertObject = (tags = {}) => {\n        let originalObjects = Object.values(tags);\n        let transformedObjects = [];\n        for (let i = 0; i < originalObjects.length; i++) {\n            const obj = originalObjects[i];\n            if (obj.styles.filled) {\n                transformedObjects.push(\n                    { ...obj, styles: { outline: obj.styles.outline } },\n                    { ...obj, styles: { filled: obj.styles.filled } }\n                );\n            } else {\n                transformedObjects.push(obj);\n            }\n        }\n\n        return transformedObjects;\n    };\n\n    /**\n     * Converts an icon data object into an HTML element structure.\n     * This function creates a styled HTML element that represents an icon with a tooltip.\n     * The tooltip displays the name of the icon, and the icon itself is styled based on\n     * whether it uses the `filled` style.\n     * @param {object} data The icon data object.\n     * @returns {HTMLElement} A `div` element containing the icon wrapped in a `wje-tooltip`. The tooltip displays the icon name, and the `wje-icon` element represents the icon with attributes set according to the data.\n     * @example\n     * const iconData = {\n     *     name: \"hourglass\",\n     *     styles: {\n     *         filled: { ... }\n     *     }\n     * };\n     * const htmlElement = dataToHtml(iconData);\n     * document.body.appendChild(htmlElement);\n     *\n     * // The resulting structure:\n     * // <div class=\"icon-item\">\n     * //   <wje-tooltip content=\"hourglass\">\n     * //     <wje-icon name=\"hourglass\" size=\"large\" filled></wje-icon></wje-icon>\n     * //   </wje-tooltip>\n     * // </div>\n     */\n    dataToHtml = (data) => {\n        let iconItem = document.createElement('div');\n        iconItem.classList.add('icon-item');\n\n        let tooltip = document.createElement('wje-tooltip');\n        tooltip.setAttribute('content', data.name);\n\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', data.name);\n        icon.setAttribute('size', 'large');\n        if (data.styles.hasOwnProperty('filled')) icon.setAttribute('filled', '');\n\n        tooltip.appendChild(icon);\n        iconItem.appendChild(tooltip);\n\n        return iconItem;\n    };\n\n    /**\n     * Gets the tags.\n     * @returns {Promise<Array>} The tags of the component.\n     */\n    async getTags() {\n        const response = await fetch(getBasePath('assets/tags.json'));\n        return response.json();\n    }\n\n    /**\n     * Called when the component is disconnected.\n     */\n    beforeDisconnect() {\n        this.init = false;\n    }\n\n    /**\n     * Searches icons based on user input.\n     * This method handles the input event and filters the available icons based on the provided search string.\n     * The filtering is performed on an index that combines icon names and their tags.\n     * The results are then adjusted for infinite scrolling.\n     * @param {Event} e The input event (e.g., `wje-input:input`) containing the search query details.\n     */\n    searchIcon = (e) => {\n        const query = !e.detail?.value ? \"\" : e.detail.value.toLowerCase();\n        const results = this.index.filter((item) => item.searchText.includes(query));\n\n        if (results.length === 0) {\n            this.clearIconsContainer();\n\n            const noResultsDiv = document.createElement('div');\n            noResultsDiv.setAttribute('part', 'no-results');\n            noResultsDiv.classList.add('no-results');\n            noResultsDiv.textContent = 'No icons found';\n\n            this.infiniteScroll.querySelector('.icon-items').append(noResultsDiv);\n\n            return;\n        }\n\n        this.infiniteScroll.unScrollEvent();\n        this.infiniteScroll.setCustomData = (page = 0) => {\n            const data = results.slice(page * this.size, page * this.size + this.size);\n\n            return {\n                data: data,\n                page: page,\n                size: this.size,\n                totalPages: Math.ceil(results.length / this.size),\n            };\n        };\n\n        this.infiniteScroll.reset();\n        this.infiniteScroll.scrollEvent();\n        this.infiniteScroll.loadPages(0);\n    }\n\n    /**\n     * Clears the icons container.\n     */\n    clearIconsContainer() {\n        this.context.querySelector('.icon-items').innerHTML = '';\n    }\n\n    /**\n     * Creates a debounced version of the provided function that delays its execution\n     * until after the specified delay has passed since the last time it was invoked.\n     * @param {Function} fn The function to debounce.\n     * @param {number} delay The delay duration in milliseconds.\n     * @returns {Function} A new debounced function that delays the execution of the original function.\n     */\n    debounce(fn, delay) {\n        let timeout;\n        return (...args) => {\n            clearTimeout(timeout);\n            timeout = setTimeout(() => fn(...args), delay);\n        };\n    }\n}\n","import IconPicker from './icon-picker.element.js';\n\nexport default IconPicker;\n\nIconPicker.define('wje-icon-picker', IconPicker);\n"],"names":["IconPicker","WJElement","constructor","super","dependencies","Input","InfiniteScroll","Tooltip","className","selectIcon","icon","name","getAttribute","stylesType","hasAttribute","uniqueObject","this","transformedObjects","find","i","Object","keys","styles","iconElement","document","createElement","setAttribute","hasOwnProperty","value","type","event","dispatchCustomEvent","convertObject","tags","originalObjects","values","length","obj","filled","push","outline","dataToHtml","data","iconItem","classList","add","tooltip","appendChild","searchIcon","e","query","detail","toLowerCase","results","index","filter","item","searchText","includes","clearIconsContainer","noResultsDiv","textContent","infiniteScroll","querySelector","append","unScrollEvent","setCustomData","page","slice","size","totalPages","Math","ceil","reset","scrollEvent","loadPages","cssStyleSheet","isShadowRoot","syncAria","beforeDraw","getTags","map","join","draw","fragment","createDocumentFragment","native","picker","input","addEventListener","debounce","bind","getBasePath","innerHTML","compareFunction","round","afterDraw","preventDefault","stopImmediatePropagation","context","init","setAriaState","role","ariaLabel","label","initial","fetch","json","fn","delay","timeout","args","clearTimeout","setTimeout","define"],"mappings":"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"}

package/dist/wje-icon.js

@@ -1,4 +1,4 @@
-import { I } from "./icon-CReYMzAK.js";
+import { I } from "./icon-DmsqtDpL.js";
 export {
   I as default
 };