wj-elements 0.2.0-alpha.8 → 0.3.0

package/dist/wje-icon-picker.js

@@ -236,6 +236,7 @@ class IconPicker extends WJElement {
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.syncAria();
   }
   /**
    * Prepares data before the draw operation by fetching tags, transforming objects, and creating an index.
@@ -306,6 +307,7 @@ class IconPicker extends WJElement {
    * @returns {void} Does not return a value.
    */
   afterDraw() {
+    this.syncAria();
     this.addEventListener("wje-input:clear", () => {
       this.clearIconsContainer();
       this.infiniteScroll.scrollEvent();
@@ -318,6 +320,19 @@ class IconPicker extends WJElement {
     });
     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 });
+    }
+  }
   /**
    * Initializes the component.
    */

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    }\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\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     * 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}","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":[],"mappings":";;;;;;;;;;AA6Be,MAAM,mBAAmB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK9C,cAAc;AACV,UAAO;AAOX;AAAA;AAAA;AAAA;AAAA,wCAAe;AAAA,MACX,aAAa;AAAA,MACb,uBAAuB;AAAA,MACvB,eAAe;AAAA,IAClB;AAkDD,qCAAY;AAkKZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAAa,CAAC,SAAS;;AACnB,UAAI,OAAO,KAAK,aAAa,MAAM;AACnC,UAAI,aAAa,KAAK,aAAa,QAAQ,IAAI,WAAW;AAC1D,UAAI,eAAe,KAAK,mBAAmB;AAAA,QACzC,CAAC,MAAM,EAAE,SAAS,QAAQ,OAAO,KAAK,EAAE,MAAM,EAAE,CAAC,MAAM;AAAA,MACxD;AAED,YAAM,cAAc,SAAS,cAAc,UAAU;AACrD,kBAAY,aAAa,QAAQ,IAAI;AAErC,WAAI,kBAAa,WAAb,mBAAqB,eAAe,UAAW,aAAY,aAAa,UAAU,EAAE;AAExF,mBAAa,OAAO;AAEpB,WAAK,QAAQ;AACb,WAAK,OAAO,aAAa;AACzB,WAAK,SAAO,kBAAa,WAAb,mBAAqB,eAAe,aAAY,WAAW;AAEvE,YAAM,oBAAoB,MAAM,0BAA0B,YAAY;AAAA,IAC9E;AAyCI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yCAAgB,CAAC,OAAO,OAAO;AAC3B,UAAI,kBAAkB,OAAO,OAAO,IAAI;AACxC,UAAI,qBAAqB,CAAE;AAC3B,eAAS,IAAI,GAAG,IAAI,gBAAgB,QAAQ,KAAK;AAC7C,cAAM,MAAM,gBAAgB,CAAC;AAC7B,YAAI,IAAI,OAAO,QAAQ;AACnB,6BAAmB;AAAA,YACf,EAAE,GAAG,KAAK,QAAQ,EAAE,SAAS,IAAI,OAAO,UAAW;AAAA,YACnD,EAAE,GAAG,KAAK,QAAQ,EAAE,QAAQ,IAAI,OAAO,OAAQ,EAAA;AAAA,UAClD;AAAA,QACjB,OAAmB;AACH,6BAAmB,KAAK,GAAG;AAAA,QAC3C;AAAA,MACA;AAEQ,aAAO;AAAA,IACV;AA0BD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAAa,CAAC,SAAS;AACnB,UAAI,WAAW,SAAS,cAAc,KAAK;AAC3C,eAAS,UAAU,IAAI,WAAW;AAElC,UAAI,UAAU,SAAS,cAAc,aAAa;AAClD,cAAQ,aAAa,WAAW,KAAK,IAAI;AAEzC,UAAI,OAAO,SAAS,cAAc,UAAU;AAC5C,WAAK,aAAa,QAAQ,KAAK,IAAI;AACnC,WAAK,aAAa,QAAQ,OAAO;AACjC,UAAI,KAAK,OAAO,eAAe,QAAQ,EAAG,MAAK,aAAa,UAAU,EAAE;AAExE,cAAQ,YAAY,IAAI;AACxB,eAAS,YAAY,OAAO;AAE5B,aAAO;AAAA,IACV;AAyBD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAAa,CAAC,MAAM;;AAChB,YAAM,QAAQ,GAAC,OAAE,WAAF,mBAAU,SAAQ,KAAK,EAAE,OAAO,MAAM,YAAa;AAClE,YAAM,UAAU,KAAK,MAAM,OAAO,CAAC,SAAS,KAAK,WAAW,SAAS,KAAK,CAAC;AAE3E,UAAI,QAAQ,WAAW,GAAG;AACtB,aAAK,oBAAqB;AAE1B,cAAM,eAAe,SAAS,cAAc,KAAK;AACjD,qBAAa,aAAa,QAAQ,YAAY;AAC9C,qBAAa,UAAU,IAAI,YAAY;AACvC,qBAAa,cAAc;AAE3B,aAAK,eAAe,cAAc,aAAa,EAAE,OAAO,YAAY;AAEpE;AAAA,MACZ;AAEQ,WAAK,eAAe,cAAe;AACnC,WAAK,eAAe,gBAAgB,CAAC,OAAO,MAAM;AAC9C,cAAM,OAAO,QAAQ,MAAM,OAAO,KAAK,MAAM,OAAO,KAAK,OAAO,KAAK,IAAI;AAEzE,eAAO;AAAA,UACH;AAAA,UACA;AAAA,UACA,MAAM,KAAK;AAAA,UACX,YAAY,KAAK,KAAK,QAAQ,SAAS,KAAK,IAAI;AAAA,QACnD;AAAA,MACJ;AAED,WAAK,eAAe,MAAO;AAC3B,WAAK,eAAe,YAAa;AACjC,WAAK,eAAe,UAAU,CAAC;AAAA,IACvC;AAAA,EA7YA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBI,IAAI,KAAK,OAAO;AACZ,SAAK,aAAa,QAAQ,KAAK;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,OAAO;AACP,WAAO,KAAK,aAAa,MAAM,KAAK;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,KAAK,OAAO;AACZ,SAAK,aAAa,QAAQ,KAAK;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,OAAO;AACP,WAAO,KAAK,aAAa,MAAM;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,KAAK,OAAO;AACZ,SAAK,aAAa,QAAQ,KAAK;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,OAAO;AACP,WAAO,KAAK,aAAa,MAAM;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,qBAAqB;AAC5B,WAAO,CAAE;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,SAAU;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,MAAM,aAAa;AACf,SAAK,OAAO,OAAO,OAAO,MAAM,KAAK,SAAS;AAE9C,SAAK,qBAAqB,KAAK,cAAc,KAAK,IAAI;AAEtD,SAAK,QAAQ,KAAK,mBAAmB,IAAI,CAAC,UAAU;AAAA,MAChD,GAAG;AAAA,MACH,YAAY,GAAG,KAAK,KAAK,YAAW,CAAE,IAAI,KAAK,KAAK,KAAK,GAAG,EAAE,YAAa,CAAA;AAAA,IACvF,EAAU;AAAA,EACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,qBAAqB;AAE1C,QAAI,KAAK,aAAa,MAAM,KAAK,KAAK,MAAM;AAExC,UAAI,OAAO,SAAS,cAAc,UAAU;AAC5C,WAAK,aAAa,QAAQ,KAAK,IAAI;AACnC,UAAG,KAAK,SAAS;AACb,aAAK,aAAa,UAAU,EAAE;AAElC,WAAK,WAAW,IAAI;AAAA,IAChC;AAGQ,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,QAAQ;AAE7B,QAAI,QAAQ,SAAS,cAAc,WAAW;AAC9C,UAAM,UAAU,IAAI,OAAO;AAC3B,UAAM,aAAa,WAAW,UAAU;AACxC,UAAM,aAAa,eAAe,mBAAmB;AACrD,UAAM,aAAa,aAAa,EAAE;AAClC,UAAM,iBAAiB,mBAAmB,KAAK,SAAS,KAAK,WAAW,KAAK,IAAI,GAAG,GAAG,CAAC;AACxF,UAAM,iBAAiB,mBAAmB,KAAK,UAAU;AAEzD,QAAI,iBAAiB,IAAI,eAAgB;AACzC,mBAAe,aAAa,OAAO,YAAY,kBAAkB,CAAC;AAClE,mBAAe,aAAa,aAAa,aAAa;AACtD,mBAAe,aAAa,QAAQ,KAAK,IAAI;AAC7C,mBAAe,aAAa,UAAU,OAAO;AAC7C,mBAAe,YAAY;AAG3B,WAAO,OAAO,OAAO,cAAc;AAEnC,WAAO,OAAO,MAAM;AAEpB,aAAS,OAAO,MAAM;AAEtB,SAAK,QAAQ;AACb,SAAK,SAAS;AACd,SAAK,iBAAiB;AAEtB,SAAK,eAAe,aAAa,KAAK;AACtC,SAAK,eAAe,kBAAkB,CAAC,GAAG,SAAS,EAAE,SAAS,KAAK;AACnE,SAAK,eAAe,gBAAgB,CAAC,OAAO,MAAM;AAC9C,aAAO;AAAA,QACH,MAAM,KAAK,mBAAmB,MAAM,OAAO,KAAK,MAAM,OAAO,KAAK,OAAO,KAAK,IAAI;AAAA,QAClF;AAAA,QACA,MAAM,KAAK;AAAA,QACX,YAAY,KAAK,MAAM,KAAK,mBAAmB,SAAS,KAAK,IAAI;AAAA,MACpE;AAAA,IACJ;AAED,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,YAAY;AACR,SAAK,SAAU;AAGf,SAAK,iBAAiB,mBAAmB,MAAM;AAC3C,WAAK,oBAAmB;AACxB,WAAK,eAAe;AACpB,WAAK,eAAe,UAAU,CAAC;AAAA,IAC3C,CAAS;AAED,SAAK,iBAAiB,kCAAkC,CAAC,MAAM;AAC3D,QAAE,eAAgB;AAClB,QAAE,yBAA0B;AAE5B,WAAK,WAAW,EAAE,OAAO,QAAQ,cAAc,UAAU,CAAC;AAAA,IACtE,CAAS;AAED,SAAK,OAAO;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA,EAKI,WAAW;AACP,QAAI,CAAC,KAAK,aAAa,MAAM,GAAG;AAC5B,WAAK,aAAa,EAAE,MAAM,QAAO,CAAE;AAAA,IAC/C;AAEQ,UAAM,YAAY,KAAK,aAAa,YAAY;AAChD,UAAM,QAAQ,KAAK,aAAa,OAAO;AACvC,QAAI,CAAC,aAAa,OAAO;AACrB,WAAK,aAAa,EAAE,OAAO;AAAA,IACvC;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAsCI,UAAU;AACN,SAAK,eAAe,YAAa;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA;AAAA,EAkGI,MAAM,UAAU;AACZ,UAAM,WAAW,MAAM,MAAM,YAAY,kBAAkB,CAAC;AAC5D,WAAO,SAAS,KAAM;AAAA,EAC9B;AAAA;AAAA;AAAA;AAAA,EAKI,mBAAmB;AACf,SAAK,OAAO;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA,EA8CI,sBAAsB;AAClB,SAAK,QAAQ,cAAc,aAAa,EAAE,YAAY;AAAA,EAC9D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,SAAS,IAAI,OAAO;AAChB,QAAI;AACJ,WAAO,IAAI,SAAS;AAChB,mBAAa,OAAO;AACpB,gBAAU,WAAW,MAAM,GAAG,GAAG,IAAI,GAAG,KAAK;AAAA,IAChD;AAAA,EACT;AACA;ACpcA,WAAW,OAAO,mBAAmB,UAAU;"}

