wj-elements 0.1.151 → 0.1.152

package/dist/packages/wje-infinite-scroll/infinite-scroll.d.ts

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

package/dist/packages/wje-infinite-scroll/infinite-scroll.element.d.ts

@@ -0,0 +1,173 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `InfiniteScroll` is a custom web component that represents an infinite scroll.
+ * It extends from `WJElement`.
+ * @summary This element allows users to scroll through a potentially infinite amount of content.
+ * @documentation https://elements.webjet.sk/components/infinite-scroll
+ * @status stable
+ * @augments {WJElement}
+ * @csspart loader - The loader part of the infinite scroll.
+ * @slot - The default slot for the infinite scroll.
+ * @cssproperty [--wje-infinite-scroll-width=100%] - Sets the width of the infinite scroll container. his property determines how wide the infinite scroll area will be relative to its parent element. Accepts any valid CSS width value, such as percentages (`%`), pixels (`px`), or viewport units (`vw`). The default value is `100%`, which makes it span the full width of its container.
+ * @cssproperty [--wje-infinite-scroll-height=300px] - Defines the height of the infinite scroll container. This property specifies how tall the infinite scroll area should be. Accepts any valid CSS height value, such as pixels (`px`), percentages (`%`), or viewport units (`vh`). The default value is `300px`, providing a fixed height suitable for most use cases.
+ * //@fires wje-infinite-scroll:click-item - Event fired when an item is clicked.
+ * @tag wje-infinite-scroll
+ */
+export default class InfiniteScroll extends WJElement {
+    /**
+     * Returns the CSS styles for the component.
+     * @static
+     * @returns {CSSStyleSheet}
+     */
+    static get cssStyleSheet(): CSSStyleSheet;
+    /**
+     * Returns the list of attributes to observe for changes.
+     * @static
+     * @returns {Array<string>}
+     */
+    static get observedAttributes(): string[];
+    totalPages: number;
+    isLoading: any[];
+    _response: {};
+    iterate: Element;
+    _infiniteScrollTemplate: any;
+    _abortController: AbortController;
+    _signal: AbortSignal;
+    /**
+     * Dependencies of the InfiniteScroll component.
+     * @param value
+     */
+    set infiniteScrollTemplate(value: null);
+    /**
+     * Getter for the infiniteScrollTemplate property.
+     * @returns {null}
+     */
+    get infiniteScrollTemplate(): null;
+    /**
+     * Dependencies of the InfiniteScroll component.
+     * @param value
+     */
+    set response(value: any);
+    /**
+     * Getter for the response property.
+     * @returns {*|{}}
+     */
+    get response(): any;
+    /**
+     * Dependencies of the InfiniteScroll component.
+     * @param value
+     */
+    set objectName(value: string);
+    get objectName(): string;
+    /**
+     * Prepares the component for updates before it is drawn.
+     * This method handles the removal of templates for iteration, adjusts the height styling of the component,
+     * and manages abort signals for loading operations.
+     * @returns {void} No return value.
+     */
+    beforeDraw(): void;
+    /**
+     * Creates and returns a document fragment containing the structure for an infinite scroll component.
+     * The structure includes native elements, slots for customization, and optional loading content.
+     * @returns {DocumentFragment} The document fragment containing the component's DOM structure.
+     */
+    draw(): DocumentFragment;
+    loadingEl: HTMLDivElement;
+    endingEl: HTMLSlotElement;
+    /**
+     * Called after the component has been drawn.
+     */
+    afterDraw(): Promise<void>;
+    queryParams: any;
+    size: any;
+    currentPage: number;
+    _loading: Promise<void>;
+    /**
+     * Attaches a scroll event listener to the current object.
+     * The `scrollEvent` function binds the `onScroll` method to the 'scroll' event
+     * of the current object. This enables handling of scroll events for
+     * specific functionality such as updating UI elements, loading content dynamically,
+     * or tracking user interaction with scrollable content.
+     */
+    scrollEvent: () => void;
+    /**
+     * A function that removes the scroll event listener from the current context.
+     * This function is used to unbind the `onScroll` event listener
+     * from the `scroll` event of the current object. It ensures that
+     * the scroll event no longer triggers the `onScroll` handler.
+     * @function
+     */
+    unScrollEvent: () => void;
+    /**
+     * A scroll event handler function that checks the scroll position and triggers loading additional content
+     * when the user scrolls near the bottom of the page.
+     * Properties accessed:
+     * - `scrollTop`: The number of pixels that the content of an element is scrolled vertically.
+     * - `scrollHeight`: The total height of the element's content.
+     * - `clientHeight`: The inner height of the element in pixels, including padding but excluding borders and scrollbars.
+     * Conditions:
+     * - Determines if the scroll position is within 300 pixels of the bottom of the element.
+     * - Verifies that the current page number is less than or equal to the total number of pages.
+     * - Checks if the current page is already in the loading state.
+     * Actions:
+     * - Increments the current page number when the conditions are met.
+     * - Initiates loading for the next page by calling the `loadPages` function.
+     * @param {Event} e The scroll event object.
+     */
+    onScroll: (e: Event) => void;
+    /**
+     * Fetches the pages from the server.
+     * @param {number} page The page number.
+     * @returns {Promise<object>} The response from the server.
+     */
+    getPages(page: number): Promise<object>;
+    /**
+     * Hides the loader.
+     */
+    hideLoader(): void;
+    /**
+     * Displays the loader element by adding the 'show' class to its class list.
+     * This method is useful for indicating a loading or processing state in the UI.
+     * @returns {void} No return value.
+     */
+    showLoader(): void;
+    /**
+     * Checks if there are more pages to load.
+     * @param {number} page The page number.
+     * @returns {boolean} Whether there are more pages to load.
+     */
+    hasMorePages(page: number): boolean;
+    /**
+     * Loads the pages.
+     * @param {number} page The page number.
+     */
+    loadPages(page: number): Promise<void>;
+    parser: DOMParser;
+    placementObj: any;
+    /**
+     * Converts a data item into an HTML element based on a template.
+     * This function takes a data item, interpolates it into a predefined template,
+     * parses the resulting HTML string, and returns the first child element of the parsed HTML content.
+     * @param {object} item The data object to interpolate into the HTML template.
+     * @returns {Element} The first child element generated from the interpolated HTML string.
+     */
+    dataToHtml: (item: object) => Element;
+    /**
+     * A custom implementation of the forEach method designed to iterate over an array of data,
+     * transform each item into an HTML element, and append the element to a specified placement object.
+     * Additionally, it adds an event listener to each generated element for handling click events.
+     * @param {Array} data An array of items to process. Each item is transformed into an HTML element
+     * and appended to the placement object specified in the context of `this`.
+     */
+    customForeach: (data: any[]) => void;
+    /**
+     * Interpolates a string template with values from the provided parameters object.
+     * The template contains placeholders in the format `{{key}}` or `{{key.subkey}}`,
+     * which are replaced with the corresponding values from the `params` object.
+     * Placeholders support dot notation for accessing nested properties within the `params` object.
+     * @param {string} template The string template containing placeholders to be replaced.
+     * @param {object} params The object containing key-value pairs used for substitution in the template.
+     * @returns {string} A string with all placeholders replaced by their respective values from the `params` object.
+     */
+    interpolate: (template: string, params: object) => string;
+}

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

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

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

