wj-elements 0.7.7 → 0.8.0

package/dist/wje-kanban.js.map

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

package/dist/wje-label.js

@@ -1,53 +1,30 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ Label ]\n*/\n\n:host(.wje-color-primary) {\n    --wje-color: var(--wje-color-primary) !important;\n}\n\n:host(.wje-color-complete) {\n    --wje-color: var(--wje-color-complete) !important;\n}\n\n:host(.wje-color-success) {\n    --wje-color-base: var(--wje-color-success) !important;\n    --wje-color-contrast: var(--wje-color-contrast-0) !important;\n}\n\n:host(.wje-color-warning) {\n    --wje-color-base: var(--wje-color-warning) !important;\n    --wje-color-contrast: var(--wje-color-contrast-11) !important;\n}\n\n:host(.wje-color-danger) {\n    --wje-color-base: var(--wje-color-danger) !important;\n    --wje-color-contrast: var(--wje-color-contrast-0) !important;\n}\n\n:host(.wje-color-info) {\n    --wje-color-base: var(--wje-color-info) !important;\n    --wje-color-contrast: var(--wje-color-contrast-0) !important;\n}\n\n:host(.wje-color-menu) {\n    --wje-color-base: var(--wje-color-menu) !important;\n    --wje-color-contrast: var(--wje-color-contrast-0) !important;\n}\n\n:host {\n    --wje-color: initial;\n    display: block;\n    font-size: inherit;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n    box-sizing: border-box;\n}\n\n:host(.wje-color) {\n    color: current-color(base);\n}\n\n:host(.wje-text-wrap),\n:host([text-wrap]) {\n    white-space: normal !important;\n}\n\n/*Fixed Inputs*/\n\n:host(.label-fixed) {\n    flex: 0 0 100px;\n    width: 100px;\n    min-width: 100px;\n    max-width: 200px;\n}\n\n/*Stacked & Floating Inputs*/\n\n:host(.label-stacked),\n:host(.label-floating) {\n    margin-bottom: 0;\n    align-self: stretch;\n    width: auto;\n    max-width: 100%;\n}\n\n:host(.label-no-animate.label-floating) {\n    transition: none;\n}\n\n/*Headings*/\n\n::slotted(*) h1,\n::slotted(*) h2,\n::slotted(*) h3,\n::slotted(*) h4,\n::slotted(*) h5,\n::slotted(*) h6 {\n    text-overflow: inherit;\n    overflow: inherit;\n}\n\n:host(.wje-color) {\n    color: var(--wje-color);\n}\n\n::slotted(*:first-child) {\n    margin-top: 0 !important;\n}\n\n::slotted(*:last-child) {\n    margin-bottom: 0 !important;\n}\n";
-class Label extends WJElement {
-  /**
-   * Creates an instance of Label.
-   * @class
-   */
+import o from "./wje-element.js";
+class t extends o {
   constructor() {
     super();
     __publicField(this, "className", "Label");
   }
-  /**
-   * Returns the CSS styles for the component.
-   * @static
-   * @returns {CSSStyleSheet}
-   */
   static get cssStyleSheet() {
-    return styles;
+    return ":host(.wje-color-primary){--wje-color: var(--wje-color-primary) !important}:host(.wje-color-complete){--wje-color: var(--wje-color-complete) !important}:host(.wje-color-success){--wje-color-base: var(--wje-color-success) !important;--wje-color-contrast: var(--wje-color-contrast-0) !important}:host(.wje-color-warning){--wje-color-base: var(--wje-color-warning) !important;--wje-color-contrast: var(--wje-color-contrast-11) !important}:host(.wje-color-danger){--wje-color-base: var(--wje-color-danger) !important;--wje-color-contrast: var(--wje-color-contrast-0) !important}:host(.wje-color-info){--wje-color-base: var(--wje-color-info) !important;--wje-color-contrast: var(--wje-color-contrast-0) !important}:host(.wje-color-menu){--wje-color-base: var(--wje-color-menu) !important;--wje-color-contrast: var(--wje-color-contrast-0) !important}:host{--wje-color: initial;display:block;font-size:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;box-sizing:border-box}:host(.wje-color){color:current-color(base)}:host(.wje-text-wrap),:host([text-wrap]){white-space:normal!important}:host(.label-fixed){flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.label-stacked),:host(.label-floating){margin-bottom:0;align-self:stretch;width:auto;max-width:100%}:host(.label-no-animate.label-floating){transition:none}::slotted(*) h1,::slotted(*) h2,::slotted(*) h3,::slotted(*) h4,::slotted(*) h5,::slotted(*) h6{text-overflow:inherit;overflow:inherit}:host(.wje-color){color:var(--wje-color)}::slotted(*:first-child){margin-top:0!important}::slotted(*:last-child){margin-bottom:0!important}";
   }
-  /**
-   * 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";
   }
-  /**
-   * Draws the component.
-   * @returns {DocumentFragment}
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
-    if (this.color) this.classList.add("wje-color-" + params.color, "wje-color");
-    let element = document.createElement("slot");
-    fragment.appendChild(element);
-    return fragment;
+    let o2 = document.createDocumentFragment();
+    this.color && this.classList.add("wje-color-" + params.color, "wje-color");
+    let t2 = document.createElement("slot");
+    return o2.appendChild(t2), o2;
   }
 }
-Label.define("wje-label", Label);
+t.define("wje-label", t);
 export {
-  Label as default
+  t as default
 };
 //# sourceMappingURL=wje-label.js.map

package/dist/wje-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-label.js","sources":["../packages/wje-label/label.element.js","../packages/wje-label/label.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Label` is a custom web component that represents a label.\n * It extends from `WJElement`.\n * @summary This element represents a label.\n * @documentation https://elements.webjet.sk/components/label\n * @status stable\n * @augments {WJElement}\n * @csspart label - The label part of the component.\n * @slot - The default slot for the label.\n * @cssproperty [--wje-label-color=black] - Defines the text color of the label. This property determines the color of the label's text. Accepts any valid CSS color value (e.g., named colors like `black`, `red`, or values like `#000000`, `rgb(0, 0, 0)`).\n * @cssproperty [--wje-label-font-size=16px] - Specifies the font size of the label. This property sets the size of the label's text. Accepts any valid CSS length unit (e.g., `px`, `em`, `rem`). The default value is `16px`, which provides optimal readability in most designs.\n * // @fires wje-label:change - Event fired when the label is changed.\n * @tag wje-label\n */\nexport default class Label extends WJElement {\n    /**\n     * Creates an instance of Label.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'Label';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        if (this.color) this.classList.add('wje-color-' + params.color, 'wje-color');\n\n        let element = document.createElement('slot');\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n}\n","import Label from './label.element.js';\n\nexport default Label;\n\nLabel.define('wje-label', Label);\n"],"names":[],"mappings":";;;;;AAiBe,MAAM,cAAc,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKzC,cAAc;AACV,UAAK;AAGT,qCAAY;AAAA,EAFZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,WAAW,qBAAqB;AAC5B,WAAO,CAAA;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,KAAK,MAAO,MAAK,UAAU,IAAI,eAAe,OAAO,OAAO,WAAW;AAE3E,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACX;AACJ;AChEA,MAAM,OAAO,aAAa,KAAK;"}
+{"version":3,"file":"wje-label.js","sources":["../packages/wje-label/label.element.js","../packages/wje-label/label.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Label` is a custom web component that represents a label.\n * It extends from `WJElement`.\n * @summary This element represents a label.\n * @documentation https://elements.webjet.sk/components/label\n * @status stable\n * @augments {WJElement}\n * @csspart label - The label part of the component.\n * @slot - The default slot for the label.\n * @cssproperty [--wje-label-color=black] - Defines the text color of the label. This property determines the color of the label's text. Accepts any valid CSS color value (e.g., named colors like `black`, `red`, or values like `#000000`, `rgb(0, 0, 0)`).\n * @cssproperty [--wje-label-font-size=16px] - Specifies the font size of the label. This property sets the size of the label's text. Accepts any valid CSS length unit (e.g., `px`, `em`, `rem`). The default value is `16px`, which provides optimal readability in most designs.\n * // @fires wje-label:change - Event fired when the label is changed.\n * @tag wje-label\n */\nexport default class Label extends WJElement {\n    /**\n     * Creates an instance of Label.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'Label';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        if (this.color) this.classList.add('wje-color-' + params.color, 'wje-color');\n\n        let element = document.createElement('slot');\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n}\n","import Label from './label.element.js';\n\nexport default Label;\n\nLabel.define('wje-label', Label);\n"],"names":["Label","WJElement","super","className","cssStyleSheet","observedAttributes","setupAttributes","this","isShadowRoot","fragment","document","createDocumentFragment","color","classList","add","params","element","createElement","appendChild","define"],"mappings":";;;;AAiBe,MAAMA,UAAcC,EAAAA;AAAAA,EAK/B;AACIC,UAAAA;AAGJC,qCAAY;AAAA,EAFZ;AAAA,EASA,WAAA,gBAAWC;AACP;EACJ;AAAA,EAOA,WAAA,qBAAWC;AACP,WAAO,CAAA;AAAA,EACX;AAAA,EAKA,kBAAAC;AACIC,SAAKC,eAAe;AAAA,EACxB;AAAA,EAMA;AACI,QAAIC,KAAWC,SAASC,uBAAAA;AAEpBJ,SAAKK,SAAOL,KAAKM,UAAUC,IAAI,eAAeC,OAAOH,OAAO,WAAA;AAEhE,QAAII,KAAUN,SAASO,cAAc,MAAA;AAIrC,WAFAR,GAASS,YAAYF,EAAAA,GAEdP;AAAAA,EACX;AAAA;AC/DJT,EAAMmB,OAAO,aAAanB,CAAAA;"}

package/dist/wje-level-indicator.js

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

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

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

package/dist/wje-list.js

@@ -1,61 +1,31 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ List ]\n*/\n\n:host {\n    margin: 0;\n    padding: 0;\n\n    display: block;\n\n    /*contain: content;*/\n    list-style-type: none;\n}\n\n:host(.wje-inset) {\n    background: var(--wje-list-background);\n    transform: translateZ(0);\n    overflow: hidden;\n    padding: var(--wje-list-inset-padding);\n    border-radius: var(--wje-list-border-radius);\n}\n\n:host(.wje-lines-none) ::slotted(wje-item) {\n    --wje-border-width: 0 !important;\n    --wje-item-border-width: 0!important;\n}\n";
-class List extends WJElement {
-  /**
-   * Creates an instance of List.
-   * @class
-   */
+import t from "./wje-element.js";
+class e extends t {
   constructor() {
     super();
     __publicField(this, "className", "List");
   }
-  /**
-   * Returns the CSS styles for the component.
-   * @static
-   * @returns {CSSStyleSheet}
-   */
   static get cssStyleSheet() {
-    return styles;
+    return ":host{margin:0;padding:0;display:block;list-style-type:none}:host(.wje-inset){background:var(--wje-list-background);transform:translateZ(0);overflow:hidden;padding:var(--wje-list-inset-padding);border-radius:var(--wje-list-border-radius)}:host(.wje-lines-none) ::slotted(wje-item){--wje-border-width: 0 !important;--wje-item-border-width: 0!important}";
   }
-  /**
-   * Sets up the attributes for the component.
-   */
   setupAttributes() {
-    this.isShadowRoot = "open";
-    this.syncAria();
+    this.isShadowRoot = "open", this.syncAria();
   }
-  /**
-   * Returns the list of attributes to observe for changes.
-   * @returns {DocumentFragment}
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("slot");
-    fragment.appendChild(element);
-    return fragment;
+    let t2 = document.createDocumentFragment(), e2 = document.createElement("slot");
+    return t2.appendChild(e2), t2;
   }
-  /**
-   * Called after the component has been drawn.
-   */
   afterDraw() {
-    this.syncAria();
-    this.classList.toggle("wje-lines-" + this.lines, this.hasAttribute("lines"));
-    this.classList.toggle("wje-inset", this.hasAttribute("inset"));
+    this.syncAria(), this.classList.toggle("wje-lines-" + this.lines, this.hasAttribute("lines")), this.classList.toggle("wje-inset", this.hasAttribute("inset"));
   }
-  /**
-   * Sync ARIA attributes on host.
-   */
   syncAria() {
-    if (!this.hasAttribute("role")) {
-      this.setAriaState({ role: "list" });
-    }
+    this.hasAttribute("role") || this.setAriaState({ role: "list" });
   }
 }
-List.define("wje-list", List);
+e.define("wje-list", e);
 export {
-  List as default
+  e as default
 };
 //# sourceMappingURL=wje-list.js.map

package/dist/wje-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-list.js","sources":["../packages/wje-list/list.element.js","../packages/wje-list/list.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\n\nimport styles from './styles/styles.css?inline';\n\n/**\n * `List` is a custom web component that represents a list.\n * It extends from `WJElement`.\n * @summary This element represents a list.\n * @documentation https://elements.webjet.sk/components/list\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the list.\n * @cssproperty [--wje-list-inset-padding=1rem] - The padding of the list when it is inset.\n * @cssproperty [--wje-list-border-radius=8px] - The border radius of the list. Accepts any valid CSS length.\n * @cssproperty [--wje-list-background=var(--wje-background)] - The background of the list. Accepts any valid CSS color value.\n * @tag wje-list\n */\nexport default class List extends WJElement {\n    /**\n     * Creates an instance of List.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'List';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n\n    /**\n     * Called after the component has been drawn.\n     */\n    afterDraw() {\n        this.syncAria();\n        this.classList.toggle('wje-lines-' + this.lines, this.hasAttribute('lines'));\n        this.classList.toggle('wje-inset', this.hasAttribute('inset'));\n    }\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        if (!this.hasAttribute('role')) {\n            this.setAriaState({ role: 'list' });\n        }\n    }\n}\n","import List from './list.element.js';\n\nexport default List;\n\nList.define('wje-list', List);\n"],"names":[],"mappings":";;;;;AAiBe,MAAM,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKxC,cAAc;AACV,UAAK;AAGT,qCAAY;AAAA,EAFZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,SAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,UAAU,SAAS,cAAc,MAAM;AAC3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACR,SAAK,SAAQ;AACb,SAAK,UAAU,OAAO,eAAe,KAAK,OAAO,KAAK,aAAa,OAAO,CAAC;AAC3E,SAAK,UAAU,OAAO,aAAa,KAAK,aAAa,OAAO,CAAC;AAAA,EACjE;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;AACP,QAAI,CAAC,KAAK,aAAa,MAAM,GAAG;AAC5B,WAAK,aAAa,EAAE,MAAM,OAAM,CAAE;AAAA,IACtC;AAAA,EACJ;AACJ;ACvEA,KAAK,OAAO,YAAY,IAAI;"}
+{"version":3,"file":"wje-list.js","sources":["../packages/wje-list/list.element.js","../packages/wje-list/list.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\n\nimport styles from './styles/styles.css?inline';\n\n/**\n * `List` is a custom web component that represents a list.\n * It extends from `WJElement`.\n * @summary This element represents a list.\n * @documentation https://elements.webjet.sk/components/list\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the list.\n * @cssproperty [--wje-list-inset-padding=1rem] - The padding of the list when it is inset.\n * @cssproperty [--wje-list-border-radius=8px] - The border radius of the list. Accepts any valid CSS length.\n * @cssproperty [--wje-list-background=var(--wje-background)] - The background of the list. Accepts any valid CSS color value.\n * @tag wje-list\n */\nexport default class List extends WJElement {\n    /**\n     * Creates an instance of List.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'List';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n\n    /**\n     * Called after the component has been drawn.\n     */\n    afterDraw() {\n        this.syncAria();\n        this.classList.toggle('wje-lines-' + this.lines, this.hasAttribute('lines'));\n        this.classList.toggle('wje-inset', this.hasAttribute('inset'));\n    }\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        if (!this.hasAttribute('role')) {\n            this.setAriaState({ role: 'list' });\n        }\n    }\n}\n","import List from './list.element.js';\n\nexport default List;\n\nList.define('wje-list', List);\n"],"names":["List","WJElement","constructor","super","className","cssStyleSheet","setupAttributes","this","isShadowRoot","syncAria","fragment","document","createDocumentFragment","element","createElement","appendChild","afterDraw","classList","toggle","lines","hasAttribute","setAriaState","role","define"],"mappings":";;;;AAiBe,MAAMA,UAAaC,EAAAA;AAAAA,EAK9B,cAAAC;AACIC,UAAAA;AAGJC,qCAAY;AAAA,EAFZ;AAAA,EASA,WAAA,gBAAWC;AACP;EACJ;AAAA,EAKA,kBAAAC;AACIC,SAAKC,eAAe,QACpBD,KAAKE,SAAAA;AAAAA,EACT;AAAA,EAMA;AACI,QAAIC,KAAWC,SAASC,uBAAAA,GAEpBC,KAAUF,SAASG,cAAc,MAAA;AAGrC,WAFAJ,GAASK,YAAYF,EAAAA,GAEdH;AAAAA,EACX;AAAA,EAKA,YAAAM;AACIT,SAAKE,SAAAA,GACLF,KAAKU,UAAUC,OAAO,eAAeX,KAAKY,OAAOZ,KAAKa,aAAa,OAAA,CAAA,GACnEb,KAAKU,UAAUC,OAAO,aAAaX,KAAKa,aAAa;EACzD;AAAA,EAKA,WAAAX;AACSF,SAAKa,aAAa,MAAA,KACnBb,KAAKc,aAAa,EAAEC,MAAM,OAAA,CAAA;AAAA,EAElC;AAAA;ACtEJtB,EAAKuB,OAAO,YAAYvB,CAAAA;"}