package/dist/wje-icon.js

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

package/dist/{packages/wje-img → wje-img}/img.element.d.ts

@@ -71,6 +71,7 @@ export default class Img extends WJElement {
      * @returns {string|null} The value of the 'loader' attribute if set, otherwise null.
      */
     get loader(): string | null;
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
     /**
      * Creates and assembles a lazy-loaded image element within a document fragment.
      * @returns {DocumentFragment} A document fragment containing the image element.

package/dist/wje-img-comparer.js

@@ -2,7 +2,7 @@ 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 { I as Icon } from "./icon-DY5AZ6xM.js";
+import { I as Icon } from "./icon-DVyMc4Wv.js";
 function drag(container, options) {
   function move(pointerEvent) {
     const dims = container.getBoundingClientRect();
@@ -90,6 +90,7 @@ class ImgComparer extends WJElement {
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.setAriaState({ role: "group" });
   }
   /**
    * Draws the component.
@@ -112,6 +113,9 @@ class ImgComparer extends WJElement {
     let dividerElement = document.createElement("div");
     dividerElement.classList.add("wje-divider");
     dividerElement.setAttribute("part", "divider");
+    dividerElement.setAttribute("role", "separator");
+    dividerElement.setAttribute("tabindex", "0");
+    dividerElement.setAttribute("aria-orientation", "horizontal");
     dividerElement.addEventListener("mousedown", this.handleDrag, false);
     beforeElement.appendChild(before);
     afterElement.appendChild(after);

package/dist/wje-img-comparer.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-img-comparer.js","sources":["../packages/wje-img-comparer/service/service.js","../packages/wje-img-comparer/img-comparer.element.js","../packages/wje-img-comparer/img-comparer.js"],"sourcesContent":["export function drag(container, options) {\n    function move(pointerEvent) {\n        const dims = container.getBoundingClientRect();\n        const defaultView = container.ownerDocument.defaultView;\n        const offsetX = dims.left + defaultView.pageXOffset;\n        const offsetY = dims.top + defaultView.pageYOffset;\n        const x = pointerEvent.pageX - offsetX;\n        const y = pointerEvent.pageY - offsetY;\n\n        if (options?.onMove) {\n            options.onMove(x, y);\n        }\n    }\n\n    function stop() {\n        document.removeEventListener('pointermove', move);\n        document.removeEventListener('pointerup', stop);\n\n        if (options?.onStop) {\n            options.onStop();\n        }\n    }\n\n    document.addEventListener('pointermove', move, { passive: true });\n    document.addEventListener('pointerup', stop);\n\n    if (options?.initialEvent instanceof PointerEvent) {\n        move(options.initialEvent);\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Icon from '../wje-icon/icon.js';\nimport { drag } from './service/service.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element allows users to compare two images. `ImgComparer` is a custom web component that represents an image comparer.\n * It extends from `WJElement` and uses the `Icon` component.\n * @documentation https://elements.webjet.sk/components/img-comparer\n * @status stable\n * @augments {WJElement}\n * @slot before - The before image slot.\n * @slot after - The after image slot.\n * @csspart divider - The divider part.\n * @cssproperty [--wje-img-compare-divider-area=12px] - The area of the divider. This is the size of the divider. Accepts any valid CSS size.\n * @cssproperty [--wje-img-compare-divider-background=white] - Sets the background color of the divider in the image comparison component. Accepts any valid CSS color value (e.g., `red`, `#ff0000`, `rgba(255, 255, 255, 0.5)`). The default value is `white`, which ensures high contrast in most designs.\n * @cssproperty [--wje-img-compare-divider-size=2px] - The size of the divider. This is the thickness of the divider. Accepts any valid CSS size.\n * @cssproperty [--wje-img-compare-divider-left=50%] - The left position of the divider. This is the initial position of the divider.\n * @cssproperty [--wje-img-compare-position=50%] - The position of the divider. This is the position of the divider.\n * @cssproperty [--wje-img-compare-clip-path=inset(0 calc(100% - var(--wje-img-compare-position)) 0 0)] - The clip path of the divider. This is the clip path of the divider.\n * @tag wje-img-comparer\n */\nexport default class ImgComparer extends WJElement {\n    /**\n     * Creates an instance of ImgComparer.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Dependencies of the ImgComparer component.\n     * @property {object} dependencies\n     */\n    dependencies = {\n        'wje-icon': Icon,\n    };\n\n    className = 'ImgComparer';\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     * 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-split-view');\n\n        let beforeElement = document.createElement('div');\n        beforeElement.classList.add('wje-before');\n\n        let before = document.createElement('slot');\n        before.setAttribute('name', 'before');\n\n        let afterElement = document.createElement('div');\n        afterElement.classList.add('wje-after');\n\n        let after = document.createElement('slot');\n        after.setAttribute('name', 'after');\n\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', 'arrow-bar-both');\n\n        let dividerElement = document.createElement('div');\n        dividerElement.classList.add('wje-divider');\n        dividerElement.setAttribute('part', 'divider');\n        dividerElement.addEventListener('mousedown', this.handleDrag, false);\n\n        beforeElement.appendChild(before);\n        afterElement.appendChild(after);\n        dividerElement.appendChild(icon);\n\n        native.appendChild(beforeElement);\n        native.appendChild(afterElement);\n        native.appendChild(dividerElement);\n\n        fragment.appendChild(native);\n\n        this.native = native;\n\n        return fragment;\n    }\n\n    /**\n     * Handles the drag event.\n     * @param {Event} e The event.\n     */\n    handleDrag = (e) => {\n        const { width } = this.native.getBoundingClientRect();\n\n        drag(this, {\n            onMove: (x) => {\n                let value = (x / width) * 100;\n                this.position = parseFloat(this.clamp(value, 0, 100).toFixed(2));\n                this.native.style.setProperty('--wje-img-compare-divider-left', this.position + '%');\n                this.native.style.setProperty('--wje-img-compare-clip-path', `inset(0 ${100 - this.position}% 0 0)`);\n            },\n            initialEvent: e,\n        });\n    };\n\n    /**\n     * Clamps a number between a minimum and maximum value.\n     * @param {number} num The number to clamp.\n     * @param {number} min The minimum value.\n     * @param {number} max The maximum value.\n     * @returns {number} The clamped number.\n     */\n    clamp = (num, min, max) => Math.min(Math.max(num, min), max);\n}\n","import ImgComparer from './img-comparer.element.js';\n\nexport default ImgComparer;\n\nImgComparer.define('wje-img-comparer', ImgComparer);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-img-comparer.js","sources":["../packages/wje-img-comparer/service/service.js","../packages/wje-img-comparer/img-comparer.element.js","../packages/wje-img-comparer/img-comparer.js"],"sourcesContent":["export function drag(container, options) {\n    function move(pointerEvent) {\n        const dims = container.getBoundingClientRect();\n        const defaultView = container.ownerDocument.defaultView;\n        const offsetX = dims.left + defaultView.pageXOffset;\n        const offsetY = dims.top + defaultView.pageYOffset;\n        const x = pointerEvent.pageX - offsetX;\n        const y = pointerEvent.pageY - offsetY;\n\n        if (options?.onMove) {\n            options.onMove(x, y);\n        }\n    }\n\n    function stop() {\n        document.removeEventListener('pointermove', move);\n        document.removeEventListener('pointerup', stop);\n\n        if (options?.onStop) {\n            options.onStop();\n        }\n    }\n\n    document.addEventListener('pointermove', move, { passive: true });\n    document.addEventListener('pointerup', stop);\n\n    if (options?.initialEvent instanceof PointerEvent) {\n        move(options.initialEvent);\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Icon from '../wje-icon/icon.js';\nimport { drag } from './service/service.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element allows users to compare two images. `ImgComparer` is a custom web component that represents an image comparer.\n * It extends from `WJElement` and uses the `Icon` component.\n * @documentation https://elements.webjet.sk/components/img-comparer\n * @status stable\n * @augments {WJElement}\n * @slot before - The before image slot.\n * @slot after - The after image slot.\n * @csspart divider - The divider part.\n * @cssproperty [--wje-img-compare-divider-area=12px] - The area of the divider. This is the size of the divider. Accepts any valid CSS size.\n * @cssproperty [--wje-img-compare-divider-background=white] - Sets the background color of the divider in the image comparison component. Accepts any valid CSS color value (e.g., `red`, `#ff0000`, `rgba(255, 255, 255, 0.5)`). The default value is `white`, which ensures high contrast in most designs.\n * @cssproperty [--wje-img-compare-divider-size=2px] - The size of the divider. This is the thickness of the divider. Accepts any valid CSS size.\n * @cssproperty [--wje-img-compare-divider-left=50%] - The left position of the divider. This is the initial position of the divider.\n * @cssproperty [--wje-img-compare-position=50%] - The position of the divider. This is the position of the divider.\n * @cssproperty [--wje-img-compare-clip-path=inset(0 calc(100% - var(--wje-img-compare-position)) 0 0)] - The clip path of the divider. This is the clip path of the divider.\n * @tag wje-img-comparer\n */\nexport default class ImgComparer extends WJElement {\n    /**\n     * Creates an instance of ImgComparer.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Dependencies of the ImgComparer component.\n     * @property {object} dependencies\n     */\n    dependencies = {\n        'wje-icon': Icon,\n    };\n\n    className = 'ImgComparer';\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.setAriaState({ role: 'group' });\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-split-view');\n\n        let beforeElement = document.createElement('div');\n        beforeElement.classList.add('wje-before');\n\n        let before = document.createElement('slot');\n        before.setAttribute('name', 'before');\n\n        let afterElement = document.createElement('div');\n        afterElement.classList.add('wje-after');\n\n        let after = document.createElement('slot');\n        after.setAttribute('name', 'after');\n\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', 'arrow-bar-both');\n\n        let dividerElement = document.createElement('div');\n        dividerElement.classList.add('wje-divider');\n        dividerElement.setAttribute('part', 'divider');\n        dividerElement.setAttribute('role', 'separator');\n        dividerElement.setAttribute('tabindex', '0');\n        dividerElement.setAttribute('aria-orientation', 'horizontal');\n        dividerElement.addEventListener('mousedown', this.handleDrag, false);\n\n        beforeElement.appendChild(before);\n        afterElement.appendChild(after);\n        dividerElement.appendChild(icon);\n\n        native.appendChild(beforeElement);\n        native.appendChild(afterElement);\n        native.appendChild(dividerElement);\n\n        fragment.appendChild(native);\n\n        this.native = native;\n\n        return fragment;\n    }\n\n    /**\n     * Handles the drag event.\n     * @param {Event} e The event.\n     */\n    handleDrag = (e) => {\n        const { width } = this.native.getBoundingClientRect();\n\n        drag(this, {\n            onMove: (x) => {\n                let value = (x / width) * 100;\n                this.position = parseFloat(this.clamp(value, 0, 100).toFixed(2));\n                this.native.style.setProperty('--wje-img-compare-divider-left', this.position + '%');\n                this.native.style.setProperty('--wje-img-compare-clip-path', `inset(0 ${100 - this.position}% 0 0)`);\n            },\n            initialEvent: e,\n        });\n    };\n\n    /**\n     * Clamps a number between a minimum and maximum value.\n     * @param {number} num The number to clamp.\n     * @param {number} min The minimum value.\n     * @param {number} max The maximum value.\n     * @returns {number} The clamped number.\n     */\n    clamp = (num, min, max) => Math.min(Math.max(num, min), max);\n}\n","import ImgComparer from './img-comparer.element.js';\n\nexport default ImgComparer;\n\nImgComparer.define('wje-img-comparer', ImgComparer);\n"],"names":[],"mappings":"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"}

package/dist/wje-img.js

@@ -127,19 +127,33 @@ class Img extends WJElement {
    * @returns {Array<string>}
    */
   static get observedAttributes() {
-    return ["src"];
+    return ["src", "alt"];
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    var _a, _b;
+    (_a = super.attributeChangedCallback) == null ? void 0 : _a.call(this, name, oldValue, newValue);
+    if (oldValue === newValue) return;
+    if (name === "alt") {
+      if (this.native) this.native.setAttribute("alt", this.alt || "");
+      const label = (_b = this.alt) == null ? void 0 : _b.trim();
+      if (label) this.setAriaState({ label });
+    }
   }
   /**
    * Sets up the attributes for the component.
    */
   setupAttributes() {
+    var _a;
     this.isShadowRoot = "open";
+    this.setAriaState({ role: "img" });
+    if ((_a = this.alt) == null ? void 0 : _a.trim()) this.setAriaState({ label: this.alt.trim() });
   }
   /**
    * Creates and assembles a lazy-loaded image element within a document fragment.
    * @returns {DocumentFragment} A document fragment containing the image element.
    */
   draw() {
+    var _a;
     let fragment = document.createDocumentFragment();
     let native = document.createElement("img");
     native.setAttribute("part", "native");
@@ -154,6 +168,7 @@ class Img extends WJElement {
     this.onerrorFunc(native);
     fragment.appendChild(native);
     this.native = native;
+    if ((_a = this.alt) == null ? void 0 : _a.trim()) this.setAriaState({ label: this.alt.trim() });
     return fragment;
   }
   /**

package/dist/wje-img.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-img.js","sources":["../packages/wje-img/img.element.js","../packages/wje-img/img.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element represents an image. `Img` is a custom web component that represents an image. It extends from `WJElement`.\n * @documentation https://elements.webjet.sk/components/img\n * @status stable\n * @augments {WJElement}\n * @cssproperty --img-width - The width of the image\n * @cssproperty --img-height - The height of the image\n * @property {string} src - The source URL of the image.\n * @property {string} alt - The alternative text for the image.\n * @property {string} fallout - The action to perform when an error occurs while loading the image. The value can be a function or a predefined action like 'delete'.\n * @property {string} loader - The URL of the image loader to display while the image is loading.\n * @tag wje-img\n */\nexport default class Img extends WJElement {\n    /**\n     * Creates an instance of Img.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this._fallout = false;\n\n        this.actions = {\n            delete: () => this.deleteImage(),\n            log: () => console.error('Error log pre obrázok:', this.src),\n        };\n    }\n\n    /**\n     * Sets the value of the `src` attribute for the element.\n     * @param {string} value The value to set for the `src` attribute.\n     */\n    set src(value) {\n        this.setAttribute('src', value);\n    }\n\n    /**\n     * Retrieves the value of the 'src' attribute from the element.\n     * @returns {string} The value of the 'src' attribute.\n     */\n    get src() {\n        return this.getAttribute('src');\n    }\n\n    /**\n     * Sets the value of the 'alt' attribute for the element.\n     * @param {string} value The new value to set for the 'alt' attribute.\n     */\n    set alt(value) {\n        this.setAttribute('alt', value);\n    }\n\n    /**\n     * Retrieves the value of the 'alt' attribute for the current element.\n     * @returns {string|null} The value of the 'alt' attribute, or null if the attribute is not set.\n     */\n    get alt() {\n        return this.getAttribute('alt');\n    }\n\n    /**\n     * Sets the fallout property. Updates the `fallout` attribute if the value is a string;\n     * otherwise, assigns the value to the `_fallout` property.\n     * @param {string|*} value The value to set for the fallout property. If a string, it will update the `fallout` attribute; for other types, it will assign it to the `_fallout` property.\n     */\n    set fallout(value) {\n        if (typeof value === 'string') {\n            this.setAttribute('fallout', value);\n        } else {\n            this._fallout = value;\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'fallout' attribute if it exists, otherwise returns the internal `_fallout` property.\n     * @returns {string|null} The value of the 'fallout' attribute or the `_fallout` property if the attribute is not present. Returns null if no value is found.\n     */\n    get fallout() {\n        return this.hasAttribute('fallout') ? this.getAttribute('fallout') : this._fallout;\n    }\n\n    /**\n     * Sets the value of the loader attribute.\n     * @param {string} value The value to set for the loader attribute.\n     */\n    set loader(value) {\n        if (value) {\n            this.setAttribute('loader', value);\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'loader' attribute from the element.\n     * @returns {string|null} The value of the 'loader' attribute if set, otherwise null.\n     */\n    get loader() {\n        return this.getAttribute('loader') || './assets/img/image-loader.gif';\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Img';\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 ['src'];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Creates and assembles a lazy-loaded image element within a document fragment.\n     * @returns {DocumentFragment} A document fragment containing the image element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('img');\n        native.setAttribute('part', 'native');\n        native.setAttribute('src', this.loader);\n        native.setAttribute('alt', this.alt || '');\n        native.classList.add('lazy-loaded-image', 'lazy');\n        native.addEventListener('error', (e) => {\n            const absoluteLoaderUrl = new URL(this.loader, window.location.origin).href;\n            if (e.target.src === absoluteLoaderUrl) return;\n\n            this.setAvatarInitials(true);\n        });\n\n        this.onerrorFunc(native);\n\n        fragment.appendChild(native);\n\n        this.native = native;\n\n        return fragment;\n    }\n\n    /**\n     * Handles post-draw operations, such as setting up a lazy image loader using an IntersectionObserver.\n     * Observes when the target element becomes visible in the viewport and updates its source with the provided image source.\n     * Removes the `lazy` class once the image source is updated and unobserves the element.\n     * It also invokes the `onerrorFunc` method at the beginning to handle potential error scenarios.\n     * @returns {void} Does not return a value.\n     */\n    afterDraw() {\n        let lazyImageObserver = new IntersectionObserver((entries, observer) => {\n            entries.forEach((entry) => {\n                if (entry.isIntersecting) {\n                    entry.target.src = this.src;\n                    this.classList.remove('lazy');\n\n                    lazyImageObserver.unobserve(entry.target);\n                }\n            });\n        });\n\n        lazyImageObserver.observe(this.native);\n    }\n\n    setAvatarInitials = (value = false) => {\n        let parent = this.parentElement;\n        if (parent?.tagName === 'WJE-AVATAR') parent.initials = value;\n    };\n    /**\n     * Deletes the current image by calling the remove method.\n     * This function is typically used to trigger the removal of an image element\n     * or perform cleanup operations related to the image.\n     */\n    deleteImage = () => {\n        this.remove();\n    };\n\n    /**\n     * Adds a new action to the internal actions object.\n     * @param {string} name The name of the action to be added.\n     * @param {Function} func The function representing the action logic.\n     * @returns {void} This method does not return a value.\n     */\n    addAction(name, func) {\n        if (typeof func === 'function') {\n            this.actions[name] = func;\n        } else {\n            console.error('The action must be a function.');\n        }\n    }\n\n    /**\n     * Removes an action from the actions list if it exists.\n     * @param {string} name The name of the action to remove.\n     * @returns {void} Does not return a value.\n     */\n    removeAction(name) {\n        if (this.actions[name]) {\n            delete this.actions[name];\n        } else {\n            console.error(`Action \"${name}\" does not exist.`);\n        }\n    }\n\n    /**\n     * Handles error scenarios by checking the `fallout` property and performing\n     * corresponding actions. If `fallout` is not defined, the function terminates\n     * early. Logs the active actions and attempts to assign an error handler\n     * based on the `fallout` value. If the `fallout` value does not correspond to\n     * a recognized action, it logs an error message.\n     * @function onerrorFunc\n     * @memberof Img\n     */\n    onerrorFunc = (img) => {\n        if (!this.fallout) return;\n        if (this.actions[this.fallout]) {\n            img.onerror = this.actions[this.fallout];\n        } else {\n            console.error('Unsupported value:', this.fallout);\n        }\n    };\n}\n","import Img from './img.element.js';\n\nexport default Img;\n\nImg.define('wje-img', Img);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-img.js","sources":["../packages/wje-img/img.element.js","../packages/wje-img/img.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element represents an image. `Img` is a custom web component that represents an image. It extends from `WJElement`.\n * @documentation https://elements.webjet.sk/components/img\n * @status stable\n * @augments {WJElement}\n * @cssproperty --img-width - The width of the image\n * @cssproperty --img-height - The height of the image\n * @property {string} src - The source URL of the image.\n * @property {string} alt - The alternative text for the image.\n * @property {string} fallout - The action to perform when an error occurs while loading the image. The value can be a function or a predefined action like 'delete'.\n * @property {string} loader - The URL of the image loader to display while the image is loading.\n * @tag wje-img\n */\nexport default class Img extends WJElement {\n    /**\n     * Creates an instance of Img.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this._fallout = false;\n\n        this.actions = {\n            delete: () => this.deleteImage(),\n            log: () => console.error('Error log pre obrázok:', this.src),\n        };\n    }\n\n    /**\n     * Sets the value of the `src` attribute for the element.\n     * @param {string} value The value to set for the `src` attribute.\n     */\n    set src(value) {\n        this.setAttribute('src', value);\n    }\n\n    /**\n     * Retrieves the value of the 'src' attribute from the element.\n     * @returns {string} The value of the 'src' attribute.\n     */\n    get src() {\n        return this.getAttribute('src');\n    }\n\n    /**\n     * Sets the value of the 'alt' attribute for the element.\n     * @param {string} value The new value to set for the 'alt' attribute.\n     */\n    set alt(value) {\n        this.setAttribute('alt', value);\n    }\n\n    /**\n     * Retrieves the value of the 'alt' attribute for the current element.\n     * @returns {string|null} The value of the 'alt' attribute, or null if the attribute is not set.\n     */\n    get alt() {\n        return this.getAttribute('alt');\n    }\n\n    /**\n     * Sets the fallout property. Updates the `fallout` attribute if the value is a string;\n     * otherwise, assigns the value to the `_fallout` property.\n     * @param {string|*} value The value to set for the fallout property. If a string, it will update the `fallout` attribute; for other types, it will assign it to the `_fallout` property.\n     */\n    set fallout(value) {\n        if (typeof value === 'string') {\n            this.setAttribute('fallout', value);\n        } else {\n            this._fallout = value;\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'fallout' attribute if it exists, otherwise returns the internal `_fallout` property.\n     * @returns {string|null} The value of the 'fallout' attribute or the `_fallout` property if the attribute is not present. Returns null if no value is found.\n     */\n    get fallout() {\n        return this.hasAttribute('fallout') ? this.getAttribute('fallout') : this._fallout;\n    }\n\n    /**\n     * Sets the value of the loader attribute.\n     * @param {string} value The value to set for the loader attribute.\n     */\n    set loader(value) {\n        if (value) {\n            this.setAttribute('loader', value);\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'loader' attribute from the element.\n     * @returns {string|null} The value of the 'loader' attribute if set, otherwise null.\n     */\n    get loader() {\n        return this.getAttribute('loader') || './assets/img/image-loader.gif';\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Img';\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 ['src', 'alt'];\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n        if (oldValue === newValue) return;\n        if (name === 'alt') {\n            if (this.native) this.native.setAttribute('alt', this.alt || '');\n            const label = this.alt?.trim();\n            if (label) this.setAriaState({ label });\n        }\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({ role: 'img' });\n        if (this.alt?.trim()) this.setAriaState({ label: this.alt.trim() });\n    }\n\n    /**\n     * Creates and assembles a lazy-loaded image element within a document fragment.\n     * @returns {DocumentFragment} A document fragment containing the image element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('img');\n        native.setAttribute('part', 'native');\n        native.setAttribute('src', this.loader);\n        native.setAttribute('alt', this.alt || '');\n        native.classList.add('lazy-loaded-image', 'lazy');\n        native.addEventListener('error', (e) => {\n            const absoluteLoaderUrl = new URL(this.loader, window.location.origin).href;\n            if (e.target.src === absoluteLoaderUrl) return;\n\n            this.setAvatarInitials(true);\n        });\n\n        this.onerrorFunc(native);\n\n        fragment.appendChild(native);\n\n        this.native = native;\n\n        if (this.alt?.trim()) this.setAriaState({ label: this.alt.trim() });\n\n        return fragment;\n    }\n\n    /**\n     * Handles post-draw operations, such as setting up a lazy image loader using an IntersectionObserver.\n     * Observes when the target element becomes visible in the viewport and updates its source with the provided image source.\n     * Removes the `lazy` class once the image source is updated and unobserves the element.\n     * It also invokes the `onerrorFunc` method at the beginning to handle potential error scenarios.\n     * @returns {void} Does not return a value.\n     */\n    afterDraw() {\n        let lazyImageObserver = new IntersectionObserver((entries, observer) => {\n            entries.forEach((entry) => {\n                if (entry.isIntersecting) {\n                    entry.target.src = this.src;\n                    this.classList.remove('lazy');\n\n                    lazyImageObserver.unobserve(entry.target);\n                }\n            });\n        });\n\n        lazyImageObserver.observe(this.native);\n    }\n\n    setAvatarInitials = (value = false) => {\n        let parent = this.parentElement;\n        if (parent?.tagName === 'WJE-AVATAR') parent.initials = value;\n    };\n    /**\n     * Deletes the current image by calling the remove method.\n     * This function is typically used to trigger the removal of an image element\n     * or perform cleanup operations related to the image.\n     */\n    deleteImage = () => {\n        this.remove();\n    };\n\n    /**\n     * Adds a new action to the internal actions object.\n     * @param {string} name The name of the action to be added.\n     * @param {Function} func The function representing the action logic.\n     * @returns {void} This method does not return a value.\n     */\n    addAction(name, func) {\n        if (typeof func === 'function') {\n            this.actions[name] = func;\n        } else {\n            console.error('The action must be a function.');\n        }\n    }\n\n    /**\n     * Removes an action from the actions list if it exists.\n     * @param {string} name The name of the action to remove.\n     * @returns {void} Does not return a value.\n     */\n    removeAction(name) {\n        if (this.actions[name]) {\n            delete this.actions[name];\n        } else {\n            console.error(`Action \"${name}\" does not exist.`);\n        }\n    }\n\n    /**\n     * Handles error scenarios by checking the `fallout` property and performing\n     * corresponding actions. If `fallout` is not defined, the function terminates\n     * early. Logs the active actions and attempts to assign an error handler\n     * based on the `fallout` value. If the `fallout` value does not correspond to\n     * a recognized action, it logs an error message.\n     * @function onerrorFunc\n     * @memberof Img\n     */\n    onerrorFunc = (img) => {\n        if (!this.fallout) return;\n        if (this.actions[this.fallout]) {\n            img.onerror = this.actions[this.fallout];\n        } else {\n            console.error('Unsupported value:', this.fallout);\n        }\n    };\n}\n","import Img from './img.element.js';\n\nexport default Img;\n\nImg.define('wje-img', Img);\n"],"names":[],"mappings":"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"}

package/dist/{packages/wje-infinite-scroll → wje-infinite-scroll}/infinite-scroll.element.d.ts

@@ -78,6 +78,10 @@ export default class InfiniteScroll extends WJElement {
     queryParams: any;
     size: any;
     currentPage: number;
+    /**
+     * Sync ARIA attributes on host.
+     */
+    syncAria(): void;
     /**
      * Attaches a scroll event listener to the current object.
      * The `scrollEvent` function binds the `onScroll` method to the 'scroll' event

package/dist/wje-infinite-scroll.js

@@ -194,6 +194,7 @@ class InfiniteScroll extends WJElement {
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.syncAria();
   }
   /**
    * Prepares the component for updates before it is drawn.
@@ -254,6 +255,7 @@ class InfiniteScroll extends WJElement {
    * Called after the component has been drawn.
    */
   async afterDraw() {
+    this.syncAria();
     this.queryParams = this.queryParams || "";
     this.size = +this.size || 10;
     this.currentPage = 0;
@@ -261,6 +263,14 @@ class InfiniteScroll extends WJElement {
     __privateSet(this, _loading, this.loadPages(this.currentPage));
     await __privateGet(this, _loading);
   }
+  /**
+   * Sync ARIA attributes on host.
+   */
+  syncAria() {
+    if (!this.hasAttribute("role")) {
+      this.setAriaState({ role: "list" });
+    }
+  }
   /**
    * Fetches the pages from the server.
    * @param {number} page The page number.

package/dist/wje-infinite-scroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-infinite-scroll.js","sources":["../packages/wje-infinite-scroll/infinite-scroll.element.js","../packages/wje-infinite-scroll/infinite-scroll.js"],"sourcesContent":["import { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `InfiniteScroll` is a custom web component that represents an infinite scroll.\n * It extends from `WJElement`.\n * @summary This element allows users to scroll through a potentially infinite amount of content.\n * @documentation https://elements.webjet.sk/components/infinite-scroll\n * @status stable\n * @augments {WJElement}\n * @csspart loader - The loader part of the infinite scroll.\n * @slot - The default slot for the infinite scroll.\n * @cssproperty [--wje-infinite-scroll-width=100%] - Sets the width of the infinite scroll container. his property determines how wide the infinite scroll area will be relative to its parent element. Accepts any valid CSS width value, such as percentages (`%`), pixels (`px`), or viewport units (`vw`). The default value is `100%`, which makes it span the full width of its container.\n * @cssproperty [--wje-infinite-scroll-height=300px] - Defines the height of the infinite scroll container. This property specifies how tall the infinite scroll area should be. Accepts any valid CSS height value, such as pixels (`px`), percentages (`%`), or viewport units (`vh`). The default value is `300px`, providing a fixed height suitable for most use cases.\n * //@fires wje-infinite-scroll:click-item - Event fired when an item is clicked.\n * @tag wje-infinite-scroll\n */\n\nexport default class InfiniteScroll extends WJElement {\n    #drawnItems;\n    #loadedItems;\n    #response;\n    #infiniteScrollTemplate;\n    #abortController;\n    #signal;\n    #loading;\n    /**\n     * Creates an instance of InfiniteScroll.\n     */\n    constructor() {\n        super();\n\n        this.totalPages = 0;\n        this.isLoading = [];\n        this.#response = {};\n        this.iterate = null;\n        this.#infiniteScrollTemplate = null;\n        this.#abortController = new AbortController();\n        this.#signal = this.#abortController.signal;\n        this.#drawnItems = [];\n        this.#loadedItems = [];\n        this.placementObj = this;\n    }\n\n    /**\n     * Dependencies of the InfiniteScroll component.\n     * @param value\n     */\n    set infiniteScrollTemplate(value) {\n        this.#infiniteScrollTemplate = value;\n    }\n\n    /**\n     * Getter for the infiniteScrollTemplate property.\n     * @returns {null}\n     */\n    get infiniteScrollTemplate() {\n        return this.#infiniteScrollTemplate;\n    }\n\n    /**\n     * Dependencies of the InfiniteScroll component.\n     * @param value\n     */\n    set response(value) {\n        this.#response = value;\n    }\n\n    /**\n     * Getter for the response property.\n     * @returns {*|{}}\n     */\n    get response() {\n        return this.#response;\n    }\n\n    /**\n     * Dependencies of the InfiniteScroll component.\n     * @param value\n     */\n    set objectName(value) {\n        this.setAttribute('object-name', value);\n    }\n\n    get objectName() {\n        return this.getAttribute('object-name') ?? 'data';\n    }\n\n    className = 'InfiniteScroll';\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 for updates before it is drawn.\n     * This method handles the removal of templates for iteration, adjusts the height styling of the component,\n     * and manages abort signals for loading operations.\n     * @returns {void} No return value.\n     */\n    beforeDraw() {\n        this.#loadedItems = [];\n        this.#drawnItems = [];\n\n        this.iterate = this.querySelector('[iterate]');\n\n        if (this.iterate) {\n            if (this.iterate.nodeName !== 'TEMPLATE') {\n                console.error('The iterate attribute must be a template element');\n                this.infiniteScrollTemplate = this.iterate?.outerHTML;\n            } else {\n                this.infiniteScrollTemplate = this.iterate?.innerHTML;\n            }\n\n            this.iterate?.remove(); // remove template\n        }\n\n        this.setAttribute('style', 'height: ' + this.height);\n\n        // if this.#loading is not fulfilled then cancel the promise\n        if (this.#signal) {\n            this.#abortController.abort();\n            this.#abortController = new AbortController();\n            this.#signal = this.#abortController.signal;\n        }\n    }\n\n    /**\n     * Creates and returns a document fragment containing the structure for an infinite scroll component.\n     * The structure includes native elements, slots for customization, and optional loading content.\n     * @returns {DocumentFragment} The document fragment containing the component's DOM structure.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-infinite-scroll');\n        native.setAttribute('part', 'native-infinite-scroll');\n\n        let slot = document.createElement('slot');\n\n        let ending = document.createElement('slot');\n        ending.setAttribute('name', 'ending');\n\n        if (WjElementUtils.hasSlot(this, 'loader')) {\n            let loading = document.createElement('div');\n            loading.classList.add('loading');\n\n            let loader = document.createElement('slot');\n            loader.setAttribute('name', 'loader');\n\n            loading.appendChild(loader);\n\n            this.loadingEl = loading;\n\n            fragment.appendChild(loading);\n        }\n\n        native.appendChild(slot);\n        native.appendChild(ending);\n\n        fragment.appendChild(native);\n\n        this.endingEl = ending;\n\n        return fragment;\n    }\n\n    /**\n     * Called after the component has been drawn.\n     */\n    async afterDraw() {\n        this.queryParams = this.queryParams || '';\n        this.size = +this.size || 10;\n        this.currentPage = 0;\n\n        this.scrollEvent();\n        this.#loading = this.loadPages(this.currentPage);\n        await this.#loading;\n    }\n\n    /**\n     * Attaches a scroll event listener to the current object.\n     * The `scrollEvent` function binds the `onScroll` method to the 'scroll' event\n     * of the current object. This enables handling of scroll events for\n     * specific functionality such as updating UI elements, loading content dynamically,\n     * or tracking user interaction with scrollable content.\n     */\n    scrollEvent = () => {\n        this.addEventListener('scroll', this.onScroll);\n    };\n\n    /**\n     * A function that removes the scroll event listener from the current context.\n     * This function is used to unbind the `onScroll` event listener\n     * from the `scroll` event of the current object. It ensures that\n     * the scroll event no longer triggers the `onScroll` handler.\n     * @function\n     */\n    unScrollEvent = () => {\n        this.removeEventListener('scroll', this.onScroll);\n    };\n\n    /**\n     * A scroll event handler function that checks the scroll position and triggers loading additional content\n     * when the user scrolls near the bottom of the page.\n     * Properties accessed:\n     * - `scrollTop`: The number of pixels that the content of an element is scrolled vertically.\n     * - `scrollHeight`: The total height of the element's content.\n     * - `clientHeight`: The inner height of the element in pixels, including padding but excluding borders and scrollbars.\n     * Conditions:\n     * - Determines if the scroll position is within 300 pixels of the bottom of the element.\n     * - Verifies that the current page number is less than or equal to the total number of pages.\n     * - Checks if the current page is already in the loading state.\n     * Actions:\n     * - Increments the current page number when the conditions are met.\n     * - Initiates loading for the next page by calling the `loadPages` function.\n     * @param {Event} e The scroll event object.\n     */\n    onScroll = (e) => {\n        const { scrollTop, scrollHeight, clientHeight } = e.target;\n\n        if (\n            scrollTop + clientHeight >= scrollHeight - 300 &&\n            this.currentPage <= this.totalPages &&\n            this.isLoading.includes(this.currentPage)\n        ) {\n            this.currentPage++;\n            this.#loading = this.loadPages(this.currentPage);\n        }\n    };\n\n    /**\n     * Fetches the pages from the server.\n     * @param {number} page The page number.\n     * @returns {Promise<object>} The response from the server.\n     */\n    async getPages(page) {\n        let hasParams = this.url?.includes('?');\n        const response = await fetch(\n            `${this.url}${hasParams ? '&' : '?'}page=${page}&size=${this.size}${this?.queryParams}`,\n            {\n                signal: this.#signal,\n            }\n        );\n\n        if (!response.ok) {\n            throw new Error(`An error occurred: ${response.status}`);\n        }\n        return await response.json();\n    }\n\n    /**\n     * Hides the loader.\n     */\n    hideLoader() {\n        this?.loadingEl?.classList.remove('show');\n    }\n\n    /**\n     * Displays the loader element by adding the 'show' class to its class list.\n     * This method is useful for indicating a loading or processing state in the UI.\n     * @returns {void} No return value.\n     */\n    showLoader() {\n        this?.loadingEl?.classList.add('show');\n    }\n\n    /**\n     * Checks if there are more pages to load.\n     * @param {number} page The page number.\n     * @returns {boolean} Whether there are more pages to load.\n     */\n    hasMorePages(page) {\n        return this.totalPages === 0 || page < this.totalPages;\n    }\n\n    /**\n     * Loads the pages.\n     * @param {number} page The page number.\n     */\n    async loadPages(page) {\n        this.showLoader();\n        try {\n            event.dispatchCustomEvent(this, 'wje-infinite-scroll:start');\n            if (this.hasMorePages(page)) {\n                let response;\n                this.parser = new DOMParser();\n\n                if (typeof this.setCustomData === 'function') {\n                    response = await this.setCustomData(page, this.#signal);\n                } else {\n                    response = await this.getPages(page);\n                }\n\n                this.totalPages = Number(response?.totalPages ?? 0);\n                this.currentPage = page;\n\n                this.placementObj = this;\n\n                // if there is a \"container\" attribute, find the element\n                if (this.hasAttribute('placement')) this.placementObj = this.querySelector(this.placement);\n\n                event.dispatchCustomEvent(this, 'wje-infinite-scroll:load', response);\n\n                this.response = response;\n\n                // Normalize items: support array responses and common paged formats.\n                let items;\n                if (Array.isArray(response)) {\n                    items = response;\n                } else if (this.objectName && Array.isArray(response?.[this.objectName])) {\n                    items = response[this.objectName];\n                } else if (Array.isArray(response?.content)) {\n                    // common Spring pageable style\n                    items = response.content;\n                } else {\n                    items = [];\n                }\n\n                this.#loadedItems = items;\n\n                const notDrawnItems = this.#loadedItems.filter(\n                    (item) => !this.#drawnItems.some(this.compareFunction.bind(this, item))\n                );\n                this.customForeach(notDrawnItems);\n                this.#drawnItems.push(...notDrawnItems);\n\n                this.isLoading.push(page);\n                event.dispatchCustomEvent(this, 'wje-infinite-scroll:finish', response);\n            } else {\n                event.dispatchCustomEvent(this, 'wje-infinite-scroll:complete');\n                this.endingEl.classList.add('show');\n            }\n        } catch (error) {\n            console.error(error);\n        } finally {\n            this.hideLoader();\n        }\n    }\n\n    compareFunction = (i, item) => i.id === item.id;\n\n    /**\n     * Converts a data item into an HTML element based on a template.\n     * This function takes a data item, interpolates it into a predefined template,\n     * parses the resulting HTML string, and returns the first child element of the parsed HTML content.\n     * @param {object} item The data object to interpolate into the HTML template.\n     * @returns {Element} The first child element generated from the interpolated HTML string.\n     */\n    dataToHtml = (item) => {\n        let interpolateItem = this.interpolate(this.infiniteScrollTemplate, item);\n        let doc = this.parser.parseFromString(interpolateItem, 'text/html');\n        let element = doc.activeElement.firstElementChild;\n\n        return element;\n    };\n\n    /**\n     * A custom implementation of the forEach method designed to iterate over an array of data,\n     * transform each item into an HTML element, and append the element to a specified placement object.\n     * Additionally, it adds an event listener to each generated element for handling click events.\n     * @param {Array} data An array of items to process. Each item is transformed into an HTML element\n     * and appended to the placement object specified in the context of `this`.\n     */\n    customForeach = (data) => {\n        data.forEach((item) => {\n            let element = this.dataToHtml(item);\n\n            let symbol = Symbol(\"infinite-scroll-item\");\n            element[symbol] = item;\n            item[symbol] = element;\n\n            event.addListener(element, 'click', 'wje-infinite-scroll:click-item', null);\n\n            this.placementObj.insertAdjacentElement('beforeend', element);\n        });\n    };\n\n    /**\n     * Interpolates a string template with values from the provided parameters object.\n     * The template contains placeholders in the format `{{key}}` or `{{key.subkey}}`,\n     * which are replaced with the corresponding values from the `params` object.\n     * Placeholders support dot notation for accessing nested properties within the `params` object.\n     * @param {string} template The string template containing placeholders to be replaced.\n     * @param {object} params The object containing key-value pairs used for substitution in the template.\n     * @returns {string} A string with all placeholders replaced by their respective values from the `params` object.\n     */\n    interpolate = (template, params) => {\n        let keys = template.match(/\\{{.*?\\}}/g);\n\n        if (keys) {\n            for (let key of keys) {\n                let cleanKey = key.replace('{{', '').replace('}}', '');\n                let val = '';\n                cleanKey.split('.').forEach((k) => {\n                    val = val === '' ? params[k] : val[k];\n                });\n\n                template = template.replace(key, val);\n            }\n        }\n        return template;\n    };\n\n    addItem(item, place = 'beforeend') {\n        let element = this.dataToHtml(item);\n\n        let symbol = Symbol(\"infinite-scroll-item\");\n        element[symbol] = item;\n        item[symbol] = element;\n\n        this.placementObj.insertAdjacentElement(place, element);\n\n        this.#drawnItems.push(item);\n\n        // if drawnItems are more than page * size then add the page to isLoading\n        if (this.#drawnItems.length > this.size * this.currentPage) {\n            this.totalPages += 1;\n        }\n    }\n\n    removeItem(item) {\n        let drawnItem = this.#drawnItems.find(this.compareFunction.bind(this, item));\n        if (!drawnItem) {\n            console.error('Item not found');\n            return;\n        }\n        let symbol = Object.getOwnPropertySymbols(drawnItem).at(0);\n        let element = drawnItem[symbol];\n        if (!element) {\n            console.error('Element not found');\n            return;\n        }\n\n        element?.remove();\n\n        this.#drawnItems = this.#drawnItems.filter((i) => i !== item);\n        // if drawnItems are less than page * size then remove the page from isLoading\n        if (this.#drawnItems.length < this.size * this.currentPage) {\n            this.isLoading = this.isLoading.filter((i) => i !== this.currentPage);\n            this.currentPage--;\n        }\n    }\n\n    reset() {\n        this.isLoading = [];\n        this.currentPage = 0;\n        this.totalPages = 0;\n        this.response = {};\n        this.#drawnItems = [];\n        this.#loadedItems = [];\n        this.placementObj.innerHTML = '';\n    }\n}\n","import InfiniteScroll from './infinite-scroll.element.js';\n\nexport default InfiniteScroll;\n\nInfiniteScroll.define('wje-infinite-scroll', InfiniteScroll);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-infinite-scroll.js","sources":["../packages/wje-infinite-scroll/infinite-scroll.element.js","../packages/wje-infinite-scroll/infinite-scroll.js"],"sourcesContent":["import { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `InfiniteScroll` is a custom web component that represents an infinite scroll.\n * It extends from `WJElement`.\n * @summary This element allows users to scroll through a potentially infinite amount of content.\n * @documentation https://elements.webjet.sk/components/infinite-scroll\n * @status stable\n * @augments {WJElement}\n * @csspart loader - The loader part of the infinite scroll.\n * @slot - The default slot for the infinite scroll.\n * @cssproperty [--wje-infinite-scroll-width=100%] - Sets the width of the infinite scroll container. his property determines how wide the infinite scroll area will be relative to its parent element. Accepts any valid CSS width value, such as percentages (`%`), pixels (`px`), or viewport units (`vw`). The default value is `100%`, which makes it span the full width of its container.\n * @cssproperty [--wje-infinite-scroll-height=300px] - Defines the height of the infinite scroll container. This property specifies how tall the infinite scroll area should be. Accepts any valid CSS height value, such as pixels (`px`), percentages (`%`), or viewport units (`vh`). The default value is `300px`, providing a fixed height suitable for most use cases.\n * //@fires wje-infinite-scroll:click-item - Event fired when an item is clicked.\n * @tag wje-infinite-scroll\n */\n\nexport default class InfiniteScroll extends WJElement {\n    #drawnItems;\n    #loadedItems;\n    #response;\n    #infiniteScrollTemplate;\n    #abortController;\n    #signal;\n    #loading;\n    /**\n     * Creates an instance of InfiniteScroll.\n     */\n    constructor() {\n        super();\n\n        this.totalPages = 0;\n        this.isLoading = [];\n        this.#response = {};\n        this.iterate = null;\n        this.#infiniteScrollTemplate = null;\n        this.#abortController = new AbortController();\n        this.#signal = this.#abortController.signal;\n        this.#drawnItems = [];\n        this.#loadedItems = [];\n        this.placementObj = this;\n    }\n\n    /**\n     * Dependencies of the InfiniteScroll component.\n     * @param value\n     */\n    set infiniteScrollTemplate(value) {\n        this.#infiniteScrollTemplate = value;\n    }\n\n    /**\n     * Getter for the infiniteScrollTemplate property.\n     * @returns {null}\n     */\n    get infiniteScrollTemplate() {\n        return this.#infiniteScrollTemplate;\n    }\n\n    /**\n     * Dependencies of the InfiniteScroll component.\n     * @param value\n     */\n    set response(value) {\n        this.#response = value;\n    }\n\n    /**\n     * Getter for the response property.\n     * @returns {*|{}}\n     */\n    get response() {\n        return this.#response;\n    }\n\n    /**\n     * Dependencies of the InfiniteScroll component.\n     * @param value\n     */\n    set objectName(value) {\n        this.setAttribute('object-name', value);\n    }\n\n    get objectName() {\n        return this.getAttribute('object-name') ?? 'data';\n    }\n\n    className = 'InfiniteScroll';\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 the component for updates before it is drawn.\n     * This method handles the removal of templates for iteration, adjusts the height styling of the component,\n     * and manages abort signals for loading operations.\n     * @returns {void} No return value.\n     */\n    beforeDraw() {\n        this.#loadedItems = [];\n        this.#drawnItems = [];\n\n        this.iterate = this.querySelector('[iterate]');\n\n        if (this.iterate) {\n            if (this.iterate.nodeName !== 'TEMPLATE') {\n                console.error('The iterate attribute must be a template element');\n                this.infiniteScrollTemplate = this.iterate?.outerHTML;\n            } else {\n                this.infiniteScrollTemplate = this.iterate?.innerHTML;\n            }\n\n            this.iterate?.remove(); // remove template\n        }\n\n        this.setAttribute('style', 'height: ' + this.height);\n\n        // if this.#loading is not fulfilled then cancel the promise\n        if (this.#signal) {\n            this.#abortController.abort();\n            this.#abortController = new AbortController();\n            this.#signal = this.#abortController.signal;\n        }\n    }\n\n    /**\n     * Creates and returns a document fragment containing the structure for an infinite scroll component.\n     * The structure includes native elements, slots for customization, and optional loading content.\n     * @returns {DocumentFragment} The document fragment containing the component's DOM structure.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-infinite-scroll');\n        native.setAttribute('part', 'native-infinite-scroll');\n\n        let slot = document.createElement('slot');\n\n        let ending = document.createElement('slot');\n        ending.setAttribute('name', 'ending');\n\n        if (WjElementUtils.hasSlot(this, 'loader')) {\n            let loading = document.createElement('div');\n            loading.classList.add('loading');\n\n            let loader = document.createElement('slot');\n            loader.setAttribute('name', 'loader');\n\n            loading.appendChild(loader);\n\n            this.loadingEl = loading;\n\n            fragment.appendChild(loading);\n        }\n\n        native.appendChild(slot);\n        native.appendChild(ending);\n\n        fragment.appendChild(native);\n\n        this.endingEl = ending;\n\n        return fragment;\n    }\n\n    /**\n     * Called after the component has been drawn.\n     */\n    async afterDraw() {\n        this.syncAria();\n        this.queryParams = this.queryParams || '';\n        this.size = +this.size || 10;\n        this.currentPage = 0;\n\n        this.scrollEvent();\n        this.#loading = this.loadPages(this.currentPage);\n        await this.#loading;\n    }\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        if (!this.hasAttribute('role')) {\n            this.setAriaState({ role: 'list' });\n        }\n    }\n\n    /**\n     * Attaches a scroll event listener to the current object.\n     * The `scrollEvent` function binds the `onScroll` method to the 'scroll' event\n     * of the current object. This enables handling of scroll events for\n     * specific functionality such as updating UI elements, loading content dynamically,\n     * or tracking user interaction with scrollable content.\n     */\n    scrollEvent = () => {\n        this.addEventListener('scroll', this.onScroll);\n    };\n\n    /**\n     * A function that removes the scroll event listener from the current context.\n     * This function is used to unbind the `onScroll` event listener\n     * from the `scroll` event of the current object. It ensures that\n     * the scroll event no longer triggers the `onScroll` handler.\n     * @function\n     */\n    unScrollEvent = () => {\n        this.removeEventListener('scroll', this.onScroll);\n    };\n\n    /**\n     * A scroll event handler function that checks the scroll position and triggers loading additional content\n     * when the user scrolls near the bottom of the page.\n     * Properties accessed:\n     * - `scrollTop`: The number of pixels that the content of an element is scrolled vertically.\n     * - `scrollHeight`: The total height of the element's content.\n     * - `clientHeight`: The inner height of the element in pixels, including padding but excluding borders and scrollbars.\n     * Conditions:\n     * - Determines if the scroll position is within 300 pixels of the bottom of the element.\n     * - Verifies that the current page number is less than or equal to the total number of pages.\n     * - Checks if the current page is already in the loading state.\n     * Actions:\n     * - Increments the current page number when the conditions are met.\n     * - Initiates loading for the next page by calling the `loadPages` function.\n     * @param {Event} e The scroll event object.\n     */\n    onScroll = (e) => {\n        const { scrollTop, scrollHeight, clientHeight } = e.target;\n\n        if (\n            scrollTop + clientHeight >= scrollHeight - 300 &&\n            this.currentPage <= this.totalPages &&\n            this.isLoading.includes(this.currentPage)\n        ) {\n            this.currentPage++;\n            this.#loading = this.loadPages(this.currentPage);\n        }\n    };\n\n    /**\n     * Fetches the pages from the server.\n     * @param {number} page The page number.\n     * @returns {Promise<object>} The response from the server.\n     */\n    async getPages(page) {\n        let hasParams = this.url?.includes('?');\n        const response = await fetch(\n            `${this.url}${hasParams ? '&' : '?'}page=${page}&size=${this.size}${this?.queryParams}`,\n            {\n                signal: this.#signal,\n            }\n        );\n\n        if (!response.ok) {\n            throw new Error(`An error occurred: ${response.status}`);\n        }\n        return await response.json();\n    }\n\n    /**\n     * Hides the loader.\n     */\n    hideLoader() {\n        this?.loadingEl?.classList.remove('show');\n    }\n\n    /**\n     * Displays the loader element by adding the 'show' class to its class list.\n     * This method is useful for indicating a loading or processing state in the UI.\n     * @returns {void} No return value.\n     */\n    showLoader() {\n        this?.loadingEl?.classList.add('show');\n    }\n\n    /**\n     * Checks if there are more pages to load.\n     * @param {number} page The page number.\n     * @returns {boolean} Whether there are more pages to load.\n     */\n    hasMorePages(page) {\n        return this.totalPages === 0 || page < this.totalPages;\n    }\n\n    /**\n     * Loads the pages.\n     * @param {number} page The page number.\n     */\n    async loadPages(page) {\n        this.showLoader();\n        try {\n            event.dispatchCustomEvent(this, 'wje-infinite-scroll:start');\n            if (this.hasMorePages(page)) {\n                let response;\n                this.parser = new DOMParser();\n\n                if (typeof this.setCustomData === 'function') {\n                    response = await this.setCustomData(page, this.#signal);\n                } else {\n                    response = await this.getPages(page);\n                }\n\n                this.totalPages = Number(response?.totalPages ?? 0);\n                this.currentPage = page;\n\n                this.placementObj = this;\n\n                // if there is a \"container\" attribute, find the element\n                if (this.hasAttribute('placement')) this.placementObj = this.querySelector(this.placement);\n\n                event.dispatchCustomEvent(this, 'wje-infinite-scroll:load', response);\n\n                this.response = response;\n\n                // Normalize items: support array responses and common paged formats.\n                let items;\n                if (Array.isArray(response)) {\n                    items = response;\n                } else if (this.objectName && Array.isArray(response?.[this.objectName])) {\n                    items = response[this.objectName];\n                } else if (Array.isArray(response?.content)) {\n                    // common Spring pageable style\n                    items = response.content;\n                } else {\n                    items = [];\n                }\n\n                this.#loadedItems = items;\n\n                const notDrawnItems = this.#loadedItems.filter(\n                    (item) => !this.#drawnItems.some(this.compareFunction.bind(this, item))\n                );\n                this.customForeach(notDrawnItems);\n                this.#drawnItems.push(...notDrawnItems);\n\n                this.isLoading.push(page);\n                event.dispatchCustomEvent(this, 'wje-infinite-scroll:finish', response);\n            } else {\n                event.dispatchCustomEvent(this, 'wje-infinite-scroll:complete');\n                this.endingEl.classList.add('show');\n            }\n        } catch (error) {\n            console.error(error);\n        } finally {\n            this.hideLoader();\n        }\n    }\n\n    compareFunction = (i, item) => i.id === item.id;\n\n    /**\n     * Converts a data item into an HTML element based on a template.\n     * This function takes a data item, interpolates it into a predefined template,\n     * parses the resulting HTML string, and returns the first child element of the parsed HTML content.\n     * @param {object} item The data object to interpolate into the HTML template.\n     * @returns {Element} The first child element generated from the interpolated HTML string.\n     */\n    dataToHtml = (item) => {\n        let interpolateItem = this.interpolate(this.infiniteScrollTemplate, item);\n        let doc = this.parser.parseFromString(interpolateItem, 'text/html');\n        let element = doc.activeElement.firstElementChild;\n\n        return element;\n    };\n\n    /**\n     * A custom implementation of the forEach method designed to iterate over an array of data,\n     * transform each item into an HTML element, and append the element to a specified placement object.\n     * Additionally, it adds an event listener to each generated element for handling click events.\n     * @param {Array} data An array of items to process. Each item is transformed into an HTML element\n     * and appended to the placement object specified in the context of `this`.\n     */\n    customForeach = (data) => {\n        data.forEach((item) => {\n            let element = this.dataToHtml(item);\n\n            let symbol = Symbol(\"infinite-scroll-item\");\n            element[symbol] = item;\n            item[symbol] = element;\n\n            event.addListener(element, 'click', 'wje-infinite-scroll:click-item', null);\n\n            this.placementObj.insertAdjacentElement('beforeend', element);\n        });\n    };\n\n    /**\n     * Interpolates a string template with values from the provided parameters object.\n     * The template contains placeholders in the format `{{key}}` or `{{key.subkey}}`,\n     * which are replaced with the corresponding values from the `params` object.\n     * Placeholders support dot notation for accessing nested properties within the `params` object.\n     * @param {string} template The string template containing placeholders to be replaced.\n     * @param {object} params The object containing key-value pairs used for substitution in the template.\n     * @returns {string} A string with all placeholders replaced by their respective values from the `params` object.\n     */\n    interpolate = (template, params) => {\n        let keys = template.match(/\\{{.*?\\}}/g);\n\n        if (keys) {\n            for (let key of keys) {\n                let cleanKey = key.replace('{{', '').replace('}}', '');\n                let val = '';\n                cleanKey.split('.').forEach((k) => {\n                    val = val === '' ? params[k] : val[k];\n                });\n\n                template = template.replace(key, val);\n            }\n        }\n        return template;\n    };\n\n    addItem(item, place = 'beforeend') {\n        let element = this.dataToHtml(item);\n\n        let symbol = Symbol(\"infinite-scroll-item\");\n        element[symbol] = item;\n        item[symbol] = element;\n\n        this.placementObj.insertAdjacentElement(place, element);\n\n        this.#drawnItems.push(item);\n\n        // if drawnItems are more than page * size then add the page to isLoading\n        if (this.#drawnItems.length > this.size * this.currentPage) {\n            this.totalPages += 1;\n        }\n    }\n\n    removeItem(item) {\n        let drawnItem = this.#drawnItems.find(this.compareFunction.bind(this, item));\n        if (!drawnItem) {\n            console.error('Item not found');\n            return;\n        }\n        let symbol = Object.getOwnPropertySymbols(drawnItem).at(0);\n        let element = drawnItem[symbol];\n        if (!element) {\n            console.error('Element not found');\n            return;\n        }\n\n        element?.remove();\n\n        this.#drawnItems = this.#drawnItems.filter((i) => i !== item);\n        // if drawnItems are less than page * size then remove the page from isLoading\n        if (this.#drawnItems.length < this.size * this.currentPage) {\n            this.isLoading = this.isLoading.filter((i) => i !== this.currentPage);\n            this.currentPage--;\n        }\n    }\n\n    reset() {\n        this.isLoading = [];\n        this.currentPage = 0;\n        this.totalPages = 0;\n        this.response = {};\n        this.#drawnItems = [];\n        this.#loadedItems = [];\n        this.placementObj.innerHTML = '';\n    }\n}\n","import InfiniteScroll from './infinite-scroll.element.js';\n\nexport default InfiniteScroll;\n\nInfiniteScroll.define('wje-infinite-scroll', InfiniteScroll);\n"],"names":[],"mappings":"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"}

package/dist/{packages/wje-input → wje-input}/input.element.d.ts

@@ -26,6 +26,7 @@ import { FormAssociatedElement } from '../internals/form-associated-element.js';
  * // @fires wje-input:clear - Dispatched when the input is cleared.
  */
 export default class Input extends FormAssociatedElement {
+    static _instanceId: number;
     /**
      * Getter for the cssStyleSheet attribute.
      * @returns {CSSStyleSheet} The CSS style sheet of the input element.
@@ -37,6 +38,7 @@ export default class Input extends FormAssociatedElement {
      */
     static get observedAttributes(): any[];
     pristine: boolean;
+    _instanceId: number;
     /**
      * Setter for the value attribute.
      * @param {string} value The value to set.
@@ -48,7 +50,7 @@ export default class Input extends FormAssociatedElement {
      * @returns {string} The current value from the input element, the internal _value, or an empty string.
      */
     get value(): string;
-    _value: string;
+    _value: any;
     /**
      * Sets the label attribute of the element.
      * @param {string} value The value to set as the label attribute.
@@ -135,11 +137,13 @@ export default class Input extends FormAssociatedElement {
      * @returns {string} The value of the 'variant' attribute or 'default' if not set.
      */
     get variant(): string;
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
     /**
      * Draws the input element.
      * @returns {DocumentFragment} The drawn input.
      */
     draw(): DocumentFragment;
+    _ariaErrorId: string;
     clear: HTMLElement;
     native: HTMLDivElement;
     labelElement: HTMLLabelElement;
@@ -149,6 +153,10 @@ export default class Input extends FormAssociatedElement {
      * Runs after the input is drawn to the DOM.
      */
     afterDraw(): void;
+    /**
+     * Syncs ARIA attributes on the host element.
+     */
+    syncAria(): void;
     /**
      * Checks whether the input has a slot.
      * @param {HTMLElement} el The element to check.

package/dist/wje-input-file.js

@@ -52,6 +52,7 @@ class InputFile extends WJElement {
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.setAriaState({ role: "group" });
   }
   /**
    * Draws the component.
@@ -66,6 +67,7 @@ class InputFile extends WJElement {
     fileInput.setAttribute("type", "file");
     fileInput.setAttribute("multiple", "");
     fileInput.setAttribute("hidden", "");
+    fileInput.setAttribute("aria-hidden", "true");
     let input = document.createElement("wje-input");
     input.setAttribute("variant", "standard");
     input.setAttribute("type", "text");

package/dist/wje-input-file.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-input-file.js","sources":["../packages/wje-input-file/input-file.element.js","../packages/wje-input-file/input-file.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `InputFile` is a custom web component that represents a file input.\n * @summary This element represents a file input.\n * @documentation https://elements.webjet.sk/components/input-file\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native file input wrapper.\n * @csspart input - The text input.\n * @csspart file-input - The file input element.\n * // @fires wje-input-file:change - Event fired when the file input changes.\n * @tag wje-input-file\n */\nexport default class InputFile extends WJElement {\n    /**\n     * Constructor for the InputFile class.\n     */\n    constructor() {\n        super();\n        this._value = '';\n    }\n\n    /**\n     * @summary Sets the value of the input file.\n     * @param {string} value The value to set for the input file.\n     */\n    set value(value) {\n        this._value = value;\n    }\n\n    /**\n     * Gets the value of the input file.\n     * @returns {string}\n     */\n    get value() {\n        return this._value;\n    }\n\n    /**\n     * The class name for the InputFile class.\n     * @type {string}\n     */\n    className = 'Input';\n\n    /**\n     * Returns the CSS stylesheet.\n     * @static\n     * @returns {object} styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the observed attributes.\n     * @static\n     * @returns {Array} An empty array\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     * Draws the component.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        // Wrapper\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-input-file', this.variant || 'default');\n\n        // File Input\n        let fileInput = document.createElement('input');\n        fileInput.setAttribute('type', 'file');\n        fileInput.setAttribute('multiple', '');\n        fileInput.setAttribute('hidden', '');\n\n        // Input\n        let input = document.createElement('wje-input');\n        input.setAttribute('variant', 'standard');\n        input.setAttribute('type', 'text');\n        input.setAttribute('placeholder', 'Click to upload');\n        input.setAttribute('readonly', '');\n\n        let span = document.createElement('span');\n        span.setAttribute('slot', 'start');\n\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('slot', 'icon-only');\n        icon.setAttribute('name', 'cloud-upload');\n\n        span.appendChild(icon);\n        input.appendChild(span);\n\n        native.appendChild(input);\n        native.appendChild(fileInput);\n        fragment.appendChild(native);\n\n        this.native = native;\n        this.input = input;\n        this.fileInput = fileInput;\n\n        return fragment;\n    }\n\n    /**\n     * After draw method for the InputFile class.\n     */\n    afterDraw() {\n        this.input.addEventListener('click', () => {\n            this.fileInput.click();\n        });\n\n        this.fileInput.addEventListener('change', (e) => {\n            let files = e.target.files;\n            let fileNames = [];\n\n            for (let i = 0; i < files.length; i++) {\n                fileNames.push(files[i].name);\n            }\n\n            this.input.value = fileNames.join(', ');\n            this.value = files;\n            event.dispatchCustomEvent(this, 'wje-input-file:change', { files: files });\n        });\n    }\n}\n","import InputFile from './input-file.element.js';\n\nexport default InputFile;\n\nInputFile.define('wje-input-file', InputFile);\n"],"names":[],"mappings":";;;;;;AAee,MAAM,kBAAkB,UAAU;AAAA;AAAA;AAAA;AAAA,EAI7C,cAAc;AACV,UAAO;AAwBX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAvBR,SAAK,SAAS;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,MAAM,OAAO;AACb,SAAK,SAAS;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ;AACR,WAAO,KAAK;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,qBAAqB;AAC5B,WAAO,CAAE;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAGhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,qBAAqB,KAAK,WAAW,SAAS;AAGnE,QAAI,YAAY,SAAS,cAAc,OAAO;AAC9C,cAAU,aAAa,QAAQ,MAAM;AACrC,cAAU,aAAa,YAAY,EAAE;AACrC,cAAU,aAAa,UAAU,EAAE;AAGnC,QAAI,QAAQ,SAAS,cAAc,WAAW;AAC9C,UAAM,aAAa,WAAW,UAAU;AACxC,UAAM,aAAa,QAAQ,MAAM;AACjC,UAAM,aAAa,eAAe,iBAAiB;AACnD,UAAM,aAAa,YAAY,EAAE;AAEjC,QAAI,OAAO,SAAS,cAAc,MAAM;AACxC,SAAK,aAAa,QAAQ,OAAO;AAEjC,QAAI,OAAO,SAAS,cAAc,UAAU;AAC5C,SAAK,aAAa,QAAQ,WAAW;AACrC,SAAK,aAAa,QAAQ,cAAc;AAExC,SAAK,YAAY,IAAI;AACrB,UAAM,YAAY,IAAI;AAEtB,WAAO,YAAY,KAAK;AACxB,WAAO,YAAY,SAAS;AAC5B,aAAS,YAAY,MAAM;AAE3B,SAAK,SAAS;AACd,SAAK,QAAQ;AACb,SAAK,YAAY;AAEjB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,SAAK,MAAM,iBAAiB,SAAS,MAAM;AACvC,WAAK,UAAU,MAAO;AAAA,IAClC,CAAS;AAED,SAAK,UAAU,iBAAiB,UAAU,CAAC,MAAM;AAC7C,UAAI,QAAQ,EAAE,OAAO;AACrB,UAAI,YAAY,CAAE;AAElB,eAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACnC,kBAAU,KAAK,MAAM,CAAC,EAAE,IAAI;AAAA,MAC5C;AAEY,WAAK,MAAM,QAAQ,UAAU,KAAK,IAAI;AACtC,WAAK,QAAQ;AACb,YAAM,oBAAoB,MAAM,yBAAyB,EAAE,OAAc;AAAA,IACrF,CAAS;AAAA,EACT;AACA;ACtIA,UAAU,OAAO,kBAAkB,SAAS;"}
+{"version":3,"file":"wje-input-file.js","sources":["../packages/wje-input-file/input-file.element.js","../packages/wje-input-file/input-file.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `InputFile` is a custom web component that represents a file input.\n * @summary This element represents a file input.\n * @documentation https://elements.webjet.sk/components/input-file\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native file input wrapper.\n * @csspart input - The text input.\n * @csspart file-input - The file input element.\n * // @fires wje-input-file:change - Event fired when the file input changes.\n * @tag wje-input-file\n */\nexport default class InputFile extends WJElement {\n    /**\n     * Constructor for the InputFile class.\n     */\n    constructor() {\n        super();\n        this._value = '';\n    }\n\n    /**\n     * @summary Sets the value of the input file.\n     * @param {string} value The value to set for the input file.\n     */\n    set value(value) {\n        this._value = value;\n    }\n\n    /**\n     * Gets the value of the input file.\n     * @returns {string}\n     */\n    get value() {\n        return this._value;\n    }\n\n    /**\n     * The class name for the InputFile class.\n     * @type {string}\n     */\n    className = 'Input';\n\n    /**\n     * Returns the CSS stylesheet.\n     * @static\n     * @returns {object} styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the observed attributes.\n     * @static\n     * @returns {Array} An empty array\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.setAriaState({ role: 'group' });\n    }\n\n    /**\n     * Draws the component.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        // Wrapper\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-input-file', this.variant || 'default');\n\n        // File Input\n        let fileInput = document.createElement('input');\n        fileInput.setAttribute('type', 'file');\n        fileInput.setAttribute('multiple', '');\n        fileInput.setAttribute('hidden', '');\n        fileInput.setAttribute('aria-hidden', 'true');\n\n        // Input\n        let input = document.createElement('wje-input');\n        input.setAttribute('variant', 'standard');\n        input.setAttribute('type', 'text');\n        input.setAttribute('placeholder', 'Click to upload');\n        input.setAttribute('readonly', '');\n\n        let span = document.createElement('span');\n        span.setAttribute('slot', 'start');\n\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('slot', 'icon-only');\n        icon.setAttribute('name', 'cloud-upload');\n\n        span.appendChild(icon);\n        input.appendChild(span);\n\n        native.appendChild(input);\n        native.appendChild(fileInput);\n        fragment.appendChild(native);\n\n        this.native = native;\n        this.input = input;\n        this.fileInput = fileInput;\n\n        return fragment;\n    }\n\n    /**\n     * After draw method for the InputFile class.\n     */\n    afterDraw() {\n        this.input.addEventListener('click', () => {\n            this.fileInput.click();\n        });\n\n        this.fileInput.addEventListener('change', (e) => {\n            let files = e.target.files;\n            let fileNames = [];\n\n            for (let i = 0; i < files.length; i++) {\n                fileNames.push(files[i].name);\n            }\n\n            this.input.value = fileNames.join(', ');\n            this.value = files;\n            event.dispatchCustomEvent(this, 'wje-input-file:change', { files: files });\n        });\n    }\n}\n","import InputFile from './input-file.element.js';\n\nexport default InputFile;\n\nInputFile.define('wje-input-file', InputFile);\n"],"names":[],"mappings":";;;;;;AAee,MAAM,kBAAkB,UAAU;AAAA;AAAA;AAAA;AAAA,EAI7C,cAAc;AACV,UAAO;AAwBX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAvBR,SAAK,SAAS;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,MAAM,OAAO;AACb,SAAK,SAAS;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ;AACR,WAAO,KAAK;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,qBAAqB;AAC5B,WAAO,CAAE;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,aAAa,EAAE,MAAM,QAAO,CAAE;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAGhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,qBAAqB,KAAK,WAAW,SAAS;AAGnE,QAAI,YAAY,SAAS,cAAc,OAAO;AAC9C,cAAU,aAAa,QAAQ,MAAM;AACrC,cAAU,aAAa,YAAY,EAAE;AACrC,cAAU,aAAa,UAAU,EAAE;AACnC,cAAU,aAAa,eAAe,MAAM;AAG5C,QAAI,QAAQ,SAAS,cAAc,WAAW;AAC9C,UAAM,aAAa,WAAW,UAAU;AACxC,UAAM,aAAa,QAAQ,MAAM;AACjC,UAAM,aAAa,eAAe,iBAAiB;AACnD,UAAM,aAAa,YAAY,EAAE;AAEjC,QAAI,OAAO,SAAS,cAAc,MAAM;AACxC,SAAK,aAAa,QAAQ,OAAO;AAEjC,QAAI,OAAO,SAAS,cAAc,UAAU;AAC5C,SAAK,aAAa,QAAQ,WAAW;AACrC,SAAK,aAAa,QAAQ,cAAc;AAExC,SAAK,YAAY,IAAI;AACrB,UAAM,YAAY,IAAI;AAEtB,WAAO,YAAY,KAAK;AACxB,WAAO,YAAY,SAAS;AAC5B,aAAS,YAAY,MAAM;AAE3B,SAAK,SAAS;AACd,SAAK,QAAQ;AACb,SAAK,YAAY;AAEjB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,SAAK,MAAM,iBAAiB,SAAS,MAAM;AACvC,WAAK,UAAU,MAAO;AAAA,IAClC,CAAS;AAED,SAAK,UAAU,iBAAiB,UAAU,CAAC,MAAM;AAC7C,UAAI,QAAQ,EAAE,OAAO;AACrB,UAAI,YAAY,CAAE;AAElB,eAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACnC,kBAAU,KAAK,MAAM,CAAC,EAAE,IAAI;AAAA,MAC5C;AAEY,WAAK,MAAM,QAAQ,UAAU,KAAK,IAAI;AACtC,WAAK,QAAQ;AACb,YAAM,oBAAoB,MAAM,yBAAyB,EAAE,OAAc;AAAA,IACrF,CAAS;AAAA,EACT;AACA;ACxIA,UAAU,OAAO,kBAAkB,SAAS;"}