@@ -0,0 +1,204 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * @summary This class represents a custom input element. It extends the WJElement class and provides additional functionality for handling input.
+ * @documentation https://elements.webjet.sk/components/input
+ * @status stable
+ * @augments WJElement
+ * @csspart native - The native part.
+ * @csspart wrapper - The wrapper part.
+ * @csspart input - The input part.
+ * @csspart clear - The clear part.
+ * @slot start - Slot for content at the start of the input.
+ * @slot end - Slot for content at the end of the input.
+ * @cssproperty [--wje-input-font-family=var(--wje-font-family)] - Defines the font family for the input text.
+ * @cssproperty [--wje-input-background-color=var(--wje-background)] - Specifies the background color of the input field.
+ * @cssproperty [--wje-input-color=var(--wje-color)] - Sets the text color within the input field.
+ * @cssproperty [--wje-input-color-invalid=var(--wje-color-danger)] - Changes the text color when the input value is invalid.
+ * @cssproperty [--wje-input-border-color=var(--wje-border-color)] - Defines the border color of the input field.
+ * @cssproperty [--wje-input-border-color-focus=var(--wje-color-primary)] - Specifies the border color when the input is focused.
+ * @cssproperty [--wje-input-border-width=1px] - Sets the width of the input border.
+ * @cssproperty [--wje-input-border-style=solid] - Defines the border style of the input (e.g., solid, dashed).
+ * @cssproperty [--wje-input-border-radius=4px] - Specifies the border radius, creating rounded corners.
+ * @cssproperty [--wje-input-margin-bottom=.5rem] - Adds spacing below the input field.
+ * @cssproperty [--wje-input-line-height=20px] - Sets the line height of the text within the input field.
+ * @cssproperty [--wje-input-slot-padding-inline=.5rem] - Controls the padding on the left and right of the input slot content.
+ * // @fires wje-input:input - Dispatched when the input value changes.
+ * // @fires wje-input:clear - Dispatched when the input is cleared.
+ */
+export default class Input extends WJElement {
+    /**
+     * Getter for the cssStyleSheet attribute.
+     * @returns {CSSStyleSheet} The CSS style sheet of the input element.
+     */
+    static get cssStyleSheet(): CSSStyleSheet;
+    /**
+     * Getter for the observedAttributes attribute of the input element.
+     * @returns {Array} The attributes to observe for changes.
+     */
+    static get observedAttributes(): any[];
+    /**
+     * Whether the input is associated with a form.
+     * @type {boolean}
+     */
+    static formAssociated: boolean;
+    /**
+     * Setter for the invalid attribute.
+     * @param {boolean} isInvalid Whether the input is invalid.
+     */
+    set invalid(isInvalid: boolean);
+    /**
+     * Getter for the invalid attribute.
+     * @returns {boolean} Whether the attribute is present.
+     */
+    get invalid(): boolean;
+    pristine: boolean;
+    internals: ElementInternals;
+    observer: MutationObserver;
+    observeFunction: (mutations: any) => void;
+    /**
+     * 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;
+    /**
+     * Getter for the customErrorDisplay attribute.
+     * @returns {boolean} Whether the attribute is present.
+     */
+    get customErrorDisplay(): boolean;
+    /**
+     * Getter for the validateOnChange attribute.
+     * @returns {boolean} Whether the attribute is present.
+     */
+    get validateOnChange(): boolean;
+    /**
+     * Getter for the form attribute.
+     * @returns {HTMLFormElement} The form the input is associated with.
+     */
+    get form(): HTMLFormElement;
+    /**
+     * Getter for the name attribute.
+     * @returns {string} The name of the input element.
+     */
+    get name(): string;
+    /**
+     * Getter for the type attribute.
+     * @returns {string} The type of the input element.
+     */
+    get type(): string;
+    /**
+     * Getter for the validity attribute.
+     * @returns {ValidityState} The validity state of the input.
+     */
+    get validity(): ValidityState;
+    /**
+     * Getter for the validationMessage attribute.
+     * @returns {string} The validation message of the input element.
+     */
+    get validationMessage(): string;
+    /**
+     * Getter for the willValidate attribute.
+     * @returns {boolean} Whether the input will be validated.
+     */
+    get willValidate(): boolean;
+    /**
+     * @summary Setter for the defaultValue attribute.
+     * This method sets the 'value' attribute of the custom input element to the provided value.
+     * The 'value' attribute represents the default value of the input element.
+     * @param {string} value The value to set as the default value.
+     */
+    set defaultValue(value: string);
+    /**
+     * @summary Getter for the defaultValue attribute.
+     * This method retrieves the 'value' attribute of the custom input element.
+     * The 'value' attribute represents the default value of the input element.
+     * If the 'value' attribute is not set, it returns an empty string.
+     * @returns {string} The default value of the input element.
+     */
+    get defaultValue(): string;
+    beforeDraw(): void;
+    /**
+     * Draws the input element.
+     * @returns {DocumentFragment} The drawn input.
+     */
+    draw(): DocumentFragment;
+    clear: HTMLElement;
+    native: HTMLDivElement;
+    labelElement: HTMLLabelElement;
+    input: HTMLInputElement;
+    errorMessage: HTMLDivElement;
+    /**
+     * Runs after the input is drawn to the DOM.
+     */
+    afterDraw(): void;
+    /**
+     * @summary Displays the validation message for the input.
+     * If the input has a slot named 'error', it sets the text content of the element with attribute 'error-message' inside the slot to the validation message.
+     * If the input does not have an 'error' slot, it sets the text content of the errorMessage property to the validation message.
+     */
+    showInvalidMessage(): void;
+    /**
+     * @summary Validates the input.
+     * This method checks the validity state of the input. If the input is not valid, it iterates over the validity state object.
+     * For each invalid state, it constructs an attribute name and checks if the input has this attribute.
+     * If the input has the attribute, it sets the validation error to the state and the error message to the attribute value.
+     * If the input does not have the attribute, it sets the error message to the default validation message of the input.
+     * It then sets the validity in the form internals to an object with the validation error as key and true as value, and the error message.
+     * If the input is valid, it sets the validity in the form internals to an empty object.
+     */
+    validateInput(): void;
+    validationError: string;
+    /**
+     * @summary Propagates the validation state of the input.
+     * This method sets the 'invalid' property of the input based on its 'pristine' state and its internal validity state.
+     * If the input is invalid and the 'customErrorDisplay' property is true, it dispatches an 'invalid' event.
+     */
+    propagateValidation(): void;
+    /**
+     * Checks whether the input has a slot.
+     * @param {HTMLElement} el The element to check.
+     * @param {string} slotName The name of the slot to check for.
+     * @returns {boolean} Whether the input has the slot.
+     */
+    hasSlot(el: HTMLElement, slotName?: string): boolean;
+    /**
+     * @summary Callback function that is called when the custom element is associated with a form.
+     * This function adds an event listener to the form's submit event, which validates the input and propagates the validation.
+     * @param {HTMLFormElement} form The form the custom element is associated with.
+     */
+    formAssociatedCallback(form: HTMLFormElement): void;
+    /**
+     * The formResetCallback method is a built-in lifecycle callback that gets called when a form gets reset.
+     * This method is responsible for resetting the value of the custom input element to its default value.
+     * It also resets the form value and validity state in the form internals.
+     * @function
+     */
+    formResetCallback(): void;
+    /**
+     * The formStateRestoreCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is restored.
+     * This method is responsible for restoring the value of the custom input element to its saved state.
+     * It also restores the form value and validity state in the form internals to their saved states.
+     * @param {object} state The saved state of the custom input element.
+     * @function
+     */
+    formStateRestoreCallback(state: object): void;
+    /**
+     * The formStateSaveCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is saved.
+     * This method is responsible for saving the value of the custom input element.
+     * @returns {object} The saved state of the custom input element.
+     * @function
+     */
+    formStateSaveCallback(): object;
+    /**
+     * The formDisabledCallback method is a built-in lifecycle callback that gets called when the disabled state of a form-associated custom element changes.
+     * This method is not implemented yet.
+     * @param {boolean} disabled The new disabled state of the custom input element.
+     * @function
+     */
+    formDisabledCallback(disabled: boolean): void;
+}

