wj-elements 0.7.3 → 0.7.5

package/dist/wje-store.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-store.js","sources":["../packages/wje-store/default-store-actions.js","../packages/wje-store/pubsub.js","../packages/wje-store/store.js"],"sourcesContent":["const addAction = (stateValueName) => {\n\treturn (payload2) => {\n\t\treturn {\n\t\t\ttype: `${stateValueName}/ADD`,\n\t\t\tpayload: structuredClone(payload2),\n\t\t\tactionType: 'ADD',\n\t\t};\n\t};\n};\n\nconst addManyAction = (stateValueName) => {\n\treturn (payload2) => {\n\t\treturn {\n\t\t\ttype: `${stateValueName}/ADD_MANY`,\n\t\t\tpayload: structuredClone(payload2),\n\t\t\tactionType: 'ADD_MANY',\n\t\t};\n\t};\n};\n\nconst updateAction = (stateValueName) => {\n\treturn (payload2) => {\n\t\treturn {\n\t\t\ttype: `${stateValueName}/UPDATE`,\n\t\t\tpayload: structuredClone(payload2),\n\t\t\tactionType: 'UPDATE',\n\t\t};\n\t};\n};\n\nconst deleteAction = (stateValueName) => {\n\treturn (payload2) => {\n\t\treturn {\n\t\t\ttype: `${stateValueName}/DELETE`,\n\t\t\tpayload: structuredClone(payload2),\n\t\t\tactionType: 'DELETE',\n\t\t};\n\t};\n};\n\nconst loadAction = (stateValueName) => {\n\treturn (payload2) => {\n\t\treturn {\n\t\t\ttype: `${stateValueName}/LOAD`,\n\t\t\tpayload: structuredClone(payload2),\n\t\t\tactionType: 'LOAD',\n\t\t};\n\t};\n};\n\nexport { addAction, deleteAction, loadAction, updateAction, addManyAction };\n","export default class PubSub {\n    constructor() {\n        this.events = {};\n    }\n\n    /**\n     * Either create a new event instance for passed `event` name.\n     * or push a new callback into the existing collection.\n     * @param {string} event The event name to subscribe to\n     * @param {Function} callback The callback function to subscribe to the event\n     * @returns {number} A count of callbacks for this event\n     * @memberof PubSub\n     */\n    subscribe(event, callback) {\n        let self = this;\n        let index;\n\n        // If there's not already an event with this name set in our collection\n        // go ahead and create a new one and set it with an empty array, so we don't\n        // have to type check it later down-the-line\n        if (!self.events.hasOwnProperty(event)) {\n            self.events[event] = [];\n        }\n\n        index = self.events[event].push(callback) - 1;\n\n        return {\n            unsubscribe() {\n                self.events[event].splice(self.events[event].indexOf(callback), 1);\n            },\n        };\n    }\n\n    /**\n     * If the passed event has callbacks attached to it, loop through each one and call it.\n     * @param {string} event The name of the event to publish\n     * @param {any} state The current state to pass to the callbacks\n     * @param {object} [newData] The new data to pass to the callbacks\n     * @param {object} [oldData] The old data to pass to the callbacks\n     * @returns {Array} The results of the callbacks for this event, or an empty array if no event exists\n     * @memberof PubSub\n     */\n    publish(event, state, newData = {}, oldData = {}) {\n        let self = this;\n\n        // There's no event to publish to, so bail out\n        if (!self.events.hasOwnProperty(event)) {\n            return [];\n        }\n\n        // Get each subscription and call its callback with the passed data\n        return self.events[event].map((callback) => callback(state, oldData, newData));\n    }\n}\n","import * as defaultStoreActions from './default-store-actions.js';\nimport PubSub from './pubsub.js';\n\n/**\n * @summary A reactive state management system with support for reducers, events, and state immutability.\n * @description The `Store` class provides a centralized way to manage application state with actions, reducers, and event subscriptions. It supports handling both object and array state, with flexibility for custom reducers.\n * @example\n * const store = new Store({\n *   reducer: (state, action) => { ... },\n *   state: { user: { id: 1, name: 'John' } }\n * });\n * store.subscribe('user', (newState, oldState) => console.log('User changed:', newState));\n * store.dispatch({ type: 'user/UPDATE', payload: { name: 'Jane' } });\n */\nclass Store {\n    _state;\n    _reducer;\n    events;\n    status;\n\n    /**\n     * Initializes the store with optional reducer and state.\n     * @param {object} [params] Configuration for the store.\n     * @param {Function} [params.reducer] Initial reducer function for handling state updates.\n     * @param {object} [params.state] Initial state of the store.\n     */\n    constructor(params = {}) {\n        this._isPause = false;\n        this._state = {};\n        this._reducer = () => {\n            return {};\n        };\n\n        // A status enum to set during actions and mutations\n        this.status = 'resting';\n\n        // Attach our PubSub module as an `events` element\n        this.events = new PubSub();\n\n        if (params?.hasOwnProperty('reducer')) {\n            this._reducer = params.reducer;\n        }\n\n        this.refreshProxy(params?.state);\n    }\n\n    /**\n     * Dispatches an action to update the state by invoking the reducer function.\n     * @param {object} action The action object containing the type and any associated payload.\n     * @param {string} action.type The type of the action being dispatched.\n     * @returns {boolean} Returns `true` after the state has been successfully updated.\n     * @example\n     * const action = { type: 'INCREMENT', payload: { amount: 1 } };\n     * store.dispatch(action);\n     */\n    dispatch(action) {\n        // Create a console group which will contain the logs from our Proxy etc\n        // console.groupCollapsed(`ACTION: ${action.type}`);\n\n        // Let anything that's watching the status know that we're dispatching an action\n        this.status = 'action';\n\n        let newState = this._reducer(this._state, action);\n\n        this.status = 'mutation';\n        // Merge the old and new together to create a new state and set it\n        this._state = Object.assign(this._state, newState);\n\n        // Close our console group to keep things nice and neat\n        // console.groupEnd();\n\n        return true;\n    }\n\n    /**\n     * Retrieves a deep copy of the current state to ensure immutability.\n     * @returns {object} A deep copy of the current state.\n     * @example\n     * const currentState = store.getState();\n     * console.log(currentState);\n     */\n    getState() {\n        return JSON.parse(JSON.stringify(this._state));\n    }\n\n    /**\n     * Subscribes to a specific event with a provided callback function.\n     * @param {string} eventName The name of the event to subscribe to.\n     * @param {Function} callbackFn The function to execute when the event is triggered.\n     * @returns {Function} - A function to unsubscribe from the event.\n     * @example\n     * const unsubscribe = store.subscribe('stateChange', (newState) => {\n     *   console.log('State changed:', newState);\n     * });\n     * // Later, to unsubscribe\n     * unsubscribe();\n     */\n    subscribe(eventName, callbackFn) {\n        return this.events.subscribe(eventName, callbackFn);\n    }\n\n    /**\n     * Unsubscribes from a specific event by removing all associated listeners.\n     * @param {string} eventName The name of the event to unsubscribe from.\n     * @returns {void}\n     * @example\n     * store.unsubscribe('stateChange');\n     */\n    unsubscribe(eventName) {\n        delete this.events[eventName];\n    }\n\n    /**\n     * Pauses event handling or other operations.\n     * @returns {this} Returns the current instance for method chaining.\n     * @example\n     * store.pause().doSomething();\n     */\n    pause() {\n        this._isPause = true;\n        return this;\n    }\n\n    /**\n     * Resumes event handling or other operations.\n     * @param {*} [val] Optional value to pass while resuming.\n     * @returns {this} Returns the current instance for method chaining.\n     * @example\n     * store.play().doSomething();\n     */\n    play(val) {\n        this._isPause = false;\n        return this;\n    }\n\n    /**\n     * Merges a new reducer function into the existing reducer for a specific state property.\n     * @param {string} stateValueName The key in the state object that the new reducer will manage.\n     * @param {Function} newReducer The reducer function to handle updates for the specified state property.\n     * @returns {void}\n     * @example\n     * const newReducer = (newState, currentState) => ({ ...currentState, ...newState });\n     * store.mergeReducers('user', newReducer);\n     */\n    mergeReducers(stateValueName, newReducer) {\n        let reducerCopy = this._reducer;\n        this._reducer = (state, newState) => {\n            let preState = reducerCopy(state, newState);\n            return {\n                ...preState,\n                [stateValueName]: newReducer(newState, state[stateValueName]),\n            };\n        };\n    }\n\n    /**\n     * Synchronizes each entry in an array with the store by defining or updating state entries.\n     * @param {string} storeKey The key prefix used for defining or updating store entries.\n     * @param {Array<object>} [array] The array of entries to be synchronized with the store.\n     * @param {string} [identificator] The property name used as a unique identifier for each entry.\n     * @returns {void}\n     * @example\n     * const data = [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }];\n     * store.makeEveryArrayEntryAsStoreState('items', data, 'id');\n     */\n    makeEveryArrayEntryAsStoreState(storeKey, array = [], identificator = 'id') {\n        array.forEach((entry) => {\n            if (this.getState().hasOwnProperty(`${storeKey}-${entry[identificator]}`)) {\n                this.dispatch(defaultStoreActions.updateAction(`${storeKey}-${entry[identificator]}`)(entry));\n            } else {\n                this.define(\n                    `${storeKey}-${entry.id || entry.source || entry[identificator]}`,\n                    entry,\n                    null,\n                    identificator\n                );\n            }\n        });\n    }\n\n    /**\n     * Defines a new state variable and associates it with a reducer.\n     * @param {string} stateValueName The name of the state variable to define.\n     * @param {*} defaultValue The initial value of the state variable.\n     * @param {Function|null} [reducer] An optional reducer function to manage updates for the state variable.\n     * @param {string} [key] The key used to identify individual entries if the state value is an array or object.\n     * @returns {void}\n     * @example\n     * // Define a new state with a custom reducer\n     * store.define('user', { id: 1, name: 'John Doe' }, (newState, currentState) => ({ ...currentState, ...newState }));\n     * @example\n     * // Define a new state with default array reducer\n     * store.define('items', [], null, 'itemId');\n     */\n    define(stateValueName, defaultValue, reducer, key = 'id') {\n        if (this._state.hasOwnProperty(stateValueName)) {\n            console.warn(`STATE už obsahuje premennú ${stateValueName},ktorú sa pokúšate pridať`);\n            return;\n        }\n\n        if (reducer instanceof Function) {\n            this.mergeReducers(stateValueName, reducer);\n        } else {\n            if (defaultValue instanceof Array) {\n                this.mergeReducers(stateValueName, this.createArrayReducer(stateValueName, key));\n            } else {\n                this.mergeReducers(stateValueName, this.createObjectReducer(stateValueName, key));\n            }\n        }\n\n        this.refreshProxy({\n            ...this._state,\n            [stateValueName]: defaultValue,\n        });\n    }\n\n    /**\n     * Refreshes the state by wrapping it in a Proxy to track changes and notify subscribers.\n     * @param {object} newState The new state object to be set. Defaults to an empty object if not provided.\n     * @returns {void}\n     * @example\n     * store.refreshProxy({ user: { id: 1, name: 'John Doe' } });\n     */\n    refreshProxy(newState) {\n        // Set our state to be a Proxy. We are setting the default state by\n        // checking the params and defaulting to an empty object if no default\n        // state is passed in\n        this._state = new Proxy(newState || {}, {\n            set: (state, key, value) => {\n                if (JSON.stringify(state[key]) === JSON.stringify(value)) {\n                    return true;\n                }\n\n                //Set the value as we would normally\n                let oldState = state[key];\n                state[key] = value;\n\n                // TODO vieme to rozšíríť a subscripe sa len na zmenu určitej časti statu\n                // Publish the change event for the components that are listening\n                if (!this._isPause) this.events.publish(key, this._state, state[key], oldState);\n\n                // Give the user a little telling off if they set a value directly\n                if (this.status !== 'mutation') {\n                    console.warn(`You should use a mutation to set ${key}`);\n                }\n\n                // Reset the status ready for the next operation\n                this.status = 'resting';\n\n                return true;\n            },\n        });\n    }\n\n    /**\n     * Creates a reducer function to manage an object state.\n     * @param {string} stateValueName The name of the state property this reducer manages.\n     * @returns {Function} A reducer function that handles `ADD`, `UPDATE`, and `DELETE` actions for the specified state property.\n     * @throws {Error} If the payload is an array, an error is logged since the reducer is designed for object state management.\n     * @example\n     * const userReducer = store.createObjectReducer('user');\n     * const newState = userReducer({ type: 'user/ADD', payload: { id: 1, name: 'John Doe' } });\n     */\n    createObjectReducer(stateValueName) {\n        return (action, state = {}) => {\n            if (\n                Array.isArray(action.payload) &&\n                (action.type === `${stateValueName}/ADD` || action.type === `${stateValueName}/UPDATE`)\n            ) {\n                console.error(`Nemôžete pridať do objektu ${stateValueName} hodnotu, ktorá je pole.`);\n            }\n\n            const actionType = action.type.split('/')[1];\n\n            if (!['ADD', 'UPDATE', 'DELETE'].includes(actionType)) {\n                console.error(\n                    `Nemôžete použiť akciu ${actionType} na objekt. Správne akcie pre objekt sú: ADD, UPDATE, DELETE`\n                );\n            }\n\n            switch (action.type) {\n                case `${stateValueName}/ADD`:\n                    return {\n                        ...action.payload,\n                    };\n                case `${stateValueName}/UPDATE`:\n                    return {\n                        ...state,\n                        ...action.payload,\n                    };\n                case `${stateValueName}/DELETE`:\n                    return {};\n                default:\n                    return state;\n            }\n        };\n    }\n\n    /**\n     * Creates a reducer function to manage an array state.\n     * @param {string} stateValueName The name of the state property this reducer manages.\n     * @param {string} key The unique key used to identify items in the array for updates and deletions.\n     * @returns {Function} A reducer function that handles `ADD`, `ADD_MANY`, `UPDATE`, `DELETE`, and `LOAD` actions for the specified state property.\n     * @throws {Error} If `action.payload` is not an array when required.\n     * @example\n     * const itemsReducer = store.createArrayReducer('items', 'id');\n     * const newState = itemsReducer({ type: 'items/ADD', payload: { id: 1, name: 'Item 1' } });\n     */\n    createArrayReducer(stateValueName, key) {\n        return (action, state = []) => {\n            if (action.actionType === 'LOAD' && action.type?.includes(stateValueName)) {\n                if (!Array.isArray(action.payload)) {\n                    console.error(`Snažíte sa použiť \"LOAD\" akciu na pole, ale payload nie je pole.`);\n\n                    return [...state];\n                }\n            }\n\n            switch (action.type) {\n                case `${stateValueName}/ADD`:\n                    if (Array.isArray(action.payload)) {\n                        return [...state, ...action.payload];\n                    } else {\n                        return [...state, action.payload];\n                    }\n                case `${stateValueName}/ADD_MANY`:\n                    return [...state, ...action.payload];\n                case `${stateValueName}/UPDATE`:\n                    if (state.some((obj) => obj[key] === action.payload[key])) {\n                        return [\n                            ...state.map((obj) => {\n                                if (obj[key] === action.payload[key]) {\n                                    return action.payload;\n                                }\n                                return obj;\n                            }),\n                        ];\n                    } else {\n                        return [...state, action.payload];\n                    }\n                case `${stateValueName}/DELETE`:\n                    if (Array.isArray(action.payload)) {\n                        return [\n                            ...state.filter(\n                                (obj) =>\n                                    !action.payload.some(\n                                        (item) =>\n                                            (obj.hasOwnProperty(key) && obj[key] !== item[key]) ||\n                                            (!obj.hasOwnProperty(key) && obj !== item)\n                                    )\n                            ),\n                        ];\n                    }\n\n                    return [\n                        ...state.filter(\n                            (obj) =>\n                                (obj.hasOwnProperty(key) && obj[key] !== action.payload[key]) ||\n                                (!obj.hasOwnProperty(key) && obj !== action.payload)\n                        ),\n                    ];\n\n                case `${stateValueName}/LOAD`:\n                    return [...action.payload];\n                default:\n                    return state;\n            }\n        };\n    }\n}\n\nlet store = new Store();\nexport { store, defaultStoreActions };\n"],"names":["defaultStoreActions.updateAction"],"mappings":"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"}
+{"version":3,"file":"wje-store.js","sources":["../packages/wje-store/default-store-actions.js","../packages/wje-store/pubsub.js","../packages/wje-store/store.js"],"sourcesContent":["const addAction = (stateValueName) => {\n\treturn (payload2) => {\n\t\treturn {\n\t\t\ttype: `${stateValueName}/ADD`,\n\t\t\tpayload: structuredClone(payload2),\n\t\t\tactionType: 'ADD',\n\t\t};\n\t};\n};\n\nconst addManyAction = (stateValueName) => {\n\treturn (payload2) => {\n\t\treturn {\n\t\t\ttype: `${stateValueName}/ADD_MANY`,\n\t\t\tpayload: structuredClone(payload2),\n\t\t\tactionType: 'ADD_MANY',\n\t\t};\n\t};\n};\n\nconst updateAction = (stateValueName) => {\n\treturn (payload2) => {\n\t\treturn {\n\t\t\ttype: `${stateValueName}/UPDATE`,\n\t\t\tpayload: structuredClone(payload2),\n\t\t\tactionType: 'UPDATE',\n\t\t};\n\t};\n};\n\nconst deleteAction = (stateValueName) => {\n\treturn (payload2) => {\n\t\treturn {\n\t\t\ttype: `${stateValueName}/DELETE`,\n\t\t\tpayload: structuredClone(payload2),\n\t\t\tactionType: 'DELETE',\n\t\t};\n\t};\n};\n\nconst loadAction = (stateValueName) => {\n\treturn (payload2) => {\n\t\treturn {\n\t\t\ttype: `${stateValueName}/LOAD`,\n\t\t\tpayload: structuredClone(payload2),\n\t\t\tactionType: 'LOAD',\n\t\t};\n\t};\n};\n\nexport { addAction, deleteAction, loadAction, updateAction, addManyAction };\n","export default class PubSub {\n    constructor() {\n        this.events = {};\n    }\n\n    /**\n     * Either create a new event instance for passed `event` name.\n     * or push a new callback into the existing collection.\n     * @param {string} event The event name to subscribe to\n     * @param {Function} callback The callback function to subscribe to the event\n     * @returns {number} A count of callbacks for this event\n     * @memberof PubSub\n     */\n    subscribe(event, callback) {\n        let self = this;\n        let index;\n\n        // If there's not already an event with this name set in our collection\n        // go ahead and create a new one and set it with an empty array, so we don't\n        // have to type check it later down-the-line\n        if (!self.events.hasOwnProperty(event)) {\n            self.events[event] = [];\n        }\n\n        index = self.events[event].push(callback) - 1;\n\n        return {\n            unsubscribe() {\n                self.events[event].splice(self.events[event].indexOf(callback), 1);\n            },\n        };\n    }\n\n    /**\n     * If the passed event has callbacks attached to it, loop through each one and call it.\n     * @param {string} event The name of the event to publish\n     * @param {any} state The current state to pass to the callbacks\n     * @param {object} [newData] The new data to pass to the callbacks\n     * @param {object} [oldData] The old data to pass to the callbacks\n     * @returns {Array} The results of the callbacks for this event, or an empty array if no event exists\n     * @memberof PubSub\n     */\n    publish(event, state, newData = {}, oldData = {}) {\n        let self = this;\n\n        // There's no event to publish to, so bail out\n        if (!self.events.hasOwnProperty(event)) {\n            return [];\n        }\n\n        // Get each subscription and call its callback with the passed data\n        return self.events[event].map((callback) => callback(state, oldData, newData));\n    }\n}\n","import * as defaultStoreActions from './default-store-actions.js';\nimport PubSub from './pubsub.js';\n\n/**\n * @summary A reactive state management system with support for reducers, events, and state immutability.\n * @description The `Store` class provides a centralized way to manage application state with actions, reducers, and event subscriptions. It supports handling both object and array state, with flexibility for custom reducers.\n * @example\n * const store = new Store({\n *   reducer: (state, action) => { ... },\n *   state: { user: { id: 1, name: 'John' } }\n * });\n * store.subscribe('user', (newState, oldState) => console.log('User changed:', newState));\n * store.dispatch({ type: 'user/UPDATE', payload: { name: 'Jane' } });\n */\nclass Store {\n    _state;\n    _reducer;\n    events;\n    status;\n\n    /**\n     * Initializes the store with optional reducer and state.\n     * @param {object} [params] Configuration for the store.\n     * @param {Function} [params.reducer] Initial reducer function for handling state updates.\n     * @param {object} [params.state] Initial state of the store.\n     */\n    constructor(params = {}) {\n        this._isPause = false;\n        this._state = {};\n        this._reducer = () => {\n            return {};\n        };\n\n        // A status enum to set during actions and mutations\n        this.status = 'resting';\n\n        // Attach our PubSub module as an `events` element\n        this.events = new PubSub();\n\n        if (params?.hasOwnProperty('reducer')) {\n            this._reducer = params.reducer;\n        }\n\n        this.refreshProxy(params?.state);\n    }\n\n    /**\n     * Dispatches an action to update the state by invoking the reducer function.\n     * @param {object} action The action object containing the type and any associated payload.\n     * @param {string} action.type The type of the action being dispatched.\n     * @returns {boolean} Returns `true` after the state has been successfully updated.\n     * @example\n     * const action = { type: 'INCREMENT', payload: { amount: 1 } };\n     * store.dispatch(action);\n     */\n    dispatch(action) {\n        // Create a console group which will contain the logs from our Proxy etc\n        // console.groupCollapsed(`ACTION: ${action.type}`);\n\n        // Let anything that's watching the status know that we're dispatching an action\n        this.status = 'action';\n\n        let newState = this._reducer(this._state, action);\n\n        this.status = 'mutation';\n        // Merge the old and new together to create a new state and set it\n        this._state = Object.assign(this._state, newState);\n\n        // Close our console group to keep things nice and neat\n        // console.groupEnd();\n\n        return true;\n    }\n\n    /**\n     * Retrieves a deep copy of the current state to ensure immutability.\n     * @returns {object} A deep copy of the current state.\n     * @example\n     * const currentState = store.getState();\n     * console.log(currentState);\n     */\n    getState() {\n        return JSON.parse(JSON.stringify(this._state));\n    }\n\n    /**\n     * Subscribes to a specific event with a provided callback function.\n     * @param {string} eventName The name of the event to subscribe to.\n     * @param {Function} callbackFn The function to execute when the event is triggered.\n     * @returns {Function} - A function to unsubscribe from the event.\n     * @example\n     * const unsubscribe = store.subscribe('stateChange', (newState) => {\n     *   console.log('State changed:', newState);\n     * });\n     * // Later, to unsubscribe\n     * unsubscribe();\n     */\n    subscribe(eventName, callbackFn) {\n        return this.events.subscribe(eventName, callbackFn);\n    }\n\n    /**\n     * Unsubscribes from a specific event by removing all associated listeners.\n     * @param {string} eventName The name of the event to unsubscribe from.\n     * @returns {void}\n     * @example\n     * store.unsubscribe('stateChange');\n     */\n    unsubscribe(eventName) {\n        delete this.events[eventName];\n    }\n\n    /**\n     * Pauses event handling or other operations.\n     * @returns {this} Returns the current instance for method chaining.\n     * @example\n     * store.pause().doSomething();\n     */\n    pause() {\n        this._isPause = true;\n        return this;\n    }\n\n    /**\n     * Resumes event handling or other operations.\n     * @param {*} [val] Optional value to pass while resuming.\n     * @returns {this} Returns the current instance for method chaining.\n     * @example\n     * store.play().doSomething();\n     */\n    play(val) {\n        this._isPause = false;\n        return this;\n    }\n\n    /**\n     * Merges a new reducer function into the existing reducer for a specific state property.\n     * @param {string} stateValueName The key in the state object that the new reducer will manage.\n     * @param {Function} newReducer The reducer function to handle updates for the specified state property.\n     * @returns {void}\n     * @example\n     * const newReducer = (newState, currentState) => ({ ...currentState, ...newState });\n     * store.mergeReducers('user', newReducer);\n     */\n    mergeReducers(stateValueName, newReducer) {\n        let reducerCopy = this._reducer;\n        this._reducer = (state, newState) => {\n            let preState = reducerCopy(state, newState);\n            return {\n                ...preState,\n                [stateValueName]: newReducer(newState, state[stateValueName]),\n            };\n        };\n    }\n\n    /**\n     * Synchronizes each entry in an array with the store by defining or updating state entries.\n     * @param {string} storeKey The key prefix used for defining or updating store entries.\n     * @param {Array<object>} [array] The array of entries to be synchronized with the store.\n     * @param {string} [identificator] The property name used as a unique identifier for each entry.\n     * @returns {void}\n     * @example\n     * const data = [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }];\n     * store.makeEveryArrayEntryAsStoreState('items', data, 'id');\n     */\n    makeEveryArrayEntryAsStoreState(storeKey, array = [], identificator = 'id') {\n        array.forEach((entry) => {\n            if (this.getState().hasOwnProperty(`${storeKey}-${entry[identificator]}`)) {\n                this.dispatch(defaultStoreActions.updateAction(`${storeKey}-${entry[identificator]}`)(entry));\n            } else {\n                this.define(\n                    `${storeKey}-${entry.id || entry.source || entry[identificator]}`,\n                    entry,\n                    null,\n                    identificator\n                );\n            }\n        });\n    }\n\n    /**\n     * Defines a new state variable and associates it with a reducer.\n     * @param {string} stateValueName The name of the state variable to define.\n     * @param {*} defaultValue The initial value of the state variable.\n     * @param {Function|null} [reducer] An optional reducer function to manage updates for the state variable.\n     * @param {string} [key] The key used to identify individual entries if the state value is an array or object.\n     * @returns {void}\n     * @example\n     * // Define a new state with a custom reducer\n     * store.define('user', { id: 1, name: 'John Doe' }, (newState, currentState) => ({ ...currentState, ...newState }));\n     * @example\n     * // Define a new state with default array reducer\n     * store.define('items', [], null, 'itemId');\n     */\n    define(stateValueName, defaultValue, reducer, key = 'id') {\n        if (this._state.hasOwnProperty(stateValueName)) {\n            console.warn(`STATE už obsahuje premennú ${stateValueName},ktorú sa pokúšate pridať`);\n            return;\n        }\n\n        if (reducer instanceof Function) {\n            this.mergeReducers(stateValueName, reducer);\n        } else {\n            if (defaultValue instanceof Array) {\n                this.mergeReducers(stateValueName, this.createArrayReducer(stateValueName, key));\n            } else {\n                this.mergeReducers(stateValueName, this.createObjectReducer(stateValueName, key));\n            }\n        }\n\n        this.refreshProxy({\n            ...this._state,\n            [stateValueName]: defaultValue,\n        });\n    }\n\n    /**\n     * Refreshes the state by wrapping it in a Proxy to track changes and notify subscribers.\n     * @param {object} newState The new state object to be set. Defaults to an empty object if not provided.\n     * @returns {void}\n     * @example\n     * store.refreshProxy({ user: { id: 1, name: 'John Doe' } });\n     */\n    refreshProxy(newState) {\n        // Set our state to be a Proxy. We are setting the default state by\n        // checking the params and defaulting to an empty object if no default\n        // state is passed in\n        this._state = new Proxy(newState || {}, {\n            set: (state, key, value) => {\n                if (JSON.stringify(state[key]) === JSON.stringify(value)) {\n                    return true;\n                }\n\n                //Set the value as we would normally\n                let oldState = state[key];\n                state[key] = value;\n\n                // TODO vieme to rozšíríť a subscripe sa len na zmenu určitej časti statu\n                // Publish the change event for the components that are listening\n                if (!this._isPause) this.events.publish(key, this._state, state[key], oldState);\n\n                // Give the user a little telling off if they set a value directly\n                if (this.status !== 'mutation') {\n                    console.warn(`You should use a mutation to set ${key}`);\n                }\n\n                // Reset the status ready for the next operation\n                this.status = 'resting';\n\n                return true;\n            },\n        });\n    }\n\n    /**\n     * Creates a reducer function to manage an object state.\n     * @param {string} stateValueName The name of the state property this reducer manages.\n     * @returns {Function} A reducer function that handles `ADD`, `UPDATE`, and `DELETE` actions for the specified state property.\n     * @throws {Error} If the payload is an array, an error is logged since the reducer is designed for object state management.\n     * @example\n     * const userReducer = store.createObjectReducer('user');\n     * const newState = userReducer({ type: 'user/ADD', payload: { id: 1, name: 'John Doe' } });\n     */\n    createObjectReducer(stateValueName) {\n        return (action, state = {}) => {\n            if (\n                Array.isArray(action.payload) &&\n                (action.type === `${stateValueName}/ADD` || action.type === `${stateValueName}/UPDATE`)\n            ) {\n                console.error(`Nemôžete pridať do objektu ${stateValueName} hodnotu, ktorá je pole.`);\n            }\n\n            const actionType = action.type.split('/')[1];\n\n            if (\n                action.type.startsWith(`${stateValueName}/`) &&\n                !['ADD', 'UPDATE', 'DELETE'].includes(actionType)\n            ) {\n                console.error(\n                    `Nemôžete použiť akciu ${actionType} na objekt. Správne akcie pre objekt sú: ADD, UPDATE, DELETE`\n                );\n            }\n\n            switch (action.type) {\n                case `${stateValueName}/ADD`:\n                    return {\n                        ...action.payload,\n                    };\n                case `${stateValueName}/UPDATE`:\n                    return {\n                        ...state,\n                        ...action.payload,\n                    };\n                case `${stateValueName}/DELETE`:\n                    return {};\n                default:\n                    return state;\n            }\n        };\n    }\n\n    /**\n     * Creates a reducer function to manage an array state.\n     * @param {string} stateValueName The name of the state property this reducer manages.\n     * @param {string} key The unique key used to identify items in the array for updates and deletions.\n     * @returns {Function} A reducer function that handles `ADD`, `ADD_MANY`, `UPDATE`, `DELETE`, and `LOAD` actions for the specified state property.\n     * @throws {Error} If `action.payload` is not an array when required.\n     * @example\n     * const itemsReducer = store.createArrayReducer('items', 'id');\n     * const newState = itemsReducer({ type: 'items/ADD', payload: { id: 1, name: 'Item 1' } });\n     */\n    createArrayReducer(stateValueName, key) {\n        return (action, state = []) => {\n            if (action.actionType === 'LOAD' && action.type?.includes(stateValueName)) {\n                if (!Array.isArray(action.payload)) {\n                    console.error(`Snažíte sa použiť \"LOAD\" akciu na pole, ale payload nie je pole.`);\n\n                    return [...state];\n                }\n            }\n\n            switch (action.type) {\n                case `${stateValueName}/ADD`:\n                    if (Array.isArray(action.payload)) {\n                        return [...state, ...action.payload];\n                    } else {\n                        return [...state, action.payload];\n                    }\n                case `${stateValueName}/ADD_MANY`:\n                    return [...state, ...action.payload];\n                case `${stateValueName}/UPDATE`:\n                    if (state.some((obj) => obj[key] === action.payload[key])) {\n                        return [\n                            ...state.map((obj) => {\n                                if (obj[key] === action.payload[key]) {\n                                    return action.payload;\n                                }\n                                return obj;\n                            }),\n                        ];\n                    } else {\n                        return [...state, action.payload];\n                    }\n                case `${stateValueName}/DELETE`:\n                    if (Array.isArray(action.payload)) {\n                        return [\n                            ...state.filter(\n                                (obj) =>\n                                    !action.payload.some(\n                                        (item) =>\n                                            (obj.hasOwnProperty(key) && obj[key] !== item[key]) ||\n                                            (!obj.hasOwnProperty(key) && obj !== item)\n                                    )\n                            ),\n                        ];\n                    }\n\n                    return [\n                        ...state.filter(\n                            (obj) =>\n                                (obj.hasOwnProperty(key) && obj[key] !== action.payload[key]) ||\n                                (!obj.hasOwnProperty(key) && obj !== action.payload)\n                        ),\n                    ];\n\n                case `${stateValueName}/LOAD`:\n                    return [...action.payload];\n                default:\n                    return state;\n            }\n        };\n    }\n}\n\nlet store = new Store();\nexport { store, defaultStoreActions };\n"],"names":["defaultStoreActions.updateAction"],"mappings":"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"}

package/dist/wje-tree-item.js

@@ -2,10 +2,10 @@ 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 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\n            &:hover {\n                background-color: var(--wje-tree-item-background-hover);\n                color: var(--wje-tree-item-color-hover);\n            }\n\n            .indent {\n                display: block;\n                width: calc(var(--wje-tree-item-indent, var(--wje-spacing-medium)) * var(--wje-tree-item-depth, 0));\n                flex-shrink: 0;\n            }\n\n            .toggle {\n                font-size: var(--wje-tree-item-font-size);\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\n            wje-checkbox {\n                font-size: var(--wje-tree-item-font-size);\n                margin: 0;\n            }\n\n            .content {\n                font-size: var(--wje-tree-item-font-size);\n            }\n\n            slot {\n                display: flex;\n                align-items: center;\n            }\n\n            slot:not([name])::slotted(wje-icon) {\n                margin-right: var(--wje-spacing-2x-small);\n            }\n\n            slot[name='end'] {\n                margin-inline-start: auto;\n            }\n        }\n        .children {\n            display: none;\n            &.open {\n                font-size: var(--wje-tree-item-font-size);\n                display: block;\n\n                ::before {\n                    content: '';\n                    position: absolute;\n                    top: var(--wje-tree-item-indent);\n                    bottom: 5px;\n                    left: calc(\n                        (var(--wje-tree-item-indent, var(--wje-spacing-medium)) * var(--wje-tree-item-depth, 0)) +\n                        1em -\n                        (var(--wje-spacing-3x-small) * 2) -\n                        (var(--wje-tree-item-indent-guid-width) / 2)\n                    );\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";
+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            position: relative;\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            border-width: var(--wje-tree-item-border-width);\n            border-style: var(--wje-tree-item-border-style);\n            border-color: var(--wje-tree-item-border-color);\n            background-color: var(--wje-tree-item-background);\n            color: var(--wje-tree-item-color);\n\n            &::before,\n            &::after {\n                content: '';\n                position: absolute;\n                box-sizing: border-box;\n                pointer-events: none;\n                opacity: 0;\n                z-index: 2;\n            }\n\n            &:hover {\n                border-color: var(--wje-tree-item-border-color-hover);\n                background-color: var(--wje-tree-item-background-hover);\n                color: var(--wje-tree-item-color-hover);\n            }\n\n            .indent {\n                display: block;\n                width: calc(var(--wje-tree-item-indent) * var(--wje-tree-item-depth));\n                flex-shrink: 0;\n            }\n\n            .toggle {\n                font-size: var(--wje-tree-item-font-size);\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\n            wje-checkbox {\n                font-size: var(--wje-tree-item-font-size);\n                margin: 0;\n            }\n\n            .content {\n                font-size: var(--wje-tree-item-font-size);\n            }\n\n            slot {\n                display: flex;\n                align-items: center;\n            }\n\n            slot:not([name])::slotted(wje-icon) {\n                margin-right: var(--wje-spacing-2x-small);\n            }\n\n            slot[name='end'] {\n                margin-inline-start: auto;\n            }\n\n            slot[name='start']::slotted(.wje-tree-drag-handle) {\n                cursor: grab;\n            }\n        }\n        .children {\n            display: none;\n            &.open {\n                font-size: var(--wje-tree-item-font-size);\n                display: block;\n\n                ::before {\n                    content: '';\n                    position: absolute;\n                    top: var(--wje-tree-item-indent);\n                    bottom: 5px;\n                    left: calc(\n                        (var(--wje-tree-item-indent) * var(--wje-tree-item-depth)) +\n                        1em -\n                        (var(--wje-spacing-3x-small) * 2) -\n                        (var(--wje-tree-item-indent-guid-width) / 2)\n                    );\n                    border-inline-end-width: var(--wje-tree-item-indent-guid-width);\n                    border-inline-end-style: var(--wje-tree-item-indent-guid-style);\n                    border-inline-end-color: var(--wje-tree-item-indent-guid-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        border-color: var(--wje-tree-item-border-color-selected);\n        background-color: var(--wje-tree-item-background-selected);\n        color: var(--wje-tree-item-color-selected);\n    }\n}\n\n:host(.wje-tree-dragging) {\n    opacity: 0.35;\n\n    .item {\n        slot[name='start']::slotted(.wje-tree-drag-handle) {\n            cursor: grabbing;\n        }\n    }\n}\n\n:host(.wje-tree-drop-before) {\n    .item {\n        &::before {\n            inset-inline: 0;\n            top: -1px;\n            height: var(--wje-tree-item-drop-line-width);\n            background-color: var(--wje-tree-item-drop-color);\n            border-radius: var(--wje-tree-item-drop-line-border-radius);\n            opacity: 1;\n        }\n    }\n}\n\n:host(.wje-tree-drop-after) {\n    .item {\n        &::after {\n            inset-inline: 0;\n            bottom: -1px;\n            height: var(--wje-tree-item-drop-line-width);\n            background-color: var(--wje-tree-item-drop-color);\n            border-radius: var(--wje-tree-item-drop-line-border-radius);\n            opacity: 1;\n        }\n    }\n}\n\n:host(.wje-tree-drop-inside) {\n    .item {\n        &::before {\n            inset: 0;\n            border-width: var(--wje-tree-item-drop-border-width);\n            border-style: var(--wje-tree-item-drop-border-style);\n            border-color: var(--wje-tree-item-drop-border-color);\n            border-radius: var(--wje-tree-item-drop-border-radius);\n            opacity: 1;\n        }\n    }\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.
+   * Creates an instance of TreeItem.
    */
   constructor() {
     super();
@@ -115,7 +115,7 @@ class TreeItem extends WJElement {
    * @returns {Array<string>}
    */
   static get observedAttributes() {
-    return ["selected", "indeterminate"];
+    return ["selected", "indeterminate", "expanded"];
   }
   /**
    * Handles updates when observed attributes of the element are changed.
@@ -126,6 +126,10 @@ class TreeItem extends WJElement {
    * @returns {void}
    */
   attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "expanded") {
+      this.setChildrenExpanded(this.expanded, { syncAttribute: false });
+      return;
+    }
     if (!this.checkbox) {
       this.syncAria();
       return;
@@ -249,7 +253,7 @@ class TreeItem extends WJElement {
    * @returns {void} Does not return a value.
    */
   afterDraw() {
-    if (this.expanded) this.toggleChildren();
+    this.setChildrenExpanded(this.expanded, { syncAttribute: false });
     this.button.addEventListener("click", this.toggleChildren.bind(this));
     this.setAttribute("tabindex", "0");
     this.syncAria();
@@ -280,10 +284,10 @@ class TreeItem extends WJElement {
   /**
    * Checks whether the given node is a tree item.
    * @param {object} node The node to check.
-   * @returns {boolean} Returns true if the node is an Element and has a class name of 'TreeItem', otherwise false.
+   * @returns {boolean} Returns true when the node is a tree item element.
    */
   isTreeItem(node) {
-    return node instanceof Element && node.className === "TreeItem";
+    return node instanceof Element && node.localName === "wje-tree-item";
   }
   /**
    * Toggles the visibility state of the children element and updates the class of the parent element.
@@ -292,8 +296,24 @@ class TreeItem extends WJElement {
    * @returns {void} Does not return a value.
    */
   toggleChildren() {
-    this.childrenElement.classList.toggle("open");
-    this.native.classList.toggle("expanded");
+    this.setChildrenExpanded(!this.childrenElement.classList.contains("open"));
+  }
+  /**
+   * Sets the rendered children visibility and optionally mirrors it to the expanded attribute.
+   * @param {boolean} expanded Whether child items should be visible.
+   * @param {object} [options] Configuration for attribute syncing.
+   * @param {boolean} [options.syncAttribute] Mirrors the visual state to the host attribute when true.
+   * @returns {void}
+   */
+  setChildrenExpanded(expanded, options = {}) {
+    var _a, _b;
+    const syncAttribute = options.syncAttribute ?? true;
+    (_a = this.childrenElement) == null ? void 0 : _a.classList.toggle("open", expanded);
+    (_b = this.native) == null ? void 0 : _b.classList.toggle("expanded", expanded);
+    if (syncAttribute) {
+      if (expanded) this.setAttribute("expanded", "");
+      else this.removeAttribute("expanded");
+    }
     this.syncAria();
   }
   /**

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        this.syncAria();\n    }\n\n    connectedCallback() {\n        super.connectedCallback?.();\n        this.syncNestingState();\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 (!this.checkbox) {\n            this.syncAria();\n            return;\n        }\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        this.syncAria();\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        this.syncNestingState();\n\n        if(this.closest('wje-tree')?.hasAttribute('slot-hover-visible'))\n            this.setAttribute('slot-hover-visible', '');\n    }\n\n    /**\n     * Synchronizes the nesting-related state on the host element.\n     * Sets the \"slot\" to children for nested items and updates\n     * the nesting depth used to compute visual indentation.\n     * @returns {void}\n     */\n    syncNestingState() {\n        const depth = this.getNestingDepth();\n        this.style.setProperty('--wje-tree-item-depth', String(depth));\n\n        if (depth > 0) {\n            this.slot = 'children';\n        } else if (this.getAttribute('slot') === 'children') {\n            this.removeAttribute('slot');\n        }\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.setAttribute('part', 'label');\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        this.setAttribute('tabindex', '0');\n        this.syncAria();\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     * Calculates nesting depth based on ancestor tree items.\n     * Root items have depth 0, direct children depth 1, etc.\n     * @returns {number}\n     */\n    getNestingDepth() {\n        let depth = 0;\n        let current = this.parentElement;\n\n        while (current) {\n            if (this.isTreeItem(current)) depth += 1;\n            current = current.parentElement;\n        }\n\n        return depth;\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        this.syncAria();\n    }\n\n    /**\n     * Syncs ARIA attributes on the host element.\n     */\n    syncAria() {\n        const hasChildren = this.querySelectorAll(':scope > wje-tree-item').length > 0;\n        const expanded = hasChildren ? this.native?.classList?.contains('expanded') : undefined;\n        if (this.selection === 'multiple') {\n            const checked = this.indeterminate ? 'mixed' : (this.selected ? 'true' : 'false');\n            this.setAriaState({\n                role: 'treeitem',\n                checked,\n                expanded,\n            });\n        } else {\n            this.setAriaState({\n                role: 'treeitem',\n                selected: this.selected,\n                expanded,\n            });\n        }\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        const assigned = this.childrenSlot\n            ? this.childrenSlot.assignedElements({ flatten: true })\n            : [];\n        const direct = assigned.length\n            ? assigned\n            : Array.from(this.querySelectorAll(':scope > wje-tree-item'));\n\n        return direct.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-indent-guid-style=solid] - Defines the guide border style for nested tree items.\n * @cssproperty [--wje-tree-item-indent-guid-color=var(--wje-border-color)] - Defines the guide border color for nested tree items.\n * @cssproperty [--wje-tree-item-border-radius=var(--wje-border-radius-medium)] - Sets the border radius of the tree item's container.\n * @cssproperty [--wje-tree-item-border-width=0px] - Sets the border width of the tree item row.\n * @cssproperty [--wje-tree-item-border-style=solid] - Sets the border style of the tree item row.\n * @cssproperty [--wje-tree-item-border-color=transparent] - Sets the border color of the tree item row.\n * @cssproperty [--wje-tree-item-border-color-hover=transparent] - Sets the border color of the hovered tree item row.\n * @cssproperty [--wje-tree-item-border-color-selected=transparent] - Sets the border color of the selected tree item row.\n * @cssproperty [--wje-tree-item-drop-color=var(--wje-color-primary)] - Sets the color of reorder drop indicators.\n * @cssproperty [--wje-tree-item-drop-line-width=2px] - Sets the thickness of before/after reorder drop indicators.\n * @cssproperty [--wje-tree-item-drop-line-border-radius=var(--wje-border-radius-pill)] - Sets the radius of before/after reorder drop indicators.\n * @cssproperty [--wje-tree-item-drop-border-width=1px] - Sets the width of the inside reorder drop border.\n * @cssproperty [--wje-tree-item-drop-border-style=solid] - Sets the style of the inside reorder drop border.\n * @cssproperty [--wje-tree-item-drop-border-color=var(--wje-tree-item-drop-color)] - Sets the color of the inside reorder drop border.\n * @cssproperty [--wje-tree-item-drop-border-radius=inherit] - Sets the radius of the inside reorder drop border.\n * @tag wje-tree-item\n */\n\nexport default class TreeItem extends WJElement {\n    /**\n     * Creates an instance of TreeItem.\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        this.syncAria();\n    }\n\n    connectedCallback() {\n        super.connectedCallback?.();\n        this.syncNestingState();\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', 'expanded'];\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 === 'expanded') {\n            this.setChildrenExpanded(this.expanded, { syncAttribute: false });\n            return;\n        }\n\n        if (!this.checkbox) {\n            this.syncAria();\n            return;\n        }\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        this.syncAria();\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        this.syncNestingState();\n\n        if (this.closest('wje-tree')?.hasAttribute('slot-hover-visible'))\n            this.setAttribute('slot-hover-visible', '');\n    }\n\n    /**\n     * Synchronizes the nesting-related state on the host element.\n     * Sets the \"slot\" to children for nested items and updates\n     * the nesting depth used to compute visual indentation.\n     * @returns {void}\n     */\n    syncNestingState() {\n        const depth = this.getNestingDepth();\n        this.style.setProperty('--wje-tree-item-depth', String(depth));\n\n        if (depth > 0) {\n            this.slot = 'children';\n        } else if (this.getAttribute('slot') === 'children') {\n            this.removeAttribute('slot');\n        }\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.setAttribute('part', 'label');\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        this.setChildrenExpanded(this.expanded, { syncAttribute: false });\n\n        this.button.addEventListener('click', this.toggleChildren.bind(this));\n        this.setAttribute('tabindex', '0');\n        this.syncAria();\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     * Calculates nesting depth based on ancestor tree items.\n     * Root items have depth 0, direct children depth 1, etc.\n     * @returns {number}\n     */\n    getNestingDepth() {\n        let depth = 0;\n        let current = this.parentElement;\n\n        while (current) {\n            if (this.isTreeItem(current)) depth += 1;\n            current = current.parentElement;\n        }\n\n        return depth;\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 when the node is a tree item element.\n     */\n    isTreeItem(node) {\n        return node instanceof Element && node.localName === 'wje-tree-item';\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.setChildrenExpanded(!this.childrenElement.classList.contains('open'));\n    }\n\n    /**\n     * Sets the rendered children visibility and optionally mirrors it to the expanded attribute.\n     * @param {boolean} expanded Whether child items should be visible.\n     * @param {object} [options] Configuration for attribute syncing.\n     * @param {boolean} [options.syncAttribute] Mirrors the visual state to the host attribute when true.\n     * @returns {void}\n     */\n    setChildrenExpanded(expanded, options = {}) {\n        const syncAttribute = options.syncAttribute ?? true;\n\n        this.childrenElement?.classList.toggle('open', expanded);\n        this.native?.classList.toggle('expanded', expanded);\n\n        if (syncAttribute) {\n            if (expanded) this.setAttribute('expanded', '');\n            else this.removeAttribute('expanded');\n        }\n\n        this.syncAria();\n    }\n\n    /**\n     * Syncs ARIA attributes on the host element.\n     */\n    syncAria() {\n        const hasChildren = this.querySelectorAll(':scope > wje-tree-item').length > 0;\n        const expanded = hasChildren ? this.native?.classList?.contains('expanded') : undefined;\n        if (this.selection === 'multiple') {\n            const checked = this.indeterminate ? 'mixed' : (this.selected ? 'true' : 'false');\n            this.setAriaState({\n                role: 'treeitem',\n                checked,\n                expanded,\n            });\n        } else {\n            this.setAriaState({\n                role: 'treeitem',\n                selected: this.selected,\n                expanded,\n            });\n        }\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;\n\n        const assigned = this.childrenSlot\n            ? this.childrenSlot.assignedElements({ flatten: true })\n            : [];\n        const direct = assigned.length\n            ? assigned\n            : Array.from(this.querySelectorAll(':scope > wje-tree-item'));\n\n        return direct.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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"}