wj-elements 0.1.135 → 0.1.136

package/dist/wje-store.js

@@ -1,401 +0,0 @@
-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);
-const addAction = (stateValueName) => {
-  return (payload2) => {
-    return {
-      type: `${stateValueName}/ADD`,
-      payload: payload2,
-      actionType: "ADD"
-    };
-  };
-};
-const addManyAction = (stateValueName) => {
-  return (payload2) => {
-    return {
-      type: `${stateValueName}/ADD_MANY`,
-      payload: payload2,
-      actionType: "ADD_MANY"
-    };
-  };
-};
-const updateAction = (stateValueName) => {
-  return (payload2) => {
-    return {
-      type: `${stateValueName}/UPDATE`,
-      payload: payload2,
-      actionType: "UPDATE"
-    };
-  };
-};
-const deleteAction = (stateValueName) => {
-  return (payload2) => {
-    return {
-      type: `${stateValueName}/DELETE`,
-      payload: payload2,
-      actionType: "DELETE"
-    };
-  };
-};
-const loadAction = (stateValueName) => {
-  return (payload2) => {
-    return {
-      type: `${stateValueName}/LOAD`,
-      payload: payload2,
-      actionType: "LOAD"
-    };
-  };
-};
-const defaultStoreActions = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  addAction,
-  addManyAction,
-  deleteAction,
-  loadAction,
-  updateAction
-}, Symbol.toStringTag, { value: "Module" }));
-class PubSub {
-  constructor() {
-    this.events = {};
-  }
-  /**
-   * Either create a new event instance for passed `event` name.
-   * or push a new callback into the existing collection.
-   * @param {string} event The event name to subscribe to
-   * @param {Function} callback The callback function to subscribe to the event
-   * @returns {number} A count of callbacks for this event
-   * @memberof PubSub
-   */
-  subscribe(event, callback) {
-    let self = this;
-    if (!self.events.hasOwnProperty(event)) {
-      self.events[event] = [];
-    }
-    self.events[event].push(callback) - 1;
-    return {
-      unsubscribe() {
-        self.events[event].splice(self.events[event].indexOf(callback), 1);
-      }
-    };
-  }
-  /**
-   * If the passed event has callbacks attached to it, loop through each one and call it.
-   * @param {string} event The name of the event to publish
-   * @param {object} [newData] The data to pass to the callbacks
-   * @param {object} [oldData] The data to pass to the callbacks
-   * @returns {Array} The callbacks for this event, or an empty array if no event exits
-   * @memberof PubSub
-   */
-  publish(event, newData = {}, oldData = {}) {
-    let self = this;
-    if (!self.events.hasOwnProperty(event)) {
-      return [];
-    }
-    return self.events[event].map((callback) => callback(newData, oldData));
-  }
-}
-class Store {
-  /**
-   * Initializes the store with optional reducer and state.
-   * @param {object} [params] Configuration for the store.
-   * @param {Function} [params.reducer] Initial reducer function for handling state updates.
-   * @param {object} [params.state] Initial state of the store.
-   */
-  constructor(params = {}) {
-    __publicField(this, "_state");
-    __publicField(this, "_reducer");
-    __publicField(this, "events");
-    __publicField(this, "status");
-    this._isPause = false;
-    this._state = {};
-    this._reducer = () => {
-      return {};
-    };
-    this.status = "resting";
-    this.events = new PubSub();
-    if (params == null ? void 0 : params.hasOwnProperty("reducer")) {
-      this._reducer = params.reducer;
-    }
-    this.refreshProxy(params == null ? void 0 : params.state);
-  }
-  /**
-   * Dispatches an action to update the state by invoking the reducer function.
-   * @param {object} action The action object containing the type and any associated payload.
-   * @param {string} action.type The type of the action being dispatched.
-   * @returns {boolean} Returns `true` after the state has been successfully updated.
-   * @example
-   * const action = { type: 'INCREMENT', payload: { amount: 1 } };
-   * store.dispatch(action);
-   */
-  dispatch(action) {
-    this.status = "action";
-    let newState = this._reducer(this._state, action);
-    this.status = "mutation";
-    this._state = Object.assign(this._state, newState);
-    return true;
-  }
-  /**
-   * Retrieves a deep copy of the current state to ensure immutability.
-   * @returns {object} A deep copy of the current state.
-   * @example
-   * const currentState = store.getState();
-   * console.log(currentState);
-   */
-  getState() {
-    return JSON.parse(JSON.stringify(this._state));
-  }
-  /**
-   * Subscribes to a specific event with a provided callback function.
-   * @param {string} eventName The name of the event to subscribe to.
-   * @param {Function} callbackFn The function to execute when the event is triggered.
-   * @returns {Function} - A function to unsubscribe from the event.
-   * @example
-   * const unsubscribe = store.subscribe('stateChange', (newState) => {
-   *   console.log('State changed:', newState);
-   * });
-   * // Later, to unsubscribe
-   * unsubscribe();
-   */
-  subscribe(eventName, callbackFn) {
-    return this.events.subscribe(eventName, callbackFn);
-  }
-  /**
-   * Unsubscribes from a specific event by removing all associated listeners.
-   * @param {string} eventName The name of the event to unsubscribe from.
-   * @returns {void}
-   * @example
-   * store.unsubscribe('stateChange');
-   */
-  unsubscribe(eventName) {
-    delete this.events[eventName];
-  }
-  /**
-   * Pauses event handling or other operations.
-   * @returns {this} Returns the current instance for method chaining.
-   * @example
-   * store.pause().doSomething();
-   */
-  pause() {
-    this._isPause = true;
-    return this;
-  }
-  /**
-   * Resumes event handling or other operations.
-   * @param {*} [val] Optional value to pass while resuming.
-   * @returns {this} Returns the current instance for method chaining.
-   * @example
-   * store.play().doSomething();
-   */
-  play(val) {
-    this._isPause = false;
-    return this;
-  }
-  /**
-   * Merges a new reducer function into the existing reducer for a specific state property.
-   * @param {string} stateValueName The key in the state object that the new reducer will manage.
-   * @param {Function} newReducer The reducer function to handle updates for the specified state property.
-   * @returns {void}
-   * @example
-   * const newReducer = (newState, currentState) => ({ ...currentState, ...newState });
-   * store.mergeReducers('user', newReducer);
-   */
-  mergeReducers(stateValueName, newReducer) {
-    let reducerCopy = this._reducer;
-    this._reducer = (state, newState) => {
-      let preState = reducerCopy(state, newState);
-      return {
-        ...preState,
-        [stateValueName]: newReducer(newState, state[stateValueName])
-      };
-    };
-  }
-  /**
-   * Synchronizes each entry in an array with the store by defining or updating state entries.
-   * @param {string} storeKey The key prefix used for defining or updating store entries.
-   * @param {Array<object>} [array] The array of entries to be synchronized with the store.
-   * @param {string} [identificator] The property name used as a unique identifier for each entry.
-   * @returns {void}
-   * @example
-   * const data = [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }];
-   * store.makeEveryArrayEntryAsStoreState('items', data, 'id');
-   */
-  makeEveryArrayEntryAsStoreState(storeKey, array = [], identificator = "id") {
-    array.forEach((entry) => {
-      if (this.getState().hasOwnProperty(`${storeKey}-${entry[identificator]}`)) {
-        this.dispatch(updateAction(`${storeKey}-${entry[identificator]}`)(entry));
-      } else {
-        this.define(
-          `${storeKey}-${entry.id || entry.source || entry[identificator]}`,
-          entry,
-          null,
-          identificator
-        );
-      }
-    });
-  }
-  /**
-   * Defines a new state variable and associates it with a reducer.
-   * @param {string} stateValueName The name of the state variable to define.
-   * @param {*} defaultValue The initial value of the state variable.
-   * @param {Function|null} [reducer] An optional reducer function to manage updates for the state variable.
-   * @param {string} [key] The key used to identify individual entries if the state value is an array or object.
-   * @returns {void}
-   * @example
-   * // Define a new state with a custom reducer
-   * store.define('user', { id: 1, name: 'John Doe' }, (newState, currentState) => ({ ...currentState, ...newState }));
-   * @example
-   * // Define a new state with default array reducer
-   * store.define('items', [], null, 'itemId');
-   */
-  define(stateValueName, defaultValue, reducer, key = "id") {
-    if (this._state.hasOwnProperty(stateValueName)) {
-      console.warn(`STATE už obsahuje premennú ${stateValueName},ktorú sa pokúšate pridať`);
-      return;
-    }
-    if (reducer instanceof Function) {
-      this.mergeReducers(stateValueName, reducer);
-    } else {
-      if (defaultValue instanceof Array) {
-        this.mergeReducers(stateValueName, this.createArrayReducer(stateValueName, key));
-      } else {
-        this.mergeReducers(stateValueName, this.createObjectReducer(stateValueName, key));
-      }
-    }
-    this.refreshProxy({
-      ...this._state,
-      [stateValueName]: defaultValue
-    });
-  }
-  /**
-   * Refreshes the state by wrapping it in a Proxy to track changes and notify subscribers.
-   * @param {object} newState The new state object to be set. Defaults to an empty object if not provided.
-   * @returns {void}
-   * @example
-   * store.refreshProxy({ user: { id: 1, name: 'John Doe' } });
-   */
-  refreshProxy(newState) {
-    this._state = new Proxy(newState || {}, {
-      set: (state, key, value) => {
-        if (JSON.stringify(state[key]) === JSON.stringify(value)) {
-          return true;
-        }
-        let oldState = state[key];
-        state[key] = value;
-        if (!this._isPause) this.events.publish(key, this._state, oldState);
-        if (this.status !== "mutation") {
-          console.warn(`You should use a mutation to set ${key}`);
-        }
-        this.status = "resting";
-        return true;
-      }
-    });
-  }
-  /**
-   * Creates a reducer function to manage an object state.
-   * @param {string} stateValueName The name of the state property this reducer manages.
-   * @returns {Function} A reducer function that handles `ADD`, `UPDATE`, and `DELETE` actions for the specified state property.
-   * @throws {Error} If the payload is an array, an error is logged since the reducer is designed for object state management.
-   * @example
-   * const userReducer = store.createObjectReducer('user');
-   * const newState = userReducer({ type: 'user/ADD', payload: { id: 1, name: 'John Doe' } });
-   */
-  createObjectReducer(stateValueName) {
-    return (action, state = {}) => {
-      if (Array.isArray(action.payload) && (action.type === `${stateValueName}/ADD` || action.type === `${stateValueName}/UPDATE`)) {
-        console.error(
-          `Nemôžete pridať do objektu ${stateValueName} hodnotu, ktorá je pole.`
-        );
-      }
-      const actionType = action.type.split("/")[1];
-      if (!["ADD", "UPDATE", "DELETE"].includes(actionType)) {
-        console.error(
-          `Nemôžete použiť akciu ${actionType} na objekt. Správne akcie pre objekt sú: ADD, UPDATE, DELETE`
-        );
-      }
-      switch (action.type) {
-        case `${stateValueName}/ADD`:
-          return {
-            ...action.payload
-          };
-        case `${stateValueName}/UPDATE`:
-          return {
-            ...state,
-            ...action.payload
-          };
-        case `${stateValueName}/DELETE`:
-          return {};
-        default:
-          return state;
-      }
-    };
-  }
-  /**
-   * Creates a reducer function to manage an array state.
-   * @param {string} stateValueName The name of the state property this reducer manages.
-   * @param {string} key The unique key used to identify items in the array for updates and deletions.
-   * @returns {Function} A reducer function that handles `ADD`, `ADD_MANY`, `UPDATE`, `DELETE`, and `LOAD` actions for the specified state property.
-   * @throws {Error} If `action.payload` is not an array when required.
-   * @example
-   * const itemsReducer = store.createArrayReducer('items', 'id');
-   * const newState = itemsReducer({ type: 'items/ADD', payload: { id: 1, name: 'Item 1' } });
-   */
-  createArrayReducer(stateValueName, key) {
-    return (action, state = []) => {
-      var _a;
-      if (action.actionType === "LOAD" && ((_a = action.type) == null ? void 0 : _a.includes(stateValueName))) {
-        if (!Array.isArray(action.payload)) {
-          console.error(
-            `Snažíte sa použiť "LOAD" akciu na pole, ale payload nie je pole.`
-          );
-          return [...state];
-        }
-      }
-      switch (action.type) {
-        case `${stateValueName}/ADD`:
-          if (Array.isArray(action.payload)) {
-            return [...state, ...action.payload];
-          } else {
-            return [...state, action.payload];
-          }
-        case `${stateValueName}/ADD_MANY`:
-          return [...state, ...action.payload];
-        case `${stateValueName}/UPDATE`:
-          if (state.some((obj) => obj[key] === action.payload[key])) {
-            return [
-              ...state.map((obj) => {
-                if (obj[key] === action.payload[key]) {
-                  return action.payload;
-                }
-                return obj;
-              })
-            ];
-          } else {
-            return [...state, action.payload];
-          }
-        case `${stateValueName}/DELETE`:
-          if (Array.isArray(action.payload)) {
-            return [
-              ...state.filter(
-                (obj) => !action.payload.some((item) => obj.hasOwnProperty(key) && obj[key] !== item[key] || !obj.hasOwnProperty(key) && obj !== item)
-              )
-            ];
-          }
-          return [
-            ...state.filter(
-              (obj) => obj.hasOwnProperty(key) && obj[key] !== action.payload[key] || !obj.hasOwnProperty(key) && obj !== action.payload
-            )
-          ];
-        case `${stateValueName}/LOAD`:
-          return [...action.payload];
-        default:
-          return state;
-      }
-    };
-  }
-}
-let store = new Store();
-export {
-  defaultStoreActions,
-  store
-};
-//# sourceMappingURL=wje-store.js.map