package/dist/packages/wje-input-file/input-file.d.ts

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

package/dist/packages/wje-input-file/input-file.element.d.ts

@@ -0,0 +1,50 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `InputFile` is a custom web component that represents a file input.
+ * @summary This element represents a file input.
+ * @documentation https://elements.webjet.sk/components/input-file
+ * @status stable
+ * @augments {WJElement}
+ * @csspart native - The native file input wrapper.
+ * @csspart input - The text input.
+ * @csspart file-input - The file input element.
+ * // @fires wje-input-file:change - Event fired when the file input changes.
+ * @tag wje-input-file
+ */
+export default class InputFile extends WJElement {
+    /**
+     * Returns the CSS stylesheet.
+     * @static
+     * @returns {object} styles
+     */
+    static get cssStyleSheet(): any;
+    /**
+     * Returns the observed attributes.
+     * @static
+     * @returns {Array} An empty array
+     */
+    static get observedAttributes(): any[];
+    _value: string;
+    /**
+     * @summary Sets the value of the input file.
+     * @param {string} value The value to set for the input file.
+     */
+    set value(value: string);
+    /**
+     * Gets the value of the input file.
+     * @returns {string}
+     */
+    get value(): string;
+    /**
+     * Draws the component.
+     * @returns {object} Document fragment
+     */
+    draw(): object;
+    native: HTMLDivElement;
+    input: HTMLElement;
+    fileInput: HTMLInputElement;
+    /**
+     * After draw method for the InputFile class.
+     */
+    afterDraw(): void;
+}

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

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

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

