wj-elements 0.3.0 → 0.3.1

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', '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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"}
+{"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/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        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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"}
+{"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/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        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;"}
+{"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,UAAK;AAwBT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAvBR,SAAK,SAAS;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,MAAM,OAAO;AACb,SAAK,SAAS;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,QAAQ;AACR,WAAO,KAAK;AAAA,EAChB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,WAAW,qBAAqB;AAC5B,WAAO,CAAA;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,aAAa,EAAE,MAAM,QAAO,CAAE;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAG9C,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,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACR,SAAK,MAAM,iBAAiB,SAAS,MAAM;AACvC,WAAK,UAAU,MAAK;AAAA,IACxB,CAAC;AAED,SAAK,UAAU,iBAAiB,UAAU,CAAC,MAAM;AAC7C,UAAI,QAAQ,EAAE,OAAO;AACrB,UAAI,YAAY,CAAA;AAEhB,eAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACnC,kBAAU,KAAK,MAAM,CAAC,EAAE,IAAI;AAAA,MAChC;AAEA,WAAK,MAAM,QAAQ,UAAU,KAAK,IAAI;AACtC,WAAK,QAAQ;AACb,YAAM,oBAAoB,MAAM,yBAAyB,EAAE,OAAc;AAAA,IAC7E,CAAC;AAAA,EACL;AACJ;ACxIA,UAAU,OAAO,kBAAkB,SAAS;"}

