wj-elements 0.1.181 → 0.1.183

package/dist/wje-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-button.js","sources":["../packages/wje-button/button.element.js","../packages/wje-button/button.js"],"sourcesContent":["import { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\n\nimport { bool } from '../utils/utils.js';\nimport { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport Icon from '../wje-icon/icon.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents Button element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/button\n * @status stable\n * @augments WJElement\n * @dependency wje-icon\n * @slot - The button main content.\n * @slot icon - The button icon.\n * @slot caret - The button caret.\n * @slot start - The button start slot.\n * @slot end - The button end slot.\n * @slot toggle - The button toggle slot.\n * @csspart native - The component's native wrapper.\n * @cssproperty [--wje-button-background-color=transparent] - Background color of the component;\n * @cssproperty [--wje-button-border-color=--wje-color-contrast-4] - Border color of the component;\n * @cssproperty [--wje-button-color=--wje-color-contrast-11] - Color of the component;\n * @cssproperty [--wje-button-border-radius=--wje-border-radius-medium] - Border radius of the component;\n * @cssproperty [--wje-button-border-width=1px] - Border width of the component;\n * @cssproperty [--wje-button-border-style=solid] - Border style of the component;\n * @cssproperty [--wje-button-border-color=--wje-color-contrast-1] - Border color of the component;\n * @cssproperty [--wje-button-margin-inline=0] - Margin inline of the component;\n */\n\nexport default class Button extends WJElement {\n    /**\n     * Button constructor method.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this.internals_ = this.attachInternals();\n    }\n\n    /**\n     * Dependencies of the Button element.\n     * @type {object}\n     */\n    dependencies = {\n        'wje-icon': Icon,\n    };\n\n    /**\n     * Properties of the element Button.\n     * @param value\n     */\n    set color(value) {\n        this.setAttribute('color', value || 'default');\n    }\n\n    /**\n     * Get color of the Button element.\n     * @returns {string|string}\n     */\n    get color() {\n        return this.getAttribute('color') || 'default';\n    }\n\n    /**\n     * Set variant of the Button element.\n     * @param value\n     */\n    set caret(value) {\n        this.setAttribute('caret', value);\n    }\n\n    /**\n     * Get variant of the Button element.\n     * @returns {boolean}\n     */\n    get caret() {\n        return this.hasAttribute('caret');\n    }\n\n    /**\n     * Sets the 'round' attribute on the element. If the value is true, the attribute is added;\n     * otherwise, it is removed from the element.\n     * @param {boolean} value A boolean indicating whether to set or remove the 'round' attribute.\n     */\n    set round(value) {\n        if (value) {\n            this.setAttribute('round', '');\n        } else {\n            this.removeAttribute('round');\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'round' attribute as a boolean.\n     * Checks if the 'round' attribute is present on the element.\n     * @returns {boolean} True if the 'round' attribute exists, otherwise false.\n     */\n    get round() {\n        return this.hasAttribute('round');\n    }\n\n    /**\n     * Set variant of the Button element.\n     * @param value\n     */\n    set tooltip(value) {\n        this.setAttribute('tooltip', value);\n    }\n\n    /**\n     * Get variant of the Button element.\n     * @returns {boolean}\n     */\n    get tooltip() {\n        return this.hasAttribute('tooltip');\n    }\n\n    /**\n     * Set variant of the Button element.\n     * @param value\n     */\n    set dialog(value) {\n        this.setAttribute('dialog', value);\n    }\n\n    /**\n     * Get variant of the Button element.\n     * @returns {string|object}\n     */\n    get dialog() {\n        return this.getAttribute('dialog');\n    }\n\n    /**\n     * Set active state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set active(value) {\n        this.setAttribute('active', '');\n    }\n\n    /**\n     * Get active state of the Button element.\n     * @returns {boolean} active - The active state\n     */\n    get active() {\n        return this.hasAttribute('active');\n    }\n\n    /**\n     * Set disabled state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set disabled(value) {\n        this.removeAttribute('disabled');\n\n        if (value) {\n            this.setAttribute('disabled', '');\n        }\n    }\n\n    /**\n     * Get disabled state of the Button element.\n     * @returns {boolean} disabled - The disabled state\n     */\n    get disabled() {\n        return this.hasAttribute('disabled');\n    }\n\n    /**\n     * Set fill of the Button element.\n     * @param {string} value The value to set\n     */\n    set fill(value) {\n        this.setAttribute('fill', value);\n    }\n\n    /**\n     * Get fill of the Button element.\n     * @returns {string} fill - The fill value\n     */\n    get fill() {\n        return this.getAttribute('fill') || 'solid';\n    }\n\n    /**\n     * Set outline state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set outline(value) {\n        this.setAttribute('outline', '');\n    }\n\n    /**\n     * Get outline state of the Button element.\n     * @returns {boolean} outline - The outline state\n     */\n    get outline() {\n        return this.hasAttribute('outline');\n    }\n\n    /**\n     * Set stop propagation state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set stopPropagation(value) {\n        this.setAttribute('stop-propagation', bool(value));\n    }\n\n    /**\n     * Get stop propagation state of the Button element.\n     * @returns {boolean} stopPropagation - The stop propagation state\n     */\n    get stopPropagation() {\n        return bool(this.getAttribute('stop-propagation'));\n    }\n\n    /**\n     * Sets the value of the custom event attribute.\n     * @param {string} value The value to be assigned to the custom event attribute.\n     */\n    set customEvent(value) {\n        this.setAttribute('custom-event', value);\n    }\n\n    /**\n     * Retrieves the value of the 'custom-event' attribute from the element.\n     * @returns {string | null} The value of the 'custom-event' attribute, or null if the attribute is not set.\n     */\n    get customEvent() {\n        return this.getAttribute('custom-event');\n    }\n\n    /**\n     * Retrieves a mapped object containing custom event parameters extracted from the element's attributes.\n     * Attributes considered are those that begin with 'custom-event-'.\n     * The mapped object's keys are derived by removing the 'custom-event-' prefix from the attribute names,\n     * and the values are the corresponding attribute values.\n     * @returns {object} An object containing key-value pairs of custom event parameters.\n     */\n    get customEventParameters() {\n        const attributes = Array.from(this.attributes).filter((attr) => attr.name.startsWith('custom-event-'));\n\n        return attributes.reduce((acc, attr) => {\n            const key = attr.name.replace('custom-event-', '');\n            acc[key] = attr.value;\n\n            return acc;\n        }, {});\n    }\n\n    /**\n     * Class name for the Button element\n     * @type {string}\n     */\n    className = 'Button';\n\n    /**\n     * Get CSS stylesheet for the Button element.\n     * @static\n     * @returns {CSSStyleSheet} styles - The CSS stylesheet for the Button element.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Get observed attributes for the Button element.\n     * @static\n     * @returns {Array<string>} observedAttributes - The observed attributes array for the Button element.\n     */\n    static get observedAttributes() {\n        return ['disabled'];\n    }\n\n    /**\n     * @summary A static property that indicates whether the custom element is form-associated or not.\n     * Form-associated custom elements are elements that can participate in form submission.\n     * @type {boolean}\n     */\n    static formAssociated = true;\n\n    /**\n     * @summary Callback function that is called when the custom element is associated with a form.\n     * This function sets the internal `_form` property to the associated form.\n     * @param {HTMLFormElement} form The form the custom element is associated with.\n     */\n    formAssociatedCallback(form) {\n        this._form = form;\n    }\n\n    /**\n     * @summary Callback function that is called when the form-associated state of the custom element changes.\n     * This function updates the 'disabled' attribute of the element based on the new state.\n     * @param {boolean} disabled The new form-associated state.\n     */\n    formDisabledCallback(disabled) {\n        if (disabled) {\n            this.setAttribute('disabled', '');\n        } else {\n            this.removeAttribute('disabled');\n        }\n    }\n\n    /**\n     * Setup attributes for the Button element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draw method for the Button element.\n     * @returns {object} fragment - The document fragment containing the drawn element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement(this.hasAttribute('href') ? 'a' : 'button');\n        if (this.hasAttribute('href')) {\n            native.setAttribute('href', this.getAttribute('href'));\n        } else {\n            if (this.type === 'submit') {\n                native.setAttribute('type', 'submit');\n            }\n        }\n\n        native.classList.add('native-button');\n        native.setAttribute('part', 'native');\n\n        this.classList.remove('wje-button-disabled');\n\n        if (this.disabled) native.classList.add('wje-button-disabled');\n\n        if (this.variant) native.classList.add('wje-button-' + this.variant);\n\n        if (this.hasAttribute('round')) native.classList.add('wje-button-round');\n\n        if (this.hasAttribute('circle')) native.classList.add('wje-button-circle');\n\n        if (this.outline) native.classList.add('wje-outline');\n\n        if (this.fill) native.classList.add('wje-button-' + this.fill);\n\n        if (this.size) native.classList.add('wje-button-' + this.size);\n\n        if (\n            (this.querySelectorAll('[slot=caret]').length < 1 && this.hasAttribute('caret')) ||\n            this.hasAttribute('only-caret')\n        ) {\n            let i = document.createElement('wje-icon');\n            i.style.setProperty('--wje-icon-size', '14px');\n            i.setAttribute('slot', 'caret');\n            i.setAttribute('name', 'chevron-down');\n            i.setAttribute('part', 'caret');\n\n            this.appendChild(i);\n        }\n\n        if (this.active) {\n            this.classList.add('wje-active');\n            let i = document.createElement('wje-icon');\n            i.setAttribute('name', 'check');\n\n            this.appendChild(i);\n        }\n\n        native.classList.add('wje-color-' + this.color, 'wje-color');\n\n        let span = document.createElement('span');\n        span.setAttribute('part', 'inner');\n        span.classList.add('button-inner');\n\n        let slot = document.createElement('slot');\n        slot.setAttribute('name', 'icon-only');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        slot.setAttribute('name', 'start');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        slot.setAttribute('name', 'end');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        slot.setAttribute('name', 'caret');\n        span.appendChild(slot);\n\n        this.hasToggle = WjElementUtils.hasSlot(this, 'toggle');\n\n        if (this.hasToggle) {\n            this.slotToggle = document.createElement('slot');\n            this.slotToggle.setAttribute('name', 'toggle');\n\n            span.appendChild(this.slotToggle);\n        }\n\n        native.appendChild(span);\n\n        if (this.tooltip) {\n            let tooltip = document.createElement('wje-tooltip');\n            tooltip.setAttribute('content', this.getAttribute('tooltip'));\n            tooltip.setAttribute('placement', this.getAttribute('tooltip-placement') || 'top');\n            tooltip.appendChild(native);\n\n            fragment.appendChild(tooltip);\n        } else {\n            fragment.appendChild(native);\n        }\n\n        return fragment;\n    }\n\n    /**\n     * After draw method for the Button element.\n     */\n    afterDraw() {\n        if (this.hasAttribute('route')) {\n            this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });\n        }\n\n        // nastavenie toggle podla atributu, ak nie je nastaveny, tak sa zobrazi vzdy prvy element\n        if (this.hasToggle) {\n            if (this.toggle === 'off') {\n                this.slotToggle.assignedNodes()[1].classList.add('show');\n                this.setAttribute('value', 'off');\n            } else {\n                this.slotToggle.assignedNodes()[0].classList.add('show');\n                this.setAttribute('value', 'on');\n            }\n        }\n\n        if (this.hasAttribute('custom-event')) {\n            event.addListener(this, 'click', null, this.#populateCustomEvent);\n        }\n\n        if (this.hasAttribute('dialog')) {\n            event.addListener(this, 'click', null, this.eventDialogOpen);\n        } else {\n            event.addListener(this, 'click', 'wje-button:click', null); // { stopPropagation: this.stopPropagation } - zrusene kvoli dropdown kde som nevedel odchytit event click\n        }\n\n        if (this.hasToggle)\n            event.addListener(this, 'click', 'wje-button:toggle', this.toggleStates, {\n                stopPropagation: this.stopPropagation,\n            });\n\n        if (this.type === 'submit') {\n            event.addListener(this, 'click', 'wje-button:submit', () => {\n                console.log('submit', this.internals_.form);\n                event.dispatchCustomEvent(this.internals_.form, 'submit', {});\n            });\n        }\n\n        if (this.type === 'reset') {\n            event.addListener(this, 'click', 'wje-button:reset', () => {\n                this.internals_.form.reset();\n            });\n        }\n    }\n\n    /**\n     * Before disconnect method for the Button element.\n     */\n    beforeDisconnect() {\n        // remove all events from the button\n        event.removeListener(this, 'click', null, this.eventDialogOpen);\n        event.removeListener(this, 'click', 'wje-button:click', null);\n        event.removeListener(this, 'click', 'wje-button:toggle', this.toggleStates);\n        event.removeListener(this, 'click', null, this.#populateCustomEvent);\n        event.removeListener(this, 'click', 'wje-button:submit', null);\n        event.removeListener(this, 'click', 'wje-button:reset', null);\n\n        this.removeEventListener('click', this.eventDialogOpen);\n        this.unbindRouterLinks?.();\n    }\n\n    /**\n     * Event dialog open method for the Button element.\n     * @param {Event} e The event object\n     */\n    eventDialogOpen = (e) => {\n        event.dispatchCustomEvent(this, this.dialog);\n    };\n\n    /**\n     * Toggle states method for the Button element.\n     */\n    toggleStates = () => {\n        const nodes = this.slotToggle.assignedNodes().filter((node) => node.nodeType === Node.ELEMENT_NODE);\n\n        nodes.forEach((node, index) => {\n            if (node.classList.contains('show')) {\n                node.classList.remove('show');\n            } else {\n                node.classList.add('show');\n                this.setAttribute('value', index === 0 ? 'on' : 'off');\n            }\n        });\n    }\n\n    /**\n     * Dispatches a custom event with specified parameters.\n     * This method uses the `customEvent` and `customEventParameters` properties\n     * to create and dispatch a `CustomEvent`. The event is configured to be\n     * composed and bubbles up through the DOM.\n     * @returns {void} This method does not return a value.\n     */\n    #populateCustomEvent() {\n        this.dispatchEvent(\n          new CustomEvent(this.customEvent, { detail: this.customEventParameters, composed: true, bubbles: true })\n        );\n    }\n}\n","import Button from './button.element.js';\n\nexport default Button;\n\nButton.define('wje-button', Button);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-button.js","sources":["../packages/wje-button/button.element.js","../packages/wje-button/button.js"],"sourcesContent":["import { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\n\nimport { bool } from '../utils/utils.js';\nimport { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport Icon from '../wje-icon/icon.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents Button element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/button\n * @status stable\n * @augments WJElement\n * @dependency wje-icon\n * @slot - The button main content.\n * @slot icon - The button icon.\n * @slot caret - The button caret.\n * @slot start - The button start slot.\n * @slot end - The button end slot.\n * @slot toggle - The button toggle slot.\n * @csspart native - The component's native wrapper.\n * @cssproperty [--wje-button-background-color=transparent] - Background color of the component;\n * @cssproperty [--wje-button-border-color=--wje-color-contrast-4] - Border color of the component;\n * @cssproperty [--wje-button-color=--wje-color-contrast-11] - Color of the component;\n * @cssproperty [--wje-button-border-radius=--wje-border-radius-medium] - Border radius of the component;\n * @cssproperty [--wje-button-border-width=1px] - Border width of the component;\n * @cssproperty [--wje-button-border-style=solid] - Border style of the component;\n * @cssproperty [--wje-button-border-color=--wje-color-contrast-1] - Border color of the component;\n * @cssproperty [--wje-button-margin-inline=0] - Margin inline of the component;\n */\n\nexport default class Button extends WJElement {\n    /**\n     * Button constructor method.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this.internals_ = this.attachInternals();\n    }\n\n    /**\n     * Dependencies of the Button element.\n     * @type {object}\n     */\n    dependencies = {\n        'wje-icon': Icon,\n    };\n\n    /**\n     * Properties of the element Button.\n     * @param value\n     */\n    set color(value) {\n        this.setAttribute('color', value || 'default');\n    }\n\n    /**\n     * Get color of the Button element.\n     * @returns {string|string}\n     */\n    get color() {\n        return this.getAttribute('color') || 'default';\n    }\n\n    /**\n     * Set variant of the Button element.\n     * @param value\n     */\n    set caret(value) {\n        this.setAttribute('caret', value);\n    }\n\n    /**\n     * Get variant of the Button element.\n     * @returns {boolean}\n     */\n    get caret() {\n        return this.hasAttribute('caret');\n    }\n\n    /**\n     * Sets the 'round' attribute on the element. If the value is true, the attribute is added;\n     * otherwise, it is removed from the element.\n     * @param {boolean} value A boolean indicating whether to set or remove the 'round' attribute.\n     */\n    set round(value) {\n        if (value) {\n            this.setAttribute('round', '');\n        } else {\n            this.removeAttribute('round');\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'round' attribute as a boolean.\n     * Checks if the 'round' attribute is present on the element.\n     * @returns {boolean} True if the 'round' attribute exists, otherwise false.\n     */\n    get round() {\n        return this.hasAttribute('round');\n    }\n\n    /**\n     * Set variant of the Button element.\n     * @param value\n     */\n    set tooltip(value) {\n        this.setAttribute('tooltip', value);\n    }\n\n    /**\n     * Get variant of the Button element.\n     * @returns {boolean}\n     */\n    get tooltip() {\n        return this.hasAttribute('tooltip');\n    }\n\n    /**\n     * Set variant of the Button element.\n     * @param value\n     */\n    set dialog(value) {\n        this.setAttribute('dialog', value);\n    }\n\n    /**\n     * Get variant of the Button element.\n     * @returns {string|object}\n     */\n    get dialog() {\n        return this.getAttribute('dialog');\n    }\n\n    /**\n     * Set active state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set active(value) {\n        this.setAttribute('active', '');\n    }\n\n    /**\n     * Get active state of the Button element.\n     * @returns {boolean} active - The active state\n     */\n    get active() {\n        return this.hasAttribute('active');\n    }\n\n    /**\n     * Set disabled state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set disabled(value) {\n        this.removeAttribute('disabled');\n\n        if (value) {\n            this.setAttribute('disabled', '');\n        }\n    }\n\n    /**\n     * Get disabled state of the Button element.\n     * @returns {boolean} disabled - The disabled state\n     */\n    get disabled() {\n        return this.hasAttribute('disabled');\n    }\n\n    /**\n     * Set fill of the Button element.\n     * @param {string} value The value to set\n     */\n    set fill(value) {\n        this.setAttribute('fill', value);\n    }\n\n    /**\n     * Get fill of the Button element.\n     * @returns {string} fill - The fill value\n     */\n    get fill() {\n        return this.getAttribute('fill') || 'solid';\n    }\n\n    /**\n     * Set outline state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set outline(value) {\n        this.setAttribute('outline', '');\n    }\n\n    /**\n     * Get outline state of the Button element.\n     * @returns {boolean} outline - The outline state\n     */\n    get outline() {\n        return this.hasAttribute('outline');\n    }\n\n    /**\n     * Set stop propagation state of the Button element.\n     * @param {boolean} value The value to set\n     */\n    set stopPropagation(value) {\n        this.setAttribute('stop-propagation', bool(value));\n    }\n\n    /**\n     * Get stop propagation state of the Button element.\n     * @returns {boolean} stopPropagation - The stop propagation state\n     */\n    get stopPropagation() {\n        return bool(this.getAttribute('stop-propagation'));\n    }\n\n    /**\n     * Sets the value of the custom event attribute.\n     * @param {string} value The value to be assigned to the custom event attribute.\n     */\n    set customEvent(value) {\n        this.setAttribute('custom-event', value);\n    }\n\n    /**\n     * Retrieves the value of the 'custom-event' attribute from the element.\n     * @returns {string | null} The value of the 'custom-event' attribute, or null if the attribute is not set.\n     */\n    get customEvent() {\n        return this.getAttribute('custom-event');\n    }\n\n    /**\n     * Retrieves a mapped object containing custom event parameters extracted from the element's attributes.\n     * Attributes considered are those that begin with 'custom-event-'.\n     * The mapped object's keys are derived by removing the 'custom-event-' prefix from the attribute names,\n     * and the values are the corresponding attribute values.\n     * @returns {object} An object containing key-value pairs of custom event parameters.\n     */\n    get customEventParameters() {\n        const attributes = Array.from(this.attributes).filter((attr) => attr.name.startsWith('custom-event-'));\n\n        return attributes.reduce((acc, attr) => {\n            const key = attr.name.replace('custom-event-', '');\n            acc[key] = attr.value;\n\n            return acc;\n        }, {});\n    }\n\n    /**\n     * Class name for the Button element\n     * @type {string}\n     */\n    className = 'Button';\n\n    /**\n     * Get CSS stylesheet for the Button element.\n     * @static\n     * @returns {CSSStyleSheet} styles - The CSS stylesheet for the Button element.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Get observed attributes for the Button element.\n     * @static\n     * @returns {Array<string>} observedAttributes - The observed attributes array for the Button element.\n     */\n    static get observedAttributes() {\n        return ['disabled', 'color'];\n    }\n\n    /**\n     * @summary A static property that indicates whether the custom element is form-associated or not.\n     * Form-associated custom elements are elements that can participate in form submission.\n     * @type {boolean}\n     */\n    static formAssociated = true;\n\n    /**\n     * @summary Callback function that is called when the custom element is associated with a form.\n     * This function sets the internal `_form` property to the associated form.\n     * @param {HTMLFormElement} form The form the custom element is associated with.\n     */\n    formAssociatedCallback(form) {\n        this._form = form;\n    }\n\n    /**\n     * @summary Callback function that is called when the form-associated state of the custom element changes.\n     * This function updates the 'disabled' attribute of the element based on the new state.\n     * @param {boolean} disabled The new form-associated state.\n     */\n    formDisabledCallback(disabled) {\n        if (disabled) {\n            this.setAttribute('disabled', '');\n        } else {\n            this.removeAttribute('disabled');\n        }\n    }\n\n    /**\n     * Setup attributes for the Button element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draw method for the Button element.\n     * @returns {object} fragment - The document fragment containing the drawn element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement(this.hasAttribute('href') ? 'a' : 'button');\n        if (this.hasAttribute('href')) {\n            native.setAttribute('href', this.getAttribute('href'));\n        } else {\n            if (this.type === 'submit') {\n                native.setAttribute('type', 'submit');\n            }\n        }\n\n        native.classList.add('native-button');\n        native.setAttribute('part', 'native');\n\n        this.classList.remove('wje-button-disabled');\n\n        if (this.disabled) native.classList.add('wje-button-disabled');\n\n        if (this.variant) native.classList.add('wje-button-' + this.variant);\n\n        if (this.hasAttribute('round')) native.classList.add('wje-button-round');\n\n        if (this.hasAttribute('circle')) native.classList.add('wje-button-circle');\n\n        if (this.outline) native.classList.add('wje-outline');\n\n        if (this.fill) native.classList.add('wje-button-' + this.fill);\n\n        if (this.size) native.classList.add('wje-button-' + this.size);\n\n        if (\n            (this.querySelectorAll('[slot=caret]').length < 1 && this.hasAttribute('caret')) ||\n            this.hasAttribute('only-caret')\n        ) {\n            let i = document.createElement('wje-icon');\n            i.style.setProperty('--wje-icon-size', '14px');\n            i.setAttribute('slot', 'caret');\n            i.setAttribute('name', 'chevron-down');\n            i.setAttribute('part', 'caret');\n\n            this.appendChild(i);\n        }\n\n        if (this.active) {\n            this.classList.add('wje-active');\n            let i = document.createElement('wje-icon');\n            i.setAttribute('name', 'check');\n\n            this.appendChild(i);\n        }\n\n        native.classList.add('wje-color-' + this.color, 'wje-color');\n\n        let span = document.createElement('span');\n        span.setAttribute('part', 'inner');\n        span.classList.add('button-inner');\n\n        let slot = document.createElement('slot');\n        slot.setAttribute('name', 'icon-only');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        slot.setAttribute('name', 'start');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        slot.setAttribute('name', 'end');\n        span.appendChild(slot);\n\n        slot = document.createElement('slot');\n        slot.setAttribute('name', 'caret');\n        span.appendChild(slot);\n\n        this.hasToggle = WjElementUtils.hasSlot(this, 'toggle');\n\n        if (this.hasToggle) {\n            this.slotToggle = document.createElement('slot');\n            this.slotToggle.setAttribute('name', 'toggle');\n\n            span.appendChild(this.slotToggle);\n        }\n\n        native.appendChild(span);\n\n        if (this.tooltip) {\n            let tooltip = document.createElement('wje-tooltip');\n            tooltip.setAttribute('content', this.getAttribute('tooltip'));\n            tooltip.setAttribute('placement', this.getAttribute('tooltip-placement') || 'top');\n            tooltip.appendChild(native);\n\n            fragment.appendChild(tooltip);\n        } else {\n            fragment.appendChild(native);\n        }\n\n        return fragment;\n    }\n\n    /**\n     * After draw method for the Button element.\n     */\n    afterDraw() {\n        if (this.hasAttribute('route')) {\n            this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });\n        }\n\n        // nastavenie toggle podla atributu, ak nie je nastaveny, tak sa zobrazi vzdy prvy element\n        if (this.hasToggle) {\n            if (this.toggle === 'off') {\n                this.slotToggle.assignedNodes()[1].classList.add('show');\n                this.setAttribute('value', 'off');\n            } else {\n                this.slotToggle.assignedNodes()[0].classList.add('show');\n                this.setAttribute('value', 'on');\n            }\n        }\n\n        if (this.hasAttribute('custom-event')) {\n            event.addListener(this, 'click', null, this.#populateCustomEvent);\n        }\n\n        if (this.hasAttribute('dialog')) {\n            event.addListener(this, 'click', null, this.eventDialogOpen);\n        } else {\n            event.addListener(this, 'click', 'wje-button:click', null); // { stopPropagation: this.stopPropagation } - zrusene kvoli dropdown kde som nevedel odchytit event click\n        }\n\n        if (this.hasToggle)\n            event.addListener(this, 'click', 'wje-button:toggle', this.toggleStates, {\n                stopPropagation: this.stopPropagation,\n            });\n\n        if (this.type === 'submit') {\n            event.addListener(this, 'click', 'wje-button:submit', () => {\n                console.log('submit', this.internals_.form);\n                event.dispatchCustomEvent(this.internals_.form, 'submit', {});\n            });\n        }\n\n        if (this.type === 'reset') {\n            event.addListener(this, 'click', 'wje-button:reset', () => {\n                this.internals_.form.reset();\n            });\n        }\n    }\n\n    /**\n     * Before disconnect method for the Button element.\n     */\n    beforeDisconnect() {\n        // remove all events from the button\n        event.removeListener(this, 'click', null, this.eventDialogOpen);\n        event.removeListener(this, 'click', 'wje-button:click', null);\n        event.removeListener(this, 'click', 'wje-button:toggle', this.toggleStates);\n        event.removeListener(this, 'click', null, this.#populateCustomEvent);\n        event.removeListener(this, 'click', 'wje-button:submit', null);\n        event.removeListener(this, 'click', 'wje-button:reset', null);\n\n        this.removeEventListener('click', this.eventDialogOpen);\n        this.unbindRouterLinks?.();\n    }\n\n    /**\n     * Event dialog open method for the Button element.\n     * @param {Event} e The event object\n     */\n    eventDialogOpen = (e) => {\n        event.dispatchCustomEvent(this, this.dialog);\n    };\n\n    /**\n     * Toggle states method for the Button element.\n     */\n    toggleStates = () => {\n        const nodes = this.slotToggle.assignedNodes().filter((node) => node.nodeType === Node.ELEMENT_NODE);\n\n        nodes.forEach((node, index) => {\n            if (node.classList.contains('show')) {\n                node.classList.remove('show');\n            } else {\n                node.classList.add('show');\n                this.setAttribute('value', index === 0 ? 'on' : 'off');\n            }\n        });\n    }\n\n    /**\n     * Dispatches a custom event with specified parameters.\n     * This method uses the `customEvent` and `customEventParameters` properties\n     * to create and dispatch a `CustomEvent`. The event is configured to be\n     * composed and bubbles up through the DOM.\n     * @returns {void} This method does not return a value.\n     */\n    #populateCustomEvent() {\n        this.dispatchEvent(\n          new CustomEvent(this.customEvent, { detail: this.customEventParameters, composed: true, bubbles: true })\n        );\n    }\n}\n","import Button from './button.element.js';\n\nexport default Button;\n\nButton.define('wje-button', Button);\n"],"names":[],"mappings":"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"}

package/dist/wje-icon-picker.js

@@ -3,12 +3,11 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
 import { getBasePath } from "./base-path.js";
-import "./wje-infinite-scroll.js";
+import InfiniteScroll from "./wje-infinite-scroll.js";
 import Input from "./wje-input.js";
 import "./wje-popup.js";
 import Tooltip from "./wje-tooltip.js";
 import { P as Popup } from "./popup.element-Di4nHYij.js";
-import { I as InfiniteScroll } from "./infinite-scroll.element-La0Qx41F.js";
 import { event } from "./event.js";
 const styles = "/*\n[ Wj Icon Picker ]\n*/\n\n:host {\n    padding: 0 1rem;\n}\n\n.anchor {\n    width: var(--wje-icon-picker-icon-size);\n    height: var(--wje-icon-picker-icon-size);\n    padding: var(--wje-icon-picker-padding);\n    border-width: var(--wje-icon-picker-border-width);\n    border-style: var(--wje-icon-picker-border-style);\n    border-color: var(--wje-icon-picker-border-color);\n    box-sizing: border-box;\n    border-radius: var(--wje-icon-picker-radius);\n}\n\n.picker {\n    width: 320px;\n    height: 271px;\n    box-shadow:\n        0 0 5px rgba(0, 0, 0, 0.05),\n        0 5px 20px rgba(0, 0, 0, 0.1);\n    border-radius: var(--wje-icon-picker-radius);\n    border-width: var(--wje-icon-picker-border-width);\n    border-style: var(--wje-icon-picker-border-style);\n    border-color: var(--wje-icon-picker-border-color);\n    overflow: auto;\n    padding: 1rem;\n    background: var(--wje-background);\n}\n\n.icon-items {\n    --icon-min-width: 2rem;\n    display: grid;\n    grid-gap: 0.5rem;\n    grid-template-columns: repeat(auto-fit, minmax(var(--icon-min-width), 1fr));\n}\n\n.icon-item {\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    color: inherit;\n    padding: 0.25rem;\n    min-height: var(--wje-icon-picker-icon-size);\n    min-width: var(--wje-icon-picker-icon-size);\n    text-decoration: none;\n\n    &:hover {\n        border-radius: 0.25rem;\n        background: var(--wje-border-color);\n    }\n}\n\n.wje-size {\n    --wje-icon-size: 24px !important;\n}\n\nicon-item svg {\n    width: var(--wje-icon-picker-icon-size);\n    height: var(--wje-icon-picker-icon-size);\n}\n\nwje-input {\n    --wje-input-border-radius: 4px;\n    --wje-input-margin-bottom: 0;\n}\n\nwje-infinite-scroll {\n    margin-top: 1rem;\n}\n\nwje-select {\n    --wje-select-border-width: 0 0 1px 0 !important;\n    --wje-select-border-radius: 0 !important;\n    margin-bottom: 1rem;\n}\n\n.anchor wje-icon {\n    --wje-icon-size: 100% !important;\n}\n";
 class IconPicker extends WJElement {

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

@@ -1 +1 @@
-{"version":3,"file":"wje-icon-picker.js","sources":["../packages/wje-icon-picker/icon-picker.element.js","../packages/wje-icon-picker/icon-picker.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport { getBasePath } from \"../utils/base-path.js\";\nimport InfiniteScroll from '../wje-infinite-scroll/infinite-scroll.js';\nimport Input from '../wje-input/input.js';\nimport Popup from '../wje-popup/popup.js';\nimport Tooltip from '../wje-tooltip/tooltip.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element allows users to pick an icon from a set of available options.\n * `IconPicker` is a custom web component that represents an interactive icon picker. It features\n * search functionality, infinite scrolling, and popup-based selection. The component is highly customizable\n * and integrates seamlessly with other `WJElement` components.\n * @documentation https://elements.webjet.sk/components/icon-picker\n * @status stable\n * @augments {WJElement}\n * @attribute {string} icon - The selected icon's name.\n * @attribute {number} size - The number of icons displayed per page in infinite scroll. Default is 60.\n * @csspart native - The native part of the component.\n * @csspart anchor - The part representing the anchor button displaying the selected icon.\n * @csspart picker - The picker part containing the search and icon selection interface.\n * @csspart input - The input part for searching icons.\n * @cssproperty [--wje-color-picker-value=#ff0000] - The default color value.\n * @cssproperty [--wje-color-picker-area=transparent] - The background color of the color picker area.\n * @cssproperty [--wje-color-picker-swatch=transparent] - The background color of the swatch picker.\n * @cssproperty [--wje-color-picker-size=1rem] - The size of the icons in the picker.\n * @cssproperty [--wje-color-picker-radius=4px] - The border radius of the picker.\n * @tag wje-icon-picker\n */\n\nexport default class IconPicker extends WJElement {\n    /**\n     * Creates an instance of IconPicker.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Dependencies of the IconPicker component.\n     * @property {object} dependencies\n     */\n    dependencies = {\n        'wje-input': Input,\n        'wje-infinite-scroll': InfiniteScroll,\n        'wje-tooltip': Tooltip,\n        'wje-popup': Popup,\n    };\n\n    /**\n     * Setter for the markerPosition property.\n     * @param {any} value The value to set.\n     */\n    set size(value) {\n        this.setAttribute('size', value);\n    }\n\n    /**\n     * Getter for the markerPosition property.\n     * @returns {any} size The value of the markerPosition property.\n     */\n    get size() {\n        return this.getAttribute('size') || 60;\n    }\n\n    /**\n     * Setter for the value property.\n     * @param value\n     */\n    set icon(value) {\n        this.setAttribute('icon', value);\n    }\n\n    /**\n     * Getter for the value property.\n     * @returns {string}\n     */\n    get icon() {\n        return this.getAttribute('icon');\n    }\n\n    className = 'IconPicker';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Prepares the component before drawing.\n     */\n    async beforeDraw() {\n        this.tags = Object.values(await this.getTags());\n\n        this.transformedObjects = this.convertObject(this.tags);\n\n        this.index = this.transformedObjects.map((item) => ({\n            ...item,\n            searchText: `${item.name.toLowerCase()} ${item.tags.join(' ').toLowerCase()}`,\n        }));\n    }\n\n    /**\n     * Draws the component.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-color-picker');\n\n        // ANCHOR\n        let anchor = document.createElement('div');\n        anchor.setAttribute('slot', 'anchor');\n        anchor.classList.add('anchor');\n\n        if (this.hasAttribute('icon') && this.icon) {\n            let icon = document.createElement('wje-icon');\n            icon.setAttribute('name', this.icon);\n\n            anchor.appendChild(icon);\n        }\n\n        // PICKER\n        let picker = document.createElement('div');\n        picker.classList.add('picker');\n\n        let input = document.createElement('wje-input');\n        input.classList.add('input');\n        input.setAttribute('variant', 'standard');\n        input.setAttribute('placeholder', 'type to filter...');\n        input.setAttribute('clearable', '');\n        input.addEventListener('wje-input:input', this.searchIcon);\n\n        let infiniteScroll = new InfiniteScroll();\n        infiniteScroll.setAttribute('url', getBasePath('assets/tags.json'));\n        infiniteScroll.setAttribute('placement', '.icon-items');\n        infiniteScroll.setAttribute('size', this.size);\n        infiniteScroll.setAttribute('height', '223px');\n        infiniteScroll.innerHTML = '<div class=\"icon-items\"></div>';\n\n        // APPEND\n        picker.appendChild(input);\n\n        picker.appendChild(infiniteScroll);\n\n        // POPUP\n        let popup = document.createElement('wje-popup');\n        popup.setAttribute('placement', this.placement || 'bottom-start');\n        popup.setAttribute('offset', this.offset);\n        popup.setAttribute('manual', '');\n\n        popup.appendChild(anchor);\n        popup.appendChild(picker);\n\n        native.appendChild(popup);\n\n        fragment.appendChild(native);\n\n        this.popup = popup;\n        this.input = input;\n        this.anchor = anchor;\n        this.picker = picker;\n        this.infiniteScroll = infiniteScroll;\n\n        this.infiniteScroll.dataToHtml = this.dataToHtml;\n        this.infiniteScroll.compareFunction = (i, item) => i.name === item.name;\n        this.infiniteScroll.setCustomData = (page = 0) => {\n            return {\n                data: this.transformedObjects.slice(page * this.size, page * this.size + this.size),\n                page: page,\n                size: this.size,\n                totalPages: Math.round(this.transformedObjects.length / this.size),\n            };\n        };\n\n        return fragment;\n    }\n\n    /**\n     * Called after the component has been drawn.\n     */\n    afterDraw() {\n        this.addEventListener('wje-popup:show', () => {\n            this.initial();\n        });\n\n        // udalost po vymazani inputu\n        this.addEventListener('wje-input:clear', () => {\n            this.clearIconsContainer(); // clear icons container\n            this.infiniteScroll.scrollEvent(); // bind scroll event\n            this.infiniteScroll.loadPages(0); // load first page\n        });\n\n        this.addEventListener('wje-infinite-scroll:click-item', (e) => {\n            let icon = e.detail.context.querySelector('wje-icon');\n            let name = icon.getAttribute('name');\n            let stylesType = icon.hasAttribute('filled') ? 'filled' : 'outline';\n            let uniqueObject = this.transformedObjects.find(\n                (i) => i.name === name && Object.keys(i.styles)[0] === stylesType\n            );\n\n            const iconElement = document.createElement('wje-icon');\n            iconElement.setAttribute('name', name);\n            if (uniqueObject.styles.hasOwnProperty('filled')) iconElement.setAttribute('filled', '');\n\n            uniqueObject.icon = iconElement;\n\n            this.value = uniqueObject;\n            this.icon = uniqueObject.name;\n\n            this.anchor.innerHTML = '';\n            this.anchor.appendChild(iconElement);\n\n            event.dispatchCustomEvent(this, 'wje-icon-picker:select', uniqueObject); // odpalenie custom eventu\n        });\n\n        this.init = false;\n    }\n\n    /**\n     * Initializes the component.\n     */\n    initial() {\n        this.infiniteScroll.scrollEvent();\n    }\n\n    /**\n     * Converts an object of tags into a transformed array of objects, separating `filled` and `outline` styles.\n     * The function processes an input object containing tags, extracts its values,\n     * and for each tag that has both `filled` and `outline` styles, splits them into\n     * two separate objects. Tags without `filled` styles remain unchanged.\n     * @param {object} tags The input object containing tags as properties. Each property is an object with a `styles` key.\n     * @param {object} tags[].styles The styles object containing `filled` and/or `outline` styles.\n     * @param {object} [tags[].styles.outline] The outline style object, if present.\n     * @param {object} [tags[].styles.filled] The filled style object, if present.\n     * @returns {Array<object>} An array of transformed objects. Objects with both `filled` and `outline` styles are split into separate objects, each containing only one style.\n     * @example\n     * const tags = {\n     *     hourglass: {\n     *         styles: {\n     *             outline: { ... },\n     *             filled: { ... },\n     *         }\n     *     },\n     *     clock: {\n     *         styles: {\n     *             outline: { ... },\n     *         }\n     *     }\n     * };\n     * const result = convertObject(tags);\n     * console.log(result);\n     * // [\n     * //   { styles: { outline: { ... } } },\n     * //   { styles: { filled: { ... } } },\n     * //   { styles: { outline: { ... } } }\n     * // ]\n     */\n    convertObject = (tags = {}) => {\n        let originalObjects = Object.values(tags);\n        let transformedObjects = [];\n        for (let i = 0; i < originalObjects.length; i++) {\n            const obj = originalObjects[i];\n            if (obj.styles.filled) {\n                transformedObjects.push(\n                    { ...obj, styles: { outline: obj.styles.outline } },\n                    { ...obj, styles: { filled: obj.styles.filled } }\n                );\n            } else {\n                transformedObjects.push(obj);\n            }\n        }\n\n        return transformedObjects;\n    };\n\n    /**\n     * Converts an icon data object into an HTML element structure.\n     * This function creates a styled HTML element that represents an icon with a tooltip.\n     * The tooltip displays the name of the icon, and the icon itself is styled based on\n     * whether it uses the `filled` style.\n     * @param {object} data The icon data object.\n     * @returns {HTMLElement} A `div` element containing the icon wrapped in a `wje-tooltip`. The tooltip displays the icon name, and the `wje-icon` element represents the icon with attributes set according to the data.\n     * @example\n     * const iconData = {\n     *     name: \"hourglass\",\n     *     styles: {\n     *         filled: { ... }\n     *     }\n     * };\n     * const htmlElement = dataToHtml(iconData);\n     * document.body.appendChild(htmlElement);\n     *\n     * // The resulting structure:\n     * // <div class=\"icon-item\">\n     * //   <wje-tooltip content=\"hourglass\">\n     * //     <wje-icon name=\"hourglass\" size=\"large\" filled></wje-icon>\n     * //   </wje-tooltip>\n     * // </div>\n     */\n    dataToHtml = (data) => {\n        let iconItem = document.createElement('div');\n        iconItem.classList.add('icon-item');\n\n        let tooltip = document.createElement('wje-tooltip');\n        tooltip.setAttribute('content', data.name);\n\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', data.name);\n        icon.setAttribute('size', 'large');\n        if (data.styles.hasOwnProperty('filled')) icon.setAttribute('filled', '');\n\n        tooltip.appendChild(icon);\n        iconItem.appendChild(tooltip);\n\n        return iconItem;\n    };\n\n    /**\n     * Gets the category of the tags.\n     * @param {Array} tags The tags to get the category of.\n     * @returns {Array} The category of the tags.\n     */\n    getCategory(tags) {\n        return [...new Set(tags.map((obj) => obj.category))];\n    }\n\n    /**\n     * Gets the tags.\n     * @returns {Promise<Array>} The tags of the component.\n     */\n    async getTags() {\n        const response = await fetch(getBasePath('assets/tags.json'));\n        return response.json();\n    }\n\n    /**\n     * Called when the component is disconnected.\n     */\n    beforeDisconnect() {\n        this.init = false;\n    }\n\n    /**\n     * Searches icons based on user input.\n     * This method handles the input event and filters the available icons based on the provided search string.\n     * The filtering is performed on an index that combines icon names and their tags.\n     * The results are then adjusted for infinite scrolling.\n     * @param {Event} e The input event (e.g., `wje-input:input`) containing the search query details.\n     */\n    searchIcon = (e) => {\n        const query = e.detail.value.toLowerCase();\n\n        const results = this.index.filter((item) => item.searchText.includes(query));\n\n        this.infiniteScroll.unScrollEvent();\n        this.infiniteScroll.setCustomData = (page = 0) => {\n            const data = results.slice(page * this.size, page * this.size + this.size);\n            return {\n                data: data,\n                page: page,\n                size: this.size,\n                totalPages: Math.ceil(results.length / this.size),\n            };\n        };\n\n        this.clearIconsContainer();\n        this.infiniteScroll.loadPages(0);\n    }\n\n    /**\n     * Clears the icons container.\n     */\n    clearIconsContainer() {\n        this.context.querySelector('.icon-items').innerHTML = '';\n    }\n\n    /**\n     * Closes the component.\n     */\n    onClose = () => {\n        this.popup.handleHide();\n    }\n}\n","import IconPicker from './icon-picker.element.js';\n\nexport default IconPicker;\n\nIconPicker.define('wje-icon-picker', IconPicker);\n"],"names":[],"mappings":";;;;;;;;;;;;;AA8Be,MAAM,mBAAmB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK9C,cAAc;AACV,UAAO;AAOX;AAAA;AAAA;AAAA;AAAA,wCAAe;AAAA,MACX,aAAa;AAAA,MACb,uBAAuB;AAAA,MACvB,eAAe;AAAA,MACf,aAAa;AAAA,IAChB;AAkCD,qCAAY;AAuMZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yCAAgB,CAAC,OAAO,OAAO;AAC3B,UAAI,kBAAkB,OAAO,OAAO,IAAI;AACxC,UAAI,qBAAqB,CAAE;AAC3B,eAAS,IAAI,GAAG,IAAI,gBAAgB,QAAQ,KAAK;AAC7C,cAAM,MAAM,gBAAgB,CAAC;AAC7B,YAAI,IAAI,OAAO,QAAQ;AACnB,6BAAmB;AAAA,YACf,EAAE,GAAG,KAAK,QAAQ,EAAE,SAAS,IAAI,OAAO,UAAW;AAAA,YACnD,EAAE,GAAG,KAAK,QAAQ,EAAE,QAAQ,IAAI,OAAO,OAAQ,EAAA;AAAA,UAClD;AAAA,QACjB,OAAmB;AACH,6BAAmB,KAAK,GAAG;AAAA,QAC3C;AAAA,MACA;AAEQ,aAAO;AAAA,IACV;AA0BD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAAa,CAAC,SAAS;AACnB,UAAI,WAAW,SAAS,cAAc,KAAK;AAC3C,eAAS,UAAU,IAAI,WAAW;AAElC,UAAI,UAAU,SAAS,cAAc,aAAa;AAClD,cAAQ,aAAa,WAAW,KAAK,IAAI;AAEzC,UAAI,OAAO,SAAS,cAAc,UAAU;AAC5C,WAAK,aAAa,QAAQ,KAAK,IAAI;AACnC,WAAK,aAAa,QAAQ,OAAO;AACjC,UAAI,KAAK,OAAO,eAAe,QAAQ,EAAG,MAAK,aAAa,UAAU,EAAE;AAExE,cAAQ,YAAY,IAAI;AACxB,eAAS,YAAY,OAAO;AAE5B,aAAO;AAAA,IACV;AAkCD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAAa,CAAC,MAAM;AAChB,YAAM,QAAQ,EAAE,OAAO,MAAM,YAAa;AAE1C,YAAM,UAAU,KAAK,MAAM,OAAO,CAAC,SAAS,KAAK,WAAW,SAAS,KAAK,CAAC;AAE3E,WAAK,eAAe,cAAe;AACnC,WAAK,eAAe,gBAAgB,CAAC,OAAO,MAAM;AAC9C,cAAM,OAAO,QAAQ,MAAM,OAAO,KAAK,MAAM,OAAO,KAAK,OAAO,KAAK,IAAI;AACzE,eAAO;AAAA,UACH;AAAA,UACA;AAAA,UACA,MAAM,KAAK;AAAA,UACX,YAAY,KAAK,KAAK,QAAQ,SAAS,KAAK,IAAI;AAAA,QACnD;AAAA,MACJ;AAED,WAAK,oBAAqB;AAC1B,WAAK,eAAe,UAAU,CAAC;AAAA,IACvC;AAYI;AAAA;AAAA;AAAA,mCAAU,MAAM;AACZ,WAAK,MAAM,WAAY;AAAA,IAC/B;AAAA,EAhXA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBI,IAAI,KAAK,OAAO;AACZ,SAAK,aAAa,QAAQ,KAAK;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,OAAO;AACP,WAAO,KAAK,aAAa,MAAM,KAAK;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,KAAK,OAAO;AACZ,SAAK,aAAa,QAAQ,KAAK;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,OAAO;AACP,WAAO,KAAK,aAAa,MAAM;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA;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,EAKI,MAAM,aAAa;AACf,SAAK,OAAO,OAAO,OAAO,MAAM,KAAK,SAAS;AAE9C,SAAK,qBAAqB,KAAK,cAAc,KAAK,IAAI;AAEtD,SAAK,QAAQ,KAAK,mBAAmB,IAAI,CAAC,UAAU;AAAA,MAChD,GAAG;AAAA,MACH,YAAY,GAAG,KAAK,KAAK,YAAW,CAAE,IAAI,KAAK,KAAK,KAAK,GAAG,EAAE,YAAa,CAAA;AAAA,IACvF,EAAU;AAAA,EACV;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,qBAAqB;AAG1C,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,QAAQ;AAE7B,QAAI,KAAK,aAAa,MAAM,KAAK,KAAK,MAAM;AACxC,UAAI,OAAO,SAAS,cAAc,UAAU;AAC5C,WAAK,aAAa,QAAQ,KAAK,IAAI;AAEnC,aAAO,YAAY,IAAI;AAAA,IACnC;AAGQ,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,QAAQ;AAE7B,QAAI,QAAQ,SAAS,cAAc,WAAW;AAC9C,UAAM,UAAU,IAAI,OAAO;AAC3B,UAAM,aAAa,WAAW,UAAU;AACxC,UAAM,aAAa,eAAe,mBAAmB;AACrD,UAAM,aAAa,aAAa,EAAE;AAClC,UAAM,iBAAiB,mBAAmB,KAAK,UAAU;AAEzD,QAAI,iBAAiB,IAAI,eAAgB;AACzC,mBAAe,aAAa,OAAO,YAAY,kBAAkB,CAAC;AAClE,mBAAe,aAAa,aAAa,aAAa;AACtD,mBAAe,aAAa,QAAQ,KAAK,IAAI;AAC7C,mBAAe,aAAa,UAAU,OAAO;AAC7C,mBAAe,YAAY;AAG3B,WAAO,YAAY,KAAK;AAExB,WAAO,YAAY,cAAc;AAGjC,QAAI,QAAQ,SAAS,cAAc,WAAW;AAC9C,UAAM,aAAa,aAAa,KAAK,aAAa,cAAc;AAChE,UAAM,aAAa,UAAU,KAAK,MAAM;AACxC,UAAM,aAAa,UAAU,EAAE;AAE/B,UAAM,YAAY,MAAM;AACxB,UAAM,YAAY,MAAM;AAExB,WAAO,YAAY,KAAK;AAExB,aAAS,YAAY,MAAM;AAE3B,SAAK,QAAQ;AACb,SAAK,QAAQ;AACb,SAAK,SAAS;AACd,SAAK,SAAS;AACd,SAAK,iBAAiB;AAEtB,SAAK,eAAe,aAAa,KAAK;AACtC,SAAK,eAAe,kBAAkB,CAAC,GAAG,SAAS,EAAE,SAAS,KAAK;AACnE,SAAK,eAAe,gBAAgB,CAAC,OAAO,MAAM;AAC9C,aAAO;AAAA,QACH,MAAM,KAAK,mBAAmB,MAAM,OAAO,KAAK,MAAM,OAAO,KAAK,OAAO,KAAK,IAAI;AAAA,QAClF;AAAA,QACA,MAAM,KAAK;AAAA,QACX,YAAY,KAAK,MAAM,KAAK,mBAAmB,SAAS,KAAK,IAAI;AAAA,MACpE;AAAA,IACJ;AAED,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,SAAK,iBAAiB,kBAAkB,MAAM;AAC1C,WAAK,QAAS;AAAA,IAC1B,CAAS;AAGD,SAAK,iBAAiB,mBAAmB,MAAM;AAC3C,WAAK,oBAAmB;AACxB,WAAK,eAAe;AACpB,WAAK,eAAe,UAAU,CAAC;AAAA,IAC3C,CAAS;AAED,SAAK,iBAAiB,kCAAkC,CAAC,MAAM;AAC3D,UAAI,OAAO,EAAE,OAAO,QAAQ,cAAc,UAAU;AACpD,UAAI,OAAO,KAAK,aAAa,MAAM;AACnC,UAAI,aAAa,KAAK,aAAa,QAAQ,IAAI,WAAW;AAC1D,UAAI,eAAe,KAAK,mBAAmB;AAAA,QACvC,CAAC,MAAM,EAAE,SAAS,QAAQ,OAAO,KAAK,EAAE,MAAM,EAAE,CAAC,MAAM;AAAA,MAC1D;AAED,YAAM,cAAc,SAAS,cAAc,UAAU;AACrD,kBAAY,aAAa,QAAQ,IAAI;AACrC,UAAI,aAAa,OAAO,eAAe,QAAQ,EAAG,aAAY,aAAa,UAAU,EAAE;AAEvF,mBAAa,OAAO;AAEpB,WAAK,QAAQ;AACb,WAAK,OAAO,aAAa;AAEzB,WAAK,OAAO,YAAY;AACxB,WAAK,OAAO,YAAY,WAAW;AAEnC,YAAM,oBAAoB,MAAM,0BAA0B,YAAY;AAAA,IAClF,CAAS;AAED,SAAK,OAAO;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA,EAKI,UAAU;AACN,SAAK,eAAe,YAAa;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAmGI,YAAY,MAAM;AACd,WAAO,CAAC,GAAG,IAAI,IAAI,KAAK,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC;AAAA,EAC3D;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,MAAM,UAAU;AACZ,UAAM,WAAW,MAAM,MAAM,YAAY,kBAAkB,CAAC;AAC5D,WAAO,SAAS,KAAM;AAAA,EAC9B;AAAA;AAAA;AAAA;AAAA,EAKI,mBAAmB;AACf,SAAK,OAAO;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA,EAgCI,sBAAsB;AAClB,SAAK,QAAQ,cAAc,aAAa,EAAE,YAAY;AAAA,EAC9D;AAQA;AClZA,WAAW,OAAO,mBAAmB,UAAU;"}
+{"version":3,"file":"wje-icon-picker.js","sources":["../packages/wje-icon-picker/icon-picker.element.js","../packages/wje-icon-picker/icon-picker.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport { getBasePath } from \"../utils/base-path.js\";\nimport InfiniteScroll from '../wje-infinite-scroll/infinite-scroll.js';\nimport Input from '../wje-input/input.js';\nimport Popup from '../wje-popup/popup.js';\nimport Tooltip from '../wje-tooltip/tooltip.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element allows users to pick an icon from a set of available options.\n * `IconPicker` is a custom web component that represents an interactive icon picker. It features\n * search functionality, infinite scrolling, and popup-based selection. The component is highly customizable\n * and integrates seamlessly with other `WJElement` components.\n * @documentation https://elements.webjet.sk/components/icon-picker\n * @status stable\n * @augments {WJElement}\n * @attribute {string} icon - The selected icon's name.\n * @attribute {number} size - The number of icons displayed per page in infinite scroll. Default is 60.\n * @csspart native - The native part of the component.\n * @csspart anchor - The part representing the anchor button displaying the selected icon.\n * @csspart picker - The picker part containing the search and icon selection interface.\n * @csspart input - The input part for searching icons.\n * @cssproperty [--wje-color-picker-value=#ff0000] - The default color value.\n * @cssproperty [--wje-color-picker-area=transparent] - The background color of the color picker area.\n * @cssproperty [--wje-color-picker-swatch=transparent] - The background color of the swatch picker.\n * @cssproperty [--wje-color-picker-size=1rem] - The size of the icons in the picker.\n * @cssproperty [--wje-color-picker-radius=4px] - The border radius of the picker.\n * @tag wje-icon-picker\n */\n\nexport default class IconPicker extends WJElement {\n    /**\n     * Creates an instance of IconPicker.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Dependencies of the IconPicker component.\n     * @property {object} dependencies\n     */\n    dependencies = {\n        'wje-input': Input,\n        'wje-infinite-scroll': InfiniteScroll,\n        'wje-tooltip': Tooltip,\n        'wje-popup': Popup,\n    };\n\n    /**\n     * Setter for the markerPosition property.\n     * @param {any} value The value to set.\n     */\n    set size(value) {\n        this.setAttribute('size', value);\n    }\n\n    /**\n     * Getter for the markerPosition property.\n     * @returns {any} size The value of the markerPosition property.\n     */\n    get size() {\n        return this.getAttribute('size') || 60;\n    }\n\n    /**\n     * Setter for the value property.\n     * @param value\n     */\n    set icon(value) {\n        this.setAttribute('icon', value);\n    }\n\n    /**\n     * Getter for the value property.\n     * @returns {string}\n     */\n    get icon() {\n        return this.getAttribute('icon');\n    }\n\n    className = 'IconPicker';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Prepares the component before drawing.\n     */\n    async beforeDraw() {\n        this.tags = Object.values(await this.getTags());\n\n        this.transformedObjects = this.convertObject(this.tags);\n\n        this.index = this.transformedObjects.map((item) => ({\n            ...item,\n            searchText: `${item.name.toLowerCase()} ${item.tags.join(' ').toLowerCase()}`,\n        }));\n    }\n\n    /**\n     * Draws the component.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-color-picker');\n\n        // ANCHOR\n        let anchor = document.createElement('div');\n        anchor.setAttribute('slot', 'anchor');\n        anchor.classList.add('anchor');\n\n        if (this.hasAttribute('icon') && this.icon) {\n            let icon = document.createElement('wje-icon');\n            icon.setAttribute('name', this.icon);\n\n            anchor.appendChild(icon);\n        }\n\n        // PICKER\n        let picker = document.createElement('div');\n        picker.classList.add('picker');\n\n        let input = document.createElement('wje-input');\n        input.classList.add('input');\n        input.setAttribute('variant', 'standard');\n        input.setAttribute('placeholder', 'type to filter...');\n        input.setAttribute('clearable', '');\n        input.addEventListener('wje-input:input', this.searchIcon);\n\n        let infiniteScroll = new InfiniteScroll();\n        infiniteScroll.setAttribute('url', getBasePath('assets/tags.json'));\n        infiniteScroll.setAttribute('placement', '.icon-items');\n        infiniteScroll.setAttribute('size', this.size);\n        infiniteScroll.setAttribute('height', '223px');\n        infiniteScroll.innerHTML = '<div class=\"icon-items\"></div>';\n\n        // APPEND\n        picker.appendChild(input);\n\n        picker.appendChild(infiniteScroll);\n\n        // POPUP\n        let popup = document.createElement('wje-popup');\n        popup.setAttribute('placement', this.placement || 'bottom-start');\n        popup.setAttribute('offset', this.offset);\n        popup.setAttribute('manual', '');\n\n        popup.appendChild(anchor);\n        popup.appendChild(picker);\n\n        native.appendChild(popup);\n\n        fragment.appendChild(native);\n\n        this.popup = popup;\n        this.input = input;\n        this.anchor = anchor;\n        this.picker = picker;\n        this.infiniteScroll = infiniteScroll;\n\n        this.infiniteScroll.dataToHtml = this.dataToHtml;\n        this.infiniteScroll.compareFunction = (i, item) => i.name === item.name;\n        this.infiniteScroll.setCustomData = (page = 0) => {\n            return {\n                data: this.transformedObjects.slice(page * this.size, page * this.size + this.size),\n                page: page,\n                size: this.size,\n                totalPages: Math.round(this.transformedObjects.length / this.size),\n            };\n        };\n\n        return fragment;\n    }\n\n    /**\n     * Called after the component has been drawn.\n     */\n    afterDraw() {\n        this.addEventListener('wje-popup:show', () => {\n            this.initial();\n        });\n\n        // udalost po vymazani inputu\n        this.addEventListener('wje-input:clear', () => {\n            this.clearIconsContainer(); // clear icons container\n            this.infiniteScroll.scrollEvent(); // bind scroll event\n            this.infiniteScroll.loadPages(0); // load first page\n        });\n\n        this.addEventListener('wje-infinite-scroll:click-item', (e) => {\n            let icon = e.detail.context.querySelector('wje-icon');\n            let name = icon.getAttribute('name');\n            let stylesType = icon.hasAttribute('filled') ? 'filled' : 'outline';\n            let uniqueObject = this.transformedObjects.find(\n                (i) => i.name === name && Object.keys(i.styles)[0] === stylesType\n            );\n\n            const iconElement = document.createElement('wje-icon');\n            iconElement.setAttribute('name', name);\n            if (uniqueObject.styles.hasOwnProperty('filled')) iconElement.setAttribute('filled', '');\n\n            uniqueObject.icon = iconElement;\n\n            this.value = uniqueObject;\n            this.icon = uniqueObject.name;\n\n            this.anchor.innerHTML = '';\n            this.anchor.appendChild(iconElement);\n\n            event.dispatchCustomEvent(this, 'wje-icon-picker:select', uniqueObject); // odpalenie custom eventu\n        });\n\n        this.init = false;\n    }\n\n    /**\n     * Initializes the component.\n     */\n    initial() {\n        this.infiniteScroll.scrollEvent();\n    }\n\n    /**\n     * Converts an object of tags into a transformed array of objects, separating `filled` and `outline` styles.\n     * The function processes an input object containing tags, extracts its values,\n     * and for each tag that has both `filled` and `outline` styles, splits them into\n     * two separate objects. Tags without `filled` styles remain unchanged.\n     * @param {object} tags The input object containing tags as properties. Each property is an object with a `styles` key.\n     * @param {object} tags[].styles The styles object containing `filled` and/or `outline` styles.\n     * @param {object} [tags[].styles.outline] The outline style object, if present.\n     * @param {object} [tags[].styles.filled] The filled style object, if present.\n     * @returns {Array<object>} An array of transformed objects. Objects with both `filled` and `outline` styles are split into separate objects, each containing only one style.\n     * @example\n     * const tags = {\n     *     hourglass: {\n     *         styles: {\n     *             outline: { ... },\n     *             filled: { ... },\n     *         }\n     *     },\n     *     clock: {\n     *         styles: {\n     *             outline: { ... },\n     *         }\n     *     }\n     * };\n     * const result = convertObject(tags);\n     * console.log(result);\n     * // [\n     * //   { styles: { outline: { ... } } },\n     * //   { styles: { filled: { ... } } },\n     * //   { styles: { outline: { ... } } }\n     * // ]\n     */\n    convertObject = (tags = {}) => {\n        let originalObjects = Object.values(tags);\n        let transformedObjects = [];\n        for (let i = 0; i < originalObjects.length; i++) {\n            const obj = originalObjects[i];\n            if (obj.styles.filled) {\n                transformedObjects.push(\n                    { ...obj, styles: { outline: obj.styles.outline } },\n                    { ...obj, styles: { filled: obj.styles.filled } }\n                );\n            } else {\n                transformedObjects.push(obj);\n            }\n        }\n\n        return transformedObjects;\n    };\n\n    /**\n     * Converts an icon data object into an HTML element structure.\n     * This function creates a styled HTML element that represents an icon with a tooltip.\n     * The tooltip displays the name of the icon, and the icon itself is styled based on\n     * whether it uses the `filled` style.\n     * @param {object} data The icon data object.\n     * @returns {HTMLElement} A `div` element containing the icon wrapped in a `wje-tooltip`. The tooltip displays the icon name, and the `wje-icon` element represents the icon with attributes set according to the data.\n     * @example\n     * const iconData = {\n     *     name: \"hourglass\",\n     *     styles: {\n     *         filled: { ... }\n     *     }\n     * };\n     * const htmlElement = dataToHtml(iconData);\n     * document.body.appendChild(htmlElement);\n     *\n     * // The resulting structure:\n     * // <div class=\"icon-item\">\n     * //   <wje-tooltip content=\"hourglass\">\n     * //     <wje-icon name=\"hourglass\" size=\"large\" filled></wje-icon>\n     * //   </wje-tooltip>\n     * // </div>\n     */\n    dataToHtml = (data) => {\n        let iconItem = document.createElement('div');\n        iconItem.classList.add('icon-item');\n\n        let tooltip = document.createElement('wje-tooltip');\n        tooltip.setAttribute('content', data.name);\n\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', data.name);\n        icon.setAttribute('size', 'large');\n        if (data.styles.hasOwnProperty('filled')) icon.setAttribute('filled', '');\n\n        tooltip.appendChild(icon);\n        iconItem.appendChild(tooltip);\n\n        return iconItem;\n    };\n\n    /**\n     * Gets the category of the tags.\n     * @param {Array} tags The tags to get the category of.\n     * @returns {Array} The category of the tags.\n     */\n    getCategory(tags) {\n        return [...new Set(tags.map((obj) => obj.category))];\n    }\n\n    /**\n     * Gets the tags.\n     * @returns {Promise<Array>} The tags of the component.\n     */\n    async getTags() {\n        const response = await fetch(getBasePath('assets/tags.json'));\n        return response.json();\n    }\n\n    /**\n     * Called when the component is disconnected.\n     */\n    beforeDisconnect() {\n        this.init = false;\n    }\n\n    /**\n     * Searches icons based on user input.\n     * This method handles the input event and filters the available icons based on the provided search string.\n     * The filtering is performed on an index that combines icon names and their tags.\n     * The results are then adjusted for infinite scrolling.\n     * @param {Event} e The input event (e.g., `wje-input:input`) containing the search query details.\n     */\n    searchIcon = (e) => {\n        const query = e.detail.value.toLowerCase();\n\n        const results = this.index.filter((item) => item.searchText.includes(query));\n\n        this.infiniteScroll.unScrollEvent();\n        this.infiniteScroll.setCustomData = (page = 0) => {\n            const data = results.slice(page * this.size, page * this.size + this.size);\n            return {\n                data: data,\n                page: page,\n                size: this.size,\n                totalPages: Math.ceil(results.length / this.size),\n            };\n        };\n\n        this.clearIconsContainer();\n        this.infiniteScroll.loadPages(0);\n    }\n\n    /**\n     * Clears the icons container.\n     */\n    clearIconsContainer() {\n        this.context.querySelector('.icon-items').innerHTML = '';\n    }\n\n    /**\n     * Closes the component.\n     */\n    onClose = () => {\n        this.popup.handleHide();\n    }\n}\n","import IconPicker from './icon-picker.element.js';\n\nexport default IconPicker;\n\nIconPicker.define('wje-icon-picker', IconPicker);\n"],"names":[],"mappings":"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"}

package/dist/wje-infinite-scroll.js

@@ -1,4 +1,383 @@
-import { I as InfiniteScroll } from "./infinite-scroll.element-La0Qx41F.js";
+var __defProp = Object.defineProperty;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var _drawnItems, _loadedItems, _response, _infiniteScrollTemplate, _abortController, _signal, _loading;
+import WJElement from "./wje-element.js";
+import { WjElementUtils } from "./element-utils.js";
+import { event } from "./event.js";
+const styles = "/*\n[ Wj infinite Scroll ]\n*/\n\n:host {\n    overflow-x: auto;\n    width: var(--wje-infinite-scroll-width);\n    height: var(--wje-infinite-scroll-height);\n    display: block;\n}\n\n.native {\n    /*position: relative;*/\n}\n\n.loading {\n    position: sticky;\n    display: none;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    z-index: 9999;\n    background-color: var(--wje-infinite-scroll-loading-bg);\n    &.show {\n        display: flex;\n    }\n}\n\n[name='ending'] {\n    display: none;\n    margin-top: 1rem;\n    text-align: center;\n}\n\n[name='ending'].show {\n    display: block;\n}\n";
+class InfiniteScroll extends WJElement {
+  /**
+   * Creates an instance of InfiniteScroll.
+   */
+  constructor() {
+    super();
+    __privateAdd(this, _drawnItems);
+    __privateAdd(this, _loadedItems);
+    __privateAdd(this, _response);
+    __privateAdd(this, _infiniteScrollTemplate);
+    __privateAdd(this, _abortController);
+    __privateAdd(this, _signal);
+    __privateAdd(this, _loading);
+    __publicField(this, "className", "InfiniteScroll");
+    /**
+     * Attaches a scroll event listener to the current object.
+     * The `scrollEvent` function binds the `onScroll` method to the 'scroll' event
+     * of the current object. This enables handling of scroll events for
+     * specific functionality such as updating UI elements, loading content dynamically,
+     * or tracking user interaction with scrollable content.
+     */
+    __publicField(this, "scrollEvent", () => {
+      this.addEventListener("scroll", this.onScroll);
+    });
+    /**
+     * A function that removes the scroll event listener from the current context.
+     * This function is used to unbind the `onScroll` event listener
+     * from the `scroll` event of the current object. It ensures that
+     * the scroll event no longer triggers the `onScroll` handler.
+     * @function
+     */
+    __publicField(this, "unScrollEvent", () => {
+      this.removeEventListener("scroll", this.onScroll);
+    });
+    /**
+     * A scroll event handler function that checks the scroll position and triggers loading additional content
+     * when the user scrolls near the bottom of the page.
+     * Properties accessed:
+     * - `scrollTop`: The number of pixels that the content of an element is scrolled vertically.
+     * - `scrollHeight`: The total height of the element's content.
+     * - `clientHeight`: The inner height of the element in pixels, including padding but excluding borders and scrollbars.
+     * Conditions:
+     * - Determines if the scroll position is within 300 pixels of the bottom of the element.
+     * - Verifies that the current page number is less than or equal to the total number of pages.
+     * - Checks if the current page is already in the loading state.
+     * Actions:
+     * - Increments the current page number when the conditions are met.
+     * - Initiates loading for the next page by calling the `loadPages` function.
+     * @param {Event} e The scroll event object.
+     */
+    __publicField(this, "onScroll", (e) => {
+      const { scrollTop, scrollHeight, clientHeight } = e.target;
+      if (scrollTop + clientHeight >= scrollHeight - 300 && this.currentPage <= this.totalPages && this.isLoading.includes(this.currentPage)) {
+        this.currentPage++;
+        __privateSet(this, _loading, this.loadPages(this.currentPage));
+      }
+    });
+    __publicField(this, "compareFunction", (i, item) => i.id === item.id);
+    /**
+     * Converts a data item into an HTML element based on a template.
+     * This function takes a data item, interpolates it into a predefined template,
+     * parses the resulting HTML string, and returns the first child element of the parsed HTML content.
+     * @param {object} item The data object to interpolate into the HTML template.
+     * @returns {Element} The first child element generated from the interpolated HTML string.
+     */
+    __publicField(this, "dataToHtml", (item) => {
+      let interpolateItem = this.interpolate(this.infiniteScrollTemplate, item);
+      let doc = this.parser.parseFromString(interpolateItem, "text/html");
+      let element = doc.activeElement.firstElementChild;
+      return element;
+    });
+    /**
+     * A custom implementation of the forEach method designed to iterate over an array of data,
+     * transform each item into an HTML element, and append the element to a specified placement object.
+     * Additionally, it adds an event listener to each generated element for handling click events.
+     * @param {Array} data An array of items to process. Each item is transformed into an HTML element
+     * and appended to the placement object specified in the context of `this`.
+     */
+    __publicField(this, "customForeach", (data) => {
+      data.forEach((item) => {
+        let element = this.dataToHtml(item);
+        let symbol = Symbol("infinite-scroll-item");
+        element[symbol] = item;
+        item[symbol] = element;
+        event.addListener(element, "click", "wje-infinite-scroll:click-item", null);
+        this.placementObj.insertAdjacentElement("beforeend", element);
+      });
+    });
+    /**
+     * Interpolates a string template with values from the provided parameters object.
+     * The template contains placeholders in the format `{{key}}` or `{{key.subkey}}`,
+     * which are replaced with the corresponding values from the `params` object.
+     * Placeholders support dot notation for accessing nested properties within the `params` object.
+     * @param {string} template The string template containing placeholders to be replaced.
+     * @param {object} params The object containing key-value pairs used for substitution in the template.
+     * @returns {string} A string with all placeholders replaced by their respective values from the `params` object.
+     */
+    __publicField(this, "interpolate", (template, params) => {
+      let keys = template.match(/\{{.*?\}}/g);
+      if (keys) {
+        for (let key of keys) {
+          let cleanKey = key.replace("{{", "").replace("}}", "");
+          let val = "";
+          cleanKey.split(".").forEach((k) => {
+            val = val === "" ? params[k] : val[k];
+          });
+          template = template.replace(key, val);
+        }
+      }
+      return template;
+    });
+    this.totalPages = 0;
+    this.isLoading = [];
+    __privateSet(this, _response, {});
+    this.iterate = null;
+    __privateSet(this, _infiniteScrollTemplate, null);
+    __privateSet(this, _abortController, new AbortController());
+    __privateSet(this, _signal, __privateGet(this, _abortController).signal);
+    __privateSet(this, _drawnItems, []);
+    __privateSet(this, _loadedItems, []);
+  }
+  /**
+   * Dependencies of the InfiniteScroll component.
+   * @param value
+   */
+  set infiniteScrollTemplate(value) {
+    __privateSet(this, _infiniteScrollTemplate, value);
+  }
+  /**
+   * Getter for the infiniteScrollTemplate property.
+   * @returns {null}
+   */
+  get infiniteScrollTemplate() {
+    return __privateGet(this, _infiniteScrollTemplate);
+  }
+  /**
+   * Dependencies of the InfiniteScroll component.
+   * @param value
+   */
+  set response(value) {
+    __privateSet(this, _response, value);
+  }
+  /**
+   * Getter for the response property.
+   * @returns {*|{}}
+   */
+  get response() {
+    return __privateGet(this, _response);
+  }
+  /**
+   * Dependencies of the InfiniteScroll component.
+   * @param value
+   */
+  set objectName(value) {
+    this.setAttribute("object-name", value);
+  }
+  get objectName() {
+    return this.getAttribute("object-name") ?? "data";
+  }
+  /**
+   * Returns the CSS styles for the component.
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return styles;
+  }
+  /**
+   * Returns the list of attributes to observe for changes.
+   * @static
+   * @returns {Array<string>}
+   */
+  static get observedAttributes() {
+    return [];
+  }
+  /**
+   * Sets up the attributes for the component.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Prepares the component for updates before it is drawn.
+   * This method handles the removal of templates for iteration, adjusts the height styling of the component,
+   * and manages abort signals for loading operations.
+   * @returns {void} No return value.
+   */
+  beforeDraw() {
+    var _a, _b, _c;
+    __privateSet(this, _loadedItems, []);
+    __privateSet(this, _drawnItems, []);
+    this.iterate = this.querySelector("[iterate]");
+    if (this.iterate) {
+      if (this.iterate.nodeName !== "TEMPLATE") {
+        console.error("The iterate attribute must be a template element");
+        this.infiniteScrollTemplate = (_a = this.iterate) == null ? void 0 : _a.outerHTML;
+      } else {
+        this.infiniteScrollTemplate = (_b = this.iterate) == null ? void 0 : _b.innerHTML;
+      }
+      (_c = this.iterate) == null ? void 0 : _c.remove();
+    }
+    this.setAttribute("style", "height: " + this.height);
+    if (__privateGet(this, _signal)) {
+      __privateGet(this, _abortController).abort();
+      __privateSet(this, _abortController, new AbortController());
+      __privateSet(this, _signal, __privateGet(this, _abortController).signal);
+    }
+  }
+  /**
+   * Creates and returns a document fragment containing the structure for an infinite scroll component.
+   * The structure includes native elements, slots for customization, and optional loading content.
+   * @returns {DocumentFragment} The document fragment containing the component's DOM structure.
+   */
+  draw() {
+    let fragment = document.createDocumentFragment();
+    let native = document.createElement("div");
+    native.classList.add("native");
+    native.setAttribute("part", "native-infinite-scroll");
+    let slot = document.createElement("slot");
+    let ending = document.createElement("slot");
+    ending.setAttribute("name", "ending");
+    if (WjElementUtils.hasSlot(this, "loader")) {
+      let loading = document.createElement("div");
+      loading.classList.add("loading");
+      let loader = document.createElement("slot");
+      loader.setAttribute("name", "loader");
+      loading.appendChild(loader);
+      this.loadingEl = loading;
+      fragment.appendChild(loading);
+    }
+    native.appendChild(slot);
+    native.appendChild(ending);
+    fragment.appendChild(native);
+    this.endingEl = ending;
+    return fragment;
+  }
+  /**
+   * Called after the component has been drawn.
+   */
+  async afterDraw() {
+    this.queryParams = this.queryParams || "";
+    this.size = +this.size || 10;
+    this.currentPage = 0;
+    this.scrollEvent();
+    __privateSet(this, _loading, this.loadPages(this.currentPage));
+    await __privateGet(this, _loading);
+  }
+  /**
+   * Fetches the pages from the server.
+   * @param {number} page The page number.
+   * @returns {Promise<object>} The response from the server.
+   */
+  async getPages(page) {
+    let hasParams = this.url.includes("?");
+    const response = await fetch(
+      `${this.url}${hasParams ? "&" : "?"}page=${page}&size=${this.size}${this == null ? void 0 : this.queryParams}`,
+      {
+        signal: __privateGet(this, _signal)
+      }
+    );
+    if (!response.ok) {
+      throw new Error(`An error occurred: ${response.status}`);
+    }
+    return await response.json();
+  }
+  /**
+   * Hides the loader.
+   */
+  hideLoader() {
+    var _a;
+    (_a = this == null ? void 0 : this.loadingEl) == null ? void 0 : _a.classList.remove("show");
+  }
+  /**
+   * Displays the loader element by adding the 'show' class to its class list.
+   * This method is useful for indicating a loading or processing state in the UI.
+   * @returns {void} No return value.
+   */
+  showLoader() {
+    var _a;
+    (_a = this == null ? void 0 : this.loadingEl) == null ? void 0 : _a.classList.add("show");
+  }
+  /**
+   * Checks if there are more pages to load.
+   * @param {number} page The page number.
+   * @returns {boolean} Whether there are more pages to load.
+   */
+  hasMorePages(page) {
+    return this.totalPages === 0 || page < this.totalPages;
+  }
+  /**
+   * Loads the pages.
+   * @param {number} page The page number.
+   */
+  async loadPages(page) {
+    this.showLoader();
+    try {
+      if (this.hasMorePages(page)) {
+        let response;
+        this.parser = new DOMParser();
+        if (typeof this.setCustomData === "function") {
+          response = await this.setCustomData(page, __privateGet(this, _signal));
+        } else {
+          response = await this.getPages(page);
+        }
+        this.totalPages = response == null ? void 0 : response.totalPages;
+        this.currentPage = page;
+        this.placementObj = this;
+        if (this.hasAttribute("placement")) this.placementObj = this.querySelector(this.placement);
+        event.dispatchCustomEvent(this, "wje-infinite-scroll:load", response);
+        this.response = response;
+        __privateSet(this, _loadedItems, this.objectName ? response[this.objectName] : response);
+        const notDrawnItems = __privateGet(this, _loadedItems).filter(
+          (item) => !__privateGet(this, _drawnItems).some(this.compareFunction.bind(this, item))
+        );
+        this.customForeach(notDrawnItems);
+        __privateGet(this, _drawnItems).push(...notDrawnItems);
+        this.isLoading.push(page);
+      } else {
+        event.dispatchCustomEvent(this, "wje-infinite-scroll:complete");
+        this.endingEl.classList.add("show");
+      }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      this.hideLoader();
+    }
+  }
+  addItem(item, place = "beforeend") {
+    let element = this.dataToHtml(item);
+    let symbol = Symbol("infinite-scroll-item");
+    element[symbol] = item;
+    item[symbol] = element;
+    this.placementObj.insertAdjacentElement(place, element);
+    __privateGet(this, _drawnItems).push(item);
+    if (__privateGet(this, _drawnItems).length > this.size * this.currentPage) {
+      this.totalPages += 1;
+    }
+  }
+  removeItem(item) {
+    let drawnItem = __privateGet(this, _drawnItems).find(this.compareFunction.bind(this, item));
+    if (!drawnItem) {
+      console.error("Item not found");
+      return;
+    }
+    let symbol = Object.getOwnPropertySymbols(drawnItem).at(0);
+    let element = drawnItem[symbol];
+    if (!element) {
+      console.error("Element not found");
+      return;
+    }
+    element == null ? void 0 : element.remove();
+    __privateSet(this, _drawnItems, __privateGet(this, _drawnItems).filter((i) => i !== item));
+    if (__privateGet(this, _drawnItems).length < this.size * this.currentPage) {
+      this.isLoading = this.isLoading.filter((i) => i !== this.currentPage);
+      this.currentPage--;
+    }
+  }
+}
+_drawnItems = new WeakMap();
+_loadedItems = new WeakMap();
+_response = new WeakMap();
+_infiniteScrollTemplate = new WeakMap();
+_abortController = new WeakMap();
+_signal = new WeakMap();
+_loading = new WeakMap();
 InfiniteScroll.define("wje-infinite-scroll", InfiniteScroll);
 export {
   InfiniteScroll as default