wj-elements 0.1.189 → 0.1.191

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    }\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     * 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.log(`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    }\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     * 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-progress-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-progress-bar.js","sources":["../packages/wje-progress-bar/progress-bar.element.js","../packages/wje-progress-bar/progress-bar.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `ProgressBar` is a custom web component that represents a progress bar.\n * @summary This element represents a progress bar.\n * @documentation https://elements.webjet.sk/components/progress-bar\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the progress bar.\n * @slot start - The start slot of the progress bar.\n * @slot end - The end slot of the progress bar.\n * @cssproperty [--wje-progress-bar-color=var(--wje-color-contrast-6)] - Sets the color of the progress bar. This property controls the fill color of the progress indicator. Accepts any valid CSS color value, such as named colors (`red`), hex values (`#ff0000`), or CSS variables.\n * @cssproperty [--wje-progress-bar-text-size=.75rem] - Defines the font size of the text displayed within the progress bar. Accepts any valid CSS length unit (e.g., `rem`, `px`, `em`) to control text size relative to the bar's design.\n * @cssproperty [--wje-progress-bar-text-color=var(--wje-color)] - Specifies the color of the text displayed within the progress bar. Accepts any valid CSS color value to ensure contrast and readability against the progress bar's background.\n * @tag wje-progress-bar\n */\nexport default class ProgressBar extends WJElement {\n    /**\n     * Creates an instance of ProgressBar.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the radius of the progress bar.\n     * @param {number} value The value to set.\n     */\n    set radius(value) {\n        this.setAttribute('radius', value);\n    }\n\n    /**\n     * Gets the radius of the progress bar.\n     * @returns {number} The value of the radius.\n     */\n    get radius() {\n        return +this.getAttribute('radius') || 70;\n    }\n\n    /**\n     * Gets the diameter of the progress bar.\n     * @returns {number} The value of the diameter.\n     */\n    get diameter() {\n        return this.radius * 2;\n    }\n\n    /**\n     * Gets the diameter of the progress bar.\n     * @returns {number} The value of the diameter.\n     */\n    get containerSize() {\n        return this.diameter + 2 * this.stroke;\n    }\n\n    /**\n     * Sets the stroke of the progress bar.\n     * @param {number} value The value to set.\n     */\n    set stroke(value) {\n        this.setAttribute('stroke', value);\n    }\n\n    /**\n     * Gets the stroke of the progress bar.\n     * @returns {number} The value of the stroke.\n     */\n    get stroke() {\n        return +this.getAttribute('stroke') || 6;\n    }\n\n    /**\n     * Gets the linecap of the progress bar.\n     * @returns {string} The value of the linecap.\n     */\n    get linecap() {\n        return this.getAttribute('linecap') || 'square';\n    }\n\n    className = 'ProgressBar';\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 ['progress'];\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     * @param {object} context The context for drawing.\n     * @param {object} store The store for drawing.\n     * @param {object} params The parameters for drawing.\n     * @returns {DocumentFragment}\n     */\n    draw(context, store, params) {\n        let xy = this.radius + this.stroke / 2;\n\n        let fragment = document.createDocumentFragment();\n\n        if (params.color) this.classList.add('wje-color');\n\n        let element = document.createElement('div');\n        element.classList.add('progress');\n\n        let slot = document.createElement('slot');\n\n        let slotWrapper = document.createElement('div');\n        slotWrapper.classList.add('slot-wrapper');\n\n        let slotStart = document.createElement('slot');\n        slotStart.setAttribute('name', 'start');\n\n        let slotEnd = document.createElement('slot');\n        slotEnd.setAttribute('name', 'end');\n\n        const svgNamespace = 'http://www.w3.org/2000/svg';\n\n        let svg = document.createElementNS(svgNamespace, 'svg');\n\n        let background;\n        let bar;\n\n        if (this?.type === 'circle') {\n            // console.log(\"CIRCLE\", \"RADIUS:\", this.radius, \"DIAMETER:\", this.diameter, \"CONTAINER SIZE:\", this.containerSize, \"STROKE:\", this.stroke);\n            svg.setAttribute('width', this.containerSize);\n            svg.setAttribute('height', this.containerSize);\n            svg.setAttribute('viewBox', `0 0 ${this.containerSize} ${this.containerSize}`);\n            svg.setAttribute('style', 'transform: rotate(-90deg)');\n\n            background = document.createElementNS(svgNamespace, 'circle');\n            background.setAttribute('stroke', 'var(--wje-progress-bar-background-color)');\n            background.setAttribute('stroke-width', this.stroke);\n            background.setAttribute('fill', 'transparent');\n            background.setAttribute('r', this.radius);\n            background.setAttribute('cx', this.containerSize / 2);\n            background.setAttribute('cy', this.containerSize / 2);\n\n            bar = document.createElementNS(svgNamespace, 'circle');\n            bar.setAttribute('stroke', 'var(--wje-progress-bar-color)');\n            bar.setAttribute('stroke-width', this.stroke);\n            bar.setAttribute('fill', 'transparent');\n            bar.setAttribute('r', this.radius);\n            bar.setAttribute('cx', this.containerSize / 2);\n            bar.setAttribute('cy', this.containerSize / 2);\n            bar.setAttribute('stroke-linecap', this.linecap);\n\n            let text = document.createElementNS(svgNamespace, 'text');\n            text.setAttribute('x', '50%');\n            text.setAttribute('y', '50%');\n            text.innerHTML = this.progress + '%';\n\n            svg.appendChild(text);\n        } else {\n            svg.setAttribute('width', '100%');\n            svg.setAttribute('height', this.stroke);\n            svg.setAttribute('preserveAspectRatio', 'none');\n\n            background = document.createElementNS(svgNamespace, 'rect');\n            background.setAttribute('x', 0);\n            background.setAttribute('y', 0);\n            background.setAttribute('width', '100%');\n            background.setAttribute('height', this.stroke);\n            if (this.linecap === 'round') {\n                background.setAttribute('rx', this.stroke / 2);\n                background.setAttribute('ry', this.stroke / 2);\n            }\n\n            bar = document.createElementNS(svgNamespace, 'rect');\n            bar.setAttribute('x', 0);\n            bar.setAttribute('y', 0);\n            bar.setAttribute('width', this.progress + '%');\n            bar.setAttribute('height', this.stroke);\n            bar.setAttribute('id', 'bar');\n\n            if (this.linecap === 'round') {\n                bar.setAttribute('rx', this.stroke / 2);\n                bar.setAttribute('ry', this.stroke / 2);\n            }\n        }\n\n        svg.appendChild(background);\n        svg.appendChild(bar);\n\n        slotWrapper.appendChild(slot);\n\n        element.appendChild(slotStart);\n        element.appendChild(slotWrapper);\n        element.appendChild(svg);\n        element.appendChild(slotEnd);\n\n        fragment.appendChild(element);\n\n        this.background = background;\n        this.bar = bar;\n\n        return fragment;\n    }\n\n    /**\n     * Adds event listeners after the component is drawn.\n     */\n    afterDraw() {\n        if (this.type === 'circle') {\n            this.setCircleProgress(this.progress);\n        }\n    }\n\n    /**\n     * Returns the dasharray for a circle with the given radius.\n     * @param {number} radius The radius of the circle in pixels.\n     * @returns {number} The dasharray value.\n     */\n    getCircleDasharray(radius = 70) {\n        return 2 * Math.PI * radius;\n    }\n\n    /**\n     * Returns the dashoffset for a circle with the given progress and radius.\n     * @param {number} progress The progress of the circle in percentage.\n     * @param {number} radius The radius of the circle in pixels.\n     * @returns {number} The dashoffset value.\n     */\n    getCircleDashoffset(progress = 0, radius = 70) {\n        return this.getCircleDasharray(radius) * ((100 - progress) / 100);\n    }\n\n    /**\n     * Sets the progress of the circle.\n     * @param percent\n     */\n    setCircleProgress(percent) {\n        const progress = this.bar;\n        const radius = progress.r.baseVal.value;\n        const circumference = 2 * Math.PI * radius;\n\n        progress.style.strokeDasharray = `${circumference}`;\n        const offset = circumference - (percent / 100) * circumference;\n        progress.style.strokeDashoffset = offset;\n    }\n}\n","import ProgressBar from './progress-bar.element.js';\n\nexport default ProgressBar;\n\nProgressBar.define('wje-progress-bar', ProgressBar);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-progress-bar.js","sources":["../packages/wje-progress-bar/progress-bar.element.js","../packages/wje-progress-bar/progress-bar.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `ProgressBar` is a custom web component that represents a progress bar.\n * @summary This element represents a progress bar.\n * @documentation https://elements.webjet.sk/components/progress-bar\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the progress bar.\n * @slot start - The start slot of the progress bar.\n * @slot end - The end slot of the progress bar.\n * @cssproperty [--wje-progress-bar-color=var(--wje-color-contrast-6)] - Sets the color of the progress bar. This property controls the fill color of the progress indicator. Accepts any valid CSS color value, such as named colors (`red`), hex values (`#ff0000`), or CSS variables.\n * @cssproperty [--wje-progress-bar-text-size=.75rem] - Defines the font size of the text displayed within the progress bar. Accepts any valid CSS length unit (e.g., `rem`, `px`, `em`) to control text size relative to the bar's design.\n * @cssproperty [--wje-progress-bar-text-color=var(--wje-color)] - Specifies the color of the text displayed within the progress bar. Accepts any valid CSS color value to ensure contrast and readability against the progress bar's background.\n * @tag wje-progress-bar\n */\nexport default class ProgressBar extends WJElement {\n    /**\n     * Creates an instance of ProgressBar.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the radius of the progress bar.\n     * @param {number} value The value to set.\n     */\n    set radius(value) {\n        this.setAttribute('radius', value);\n    }\n\n    /**\n     * Gets the radius of the progress bar.\n     * @returns {number} The value of the radius.\n     */\n    get radius() {\n        return +this.getAttribute('radius') || 70;\n    }\n\n    /**\n     * Gets the diameter of the progress bar.\n     * @returns {number} The value of the diameter.\n     */\n    get diameter() {\n        return this.radius * 2;\n    }\n\n    /**\n     * Gets the diameter of the progress bar.\n     * @returns {number} The value of the diameter.\n     */\n    get containerSize() {\n        return this.diameter + 2 * this.stroke;\n    }\n\n    /**\n     * Sets the stroke of the progress bar.\n     * @param {number} value The value to set.\n     */\n    set stroke(value) {\n        this.setAttribute('stroke', value);\n    }\n\n    /**\n     * Gets the stroke of the progress bar.\n     * @returns {number} The value of the stroke.\n     */\n    get stroke() {\n        return +this.getAttribute('stroke') || 6;\n    }\n\n    /**\n     * Gets the linecap of the progress bar.\n     * @returns {string} The value of the linecap.\n     */\n    get linecap() {\n        return this.getAttribute('linecap') || 'square';\n    }\n\n    className = 'ProgressBar';\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 ['progress'];\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     * @param {object} context The context for drawing.\n     * @param {object} store The store for drawing.\n     * @param {object} params The parameters for drawing.\n     * @returns {DocumentFragment}\n     */\n    draw(context, store, params) {\n        let xy = this.radius + this.stroke / 2;\n\n        let fragment = document.createDocumentFragment();\n\n        if (params.color) this.classList.add('wje-color');\n\n        let element = document.createElement('div');\n        element.classList.add('progress');\n\n        let slot = document.createElement('slot');\n\n        let slotWrapper = document.createElement('div');\n        slotWrapper.classList.add('slot-wrapper');\n\n        let slotStart = document.createElement('slot');\n        slotStart.setAttribute('name', 'start');\n\n        let slotEnd = document.createElement('slot');\n        slotEnd.setAttribute('name', 'end');\n\n        const svgNamespace = 'http://www.w3.org/2000/svg';\n\n        let svg = document.createElementNS(svgNamespace, 'svg');\n\n        let background;\n        let bar;\n\n        if (this?.type === 'circle') {\n            svg.setAttribute('width', this.containerSize);\n            svg.setAttribute('height', this.containerSize);\n            svg.setAttribute('viewBox', `0 0 ${this.containerSize} ${this.containerSize}`);\n            svg.setAttribute('style', 'transform: rotate(-90deg)');\n\n            background = document.createElementNS(svgNamespace, 'circle');\n            background.setAttribute('stroke', 'var(--wje-progress-bar-background-color)');\n            background.setAttribute('stroke-width', this.stroke);\n            background.setAttribute('fill', 'transparent');\n            background.setAttribute('r', this.radius);\n            background.setAttribute('cx', this.containerSize / 2);\n            background.setAttribute('cy', this.containerSize / 2);\n\n            bar = document.createElementNS(svgNamespace, 'circle');\n            bar.setAttribute('stroke', 'var(--wje-progress-bar-color)');\n            bar.setAttribute('stroke-width', this.stroke);\n            bar.setAttribute('fill', 'transparent');\n            bar.setAttribute('r', this.radius);\n            bar.setAttribute('cx', this.containerSize / 2);\n            bar.setAttribute('cy', this.containerSize / 2);\n            bar.setAttribute('stroke-linecap', this.linecap);\n\n            let text = document.createElementNS(svgNamespace, 'text');\n            text.setAttribute('x', '50%');\n            text.setAttribute('y', '50%');\n            text.innerHTML = this.progress + '%';\n\n            svg.appendChild(text);\n        } else {\n            svg.setAttribute('width', '100%');\n            svg.setAttribute('height', this.stroke);\n            svg.setAttribute('preserveAspectRatio', 'none');\n\n            background = document.createElementNS(svgNamespace, 'rect');\n            background.setAttribute('x', 0);\n            background.setAttribute('y', 0);\n            background.setAttribute('width', '100%');\n            background.setAttribute('height', this.stroke);\n            if (this.linecap === 'round') {\n                background.setAttribute('rx', this.stroke / 2);\n                background.setAttribute('ry', this.stroke / 2);\n            }\n\n            bar = document.createElementNS(svgNamespace, 'rect');\n            bar.setAttribute('x', 0);\n            bar.setAttribute('y', 0);\n            bar.setAttribute('width', this.progress + '%');\n            bar.setAttribute('height', this.stroke);\n            bar.setAttribute('id', 'bar');\n\n            if (this.linecap === 'round') {\n                bar.setAttribute('rx', this.stroke / 2);\n                bar.setAttribute('ry', this.stroke / 2);\n            }\n        }\n\n        svg.appendChild(background);\n        svg.appendChild(bar);\n\n        slotWrapper.appendChild(slot);\n\n        element.appendChild(slotStart);\n        element.appendChild(slotWrapper);\n        element.appendChild(svg);\n        element.appendChild(slotEnd);\n\n        fragment.appendChild(element);\n\n        this.background = background;\n        this.bar = bar;\n\n        return fragment;\n    }\n\n    /**\n     * Adds event listeners after the component is drawn.\n     */\n    afterDraw() {\n        if (this.type === 'circle') {\n            this.setCircleProgress(this.progress);\n        }\n    }\n\n    /**\n     * Returns the dasharray for a circle with the given radius.\n     * @param {number} radius The radius of the circle in pixels.\n     * @returns {number} The dasharray value.\n     */\n    getCircleDasharray(radius = 70) {\n        return 2 * Math.PI * radius;\n    }\n\n    /**\n     * Returns the dashoffset for a circle with the given progress and radius.\n     * @param {number} progress The progress of the circle in percentage.\n     * @param {number} radius The radius of the circle in pixels.\n     * @returns {number} The dashoffset value.\n     */\n    getCircleDashoffset(progress = 0, radius = 70) {\n        return this.getCircleDasharray(radius) * ((100 - progress) / 100);\n    }\n\n    /**\n     * Sets the progress of the circle.\n     * @param percent\n     */\n    setCircleProgress(percent) {\n        const progress = this.bar;\n        const radius = progress.r.baseVal.value;\n        const circumference = 2 * Math.PI * radius;\n\n        progress.style.strokeDasharray = `${circumference}`;\n        const offset = circumference - (percent / 100) * circumference;\n        progress.style.strokeDashoffset = offset;\n    }\n}\n","import ProgressBar from './progress-bar.element.js';\n\nexport default ProgressBar;\n\nProgressBar.define('wje-progress-bar', ProgressBar);\n"],"names":[],"mappings":"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"}

package/dist/wje-radio-group.js

@@ -8,7 +8,7 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 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 _internalValue;
-import { F as FormAssociatedElement } from "./form-associated-element-CaIxmEod.js";
+import { F as FormAssociatedElement } from "./form-associated-element-o0UjvdUp.js";
 import { event } from "./event.js";
 import Radio from "./wje-radio.js";
 const styles = "/*\n[ WJ Radio Group ]\n*/\n\n:host([invalid]) {\n    color: var(--wje-input-color-invalid);\n}\nslot[name='error'] {\n    display: none;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\n}\n\nslot[name='error'] {\n    display: none;\n    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    top: 0;\n    width: max-content;\n    line-height: normal;\n    position: static;\n    background: transparent;\n    padding: 0.25rem 0;\n    left: auto;\n    transform: none;\n    color: var(--wje-input-color-invalid);\n    font-size: 12px;\n}\n\n.wje-inline {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n}\n\n.input-hidden{\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    opacity: 0;\n    z-index: -1;\n}\n\n";
@@ -29,7 +29,6 @@ class RadioGroup extends FormAssociatedElement {
    * @param {string} value The value to set.
    */
   set value(value) {
-    console.log("Setting value in RadioGroup", value);
     __privateSet(this, _internalValue, value);
     this.pristine = false;
     this.internals.setFormValue(value);
@@ -113,7 +112,6 @@ class RadioGroup extends FormAssociatedElement {
       this.propagateValidation();
     });
     this.input.addEventListener("input", (e) => {
-      console.log("TOTO SA NIEKDTO SPUSTI", e.target.value);
       this.validate();
       this.pristine = false;
       this.propagateValidation();

package/dist/wje-radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-radio-group.js","sources":["../packages/wje-radio-group/radio-group.element.js","../packages/wje-radio-group/radio-group.js"],"sourcesContent":["import { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.js';\nimport Radio from '../wje-radio/radio.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `RadioGroup` is a custom web component that represents a group of radio buttons.\n * @summary This element represents a group of radio buttons.\n * @documentation https://elements.webjet.sk/components/radio-group\n * @status stable\n * @augments {FormAssociatedElement}\n * @slot - The default slot for the radio group.\n * @tag wje-radio-group\n */\n\nexport default class RadioGroup extends FormAssociatedElement {\n    #internalValue = '';\n\n    /**\n     * Creates an instance of RadioGroup.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this.invalid = false;\n        this.pristine = true;\n    }\n\n    /**\n     * Setter for the value attribute.\n     * @param {string} value The value to set.\n     */\n    set value(value) {\n        console.log(\"Setting value in RadioGroup\", value);\n        this.#internalValue = value;\n        this.pristine = false;\n        this.internals.setFormValue(value);\n        this.setAttribute('value', value);\n    }\n\n    /**\n     * Getter for the value attribute.\n     * @returns {string} The value of the attribute.\n     */\n    get value() {\n        return this.getAttribute('value');\n    }\n\n    className = 'RadioGroup';\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    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        if (this.pristine) {\n            this.pristine = false;\n        }\n    }\n\n    /**\n     * Draws the component for the radio group.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-radio-group', this.hasAttribute('inline') ? 'wje-inline' : 'ddd');\n\n        let input = document.createElement('input');\n        input.type =  'text';\n        input.name = this.name;\n        input.disabled = this.disabled;\n        input.required = true;\n        input.value = this.value || '';\n        input.classList.add('input-hidden');\n\n        let slot = document.createElement('slot');\n\n        let label = document.createElement('label');\n        label.innerText = this.label;\n        if (this.value && !this.hasAttribute('error')) label.classList.add('fade');\n\n        if (this.label) {\n            native.append(label);\n        }\n\n        // Error\n        let errorSlot = document.createElement('slot');\n        errorSlot.setAttribute('name', 'error');\n\n        let error = document.createElement('div');\n        error.setAttribute('slot', 'error');\n\n        native.append(input);\n        native.append(slot);\n        native.append(errorSlot);\n\n        this.append(error);\n\n        fragment.append(native);\n\n        this.input = input;\n\n        return fragment;\n    }\n\n    /**\n     * Adds event listeners after the component is drawn. Handles the selection of radio buttons.\n     */\n    afterDraw() {\n        if(this.value)\n            this.checkRadio(this.getRadioByValue(this.value));\n\n        // this.addEventListener('wje-radio:input', (e) => {\n        //     this.value = e.detail.context.value;\n        // });\n\n        this.validate();\n\n        if (this.invalid) {\n            this.showInvalidMessage();\n        }\n\n        this.addEventListener('wje-radio:change', (e) => {\n            this.checkRadio(e.target);\n\n            this.validate();\n\n            this.pristine = false;\n            this.propagateValidation();\n\n        });\n\n        this.input.addEventListener('input', (e) => {\n            console.log(\"TOTO SA NIEKDTO SPUSTI\", e.target.value);\n            this.validate();\n\n            this.pristine = false;\n            this.propagateValidation();\n\n            this.value = this.checkRadio(this.value);\n\n            event.dispatchCustomEvent(this, 'wje-toggle:input');\n        });\n\n        this.addEventListener('wje-radio-group:invalid', (e) => {\n            this.invalid = true;\n            this.pristine = false;\n\n            this.showInvalidMessage();\n        });\n\n    }\n\n    /**\n     * Returns the radio button with the given value.\n     * @param {string} value The value of the radio button.\n     * @returns {Radio} The radio button.\n     */\n    getRadioByValue(value) {\n        return this.getAllElements().find((el) => el instanceof Radio && el.value === value);\n    }\n\n    /**\n     * Removes the check from all radio buttons.\n     */\n    removeCheck() {\n        this.getAllElements().forEach((el) => {\n            if (el instanceof Radio) el.checked = false;\n        });\n    }\n\n    /**\n     * Sets the given radio button to checked.\n     */\n    checkRadio(radio) {\n        this.removeCheck();\n\n        if (radio) {\n            radio.checked = true;\n            this.value = radio.value;\n            this.input.value = radio.value;\n            return true;\n        }\n\n        console.error(`Radio with value ${radio.value} not found`);\n        return false;\n    }\n\n    /**\n     * Retrieves all direct child elements of the current element.\n     * @returns {HTMLElement[]} An array of child elements.\n     */\n    getAllElements() {\n        return Array.from(this.children);\n    }\n}\n","import RadioGroup from './radio-group.element.js';\n\nexport default RadioGroup;\n\nRadioGroup.define('wje-radio-group', RadioGroup);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-radio-group.js","sources":["../packages/wje-radio-group/radio-group.element.js","../packages/wje-radio-group/radio-group.js"],"sourcesContent":["import { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.js';\nimport Radio from '../wje-radio/radio.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `RadioGroup` is a custom web component that represents a group of radio buttons.\n * @summary This element represents a group of radio buttons.\n * @documentation https://elements.webjet.sk/components/radio-group\n * @status stable\n * @augments {FormAssociatedElement}\n * @slot - The default slot for the radio group.\n * @tag wje-radio-group\n */\n\nexport default class RadioGroup extends FormAssociatedElement {\n    #internalValue = '';\n\n    /**\n     * Creates an instance of RadioGroup.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this.invalid = false;\n        this.pristine = true;\n    }\n\n    /**\n     * Setter for the value attribute.\n     * @param {string} value The value to set.\n     */\n    set value(value) {\n        this.#internalValue = value;\n        this.pristine = false;\n        this.internals.setFormValue(value);\n        this.setAttribute('value', value);\n    }\n\n    /**\n     * Getter for the value attribute.\n     * @returns {string} The value of the attribute.\n     */\n    get value() {\n        return this.getAttribute('value');\n    }\n\n    className = 'RadioGroup';\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    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        if (this.pristine) {\n            this.pristine = false;\n        }\n    }\n\n    /**\n     * Draws the component for the radio group.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-radio-group', this.hasAttribute('inline') ? 'wje-inline' : 'ddd');\n\n        let input = document.createElement('input');\n        input.type =  'text';\n        input.name = this.name;\n        input.disabled = this.disabled;\n        input.required = true;\n        input.value = this.value || '';\n        input.classList.add('input-hidden');\n\n        let slot = document.createElement('slot');\n\n        let label = document.createElement('label');\n        label.innerText = this.label;\n        if (this.value && !this.hasAttribute('error')) label.classList.add('fade');\n\n        if (this.label) {\n            native.append(label);\n        }\n\n        // Error\n        let errorSlot = document.createElement('slot');\n        errorSlot.setAttribute('name', 'error');\n\n        let error = document.createElement('div');\n        error.setAttribute('slot', 'error');\n\n        native.append(input);\n        native.append(slot);\n        native.append(errorSlot);\n\n        this.append(error);\n\n        fragment.append(native);\n\n        this.input = input;\n\n        return fragment;\n    }\n\n    /**\n     * Adds event listeners after the component is drawn. Handles the selection of radio buttons.\n     */\n    afterDraw() {\n        if(this.value)\n            this.checkRadio(this.getRadioByValue(this.value));\n\n        // this.addEventListener('wje-radio:input', (e) => {\n        //     this.value = e.detail.context.value;\n        // });\n\n        this.validate();\n\n        if (this.invalid) {\n            this.showInvalidMessage();\n        }\n\n        this.addEventListener('wje-radio:change', (e) => {\n            this.checkRadio(e.target);\n\n            this.validate();\n\n            this.pristine = false;\n            this.propagateValidation();\n\n        });\n\n        this.input.addEventListener('input', (e) => {\n            this.validate();\n\n            this.pristine = false;\n            this.propagateValidation();\n\n            this.value = this.checkRadio(this.value);\n\n            event.dispatchCustomEvent(this, 'wje-toggle:input');\n        });\n\n        this.addEventListener('wje-radio-group:invalid', (e) => {\n            this.invalid = true;\n            this.pristine = false;\n\n            this.showInvalidMessage();\n        });\n\n    }\n\n    /**\n     * Returns the radio button with the given value.\n     * @param {string} value The value of the radio button.\n     * @returns {Radio} The radio button.\n     */\n    getRadioByValue(value) {\n        return this.getAllElements().find((el) => el instanceof Radio && el.value === value);\n    }\n\n    /**\n     * Removes the check from all radio buttons.\n     */\n    removeCheck() {\n        this.getAllElements().forEach((el) => {\n            if (el instanceof Radio) el.checked = false;\n        });\n    }\n\n    /**\n     * Sets the given radio button to checked.\n     */\n    checkRadio(radio) {\n        this.removeCheck();\n\n        if (radio) {\n            radio.checked = true;\n            this.value = radio.value;\n            this.input.value = radio.value;\n            return true;\n        }\n\n        console.error(`Radio with value ${radio.value} not found`);\n        return false;\n    }\n\n    /**\n     * Retrieves all direct child elements of the current element.\n     * @returns {HTMLElement[]} An array of child elements.\n     */\n    getAllElements() {\n        return Array.from(this.children);\n    }\n}\n","import RadioGroup from './radio-group.element.js';\n\nexport default RadioGroup;\n\nRadioGroup.define('wje-radio-group', RadioGroup);\n"],"names":[],"mappings":"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"}

package/dist/wje-radio.js

@@ -22,7 +22,6 @@ class Radio extends WJElement {
     __publicField(this, "inputEvent", (e) => {
       e.preventDefault();
       e.stopPropagation();
-      console.log("Radio input event", e.target.checked);
       this.checked = e.target.checked;
     });
   }

package/dist/wje-radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-radio.js","sources":["../packages/wje-radio/radio.element.js","../packages/wje-radio/radio.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents a Radio button element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/radio\n * @status stable\n * @augments WJElement\n * @slot - Default slot for the radio button label content.\n * @csspart native-radio - The native wrapper for the radio button.\n * @cssproperty [--wje-radio-margin-inline=0] - Specifies the horizontal (left and right) margin for the radio button. Accepts any valid CSS length unit (e.g., `px`, `rem`, `%`) to control spacing on both sides of the component.\n * @cssproperty [--wje-radio-margin-top=0] - Defines the top margin for the radio button. Accepts any valid CSS length value to adjust vertical spacing above the component.\n * @cssproperty [--wje-radio-margin-bottom=0] - Sets the bottom margin for the radio button. Accepts any valid CSS length value to adjust vertical spacing below the component.\n * // @fires wje-radio:change - Dispatched when the radio button's state changes.\n * // @fires wje-radio:input - Dispatched when the radio button is interacted with.\n */\n\nexport default class Radio extends WJElement {\n    /**\n     * Creates an instance of Radio.\n     */\n    constructor() {\n        super();\n\n    }\n\n    set value(value) {\n        this.setAttribute('value', value);\n    }\n\n    get value() {\n        return this.getAttribute('value');\n    }\n\n    /**\n     * Sets the name of the radio button.\n     * @param value\n     */\n    set checked(value) {\n        if (value) {\n            this.setAttribute('checked', '');\n        } else {\n            this.removeAttribute('checked');\n        }\n    }\n\n    /**\n     * Gets the checked property of the radio button.\n     * @returns {boolean}\n     */\n    get checked() {\n        return this.hasAttribute('checked');\n    }\n\n    /**\n     * Set checked attribute.\n     * @param {boolean} value true if the toggle is checked, false otherwise\n     */\n    set disabled(value) {\n        if (value) {\n            this.setAttribute('disabled', '');\n        } else {\n            this.removeAttribute('disabled');\n        }\n    }\n\n    /**\n     * Get disabled attribute value.\n     * @returns {boolean} true if the toggle is disabled, false otherwise\n     */\n    get disabled() {\n        return this.hasAttribute('disabled');\n    }\n\n    /**\n     * Sets the color of the radio button.\n     * @type {string}\n     */\n    className = 'Radio';\n\n    /**\n     * Returns the CSS styles for the component.\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 ['checked'];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the radio button.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-radio');\n\n        if (this.color) native.classList.add(this.color);\n\n        this.input = document.createElement('input');\n        this.input.type = 'radio';\n        this.input.id = this.value + '-radio';\n        this.input.name = this.value + '-radio';\n        this.input.checked = this.checked;\n        this.input.disabled = this.disabled;\n\n        let label = document.createElement('label');\n        label.htmlFor = this.value + '-radio';\n        label.innerHTML = '<slot></slot>';\n\n        native.appendChild(this.input);\n        native.appendChild(label);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Sets up the event listeners for the component.\n     */\n    afterDraw() {\n        if (!this.hasAttribute('disabled')) {\n            event.addListener(this.input, 'input', 'wje-radio:change');\n            // event.addListener(this, 'click', 'wje-radio:input');\n        }\n    }\n\n    /**\n     * Called when an attribute changes.\n     * @param {object} e\n     */\n    inputEvent = (e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        console.log(\"Radio input event\", e.target.checked);\n        this.checked = e.target.checked;\n    };\n\n    /**\n     * Toggles the radio button.\n     */\n    beforeDisconnect() {\n        event.removeElement(this);\n    }\n}\n","import Radio from './radio.element.js';\n\nexport default Radio;\n\nRadio.define('wje-radio', Radio);\n"],"names":[],"mappings":";;;;;;AAiBe,MAAM,cAAc,UAAU;AAAA;AAAA;AAAA;AAAA,EAIzC,cAAc;AACV,UAAO;AAwDX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAuEZ;AAAA;AAAA;AAAA;AAAA,sCAAa,CAAC,MAAM;AAChB,QAAE,eAAgB;AAClB,QAAE,gBAAiB;AACnB,cAAQ,IAAI,qBAAqB,EAAE,OAAO,OAAO;AACjD,WAAK,UAAU,EAAE,OAAO;AAAA,IAC3B;AAAA,EAlIL;AAAA,EAEI,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,KAAK;AAAA,EACxC;AAAA,EAEI,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ,OAAO;AACf,QAAI,OAAO;AACP,WAAK,aAAa,WAAW,EAAE;AAAA,IAC3C,OAAe;AACH,WAAK,gBAAgB,SAAS;AAAA,IAC1C;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,UAAU;AACV,WAAO,KAAK,aAAa,SAAS;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,SAAS,OAAO;AAChB,QAAI,OAAO;AACP,WAAK,aAAa,YAAY,EAAE;AAAA,IAC5C,OAAe;AACH,WAAK,gBAAgB,UAAU;AAAA,IAC3C;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,WAAW;AACX,WAAO,KAAK,aAAa,UAAU;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA;AAAA,EAYI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,qBAAqB;AAC5B,WAAO,CAAC,SAAS;AAAA,EACzB;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,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,cAAc;AAEnC,QAAI,KAAK,MAAO,QAAO,UAAU,IAAI,KAAK,KAAK;AAE/C,SAAK,QAAQ,SAAS,cAAc,OAAO;AAC3C,SAAK,MAAM,OAAO;AAClB,SAAK,MAAM,KAAK,KAAK,QAAQ;AAC7B,SAAK,MAAM,OAAO,KAAK,QAAQ;AAC/B,SAAK,MAAM,UAAU,KAAK;AAC1B,SAAK,MAAM,WAAW,KAAK;AAE3B,QAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,UAAM,UAAU,KAAK,QAAQ;AAC7B,UAAM,YAAY;AAElB,WAAO,YAAY,KAAK,KAAK;AAC7B,WAAO,YAAY,KAAK;AAExB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,QAAI,CAAC,KAAK,aAAa,UAAU,GAAG;AAChC,YAAM,YAAY,KAAK,OAAO,SAAS,kBAAkB;AAAA,IAErE;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAgBI,mBAAmB;AACf,UAAM,cAAc,IAAI;AAAA,EAChC;AACA;AC9JA,MAAM,OAAO,aAAa,KAAK;"}
+{"version":3,"file":"wje-radio.js","sources":["../packages/wje-radio/radio.element.js","../packages/wje-radio/radio.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents a Radio button element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/radio\n * @status stable\n * @augments WJElement\n * @slot - Default slot for the radio button label content.\n * @csspart native-radio - The native wrapper for the radio button.\n * @cssproperty [--wje-radio-margin-inline=0] - Specifies the horizontal (left and right) margin for the radio button. Accepts any valid CSS length unit (e.g., `px`, `rem`, `%`) to control spacing on both sides of the component.\n * @cssproperty [--wje-radio-margin-top=0] - Defines the top margin for the radio button. Accepts any valid CSS length value to adjust vertical spacing above the component.\n * @cssproperty [--wje-radio-margin-bottom=0] - Sets the bottom margin for the radio button. Accepts any valid CSS length value to adjust vertical spacing below the component.\n * // @fires wje-radio:change - Dispatched when the radio button's state changes.\n * // @fires wje-radio:input - Dispatched when the radio button is interacted with.\n */\n\nexport default class Radio extends WJElement {\n    /**\n     * Creates an instance of Radio.\n     */\n    constructor() {\n        super();\n\n    }\n\n    set value(value) {\n        this.setAttribute('value', value);\n    }\n\n    get value() {\n        return this.getAttribute('value');\n    }\n\n    /**\n     * Sets the name of the radio button.\n     * @param value\n     */\n    set checked(value) {\n        if (value) {\n            this.setAttribute('checked', '');\n        } else {\n            this.removeAttribute('checked');\n        }\n    }\n\n    /**\n     * Gets the checked property of the radio button.\n     * @returns {boolean}\n     */\n    get checked() {\n        return this.hasAttribute('checked');\n    }\n\n    /**\n     * Set checked attribute.\n     * @param {boolean} value true if the toggle is checked, false otherwise\n     */\n    set disabled(value) {\n        if (value) {\n            this.setAttribute('disabled', '');\n        } else {\n            this.removeAttribute('disabled');\n        }\n    }\n\n    /**\n     * Get disabled attribute value.\n     * @returns {boolean} true if the toggle is disabled, false otherwise\n     */\n    get disabled() {\n        return this.hasAttribute('disabled');\n    }\n\n    /**\n     * Sets the color of the radio button.\n     * @type {string}\n     */\n    className = 'Radio';\n\n    /**\n     * Returns the CSS styles for the component.\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 ['checked'];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the radio button.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-radio');\n\n        if (this.color) native.classList.add(this.color);\n\n        this.input = document.createElement('input');\n        this.input.type = 'radio';\n        this.input.id = this.value + '-radio';\n        this.input.name = this.value + '-radio';\n        this.input.checked = this.checked;\n        this.input.disabled = this.disabled;\n\n        let label = document.createElement('label');\n        label.htmlFor = this.value + '-radio';\n        label.innerHTML = '<slot></slot>';\n\n        native.appendChild(this.input);\n        native.appendChild(label);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Sets up the event listeners for the component.\n     */\n    afterDraw() {\n        if (!this.hasAttribute('disabled')) {\n            event.addListener(this.input, 'input', 'wje-radio:change');\n            // event.addListener(this, 'click', 'wje-radio:input');\n        }\n    }\n\n    /**\n     * Called when an attribute changes.\n     * @param {object} e\n     */\n    inputEvent = (e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        this.checked = e.target.checked;\n    };\n\n    /**\n     * Toggles the radio button.\n     */\n    beforeDisconnect() {\n        event.removeElement(this);\n    }\n}\n","import Radio from './radio.element.js';\n\nexport default Radio;\n\nRadio.define('wje-radio', Radio);\n"],"names":[],"mappings":";;;;;;AAiBe,MAAM,cAAc,UAAU;AAAA;AAAA;AAAA;AAAA,EAIzC,cAAc;AACV,UAAO;AAwDX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAuEZ;AAAA;AAAA;AAAA;AAAA,sCAAa,CAAC,MAAM;AAChB,QAAE,eAAgB;AAClB,QAAE,gBAAiB;AACnB,WAAK,UAAU,EAAE,OAAO;AAAA,IAC3B;AAAA,EAjIL;AAAA,EAEI,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,KAAK;AAAA,EACxC;AAAA,EAEI,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ,OAAO;AACf,QAAI,OAAO;AACP,WAAK,aAAa,WAAW,EAAE;AAAA,IAC3C,OAAe;AACH,WAAK,gBAAgB,SAAS;AAAA,IAC1C;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,UAAU;AACV,WAAO,KAAK,aAAa,SAAS;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,SAAS,OAAO;AAChB,QAAI,OAAO;AACP,WAAK,aAAa,YAAY,EAAE;AAAA,IAC5C,OAAe;AACH,WAAK,gBAAgB,UAAU;AAAA,IAC3C;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,WAAW;AACX,WAAO,KAAK,aAAa,UAAU;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA;AAAA,EAYI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,qBAAqB;AAC5B,WAAO,CAAC,SAAS;AAAA,EACzB;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,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,cAAc;AAEnC,QAAI,KAAK,MAAO,QAAO,UAAU,IAAI,KAAK,KAAK;AAE/C,SAAK,QAAQ,SAAS,cAAc,OAAO;AAC3C,SAAK,MAAM,OAAO;AAClB,SAAK,MAAM,KAAK,KAAK,QAAQ;AAC7B,SAAK,MAAM,OAAO,KAAK,QAAQ;AAC/B,SAAK,MAAM,UAAU,KAAK;AAC1B,SAAK,MAAM,WAAW,KAAK;AAE3B,QAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,UAAM,UAAU,KAAK,QAAQ;AAC7B,UAAM,YAAY;AAElB,WAAO,YAAY,KAAK,KAAK;AAC7B,WAAO,YAAY,KAAK;AAExB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,QAAI,CAAC,KAAK,aAAa,UAAU,GAAG;AAChC,YAAM,YAAY,KAAK,OAAO,SAAS,kBAAkB;AAAA,IAErE;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAeI,mBAAmB;AACf,UAAM,cAAc,IAAI;AAAA,EAChC;AACA;AC7JA,MAAM,OAAO,aAAa,KAAK;"}

package/dist/wje-routerx.js

@@ -1350,16 +1350,6 @@ class Routerx extends WJElement {
       window.scrollTo(0, 0);
     });
   }
-  set outlet(value) {
-    if (value) {
-      this.setAttribute("outlet", value);
-    } else {
-      this.removeAttribute("outlet");
-    }
-  }
-  get outlet() {
-    return document.querySelector(this.getAttribute("outlet")) || "wje-router-outlet";
-  }
   /**
    * Returns the list of attributes to observe for changes.
    * @static