package/dist/wje-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-input.js","sources":["../packages/wje-input/input.element.js","../packages/wje-input/input.js"],"sourcesContent":["import { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents a custom input element. It extends the WJElement class and provides additional functionality for handling input.\n * @documentation https://elements.webjet.sk/components/input\n * @status stable\n * @augments {FormAssociatedElement}\n * @csspart native - The native part.\n * @csspart wrapper - The wrapper part.\n * @csspart input - The input part.\n * @csspart clear - The clear part.\n * @slot start - Slot for content at the start of the input.\n * @slot end - Slot for content at the end of the input.\n * @cssproperty [--wje-input-font-family=var(--wje-font-family)] - Defines the font family for the input text.\n * @cssproperty [--wje-input-background-color=var(--wje-background)] - Specifies the background color of the input field.\n * @cssproperty [--wje-input-color=var(--wje-color)] - Sets the text color within the input field.\n * @cssproperty [--wje-input-color-invalid=var(--wje-color-danger)] - Changes the text color when the input value is invalid.\n * @cssproperty [--wje-input-border-color=var(--wje-border-color)] - Defines the border color of the input field.\n * @cssproperty [--wje-input-border-color-focus=var(--wje-color-primary)] - Specifies the border color when the input is focused.\n * @cssproperty [--wje-input-border-width=1px] - Sets the width of the input border.\n * @cssproperty [--wje-input-border-style=solid] - Defines the border style of the input (e.g., solid, dashed).\n * @cssproperty [--wje-input-border-radius=4px] - Specifies the border radius, creating rounded corners.\n * @cssproperty [--wje-input-margin-bottom=.5rem] - Adds spacing below the input field.\n * @cssproperty [--wje-input-line-height=20px] - Sets the line height of the text within the input field.\n * @cssproperty [--wje-input-slot-padding-inline=.5rem] - Controls the padding on the left and right of the input slot content.\n * // @fires wje-input:input - Dispatched when the input value changes.\n * // @fires wje-input:clear - Dispatched when the input is cleared.\n */\nexport default class Input extends FormAssociatedElement {\n    static _instanceId = 0;\n    /**\n     * Creates an instance of Input.\n     */\n    constructor() {\n        super();\n\n        this.invalid = false;\n        this.pristine = true;\n        this._instanceId = ++Input._instanceId;\n    }\n\n    /**\n     * Setter for the value attribute.\n     * @param {string} value The value to set.\n     */\n    set value(value) {\n        this.internals.setFormValue(value);\n\n        if (this.input) this.input.value = value;\n\n        this.pristine = false;\n        this._value = value;\n        this.syncAria();\n    }\n\n    /**\n     * Retrieves the value from the input element if available; otherwise,\n     * returns the internal _value property or an empty string as the default.\n     * @returns {string} The current value from the input element, the internal _value, or an empty string.\n     */\n    get value() {\n        return this.input?.value ?? this._value ?? '';\n    }\n\n    /**\n     * Sets the label attribute of the element.\n     * @param {string} value The value to set as the label attribute.\n     */\n    set label(value) {\n        this.setAttribute('label', value);\n    }\n\n    /**\n     * Retrieves the value of the 'label' attribute if it exists.\n     * If the 'label' attribute is not set, it returns false.\n     * @returns {string|boolean} The value of the 'label' attribute as a string, or false if the attribute is not set.\n     */\n    get label() {\n        return this.getAttribute('label') || false;\n    }\n\n    /**\n     * Sets the custom error display attribute for an element.\n     * @param {boolean} value If true, adds the 'custom-error-display' attribute to the element. If false, removes the attribute from the element.\n     */\n    set customErrorDisplay(value) {\n        if (value) {\n            this.setAttribute('custom-error-display', '');\n        } else {\n            this.removeAttribute('custom-error-display');\n        }\n    }\n\n    /**\n     * Getter for the customErrorDisplay attribute.\n     * @returns {boolean} Whether the attribute is present.\n     */\n    get customErrorDisplay() {\n        return this.hasAttribute('custom-error-display');\n    }\n\n    /**\n     * Sets the `validateOnChange` property. If set to a truthy value, it adds the\n     * `validate-on-change` attribute to the element. If set to a falsy value, it\n     * removes the `validate-on-change` attribute from the element.\n     * @param {boolean} value Determines whether to add or remove the\n     * `validate-on-change` attribute. A truthy value adds the attribute, whereas a\n     * falsy value removes it.\n     */\n    set validateOnChange(value) {\n        if (value) {\n            this.setAttribute('validate-on-change', '');\n        } else {\n            this.removeAttribute('validate-on-change');\n        }\n    }\n\n    /**\n     * Getter for the validateOnChange attribute.\n     * @returns {boolean} Whether the attribute is present.\n     */\n    get validateOnChange() {\n        return this.hasAttribute('validate-on-change');\n    }\n\n    /**\n     * @summary Getter for the defaultValue attribute.\n     * This method retrieves the 'value' attribute of the custom input element.\n     * The 'value' attribute represents the default value of the input element.\n     * If the 'value' attribute is not set, it returns an empty string.\n     * @returns {string} The default value of the input element.\n     */\n    get defaultValue() {\n        return this.getAttribute('value') ?? '';\n    }\n\n    /**\n     * @summary Setter for the defaultValue attribute.\n     * This method sets the 'value' attribute of the custom input element to the provided value.\n     * The 'value' attribute represents the default value of the input element.\n     * @param {string} value The value to set as the default value.\n     */\n    set defaultValue(value) {\n        this.setAttribute('value', value);\n    }\n\n    /**\n     * Sets or removes the 'clearable' attribute on the element.\n     * When set to a truthy value, the 'clearable' attribute is added; when falsy, the attribute is removed.\n     * @param {boolean} value Determines whether to set or remove the 'clearable' attribute. If true, the 'clearable' attribute is added. If false, it is removed.\n     */\n    set clearable(value) {\n        if (value) {\n            this.setAttribute('clearable', '');\n        } else {\n            this.removeAttribute('clearable');\n        }\n    }\n\n    /**\n     * Checks if the 'clearable' attribute is present on the element.\n     * @returns {boolean} True if the 'clearable' attribute is set, otherwise false.\n     */\n    get clearable() {\n        return this.hasAttribute('clearable');\n    }\n\n    /**\n     * Sets the placeholder value for an element. If the provided value is non-empty,\n     * it assigns the value to the \"placeholder\" attribute. Otherwise, it removes\n     * the \"placeholder\" attribute from the element.\n     * @param {string} value The placeholder text to set or null/undefined to remove the attribute.\n     */\n    set placeholder(value) {\n        if (value) {\n            this.setAttribute('placeholder', value);\n        } else {\n            this.removeAttribute('placeholder');\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'placeholder' attribute from the element.\n     * If the attribute is not set, it returns an empty string.\n     * @returns {string} The value of the 'placeholder' attribute or an empty string if not set.\n     */\n    get placeholder() {\n        return this.getAttribute('placeholder') || '';\n    }\n\n    /**\n     * Sets the `variant` attribute on the element. If a value is provided, it will set the attribute to the given value.\n     * If no value is provided, it removes the `variant` attribute from the element.\n     * @param {string} value The value to set for the `variant` attribute. If falsy, the attribute is removed.\n     */\n    set variant(value) {\n        if (value) {\n            this.setAttribute('variant', value);\n        } else {\n            this.removeAttribute('variant');\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'variant' attribute from the element.\n     * If the attribute is not set, it defaults to 'default'.\n     * @returns {string} The value of the 'variant' attribute or 'default' if not set.\n     */\n    get variant() {\n        return this.getAttribute('variant') || 'default';\n    }\n\n    /**\n     * The class name of the input element.\n     * @type {string}\n     */\n    className = 'Input';\n\n    /**\n     * Getter for the cssStyleSheet attribute.\n     * @returns {CSSStyleSheet} The CSS style sheet of the input element.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observedAttributes attribute of the input element.\n     * @returns {Array} The attributes to observe for changes.\n     */\n    static get observedAttributes() {\n        return ['type', 'value', 'name', 'disabled', 'placeholder', 'label', 'message', 'error-inline', 'required', 'readonly', 'invalid'];\n    }\n\n    /**\n     * Sets up the attributes for the input.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        // if some value was set via value setter then dont use default value\n        if (this.pristine) {\n            this.value = this.defaultValue;\n            this.pristine = false;\n        }\n        this.syncAria();\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n        if (oldValue === newValue) return;\n\n        if (!this.input) {\n            this.syncAria();\n            return;\n        }\n\n        if (name === 'value') {\n            this._value = newValue ?? '';\n            this.input.value = this.value;\n            this.internals.setFormValue(this.value);\n        } else if (name === 'type') {\n            this.input.type = this.getAttribute('type') || 'text';\n        } else if (name === 'name') {\n            this.input.name = this.name;\n        } else if (name === 'disabled') {\n            this.input.disabled = this.disabled;\n        } else if (name === 'required') {\n            this.input.required = this.required;\n        } else if (name === 'readonly') {\n            this.input.readOnly = this.hasAttribute('readonly');\n        } else if (name === 'placeholder') {\n            this.input.placeholder = this.placeholder;\n        } else if (name === 'label') {\n            if (this.labelElement) this.labelElement.innerText = this.label || '';\n        }\n\n        this.syncAria();\n    }\n\n    /**\n     * Draws the input element.\n     * @returns {DocumentFragment} The drawn input.\n     */\n    draw() {\n        let hasSlotStart = this.hasSlot(this, 'start');\n        let hasSlotEnd = this.hasSlot(this, 'end');\n        let hasSlotError = this.hasSlot(this, 'error');\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', this.variant);\n\n        if (this.invalid) native.classList.add('has-error');\n\n        let wrapper = document.createElement('div');\n        wrapper.classList.add('wrapper');\n\n        let inputWrapper = document.createElement('div');\n        inputWrapper.setAttribute('part', 'wrapper');\n        inputWrapper.classList.add('input-wrapper');\n\n        // Label\n        let label = document.createElement('label');\n        label.setAttribute('part', 'label');\n        label.innerText = this.label;\n        if (this.value && !this.hasAttribute('error')) label.classList.add('fade');\n\n        // Input\n        let input = document.createElement('input');\n        input.setAttribute('type', 'text');\n        input.setAttribute('part', 'input');\n        input.setAttribute('value', this.value || '');\n        input.classList.add('form-control');\n\n        const attributes = Array.from(this.attributes).map((attr) => attr.name);\n\n        attributes.forEach((attr) => {\n            if (this.hasAttribute(attr)) {\n                input.setAttribute(attr, this[attr] || '');\n            }\n        });\n\n        // Error\n        let errorSlot = document.createElement('slot');\n        errorSlot.setAttribute('name', 'error');\n        errorSlot.setAttribute('part', 'error-slot');\n        this._ariaErrorId = this.id ? `${this.id}-error` : `wje-input-${this._instanceId}-error`;\n        errorSlot.id = this._ariaErrorId;\n\n        let error = document.createElement('div');\n        error.setAttribute('slot', 'error');\n\n        let start = null;\n        if (hasSlotStart) {\n            start = document.createElement('slot');\n            start.setAttribute('name', 'start');\n            start.setAttribute('part', 'start');\n        }\n\n        let end = null;\n        if (hasSlotEnd) {\n            end = document.createElement('slot');\n            end.setAttribute('name', 'end');\n            end.setAttribute('part', 'end');\n        }\n\n        if (hasSlotStart) {\n            wrapper.appendChild(start); // zmenene\n            native.classList.add('has-start');\n        }\n\n        if (this.label) {\n            if (this.variant === 'standard') {\n                native.append(label);\n            } else {\n                inputWrapper.appendChild(label);\n            }\n        }\n\n        inputWrapper.appendChild(input);\n        wrapper.appendChild(inputWrapper);\n\n        native.appendChild(wrapper);\n        native.append(errorSlot);\n\n        this.append(error);\n\n        if (this.clearable) {\n            this.clear = document.createElement('wje-button');\n            this.clear.classList.add('clear');\n            this.clear.setAttribute('fill', 'link');\n            this.clear.setAttribute('part', 'clear');\n\n            let clearIcon = document.createElement('wje-icon');\n            clearIcon.setAttribute('name', 'x');\n            this.clear.appendChild(clearIcon);\n            inputWrapper.appendChild(this.clear);\n        }\n\n        if (hasSlotEnd) {\n            wrapper.appendChild(end);// zmenene\n            native.classList.add('has-end');\n        }\n\n        fragment.appendChild(native);\n\n        this.native = native;\n        this.labelElement = label;\n        this.input = input;\n        this.errorMessage = error;\n\n        this.syncAria();\n        return fragment;\n    }\n\n    /**\n     * Runs after the input is drawn to the DOM.\n     */\n    afterDraw() {\n        this.input.addEventListener('focus', (e) => {\n            this.labelElement.classList.add('fade');\n            this.native.classList.add('focused');\n        });\n\n        this.input.addEventListener('blur', (e) => {\n            this.native.classList.remove('focused');\n            if (!e.target.value) this.labelElement.classList.remove('fade');\n        });\n\n        this.input.addEventListener('input', (e) => {\n            this.validate();\n\n            if (this.validateOnChange) {\n                this.pristine = false;\n                this.propagateValidation();\n            }\n\n            if (this.invalid && this.checkValidity()) {\n                this.invalid = false;\n                this.errorMessage.textContent = '';\n                this.internals.setValidity({}, '');\n            }\n\n            this.input.classList.remove('pristine');\n            this.labelElement.classList.add('fade');\n\n            event.dispatchCustomEvent(this, 'wje-input:input', {\n                value: this.input.value,\n            });\n\n            this.value = this.input.value;\n        });\n\n        this.addEventListener('invalid', (e) => {\n            this.invalid = true;\n            this.pristine = false;\n\n            this.showInvalidMessage();\n\n            if (this.customErrorDisplay) {\n                e.preventDefault();\n            }\n        });\n\n        this.addEventListener('focus', () => this.input.focus());\n\n        if (this.clear) {\n            this.clear.addEventListener('wje-button:click', (e) => {\n                this.input.value = '';\n                event.dispatchCustomEvent(this.clear, 'wje-input:clear');\n            });\n        }\n\n        this.validate();\n\n        if (this.invalid) {\n            this.showInvalidMessage();\n        }\n\n        this.syncAria();\n    }\n\n    /**\n     * Syncs ARIA attributes on the host element.\n     */\n    syncAria() {\n        const requiredInvalid = this.required && !this.value;\n        const invalid = this.invalid || requiredInvalid;\n        const label = this.label && this.label !== false ? this.label.trim() : '';\n        this.setAriaState({\n            role: 'textbox',\n            disabled: this.disabled,\n            required: this.required,\n            readonly: this.hasAttribute('readonly'),\n            invalid,\n            describedBy: this._ariaErrorId,\n            ...(label ? { label } : {}),\n        });\n    }\n\n    /**\n     * Checks whether the input has a slot.\n     * @param {HTMLElement} el The element to check.\n     * @param {string} slotName The name of the slot to check for.\n     * @returns {boolean} Whether the input has the slot.\n     */\n    hasSlot(el, slotName = null) {\n        let selector = slotName ? `[slot=\"${slotName}\"]` : '[slot]';\n\n        return el.querySelectorAll(selector).length > 0 ? true : false;\n    }\n}\n","import Input from './input.element.js';\n\nexport default Input;\n\nInput.define('wje-input', Input);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-input.js","sources":["../packages/wje-input/input.element.js","../packages/wje-input/input.js"],"sourcesContent":["import { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents a custom input element. It extends the WJElement class and provides additional functionality for handling input.\n * @documentation https://elements.webjet.sk/components/input\n * @status stable\n * @augments {FormAssociatedElement}\n * @csspart native - The native part.\n * @csspart wrapper - The wrapper part.\n * @csspart input - The input part.\n * @csspart clear - The clear part.\n * @slot start - Slot for content at the start of the input.\n * @slot end - Slot for content at the end of the input.\n * @cssproperty [--wje-input-font-family=var(--wje-font-family)] - Defines the font family for the input text.\n * @cssproperty [--wje-input-background-color=var(--wje-background)] - Specifies the background color of the input field.\n * @cssproperty [--wje-input-color=var(--wje-color)] - Sets the text color within the input field.\n * @cssproperty [--wje-input-color-invalid=var(--wje-color-danger)] - Changes the text color when the input value is invalid.\n * @cssproperty [--wje-input-border-color=var(--wje-border-color)] - Defines the border color of the input field.\n * @cssproperty [--wje-input-border-color-focus=var(--wje-color-primary)] - Specifies the border color when the input is focused.\n * @cssproperty [--wje-input-border-width=1px] - Sets the width of the input border.\n * @cssproperty [--wje-input-border-style=solid] - Defines the border style of the input (e.g., solid, dashed).\n * @cssproperty [--wje-input-border-radius=4px] - Specifies the border radius, creating rounded corners.\n * @cssproperty [--wje-input-margin-bottom=.5rem] - Adds spacing below the input field.\n * @cssproperty [--wje-input-line-height=20px] - Sets the line height of the text within the input field.\n * @cssproperty [--wje-input-slot-padding-inline=.5rem] - Controls the padding on the left and right of the input slot content.\n * // @fires wje-input:input - Dispatched when the input value changes.\n * // @fires wje-input:clear - Dispatched when the input is cleared.\n */\nexport default class Input extends FormAssociatedElement {\n    static _instanceId = 0;\n    /**\n     * Creates an instance of Input.\n     */\n    constructor() {\n        super();\n\n        this.invalid = false;\n        this.pristine = true;\n        this._instanceId = ++Input._instanceId;\n    }\n\n    /**\n     * Setter for the value attribute.\n     * @param {string} value The value to set.\n     */\n    set value(value) {\n        this.internals.setFormValue(value);\n\n        if (this.input) this.input.value = value;\n\n        this.pristine = false;\n        this._value = value;\n        this.syncAria();\n    }\n\n    /**\n     * Retrieves the value from the input element if available; otherwise,\n     * returns the internal _value property or an empty string as the default.\n     * @returns {string} The current value from the input element, the internal _value, or an empty string.\n     */\n    get value() {\n        return this.input?.value ?? this._value ?? '';\n    }\n\n    /**\n     * Sets the label attribute of the element.\n     * @param {string} value The value to set as the label attribute.\n     */\n    set label(value) {\n        this.setAttribute('label', value);\n    }\n\n    /**\n     * Retrieves the value of the 'label' attribute if it exists.\n     * If the 'label' attribute is not set, it returns false.\n     * @returns {string|boolean} The value of the 'label' attribute as a string, or false if the attribute is not set.\n     */\n    get label() {\n        return this.getAttribute('label') || false;\n    }\n\n    /**\n     * Sets the custom error display attribute for an element.\n     * @param {boolean} value If true, adds the 'custom-error-display' attribute to the element. If false, removes the attribute from the element.\n     */\n    set customErrorDisplay(value) {\n        if (value) {\n            this.setAttribute('custom-error-display', '');\n        } else {\n            this.removeAttribute('custom-error-display');\n        }\n    }\n\n    /**\n     * Getter for the customErrorDisplay attribute.\n     * @returns {boolean} Whether the attribute is present.\n     */\n    get customErrorDisplay() {\n        return this.hasAttribute('custom-error-display');\n    }\n\n    /**\n     * Sets the `validateOnChange` property. If set to a truthy value, it adds the\n     * `validate-on-change` attribute to the element. If set to a falsy value, it\n     * removes the `validate-on-change` attribute from the element.\n     * @param {boolean} value Determines whether to add or remove the\n     * `validate-on-change` attribute. A truthy value adds the attribute, whereas a\n     * falsy value removes it.\n     */\n    set validateOnChange(value) {\n        if (value) {\n            this.setAttribute('validate-on-change', '');\n        } else {\n            this.removeAttribute('validate-on-change');\n        }\n    }\n\n    /**\n     * Getter for the validateOnChange attribute.\n     * @returns {boolean} Whether the attribute is present.\n     */\n    get validateOnChange() {\n        return this.hasAttribute('validate-on-change');\n    }\n\n    /**\n     * @summary Getter for the defaultValue attribute.\n     * This method retrieves the 'value' attribute of the custom input element.\n     * The 'value' attribute represents the default value of the input element.\n     * If the 'value' attribute is not set, it returns an empty string.\n     * @returns {string} The default value of the input element.\n     */\n    get defaultValue() {\n        return this.getAttribute('value') ?? '';\n    }\n\n    /**\n     * @summary Setter for the defaultValue attribute.\n     * This method sets the 'value' attribute of the custom input element to the provided value.\n     * The 'value' attribute represents the default value of the input element.\n     * @param {string} value The value to set as the default value.\n     */\n    set defaultValue(value) {\n        this.setAttribute('value', value);\n    }\n\n    /**\n     * Sets or removes the 'clearable' attribute on the element.\n     * When set to a truthy value, the 'clearable' attribute is added; when falsy, the attribute is removed.\n     * @param {boolean} value Determines whether to set or remove the 'clearable' attribute. If true, the 'clearable' attribute is added. If false, it is removed.\n     */\n    set clearable(value) {\n        if (value) {\n            this.setAttribute('clearable', '');\n        } else {\n            this.removeAttribute('clearable');\n        }\n    }\n\n    /**\n     * Checks if the 'clearable' attribute is present on the element.\n     * @returns {boolean} True if the 'clearable' attribute is set, otherwise false.\n     */\n    get clearable() {\n        return this.hasAttribute('clearable');\n    }\n\n    /**\n     * Sets the placeholder value for an element. If the provided value is non-empty,\n     * it assigns the value to the \"placeholder\" attribute. Otherwise, it removes\n     * the \"placeholder\" attribute from the element.\n     * @param {string} value The placeholder text to set or null/undefined to remove the attribute.\n     */\n    set placeholder(value) {\n        if (value) {\n            this.setAttribute('placeholder', value);\n        } else {\n            this.removeAttribute('placeholder');\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'placeholder' attribute from the element.\n     * If the attribute is not set, it returns an empty string.\n     * @returns {string} The value of the 'placeholder' attribute or an empty string if not set.\n     */\n    get placeholder() {\n        return this.getAttribute('placeholder') || '';\n    }\n\n    /**\n     * Sets the `variant` attribute on the element. If a value is provided, it will set the attribute to the given value.\n     * If no value is provided, it removes the `variant` attribute from the element.\n     * @param {string} value The value to set for the `variant` attribute. If falsy, the attribute is removed.\n     */\n    set variant(value) {\n        if (value) {\n            this.setAttribute('variant', value);\n        } else {\n            this.removeAttribute('variant');\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'variant' attribute from the element.\n     * If the attribute is not set, it defaults to 'default'.\n     * @returns {string} The value of the 'variant' attribute or 'default' if not set.\n     */\n    get variant() {\n        return this.getAttribute('variant') || 'default';\n    }\n\n    /**\n     * The class name of the input element.\n     * @type {string}\n     */\n    className = 'Input';\n\n    /**\n     * Getter for the cssStyleSheet attribute.\n     * @returns {CSSStyleSheet} The CSS style sheet of the input element.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observedAttributes attribute of the input element.\n     * @returns {Array} The attributes to observe for changes.\n     */\n    static get observedAttributes() {\n        return ['type', 'value', 'name', 'disabled', 'placeholder', 'label', 'message', 'error-inline', 'required', 'readonly', 'invalid'];\n    }\n\n    /**\n     * Sets up the attributes for the input.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        // if some value was set via value setter then dont use default value\n        if (this.pristine) {\n            this.value = this.defaultValue;\n            this.pristine = false;\n        }\n        this.syncAria();\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n        if (oldValue === newValue) return;\n\n        if (!this.input) {\n            this.syncAria();\n            return;\n        }\n\n        if (name === 'value') {\n            this._value = newValue ?? '';\n            this.input.value = this.value;\n            this.internals.setFormValue(this.value);\n        } else if (name === 'type') {\n            this.input.type = this.getAttribute('type') || 'text';\n        } else if (name === 'name') {\n            this.input.name = this.name;\n        } else if (name === 'disabled') {\n            this.input.disabled = this.disabled;\n        } else if (name === 'required') {\n            this.input.required = this.required;\n        } else if (name === 'readonly') {\n            this.input.readOnly = this.hasAttribute('readonly');\n        } else if (name === 'placeholder') {\n            this.input.placeholder = this.placeholder;\n        } else if (name === 'label') {\n            if (this.labelElement) this.labelElement.innerText = this.label || '';\n        }\n\n        this.syncAria();\n    }\n\n    /**\n     * Draws the input element.\n     * @returns {DocumentFragment} The drawn input.\n     */\n    draw() {\n        let hasSlotStart = this.hasSlot(this, 'start');\n        let hasSlotEnd = this.hasSlot(this, 'end');\n        let hasSlotError = this.hasSlot(this, 'error');\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', this.variant);\n\n        if (this.invalid) native.classList.add('has-error');\n\n        let wrapper = document.createElement('div');\n        wrapper.classList.add('wrapper');\n\n        let inputWrapper = document.createElement('div');\n        inputWrapper.setAttribute('part', 'wrapper');\n        inputWrapper.classList.add('input-wrapper');\n\n        // Label\n        let label = document.createElement('label');\n        label.setAttribute('part', 'label');\n        label.innerText = this.label;\n        if (this.value && !this.hasAttribute('error')) label.classList.add('fade');\n\n        // Input\n        let input = document.createElement('input');\n        input.setAttribute('type', 'text');\n        input.setAttribute('part', 'input');\n        input.setAttribute('value', this.value || '');\n        input.classList.add('form-control');\n\n        const attributes = Array.from(this.attributes).map((attr) => attr.name);\n\n        attributes.forEach((attr) => {\n            if (this.hasAttribute(attr)) {\n                input.setAttribute(attr, this[attr] || '');\n            }\n        });\n\n        // Error\n        let errorSlot = document.createElement('slot');\n        errorSlot.setAttribute('name', 'error');\n        errorSlot.setAttribute('part', 'error-slot');\n        this._ariaErrorId = this.id ? `${this.id}-error` : `wje-input-${this._instanceId}-error`;\n        errorSlot.id = this._ariaErrorId;\n\n        let error = document.createElement('div');\n        error.setAttribute('slot', 'error');\n\n        let start = null;\n        if (hasSlotStart) {\n            start = document.createElement('slot');\n            start.setAttribute('name', 'start');\n            start.setAttribute('part', 'start');\n        }\n\n        let end = null;\n        if (hasSlotEnd) {\n            end = document.createElement('slot');\n            end.setAttribute('name', 'end');\n            end.setAttribute('part', 'end');\n        }\n\n        if (hasSlotStart) {\n            wrapper.appendChild(start); // zmenene\n            native.classList.add('has-start');\n        }\n\n        if (this.label) {\n            if (this.variant === 'standard') {\n                native.append(label);\n            } else {\n                inputWrapper.appendChild(label);\n            }\n        }\n\n        inputWrapper.appendChild(input);\n        wrapper.appendChild(inputWrapper);\n\n        native.appendChild(wrapper);\n        native.append(errorSlot);\n\n        this.append(error);\n\n        if (this.clearable) {\n            this.clear = document.createElement('wje-button');\n            this.clear.classList.add('clear');\n            this.clear.setAttribute('fill', 'link');\n            this.clear.setAttribute('part', 'clear');\n\n            let clearIcon = document.createElement('wje-icon');\n            clearIcon.setAttribute('name', 'x');\n            this.clear.appendChild(clearIcon);\n            inputWrapper.appendChild(this.clear);\n        }\n\n        if (hasSlotEnd) {\n            wrapper.appendChild(end);// zmenene\n            native.classList.add('has-end');\n        }\n\n        fragment.appendChild(native);\n\n        this.native = native;\n        this.labelElement = label;\n        this.input = input;\n        this.errorMessage = error;\n\n        this.syncAria();\n        return fragment;\n    }\n\n    /**\n     * Runs after the input is drawn to the DOM.\n     */\n    afterDraw() {\n        this.input.addEventListener('focus', (e) => {\n            this.labelElement.classList.add('fade');\n            this.native.classList.add('focused');\n        });\n\n        this.input.addEventListener('blur', (e) => {\n            this.native.classList.remove('focused');\n            if (!e.target.value) this.labelElement.classList.remove('fade');\n        });\n\n        this.input.addEventListener('input', (e) => {\n            this.validate();\n\n            if (this.validateOnChange) {\n                this.pristine = false;\n                this.propagateValidation();\n            }\n\n            if (this.invalid && this.checkValidity()) {\n                this.invalid = false;\n                this.errorMessage.textContent = '';\n                this.internals.setValidity({}, '');\n            }\n\n            this.input.classList.remove('pristine');\n            this.labelElement.classList.add('fade');\n\n            event.dispatchCustomEvent(this, 'wje-input:input', {\n                value: this.input.value,\n            });\n\n            this.value = this.input.value;\n        });\n\n        this.addEventListener('invalid', (e) => {\n            this.invalid = true;\n            this.pristine = false;\n\n            this.showInvalidMessage();\n\n            if (this.customErrorDisplay) {\n                e.preventDefault();\n            }\n        });\n\n        this.addEventListener('focus', () => this.input.focus());\n\n        if (this.clear) {\n            this.clear.addEventListener('wje-button:click', (e) => {\n                this.input.value = '';\n                event.dispatchCustomEvent(this.clear, 'wje-input:clear');\n            });\n        }\n\n        this.validate();\n\n        if (this.invalid) {\n            this.showInvalidMessage();\n        }\n\n        this.syncAria();\n    }\n\n    /**\n     * Syncs ARIA attributes on the host element.\n     */\n    syncAria() {\n        const requiredInvalid = this.required && !this.value;\n        const invalid = this.invalid || requiredInvalid;\n        const label = this.label && this.label !== false ? this.label.trim() : '';\n        this.setAriaState({\n            role: 'textbox',\n            disabled: this.disabled,\n            required: this.required,\n            readonly: this.hasAttribute('readonly'),\n            invalid,\n            describedBy: this._ariaErrorId,\n            ...(label ? { label } : {}),\n        });\n    }\n\n    /**\n     * Checks whether the input has a slot.\n     * @param {HTMLElement} el The element to check.\n     * @param {string} slotName The name of the slot to check for.\n     * @returns {boolean} Whether the input has the slot.\n     */\n    hasSlot(el, slotName = null) {\n        let selector = slotName ? `[slot=\"${slotName}\"]` : '[slot]';\n\n        return el.querySelectorAll(selector).length > 0 ? true : false;\n    }\n}\n","import Input from './input.element.js';\n\nexport default Input;\n\nInput.define('wje-input', Input);\n"],"names":[],"mappings":"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"}

package/dist/wje-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-item.js","sources":["../packages/wje-item/item.element.js","../packages/wje-item/item.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Item` is a custom web component that represents an item.\n * @summary This element represents an item.\n * @documentation https://elements.webjet.sk/components/item\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part\n * @csspart inner - The inner part\n * @slot start - The start slot\n * @slot end - The end slot\n * @slot error - The error slot\n * @slot helper - The helper slot\n * @cssproperty [--wje-item-background=var(--wje-background)] - Sets the background color of the item. Accepts any valid CSS color value.\n * @cssproperty [--wje-item-color=var(--wje-color)] - Defines the text color for the item. Accepts any valid CSS color value.\n * @cssproperty [--wje-item-padding-start=var(--wje-padding)] - Specifies the left padding of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-padding-end=var(--wje-padding)] - Specifies the right padding of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-padding-top=var(--wje-padding)] - Specifies the top padding of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-padding-bottom=var(--wje-padding)] - Specifies the bottom padding of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-inner-padding-start=var(--wje-padding)] - Specifies the left inner padding of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-inner-padding-end=var(--wje-padding)] - Specifies the right inner padding of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-inner-padding-top=var(--wje-padding)] - Specifies the top inner padding of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-inner-padding-bottom=var(--wje-padding)] - Specifies the bottom inner padding of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-border-radius=var(--wje-border-radius)] - Defines the border radius, providing rounded corners for the item.\n * @cssproperty [--wje-item-border-width=var(--wje-border-width)] - Sets the border width of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-border-style=var(--wje-border-style)] - Specifies the style of the border, such as `solid`, `dashed`, or `dotted`.\n * @cssproperty [--wje-item-border-color=var(--wje-border-color)] - Defines the color of the item's border. Accepts any valid CSS color value.\n * @cssproperty [--wje-item-min-height=var(--wje-min-height)] - Sets the minimum height of the item to ensure consistent layout.\n * @cssproperty [--wje-item-transition=var(--wje-transition)] - Specifies the transition effects for the item, such as for hover or focus states.\n * @cssproperty [--wje-item-inner-box-shadow=var(--wje-box-shadow)] - Adds a shadow effect inside the item for a 3D appearance.\n * @tag wje-item\n */\nexport default class Item extends WJElement {\n    /**\n     * Item constructor for the class.\n     */\n    constructor() {\n        super();\n\n        this.labelColorStyles = {};\n        this.itemStyles = new Map();\n        this.inheritedAriaAttributes = {};\n        this.multipleInputs = false;\n        this.focusable = true;\n        this.button = false;\n        this.detailIcon = ``; // TODO icon\n        this.disabled = false;\n        this.counter = false;\n        this.routerDirection = 'forward';\n        this.type = 'button';\n    }\n\n    /**\n     * Returns the CSS styles for the component.\n     * @returns {boolean}\n     */\n    isClickable() {\n        return this.hasAttribute('href') || this.button;\n    }\n\n    /**\n     * Returns the CSS styles for the component.\n     * @type {string}\n     */\n    className = 'Item';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {object} styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component for the item.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        const TagType = this.isClickable() ? (this.hasAttribute('href') === undefined ? 'button' : 'a') : 'div';\n\n        if (this.hostContext('wje-list', this)) {\n            this.classList.add('wje-item-list');\n        }\n\n        return `<${TagType} class=\"item-native\" part=\"native\">\n\t\t\t<slot name=\"start\"></slot>\n\t\t\t<div class=\"item-inner\">\n\t\t\t\t\t<div class=\"input-wrapper\" part=\"inner\">\n\t\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</div>\n\t\t\t\t\t<slot name=\"end\"></slot>\n\t\t\t</div>\n\t\t\t<div class=\"item-highlight\"></div>\n    </${TagType}>\n\t\t<div class=\"item-bottom\">\n\t\t\t\t<slot name=\"error\"></slot>\n\t\t\t\t<slot name=\"helper\"></slot>\n\t\t</div>`;\n    }\n\n    /**\n     * Called after the component has been drawn.\n     */\n    afterDraw() {\n        this.syncAria();\n    }\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        if (this.hostContext('wje-list', this) && !this.hasAttribute('role')) {\n            this.setAriaState({ role: 'listitem' });\n        }\n    }\n\n    /**\n     * Determines if the given element or any of its ancestors matches the specified selector.\n     * @param {string} selector The CSS selector to match against the element's ancestors.\n     * @param {HTMLElement} el The element from which to start the search.\n     * @returns {boolean} - Returns `true` if the element or one of its ancestors matches the selector; otherwise, `false`.\n     */\n    hostContext = (selector, el) => {\n        return el.closest(selector) !== null;\n    };\n}\n","import Item from './item.element.js';\n\nexport default Item;\n\nItem.define('wje-item', Item);\n"],"names":[],"mappings":";;;;;AAkCe,MAAM,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA,EAIxC,cAAc;AACV,UAAO;AA2BX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAmEZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uCAAc,CAAC,UAAU,OAAO;AAC5B,aAAO,GAAG,QAAQ,QAAQ,MAAM;AAAA,IACnC;AA9FG,SAAK,mBAAmB,CAAE;AAC1B,SAAK,aAAa,oBAAI,IAAK;AAC3B,SAAK,0BAA0B,CAAE;AACjC,SAAK,iBAAiB;AACtB,SAAK,YAAY;AACjB,SAAK,SAAS;AACd,SAAK,aAAa;AAClB,SAAK,WAAW;AAChB,SAAK,UAAU;AACf,SAAK,kBAAkB;AACvB,SAAK,OAAO;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,cAAc;AACV,WAAO,KAAK,aAAa,MAAM,KAAK,KAAK;AAAA,EACjD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,UAAM,UAAU,KAAK,YAAW,IAAM,KAAK,aAAa,MAAM,MAAM,SAAY,WAAW,MAAO;AAElG,QAAI,KAAK,YAAY,YAAY,IAAI,GAAG;AACpC,WAAK,UAAU,IAAI,eAAe;AAAA,IAC9C;AAEQ,WAAO,IAAI,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QASlB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,SAAK,SAAU;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA,EAKI,WAAW;AACP,QAAI,KAAK,YAAY,YAAY,IAAI,KAAK,CAAC,KAAK,aAAa,MAAM,GAAG;AAClE,WAAK,aAAa,EAAE,MAAM,WAAU,CAAE;AAAA,IAClD;AAAA,EACA;AAWA;ACpIA,KAAK,OAAO,YAAY,IAAI;"}
+{"version":3,"file":"wje-item.js","sources":["../packages/wje-item/item.element.js","../packages/wje-item/item.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Item` is a custom web component that represents an item.\n * @summary This element represents an item.\n * @documentation https://elements.webjet.sk/components/item\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part\n * @csspart inner - The inner part\n * @slot start - The start slot\n * @slot end - The end slot\n * @slot error - The error slot\n * @slot helper - The helper slot\n * @cssproperty [--wje-item-background=var(--wje-background)] - Sets the background color of the item. Accepts any valid CSS color value.\n * @cssproperty [--wje-item-color=var(--wje-color)] - Defines the text color for the item. Accepts any valid CSS color value.\n * @cssproperty [--wje-item-padding-start=var(--wje-padding)] - Specifies the left padding of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-padding-end=var(--wje-padding)] - Specifies the right padding of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-padding-top=var(--wje-padding)] - Specifies the top padding of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-padding-bottom=var(--wje-padding)] - Specifies the bottom padding of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-inner-padding-start=var(--wje-padding)] - Specifies the left inner padding of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-inner-padding-end=var(--wje-padding)] - Specifies the right inner padding of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-inner-padding-top=var(--wje-padding)] - Specifies the top inner padding of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-inner-padding-bottom=var(--wje-padding)] - Specifies the bottom inner padding of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-border-radius=var(--wje-border-radius)] - Defines the border radius, providing rounded corners for the item.\n * @cssproperty [--wje-item-border-width=var(--wje-border-width)] - Sets the border width of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-border-style=var(--wje-border-style)] - Specifies the style of the border, such as `solid`, `dashed`, or `dotted`.\n * @cssproperty [--wje-item-border-color=var(--wje-border-color)] - Defines the color of the item's border. Accepts any valid CSS color value.\n * @cssproperty [--wje-item-min-height=var(--wje-min-height)] - Sets the minimum height of the item to ensure consistent layout.\n * @cssproperty [--wje-item-transition=var(--wje-transition)] - Specifies the transition effects for the item, such as for hover or focus states.\n * @cssproperty [--wje-item-inner-box-shadow=var(--wje-box-shadow)] - Adds a shadow effect inside the item for a 3D appearance.\n * @tag wje-item\n */\nexport default class Item extends WJElement {\n    /**\n     * Item constructor for the class.\n     */\n    constructor() {\n        super();\n\n        this.labelColorStyles = {};\n        this.itemStyles = new Map();\n        this.inheritedAriaAttributes = {};\n        this.multipleInputs = false;\n        this.focusable = true;\n        this.button = false;\n        this.detailIcon = ``; // TODO icon\n        this.disabled = false;\n        this.counter = false;\n        this.routerDirection = 'forward';\n        this.type = 'button';\n    }\n\n    /**\n     * Returns the CSS styles for the component.\n     * @returns {boolean}\n     */\n    isClickable() {\n        return this.hasAttribute('href') || this.button;\n    }\n\n    /**\n     * Returns the CSS styles for the component.\n     * @type {string}\n     */\n    className = 'Item';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {object} styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component for the item.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        const TagType = this.isClickable() ? (this.hasAttribute('href') === undefined ? 'button' : 'a') : 'div';\n\n        if (this.hostContext('wje-list', this)) {\n            this.classList.add('wje-item-list');\n        }\n\n        return `<${TagType} class=\"item-native\" part=\"native\">\n\t\t\t<slot name=\"start\"></slot>\n\t\t\t<div class=\"item-inner\">\n\t\t\t\t\t<div class=\"input-wrapper\" part=\"inner\">\n\t\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</div>\n\t\t\t\t\t<slot name=\"end\"></slot>\n\t\t\t</div>\n\t\t\t<div class=\"item-highlight\"></div>\n    </${TagType}>\n\t\t<div class=\"item-bottom\">\n\t\t\t\t<slot name=\"error\"></slot>\n\t\t\t\t<slot name=\"helper\"></slot>\n\t\t</div>`;\n    }\n\n    /**\n     * Called after the component has been drawn.\n     */\n    afterDraw() {\n        this.syncAria();\n    }\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        if (this.hostContext('wje-list', this) && !this.hasAttribute('role')) {\n            this.setAriaState({ role: 'listitem' });\n        }\n    }\n\n    /**\n     * Determines if the given element or any of its ancestors matches the specified selector.\n     * @param {string} selector The CSS selector to match against the element's ancestors.\n     * @param {HTMLElement} el The element from which to start the search.\n     * @returns {boolean} - Returns `true` if the element or one of its ancestors matches the selector; otherwise, `false`.\n     */\n    hostContext = (selector, el) => {\n        return el.closest(selector) !== null;\n    };\n}\n","import Item from './item.element.js';\n\nexport default Item;\n\nItem.define('wje-item', Item);\n"],"names":[],"mappings":";;;;;AAkCe,MAAM,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA,EAIxC,cAAc;AACV,UAAK;AA2BT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAmEZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uCAAc,CAAC,UAAU,OAAO;AAC5B,aAAO,GAAG,QAAQ,QAAQ,MAAM;AAAA,IACpC;AA9FI,SAAK,mBAAmB,CAAA;AACxB,SAAK,aAAa,oBAAI,IAAG;AACzB,SAAK,0BAA0B,CAAA;AAC/B,SAAK,iBAAiB;AACtB,SAAK,YAAY;AACjB,SAAK,SAAS;AACd,SAAK,aAAa;AAClB,SAAK,WAAW;AAChB,SAAK,UAAU;AACf,SAAK,kBAAkB;AACvB,SAAK,OAAO;AAAA,EAChB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,cAAc;AACV,WAAO,KAAK,aAAa,MAAM,KAAK,KAAK;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,UAAM,UAAU,KAAK,YAAW,IAAM,KAAK,aAAa,MAAM,MAAM,SAAY,WAAW,MAAO;AAElG,QAAI,KAAK,YAAY,YAAY,IAAI,GAAG;AACpC,WAAK,UAAU,IAAI,eAAe;AAAA,IACtC;AAEA,WAAO,IAAI,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QASlB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKX;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACR,SAAK,SAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;AACP,QAAI,KAAK,YAAY,YAAY,IAAI,KAAK,CAAC,KAAK,aAAa,MAAM,GAAG;AAClE,WAAK,aAAa,EAAE,MAAM,WAAU,CAAE;AAAA,IAC1C;AAAA,EACJ;AAWJ;ACpIA,KAAK,OAAO,YAAY,IAAI;"}

