wj-elements 0.1.196 → 0.1.197

package/dist/packages/wje-store/store.d.ts

@@ -1,153 +0,0 @@
-import { default as PubSub } from './pubsub.js';
-export let store: Store;
-import * as defaultStoreActions from './default-store-actions.js';
-/**
- * @summary A reactive state management system with support for reducers, events, and state immutability.
- * @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.
- * @example
- * const store = new Store({
- *   reducer: (state, action) => { ... },
- *   state: { user: { id: 1, name: 'John' } }
- * });
- * store.subscribe('user', (newState, oldState) => console.log('User changed:', newState));
- * store.dispatch({ type: 'user/UPDATE', payload: { name: 'Jane' } });
- */
-declare 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?: {
-        reducer?: Function;
-        state?: object;
-    });
-    _state: {};
-    _reducer: Function;
-    events: PubSub;
-    status: string;
-    _isPause: boolean;
-    /**
-     * 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: {
-        type: string;
-    }): boolean;
-    /**
-     * 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(): object;
-    /**
-     * 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: string, callbackFn: Function): Function;
-    /**
-     * 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: string): void;
-    /**
-     * Pauses event handling or other operations.
-     * @returns {this} Returns the current instance for method chaining.
-     * @example
-     * store.pause().doSomething();
-     */
-    pause(): 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?: any): 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: string, newReducer: Function): void;
-    /**
-     * 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: string, array?: Array<object>, identificator?: string): void;
-    /**
-     * 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: string, defaultValue: any, reducer?: Function | null, key?: string): void;
-    /**
-     * 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: object): void;
-    /**
-     * 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: string): Function;
-    /**
-     * 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: string, key: string): Function;
-}
-export { defaultStoreActions };

package/dist/packages/wje-tab/tab.d.ts

@@ -1,2 +0,0 @@
-import { default as Tab } from './tab.element.js';
-export default Tab;

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

@@ -1,66 +0,0 @@
-import { default as WJElement } from '../wje-element/element.js';
-/**
- * `Tab` is a custom web component that represents a tab.
- * @summary This element represents a tab.
- * @documentation https://elements.webjet.sk/components/tab
- * @status stable
- * @augments {WJElement}
- * @param {string} panel The name of the tab panel. This is used to identify the corresponding tab panel.
- * @param {string} route The route to navigate to when the tab is clicked.
- * @cssproperty [--wje-tab-text-transform=uppercase] - The text transformation for the tab (e.g., uppercase, lowercase).
- * @cssproperty [--wje-tab-font-weight=500] - The font weight of the tab text.
- * @cssproperty [--wje-tab-letter-spacing=0.06em] - The letter spacing of the tab text.
- * @cssproperty [--wje-tab-padding-inline=1rem] - The horizontal padding of the tab.
- * @cssproperty [--wje-tab-padding-top=.75rem] - The top padding of the tab text.
- * @cssproperty [--wje-tab-padding-bottom=.75rem] - The bottom padding of the tab text.
- * @cssproperty [--wje-tab-color-active=var(--wje-color-primary-11)] - The text color of the active tab.
- * @cssproperty [--wje-tab-color-hover=var(--wje-color-primary-1)] - The text color of the tab when hovered.
- * //@fires wje-tab:change - Dispatched when the tab is changed.
- * @tag wje-tab
- */
-export default class Tab extends WJElement {
-    /**
-     * Returns the CSS styles for the component.
-     * @static
-     * @returns {CSSStyleSheet}
-     */
-    static get cssStyleSheet(): CSSStyleSheet;
-    /**
-     * Indicates whether this is the last tab.
-     * @type {boolean}
-     */
-    last: boolean;
-    _hasPanel: boolean;
-    /**
-     * Sets the panel attribute to the specified value.
-     * @param {string} value The value to set for the panel attribute.
-     */
-    set panel(value: string);
-    /**
-     * Retrieves the value of the 'panel' attribute of the element.
-     * @returns {string|null} Returns the 'panel' attribute value if it exists; otherwise, returns null.
-     */
-    get panel(): string | null;
-    /**
-     * Sets the value of the 'route' attribute for the current object.
-     * @param {string} value The new value to set for the 'route' attribute.
-     */
-    set route(value: string);
-    /**
-     * Retrieves the value of the 'route' attribute.
-     * If the 'route' attribute is not set, it returns null.
-     * @returns {string|null} The value of the 'route' attribute or null if not set.
-     */
-    get route(): string | null;
-    /**
-     * Draws the component for the tab.
-     * @returns {DocumentFragment}
-     */
-    draw(): DocumentFragment;
-    /**
-     * Sets up event listeners after the component is rendered.
-     * // @fires wje-tab:change - Dispatched when the component is clicked, indicating a tab change.
-     */
-    afterDraw(): void;
-    unbindRouterLinks: any;
-}