package/dist/wje-store.js.map

@@ -1 +0,0 @@
-{"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    return (payload2) => {\n        return {\n            type: `${stateValueName}/ADD`,\n            payload: payload2,\n            actionType: 'ADD',\n        };\n    };\n};\n\nconst addManyAction = (stateValueName) => {\n    return (payload2) => {\n        return {\n            type: `${stateValueName}/ADD_MANY`,\n            payload: payload2,\n            actionType: 'ADD_MANY',\n        };\n    };\n};\n\nconst updateAction = (stateValueName) => {\n    return (payload2) => {\n        return {\n            type: `${stateValueName}/UPDATE`,\n            payload: payload2,\n            actionType: 'UPDATE',\n        };\n    };\n};\n\nconst deleteAction = (stateValueName) => {\n    return (payload2) => {\n        return {\n            type: `${stateValueName}/DELETE`,\n            payload: payload2,\n            actionType: 'DELETE',\n        };\n    };\n};\n\nconst loadAction = (stateValueName) => {\n    return (payload2) => {\n        return {\n            type: `${stateValueName}/LOAD`,\n            payload: payload2,\n            actionType: 'LOAD',\n        };\n    };\n};\n\nexport {\n    addAction,\n    deleteAction,\n    loadAction,\n    updateAction,\n    addManyAction,\n};\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 {object} [newData] The data to pass to the callbacks\n     * @param {object} [oldData] The data to pass to the callbacks\n     * @returns {Array} The callbacks for this event, or an empty array if no event exits\n     * @memberof PubSub\n     */\n    publish(event, 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(newData, oldData));\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                // Trace out to the console. This will be grouped by the related action\n                // console.log(`stateChange: ${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, 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 (Array.isArray(action.payload) && (action.type === `${stateValueName}/ADD` || action.type === `${stateValueName}/UPDATE`)) {\n                console.error(\n                    `Nemôžete pridať do objektu ${stateValueName} hodnotu, ktorá je pole.`\n                );\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\n            if (action.actionType === \"LOAD\" && action.type?.includes(stateValueName)) {\n                if (!Array.isArray(action.payload)) {\n                    console.error(\n                        `Snažíte sa použiť \"LOAD\" akciu na pole, ale payload nie je pole.`\n                    );\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((item) => (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-tab-group.js

@@ -1,137 +0,0 @@
-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}\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\n    & > nav {\n        display: flex;\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: 1px solid var(--wje-border-color);\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: 1px solid var(--wje-border-color);\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: 1px solid var(--wje-border-color);\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: 1px solid var(--wje-border-color);\n    }\n}\n";
-class TabGroup extends WJElement {
-  /**
-   * Creates an instance of TabGroup.
-   * @class
-   */
-  constructor() {
-    super();
-    __publicField(this, "className", "TabGroup");
-  }
-  /**
-   * Returns the CSS styles for the component.
-   * @static
-   * @returns {CSSStyleSheet}
-   */
-  static get cssStyleSheet() {
-    return styles;
-  }
-  /**
-   * Sets up the attributes for the component.
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * 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);
-      });
-    }
-  }
-  /**
-   * Draws the component.
-   * @param {object} context The context for drawing.
-   * @param {object} store The store for drawing.
-   * @param {object} params The parameters for drawing.
-   * @returns {DocumentFragment}
-   */
-  draw(context, store, params) {
-    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");
-    let section = document.createElement("section");
-    section.setAttribute("part", "panels");
-    let slot = document.createElement("slot");
-    let slotNav = document.createElement("slot");
-    slotNav.setAttribute("name", "nav");
-    header.appendChild(nav);
-    nav.appendChild(slotNav);
-    section.appendChild(slot);
-    native.appendChild(header);
-    native.appendChild(section);
-    fragment.appendChild(native);
-    return fragment;
-  }
-  /**
-   * Sets up the event listeners after the component is drawn.
-   */
-  afterDraw() {
-    let activeTab = this.getActiveTab();
-    let activeTabName = activeTab ? activeTab[0].panel : this.getTabAll()[0].panel;
-    this.setActiveTab(activeTabName);
-    this.addEventListener("wje-tab:change", (e) => {
-      if (e.detail.context.hasAttribute("disabled")) return;
-      this.setActiveTab(e.detail.context.panel);
-    });
-  }
-  /**
-   * Removes the active attribute from all tabs and panels.
-   */
-  removeActiveTab() {
-    this.getPanelAll().forEach((el) => {
-      el.removeAttribute("active");
-    });
-    this.getTabAll().forEach((el) => {
-      el.removeAttribute("active");
-    });
-  }
-  /**
-   * Sets the active tab and panel.
-   * @param {string} tab The name of the tab to set as active.
-   */
-  setActiveTab(tab) {
-    this.removeActiveTab();
-    this.querySelector(`[panel="${tab}"]`).setAttribute("active", "");
-    this.querySelector(`[name="${tab}"]`).setAttribute("active", "");
-  }
-  /**
-   * 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;
-  }
-  /**
-   * Returns all tabs.
-   * @returns {Array<Element>} An array of all tabs.
-   */
-  getTabAll() {
-    return this.context.querySelector('[name="nav"]').assignedElements();
-  }
-  /**
-   * 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"));
-  }
-}
-TabGroup.define("wje-tab-group", TabGroup);
-export {
-  TabGroup as default
-};
-//# sourceMappingURL=wje-tab-group.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"wje-tab-group.js","sources":["../packages/wje-tab-group/tab-group.element.js","../packages/wje-tab-group/tab-group.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `TabGroup` is a custom web component that represents a group of tabs.\n * @summary This element represents a group of tabs.\n * @documentation https://elements.webjet.sk/components/tab-group\n * @status stable\n * @augments WJElement\n * @slot - The default slot for the tab group.\n * @slot nav - Slot for the navigation of the tab group.\n * @cssproperty [--wje-tab-group-padding=1rem] - Specifies the padding inside the tab group. This property defines the space between the content of the tab group and its outer boundary. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`, `%`).\n * @tag wje-tab-group\n */\n\nexport default class TabGroup extends WJElement {\n    /**\n     * Creates an instance of TabGroup.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'TabGroup';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Sets up the event listeners before the component is drawn.\n     * This method is called before the component is drawn.\n     * It is used to set up event listeners.\n     */\n    beforeDraw() {\n        let activeTabName = location.hash.replace('#', '');\n\n        // skontrolujeme ci sa nachadza v paneloch\n        if (this.getPanelAllName().includes(activeTabName)) {\n            // window.addEventListener('hashchange', (e) => {\n            //     this.setActiveTab(activeTabName);\n            // });\n\n            window.addEventListener('load', (e) => {\n                this.setActiveTab(activeTabName);\n            });\n        }\n    }\n\n    /**\n     * Draws the component.\n     * @param {object} context The context for drawing.\n     * @param {object} store The store for drawing.\n     * @param {object} params The parameters for drawing.\n     * @returns {DocumentFragment}\n     */\n    draw(context, store, params) {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-tab-group');\n\n        let header = document.createElement('header');\n        header.setAttribute('part', 'tabs');\n        header.classList.add('scroll-snap-x');\n\n        let nav = document.createElement('nav');\n\n        let section = document.createElement('section');\n        section.setAttribute('part', 'panels');\n\n        let slot = document.createElement('slot');\n\n        let slotNav = document.createElement('slot');\n        slotNav.setAttribute('name', 'nav');\n\n        header.appendChild(nav);\n        nav.appendChild(slotNav);\n        section.appendChild(slot);\n\n        native.appendChild(header);\n        native.appendChild(section);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Sets up the event listeners after the component is drawn.\n     */\n    afterDraw() {\n        let activeTab = this.getActiveTab();\n        let activeTabName = activeTab ? activeTab[0].panel : this.getTabAll()[0].panel;\n\n        this.setActiveTab(activeTabName);\n\n        this.addEventListener('wje-tab:change', (e) => {\n            if (e.detail.context.hasAttribute('disabled')) return;\n\n            this.setActiveTab(e.detail.context.panel);\n        });\n    }\n\n    /**\n     * Removes the active attribute from all tabs and panels.\n     */\n    removeActiveTab() {\n        this.getPanelAll().forEach((el) => {\n            el.removeAttribute('active');\n        });\n\n        this.getTabAll().forEach((el) => {\n            el.removeAttribute('active');\n        });\n    }\n\n    /**\n     * Sets the active tab and panel.\n     * @param {string} tab The name of the tab to set as active.\n     */\n    setActiveTab(tab) {\n        this.removeActiveTab();\n        this.querySelector(`[panel=\"${tab}\"]`).setAttribute('active', '');\n        this.querySelector(`[name=\"${tab}\"]`).setAttribute('active', '');\n    }\n\n    /**\n     * Returns the currently active tab.\n     * @returns {Element|null} The active tab, or null if no tab is active.\n     */\n    getActiveTab() {\n        let activeTabs = Array.from(this.querySelectorAll('wje-tab[active]'));\n        return activeTabs.length > 0 ? activeTabs : null;\n    }\n\n    /**\n     * Returns all tabs.\n     * @returns {Array<Element>} An array of all tabs.\n     */\n    getTabAll() {\n        return this.context.querySelector('[name=\"nav\"]').assignedElements();\n    }\n\n    /**\n     * Returns all panels.\n     * @returns {Array<Element>} An array of all panels.\n     */\n    getPanelAll() {\n        return Array.from(this.querySelectorAll('wje-tab-panel'));\n    }\n\n    /**\n     * Returns the names of all tabs.\n     * @returns {Array<string>} An array of all tab names.\n     */\n    getPanelAllName() {\n        return this.getPanelAll().map((el) => el.getAttribute('name'));\n    }\n}\n","import TabGroup from './tab-group.element.js';\n\nexport default TabGroup;\n\nTabGroup.define('wje-tab-group', TabGroup);\n"],"names":[],"mappings":"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"}

package/dist/wje-tab-panel.js

@@ -1,46 +0,0 @@
-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 Panel ]\n*/\n\n:host {\n    display: none;\n    flex-wrap: wrap;\n    align-items: center;\n    padding: 1rem;\n}\n\n:host([active]) {\n    display: block;\n}\n";
-class TabPanel extends WJElement {
-  /**
-   * Creates an instance of TabPanel.
-   */
-  constructor() {
-    super();
-    /**
-     * The class name for the component.
-     */
-    __publicField(this, "className", "TabPanel");
-  }
-  /**
-   * Returns the CSS styles for the component.
-   * @static
-   * @returns {CSSStyleSheet}
-   */
-  static get cssStyleSheet() {
-    return styles;
-  }
-  /**
-   * Sets up the attributes for the component.
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Draws the component for the tab panel.
-   * @returns {DocumentFragment}
-   */
-  draw() {
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("slot");
-    fragment.appendChild(element);
-    return fragment;
-  }
-}
-TabPanel.define("wje-tab-panel", TabPanel);
-export {
-  TabPanel as default
-};
-//# sourceMappingURL=wje-tab-panel.js.map

package/dist/wje-tab-panel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"wje-tab-panel.js","sources":["../packages/wje-tab-panel/tab-panel.element.js","../packages/wje-tab-panel/tab-panel.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `TabPanel` is a custom web component that represents a tab panel.\n * @summary This element represents a tab panel.\n * @documentation https://elements.webjet.sk/components/tab-panel\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the tab panel.\n * @tag wje-tab-panel\n */\nexport default class TabPanel extends WJElement {\n    /**\n     * Creates an instance of TabPanel.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component.\n     */\n    className = 'TabPanel';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component for the tab panel.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n}\n","import TabPanel from './tab-panel.element.js';\n\nexport default TabPanel;\n\nTabPanel.define('wje-tab-panel', TabPanel);\n"],"names":[],"mappings":";;;;;AAYe,MAAM,iBAAiB,UAAU;AAAA;AAAA;AAAA;AAAA,EAI5C,cAAc;AACV,UAAO;AAMX;AAAA;AAAA;AAAA,qCAAY;AAAA,EALhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACf;AACA;AClDA,SAAS,OAAO,iBAAiB,QAAQ;"}