wj-elements 0.7.7 → 0.8.0

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 (\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":";;;AAAA,MAAM,YAAY,CAAC,mBAAmB;AACrC,SAAO,CAAC,aAAa;AACpB,WAAO;AAAA,MACN,MAAM,GAAG,cAAc;AAAA,MACvB,SAAS,gBAAgB,QAAQ;AAAA,MACjC,YAAY;AAAA,IACf;AAAA,EACC;AACD;AAEA,MAAM,gBAAgB,CAAC,mBAAmB;AACzC,SAAO,CAAC,aAAa;AACpB,WAAO;AAAA,MACN,MAAM,GAAG,cAAc;AAAA,MACvB,SAAS,gBAAgB,QAAQ;AAAA,MACjC,YAAY;AAAA,IACf;AAAA,EACC;AACD;AAEA,MAAM,eAAe,CAAC,mBAAmB;AACxC,SAAO,CAAC,aAAa;AACpB,WAAO;AAAA,MACN,MAAM,GAAG,cAAc;AAAA,MACvB,SAAS,gBAAgB,QAAQ;AAAA,MACjC,YAAY;AAAA,IACf;AAAA,EACC;AACD;AAEA,MAAM,eAAe,CAAC,mBAAmB;AACxC,SAAO,CAAC,aAAa;AACpB,WAAO;AAAA,MACN,MAAM,GAAG,cAAc;AAAA,MACvB,SAAS,gBAAgB,QAAQ;AAAA,MACjC,YAAY;AAAA,IACf;AAAA,EACC;AACD;AAEA,MAAM,aAAa,CAAC,mBAAmB;AACtC,SAAO,CAAC,aAAa;AACpB,WAAO;AAAA,MACN,MAAM,GAAG,cAAc;AAAA,MACvB,SAAS,gBAAgB,QAAQ;AAAA,MACjC,YAAY;AAAA,IACf;AAAA,EACC;AACD;;;;;;;;;AChDe,MAAM,OAAO;AAAA,EACxB,cAAc;AACV,SAAK,SAAS,CAAA;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUA,UAAU,OAAO,UAAU;AACvB,QAAI,OAAO;AAMX,QAAI,CAAC,KAAK,OAAO,eAAe,KAAK,GAAG;AACpC,WAAK,OAAO,KAAK,IAAI,CAAA;AAAA,IACzB;AAEQ,SAAK,OAAO,KAAK,EAAE,KAAK,QAAQ,IAAI;AAE5C,WAAO;AAAA,MACH,cAAc;AACV,aAAK,OAAO,KAAK,EAAE,OAAO,KAAK,OAAO,KAAK,EAAE,QAAQ,QAAQ,GAAG,CAAC;AAAA,MACrE;AAAA,IACZ;AAAA,EACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWA,QAAQ,OAAO,OAAO,UAAU,CAAA,GAAI,UAAU,IAAI;AAC9C,QAAI,OAAO;AAGX,QAAI,CAAC,KAAK,OAAO,eAAe,KAAK,GAAG;AACpC,aAAO,CAAA;AAAA,IACX;AAGA,WAAO,KAAK,OAAO,KAAK,EAAE,IAAI,CAAC,aAAa,SAAS,OAAO,SAAS,OAAO,CAAC;AAAA,EACjF;AACJ;ACvCA,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYR,YAAY,SAAS,IAAI;AAXzB;AACA;AACA;AACA;AASI,SAAK,WAAW;AAChB,SAAK,SAAS,CAAA;AACd,SAAK,WAAW,MAAM;AAClB,aAAO,CAAA;AAAA,IACX;AAGA,SAAK,SAAS;AAGd,SAAK,SAAS,IAAI,OAAM;AAExB,QAAI,iCAAQ,eAAe,YAAY;AACnC,WAAK,WAAW,OAAO;AAAA,IAC3B;AAEA,SAAK,aAAa,iCAAQ,KAAK;AAAA,EACnC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWA,SAAS,QAAQ;AAKb,SAAK,SAAS;AAEd,QAAI,WAAW,KAAK,SAAS,KAAK,QAAQ,MAAM;AAEhD,SAAK,SAAS;AAEd,SAAK,SAAS,OAAO,OAAO,KAAK,QAAQ,QAAQ;AAKjD,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,WAAW;AACP,WAAO,KAAK,MAAM,KAAK,UAAU,KAAK,MAAM,CAAC;AAAA,EACjD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcA,UAAU,WAAW,YAAY;AAC7B,WAAO,KAAK,OAAO,UAAU,WAAW,UAAU;AAAA,EACtD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,YAAY,WAAW;AACnB,WAAO,KAAK,OAAO,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,QAAQ;AACJ,SAAK,WAAW;AAChB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,KAAK,KAAK;AACN,SAAK,WAAW;AAChB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWA,cAAc,gBAAgB,YAAY;AACtC,QAAI,cAAc,KAAK;AACvB,SAAK,WAAW,CAAC,OAAO,aAAa;AACjC,UAAI,WAAW,YAAY,OAAO,QAAQ;AAC1C,aAAO;AAAA,QACH,GAAG;AAAA,QACH,CAAC,cAAc,GAAG,WAAW,UAAU,MAAM,cAAc,CAAC;AAAA,MAC5E;AAAA,IACQ;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYA,gCAAgC,UAAU,QAAQ,CAAA,GAAI,gBAAgB,MAAM;AACxE,UAAM,QAAQ,CAAC,UAAU;AACrB,UAAI,KAAK,WAAW,eAAe,GAAG,QAAQ,IAAI,MAAM,aAAa,CAAC,EAAE,GAAG;AACvE,aAAK,SAASA,aAAiC,GAAG,QAAQ,IAAI,MAAM,aAAa,CAAC,EAAE,EAAE,KAAK,CAAC;AAAA,MAChG,OAAO;AACH,aAAK;AAAA,UACD,GAAG,QAAQ,IAAI,MAAM,MAAM,MAAM,UAAU,MAAM,aAAa,CAAC;AAAA,UAC/D;AAAA,UACA;AAAA,UACA;AAAA,QACpB;AAAA,MACY;AAAA,IACJ,CAAC;AAAA,EACL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBA,OAAO,gBAAgB,cAAc,SAAS,MAAM,MAAM;AACtD,QAAI,KAAK,OAAO,eAAe,cAAc,GAAG;AAC5C,cAAQ,KAAK,8BAA8B,cAAc,2BAA2B;AACpF;AAAA,IACJ;AAEA,QAAI,mBAAmB,UAAU;AAC7B,WAAK,cAAc,gBAAgB,OAAO;AAAA,IAC9C,OAAO;AACH,UAAI,wBAAwB,OAAO;AAC/B,aAAK,cAAc,gBAAgB,KAAK,mBAAmB,gBAAgB,GAAG,CAAC;AAAA,MACnF,OAAO;AACH,aAAK,cAAc,gBAAgB,KAAK,oBAAoB,gBAAgB,GAAG,CAAC;AAAA,MACpF;AAAA,IACJ;AAEA,SAAK,aAAa;AAAA,MACd,GAAG,KAAK;AAAA,MACR,CAAC,cAAc,GAAG;AAAA,IAC9B,CAAS;AAAA,EACL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,aAAa,UAAU;AAInB,SAAK,SAAS,IAAI,MAAM,YAAY,CAAA,GAAI;AAAA,MACpC,KAAK,CAAC,OAAO,KAAK,UAAU;AACxB,YAAI,KAAK,UAAU,MAAM,GAAG,CAAC,MAAM,KAAK,UAAU,KAAK,GAAG;AACtD,iBAAO;AAAA,QACX;AAGA,YAAI,WAAW,MAAM,GAAG;AACxB,cAAM,GAAG,IAAI;AAIb,YAAI,CAAC,KAAK,SAAU,MAAK,OAAO,QAAQ,KAAK,KAAK,QAAQ,MAAM,GAAG,GAAG,QAAQ;AAG9E,YAAI,KAAK,WAAW,YAAY;AAC5B,kBAAQ,KAAK,oCAAoC,GAAG,EAAE;AAAA,QAC1D;AAGA,aAAK,SAAS;AAEd,eAAO;AAAA,MACX;AAAA,IACZ,CAAS;AAAA,EACL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWA,oBAAoB,gBAAgB;AAChC,WAAO,CAAC,QAAQ,QAAQ,OAAO;AAC3B,UACI,MAAM,QAAQ,OAAO,OAAO,MAC3B,OAAO,SAAS,GAAG,cAAc,UAAU,OAAO,SAAS,GAAG,cAAc,YAC/E;AACE,gBAAQ,MAAM,8BAA8B,cAAc,0BAA0B;AAAA,MACxF;AAEA,YAAM,aAAa,OAAO,KAAK,MAAM,GAAG,EAAE,CAAC;AAE3C,UACI,OAAO,KAAK,WAAW,GAAG,cAAc,GAAG,KAC3C,CAAC,CAAC,OAAO,UAAU,QAAQ,EAAE,SAAS,UAAU,GAClD;AACE,gBAAQ;AAAA,UACJ,yBAAyB,UAAU;AAAA,QACvD;AAAA,MACY;AAEA,cAAQ,OAAO,MAAI;AAAA,QACf,KAAK,GAAG,cAAc;AAClB,iBAAO;AAAA,YACH,GAAG,OAAO;AAAA,UAClC;AAAA,QACgB,KAAK,GAAG,cAAc;AAClB,iBAAO;AAAA,YACH,GAAG;AAAA,YACH,GAAG,OAAO;AAAA,UAClC;AAAA,QACgB,KAAK,GAAG,cAAc;AAClB,iBAAO,CAAA;AAAA,QACX;AACI,iBAAO;AAAA,MAC3B;AAAA,IACQ;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYA,mBAAmB,gBAAgB,KAAK;AACpC,WAAO,CAAC,QAAQ,QAAQ,OAAO;AFxTvC;AEyTY,UAAI,OAAO,eAAe,YAAU,YAAO,SAAP,mBAAa,SAAS,kBAAiB;AACvE,YAAI,CAAC,MAAM,QAAQ,OAAO,OAAO,GAAG;AAChC,kBAAQ,MAAM,kEAAkE;AAEhF,iBAAO,CAAC,GAAG,KAAK;AAAA,QACpB;AAAA,MACJ;AAEA,cAAQ,OAAO,MAAI;AAAA,QACf,KAAK,GAAG,cAAc;AAClB,cAAI,MAAM,QAAQ,OAAO,OAAO,GAAG;AAC/B,mBAAO,CAAC,GAAG,OAAO,GAAG,OAAO,OAAO;AAAA,UACvC,OAAO;AACH,mBAAO,CAAC,GAAG,OAAO,OAAO,OAAO;AAAA,UACpC;AAAA,QACJ,KAAK,GAAG,cAAc;AAClB,iBAAO,CAAC,GAAG,OAAO,GAAG,OAAO,OAAO;AAAA,QACvC,KAAK,GAAG,cAAc;AAClB,cAAI,MAAM,KAAK,CAAC,QAAQ,IAAI,GAAG,MAAM,OAAO,QAAQ,GAAG,CAAC,GAAG;AACvD,mBAAO;AAAA,cACH,GAAG,MAAM,IAAI,CAAC,QAAQ;AAClB,oBAAI,IAAI,GAAG,MAAM,OAAO,QAAQ,GAAG,GAAG;AAClC,yBAAO,OAAO;AAAA,gBAClB;AACA,uBAAO;AAAA,cACX,CAAC;AAAA,YAC7B;AAAA,UACoB,OAAO;AACH,mBAAO,CAAC,GAAG,OAAO,OAAO,OAAO;AAAA,UACpC;AAAA,QACJ,KAAK,GAAG,cAAc;AAClB,cAAI,MAAM,QAAQ,OAAO,OAAO,GAAG;AAC/B,mBAAO;AAAA,cACH,GAAG,MAAM;AAAA,gBACL,CAAC,QACG,CAAC,OAAO,QAAQ;AAAA,kBACZ,CAAC,SACI,IAAI,eAAe,GAAG,KAAK,IAAI,GAAG,MAAM,KAAK,GAAG,KAChD,CAAC,IAAI,eAAe,GAAG,KAAK,QAAQ;AAAA,gBACjF;AAAA,cACA;AAAA,YACA;AAAA,UACoB;AAEA,iBAAO;AAAA,YACH,GAAG,MAAM;AAAA,cACL,CAAC,QACI,IAAI,eAAe,GAAG,KAAK,IAAI,GAAG,MAAM,OAAO,QAAQ,GAAG,KAC1D,CAAC,IAAI,eAAe,GAAG,KAAK,QAAQ,OAAO;AAAA,YAC5E;AAAA,UACA;AAAA,QAEgB,KAAK,GAAG,cAAc;AAClB,iBAAO,CAAC,GAAG,OAAO,OAAO;AAAA,QAC7B;AACI,iBAAO;AAAA,MAC3B;AAAA,IACQ;AAAA,EACJ;AACJ;AAEG,IAAC,QAAQ,IAAI,MAAK;"}
+{"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":["updateAction","stateValueName","payload2","type","payload","structuredClone","actionType","PubSub","constructor","this","events","event","callback","self","hasOwnProperty","push","unsubscribe","splice","indexOf","state","newData","oldData","map","store","params","_state","_reducer","status","_isPause","reducer","refreshProxy","action","newState","Object","assign","JSON","parse","stringify","eventName","callbackFn","subscribe","pause","val","newReducer","reducerCopy","storeKey","array","identificator","forEach","entry","getState","dispatch","defaultStoreActions.updateAction","define","id","source","defaultValue","key","console","warn","Function","mergeReducers","Array","createArrayReducer","createObjectReducer","Proxy","set","value","oldState","publish","isArray","error","split","startsWith","includes","some","obj","filter","item"],"mappings":"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"}

package/dist/wje-tab-group.js

@@ -1,385 +1,156 @@
 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 Tab Group ]\n*/\n\n:host {\n    --wje-tab-top: 0;\n    --wje-tab-start: 0;\n    --wje-tab-end: 0;\n    --wje-tab-bottom: 0;\n    width: 100%;\n}\n.native-tab-group {\n    display: flex;\n    flex-direction: column;\n\n    overflow: hidden;\n    position: relative;\n}\n\n.native-tab-group > header {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    min-width: 0;\n    box-sizing: border-box;\n\n    & > nav {\n        display: flex;\n        align-items: center;\n        width: 100%;\n        min-width: 0;\n        box-sizing: border-box;\n        overflow: hidden;\n    }\n}\n\n.native-tab-group > section {\n    width: 100%;\n\n    & > article {\n        scroll-snap-align: start;\n        overflow-y: auto;\n        overscroll-behavior-y: contain;\n    }\n}\n\n/*TOP*/\n:host([variant='top']) {\n    --wje-tab-top: auto !important;\n    --wje-tab-writing-mode: horizontal-tb;\n    .native-tab-group {\n        flex-direction: column;\n    }\n    nav {\n        border-bottom: var(--wje-tab-group-nav-border);\n    }\n}\n\n/*START*/\n:host([variant='start']) {\n    --wje-tab-start: auto !important;\n    --wje-tab-writing-mode: vertical-rl;\n    .native-tab-group {\n        flex-direction: row;\n    }\n    nav {\n        flex-direction: column;\n        border-right: var(--wje-tab-group-nav-border);\n    }\n}\n\n/*END*/\n:host([variant='end']) {\n    --wje-tab-writing-mode: vertical-rl;\n    .native-tab-group {\n        flex-direction: row-reverse;\n    }\n    nav {\n        flex-direction: column;\n        border-left: var(--wje-tab-group-nav-border);\n    }\n}\n\n/*BOTTOM*/\n:host([variant='bottom']) {\n    --wje-tab-bottom: auto !important;\n    --wje-tab-writing-mode: horizontal-tb;\n    .native-tab-group {\n        flex-direction: column-reverse;\n    }\n    nav {\n        border-top: var(--wje-tab-group-nav-border);\n    }\n}\n\n.dropdown-active {\n    wje-button{\n        &::part(native) {\n            color: var(--wje-color-primary-8);\n        }\n    }\n}\n\n.more-tabs {\n    flex: 0 0 auto;\n}\n";