package/dist/wje-kanban.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-kanban.js","sources":["../packages/wje-kanban/kanban.element.js","../packages/wje-kanban/kanban.js"],"sourcesContent":["import Checkbox from '../wje-checkbox/checkbox.js';\nimport { default as WJElement } from '../wje-element/element.js';\nimport MenuItem from '../wje-menu-item/menu-item.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Kanban` is a custom web component that represents a Kanban board with draggable columns and cards.\n * @summary This element represents a Kanban board.\n * @documentation https://elements.webjet.sk/components/kanban\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the Kanban board.\n * @csspart native-infinite-scroll - Styles the native part of the Kanban board.\n * @tag wje-kanban\n */\nexport default class Kanban extends WJElement {\n    /**\n     * Creates an instance of Kanban.\n     * @class\n     */\n    constructor() {\n        super();\n        this.totalPages = 0; // Total number of pages\n        this.isLoading = []; // Array to hold loading status of each page\n        this._response = {}; // Response from the API\n        this.isDragging = false; // Flag to indicate if an element is being dragged\n        this.selectedCards = []; // Array to hold selected cards\n    }\n\n    /**\n     * Dependencies of the Option component.\n     */\n    dependencies = {\n        'wje-checkbox': Checkbox,\n        'wje-menu-item': MenuItem,\n    };\n\n    /**\n     * Sets the URL for fetching data.\n     * @param value {string}\n     */\n    set response(value) {\n        this._response = value;\n    }\n\n    /**\n     * Gets the URL for fetching data.\n     * @returns {*|{}|{}}\n     */\n    get response() {\n        return this._response;\n    }\n\n    /**\n     * Sets the URL for fetching data.\n     * @param value {array}\n     */\n    set selectedItems(value) {\n        this._selectedItems = value;\n    }\n\n    /**\n     * Gets the URL for fetching data.\n     * @returns {Array}\n     */\n    get selectedItems() {\n        return this._selectedItems;\n    }\n\n    /**\n     * Sets the URL for fetching data.\n     * @type {string}\n     */\n    className = 'Kanban';\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 before drawing.\n     * @param {object} context The context for drawing.\n     * @param {object} store The store for drawing.\n     * @param {object} params The parameters for drawing.\n     */\n    async beforeDraw(context, store, params) {\n        this.response = await this.getPages();\n    }\n\n    /**\n     * Draws the component after it has been prepared.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native');\n        native.setAttribute('part', 'native-infinite-scroll');\n\n        let pools = this.getPool(this.response, this.poolName);\n\n        // Add pools to the native element\n        for (const statusName in pools) {\n            if (pools.hasOwnProperty(statusName)) {\n                let pool = this.htmlPool(statusName, pools[statusName].length);\n\n                native.appendChild(pool);\n                const items = pools[statusName];\n\n                this.customForeach(pool, items);\n            }\n        }\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        if (!this.hasAttribute('role')) {\n            this.setAriaState({ role: 'region' });\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     * Called after the component has been drawn.\n     */\n    afterDraw() {\n        this.ui = {\n            elBoard: this.shadowRoot.getElementById('board'),\n            elTotalCardCount: this.shadowRoot.getElementById('totalCards'),\n            elCardPlaceholder: null,\n        };\n\n        this.setupDragAndDropEvents();\n        this.setupSelectAllCardsEvent();\n        this.setupMenuItemClickEvents();\n    }\n\n    /**\n     * Iterates over a list of items, generates an HTML card for each, and appends it to the specified pool's content area.\n     * @param {HTMLElement} pool The container element where the cards will be appended. It should contain an element with the class `.pool-content`.\n     * @param {Array} items An array of items used to generate HTML cards.\n     */\n    customForeach = (pool, items) => {\n        for (const item of items) {\n            let card = this.htmlCard(item);\n            pool.querySelector('.pool-content').appendChild(card);\n        }\n    };\n\n    /**\n     * Sets up the drag and drop events for the component.\n     */\n    setupDragAndDropEvents() {\n        this.live('dragstart', '.pool .card', (e) => {\n            this.isDragging = true;\n            e.dataTransfer.clearData();\n            e.dataTransfer.setData('text/plain', e.target.dataset.id);\n            e.dataTransfer.dropEffect = 'move';\n            e.target.style.opacity = '0.5';\n\n            const rect = e.target.getBoundingClientRect();\n\n            this.draggedElementWidth = rect.width;\n            this.draggedElementHeight = rect.height;\n        });\n\n        this.live('dragend', '.pool .card', (e) => {\n            e.target.style.opacity = '';\n            if (this.ui.elCardPlaceholder) {\n                this.ui.elCardPlaceholder.remove();\n            }\n            this.ui.elCardPlaceholder = null;\n            this.isDragging = false;\n        });\n\n        this.live('dragover', '.pool, .pool .card, .pool .card-placeholder', (e) => {\n            e.preventDefault();\n            e.dataTransfer.dropEffect = 'move';\n\n            if (e.target.classList.contains('pool')) {\n                e.target.appendChild(this.getCardPlaceholder());\n            } else if (e.target.classList.contains('card')) {\n                e.target.parentNode.insertBefore(this.getCardPlaceholder(), e.target);\n            }\n        });\n\n        this.live('drop', '.pool, .pool .card-placeholder', (e) => {\n            e.preventDefault();\n            if (!this.isDragging) return;\n\n            const todo_id = +e.dataTransfer.getData('text');\n            const card = this.shadowRoot.querySelector('.card[data-id=\"' + todo_id + '\"]');\n\n            if (e.target.classList.contains('pool')) {\n                e.target.querySelector('.pool-content').appendChild(card);\n            } else if (e.target.classList.contains('card-placeholder')) {\n                e.target.parentNode.replaceChild(card, e.target);\n            }\n\n            window.setTimeout(this.updateColumnItemCount, 100);\n        });\n    }\n\n    /**\n     * Sets up the select all cards event for the component.\n     */\n    setupSelectAllCardsEvent() {\n        // Event listener for selecting all cards in a pool\n        this.live('wje-toggle:change', '.select-all-cards', (e) => {\n            const pool = e.target.closest('.pool');\n            this.updateSelectedCards(pool, e.target.checked);\n        });\n\n        // Event listener for selecting individual cards\n        this.live('wje-toggle:change', '.select-card', (e) => {\n            const card = e.target.closest('.card');\n            this.setSelectedCards(e.target.checked, card);\n\n            if (this.selectedCards.length === 0) {\n                e.target.closest('.pool').querySelector('.select-all-cards').checked = false;\n            }\n\n            this.setSelectedItems();\n        });\n    }\n\n    /**\n     * Sets up the menu item click events for the component.\n     */\n    setupMenuItemClickEvents() {\n        this.context.querySelectorAll('wje-menu-item').forEach((menuItem) => {\n            menuItem.removeEventListener('wje-menu-item:click', this.menuItemClickHandler);\n        });\n\n        this.context.querySelectorAll('wje-menu-item').forEach((menuItem) => {\n            menuItem.addEventListener('wje-menu-item:click', this.menuItemClickHandler);\n        });\n    }\n\n    /**\n     * Handles the menu item click event.\n     * @param e\n     */\n    menuItemClickHandler = (e) => {\n        const action = e.target.dataset.action;\n        const pool = e.target.closest('.pool');\n\n        this.handlePoolAction(action, pool);\n    };\n\n    /**\n     * Updates the selected cards in the pool.\n     * @param pool {HTMLElement}\n     * @param isChecked {boolean}\n     */\n    updateSelectedCards(pool, isChecked) {\n        const cards = pool.querySelectorAll('.pool-content .card');\n\n        cards.forEach((card) => {\n            const checkbox = card.querySelector('wje-checkbox');\n            if (checkbox) {\n                checkbox.checked = isChecked;\n            }\n\n            this.setSelectedCards(isChecked, card);\n        });\n\n        this.setSelectedItems();\n    }\n\n    /**\n     * Updates the column item count.\n     */\n    updateColumnItemCount = () => {\n        const pools = this.shadowRoot.querySelectorAll('.pool');\n\n        pools.forEach((pool) => {\n            const itemCount = pool.querySelectorAll('.pool-content .card').length;\n            let itemCountDisplay = pool.querySelector('.item-count');\n\n            itemCountDisplay.innerHTML = itemCount;\n        });\n    };\n\n    /**\n     * Handles the pool action.\n     * @param action {string}\n     * @param pool {HTMLElement}\n     */\n    handlePoolAction(action, pool) {\n        switch (action) {\n            case 'move-left':\n                this.movePool(pool, 'left');\n                break;\n            case 'move-right':\n                this.movePool(pool, 'right');\n                break;\n            case 'rename-pool':\n                this.renamePool(pool);\n                break;\n            default:\n                console.error(`Neznáma akcia: ${action}`);\n        }\n    }\n\n    /**\n     * Moves the pool in the specified direction.\n     * @param pool {HTMLElement}\n     * @param direction {string}\n     */\n    movePool(pool, direction) {\n        const parent = pool.parentElement;\n\n        // Najprv odstránime všetky event listenery z aktuálnych stĺpcov (pools)\n        // Array.from(parent.children).forEach(removeEventListeners);\n\n        if (direction === 'left' && pool.previousElementSibling) {\n            // Presunieme pool doľava\n            parent.insertBefore(pool, pool.previousElementSibling);\n        } else if (direction === 'right' && pool.nextElementSibling) {\n            // Presunieme pool doprava\n            parent.insertBefore(pool.nextElementSibling, pool);\n        }\n\n        // Po presune stĺpcov (pools) musíme znova pripojiť event listenery\n        this.setupMenuItemClickEvents();\n    }\n\n    /**\n     * Renames the pool.\n     * @param pool {HTMLElement}\n     */\n    renamePool(pool) {\n        const newName = prompt('Zadajte nový názov pre stĺpec:');\n        if (newName) {\n            const header = pool.querySelector('.pool-header h4');\n            header.innerHTML = `${newName} (<span class=\"item-count\">0</span> položiek)`;\n            this.updateColumnItemCount(); // Aktualizovať počet položiek po premenovaní\n        }\n    }\n\n    /**\n     * Gets the card placeholder.\n     * @returns {null|*}\n     */\n    getCardPlaceholder() {\n        if (!this.ui.elCardPlaceholder) {\n            this.ui.elCardPlaceholder = document.createElement('div');\n            this.ui.elCardPlaceholder.className = 'card-placeholder';\n\n            this.ui.elCardPlaceholder.style.width = this.draggedElementWidth + 'px';\n            this.ui.elCardPlaceholder.style.height = this.draggedElementHeight + 'px';\n        } else {\n            this.ui.elCardPlaceholder.style.width = this.draggedElementWidth + 'px';\n            this.ui.elCardPlaceholder.style.height = this.draggedElementHeight + 'px';\n        }\n        return this.ui.elCardPlaceholder;\n    }\n\n    /**\n     * Adds a live event listener to the component.\n     * @param eventType {string}\n     * @param selector {string}\n     * @param callback {function}\n     */\n    live(eventType, selector, callback) {\n        const attachListener = (root) => {\n            root.addEventListener(\n                eventType,\n                (e) => {\n                    if (e.target.matches(selector)) {\n                        callback.call(e.target, e);\n                    }\n                },\n                false\n            );\n        };\n\n        const traverseAndAttach = (root) => {\n            attachListener(root);\n\n            root.querySelectorAll('*').forEach((node) => {\n                if (node.shadowRoot) {\n                    traverseAndAttach(node.shadowRoot);\n                }\n            });\n        };\n\n        traverseAndAttach(this.shadowRoot || this); // Start from the Shadow DOM if it exists\n    }\n\n    /**\n     * Sets the selected cards.\n     * @param isChecked {boolean}\n     * @param card {HTMLElement}\n     */\n    setSelectedCards(isChecked, card) {\n        if (isChecked) {\n            if (!this.selectedCards.includes(card)) {\n                this.selectedCards.push(card);\n            }\n        } else {\n            this.selectedCards = this.selectedCards.filter((selectedCard) => selectedCard !== card);\n        }\n    }\n\n    /**\n     * Sets the selected items.\n     */\n    setSelectedItems() {\n        const selectedIds = this.selectedCards.map((card) => card.getAttribute('data-id'));\n        this.selectedItems = this.response.filter((item) => selectedIds.includes(item.id));\n    }\n\n    /**\n     * Fetches the pages.\n     * @param page\n     * @returns {Promise<any>}\n     */\n    async getPages(page = 0) {\n        let hasParams = this.url.includes('?');\n        const response = await fetch(\n            `${this.url}${hasParams ? '&' : '?'}page=${page}&size=${this.size}${this?.queryParams}`\n        );\n        if (!response.ok) {\n            throw new Error(`An error occurred: ${response.status}`);\n        }\n        return await response.json();\n    }\n\n    /**\n     * Gets the pool.\n     * @param data {Array}\n     * @param poolName {string}\n     * @returns {*}\n     */\n    getPool = (data, poolName) => {\n        return data.reduce((acc, item) => {\n            const statusName = item.status.name;\n            if (!acc[statusName]) {\n                acc[statusName] = [];\n            }\n            acc[statusName].push(item);\n            return acc;\n        }, {});\n    };\n\n    /**\n     * Returns the HTML for the pool.\n     * @param title {string}\n     * @param countItems {number}\n     * @returns {Element}\n     */\n    htmlPool = (title, countItems) => {\n        let poolHtml = document.createElement('div');\n        poolHtml.classList.add('pool');\n\n        let header = document.createElement('div');\n        header.classList.add('pool-header');\n\n        let checkbox = document.createElement('wje-checkbox');\n        checkbox.setAttribute('type', 'checkbox');\n        checkbox.classList.add('select-all-cards');\n        checkbox.title = 'Select all cards';\n\n        let h4 = document.createElement('h4');\n        h4.textContent = title;\n\n        let badge = document.createElement('wje-badge');\n        badge.setAttribute('color', 'danger');\n        badge.classList.add('item-count');\n        badge.textContent = countItems;\n\n        let dropdown = document.createElement('wje-dropdown');\n        dropdown.setAttribute('placement', 'bottom-start');\n        dropdown.setAttribute('offset', '5');\n        dropdown.setAttribute('collapsible', '');\n        dropdown.innerHTML = `\n            <wje-button fill=\"link\" slot=\"trigger\" size=\"small\" round>\n                <wje-icon name=\"dots-vertical\"></wje-icon>\n            </wje-button>\n            <wje-menu active>\n                <wje-menu-item data-action=\"rename-pool\">\n                    <wj-label>Zmeniť názov</wj-label>\n                </wje-menu-item>\n                <wje-menu-item data-action=\"move-left\">\n                    <wj-label>Posunúť doľava</wj-label>\n                </wje-menu-item>\n                <wje-menu-item data-action=\"move-right\">\n                    <wj-label>Posunúť doprava</wj-label>\n                </wje-menu-item>\n            </wje-menu>\n        `;\n\n        header.appendChild(checkbox);\n        header.appendChild(h4);\n        header.appendChild(badge);\n        header.appendChild(dropdown);\n\n        let content = document.createElement('div');\n        content.classList.add('pool-content');\n\n        poolHtml.appendChild(header);\n        poolHtml.appendChild(content);\n\n        return poolHtml;\n    };\n\n    /**\n     * Returns the HTML for the card.\n     * @param item {Object}\n     * @returns {Element}\n     */\n    htmlCard = (item) => {\n        let card = document.createElement('div');\n        card.classList.add('card');\n        card.draggable = true;\n        card.setAttribute('data-id', item.id);\n        card.innerHTML = `\n            <wje-checkbox type=\"checkbox\" class=\"select-card\" title=\"Select card\"></wje-checkbox>\n            <div>${item.body}</div>\n        `;\n\n        return card;\n    };\n\n    dispatchEvent(event) {\n        return false;\n    }\n}\n","import Kanban from './kanban.element.js';\n\nexport default Kanban;\n\nKanban.define('wje-kanban', Kanban);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-kanban.js","sources":["../packages/wje-kanban/kanban.element.js","../packages/wje-kanban/kanban.js"],"sourcesContent":["import Checkbox from '../wje-checkbox/checkbox.js';\nimport { default as WJElement } from '../wje-element/element.js';\nimport MenuItem from '../wje-menu-item/menu-item.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Kanban` is a custom web component that represents a Kanban board with draggable columns and cards.\n * @summary This element represents a Kanban board.\n * @documentation https://elements.webjet.sk/components/kanban\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the Kanban board.\n * @csspart native-infinite-scroll - Styles the native part of the Kanban board.\n * @tag wje-kanban\n */\nexport default class Kanban extends WJElement {\n    /**\n     * Creates an instance of Kanban.\n     * @class\n     */\n    constructor() {\n        super();\n        this.totalPages = 0; // Total number of pages\n        this.isLoading = []; // Array to hold loading status of each page\n        this._response = {}; // Response from the API\n        this.isDragging = false; // Flag to indicate if an element is being dragged\n        this.selectedCards = []; // Array to hold selected cards\n    }\n\n    /**\n     * Dependencies of the Option component.\n     */\n    dependencies = {\n        'wje-checkbox': Checkbox,\n        'wje-menu-item': MenuItem,\n    };\n\n    /**\n     * Sets the URL for fetching data.\n     * @param value {string}\n     */\n    set response(value) {\n        this._response = value;\n    }\n\n    /**\n     * Gets the URL for fetching data.\n     * @returns {*|{}|{}}\n     */\n    get response() {\n        return this._response;\n    }\n\n    /**\n     * Sets the URL for fetching data.\n     * @param value {array}\n     */\n    set selectedItems(value) {\n        this._selectedItems = value;\n    }\n\n    /**\n     * Gets the URL for fetching data.\n     * @returns {Array}\n     */\n    get selectedItems() {\n        return this._selectedItems;\n    }\n\n    /**\n     * Sets the URL for fetching data.\n     * @type {string}\n     */\n    className = 'Kanban';\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 before drawing.\n     * @param {object} context The context for drawing.\n     * @param {object} store The store for drawing.\n     * @param {object} params The parameters for drawing.\n     */\n    async beforeDraw(context, store, params) {\n        this.response = await this.getPages();\n    }\n\n    /**\n     * Draws the component after it has been prepared.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native');\n        native.setAttribute('part', 'native-infinite-scroll');\n\n        let pools = this.getPool(this.response, this.poolName);\n\n        // Add pools to the native element\n        for (const statusName in pools) {\n            if (pools.hasOwnProperty(statusName)) {\n                let pool = this.htmlPool(statusName, pools[statusName].length);\n\n                native.appendChild(pool);\n                const items = pools[statusName];\n\n                this.customForeach(pool, items);\n            }\n        }\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        if (!this.hasAttribute('role')) {\n            this.setAriaState({ role: 'region' });\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     * Called after the component has been drawn.\n     */\n    afterDraw() {\n        this.ui = {\n            elBoard: this.shadowRoot.getElementById('board'),\n            elTotalCardCount: this.shadowRoot.getElementById('totalCards'),\n            elCardPlaceholder: null,\n        };\n\n        this.setupDragAndDropEvents();\n        this.setupSelectAllCardsEvent();\n        this.setupMenuItemClickEvents();\n    }\n\n    /**\n     * Iterates over a list of items, generates an HTML card for each, and appends it to the specified pool's content area.\n     * @param {HTMLElement} pool The container element where the cards will be appended. It should contain an element with the class `.pool-content`.\n     * @param {Array} items An array of items used to generate HTML cards.\n     */\n    customForeach = (pool, items) => {\n        for (const item of items) {\n            let card = this.htmlCard(item);\n            pool.querySelector('.pool-content').appendChild(card);\n        }\n    };\n\n    /**\n     * Sets up the drag and drop events for the component.\n     */\n    setupDragAndDropEvents() {\n        this.live('dragstart', '.pool .card', (e) => {\n            this.isDragging = true;\n            e.dataTransfer.clearData();\n            e.dataTransfer.setData('text/plain', e.target.dataset.id);\n            e.dataTransfer.dropEffect = 'move';\n            e.target.style.opacity = '0.5';\n\n            const rect = e.target.getBoundingClientRect();\n\n            this.draggedElementWidth = rect.width;\n            this.draggedElementHeight = rect.height;\n        });\n\n        this.live('dragend', '.pool .card', (e) => {\n            e.target.style.opacity = '';\n            if (this.ui.elCardPlaceholder) {\n                this.ui.elCardPlaceholder.remove();\n            }\n            this.ui.elCardPlaceholder = null;\n            this.isDragging = false;\n        });\n\n        this.live('dragover', '.pool, .pool .card, .pool .card-placeholder', (e) => {\n            e.preventDefault();\n            e.dataTransfer.dropEffect = 'move';\n\n            if (e.target.classList.contains('pool')) {\n                e.target.appendChild(this.getCardPlaceholder());\n            } else if (e.target.classList.contains('card')) {\n                e.target.parentNode.insertBefore(this.getCardPlaceholder(), e.target);\n            }\n        });\n\n        this.live('drop', '.pool, .pool .card-placeholder', (e) => {\n            e.preventDefault();\n            if (!this.isDragging) return;\n\n            const todo_id = +e.dataTransfer.getData('text');\n            const card = this.shadowRoot.querySelector('.card[data-id=\"' + todo_id + '\"]');\n\n            if (e.target.classList.contains('pool')) {\n                e.target.querySelector('.pool-content').appendChild(card);\n            } else if (e.target.classList.contains('card-placeholder')) {\n                e.target.parentNode.replaceChild(card, e.target);\n            }\n\n            window.setTimeout(this.updateColumnItemCount, 100);\n        });\n    }\n\n    /**\n     * Sets up the select all cards event for the component.\n     */\n    setupSelectAllCardsEvent() {\n        // Event listener for selecting all cards in a pool\n        this.live('wje-toggle:change', '.select-all-cards', (e) => {\n            const pool = e.target.closest('.pool');\n            this.updateSelectedCards(pool, e.target.checked);\n        });\n\n        // Event listener for selecting individual cards\n        this.live('wje-toggle:change', '.select-card', (e) => {\n            const card = e.target.closest('.card');\n            this.setSelectedCards(e.target.checked, card);\n\n            if (this.selectedCards.length === 0) {\n                e.target.closest('.pool').querySelector('.select-all-cards').checked = false;\n            }\n\n            this.setSelectedItems();\n        });\n    }\n\n    /**\n     * Sets up the menu item click events for the component.\n     */\n    setupMenuItemClickEvents() {\n        this.context.querySelectorAll('wje-menu-item').forEach((menuItem) => {\n            menuItem.removeEventListener('wje-menu-item:click', this.menuItemClickHandler);\n        });\n\n        this.context.querySelectorAll('wje-menu-item').forEach((menuItem) => {\n            menuItem.addEventListener('wje-menu-item:click', this.menuItemClickHandler);\n        });\n    }\n\n    /**\n     * Handles the menu item click event.\n     * @param e\n     */\n    menuItemClickHandler = (e) => {\n        const action = e.target.dataset.action;\n        const pool = e.target.closest('.pool');\n\n        this.handlePoolAction(action, pool);\n    };\n\n    /**\n     * Updates the selected cards in the pool.\n     * @param pool {HTMLElement}\n     * @param isChecked {boolean}\n     */\n    updateSelectedCards(pool, isChecked) {\n        const cards = pool.querySelectorAll('.pool-content .card');\n\n        cards.forEach((card) => {\n            const checkbox = card.querySelector('wje-checkbox');\n            if (checkbox) {\n                checkbox.checked = isChecked;\n            }\n\n            this.setSelectedCards(isChecked, card);\n        });\n\n        this.setSelectedItems();\n    }\n\n    /**\n     * Updates the column item count.\n     */\n    updateColumnItemCount = () => {\n        const pools = this.shadowRoot.querySelectorAll('.pool');\n\n        pools.forEach((pool) => {\n            const itemCount = pool.querySelectorAll('.pool-content .card').length;\n            let itemCountDisplay = pool.querySelector('.item-count');\n\n            itemCountDisplay.innerHTML = itemCount;\n        });\n    };\n\n    /**\n     * Handles the pool action.\n     * @param action {string}\n     * @param pool {HTMLElement}\n     */\n    handlePoolAction(action, pool) {\n        switch (action) {\n            case 'move-left':\n                this.movePool(pool, 'left');\n                break;\n            case 'move-right':\n                this.movePool(pool, 'right');\n                break;\n            case 'rename-pool':\n                this.renamePool(pool);\n                break;\n            default:\n                console.error(`Neznáma akcia: ${action}`);\n        }\n    }\n\n    /**\n     * Moves the pool in the specified direction.\n     * @param pool {HTMLElement}\n     * @param direction {string}\n     */\n    movePool(pool, direction) {\n        const parent = pool.parentElement;\n\n        // Najprv odstránime všetky event listenery z aktuálnych stĺpcov (pools)\n        // Array.from(parent.children).forEach(removeEventListeners);\n\n        if (direction === 'left' && pool.previousElementSibling) {\n            // Presunieme pool doľava\n            parent.insertBefore(pool, pool.previousElementSibling);\n        } else if (direction === 'right' && pool.nextElementSibling) {\n            // Presunieme pool doprava\n            parent.insertBefore(pool.nextElementSibling, pool);\n        }\n\n        // Po presune stĺpcov (pools) musíme znova pripojiť event listenery\n        this.setupMenuItemClickEvents();\n    }\n\n    /**\n     * Renames the pool.\n     * @param pool {HTMLElement}\n     */\n    renamePool(pool) {\n        const newName = prompt('Zadajte nový názov pre stĺpec:');\n        if (newName) {\n            const header = pool.querySelector('.pool-header h4');\n            header.innerHTML = `${newName} (<span class=\"item-count\">0</span> položiek)`;\n            this.updateColumnItemCount(); // Aktualizovať počet položiek po premenovaní\n        }\n    }\n\n    /**\n     * Gets the card placeholder.\n     * @returns {null|*}\n     */\n    getCardPlaceholder() {\n        if (!this.ui.elCardPlaceholder) {\n            this.ui.elCardPlaceholder = document.createElement('div');\n            this.ui.elCardPlaceholder.className = 'card-placeholder';\n\n            this.ui.elCardPlaceholder.style.width = this.draggedElementWidth + 'px';\n            this.ui.elCardPlaceholder.style.height = this.draggedElementHeight + 'px';\n        } else {\n            this.ui.elCardPlaceholder.style.width = this.draggedElementWidth + 'px';\n            this.ui.elCardPlaceholder.style.height = this.draggedElementHeight + 'px';\n        }\n        return this.ui.elCardPlaceholder;\n    }\n\n    /**\n     * Adds a live event listener to the component.\n     * @param eventType {string}\n     * @param selector {string}\n     * @param callback {function}\n     */\n    live(eventType, selector, callback) {\n        const attachListener = (root) => {\n            root.addEventListener(\n                eventType,\n                (e) => {\n                    if (e.target.matches(selector)) {\n                        callback.call(e.target, e);\n                    }\n                },\n                false\n            );\n        };\n\n        const traverseAndAttach = (root) => {\n            attachListener(root);\n\n            root.querySelectorAll('*').forEach((node) => {\n                if (node.shadowRoot) {\n                    traverseAndAttach(node.shadowRoot);\n                }\n            });\n        };\n\n        traverseAndAttach(this.shadowRoot || this); // Start from the Shadow DOM if it exists\n    }\n\n    /**\n     * Sets the selected cards.\n     * @param isChecked {boolean}\n     * @param card {HTMLElement}\n     */\n    setSelectedCards(isChecked, card) {\n        if (isChecked) {\n            if (!this.selectedCards.includes(card)) {\n                this.selectedCards.push(card);\n            }\n        } else {\n            this.selectedCards = this.selectedCards.filter((selectedCard) => selectedCard !== card);\n        }\n    }\n\n    /**\n     * Sets the selected items.\n     */\n    setSelectedItems() {\n        const selectedIds = this.selectedCards.map((card) => card.getAttribute('data-id'));\n        this.selectedItems = this.response.filter((item) => selectedIds.includes(item.id));\n    }\n\n    /**\n     * Fetches the pages.\n     * @param page\n     * @returns {Promise<any>}\n     */\n    async getPages(page = 0) {\n        let hasParams = this.url.includes('?');\n        const response = await fetch(\n            `${this.url}${hasParams ? '&' : '?'}page=${page}&size=${this.size}${this?.queryParams}`\n        );\n        if (!response.ok) {\n            throw new Error(`An error occurred: ${response.status}`);\n        }\n        return await response.json();\n    }\n\n    /**\n     * Gets the pool.\n     * @param data {Array}\n     * @param poolName {string}\n     * @returns {*}\n     */\n    getPool = (data, poolName) => {\n        return data.reduce((acc, item) => {\n            const statusName = item.status.name;\n            if (!acc[statusName]) {\n                acc[statusName] = [];\n            }\n            acc[statusName].push(item);\n            return acc;\n        }, {});\n    };\n\n    /**\n     * Returns the HTML for the pool.\n     * @param title {string}\n     * @param countItems {number}\n     * @returns {Element}\n     */\n    htmlPool = (title, countItems) => {\n        let poolHtml = document.createElement('div');\n        poolHtml.classList.add('pool');\n\n        let header = document.createElement('div');\n        header.classList.add('pool-header');\n\n        let checkbox = document.createElement('wje-checkbox');\n        checkbox.setAttribute('type', 'checkbox');\n        checkbox.classList.add('select-all-cards');\n        checkbox.title = 'Select all cards';\n\n        let h4 = document.createElement('h4');\n        h4.textContent = title;\n\n        let badge = document.createElement('wje-badge');\n        badge.setAttribute('color', 'danger');\n        badge.classList.add('item-count');\n        badge.textContent = countItems;\n\n        let dropdown = document.createElement('wje-dropdown');\n        dropdown.setAttribute('placement', 'bottom-start');\n        dropdown.setAttribute('offset', '5');\n        dropdown.setAttribute('collapsible', '');\n        dropdown.innerHTML = `\n            <wje-button fill=\"link\" slot=\"trigger\" size=\"small\" round>\n                <wje-icon name=\"dots-vertical\"></wje-icon>\n            </wje-button>\n            <wje-menu active>\n                <wje-menu-item data-action=\"rename-pool\">\n                    <wj-label>Zmeniť názov</wj-label>\n                </wje-menu-item>\n                <wje-menu-item data-action=\"move-left\">\n                    <wj-label>Posunúť doľava</wj-label>\n                </wje-menu-item>\n                <wje-menu-item data-action=\"move-right\">\n                    <wj-label>Posunúť doprava</wj-label>\n                </wje-menu-item>\n            </wje-menu>\n        `;\n\n        header.appendChild(checkbox);\n        header.appendChild(h4);\n        header.appendChild(badge);\n        header.appendChild(dropdown);\n\n        let content = document.createElement('div');\n        content.classList.add('pool-content');\n\n        poolHtml.appendChild(header);\n        poolHtml.appendChild(content);\n\n        return poolHtml;\n    };\n\n    /**\n     * Returns the HTML for the card.\n     * @param item {Object}\n     * @returns {Element}\n     */\n    htmlCard = (item) => {\n        let card = document.createElement('div');\n        card.classList.add('card');\n        card.draggable = true;\n        card.setAttribute('data-id', item.id);\n        card.innerHTML = `\n            <wje-checkbox type=\"checkbox\" class=\"select-card\" title=\"Select card\"></wje-checkbox>\n            <div>${item.body}</div>\n        `;\n\n        return card;\n    };\n\n    dispatchEvent(event) {\n        return false;\n    }\n}\n","import Kanban from './kanban.element.js';\n\nexport default Kanban;\n\nKanban.define('wje-kanban', Kanban);\n"],"names":[],"mappings":"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"}

