wj-elements 0.1.183 → 0.1.184

package/dist/light.css

@@ -578,7 +578,15 @@
     --wje-tooltip-border-radius: var(--wje-border-radius-medium);
 
     /* Tree - Item */
+    --wje-tree-item-padding-inline: var(--wje-spacing-3x-small);
+    --wje-tree-item-padding-block: var(--wje-spacing-3x-small);
     --wje-tree-item-indent: var(--wje-spacing-large);
     --wje-tree-item-indent-guid-width: 0px;
     --wje-tree-item-border-radius: var(--wje-border-radius-medium);
+    --wje-tree-item-background: transparent;
+    --wje-tree-item-color: var(--wje-color);
+    --wje-tree-item-background-hover: var(--wje-color-contrast-1);
+    --wje-tree-item-color-hover: var(--wje-color-contrast-8);
+    --wje-tree-item-background-selected: var(--wje-color-primary-9);
+    --wje-tree-item-color-selected: var(--wje-color-contrast-0);
 }

package/dist/packages/wje-icon-picker/icon-picker.element.d.ts

@@ -152,7 +152,7 @@ export default class IconPicker extends WJElement {
      * // The resulting structure:
      * // <div class="icon-item">
      * //   <wje-tooltip content="hourglass">
-     * //     <wje-icon name="hourglass" size="large" filled></wje-icon>
+     * //     <wje-icon name="hourglass" size="large" filled></wje-icon></wje-icon>
      * //   </wje-tooltip>
      * // </div>
      */

package/dist/packages/wje-tree/tree.element.d.ts

@@ -67,6 +67,7 @@ export default class Tree extends WJElement {
      * @returns {void} This method does not return a value. If the icon matching the given status is not found, a warning is logged.
      */
     getExpandCollapseIcon(item: HTMLElement, status: string): void;
+    getSlots(item: any, slotName: any): void;
     /**
      * Updates the state of a checkbox, syncing the state both upwards to parent elements
      * and downwards to child elements as necessary.

package/dist/wje-icon-picker.js

@@ -96,7 +96,7 @@ class IconPicker extends WJElement {
      * // The resulting structure:
      * // <div class="icon-item">
      * //   <wje-tooltip content="hourglass">
-     * //     <wje-icon name="hourglass" size="large" filled></wje-icon>
+     * //     <wje-icon name="hourglass" size="large" filled></wje-icon></wje-icon>
      * //   </wje-tooltip>
      * // </div>
      */

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

@@ -1 +1 @@
-{"version":3,"file":"wje-icon-picker.js","sources":["../packages/wje-icon-picker/icon-picker.element.js","../packages/wje-icon-picker/icon-picker.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport { getBasePath } from \"../utils/base-path.js\";\nimport InfiniteScroll from '../wje-infinite-scroll/infinite-scroll.js';\nimport Input from '../wje-input/input.js';\nimport Popup from '../wje-popup/popup.js';\nimport Tooltip from '../wje-tooltip/tooltip.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element allows users to pick an icon from a set of available options.\n * `IconPicker` is a custom web component that represents an interactive icon picker. It features\n * search functionality, infinite scrolling, and popup-based selection. The component is highly customizable\n * and integrates seamlessly with other `WJElement` components.\n * @documentation https://elements.webjet.sk/components/icon-picker\n * @status stable\n * @augments {WJElement}\n * @attribute {string} icon - The selected icon's name.\n * @attribute {number} size - The number of icons displayed per page in infinite scroll. Default is 60.\n * @csspart native - The native part of the component.\n * @csspart anchor - The part representing the anchor button displaying the selected icon.\n * @csspart picker - The picker part containing the search and icon selection interface.\n * @csspart input - The input part for searching icons.\n * @cssproperty [--wje-color-picker-value=#ff0000] - The default color value.\n * @cssproperty [--wje-color-picker-area=transparent] - The background color of the color picker area.\n * @cssproperty [--wje-color-picker-swatch=transparent] - The background color of the swatch picker.\n * @cssproperty [--wje-color-picker-size=1rem] - The size of the icons in the picker.\n * @cssproperty [--wje-color-picker-radius=4px] - The border radius of the picker.\n * @tag wje-icon-picker\n */\n\nexport default class IconPicker extends WJElement {\n    /**\n     * Creates an instance of IconPicker.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Dependencies of the IconPicker component.\n     * @property {object} dependencies\n     */\n    dependencies = {\n        'wje-input': Input,\n        'wje-infinite-scroll': InfiniteScroll,\n        'wje-tooltip': Tooltip,\n        'wje-popup': Popup,\n    };\n\n    /**\n     * Setter for the markerPosition property.\n     * @param {any} value The value to set.\n     */\n    set size(value) {\n        this.setAttribute('size', value);\n    }\n\n    /**\n     * Getter for the markerPosition property.\n     * @returns {any} size The value of the markerPosition property.\n     */\n    get size() {\n        return this.getAttribute('size') || 60;\n    }\n\n    /**\n     * Setter for the value property.\n     * @param value\n     */\n    set icon(value) {\n        this.setAttribute('icon', value);\n    }\n\n    /**\n     * Getter for the value property.\n     * @returns {string}\n     */\n    get icon() {\n        return this.getAttribute('icon');\n    }\n\n    className = 'IconPicker';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Prepares the component before drawing.\n     */\n    async beforeDraw() {\n        this.tags = Object.values(await this.getTags());\n\n        this.transformedObjects = this.convertObject(this.tags);\n\n        this.index = this.transformedObjects.map((item) => ({\n            ...item,\n            searchText: `${item.name.toLowerCase()} ${item.tags.join(' ').toLowerCase()}`,\n        }));\n    }\n\n    /**\n     * Draws the component.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-color-picker');\n\n        // ANCHOR\n        let anchor = document.createElement('div');\n        anchor.setAttribute('slot', 'anchor');\n        anchor.classList.add('anchor');\n\n        if (this.hasAttribute('icon') && this.icon) {\n            let icon = document.createElement('wje-icon');\n            icon.setAttribute('name', this.icon);\n\n            anchor.appendChild(icon);\n        }\n\n        // PICKER\n        let picker = document.createElement('div');\n        picker.classList.add('picker');\n\n        let input = document.createElement('wje-input');\n        input.classList.add('input');\n        input.setAttribute('variant', 'standard');\n        input.setAttribute('placeholder', 'type to filter...');\n        input.setAttribute('clearable', '');\n        input.addEventListener('wje-input:input', this.searchIcon);\n\n        let infiniteScroll = new InfiniteScroll();\n        infiniteScroll.setAttribute('url', getBasePath('assets/tags.json'));\n        infiniteScroll.setAttribute('placement', '.icon-items');\n        infiniteScroll.setAttribute('size', this.size);\n        infiniteScroll.setAttribute('height', '223px');\n        infiniteScroll.innerHTML = '<div class=\"icon-items\"></div>';\n\n        // APPEND\n        picker.appendChild(input);\n\n        picker.appendChild(infiniteScroll);\n\n        // POPUP\n        let popup = document.createElement('wje-popup');\n        popup.setAttribute('placement', this.placement || 'bottom-start');\n        popup.setAttribute('offset', this.offset);\n        popup.setAttribute('manual', '');\n\n        popup.appendChild(anchor);\n        popup.appendChild(picker);\n\n        native.appendChild(popup);\n\n        fragment.appendChild(native);\n\n        this.popup = popup;\n        this.input = input;\n        this.anchor = anchor;\n        this.picker = picker;\n        this.infiniteScroll = infiniteScroll;\n\n        this.infiniteScroll.dataToHtml = this.dataToHtml;\n        this.infiniteScroll.compareFunction = (i, item) => i.name === item.name;\n        this.infiniteScroll.setCustomData = (page = 0) => {\n            return {\n                data: this.transformedObjects.slice(page * this.size, page * this.size + this.size),\n                page: page,\n                size: this.size,\n                totalPages: Math.round(this.transformedObjects.length / this.size),\n            };\n        };\n\n        return fragment;\n    }\n\n    /**\n     * Called after the component has been drawn.\n     */\n    afterDraw() {\n        this.addEventListener('wje-popup:show', () => {\n            this.initial();\n        });\n\n        // udalost po vymazani inputu\n        this.addEventListener('wje-input:clear', () => {\n            this.clearIconsContainer(); // clear icons container\n            this.infiniteScroll.scrollEvent(); // bind scroll event\n            this.infiniteScroll.loadPages(0); // load first page\n        });\n\n        this.addEventListener('wje-infinite-scroll:click-item', (e) => {\n            let icon = e.detail.context.querySelector('wje-icon');\n            let name = icon.getAttribute('name');\n            let stylesType = icon.hasAttribute('filled') ? 'filled' : 'outline';\n            let uniqueObject = this.transformedObjects.find(\n                (i) => i.name === name && Object.keys(i.styles)[0] === stylesType\n            );\n\n            const iconElement = document.createElement('wje-icon');\n            iconElement.setAttribute('name', name);\n            if (uniqueObject.styles.hasOwnProperty('filled')) iconElement.setAttribute('filled', '');\n\n            uniqueObject.icon = iconElement;\n\n            this.value = uniqueObject;\n            this.icon = uniqueObject.name;\n\n            this.anchor.innerHTML = '';\n            this.anchor.appendChild(iconElement);\n\n            event.dispatchCustomEvent(this, 'wje-icon-picker:select', uniqueObject); // odpalenie custom eventu\n        });\n\n        this.init = false;\n    }\n\n    /**\n     * Initializes the component.\n     */\n    initial() {\n        this.infiniteScroll.scrollEvent();\n    }\n\n    /**\n     * Converts an object of tags into a transformed array of objects, separating `filled` and `outline` styles.\n     * The function processes an input object containing tags, extracts its values,\n     * and for each tag that has both `filled` and `outline` styles, splits them into\n     * two separate objects. Tags without `filled` styles remain unchanged.\n     * @param {object} tags The input object containing tags as properties. Each property is an object with a `styles` key.\n     * @param {object} tags[].styles The styles object containing `filled` and/or `outline` styles.\n     * @param {object} [tags[].styles.outline] The outline style object, if present.\n     * @param {object} [tags[].styles.filled] The filled style object, if present.\n     * @returns {Array<object>} An array of transformed objects. Objects with both `filled` and `outline` styles are split into separate objects, each containing only one style.\n     * @example\n     * const tags = {\n     *     hourglass: {\n     *         styles: {\n     *             outline: { ... },\n     *             filled: { ... },\n     *         }\n     *     },\n     *     clock: {\n     *         styles: {\n     *             outline: { ... },\n     *         }\n     *     }\n     * };\n     * const result = convertObject(tags);\n     * console.log(result);\n     * // [\n     * //   { styles: { outline: { ... } } },\n     * //   { styles: { filled: { ... } } },\n     * //   { styles: { outline: { ... } } }\n     * // ]\n     */\n    convertObject = (tags = {}) => {\n        let originalObjects = Object.values(tags);\n        let transformedObjects = [];\n        for (let i = 0; i < originalObjects.length; i++) {\n            const obj = originalObjects[i];\n            if (obj.styles.filled) {\n                transformedObjects.push(\n                    { ...obj, styles: { outline: obj.styles.outline } },\n                    { ...obj, styles: { filled: obj.styles.filled } }\n                );\n            } else {\n                transformedObjects.push(obj);\n            }\n        }\n\n        return transformedObjects;\n    };\n\n    /**\n     * Converts an icon data object into an HTML element structure.\n     * This function creates a styled HTML element that represents an icon with a tooltip.\n     * The tooltip displays the name of the icon, and the icon itself is styled based on\n     * whether it uses the `filled` style.\n     * @param {object} data The icon data object.\n     * @returns {HTMLElement} A `div` element containing the icon wrapped in a `wje-tooltip`. The tooltip displays the icon name, and the `wje-icon` element represents the icon with attributes set according to the data.\n     * @example\n     * const iconData = {\n     *     name: \"hourglass\",\n     *     styles: {\n     *         filled: { ... }\n     *     }\n     * };\n     * const htmlElement = dataToHtml(iconData);\n     * document.body.appendChild(htmlElement);\n     *\n     * // The resulting structure:\n     * // <div class=\"icon-item\">\n     * //   <wje-tooltip content=\"hourglass\">\n     * //     <wje-icon name=\"hourglass\" size=\"large\" filled></wje-icon>\n     * //   </wje-tooltip>\n     * // </div>\n     */\n    dataToHtml = (data) => {\n        let iconItem = document.createElement('div');\n        iconItem.classList.add('icon-item');\n\n        let tooltip = document.createElement('wje-tooltip');\n        tooltip.setAttribute('content', data.name);\n\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', data.name);\n        icon.setAttribute('size', 'large');\n        if (data.styles.hasOwnProperty('filled')) icon.setAttribute('filled', '');\n\n        tooltip.appendChild(icon);\n        iconItem.appendChild(tooltip);\n\n        return iconItem;\n    };\n\n    /**\n     * Gets the category of the tags.\n     * @param {Array} tags The tags to get the category of.\n     * @returns {Array} The category of the tags.\n     */\n    getCategory(tags) {\n        return [...new Set(tags.map((obj) => obj.category))];\n    }\n\n    /**\n     * Gets the tags.\n     * @returns {Promise<Array>} The tags of the component.\n     */\n    async getTags() {\n        const response = await fetch(getBasePath('assets/tags.json'));\n        return response.json();\n    }\n\n    /**\n     * Called when the component is disconnected.\n     */\n    beforeDisconnect() {\n        this.init = false;\n    }\n\n    /**\n     * Searches icons based on user input.\n     * This method handles the input event and filters the available icons based on the provided search string.\n     * The filtering is performed on an index that combines icon names and their tags.\n     * The results are then adjusted for infinite scrolling.\n     * @param {Event} e The input event (e.g., `wje-input:input`) containing the search query details.\n     */\n    searchIcon = (e) => {\n        const query = e.detail.value.toLowerCase();\n\n        const results = this.index.filter((item) => item.searchText.includes(query));\n\n        this.infiniteScroll.unScrollEvent();\n        this.infiniteScroll.setCustomData = (page = 0) => {\n            const data = results.slice(page * this.size, page * this.size + this.size);\n            return {\n                data: data,\n                page: page,\n                size: this.size,\n                totalPages: Math.ceil(results.length / this.size),\n            };\n        };\n\n        this.clearIconsContainer();\n        this.infiniteScroll.loadPages(0);\n    }\n\n    /**\n     * Clears the icons container.\n     */\n    clearIconsContainer() {\n        this.context.querySelector('.icon-items').innerHTML = '';\n    }\n\n    /**\n     * Closes the component.\n     */\n    onClose = () => {\n        this.popup.handleHide();\n    }\n}\n","import IconPicker from './icon-picker.element.js';\n\nexport default IconPicker;\n\nIconPicker.define('wje-icon-picker', IconPicker);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-icon-picker.js","sources":["../packages/wje-icon-picker/icon-picker.element.js","../packages/wje-icon-picker/icon-picker.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport { getBasePath } from \"../utils/base-path.js\";\nimport InfiniteScroll from '../wje-infinite-scroll/infinite-scroll.js';\nimport Input from '../wje-input/input.js';\nimport Popup from '../wje-popup/popup.js';\nimport Tooltip from '../wje-tooltip/tooltip.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element allows users to pick an icon from a set of available options.\n * `IconPicker` is a custom web component that represents an interactive icon picker. It features\n * search functionality, infinite scrolling, and popup-based selection. The component is highly customizable\n * and integrates seamlessly with other `WJElement` components.\n * @documentation https://elements.webjet.sk/components/icon-picker\n * @status stable\n * @augments {WJElement}\n * @attribute {string} icon - The selected icon's name.\n * @attribute {number} size - The number of icons displayed per page in infinite scroll. Default is 60.\n * @csspart native - The native part of the component.\n * @csspart anchor - The part representing the anchor button displaying the selected icon.\n * @csspart picker - The picker part containing the search and icon selection interface.\n * @csspart input - The input part for searching icons.\n * @cssproperty [--wje-color-picker-value=#ff0000] - The default color value.\n * @cssproperty [--wje-color-picker-area=transparent] - The background color of the color picker area.\n * @cssproperty [--wje-color-picker-swatch=transparent] - The background color of the swatch picker.\n * @cssproperty [--wje-color-picker-size=1rem] - The size of the icons in the picker.\n * @cssproperty [--wje-color-picker-radius=4px] - The border radius of the picker.\n * @tag wje-icon-picker\n */\n\nexport default class IconPicker extends WJElement {\n    /**\n     * Creates an instance of IconPicker.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Dependencies of the IconPicker component.\n     * @property {object} dependencies\n     */\n    dependencies = {\n        'wje-input': Input,\n        'wje-infinite-scroll': InfiniteScroll,\n        'wje-tooltip': Tooltip,\n        'wje-popup': Popup,\n    };\n\n    /**\n     * Setter for the markerPosition property.\n     * @param {any} value The value to set.\n     */\n    set size(value) {\n        this.setAttribute('size', value);\n    }\n\n    /**\n     * Getter for the markerPosition property.\n     * @returns {any} size The value of the markerPosition property.\n     */\n    get size() {\n        return this.getAttribute('size') || 60;\n    }\n\n    /**\n     * Setter for the value property.\n     * @param value\n     */\n    set icon(value) {\n        this.setAttribute('icon', value);\n    }\n\n    /**\n     * Getter for the value property.\n     * @returns {string}\n     */\n    get icon() {\n        return this.getAttribute('icon');\n    }\n\n    className = 'IconPicker';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Prepares the component before drawing.\n     */\n    async beforeDraw() {\n        this.tags = Object.values(await this.getTags());\n\n        this.transformedObjects = this.convertObject(this.tags);\n\n        this.index = this.transformedObjects.map((item) => ({\n            ...item,\n            searchText: `${item.name.toLowerCase()} ${item.tags.join(' ').toLowerCase()}`,\n        }));\n    }\n\n    /**\n     * Draws the component.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-color-picker');\n\n        // ANCHOR\n        let anchor = document.createElement('div');\n        anchor.setAttribute('slot', 'anchor');\n        anchor.classList.add('anchor');\n\n        if (this.hasAttribute('icon') && this.icon) {\n            let icon = document.createElement('wje-icon');\n            icon.setAttribute('name', this.icon);\n\n            anchor.appendChild(icon);\n        }\n\n        // PICKER\n        let picker = document.createElement('div');\n        picker.classList.add('picker');\n\n        let input = document.createElement('wje-input');\n        input.classList.add('input');\n        input.setAttribute('variant', 'standard');\n        input.setAttribute('placeholder', 'type to filter...');\n        input.setAttribute('clearable', '');\n        input.addEventListener('wje-input:input', this.searchIcon);\n\n        let infiniteScroll = new InfiniteScroll();\n        infiniteScroll.setAttribute('url', getBasePath('assets/tags.json'));\n        infiniteScroll.setAttribute('placement', '.icon-items');\n        infiniteScroll.setAttribute('size', this.size);\n        infiniteScroll.setAttribute('height', '223px');\n        infiniteScroll.innerHTML = '<div class=\"icon-items\"></div>';\n\n        // APPEND\n        picker.appendChild(input);\n\n        picker.appendChild(infiniteScroll);\n\n        // POPUP\n        let popup = document.createElement('wje-popup');\n        popup.setAttribute('placement', this.placement || 'bottom-start');\n        popup.setAttribute('offset', this.offset);\n        popup.setAttribute('manual', '');\n\n        popup.appendChild(anchor);\n        popup.appendChild(picker);\n\n        native.appendChild(popup);\n\n        fragment.appendChild(native);\n\n        this.popup = popup;\n        this.input = input;\n        this.anchor = anchor;\n        this.picker = picker;\n        this.infiniteScroll = infiniteScroll;\n\n        this.infiniteScroll.dataToHtml = this.dataToHtml;\n        this.infiniteScroll.compareFunction = (i, item) => i.name === item.name;\n        this.infiniteScroll.setCustomData = (page = 0) => {\n            return {\n                data: this.transformedObjects.slice(page * this.size, page * this.size + this.size),\n                page: page,\n                size: this.size,\n                totalPages: Math.round(this.transformedObjects.length / this.size),\n            };\n        };\n\n        return fragment;\n    }\n\n    /**\n     * Called after the component has been drawn.\n     */\n    afterDraw() {\n        this.addEventListener('wje-popup:show', () => {\n            this.initial();\n        });\n\n        // udalost po vymazani inputu\n        this.addEventListener('wje-input:clear', () => {\n            this.clearIconsContainer(); // clear icons container\n            this.infiniteScroll.scrollEvent(); // bind scroll event\n            this.infiniteScroll.loadPages(0); // load first page\n        });\n\n        this.addEventListener('wje-infinite-scroll:click-item', (e) => {\n            let icon = e.detail.context.querySelector('wje-icon');\n            let name = icon.getAttribute('name');\n            let stylesType = icon.hasAttribute('filled') ? 'filled' : 'outline';\n            let uniqueObject = this.transformedObjects.find(\n                (i) => i.name === name && Object.keys(i.styles)[0] === stylesType\n            );\n\n            const iconElement = document.createElement('wje-icon');\n            iconElement.setAttribute('name', name);\n            if (uniqueObject.styles.hasOwnProperty('filled')) iconElement.setAttribute('filled', '');\n\n            uniqueObject.icon = iconElement;\n\n            this.value = uniqueObject;\n            this.icon = uniqueObject.name;\n\n            this.anchor.innerHTML = '';\n            this.anchor.appendChild(iconElement);\n\n            event.dispatchCustomEvent(this, 'wje-icon-picker:select', uniqueObject); // odpalenie custom eventu\n        });\n\n        this.init = false;\n    }\n\n    /**\n     * Initializes the component.\n     */\n    initial() {\n        this.infiniteScroll.scrollEvent();\n    }\n\n    /**\n     * Converts an object of tags into a transformed array of objects, separating `filled` and `outline` styles.\n     * The function processes an input object containing tags, extracts its values,\n     * and for each tag that has both `filled` and `outline` styles, splits them into\n     * two separate objects. Tags without `filled` styles remain unchanged.\n     * @param {object} tags The input object containing tags as properties. Each property is an object with a `styles` key.\n     * @param {object} tags[].styles The styles object containing `filled` and/or `outline` styles.\n     * @param {object} [tags[].styles.outline] The outline style object, if present.\n     * @param {object} [tags[].styles.filled] The filled style object, if present.\n     * @returns {Array<object>} An array of transformed objects. Objects with both `filled` and `outline` styles are split into separate objects, each containing only one style.\n     * @example\n     * const tags = {\n     *     hourglass: {\n     *         styles: {\n     *             outline: { ... },\n     *             filled: { ... },\n     *         }\n     *     },\n     *     clock: {\n     *         styles: {\n     *             outline: { ... },\n     *         }\n     *     }\n     * };\n     * const result = convertObject(tags);\n     * console.log(result);\n     * // [\n     * //   { styles: { outline: { ... } } },\n     * //   { styles: { filled: { ... } } },\n     * //   { styles: { outline: { ... } } }\n     * // ]\n     */\n    convertObject = (tags = {}) => {\n        let originalObjects = Object.values(tags);\n        let transformedObjects = [];\n        for (let i = 0; i < originalObjects.length; i++) {\n            const obj = originalObjects[i];\n            if (obj.styles.filled) {\n                transformedObjects.push(\n                    { ...obj, styles: { outline: obj.styles.outline } },\n                    { ...obj, styles: { filled: obj.styles.filled } }\n                );\n            } else {\n                transformedObjects.push(obj);\n            }\n        }\n\n        return transformedObjects;\n    };\n\n    /**\n     * Converts an icon data object into an HTML element structure.\n     * This function creates a styled HTML element that represents an icon with a tooltip.\n     * The tooltip displays the name of the icon, and the icon itself is styled based on\n     * whether it uses the `filled` style.\n     * @param {object} data The icon data object.\n     * @returns {HTMLElement} A `div` element containing the icon wrapped in a `wje-tooltip`. The tooltip displays the icon name, and the `wje-icon` element represents the icon with attributes set according to the data.\n     * @example\n     * const iconData = {\n     *     name: \"hourglass\",\n     *     styles: {\n     *         filled: { ... }\n     *     }\n     * };\n     * const htmlElement = dataToHtml(iconData);\n     * document.body.appendChild(htmlElement);\n     *\n     * // The resulting structure:\n     * // <div class=\"icon-item\">\n     * //   <wje-tooltip content=\"hourglass\">\n     * //     <wje-icon name=\"hourglass\" size=\"large\" filled></wje-icon></wje-icon>\n     * //   </wje-tooltip>\n     * // </div>\n     */\n    dataToHtml = (data) => {\n        let iconItem = document.createElement('div');\n        iconItem.classList.add('icon-item');\n\n        let tooltip = document.createElement('wje-tooltip');\n        tooltip.setAttribute('content', data.name);\n\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', data.name);\n        icon.setAttribute('size', 'large');\n        if (data.styles.hasOwnProperty('filled')) icon.setAttribute('filled', '');\n\n        tooltip.appendChild(icon);\n        iconItem.appendChild(tooltip);\n\n        return iconItem;\n    };\n\n    /**\n     * Gets the category of the tags.\n     * @param {Array} tags The tags to get the category of.\n     * @returns {Array} The category of the tags.\n     */\n    getCategory(tags) {\n        return [...new Set(tags.map((obj) => obj.category))];\n    }\n\n    /**\n     * Gets the tags.\n     * @returns {Promise<Array>} The tags of the component.\n     */\n    async getTags() {\n        const response = await fetch(getBasePath('assets/tags.json'));\n        return response.json();\n    }\n\n    /**\n     * Called when the component is disconnected.\n     */\n    beforeDisconnect() {\n        this.init = false;\n    }\n\n    /**\n     * Searches icons based on user input.\n     * This method handles the input event and filters the available icons based on the provided search string.\n     * The filtering is performed on an index that combines icon names and their tags.\n     * The results are then adjusted for infinite scrolling.\n     * @param {Event} e The input event (e.g., `wje-input:input`) containing the search query details.\n     */\n    searchIcon = (e) => {\n        const query = e.detail.value.toLowerCase();\n\n        const results = this.index.filter((item) => item.searchText.includes(query));\n\n        this.infiniteScroll.unScrollEvent();\n        this.infiniteScroll.setCustomData = (page = 0) => {\n            const data = results.slice(page * this.size, page * this.size + this.size);\n            return {\n                data: data,\n                page: page,\n                size: this.size,\n                totalPages: Math.ceil(results.length / this.size),\n            };\n        };\n\n        this.clearIconsContainer();\n        this.infiniteScroll.loadPages(0);\n    }\n\n    /**\n     * Clears the icons container.\n     */\n    clearIconsContainer() {\n        this.context.querySelector('.icon-items').innerHTML = '';\n    }\n\n    /**\n     * Closes the component.\n     */\n    onClose = () => {\n        this.popup.handleHide();\n    }\n}\n","import IconPicker from './icon-picker.element.js';\n\nexport default IconPicker;\n\nIconPicker.define('wje-icon-picker', IconPicker);\n"],"names":[],"mappings":"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"}

package/dist/wje-tree-item.js

@@ -2,103 +2,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
-const styles = `/*
-[ WJ Tree Item ]
-*/
-
-:host {
-    .native-tree-item {
-        position: relative;
-        display: flex;
-        align-items: stretch;
-        flex-direction: column;
-        &.multiple {
-            .item {
-                border-radius: 0 !important;
-            }
-        }
-        .item {
-            display: flex;
-            align-items: center;
-
-            /*--toggle-width: var(--wje-tree-item-indent);*/
-            /*--spacer-col: var(--wje-tree-item-indent);*/
-
-            /*display: grid;*/
-            /*grid-template-columns: var(--spacer-col) var(--wje-tree-item-indent) 1fr;*/
-            /*grid-template-areas: "indent toggle content";*/
-
-            padding-inline: var(--wje-spacing-3x-small);
-            padding-block: var(--wje-spacing-3x-small);
-            border-radius: var(--wje-tree-item-border-radius);
-            /*padding-left: var(--wje-tree-item-indent);*/
-            &:hover {
-                background-color: var(--wje-color-contrast-1);
-            }
-            .indent {
-                /*grid-area: indent;*/
-                display: block;
-                /*width: var(--wje-tree-item-indent);*/
-                width: 1em;
-            }
-            .toggle {
-                font-size: var(--wje-font-size-medium);
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                box-sizing: content-box;
-                width: var(--wje-tree-item-indent);
-                height: var(--wje-tree-item-indent);
-                flex-shrink: 0;
-                /*grid-area: toggle;*/
-            }
-            wje-checkbox {
-                font-size: var(--wje-font-size-medium);
-                margin: 0;
-            }
-            .content {
-                font-size: var(--wje-font-size-medium);
-                grid-area: content;
-            }
-            slot {
-                display: flex;
-                align-items: center;
-            }
-            slot:not([name])::slotted(wje-icon) {
-                margin-right: var(--wje-spacing-2x-small);
-            }
-        }
-        .children {
-            font-size: calc(1em + var(--wje-tree-item-indent, var(--wje-spacing-medium)));
-            display: none;
-            &.open {
-                display: block;
-
-                ::before {
-                    content: '';
-                    position: absolute;
-                    top: var(--wje-tree-item-indent);
-                    bottom: 5px;
-                    left: calc(1em - (var(--wje-spacing-3x-small) * 2) - (var(--wje-tree-item-indent-guid-width) / 2));
-                    border-inline-end: var(--wje-tree-item-indent-guid-width) solid var(--wje-border-color);
-                    z-index: 1;
-                }
-            }
-        }
-    }
-
-    .native-tree-item.expanded .item slot[name='expand'],
-    .native-tree-item:not(.expanded) slot[name='collapse'] {
-        display: none;
-    }
-}
-
-:host([selected]) {
-    .item {
-        background-color: var(--wje-color-contrast-2);
-    }
-}
-`;
+const styles = "/*\n[ WJ Tree Item ]\n*/\n\n:host {\n    .native-tree-item {\n        position: relative;\n        display: flex;\n        align-items: stretch;\n        flex-direction: column;\n        &.multiple {\n            .item {\n                border-radius: 0 !important;\n            }\n        }\n        .item {\n            display: flex;\n            align-items: center;\n            padding-inline: var(--wje-tree-item-padding-inline);\n            padding-block: var(--wje-tree-item-padding-block);\n            border-radius: var(--wje-tree-item-border-radius);\n            background-color: var(--wje-tree-item-background);\n            color: var(--wje-tree-item-color);\n            &:hover {\n                background-color: var(--wje-tree-item-background-hover);\n                color: var(--wje-tree-item-color-hover);\n            }\n            .indent {\n                display: block;\n                width: 1em;\n            }\n            .toggle {\n                font-size: var(--wje-font-size-medium);\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                box-sizing: content-box;\n                width: var(--wje-tree-item-indent);\n                height: var(--wje-tree-item-indent);\n                flex-shrink: 0;\n            }\n            wje-checkbox {\n                font-size: var(--wje-font-size-medium);\n                margin: 0;\n            }\n            .content {\n                font-size: var(--wje-font-size-medium);\n            }\n            slot {\n                display: flex;\n                align-items: center;\n            }\n            slot:not([name])::slotted(wje-icon) {\n                margin-right: var(--wje-spacing-2x-small);\n            }\n            slot[name='end'] {\n                margin-inline-start: auto;\n            }\n        }\n        .children {\n            font-size: calc(1em + var(--wje-tree-item-indent, var(--wje-spacing-medium)));\n            display: none;\n            &.open {\n                display: block;\n\n                ::before {\n                    content: '';\n                    position: absolute;\n                    top: var(--wje-tree-item-indent);\n                    bottom: 5px;\n                    left: calc(1em - (var(--wje-spacing-3x-small) * 2) - (var(--wje-tree-item-indent-guid-width) / 2));\n                    border-inline-end: var(--wje-tree-item-indent-guid-width) solid var(--wje-border-color);\n                    z-index: 1;\n                }\n            }\n        }\n    }\n\n    .native-tree-item.expanded .item slot[name='expand'],\n    .native-tree-item:not(.expanded) slot[name='collapse'] {\n        display: none;\n    }\n}\n\n:host([selected]) {\n    .item {\n        background-color: var(--wje-tree-item-background-selected);\n        color: var(--wje-tree-item-color-selected);\n    }\n}\n:host([slot-hover-visible]) {\n    .item {\n        &:hover {\n            slot[name='start'], slot[name='end'] {\n                visibility: visible;\n            }\n        }\n        slot[name='start'], slot[name='end'] {\n            visibility: hidden;\n        }\n    }\n}\n";
 class TreeItem extends WJElement {
   /**
    * Creates an instance of Toast.
@@ -235,7 +139,10 @@ class TreeItem extends WJElement {
    * @returns {void} No return value.
    */
   beforeDraw() {
+    var _a;
     if (this.isNestedItem()) this.slot = "children";
+    if ((_a = this.closest("wje-tree")) == null ? void 0 : _a.hasAttribute("slot-hover-visible"))
+      this.setAttribute("slot-hover-visible", "");
   }
   /**
    * Creates and returns a document fragment representing the structure of a tree item component.
@@ -250,7 +157,10 @@ class TreeItem extends WJElement {
     let native = document.createElement("div");
     native.setAttribute("part", "native");
     native.classList.add("native-tree-item", this.selection === "multiple" ? "multiple" : "single");
+    let slotStart = document.createElement("slot");
+    slotStart.setAttribute("name", "start");
     let item = document.createElement("div");
+    item.setAttribute("part", "item");
     item.classList.add("item");
     let indent = document.createElement("div");
     indent.classList.add("indent");
@@ -266,6 +176,9 @@ class TreeItem extends WJElement {
     let slot = document.createElement("slot");
     slot.setAttribute("name", "children");
     children.appendChild(slot);
+    let slotEnd = document.createElement("slot");
+    slotEnd.setAttribute("name", "end");
+    item.appendChild(slotStart);
     item.appendChild(indent);
     if (this.querySelectorAll(":scope > wje-tree-item").length > 0) {
       if (this.querySelectorAll('[slot="expand"]').length < 1) {
@@ -291,6 +204,7 @@ class TreeItem extends WJElement {
     if (this.selection === "multiple") item.appendChild(checkbox);
     label.appendChild(slotElement);
     item.appendChild(label);
+    item.appendChild(slotEnd);
     native.appendChild(item);
     native.appendChild(children);
     fragment.appendChild(native);

package/dist/wje-tree-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-tree-item.js","sources":["../packages/wje-tree-item/tree-item.element.js","../packages/wje-tree-item/tree-item.js"],"sourcesContent":["import { default as WJElement, WjElementUtils, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `wje-tree-item` is a custom web component used as a child of the `wje-tree`.\n * It represents a node within a tree structure, capable of nesting other items.\n * @summary Represents a single item in a tree structure.\n * @documentation https://elements.webjet.sk/components/tree-item\n * @status stable\n * @augments {HTMLElement}\n * @slot - Default slot for rendering the tree item's content (e.g., text or custom elements).\n * @csspart native - The native container of the tree item.\n * @cssproperty [--wje-tree-item-indent=var(--wje-spacing-large)] - Defines the indentation for nested tree items.\n * @cssproperty [--wje-tree-item-indent-guid-width=0px] - Specifies the width of the guide element shown next to a tree item.\n * @cssproperty [--wje-tree-item-border-radius=var(--wje-border-radius-medium)] - Sets the border radius of the tree item’s container.\n * @tag wje-tree-item\n */\n\nexport default class TreeItem extends WJElement {\n    /**\n     * Creates an instance of Toast.\n     */\n    constructor() {\n        super();\n\n        this._selection = 'single';\n    }\n\n    /**\n     * Sets the expanded state of the element. When set to a truthy value,\n     * the 'expanded' attribute will be added to the element. When set to a falsy\n     * value, the 'expanded' attribute will be removed.\n     * @param {boolean} value A boolean value indicating whether the\n     * element should be expanded (true) or collapsed (false).\n     */\n    set expanded(value) {\n        if (value) {\n            this.setAttribute('expanded', '');\n        } else {\n            this.removeAttribute('expanded');\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'expanded' state for the current element.\n     * This getter checks whether the 'expanded' attribute is present on the element.\n     * If the attribute exists, it returns true, representing that the element is expanded.\n     * Otherwise, it returns false, indicating that the element is not expanded.\n     * @returns {boolean} True if the 'expanded' attribute is present, false otherwise.\n     */\n    get expanded() {\n        return this.hasAttribute('expanded');\n    }\n\n    /**\n     * Sets the 'selected' attribute of the element. Removes the attribute if the provided value is falsy; otherwise, sets it.\n     * @param {boolean} value The value indicating whether the element should have the 'selected' attribute.\n     */\n    set selected(value) {\n        this.removeAttribute('selected');\n\n        if (value) this.setAttribute('selected', '');\n    }\n\n    /**\n     * Getter method for determining if the 'selected' attribute is present on the element.\n     * @returns {boolean} Returns true if the 'selected' attribute is present, otherwise false.\n     */\n    get selected() {\n        return this.hasAttribute('selected');\n    }\n\n    /**\n     * Sets the selection mode for the component.\n     * @param {string} value The selection mode to apply. Defaults to 'single'\n     * if no value is provided. Possible options may be\n     * specific to the implementation of the component\n     * (e.g., 'single', 'multiple').\n     */\n    set selection(value) {\n        this._selection = value || 'single';\n    }\n\n    /**\n     * Retrieves the current selection.\n     * @returns {*} The value of the current selection.\n     */\n    get selection() {\n        return this._selection;\n    }\n\n    /**\n     * Sets or removes the 'indeterminate' attribute based on the provided value.\n     * This can be used to visually indicate an indeterminate state for elements like checkboxes.\n     * @param {boolean} value A boolean indicating whether to set the element to an indeterminate state.\n     * If true, the 'indeterminate' attribute is added to the element; if false, the attribute is removed.\n     */\n    set indeterminate(value) {\n        this.removeAttribute('indeterminate');\n\n        if (value) this.setAttribute('indeterminate', '');\n    }\n\n    /**\n     * Retrieves the state of the indeterminate attribute.\n     * @returns {boolean} True if the indeterminate attribute is present, otherwise false.\n     */\n    get indeterminate() {\n        return this.hasAttribute('indeterminate');\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'TreeItem';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Setup attributes for the Button element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\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 ['selected', 'indeterminate'];\n    }\n\n    /**\n     * Handles updates when observed attributes of the element are changed.\n     * Updates the checkbox state based on changes to the \"selected\" or \"indeterminate\" attributes.\n     * @param {string} name The name of the attribute that was changed.\n     * @param {string|null} oldValue The previous value of the attribute before the change.\n     * @param {string|null} newValue The new value of the attribute after the change.\n     * @returns {void}\n     */\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (name === 'selected') {\n            // this.checkbox.removeAttribute('indeterminate');\n            if (this.selected) {\n                this.checkbox.checked = true;\n            } else {\n                this.checkbox.checked = false;\n            }\n        }\n\n        if (name === 'indeterminate' && !this.selected) {\n            this.checkbox.removeAttribute('indeterminate');\n            this.checkbox.removeAttribute('checked');\n\n            if (this.indeterminate) this.checkbox.setAttribute('indeterminate', '');\n        }\n    }\n\n    /**\n     * Custom logic executed before the draw process begins.\n     * Determines and sets the appropriate slot if the current item is nested.\n     * @returns {void} No return value.\n     */\n    beforeDraw() {\n        if (this.isNestedItem()) this.slot = 'children';\n    }\n\n    /**\n     * Creates and returns a document fragment representing the structure of a tree item component.\n     * The method constructs the DOM elements including the native container, indentation, toggle button,\n     * selection checkbox, label, and children container, along with their respective slots and attributes.\n     * It dynamically handles the creation of expand and collapse icons, as well as appending slots for\n     * child components.\n     * @returns {DocumentFragment} A fragment containing the complete tree item structure to be rendered.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-tree-item', this.selection === 'multiple' ? 'multiple' : 'single');\n\n        let item = document.createElement('div');\n        item.classList.add('item');\n\n        let indent = document.createElement('div');\n        indent.classList.add('indent');\n\n        let button = document.createElement('div');\n        button.classList.add('toggle');\n\n        let checkbox = document.createElement('wje-checkbox');\n        if (this.selected) checkbox.setAttribute('checked', '');\n\n        let label = document.createElement('div');\n        label.classList.add('content');\n\n        let slotElement = document.createElement('slot');\n\n        let children = document.createElement('div');\n        children.classList.add('children');\n\n        let slot = document.createElement('slot');\n        slot.setAttribute('name', 'children');\n        children.appendChild(slot);\n\n        item.appendChild(indent);\n\n        if (this.querySelectorAll(':scope > wje-tree-item').length > 0) {\n            if (this.querySelectorAll('[slot=\"expand\"]').length < 1) {\n                let expandIcon = document.createElement('wje-icon');\n                expandIcon.setAttribute('name', 'chevron-right');\n                expandIcon.setAttribute('slot', 'expand');\n\n                this.appendChild(expandIcon);\n            }\n\n            if (this.querySelectorAll('[slot=\"collapse\"]').length < 1) {\n                let collapseIcon = document.createElement('wje-icon');\n                collapseIcon.setAttribute('name', 'chevron-down');\n                collapseIcon.setAttribute('slot', 'collapse');\n\n                this.appendChild(collapseIcon);\n            }\n\n            let expandSlot = document.createElement('slot');\n            expandSlot.setAttribute('name', 'expand');\n\n            let collapseSlot = document.createElement('slot');\n            collapseSlot.setAttribute('name', 'collapse');\n\n            button.appendChild(expandSlot);\n            button.appendChild(collapseSlot);\n        }\n\n        item.appendChild(button);\n\n        if (this.selection === 'multiple') item.appendChild(checkbox);\n\n        label.appendChild(slotElement);\n        item.appendChild(label);\n\n        native.appendChild(item);\n        native.appendChild(children);\n\n        fragment.appendChild(native);\n\n        this.checkbox = checkbox;\n        this.native = native;\n        this.button = button;\n        this.childrenElement = children;\n        this.childrenSlot = slot;\n\n        return fragment;\n    }\n\n    /**\n     * Executes operations to be performed after the draw action is completed.\n     * If the state indicates it is expanded, toggles its children.\n     * Additionally, sets up an event listener on the button element to handle toggling children upon click.\n     * @returns {void} Does not return a value.\n     */\n    afterDraw() {\n        if (this.expanded) this.toggleChildren();\n\n        this.button.addEventListener('click', this.toggleChildren.bind(this));\n    }\n\n    /**\n     * Determines if the current item is a nested item within a tree structure.\n     * Checks if the item's parent element exists and is also a tree item.\n     * @returns {boolean} Returns true if the current item is a nested tree item; otherwise, false.\n     */\n    isNestedItem() {\n        const parent = this.parentElement;\n        return !!parent && this.isTreeItem(parent);\n    }\n\n    /**\n     * Checks whether the given node is a tree item.\n     * @param {object} node The node to check.\n     * @returns {boolean} Returns true if the node is an Element and has a class name of 'TreeItem', otherwise false.\n     */\n    isTreeItem(node) {\n        return node instanceof Element && node.className === 'TreeItem';\n    }\n\n    /**\n     * Toggles the visibility state of the children element and updates the class of the parent element.\n     * The method toggles the 'open' class on the children elements and the 'expanded' class on the parent element,\n     * effectively showing or hiding the children and indicating the expanded state.\n     * @returns {void} Does not return a value.\n     */\n    toggleChildren() {\n        this.childrenElement.classList.toggle('open');\n        this.native.classList.toggle('expanded');\n    }\n\n    /**\n     * Retrieves the child items from the `childrenSlot` that match specific criteria.\n     * @param {object} [options] Configuration options.\n     * @param {boolean} [options.includeDisabled] Determines whether disabled items should be included in the result. Defaults to true.\n     * @returns {Array} An array of child items that are valid tree items and meet the criteria specified in the options.\n     */\n    getChildrenItems(options = {}) {\n        const includeDisabled = options.includeDisabled ?? true; // Ak nie je zadané, predvolená hodnota je true\n\n        if (!this.childrenSlot) {\n            return []; // Ak `childrenSlot` neexistuje, vráti prázdne pole\n        }\n\n        return [...this.childrenSlot.assignedElements({ flatten: true })].filter(\n            (item) => this.isTreeItem(item) && (includeDisabled || !item.disabled)\n        );\n    }\n\n    /**\n     * Retrieves all descendant children of the current object in a flattened array structure.\n     * @param {object} [options] An optional object specifying filters or configurations for retrieving children.\n     * @returns {Array} An array containing all children and their descendants in a flat structure.\n     */\n    getAllChildrenFlat(options = {}) {\n        const directChildren = this.getChildrenItems(options);\n        return directChildren.flatMap((child) => [child, ...child.getAllChildrenFlat(options)]);\n    }\n}\n","import TreeItem from './tree-item.element.js';\n\nexport default TreeItem;\n\nTreeItem.define('wje-tree-item', TreeItem);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-tree-item.js","sources":["../packages/wje-tree-item/tree-item.element.js","../packages/wje-tree-item/tree-item.js"],"sourcesContent":["import { default as WJElement, WjElementUtils, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `wje-tree-item` is a custom web component used as a child of the `wje-tree`.\n * It represents a node within a tree structure, capable of nesting other items.\n * @summary Represents a single item in a tree structure.\n * @documentation https://elements.webjet.sk/components/tree-item\n * @status stable\n * @augments {HTMLElement}\n * @slot - Default slot for rendering the tree item's content (e.g., text or custom elements).\n * @csspart native - The native container of the tree item.\n * @cssproperty [--wje-tree-item-indent=var(--wje-spacing-large)] - Defines the indentation for nested tree items.\n * @cssproperty [--wje-tree-item-indent-guid-width=0px] - Specifies the width of the guide element shown next to a tree item.\n * @cssproperty [--wje-tree-item-border-radius=var(--wje-border-radius-medium)] - Sets the border radius of the tree item’s container.\n * @tag wje-tree-item\n */\n\nexport default class TreeItem extends WJElement {\n    /**\n     * Creates an instance of Toast.\n     */\n    constructor() {\n        super();\n\n        this._selection = 'single';\n    }\n\n    /**\n     * Sets the expanded state of the element. When set to a truthy value,\n     * the 'expanded' attribute will be added to the element. When set to a falsy\n     * value, the 'expanded' attribute will be removed.\n     * @param {boolean} value A boolean value indicating whether the\n     * element should be expanded (true) or collapsed (false).\n     */\n    set expanded(value) {\n        if (value) {\n            this.setAttribute('expanded', '');\n        } else {\n            this.removeAttribute('expanded');\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'expanded' state for the current element.\n     * This getter checks whether the 'expanded' attribute is present on the element.\n     * If the attribute exists, it returns true, representing that the element is expanded.\n     * Otherwise, it returns false, indicating that the element is not expanded.\n     * @returns {boolean} True if the 'expanded' attribute is present, false otherwise.\n     */\n    get expanded() {\n        return this.hasAttribute('expanded');\n    }\n\n    /**\n     * Sets the 'selected' attribute of the element. Removes the attribute if the provided value is falsy; otherwise, sets it.\n     * @param {boolean} value The value indicating whether the element should have the 'selected' attribute.\n     */\n    set selected(value) {\n        this.removeAttribute('selected');\n\n        if (value) this.setAttribute('selected', '');\n    }\n\n    /**\n     * Getter method for determining if the 'selected' attribute is present on the element.\n     * @returns {boolean} Returns true if the 'selected' attribute is present, otherwise false.\n     */\n    get selected() {\n        return this.hasAttribute('selected');\n    }\n\n    /**\n     * Sets the selection mode for the component.\n     * @param {string} value The selection mode to apply. Defaults to 'single'\n     * if no value is provided. Possible options may be\n     * specific to the implementation of the component\n     * (e.g., 'single', 'multiple').\n     */\n    set selection(value) {\n        this._selection = value || 'single';\n    }\n\n    /**\n     * Retrieves the current selection.\n     * @returns {*} The value of the current selection.\n     */\n    get selection() {\n        return this._selection;\n    }\n\n    /**\n     * Sets or removes the 'indeterminate' attribute based on the provided value.\n     * This can be used to visually indicate an indeterminate state for elements like checkboxes.\n     * @param {boolean} value A boolean indicating whether to set the element to an indeterminate state.\n     * If true, the 'indeterminate' attribute is added to the element; if false, the attribute is removed.\n     */\n    set indeterminate(value) {\n        this.removeAttribute('indeterminate');\n\n        if (value) this.setAttribute('indeterminate', '');\n    }\n\n    /**\n     * Retrieves the state of the indeterminate attribute.\n     * @returns {boolean} True if the indeterminate attribute is present, otherwise false.\n     */\n    get indeterminate() {\n        return this.hasAttribute('indeterminate');\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'TreeItem';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Setup attributes for the Button element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\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 ['selected', 'indeterminate'];\n    }\n\n    /**\n     * Handles updates when observed attributes of the element are changed.\n     * Updates the checkbox state based on changes to the \"selected\" or \"indeterminate\" attributes.\n     * @param {string} name The name of the attribute that was changed.\n     * @param {string|null} oldValue The previous value of the attribute before the change.\n     * @param {string|null} newValue The new value of the attribute after the change.\n     * @returns {void}\n     */\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (name === 'selected') {\n            // this.checkbox.removeAttribute('indeterminate');\n            if (this.selected) {\n                this.checkbox.checked = true;\n            } else {\n                this.checkbox.checked = false;\n            }\n        }\n\n        if (name === 'indeterminate' && !this.selected) {\n            this.checkbox.removeAttribute('indeterminate');\n            this.checkbox.removeAttribute('checked');\n\n            if (this.indeterminate) this.checkbox.setAttribute('indeterminate', '');\n        }\n    }\n\n    /**\n     * Custom logic executed before the draw process begins.\n     * Determines and sets the appropriate slot if the current item is nested.\n     * @returns {void} No return value.\n     */\n    beforeDraw() {\n        if (this.isNestedItem()) this.slot = 'children';\n\n        if(this.closest('wje-tree')?.hasAttribute('slot-hover-visible'))\n            this.setAttribute('slot-hover-visible', '');\n    }\n\n    /**\n     * Creates and returns a document fragment representing the structure of a tree item component.\n     * The method constructs the DOM elements including the native container, indentation, toggle button,\n     * selection checkbox, label, and children container, along with their respective slots and attributes.\n     * It dynamically handles the creation of expand and collapse icons, as well as appending slots for\n     * child components.\n     * @returns {DocumentFragment} A fragment containing the complete tree item structure to be rendered.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-tree-item', this.selection === 'multiple' ? 'multiple' : 'single');\n\n        let slotStart = document.createElement('slot');\n        slotStart.setAttribute('name', 'start');\n\n        let item = document.createElement('div');\n        item.setAttribute('part', 'item');\n        item.classList.add('item');\n\n        let indent = document.createElement('div');\n        indent.classList.add('indent');\n\n        let button = document.createElement('div');\n        button.classList.add('toggle');\n\n        let checkbox = document.createElement('wje-checkbox');\n        if (this.selected) checkbox.setAttribute('checked', '');\n\n        let label = document.createElement('div');\n        label.classList.add('content');\n\n        let slotElement = document.createElement('slot');\n\n        let children = document.createElement('div');\n        children.classList.add('children');\n\n        let slot = document.createElement('slot');\n        slot.setAttribute('name', 'children');\n        children.appendChild(slot);\n\n        let slotEnd = document.createElement('slot');\n        slotEnd.setAttribute('name', 'end');\n\n        item.appendChild(slotStart);\n        item.appendChild(indent);\n\n        if (this.querySelectorAll(':scope > wje-tree-item').length > 0) {\n            if (this.querySelectorAll('[slot=\"expand\"]').length < 1) {\n                let expandIcon = document.createElement('wje-icon');\n                expandIcon.setAttribute('name', 'chevron-right');\n                expandIcon.setAttribute('slot', 'expand');\n\n                this.appendChild(expandIcon);\n            }\n\n            if (this.querySelectorAll('[slot=\"collapse\"]').length < 1) {\n                let collapseIcon = document.createElement('wje-icon');\n                collapseIcon.setAttribute('name', 'chevron-down');\n                collapseIcon.setAttribute('slot', 'collapse');\n\n                this.appendChild(collapseIcon);\n            }\n\n            let expandSlot = document.createElement('slot');\n            expandSlot.setAttribute('name', 'expand');\n\n            let collapseSlot = document.createElement('slot');\n            collapseSlot.setAttribute('name', 'collapse');\n\n            button.appendChild(expandSlot);\n            button.appendChild(collapseSlot);\n        }\n\n        item.appendChild(button);\n\n        if (this.selection === 'multiple') item.appendChild(checkbox);\n\n        label.appendChild(slotElement);\n        item.appendChild(label);\n        item.appendChild(slotEnd);\n\n        native.appendChild(item);\n        native.appendChild(children);\n\n        fragment.appendChild(native);\n\n        this.checkbox = checkbox;\n        this.native = native;\n        this.button = button;\n        this.childrenElement = children;\n        this.childrenSlot = slot;\n\n        return fragment;\n    }\n\n    /**\n     * Executes operations to be performed after the draw action is completed.\n     * If the state indicates it is expanded, toggles its children.\n     * Additionally, sets up an event listener on the button element to handle toggling children upon click.\n     * @returns {void} Does not return a value.\n     */\n    afterDraw() {\n        if (this.expanded) this.toggleChildren();\n\n        this.button.addEventListener('click', this.toggleChildren.bind(this));\n    }\n\n    /**\n     * Determines if the current item is a nested item within a tree structure.\n     * Checks if the item's parent element exists and is also a tree item.\n     * @returns {boolean} Returns true if the current item is a nested tree item; otherwise, false.\n     */\n    isNestedItem() {\n        const parent = this.parentElement;\n        return !!parent && this.isTreeItem(parent);\n    }\n\n    /**\n     * Checks whether the given node is a tree item.\n     * @param {object} node The node to check.\n     * @returns {boolean} Returns true if the node is an Element and has a class name of 'TreeItem', otherwise false.\n     */\n    isTreeItem(node) {\n        return node instanceof Element && node.className === 'TreeItem';\n    }\n\n    /**\n     * Toggles the visibility state of the children element and updates the class of the parent element.\n     * The method toggles the 'open' class on the children elements and the 'expanded' class on the parent element,\n     * effectively showing or hiding the children and indicating the expanded state.\n     * @returns {void} Does not return a value.\n     */\n    toggleChildren() {\n        this.childrenElement.classList.toggle('open');\n        this.native.classList.toggle('expanded');\n    }\n\n    /**\n     * Retrieves the child items from the `childrenSlot` that match specific criteria.\n     * @param {object} [options] Configuration options.\n     * @param {boolean} [options.includeDisabled] Determines whether disabled items should be included in the result. Defaults to true.\n     * @returns {Array} An array of child items that are valid tree items and meet the criteria specified in the options.\n     */\n    getChildrenItems(options = {}) {\n        const includeDisabled = options.includeDisabled ?? true; // Ak nie je zadané, predvolená hodnota je true\n\n        if (!this.childrenSlot) {\n            return []; // Ak `childrenSlot` neexistuje, vráti prázdne pole\n        }\n\n        return [...this.childrenSlot.assignedElements({ flatten: true })].filter(\n            (item) => this.isTreeItem(item) && (includeDisabled || !item.disabled)\n        );\n    }\n\n    /**\n     * Retrieves all descendant children of the current object in a flattened array structure.\n     * @param {object} [options] An optional object specifying filters or configurations for retrieving children.\n     * @returns {Array} An array containing all children and their descendants in a flat structure.\n     */\n    getAllChildrenFlat(options = {}) {\n        const directChildren = this.getChildrenItems(options);\n        return directChildren.flatMap((child) => [child, ...child.getAllChildrenFlat(options)]);\n    }\n}\n","import TreeItem from './tree-item.element.js';\n\nexport default TreeItem;\n\nTreeItem.define('wje-tree-item', TreeItem);\n"],"names":[],"mappings":"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"}

package/dist/wje-tree.js

@@ -82,6 +82,8 @@ class Tree extends WJElement {
       item.selection = this.selection;
       this.getExpandCollapseIcon(item, "expand");
       this.getExpandCollapseIcon(item, "collapse");
+      this.getSlots(item, "start");
+      this.getSlots(item, "end");
     });
   }
   /**
@@ -131,7 +133,17 @@ class Tree extends WJElement {
       return;
     }
     let iconClone = icon.cloneNode(true);
-    item.appendChild(iconClone);
+    item.append(iconClone);
+  }
+  getSlots(item, slotName) {
+    var _a;
+    let slot = (_a = this.querySelector("template")) == null ? void 0 : _a.content.querySelector(`[slot="${slotName}"]`);
+    if (!slot) {
+      console.warn(`Icon with slot "${slotName}" was not found.`);
+      return;
+    }
+    let slotClone = slot.cloneNode(true);
+    item.append(slotClone);
   }
   /**
    * Updates the state of a checkbox, syncing the state both upwards to parent elements

package/dist/wje-tree.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-tree.js","sources":["../packages/wje-tree/tree.element.js","../packages/wje-tree/tree.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Tree` is a custom web component that represents a hierarchical tree structure.\n * It extends from `WJElement`.\n * @summary This element visually represents a tree structure, supporting single or multiple selection modes and hierarchy management.\n * @documentation https://elements.webjet.sk/components/tree\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native container part of the tree.\n * @slot - The default slot to place `wje-tree-item` child components.\n * @tag wje-tree\n */\n\nexport default class Tree extends WJElement {\n    /**\n     * Creates an instance of Toast.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the selection attribute for the element.\n     * @param {string} value The value to set as the selection attribute.\n     */\n    set selection(value) {\n        this.setAttribute('selection', value);\n    }\n\n    /**\n     * Gets the current selection mode for the element.\n     * If no selection is explicitly set, it defaults to 'single'.\n     * @returns {string} The current selection mode, either set by the element's attribute or the default value 'single'.\n     */\n    get selection() {\n        return this.getAttribute('selection') || 'single';\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Tree';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Setup attributes for the Button element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * A method called before the drawing or rendering process of tree items.\n     * It iterates through all `wje-tree-item` elements, updating their selection state\n     * and managing their expand/collapse icons accordingly.\n     * @returns {void} This method does not return a value.\n     */\n    beforeDraw() {\n        const items = this.querySelectorAll('wje-tree-item');\n        items?.forEach((item) => {\n            item.selection = this.selection;\n\n            this.getExpandCollapseIcon(item, 'expand');\n            this.getExpandCollapseIcon(item, 'collapse');\n        });\n    }\n\n    /**\n     * Draw method for the toast notification.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-tree');\n\n        let slot = document.createElement('slot');\n\n        native.appendChild(slot);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Called after the draw process of the component is completed.\n     * Typically used to add event listeners or perform operations\n     * that are dependent on the component's drawn state.\n     * @returns {void} This method does not return a value.\n     */\n    afterDraw() {\n        this.addEventListener('click', this.handleClick);\n    }\n\n    beforeDisconnect() {\n        this.removeEventListener('click', this.handleClick);\n    }\n\n    /**\n     * Handles the click event triggered by the user interaction.\n     * Identifies the closest tree item element to the event target and sets it\n     * as the selected item. Ensures that only one item is selected at a time, resetting\n     * the selection state for all other items.\n     * @param {Event} e The click event object.\n     */\n    handleClick = (e) => {\n        e.preventDefault();\n\n        let selectedItem = e.target.closest('wje-tree-item');\n        let isClickButton = e.composedPath().some((el) => el?.classList?.contains('toggle'));\n        if (isClickButton) return;\n\n        if (this.selection === 'single') {\n            if (selectedItem) {\n                for (let item of this.getAllItems()) {\n                    item.selected = item === selectedItem;\n                }\n            }\n        } else if (this.selection === 'multiple') {\n            // let children = selectedItem.getAllChildrenFlat();\n            selectedItem.selected = !selectedItem.selected;\n\n            this.updateCheckboxState(selectedItem);\n        }\n    };\n\n    /**\n     * Retrieves all items that match the selector 'wje-tree-item' within the current context.\n     * @returns {Array<Element>} An array of all matching DOM elements.\n     */\n    getAllItems() {\n        return [...this.querySelectorAll('wje-tree-item')];\n    }\n\n    /**\n     * Retrieves and appends an expand/collapse icon to a given item based on the provided status.\n     * @param {HTMLElement} item The DOM element to which the icon will be appended.\n     * @param {string} status The status indicating which icon to retrieve (e.g., \"expand\" or \"collapse\").\n     * @returns {void} This method does not return a value. If the icon matching the given status is not found, a warning is logged.\n     */\n    getExpandCollapseIcon(item, status) {\n        let icon = this.querySelector('template')?.content.querySelector(`[slot=\"${status}\"]`);\n        if (!icon) {\n            console.warn(`Icon with slot \"${status}\" was not found.`);\n            return;\n        }\n\n        let iconClone = icon.cloneNode(true);\n        item.appendChild(iconClone);\n    }\n\n    /**\n     * Updates the state of a checkbox, syncing the state both upwards to parent elements\n     * and downwards to child elements as necessary.\n     * @param {object} changedItem The specific item whose checkbox state has changed.\n     * @param {boolean} [isInitialSync] Indicates whether the state update is part of the initial synchronization process.\n     * @returns {void} This method does not return a value.\n     */\n    updateCheckboxState(changedItem, isInitialSync = false) {\n        this.isInitialSync = isInitialSync;\n        this.propagateStateDownwards(changedItem);\n        this.propagateStateUpwards(changedItem);\n    }\n\n    /**\n     * Updates the state of the parent item based on the state of its child items.\n     * Recursively propagates changes up to all parent items to reflect the selection\n     * or indeterminate state accurately.\n     * @param {object} item The current tree item whose parent state needs to be updated.\n     * It is expected to have properties `selected`, `indeterminate`,\n     * and a method `getChildrenItems({ includeDisabled: boolean })`.\n     * @returns {void} This method does not return a value.\n     */\n    updateParentState(item) {\n        const children = item.getChildrenItems({ includeDisabled: false });\n\n        if (children.length) {\n            const areAllChildrenChecked = children.every((child) => child.selected);\n            const areSomeChildrenChecked = children.some((child) => child.selected);\n            const areSomeChildrenIndeterminate = children.some((child) => child.indeterminate);\n\n            item.selected = areAllChildrenChecked;\n            item.indeterminate = areSomeChildrenIndeterminate || (areSomeChildrenChecked && !areAllChildrenChecked);\n        } else {\n            item.indeterminate = false;\n        }\n\n        const parent = item.parentElement?.closest('wje-tree-item');\n        if (parent) {\n            this.updateParentState(parent);\n        }\n    }\n\n    /**\n     * Propagates the state changes of an item upwards through its ancestors in the hierarchy.\n     * Calls the `updateParentState` method for each parent element until no parent exists.\n     * @param {HTMLElement} item The current item whose state to propagate to its parent.\n     * @returns {void} This method does not return a value.\n     */\n    propagateStateUpwards(item) {\n        const parent = item.parentElement?.closest('wje-tree-item');\n\n        if (parent) {\n            this.updateParentState(parent);\n            this.propagateStateUpwards(parent);\n        }\n    }\n\n    /**\n     * Propagates the selected state of an item to its children recursively. Depending on the `isInitialSync` flag,\n     * it also determines how the state should be applied to the child items and updates the parent state if needed.\n     * @param {object} item The item whose state is being propagated to its child items. The item must have properties\n     * such as `selected` and methods like `getChildrenItems` to retrieve its child elements.\n     * @returns {void} This method does not return a value.\n     */\n    propagateStateDownwards(item) {\n        const isChecked = item.selected;\n\n        item.getChildrenItems().forEach((child) => {\n            child.selected = this.isInitialSync ? isChecked || child.selected : !child.disabled && isChecked;\n            this.propagateStateDownwards(child);\n        });\n\n        if (this.isInitialSync) {\n            this.updateParentState(item);\n        }\n    }\n}\n","import Tree from './tree.element.js';\n\nexport default Tree;\n\nTree.define('wje-tree', Tree);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-tree.js","sources":["../packages/wje-tree/tree.element.js","../packages/wje-tree/tree.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Tree` is a custom web component that represents a hierarchical tree structure.\n * It extends from `WJElement`.\n * @summary This element visually represents a tree structure, supporting single or multiple selection modes and hierarchy management.\n * @documentation https://elements.webjet.sk/components/tree\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native container part of the tree.\n * @slot - The default slot to place `wje-tree-item` child components.\n * @tag wje-tree\n */\n\nexport default class Tree extends WJElement {\n    /**\n     * Creates an instance of Toast.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the selection attribute for the element.\n     * @param {string} value The value to set as the selection attribute.\n     */\n    set selection(value) {\n        this.setAttribute('selection', value);\n    }\n\n    /**\n     * Gets the current selection mode for the element.\n     * If no selection is explicitly set, it defaults to 'single'.\n     * @returns {string} The current selection mode, either set by the element's attribute or the default value 'single'.\n     */\n    get selection() {\n        return this.getAttribute('selection') || 'single';\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Tree';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Setup attributes for the Button element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * A method called before the drawing or rendering process of tree items.\n     * It iterates through all `wje-tree-item` elements, updating their selection state\n     * and managing their expand/collapse icons accordingly.\n     * @returns {void} This method does not return a value.\n     */\n    beforeDraw() {\n        const items = this.querySelectorAll('wje-tree-item');\n        items?.forEach((item) => {\n            item.selection = this.selection;\n\n            this.getExpandCollapseIcon(item, 'expand');\n            this.getExpandCollapseIcon(item, 'collapse');\n\n            this.getSlots(item, 'start');\n            this.getSlots(item, 'end');\n        });\n    }\n\n    /**\n     * Draw method for the toast notification.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-tree');\n\n        let slot = document.createElement('slot');\n\n        native.appendChild(slot);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Called after the draw process of the component is completed.\n     * Typically used to add event listeners or perform operations\n     * that are dependent on the component's drawn state.\n     * @returns {void} This method does not return a value.\n     */\n    afterDraw() {\n        this.addEventListener('click', this.handleClick);\n    }\n\n    beforeDisconnect() {\n        this.removeEventListener('click', this.handleClick);\n    }\n\n    /**\n     * Handles the click event triggered by the user interaction.\n     * Identifies the closest tree item element to the event target and sets it\n     * as the selected item. Ensures that only one item is selected at a time, resetting\n     * the selection state for all other items.\n     * @param {Event} e The click event object.\n     */\n    handleClick = (e) => {\n        e.preventDefault();\n\n        let selectedItem = e.target.closest('wje-tree-item');\n        let isClickButton = e.composedPath().some((el) => el?.classList?.contains('toggle'));\n        if (isClickButton) return;\n\n        if (this.selection === 'single') {\n            if (selectedItem) {\n                for (let item of this.getAllItems()) {\n                    item.selected = item === selectedItem;\n                }\n            }\n        } else if (this.selection === 'multiple') {\n            // let children = selectedItem.getAllChildrenFlat();\n            selectedItem.selected = !selectedItem.selected;\n\n            this.updateCheckboxState(selectedItem);\n        }\n    };\n\n    /**\n     * Retrieves all items that match the selector 'wje-tree-item' within the current context.\n     * @returns {Array<Element>} An array of all matching DOM elements.\n     */\n    getAllItems() {\n        return [...this.querySelectorAll('wje-tree-item')];\n    }\n\n    /**\n     * Retrieves and appends an expand/collapse icon to a given item based on the provided status.\n     * @param {HTMLElement} item The DOM element to which the icon will be appended.\n     * @param {string} status The status indicating which icon to retrieve (e.g., \"expand\" or \"collapse\").\n     * @returns {void} This method does not return a value. If the icon matching the given status is not found, a warning is logged.\n     */\n    getExpandCollapseIcon(item, status) {\n        let icon = this.querySelector('template')?.content.querySelector(`[slot=\"${status}\"]`);\n        if (!icon) {\n            console.warn(`Icon with slot \"${status}\" was not found.`);\n            return;\n        }\n\n        let iconClone = icon.cloneNode(true);\n        item.append(iconClone);\n    }\n\n    getSlots(item, slotName) {\n        let slot = this.querySelector('template')?.content.querySelector(`[slot=\"${slotName}\"]`);\n        if (!slot) {\n            console.warn(`Icon with slot \"${slotName}\" was not found.`);\n            return;\n        }\n\n        let slotClone = slot.cloneNode(true);\n        item.append(slotClone);\n    }\n\n    /**\n     * Updates the state of a checkbox, syncing the state both upwards to parent elements\n     * and downwards to child elements as necessary.\n     * @param {object} changedItem The specific item whose checkbox state has changed.\n     * @param {boolean} [isInitialSync] Indicates whether the state update is part of the initial synchronization process.\n     * @returns {void} This method does not return a value.\n     */\n    updateCheckboxState(changedItem, isInitialSync = false) {\n        this.isInitialSync = isInitialSync;\n        this.propagateStateDownwards(changedItem);\n        this.propagateStateUpwards(changedItem);\n    }\n\n    /**\n     * Updates the state of the parent item based on the state of its child items.\n     * Recursively propagates changes up to all parent items to reflect the selection\n     * or indeterminate state accurately.\n     * @param {object} item The current tree item whose parent state needs to be updated.\n     * It is expected to have properties `selected`, `indeterminate`,\n     * and a method `getChildrenItems({ includeDisabled: boolean })`.\n     * @returns {void} This method does not return a value.\n     */\n    updateParentState(item) {\n        const children = item.getChildrenItems({ includeDisabled: false });\n\n        if (children.length) {\n            const areAllChildrenChecked = children.every((child) => child.selected);\n            const areSomeChildrenChecked = children.some((child) => child.selected);\n            const areSomeChildrenIndeterminate = children.some((child) => child.indeterminate);\n\n            item.selected = areAllChildrenChecked;\n            item.indeterminate = areSomeChildrenIndeterminate || (areSomeChildrenChecked && !areAllChildrenChecked);\n        } else {\n            item.indeterminate = false;\n        }\n\n        const parent = item.parentElement?.closest('wje-tree-item');\n        if (parent) {\n            this.updateParentState(parent);\n        }\n    }\n\n    /**\n     * Propagates the state changes of an item upwards through its ancestors in the hierarchy.\n     * Calls the `updateParentState` method for each parent element until no parent exists.\n     * @param {HTMLElement} item The current item whose state to propagate to its parent.\n     * @returns {void} This method does not return a value.\n     */\n    propagateStateUpwards(item) {\n        const parent = item.parentElement?.closest('wje-tree-item');\n\n        if (parent) {\n            this.updateParentState(parent);\n            this.propagateStateUpwards(parent);\n        }\n    }\n\n    /**\n     * Propagates the selected state of an item to its children recursively. Depending on the `isInitialSync` flag,\n     * it also determines how the state should be applied to the child items and updates the parent state if needed.\n     * @param {object} item The item whose state is being propagated to its child items. The item must have properties\n     * such as `selected` and methods like `getChildrenItems` to retrieve its child elements.\n     * @returns {void} This method does not return a value.\n     */\n    propagateStateDownwards(item) {\n        const isChecked = item.selected;\n\n        item.getChildrenItems().forEach((child) => {\n            child.selected = this.isInitialSync ? isChecked || child.selected : !child.disabled && isChecked;\n            this.propagateStateDownwards(child);\n        });\n\n        if (this.isInitialSync) {\n            this.updateParentState(item);\n        }\n    }\n}\n","import Tree from './tree.element.js';\n\nexport default Tree;\n\nTree.define('wje-tree', Tree);\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
-  "version": "0.1.183",
+  "version": "0.1.184",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",