package/dist/packages/wje-tab-group/tab-group.d.ts

@@ -1,2 +0,0 @@
-import { default as TabGroup } from './tab-group.element.js';
-export default TabGroup;

package/dist/packages/wje-tab-group/tab-group.element.d.ts

@@ -1,107 +0,0 @@
-import { default as WJElement } from '../wje-element/element.js';
-/**
- * `TabGroup` is a custom web component that represents a group of tabs.
- * @summary This element represents a group of tabs.
- * @documentation https://elements.webjet.sk/components/tab-group
- * @status stable
- * @augments WJElement
- * @param {string} type The type of the tab group. Can be either 'panel' or 'route'.
- * @slot - The default slot for the tab group.
- * @slot nav - Slot for the navigation of the tab group.
- * @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`, `%`).
- * @tag wje-tab-group
- */
-export default class TabGroup extends WJElement {
-    /**
-     * Returns the CSS styles for the component.
-     * @static
-     * @returns {CSSStyleSheet}
-     */
-    static get cssStyleSheet(): CSSStyleSheet;
-    /**
-     * 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: string);
-    /**
-     * 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(): string;
-    /**
-     * 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(): void;
-    /**
-     * 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(): DocumentFragment;
-    nav: HTMLElement;
-    moreDropdown: HTMLElement;
-    /**
-     * 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(): void;
-    /**
-     * 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(): void;
-    /**
-     * Removes the 'active' class from all panel and tab elements.
-     * @returns {void} This method does not return a value.
-     */
-    removeActiveTab(): void;
-    /**
-     * Sets the active tab and panel.
-     * @param {string} tab The name of the tab to set as active.
-     */
-    setActiveTab(tab: string): void;
-    /**
-     * Returns the currently active tab.
-     * @returns {Element|null} The active tab, or null if no tab is active.
-     */
-    getActiveTab(): Element | null;
-    /**
-     * Returns all tabs.
-     * @returns {Array<Element>} An array of all tabs.
-     */
-    getTabAll(): Array<Element>;
-    /**
-     * Returns all panels.
-     * @returns {Array<Element>} An array of all panels.
-     */
-    getPanelAll(): Array<Element>;
-    /**
-     * Returns the names of all tabs.
-     * @returns {Array<string>} An array of all tab names.
-     */
-    getPanelAllName(): Array<string>;
-    /**
-     * 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(): void;
-    /**
-     * 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: HTMLElement): void;
-}

package/dist/packages/wje-tab-panel/tab-panel.d.ts

@@ -1,2 +0,0 @@
-import { default as TabPanel } from './tab-panel.element.js';
-export default TabPanel;

package/dist/packages/wje-tab-panel/tab-panel.element.d.ts

@@ -1,23 +0,0 @@
-import { default as WJElement } from '../wje-element/element.js';
-/**
- * `TabPanel` is a custom web component that represents a tab panel.
- * @summary This element represents a tab panel.
- * @documentation https://elements.webjet.sk/components/tab-panel
- * @status stable
- * @augments {WJElement}
- * @slot - The default slot for the tab panel.
- * @tag wje-tab-panel
- */
-export default class TabPanel extends WJElement {
-    /**
-     * Returns the CSS styles for the component.
-     * @static
-     * @returns {CSSStyleSheet}
-     */
-    static get cssStyleSheet(): CSSStyleSheet;
-    /**
-     * Draws the component for the tab panel.
-     * @returns {DocumentFragment}
-     */
-    draw(): DocumentFragment;
-}

package/dist/packages/wje-textarea/textarea.d.ts

@@ -1,2 +0,0 @@
-import { default as Textarea } from './textarea.element.js';
-export default Textarea;

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

@@ -1,89 +0,0 @@
-import { FormAssociatedElement } from '../internals/form-associated-element.js';
-/**
- * `Textarea` is a custom web component that represents a textarea input.
- * @summary This element represents a textarea input.
- * @documentation https://elements.webjet.sk/components/textarea
- * @status stable
- * @augments {FormAssociatedElement}
- * @csspart native - The native textarea wrapper.
- * @csspart input - The textarea input.
- * @csspart wrapper - The textarea wrapper.
- * @cssproperty [--wje-textarea-font-family=var(--wje-font-family)] - Specifies the font family used for the textarea. Accepts any valid CSS font-family value.
- * @cssproperty [--wje-textarea-background-color=var(--wje-background)] - Sets the background color of the textarea. Accepts any valid CSS color value.
- * @cssproperty [--wje-textarea-color=var(--wje-color)] - Defines the text color within the textarea. Accepts any valid CSS color value.
- * @cssproperty [--wje-textarea-color-invalid=var(--wje-color-danger)] - Changes the text color of the textarea when it is invalid. Useful for highlighting validation errors.
- * @cssproperty [--wje-textarea-border-width=1px] - Specifies the width of the textarea's border. Accepts any valid CSS length unit.
- * @cssproperty [--wje-textarea-border-style=solid] - Sets the style of the textarea's border. Accepts standard CSS border styles such as `solid`, `dashed`, or `dotted`.
- * @cssproperty [--wje-textarea-border-color=var(--wje-border-color)] - Defines the border color of the textarea. Accepts any valid CSS color value.
- * @cssproperty [--wje-textarea-border-color-focus=var(--wje-color-primary)] - Specifies the border color of the textarea when it is focused. Enhances the user experience by providing visual feedback.
- * @cssproperty [--wje-textarea-border-radius=4px] - Determines the border radius of the textarea, defining how rounded its corners are. Accepts any valid CSS length unit.
- * @cssproperty [--wje-textarea-margin-bottom=.5rem] - Sets the bottom margin of the textarea. Ensures spacing between the textarea and other elements.
- * @cssproperty [--wje-textarea-line-height=20px] - Specifies the line height of the text within the textarea. Helps control the vertical spacing of the text.
- * @cssproperty [--wje-textarea-padding=0.5rem] - Defines the padding inside the textarea. Controls the spacing between the content and the border.
- * @tag wje-textarea
- */
-export default class Textarea extends FormAssociatedElement {
-    /**
-     * Returns the CSS styles for the component.
-     * @static
-     * @returns {CSSStyleSheet} The CSS stylesheet
-     */
-    static get cssStyleSheet(): CSSStyleSheet;
-    /**
-     * Returns the list of attributes to observe for changes.
-     * @static
-     * @returns {Array<string>}
-     */
-    static get observedAttributes(): Array<string>;
-    pristine: boolean;
-    /**
-     * Setter for the value attribute.
-     * @param {string} value The value to set.
-     */
-    set value(value: string);
-    /**
-     * Getter for the value attribute.
-     * @returns {string} The value of the attribute.
-     */
-    get value(): string;
-    _value: string;
-    /**
-     * Sets the `validateOnChange` property. If set to a truthy value, it adds the
-     * `validate-on-change` attribute to the element. If set to a falsy value, it
-     * removes the `validate-on-change` attribute from the element.
-     * @param {boolean} value Determines whether to add or remove the
-     * `validate-on-change` attribute. A truthy value adds the attribute, whereas a
-     * falsy value removes it.
-     */
-    set validateOnChange(value: boolean);
-    /**
-     * Getter for the validateOnChange attribute.
-     * @returns {boolean} Whether the attribute is present.
-     */
-    get validateOnChange(): boolean;
-    set placeholder(value: string);
-    get placeholder(): string;
-    /**
-     * Draws the component for the textarea.
-     * @returns {DocumentFragment}
-     */
-    draw(): DocumentFragment;
-    counterElement: HTMLDivElement;
-    native: HTMLDivElement;
-    labelElement: HTMLLabelElement;
-    input: HTMLTextAreaElement;
-    /**
-     * Sets up the event listeners after the component is drawn.
-     */
-    afterDraw(): void;
-    resizeObserver: ResizeObserver;
-    /**
-     * Sets the height of the textarea.
-     */
-    setTextareaHeight: () => void;
-    /**
-     * Updates the counter for the textarea.
-     * @param {Event} e The event object.
-     */
-    counterFn: (e: Event) => void;
-}

package/dist/packages/wje-thumbnail/thumbnail.d.ts

@@ -1,2 +0,0 @@
-import { default as Thumbnail } from './thumbnail.element.js';
-export default Thumbnail;

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

@@ -1,31 +0,0 @@
-import { default as WJElement } from '../wje-element/element.js';
-/**
- * @summary Thumbnail class
- * @documentation https://elements.webjet.sk/components/thumbnail
- * @status stable
- * @augments WJElement
- * @slot thumbnail-slot - The slot for the thumbnail content.
- * @cssproperty [--wje-thumbnail-width=48px] - Defines the width of the thumbnail. Accepts any valid CSS length unit such as `px`, `rem`, or `%`.
- * @cssproperty [--wje-thumbnail-height=48px] - Specifies the height of the thumbnail. Accepts any valid CSS length unit.
- * @cssproperty [--wje-thumbnail-border-radius=var(--wje-border-radius-medium)] - Sets the border radius of the thumbnail, determining how rounded its corners appear. Accepts any valid CSS length unit or CSS variable.
- * @tag thumbnail-element
- */
-export default class Thumbnail extends WJElement {
-    /**
-     * Returns the CSS stylesheet for the component.
-     * @static
-     * @returns {CSSStyleSheet} The CSS stylesheet
-     */
-    static get cssStyleSheet(): CSSStyleSheet;
-    /**
-     * Returns the list of observed attributes.
-     * @static
-     * @returns {Array} An empty array
-     */
-    static get observedAttributes(): any[];
-    /**
-     * Draws the component for the thumbnail.
-     * @returns {object} Document fragment
-     */
-    draw(): object;
-}

package/dist/packages/wje-timeline/timeline.d.ts

@@ -1,2 +0,0 @@
-import { default as Timeline } from './timeline.element.js';
-export default Timeline;

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

@@ -1,25 +0,0 @@
-import { default as WJElement } from '../wje-element/element.js';
-/**
- * `Timeline` is a custom web component that represents a timeline.
- * @summary This element represents a timeline.
- * @documentation https://elements.webjet.sk/components/timeline
- * @status stable
- * @augments WJElement
- * @slot - Slot for the timeline items.
- * @csspart native - The native part of the rating component.
- * @csspart vertical-line - The vertical line part of the rating component.
- * @tag wje-timeline
- */
-export default class Timeline extends WJElement {
-    /**
-     * Returns the CSS stylesheet for the component.
-     * @static
-     * @returns {CSSStyleSheet} The CSS stylesheet
-     */
-    static get cssStyleSheet(): CSSStyleSheet;
-    /**
-     * Draws the component for the timeline.
-     * @returns {DocumentFragment}
-     */
-    draw(): DocumentFragment;
-}

package/dist/packages/wje-timeline-item/timeline-item.d.ts

@@ -1,2 +0,0 @@
-import { default as TimelineItem } from './timeline-item.element.js';
-export default TimelineItem;

package/dist/packages/wje-timeline-item/timeline-item.element.d.ts

@@ -1,27 +0,0 @@
-import { default as WJElement } from '../wje-element/element.js';
-/**
- * The TimelineItem component.
- * @summary This element represents a timeline item.
- * @documentation https://elements.webjet.sk/components/timeline-item
- * @status stable
- * @augments {WJElement}
- * @csspart native - The native part of the timeline item.
- * @csspart content-container - The content container part of the timeline item.
- * @csspart default-icon - The default icon part of the timeline item.
- * @slot - Slot for the content of the timeline item.
- * @slot status - Slot for the status of the timeline item.
- * @tag wje-timeline-item
- */
-export default class TimelineItem extends WJElement {
-    /**
-     * Returns the CSS styles for the component.
-     * @static
-     * @returns {CSSStyleSheet}
-     */
-    static get cssStyleSheet(): CSSStyleSheet;
-    /**
-     * Draws the component for the timeline item.
-     * @returns {DocumentFragment}
-     */
-    draw(): DocumentFragment;
-}

package/dist/packages/wje-toast/toast.d.ts

@@ -1,2 +0,0 @@
-import { default as Toast } from './toast.element.js';
-export default Toast;