package/dist/wje-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-label.js","sources":["../packages/wje-label/label.element.js","../packages/wje-label/label.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Label` is a custom web component that represents a label.\n * It extends from `WJElement`.\n * @summary This element represents a label.\n * @documentation https://elements.webjet.sk/components/label\n * @status stable\n * @augments {WJElement}\n * @csspart label - The label part of the component.\n * @slot - The default slot for the label.\n * @cssproperty [--wje-label-color=black] - Defines the text color of the label. This property determines the color of the label's text. Accepts any valid CSS color value (e.g., named colors like `black`, `red`, or values like `#000000`, `rgb(0, 0, 0)`).\n * @cssproperty [--wje-label-font-size=16px] - Specifies the font size of the label. This property sets the size of the label's text. Accepts any valid CSS length unit (e.g., `px`, `em`, `rem`). The default value is `16px`, which provides optimal readability in most designs.\n * // @fires wje-label:change - Event fired when the label is changed.\n * @tag wje-label\n */\nexport default class Label extends WJElement {\n    /**\n     * Creates an instance of Label.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'Label';\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        if (this.color) this.classList.add('wje-color-' + params.color, 'wje-color');\n\n        let element = document.createElement('slot');\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n}\n","import Label from './label.element.js';\n\nexport default Label;\n\nLabel.define('wje-label', Label);\n"],"names":[],"mappings":";;;;;AAiBe,MAAM,cAAc,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKzC,cAAc;AACV,UAAO;AAGX,qCAAY;AAAA,EAFhB;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;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,KAAK,MAAO,MAAK,UAAU,IAAI,eAAe,OAAO,OAAO,WAAW;AAE3E,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACf;AACA;AChEA,MAAM,OAAO,aAAa,KAAK;"}
+{"version":3,"file":"wje-label.js","sources":["../packages/wje-label/label.element.js","../packages/wje-label/label.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Label` is a custom web component that represents a label.\n * It extends from `WJElement`.\n * @summary This element represents a label.\n * @documentation https://elements.webjet.sk/components/label\n * @status stable\n * @augments {WJElement}\n * @csspart label - The label part of the component.\n * @slot - The default slot for the label.\n * @cssproperty [--wje-label-color=black] - Defines the text color of the label. This property determines the color of the label's text. Accepts any valid CSS color value (e.g., named colors like `black`, `red`, or values like `#000000`, `rgb(0, 0, 0)`).\n * @cssproperty [--wje-label-font-size=16px] - Specifies the font size of the label. This property sets the size of the label's text. Accepts any valid CSS length unit (e.g., `px`, `em`, `rem`). The default value is `16px`, which provides optimal readability in most designs.\n * // @fires wje-label:change - Event fired when the label is changed.\n * @tag wje-label\n */\nexport default class Label extends WJElement {\n    /**\n     * Creates an instance of Label.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'Label';\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        if (this.color) this.classList.add('wje-color-' + params.color, 'wje-color');\n\n        let element = document.createElement('slot');\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n}\n","import Label from './label.element.js';\n\nexport default Label;\n\nLabel.define('wje-label', Label);\n"],"names":[],"mappings":";;;;;AAiBe,MAAM,cAAc,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKzC,cAAc;AACV,UAAK;AAGT,qCAAY;AAAA,EAFZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,WAAW,qBAAqB;AAC5B,WAAO,CAAA;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,KAAK,MAAO,MAAK,UAAU,IAAI,eAAe,OAAO,OAAO,WAAW;AAE3E,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACX;AACJ;AChEA,MAAM,OAAO,aAAa,KAAK;"}