-const _TabGroup = class _TabGroup extends WJElement {
-  /**
-   * Creates an instance of TabGroup.
-   * @class
-   */
+import t from "./wje-element.js";
+const _e = class _e extends t {
   constructor() {
     super();
     __publicField(this, "className", "TabGroup");
-    this._instanceId = ++_TabGroup._instanceId;
-    this._lastNavWidth = null;
-    this._initialized = false;
-    this._moreWidth = 0;
+    this._instanceId = ++_e._instanceId, this._lastNavWidth = null, this._initialized = false, this._moreWidth = 0;
   }
-  /**
-   * Sets the value for the 'variant' attribute of the element.
-   * @param {string} value The value to set for the 'variant' attribute.
-   */
-  set variant(value) {
-    this.setAttribute("variant", value);
-    this.setAriaState({
-      orientation: value === "start" || value === "end" ? "vertical" : "horizontal"
-    });
+  set variant(t2) {
+    this.setAttribute("variant", t2), this.setAriaState({ orientation: "start" === t2 || "end" === t2 ? "vertical" : "horizontal" });
   }
-  /**
-   * Gets the value of the 'variant' attribute.
-   * If the attribute is not set, it defaults to 'top'.
-   * @returns {string} The value of the 'variant' attribute or the default value 'top' if not set.
-   */
   get variant() {
     return this.getAttribute("variant") || "top";
   }
-  /**
-   * Sets the 'type' attribute of the element to the specified value.
-   * @param {string} value The value to set for the 'type' attribute.
-   */
-  set type(value) {
-    this.setAttribute("type", value);
+  set type(t2) {
+    this.setAttribute("type", t2);
   }
-  /**
-   * Retrieves the `type` attribute of the element.
-   * If the `type` attribute is not set, it defaults to `'panel'`.
-   * @returns {string} The value of the `type` attribute or the default value `'panel'`.
-   */
   get type() {
     return this.getAttribute("type") || "panel";
   }
-  /**
-   * Returns the CSS styles for the component.
-   * @static
-   * @returns {CSSStyleSheet}
-   */
   static get cssStyleSheet() {
-    return styles;
+    return ':host{--wje-tab-top: 0;--wje-tab-start: 0;--wje-tab-end: 0;--wje-tab-bottom: 0;width:100%}.native-tab-group{display:flex;flex-direction:column;overflow:hidden;position:relative}.native-tab-group>header{display:flex;flex-direction:column;width:100%;min-width:0;box-sizing:border-box}.native-tab-group>header>nav{display:flex;align-items:center;width:100%;min-width:0;box-sizing:border-box;overflow:hidden}.native-tab-group>section{width:100%}.native-tab-group>section>article{scroll-snap-align:start;overflow-y:auto;overscroll-behavior-y:contain}:host([variant="top"]){--wje-tab-top: auto !important;--wje-tab-writing-mode: horizontal-tb}:host([variant="top"]) .native-tab-group{flex-direction:column}:host([variant="top"]) nav{border-bottom:var(--wje-tab-group-nav-border)}:host([variant="start"]){--wje-tab-start: auto !important;--wje-tab-writing-mode: vertical-rl}:host([variant="start"]) .native-tab-group{flex-direction:row}:host([variant="start"]) nav{flex-direction:column;border-right:var(--wje-tab-group-nav-border)}:host([variant="end"]){--wje-tab-writing-mode: vertical-rl}:host([variant="end"]) .native-tab-group{flex-direction:row-reverse}:host([variant="end"]) nav{flex-direction:column;border-left:var(--wje-tab-group-nav-border)}:host([variant="bottom"]){--wje-tab-bottom: auto !important;--wje-tab-writing-mode: horizontal-tb}:host([variant="bottom"]) .native-tab-group{flex-direction:column-reverse}:host([variant="bottom"]) nav{border-top:var(--wje-tab-group-nav-border)}.dropdown-active wje-button::part(native){color:var(--wje-color-primary-8)}.more-tabs{flex:0 0 auto}';
   }
-  /**
-   * Sets up the attributes for the component.
-   */
   setupAttributes() {
-    this.isShadowRoot = "open";
-    this.setAriaState({
-      role: "tablist",
-      orientation: this.variant === "start" || this.variant === "end" ? "vertical" : "horizontal"
-    });
+    this.isShadowRoot = "open", this.setAriaState({ role: "tablist", orientation: "start" === this.variant || "end" === this.variant ? "vertical" : "horizontal" });
   }
-  /**
-   * Sets up the event listeners before the component is drawn.
-   * This method is called before the component is drawn.
-   * It is used to set up event listeners.
-   */
   beforeDraw() {
-    let activeTabName = location.hash.replace("#", "");
-    if (this.getPanelAllName().includes(activeTabName)) {
-      window.addEventListener("load", (e) => {
-        this.setActiveTab(activeTabName);
-      });
-    }
+    let t2 = location.hash.replace("#", "");
+    this.getPanelAllName().includes(t2) && window.addEventListener("load", (e2) => {
+      this.setActiveTab(t2);
+    });
   }
-  /**
-   * Creates and returns a document fragment containing a structured layout for a tab group.
-   * The tab group layout includes a `header` section with navigational elements,
-   * a `section` element for tab panels, and slots for customization such as additional navigation items,
-   * dropdowns, and more.
-   * The structure comprises:
-   * - A `div` container with relevant styling and part attributes.
-   * - A `header` for tabs, including a slot for navigation (`nav`) and additional tabs in a dropdown (`moreDropdown`).
-   * - A `section` for tab panels with a customizable `slot`.
-   * This function also initializes the `nav` and `moreDropdown` properties for external use.
-   * @returns {DocumentFragment} The completed document fragment containing the tab group layout.
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    native.setAttribute("part", "native");
-    native.classList.add("native-tab-group");
-    let header = document.createElement("header");
-    header.setAttribute("part", "tabs");
-    header.classList.add("scroll-snap-x");
-    let nav = document.createElement("nav");
-    nav.setAttribute("part", "nav");
-    let section = document.createElement("section");
-    section.setAttribute("part", "panels");
-    let slot = document.createElement("slot");
-    let slotNav = document.createElement("slot");
-    slotNav.setAttribute("name", "nav");
-    let icon = document.createElement("wje-icon");
-    icon.setAttribute("name", "dots");
-    let button = document.createElement("wje-button");
-    button.setAttribute("slot", "trigger");
-    button.setAttribute("fill", "link");
-    let menu = document.createElement("wje-menu");
-    menu.setAttribute("variant", "context");
-    let slotMore = document.createElement("slot");
-    slotMore.setAttribute("name", "more");
-    let moreDropdown = document.createElement("wje-dropdown");
-    moreDropdown.setAttribute("placement", "bottom-end");
-    moreDropdown.setAttribute("collapsible", "");
-    moreDropdown.classList.add("more-tabs");
-    button.append(icon);
-    menu.append(slotMore);
-    moreDropdown.append(button);
-    moreDropdown.append(menu);
-    header.append(nav);
-    nav.append(slotNav);
-    if (this.variant === "top" || this.variant === "bottom") {
-      nav.append(moreDropdown);
-    }
-    section.append(slot);
-    native.append(header);
-    native.append(section);
-    fragment.append(native);
-    this.nav = nav;
-    this.moreDropdown = moreDropdown;
-    return fragment;
+    let t2 = document.createDocumentFragment(), e2 = document.createElement("div");
+    e2.setAttribute("part", "native"), e2.classList.add("native-tab-group");
+    let i = document.createElement("header");
+    i.setAttribute("part", "tabs"), i.classList.add("scroll-snap-x");
+    let a = document.createElement("nav");
+    a.setAttribute("part", "nav");
+    let r = document.createElement("section");
+    r.setAttribute("part", "panels");
+    let o = document.createElement("slot"), s = document.createElement("slot");
+    s.setAttribute("name", "nav");
+    let n = document.createElement("wje-icon");
+    n.setAttribute("name", "dots");
+    let l = document.createElement("wje-button");
+    l.setAttribute("slot", "trigger"), l.setAttribute("fill", "link");
+    let d = document.createElement("wje-menu");
+    d.setAttribute("variant", "context");
+    let c = document.createElement("slot");
+    c.setAttribute("name", "more");
+    let h = document.createElement("wje-dropdown");
+    return h.setAttribute("placement", "bottom-end"), h.setAttribute("collapsible", ""), h.classList.add("more-tabs"), l.append(n), d.append(c), h.append(l), h.append(d), i.append(a), a.append(s), "top" !== this.variant && "bottom" !== this.variant || a.append(h), r.append(o), e2.append(i), e2.append(r), t2.append(e2), this.nav = a, this.moreDropdown = h, t2;
   }
-  /**
-   * Executes necessary initializations and attaches event listeners after a drawing operation.
-   * Handles active tab selection, 'wje-tab:change' event binding, and window resize event for overflow checking.
-   * @returns {void} Does not return a value.
-   */
   afterDraw() {
-    let activeTab = this.getActiveTab();
-    let activeTabName = activeTab ? activeTab[0][this.type] : this.getTabAll()[0][this.type];
-    this.setActiveTab(activeTabName);
-    this.addEventListener("wje-tab:change", (e) => {
-      if (e.detail.context.hasAttribute("disabled")) return;
-      this.setActiveTab(e.detail.context.panel);
-    });
-    if (this.variant === "top" || this.variant === "bottom") {
-      this.initTabMetrics();
-      this._resizeObserver = new ResizeObserver((entries) => {
-        const width = entries[0].contentRect.width;
-        if (width !== this._lastNavWidth) {
-          this._lastNavWidth = width;
-          this.checkOverflow();
-        }
-      });
-      this._resizeObserver.observe(this);
-    }
+    let t2 = this.getActiveTab(), e2 = t2 ? t2[0][this.type] : this.getTabAll()[0][this.type];
+    this.setActiveTab(e2), this.addEventListener("wje-tab:change", (t3) => {
+      t3.detail.context.hasAttribute("disabled") || this.setActiveTab(t3.detail.context.panel);
+    }), "top" !== this.variant && "bottom" !== this.variant || (this.initTabMetrics(), this._resizeObserver = new ResizeObserver((t3) => {
+      const e3 = t3[0].contentRect.width;
+      e3 !== this._lastNavWidth && (this._lastNavWidth = e3, this.checkOverflow());
+    }), this._resizeObserver.observe(this));
   }
-  /**
-   * Removes the 'active' class from all panel and tab elements.
-   * @returns {void} This method does not return a value.
-   */
   removeActiveTab() {
-    this.getPanelAll().forEach((el) => {
-      el.classList.remove("active");
-    });
-    this.getTabAll().forEach((el) => {
-      el.classList.remove("active");
+    this.getPanelAll().forEach((t2) => {
+      t2.classList.remove("active");
+    }), this.getTabAll().forEach((t2) => {
+      t2.classList.remove("active");
     });
   }
-  /**
-   * Sets the active tab and panel.
-   * @param {string} tab The name of the tab to set as active.
-   */
-  setActiveTab(tab) {
+  setActiveTab(t2) {
     var _a;
     this.removeActiveTab();
-    const el = this.querySelector(`[${this.type}="${tab}"]`);
-    el == null ? void 0 : el.classList.add("active");
-    if (this.type === "panel")
-      (_a = this.querySelector(`[name="${tab}"]`)) == null ? void 0 : _a.classList.add("active");
-    if (el)
-      this.dropdownActive(el);
-    this.syncAria();
+    const e2 = this.querySelector(`[${this.type}="${t2}"]`);
+    e2 == null ? void 0 : e2.classList.add("active"), "panel" === this.type && ((_a = this.querySelector(`[name="${t2}"]`)) == null ? void 0 : _a.classList.add("active")), e2 && this.dropdownActive(e2), this.syncAria();
   }
-  /**
-   * Returns the currently active tab.
-   * @returns {Element|null} The active tab, or null if no tab is active.
-   */
   getActiveTab() {
-    let activeTabs = Array.from(this.querySelectorAll("wje-tab.active"));
-    return activeTabs.length > 0 ? activeTabs : null;
+    let t2 = Array.from(this.querySelectorAll("wje-tab.active"));
+    return t2.length > 0 ? t2 : null;
   }
-  /**
-   * Returns all tabs.
-   * @returns {Array<Element>} An array of all tabs.
-   */
   getTabAll() {
     return this.context.querySelector('[name="nav"]').assignedElements();
   }
-  /**
-   * Returns all tabs, including those moved to "more".
-   * @returns {Array<Element>} An array of all tabs.
-   */
   getAllTabs() {
     return Array.from(this.querySelectorAll("wje-tab"));
   }
-  /**
-   * Returns all panels.
-   * @returns {Array<Element>} An array of all panels.
-   */
   getPanelAll() {
     return Array.from(this.querySelectorAll("wje-tab-panel"));
   }
-  /**
-   * Returns the names of all tabs.
-   * @returns {Array<string>} An array of all tab names.
-   */
   getPanelAllName() {
-    return this.getPanelAll().map((el) => el.getAttribute("name"));
+    return this.getPanelAll().map((t2) => t2.getAttribute("name"));
   }
-  /**
-   * Toggles the visibility of the "more" dropdown based on the presence of tabs in the "more" slot.
-   * @returns {void} Does not return a value.
-   */
   toggleMoreVisibility() {
-    const hasTabsInMore = !!this.querySelector('wje-tab[slot="more"]');
-    const nextHidden = !hasTabsInMore;
-    if (this.moreDropdown.hidden !== nextHidden) {
-      this.moreDropdown.hidden = nextHidden;
-    }
+    const t2 = !!!this.querySelector('wje-tab[slot="more"]');
+    this.moreDropdown.hidden !== t2 && (this.moreDropdown.hidden = t2);
   }
-  /**
-   * Initializes metrics for tabs within the component. Assigns each tab to the navigation slot
-   * and calculates their dimensions for further operations.
-   * @returns {void} Does not return any value.
-   */
   initTabMetrics() {
     requestAnimationFrame(() => {
-      this._tabMetrics = this.measureTabMetrics();
-      this.measureMoreWidth();
-      this._initialized = true;
-      this.checkOverflow();
-      this._lastNavWidth = this.nav.getBoundingClientRect().width;
+      this._tabMetrics = this.measureTabMetrics(), this.measureMoreWidth(), this._initialized = true, this.checkOverflow(), this._lastNavWidth = this.nav.getBoundingClientRect().width;
     });
   }
-  /**
-   * Measures current tab widths while all tabs are temporarily placed into the main nav slot.
-   * @returns {Array<{el: Element, width: number}>}
-   */
   measureTabMetrics() {
-    const tabs = Array.from(this.querySelectorAll("wje-tab"));
-    tabs.forEach((tab) => tab.setAttribute("slot", "nav"));
-    return tabs.map((tab) => ({
-      el: tab,
-      width: tab.getBoundingClientRect().width
-    }));
+    const t2 = Array.from(this.querySelectorAll("wje-tab"));
+    return t2.forEach((t3) => t3.setAttribute("slot", "nav")), t2.map((t3) => ({ el: t3, width: t3.getBoundingClientRect().width }));
   }
-  /**
-   * Stores the measured width of the more dropdown trigger when available.
-   * @returns {void}
-   */
   measureMoreWidth() {
-    const wasHidden = this.moreDropdown.hidden;
-    const previousVisibility = this.moreDropdown.style.visibility;
-    if (wasHidden) {
-      this.moreDropdown.hidden = false;
-      this.moreDropdown.style.visibility = "hidden";
-    }
-    const width = this.moreDropdown.getBoundingClientRect().width || 0;
-    if (wasHidden) {
-      this.moreDropdown.hidden = true;
-      this.moreDropdown.style.visibility = previousVisibility;
-    }
-    if (width > 0) {
-      this._moreWidth = width;
-    }
+    const t2 = this.moreDropdown.hidden, e2 = this.moreDropdown.style.visibility;
+    t2 && (this.moreDropdown.hidden = false, this.moreDropdown.style.visibility = "hidden");
+    const i = this.moreDropdown.getBoundingClientRect().width || 0;
+    t2 && (this.moreDropdown.hidden = true, this.moreDropdown.style.visibility = e2), i > 0 && (this._moreWidth = i);
   }
-  /**
-   * Checks if the tabs within a navigation bar overflow the available space.
-   * Moves overflowing tabs into a dropdown menu and updates their state accordingly.
-   * @returns {void} This method does not return a value.
-   */
   checkOverflow() {
     var _a, _b;
     if (!this._initialized) return;
-    this._tabMetrics = this.measureTabMetrics();
-    this.measureMoreWidth();
-    const navWidth = this.nav.getBoundingClientRect().width;
-    const moreWidth = this._moreWidth || 48;
-    const totalWidth = this._tabMetrics.reduce((sum, { width }) => sum + width, 0);
-    if (totalWidth <= navWidth) {
-      this._tabMetrics.forEach(({ el }) => el.setAttribute("slot", "nav"));
-      this.toggleMoreVisibility();
-      this.dropdownActive((_a = this.getActiveTab()) == null ? void 0 : _a[0]);
-      return;
-    }
-    let used = 0;
-    let overflowStarted = false;
-    const availableWidth = Math.max(navWidth - moreWidth, 0);
-    for (const { el, width } of this._tabMetrics) {
-      used += width;
-      const shouldOverflow = used > availableWidth;
-      el.setAttribute("slot", shouldOverflow || overflowStarted ? "more" : "nav");
-      overflowStarted || (overflowStarted = shouldOverflow);
+    this._tabMetrics = this.measureTabMetrics(), this.measureMoreWidth();
+    const t2 = this.nav.getBoundingClientRect().width, e2 = this._moreWidth || 48;
+    if (this._tabMetrics.reduce((t3, { width: e3 }) => t3 + e3, 0) <= t2) return this._tabMetrics.forEach(({ el: t3 }) => t3.setAttribute("slot", "nav")), this.toggleMoreVisibility(), void this.dropdownActive((_a = this.getActiveTab()) == null ? void 0 : _a[0]);
+    let i = 0, a = false;
+    const r = Math.max(t2 - e2, 0);
+    for (const { el: t3, width: e3 } of this._tabMetrics) {
+      i += e3;
+      const o = i > r;
+      t3.setAttribute("slot", o || a ? "more" : "nav"), a || (a = o);
     }
-    this.toggleMoreVisibility();
-    this.dropdownActive((_b = this.getActiveTab()) == null ? void 0 : _b[0]);
+    this.toggleMoreVisibility(), this.dropdownActive((_b = this.getActiveTab()) == null ? void 0 : _b[0]);
   }
-  /**
-   * Toggles the "dropdown-active" class on the element based on its "active" status
-   * and the value of its "slot" attribute.
-   * @param {HTMLElement} el The HTML element to evaluate and apply the toggle logic.
-   * @returns {void} This method does not return any value.
-   */
-  dropdownActive(el) {
-    if (!el) {
-      this.moreDropdown.classList.remove("dropdown-active");
-      return;
-    }
-    if (el.classList.contains("active")) {
-      if (el.getAttribute("slot") === "more")
-        this.moreDropdown.classList.add("dropdown-active");
-      else
-        this.moreDropdown.classList.remove("dropdown-active");
-    }
+  dropdownActive(t2) {
+    t2 ? t2.classList.contains("active") && ("more" === t2.getAttribute("slot") ? this.moreDropdown.classList.add("dropdown-active") : this.moreDropdown.classList.remove("dropdown-active")) : this.moreDropdown.classList.remove("dropdown-active");
   }
-  /**
-   * Syncs ARIA attributes on tabs and panels.
-   */
   syncAria() {
-    const tabs = this.getAllTabs();
-    const panels = this.getPanelAll();
-    const panelByName = new Map(panels.map((p) => [p.getAttribute("name"), p]));
-    this.id || `wje-tab-group-${this._instanceId}`;
-    this.setAriaState({
-      orientation: this.variant === "start" || this.variant === "end" ? "vertical" : "horizontal"
-    });
-    tabs.forEach((tab, index) => {
-      const tabName = tab.getAttribute(this.type) || tab.panel || tab.route || String(index);
-      const isActive = tab.classList.contains("active");
-      const isDisabled = tab.hasAttribute("disabled");
-      if (!tab.id) tab.id = `wje-tab-${tabName}`;
-      let controlsId = "";
-      if (this.type === "panel") {
-        const panel = panelByName.get(tabName);
-        if (panel) {
-          if (!panel.id) panel.id = `wje-tab-panel-${tabName}`;
-          controlsId = panel.id;
-          panel.setAriaState({
-            role: "tabpanel",
-            labelledBy: tab.id
-          });
-        }
-      }
-      tab.setAriaState({
-        role: "tab",
-        selected: isActive,
-        disabled: isDisabled,
-        controls: controlsId || ""
-      });
-      if (typeof tab.setRovingTabIndex === "function") {
-        tab.setRovingTabIndex(isActive ? 0 : -1);
+    const t2 = this.getAllTabs(), e2 = this.getPanelAll(), i = new Map(e2.map((t3) => [t3.getAttribute("name"), t3]));
+    this.id || this._instanceId, this.setAriaState({ orientation: "start" === this.variant || "end" === this.variant ? "vertical" : "horizontal" }), t2.forEach((t3, e3) => {
+      const a = t3.getAttribute(this.type) || t3.panel || t3.route || String(e3), r = t3.classList.contains("active"), o = t3.hasAttribute("disabled");
+      t3.id || (t3.id = `wje-tab-${a}`);
+      let s = "";
+      if ("panel" === this.type) {
+        const e4 = i.get(a);
+        e4 && (e4.id || (e4.id = `wje-tab-panel-${a}`), s = e4.id, e4.setAriaState({ role: "tabpanel", labelledBy: t3.id }));
       }
+      t3.setAriaState({ role: "tab", selected: r, disabled: o, controls: s || "" }), "function" == typeof t3.setRovingTabIndex && t3.setRovingTabIndex(r ? 0 : -1);
     });
   }
   disconnectedCallback() {
     var _a, _b;
-    (_a = super.disconnectedCallback) == null ? void 0 : _a.call(this);
-    (_b = this._resizeObserver) == null ? void 0 : _b.disconnect();
+    (_a = super.disconnectedCallback) == null ? void 0 : _a.call(this), (_b = this._resizeObserver) == null ? void 0 : _b.disconnect();
   }
 };
-__publicField(_TabGroup, "_instanceId", 0);
-let TabGroup = _TabGroup;
-TabGroup.define("wje-tab-group", TabGroup);
+__publicField(_e, "_instanceId", 0);
+let e = _e;
+e.define("wje-tab-group", e);
 export {
-  TabGroup as default
+  e as default
 };
 //# sourceMappingURL=wje-tab-group.js.map