wj-elements 0.1.141 → 0.1.142

package/dist/wje-icon-picker.js

@@ -107,8 +107,7 @@ class IconPicker extends WJElement {
       let icon = document.createElement("wje-icon");
       icon.setAttribute("name", data.name);
       icon.setAttribute("size", "large");
-      if (data.styles.hasOwnProperty("filled"))
-        icon.setAttribute("filled", "");
+      if (data.styles.hasOwnProperty("filled")) icon.setAttribute("filled", "");
       tooltip.appendChild(icon);
       iconItem.appendChild(tooltip);
       return iconItem;
@@ -122,9 +121,7 @@ class IconPicker extends WJElement {
      */
     __publicField(this, "searchIcon", (e) => {
       const query = e.detail.value.toLowerCase();
-      const results = this.index.filter(
-        (item) => item.searchText.includes(query)
-      );
+      const results = this.index.filter((item) => item.searchText.includes(query));
       this.infiniteScroll.unScrollEvent();
       this.infiniteScroll.setCustomData = (page = 0) => {
         const data = results.slice(page * this.size, page * this.size + this.size);
@@ -279,11 +276,12 @@ class IconPicker extends WJElement {
       let icon = e.detail.context.querySelector("wje-icon");
       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);
+      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 (uniqueObject.styles.hasOwnProperty("filled"))
-        iconElement.setAttribute("filled", "");
+      if (uniqueObject.styles.hasOwnProperty("filled")) iconElement.setAttribute("filled", "");
       uniqueObject.icon = iconElement;
       this.value = uniqueObject;
       this.icon = uniqueObject.name;

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 InfiniteScroll from '../wje-infinite-scroll/infinite-scroll.js';\nimport Input from '../wje-input/input.js';\nimport Popup from '../wje-popup/popup.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        'wje-popup': Popup,\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    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    }\n\n    /**\n     * Prepares the component before drawing.\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 the component.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-color-picker');\n\n        // ANCHOR\n        let anchor = document.createElement('div');\n        anchor.setAttribute('slot', 'anchor');\n        anchor.classList.add('anchor');\n\n        if (this.hasAttribute('icon') && this.icon) {\n            let icon = document.createElement('wje-icon');\n            icon.setAttribute('name', this.icon);\n\n            anchor.appendChild(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.searchIcon);\n\n        let infiniteScroll = new InfiniteScroll();\n\n        infiniteScroll.setAttribute('url', this.getTagsUrl('../../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.appendChild(input);\n\n        picker.appendChild(infiniteScroll);\n\n        // POPUP\n        let popup = document.createElement('wje-popup');\n        popup.setAttribute('placement', this.placement || 'bottom-start');\n        popup.setAttribute('offset', this.offset);\n        popup.setAttribute('manual', '');\n\n        popup.appendChild(anchor);\n        popup.appendChild(picker);\n\n        native.appendChild(popup);\n\n        fragment.appendChild(native);\n\n        this.popup = popup;\n        this.input = input;\n        this.anchor = anchor;\n        this.picker = picker;\n        this.infiniteScroll = infiniteScroll;\n\n        this.setupInfiniteScroll();\n\n        return fragment;\n    }\n\n    /**\n     * Called after the component has been drawn.\n     */\n    afterDraw() {\n        this.addEventListener('wje-popup:show', () => {\n            this.initial();\n        });\n\n        // udalost po vymazani inputu\n        this.addEventListener('wje-input:clear', () => {\n            this.setupInfiniteScroll(); // reset infinite scroll\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            let icon = e.detail.context.querySelector('wje-icon');\n            let name = icon.getAttribute('name');\n            let stylesType = icon.hasAttribute('filled') ? 'filled' : 'outline';\n            let uniqueObject = this.transformedObjects.find((i) => i.name === name && Object.keys(i.styles)[0] === stylesType);\n\n            const iconElement = document.createElement('wje-icon');\n            iconElement.setAttribute('name', name);\n            if(uniqueObject.styles.hasOwnProperty('filled'))\n                iconElement.setAttribute('filled', '');\n\n            uniqueObject.icon = iconElement;\n\n            this.value = uniqueObject;\n            this.icon = uniqueObject.name;\n\n            this.anchor.innerHTML = '';\n            this.anchor.appendChild(iconElement);\n\n            event.dispatchCustomEvent(this, 'wje-icon-picker:select', uniqueObject); // odpalenie custom eventu\n        });\n\n        this.init = false;\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>\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'))\n            icon.setAttribute('filled', '');\n\n        tooltip.appendChild(icon);\n        iconItem.appendChild(tooltip);\n\n        return iconItem;\n    }\n\n    /**\n     * Sets up the infinite scroll for the component.\n     */\n    setupInfiniteScroll() {\n        this.infiniteScroll.dataToHtml = this.dataToHtml;\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\n    /**\n     * Gets the category of the tags.\n     * @param {Array} tags The tags to get the category of.\n     * @returns {Array} The category of the tags.\n     */\n    getCategory(tags) {\n        return [...new Set(tags.map((obj) => obj.category))];\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(this.getTagsUrl('../../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.toLowerCase();\n\n        const results = this.index.filter((item) =>\n          item.searchText.includes(query)\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            return {\n                data: data,\n                page: page,\n                size: this.size,\n                totalPages: Math.ceil(results.length / this.size),\n            };\n        };\n\n        this.clearIconsContainer();\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     * Closes the component.\n     */\n    onClose = () => {\n        this.popup.handleHide();\n    };\n\n    /**\n     * Gets the URL of the tags.\n     * @param {string} path The path to get the URL of.\n     * @returns {string} The URL of the tags path.\n     */\n    getTagsUrl = (path) => {\n        return new URL(process.env.VITE_ICON_ASSETS_URL + path).href;\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 InfiniteScroll from '../wje-infinite-scroll/infinite-scroll.js';\nimport Input from '../wje-input/input.js';\nimport Popup from '../wje-popup/popup.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        'wje-popup': Popup,\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    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    }\n\n    /**\n     * Prepares the component before drawing.\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 the component.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-color-picker');\n\n        // ANCHOR\n        let anchor = document.createElement('div');\n        anchor.setAttribute('slot', 'anchor');\n        anchor.classList.add('anchor');\n\n        if (this.hasAttribute('icon') && this.icon) {\n            let icon = document.createElement('wje-icon');\n            icon.setAttribute('name', this.icon);\n\n            anchor.appendChild(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.searchIcon);\n\n        let infiniteScroll = new InfiniteScroll();\n\n        infiniteScroll.setAttribute('url', this.getTagsUrl('../../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.appendChild(input);\n\n        picker.appendChild(infiniteScroll);\n\n        // POPUP\n        let popup = document.createElement('wje-popup');\n        popup.setAttribute('placement', this.placement || 'bottom-start');\n        popup.setAttribute('offset', this.offset);\n        popup.setAttribute('manual', '');\n\n        popup.appendChild(anchor);\n        popup.appendChild(picker);\n\n        native.appendChild(popup);\n\n        fragment.appendChild(native);\n\n        this.popup = popup;\n        this.input = input;\n        this.anchor = anchor;\n        this.picker = picker;\n        this.infiniteScroll = infiniteScroll;\n\n        this.setupInfiniteScroll();\n\n        return fragment;\n    }\n\n    /**\n     * Called after the component has been drawn.\n     */\n    afterDraw() {\n        this.addEventListener('wje-popup:show', () => {\n            this.initial();\n        });\n\n        // udalost po vymazani inputu\n        this.addEventListener('wje-input:clear', () => {\n            this.setupInfiniteScroll(); // reset infinite scroll\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            let icon = e.detail.context.querySelector('wje-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            if (uniqueObject.styles.hasOwnProperty('filled')) iconElement.setAttribute('filled', '');\n\n            uniqueObject.icon = iconElement;\n\n            this.value = uniqueObject;\n            this.icon = uniqueObject.name;\n\n            this.anchor.innerHTML = '';\n            this.anchor.appendChild(iconElement);\n\n            event.dispatchCustomEvent(this, 'wje-icon-picker:select', uniqueObject); // odpalenie custom eventu\n        });\n\n        this.init = false;\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>\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     * Sets up the infinite scroll for the component.\n     */\n    setupInfiniteScroll() {\n        this.infiniteScroll.dataToHtml = this.dataToHtml;\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\n    /**\n     * Gets the category of the tags.\n     * @param {Array} tags The tags to get the category of.\n     * @returns {Array} The category of the tags.\n     */\n    getCategory(tags) {\n        return [...new Set(tags.map((obj) => obj.category))];\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(this.getTagsUrl('../../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.toLowerCase();\n\n        const results = this.index.filter((item) => item.searchText.includes(query));\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            return {\n                data: data,\n                page: page,\n                size: this.size,\n                totalPages: Math.ceil(results.length / this.size),\n            };\n        };\n\n        this.clearIconsContainer();\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     * Closes the component.\n     */\n    onClose = () => {\n        this.popup.handleHide();\n    };\n\n    /**\n     * Gets the URL of the tags.\n     * @param {string} path The path to get the URL of.\n     * @returns {string} The URL of the tags path.\n     */\n    getTagsUrl = (path) => {\n        return new URL(process.env.VITE_ICON_ASSETS_URL + path).href;\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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"}

package/dist/wje-level-indicator.js

@@ -0,0 +1,160 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import WJElement from "./wje-element.js";
+const styles = ":host {\n    display: block;\n    .native-level-indicator {\n        display: flex;\n        flex-direction: column-reverse;\n        gap: var(--wje-level-indicator-height);\n        align-items: center;\n        width: var(--wje-level-indicator-width);\n    }\n    .reverse {\n        flex-direction: column;\n    }\n    .bar {\n        width: 100%;\n        height: var(--wje-level-indicator-height);\n        background: var(--wje-level-indicator-color);\n        border-radius: var(--wje-level-indicator-border-radius);\n        opacity: var(--wje-level-indicator-opacity);\n        transition: opacity 0.3s;\n    }\n    .bar.active {\n        opacity: 1;\n        background: var(--wje-level-indicator-color-active);\n    }\n}\n";
+class LevelIndicator extends WJElement {
+  /**
+   * Creates an instance of LevelIndicator.
+   * @class
+   */
+  constructor() {
+    super();
+    __publicField(this, "className", "LevelIndicator");
+  }
+  /**
+   * Sets the level attribute for an instance.
+   * @param {string} value The value to set for the 'level' attribute.
+   */
+  set level(value) {
+    this.setAttribute("level", value);
+  }
+  /**
+   * Retrieves the level attribute of an element, with validation to ensure
+   * it is within the range of 0 to 3. If the level attribute is not present,
+   * the default value is 1. The result is parsed as an integer and constrained
+   * to the valid range.
+   * @returns {number} The normalized level value, which is an integer between 0 and 3.
+   */
+  get level() {
+    return Math.min(this.bars, Math.max(0, parseInt(this.getAttribute("level") || "1", 10)));
+  }
+  /**
+   * Sets the value of the "bars" attribute.
+   * @param {string} value The value to set for the "bars" attribute.
+   */
+  set bars(value) {
+    this.setAttribute("bars", value);
+  }
+  /**
+   * Retrieves the value of the "bars" attribute, parses it as an integer,
+   * and ensures it is at least 1. If the attribute is not set, defaults to 3.
+   * @returns {number} The parsed integer value of the "bars" attribute or the default value of 3, constrained to a minimum of 1.
+   */
+  get bars() {
+    return Math.max(1, parseInt(this.getAttribute("bars") || "3", 10));
+  }
+  /**
+   * Sets the 'colorize' attribute on the element. If the provided value is truthy,
+   * the attribute will be set. If the value is falsy, the attribute will be removed.
+   * @param {boolean} value A boolean determining whether to set or remove the 'colorize' attribute.
+   */
+  set colorize(value) {
+    this.removeAttribute("colorize");
+    if (value) this.setAttribute("colorize", "");
+  }
+  /**
+   * Determines whether the element has the "colorize" attribute set.
+   * @returns {boolean} Returns true if the "colorize" attribute is present, otherwise false.
+   */
+  get colorize() {
+    return this.hasAttribute("colorize");
+  }
+  /**
+   * Sets the 'reverse' attribute on the element. If the provided value is truthy, the attribute is added;
+   * otherwise, the attribute is removed.
+   * @param {boolean} value The value determining whether to set or remove the 'reverse' attribute.
+   */
+  set reverse(value) {
+    this.removeAttribute("reverse");
+    if (value) this.setAttribute("reverse", "");
+  }
+  /**
+   * Getter method to check if the "reverse" attribute is present on the element.
+   * @returns {boolean} Returns true if the "reverse" attribute is set; otherwise, returns false.
+   */
+  get reverse() {
+    return this.hasAttribute("reverse");
+  }
+  /**
+   * Returns the CSS styles for the component.
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return styles;
+  }
+  /**
+   * Sets up the attributes for the component.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Creates a document fragment, appends a new slot element to it, and returns the fragment.
+   * @returns {DocumentFragment} A document fragment containing a slot element.
+   */
+  draw() {
+    let fragment = document.createDocumentFragment();
+    let native = document.createElement("div");
+    native.classList.add("native-level-indicator");
+    if (this.reverse) native.classList.add("reverse");
+    let defaultBar = document.createElement("div");
+    defaultBar.classList.add("bar");
+    this.barsArray = [];
+    for (let i = 0; i < this.bars; i++) {
+      const width = (i + 1) / this.bars * 100;
+      let bar = defaultBar.cloneNode(true);
+      bar.style.setProperty("width", width + "%");
+      native.appendChild(bar);
+      this.barsArray.push(bar);
+    }
+    fragment.appendChild(native);
+    this.native = native;
+    return fragment;
+  }
+  /**
+   * Executes any additional operations or updates required after the drawing process is completed.
+   * @returns {void} This method does not return any value.
+   */
+  afterDraw() {
+    this.updateBars(this.level, this.barsArray);
+    if (this.colorize)
+      this.native.style.setProperty(
+        "--wje-level-indicator-color-active",
+        `var(${this.getColor(this.level, this.barsArray.length)})`
+      );
+  }
+  /**
+   * Updates the class of each bar element based on the specified level.
+   * @param {number} level The threshold level determining how many bars should be active.
+   * @param {Array} bars An array of bar elements to be updated.
+   * @returns {void} This method does not return a value.
+   */
+  updateBars(level, bars) {
+    bars.forEach((bar, index) => {
+      bar.classList.toggle("active", index < level);
+    });
+  }
+  /**
+   * Determines the color indicator based on the given level and bars.
+   * @param {number} level The current value level used to calculate the ratio.
+   * @param {number} bars The maximum value that level can reach.
+   * @returns {string | undefined} A string representing the color code based on the ratio, or undefined if colorize is disabled.
+   */
+  getColor(level, bars) {
+    const thresholds = [
+      "--wje-level-indicator-color-low",
+      "--wje-level-indicator-color-medium",
+      "--wje-level-indicator-color-high"
+      // 67% - 100% (tretia tretina)
+    ];
+    const index = Math.min(2, Math.floor((level - 1) / (bars / 3)));
+    return thresholds[index];
+  }
+}
+LevelIndicator.define("wje-level-indicator", LevelIndicator);
+export {
+  LevelIndicator as default
+};
+//# sourceMappingURL=wje-level-indicator.js.map

package/dist/wje-level-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-level-indicator.js","sources":["../packages/wje-level-indicator/level-indicator.element.js","../packages/wje-level-indicator/level-indicator.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary LevelIndicator is a custom web component that extends WJElement.\n * @documentation https://elements.webjet.sk/components/LevelIndicator\n * @status stable\n * @augments WJElement\n * @csspart - Styles the element.\n * @tag wje-level-indicator\n * @example\n * <wje-level-indicator></wje-level-indicator>\n */\nexport default class LevelIndicator extends WJElement {\n    /**\n     * Creates an instance of LevelIndicator.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the level attribute for an instance.\n     * @param {string} value The value to set for the 'level' attribute.\n     */\n    set level(value) {\n        this.setAttribute('level', value);\n    }\n\n    /**\n     * Retrieves the level attribute of an element, with validation to ensure\n     * it is within the range of 0 to 3. If the level attribute is not present,\n     * the default value is 1. The result is parsed as an integer and constrained\n     * to the valid range.\n     * @returns {number} The normalized level value, which is an integer between 0 and 3.\n     */\n    get level() {\n        return Math.min(this.bars, Math.max(0, parseInt(this.getAttribute('level') || '1', 10)));\n    }\n\n    /**\n     * Sets the value of the \"bars\" attribute.\n     * @param {string} value The value to set for the \"bars\" attribute.\n     */\n    set bars(value) {\n        this.setAttribute('bars', value);\n    }\n\n    /**\n     * Retrieves the value of the \"bars\" attribute, parses it as an integer,\n     * and ensures it is at least 1. If the attribute is not set, defaults to 3.\n     * @returns {number} The parsed integer value of the \"bars\" attribute or the default value of 3, constrained to a minimum of 1.\n     */\n    get bars() {\n        return Math.max(1, parseInt(this.getAttribute('bars') || '3', 10));\n    }\n\n    /**\n     * Sets the 'colorize' attribute on the element. If the provided value is truthy,\n     * the attribute will be set. If the value is falsy, the attribute will be removed.\n     * @param {boolean} value A boolean determining whether to set or remove the 'colorize' attribute.\n     */\n    set colorize(value) {\n        this.removeAttribute('colorize');\n\n        if (value) this.setAttribute('colorize', '');\n    }\n\n    /**\n     * Determines whether the element has the \"colorize\" attribute set.\n     * @returns {boolean} Returns true if the \"colorize\" attribute is present, otherwise false.\n     */\n    get colorize() {\n        return this.hasAttribute('colorize');\n    }\n\n    /**\n     * Sets the 'reverse' attribute on the element. If the provided value is truthy, the attribute is added;\n     * otherwise, the attribute is removed.\n     * @param {boolean} value The value determining whether to set or remove the 'reverse' attribute.\n     */\n    set reverse(value) {\n        this.removeAttribute('reverse');\n\n        if (value) this.setAttribute('reverse', '');\n    }\n\n    /**\n     * Getter method to check if the \"reverse\" attribute is present on the element.\n     * @returns {boolean} Returns true if the \"reverse\" attribute is set; otherwise, returns false.\n     */\n    get reverse() {\n        return this.hasAttribute('reverse');\n    }\n\n    className = 'LevelIndicator';\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     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Creates a document fragment, appends a new slot element to it, and returns the fragment.\n     * @returns {DocumentFragment} A document fragment containing a slot element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-level-indicator');\n        if (this.reverse) native.classList.add('reverse');\n\n        let defaultBar = document.createElement('div');\n        defaultBar.classList.add('bar');\n\n        this.barsArray = [];\n\n        for (let i = 0; i < this.bars; i++) {\n            const width = ((i + 1) / this.bars) * 100;\n\n            let bar = defaultBar.cloneNode(true);\n            bar.style.setProperty('width', width + '%');\n\n            native.appendChild(bar);\n            this.barsArray.push(bar);\n        }\n\n        fragment.appendChild(native);\n\n        this.native = native;\n\n        return fragment;\n    }\n\n    /**\n     * Executes any additional operations or updates required after the drawing process is completed.\n     * @returns {void} This method does not return any value.\n     */\n    afterDraw() {\n        this.updateBars(this.level, this.barsArray);\n\n        if (this.colorize)\n            this.native.style.setProperty(\n                '--wje-level-indicator-color-active',\n                `var(${this.getColor(this.level, this.barsArray.length)})`\n            );\n    }\n\n    /**\n     * Updates the class of each bar element based on the specified level.\n     * @param {number} level The threshold level determining how many bars should be active.\n     * @param {Array} bars An array of bar elements to be updated.\n     * @returns {void} This method does not return a value.\n     */\n    updateBars(level, bars) {\n        bars.forEach((bar, index) => {\n            bar.classList.toggle('active', index < level);\n        });\n    }\n\n    /**\n     * Determines the color indicator based on the given level and bars.\n     * @param {number} level The current value level used to calculate the ratio.\n     * @param {number} bars The maximum value that level can reach.\n     * @returns {string | undefined} A string representing the color code based on the ratio, or undefined if colorize is disabled.\n     */\n\n    getColor(level, bars) {\n        const thresholds = [\n            '--wje-level-indicator-color-low',\n            '--wje-level-indicator-color-medium',\n            '--wje-level-indicator-color-high', // 67% - 100% (tretia tretina)\n        ];\n\n        const index = Math.min(2, Math.floor((level - 1) / (bars / 3)));\n        return thresholds[index];\n    }\n}\n","import LevelIndicator from './level-indicator.element.js';\n\nexport default LevelIndicator;\n\nLevelIndicator.define('wje-level-indicator', LevelIndicator);\n"],"names":[],"mappings":"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"}