@@ -0,0 +1,68 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `Item` is a custom web component that represents an item.
+ * @summary This element represents an item.
+ * @documentation https://elements.webjet.sk/components/item
+ * @status stable
+ * @augments {WJElement}
+ * @csspart native - The native part
+ * @csspart inner - The inner part
+ * @slot start - The start slot
+ * @slot end - The end slot
+ * @slot error - The error slot
+ * @slot helper - The helper slot
+ * @cssproperty [--wje-item-background=var(--wje-background)] - Sets the background color of the item. Accepts any valid CSS color value.
+ * @cssproperty [--wje-item-color=var(--wje-color)] - Defines the text color for the item. Accepts any valid CSS color value.
+ * @cssproperty [--wje-item-padding-start=var(--wje-padding)] - Specifies the left padding of the item. Accepts any valid CSS length.
+ * @cssproperty [--wje-item-padding-end=var(--wje-padding)] - Specifies the right padding of the item. Accepts any valid CSS length.
+ * @cssproperty [--wje-item-padding-top=var(--wje-padding)] - Specifies the top padding of the item. Accepts any valid CSS length.
+ * @cssproperty [--wje-item-padding-bottom=var(--wje-padding)] - Specifies the bottom padding of the item. Accepts any valid CSS length.
+ * @cssproperty [--wje-item-inner-padding-start=var(--wje-padding)] - Specifies the left inner padding of the item. Accepts any valid CSS length.
+ * @cssproperty [--wje-item-inner-padding-end=var(--wje-padding)] - Specifies the right inner padding of the item. Accepts any valid CSS length.
+ * @cssproperty [--wje-item-inner-padding-top=var(--wje-padding)] - Specifies the top inner padding of the item. Accepts any valid CSS length.
+ * @cssproperty [--wje-item-inner-padding-bottom=var(--wje-padding)] - Specifies the bottom inner padding of the item. Accepts any valid CSS length.
+ * @cssproperty [--wje-item-border-radius=var(--wje-border-radius)] - Defines the border radius, providing rounded corners for the item.
+ * @cssproperty [--wje-item-border-width=var(--wje-border-width)] - Sets the border width of the item. Accepts any valid CSS length.
+ * @cssproperty [--wje-item-border-style=var(--wje-border-style)] - Specifies the style of the border, such as `solid`, `dashed`, or `dotted`.
+ * @cssproperty [--wje-item-border-color=var(--wje-border-color)] - Defines the color of the item's border. Accepts any valid CSS color value.
+ * @cssproperty [--wje-item-min-height=var(--wje-min-height)] - Sets the minimum height of the item to ensure consistent layout.
+ * @cssproperty [--wje-item-transition=var(--wje-transition)] - Specifies the transition effects for the item, such as for hover or focus states.
+ * @cssproperty [--wje-item-inner-box-shadow=var(--wje-box-shadow)] - Adds a shadow effect inside the item for a 3D appearance.
+ * @tag wje-item
+ */
+export default class Item extends WJElement {
+    /**
+     * Returns the CSS styles for the component.
+     * @static
+     * @returns {object} styles
+     */
+    static get cssStyleSheet(): any;
+    labelColorStyles: {};
+    itemStyles: Map<any, any>;
+    inheritedAriaAttributes: {};
+    multipleInputs: boolean;
+    focusable: boolean;
+    button: boolean;
+    detailIcon: string;
+    disabled: boolean;
+    counter: boolean;
+    routerDirection: string;
+    type: string;
+    /**
+     * Returns the CSS styles for the component.
+     * @returns {boolean}
+     */
+    isClickable(): boolean;
+    /**
+     * Draws the component for the item.
+     * @returns {DocumentFragment}
+     */
+    draw(): DocumentFragment;
+    /**
+     * Determines if the given element or any of its ancestors matches the specified selector.
+     * @param {string} selector The CSS selector to match against the element's ancestors.
+     * @param {HTMLElement} el The element from which to start the search.
+     * @returns {boolean} - Returns `true` if the element or one of its ancestors matches the selector; otherwise, `false`.
+     */
+    hostContext: (selector: string, el: HTMLElement) => boolean;
+}

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

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