wj-elements 0.2.0-alpha.7 → 0.2.0-alpha.8

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

@@ -0,0 +1,119 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `Reorder` is a custom web component that represents a reorder.
+ * It extends from `WJElement`.
+ * @summary This element represents a reorder.
+ * @documentation https://elements.webjet.sk/components/reorder
+ * @status stable
+ * @augments WJElement
+ * @csspart native - The native part of the reorder.
+ * @slot - The default slot for the reorder.
+ * // @fires wje-reorder:change - Event fired when the reorder is changed.
+ * @tag wje-reorder
+ */
+export default class Reorder 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(): Array<string>;
+    dragEl: Element;
+    items: any[];
+    originalIndex: number;
+    isDragging: boolean;
+    offsetX: number;
+    offsetY: number;
+    cloneEl: Node;
+    /**
+     * Draws the component after it is connected to the DOM.
+     * @returns {DocumentFragment}
+     */
+    draw(): DocumentFragment;
+    container: HTMLDivElement;
+    /**
+     * Adds event listeners after the component is drawn.
+     */
+    afterDraw(): void;
+    /**
+     * Attaches event listeners to the element.
+     * @param element
+     */
+    attachEventListeners(element: any): void;
+    /**
+     * Handles the mouse down event.
+     * @param {object} e
+     */
+    mouseDown(e: object): void;
+    /**
+     * Handles the touch start event.
+     * @param e
+     */
+    touchStart(e: any): void;
+    /**
+     * Initializes the dragging process for a reorderable item.
+     * @param {number} clientX The x-coordinate of the mouse pointer when the drag starts.
+     * @param {number} clientY The y-coordinate of the mouse pointer when the drag starts.
+     * @param {HTMLElement} target The target element where the drag event originated.
+     */
+    startDragging(clientX: number, clientY: number, target: HTMLElement): void;
+    originalParent: ParentNode;
+    /**
+     * Handles the mouse move event.
+     * @param e
+     */
+    mouseMove(e: any): void;
+    /**
+     * Handles the `touchmove` event and updates the position of the dragged element.
+     * @param {TouchEvent} e The touch event containing touch position data.
+     */
+    touchMove(e: TouchEvent): void;
+    /**
+     * Updates the position of the dragged element and handles reordering logic based on the mouse position.
+     * @param {number} pageX The x-coordinate of the mouse pointer relative to the viewport during the move event.
+     * @param {number} pageY The y-coordinate of the mouse pointer relative to the viewport during the move event.
+     */
+    moveElement(pageX: number, pageY: number): void;
+    /**
+     * Handles the mouse up event.
+     */
+    mouseUp(): void;
+    /**
+     * Handles the touch end event.
+     */
+    touchEnd(): void;
+    /**
+     * Stops dragging the element.
+     */
+    stopDragging(): void;
+    /**
+     * Prevents the default behavior of the `dragstart` event.
+     * @param {DragEvent} e The drag event triggered when a drag operation starts.
+     */
+    dragStart(e: DragEvent): void;
+    /**
+     * Creates a clone of the element.
+     */
+    createClone(): void;
+    /**
+     * Checks if the dragged element is moving down.
+     * @param droppedElement
+     * @returns {boolean}
+     */
+    isMovingDown(droppedElement: any): boolean;
+    /**
+     * Dispatches a custom event to signal that a reordering operation has occurred.
+     * @param {number} from The original index of the dragged item.
+     * @param {number} to The new index of the dragged item after reordering.
+     * @param {Array<number>} order The updated order of items after the reordering.
+     * // @fires wje-reorder:change - Dispatched when the reordering is completed.
+     * The event includes details about the initial position, the new position, and the new order.
+     */
+    dispatchChange(from: number, to: number, order: Array<number>, orderElements: any): void;
+}

package/dist/packages/wje-reorder-dropzone/reorder-dropzone.d.ts

@@ -0,0 +1,2 @@
+import { default as ReorderDropzone } from './reorder-dropzone.element';
+export default ReorderDropzone;

package/dist/packages/wje-reorder-dropzone/reorder-dropzone.element.d.ts

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

package/dist/packages/wje-reorder-handle/reorder-handle.d.ts

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

package/dist/packages/wje-reorder-handle/reorder-handle.element.d.ts

@@ -0,0 +1,84 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `ReorderHandle` is a custom web component that represents a reorder handle.
+ * @summary This element represents a reorder handle.
+ * @documentation https://elements.webjet.sk/components/reorder-handle
+ * @status stable
+ * @augments WJElement
+ * @csspart native - The native part of the reorder handle.
+ * @slot - The default slot for the reorder handle.
+ * @tag wje-reorder-handle
+ */
+export default class ReorderHandle extends WJElement {
+    /**
+     * Returns the CSS styles for the component.
+     * @returns {*}
+     */
+    static get cssStyleSheet(): any;
+    /**
+     * Returns the list of attributes to observe for changes.
+     * @returns {string[]}
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Draws the component.
+     * @returns {DocumentFragment}
+     */
+    draw(): DocumentFragment;
+    /**
+     * Draws the component after it is connected to the DOM.
+     */
+    afterDraw(): void;
+    /**
+     * Handles the attribute changes.
+     * @param {DragEvent} e
+     */
+    startDrag(e: DragEvent): void;
+    /**
+     * Handles the touch start event.
+     * @param {TouchEvent} e
+     */
+    startTouchDrag(e: TouchEvent): void;
+    /**
+     * Initiates the drag-and-drop action for a sortable element.
+     * @param {number} clientX The x-coordinate of the mouse pointer at the start of the drag action.
+     * @param {number} clientY The y-coordinate of the mouse pointer at the start of the drag action.
+     */
+    startDragAction(clientX: number, clientY: number): void;
+    /**
+     * Retrieves the closest draggable element based on attribute conditions.
+     * If the element has a "parent" attribute, the method attempts to find the closest ancestor
+     * matching the CSS selector specified in the attribute. If no such ancestor exists,
+     * the method defaults to returning the immediate parent element.
+     * @returns {Element|null} The closest matching ancestor or the immediate parent element if no match is found, or null if the element has no parent.
+     */
+    getDraggable(): Element | null;
+    /**
+     * Retrieves the nearest dropzone element based on the element's attributes or its parent element.
+     * @param {HTMLElement} element The HTML element for which the dropzone is being determined.
+     * @returns {HTMLElement|null} The nearest dropzone element if found; otherwise, the parent element or null.
+     */
+    getDropzone(element: HTMLElement): HTMLElement | null;
+    /**
+     * Retrieves the closest dropzone element at the specified coordinates.
+     * @param {number} clientX The x-coordinate relative to the viewport.
+     * @param {number} clientY The y-coordinate relative to the viewport.
+     * @returns {HTMLElement|null} - The closest dropzone element matching the `dropzone` attribute, or `null` if none is found.
+     */
+    getClosestDropzone(clientX: number, clientY: number): HTMLElement | null;
+    /**
+     * Retrieves all elements at the specified coordinates, including those within shadow DOMs.
+     * @param {number} x The x-coordinate relative to the viewport.
+     * @param {number} y The y-coordinate relative to the viewport.
+     * @param {Document|ShadowRoot} [root] The root context in which to search. Defaults to the main document.
+     * @param {Set<Node>} [visited] A set of already visited nodes to avoid infinite recursion in nested shadow DOMs.
+     * @returns {HTMLElement[]} An array of all elements found at the specified coordinates, including shadow DOM elements.
+     */
+    getElementsFromPointAll(x: number, y: number, root?: Document | ShadowRoot, visited?: Set<Node>): HTMLElement[];
+    /**
+     * Re-indexes child elements of the given container by setting their dataset index.
+     * @param {HTMLElement} container The container element whose children are to be re-indexed.
+     * @returns {void}
+     */
+    reIndexItems(container: HTMLElement): void;
+}

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

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

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

@@ -0,0 +1,24 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `ReorderItem` is a custom web component that represents a reorder item.
+ * @summary This element represents a reorder item.
+ * @documentation https://elements.webjet.sk/components/reorder-item
+ * @status stable
+ * @augments WJElement
+ * @csspart native-reorder-item - The native part of the reorder item.
+ * @csspart handle-part - The handle part of the reorder item when the handle slot is present.
+ * @slot - The default slot for the reorder item.
+ * @tag wje-reorder-item
+ */
+export default class ReorderItem extends WJElement {
+    /**
+     * Returns the CSS stylesheet for the component.
+     * @returns {CSSStyleSheet} The CSS stylesheet.
+     */
+    static get cssStyleSheet(): CSSStyleSheet;
+    /**
+     * Returns the list of observed attributes.
+     * @returns {DocumentFragment}
+     */
+    draw(): DocumentFragment;
+}

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

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

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

@@ -0,0 +1,22 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `Route` is a custom web component that represents a route in a routing system.
+ * @summary This element represents a route in a routing system.
+ * @documentation https://elements.webjet.sk/components/route
+ * @status stable
+ * @augments WJElement
+ * @tag wje-route
+ */
+export default class Route extends WJElement {
+    /**
+     * Returns the list of attributes to observe for changes.
+     * @static
+     * @returns {Array<string>}
+     */
+    static get observedAttributes(): Array<string>;
+    /**
+     * Draws the component for the route.
+     * @returns {DocumentFragment}
+     */
+    draw(): DocumentFragment;
+}

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

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

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

@@ -0,0 +1,43 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `Routerx` is a custom web component that represents a router in a routing system.
+ * @summary This element represents a router in a routing system.
+ * @documentation https://elements.webjet.sk/components/router
+ * @status stable
+ * @augments {WJElement}
+ * @tag wje-router
+ */
+export default class Routerx extends WJElement {
+    /**
+     * Returns the list of attributes to observe for changes.
+     * @static
+     * @returns {Array<string>}
+     */
+    static get observedAttributes(): Array<string>;
+    set routes(value: any);
+    get routes(): any;
+    get rootElement(): Element;
+    /**
+     * Sets up the router after the component is drawn.
+     */
+    beforeDraw(): void;
+    router: any;
+    unbindIntercept: any;
+    /**
+     * Parses an element and returns an object representation.
+     * @param {Element} element The element to parse.
+     * @returns {object} The object representation of the element.
+     */
+    parseElement(element: Element): object;
+    /**
+     * Sets the breadcrumb for the transition.
+     * @param {object} transition The transition object.
+     */
+    setBreadcrumb: (transition: object) => void;
+    /**
+     * Resets the scroll position.
+     * @param {object} transition The transition object.
+     */
+    resetScrollPosition: (transition: object) => void;
+    #private;
+}

package/dist/packages/wje-router-link/router-link.d.ts

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

package/dist/packages/wje-router-link/router-link.element.d.ts

@@ -0,0 +1,31 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `RouterLink` is a custom web component that represents a router link in a routing system.
+ * @summary This element represents a router link in a routing system.
+ * @documentation https://elements.webjet.sk/components/router-link
+ * @status stable
+ * @augments {WJElement}
+ * @slot - The default slot for the router link.
+ * @tag wje-router-link
+ */
+export default class RouterLink 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(): Array<string>;
+    /**
+     * Draws the component for the router link.
+     * @returns {DocumentFragment}
+     */
+    draw(): DocumentFragment;
+    afterDraw(context: any, appStore: any, attributes: any): void;
+    unbindRouterLinks: any;
+}

package/dist/packages/wje-router-outlet/router-outlet.d.ts

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

package/dist/packages/wje-router-outlet/router-outlet.element.d.ts

@@ -0,0 +1,16 @@
+/**
+ * `Route` is a custom web component that represents a route in a routing system.
+ * @summary This element represents a route in a routing system.
+ * @documentation https://elements.webjet.sk/components/route
+ * @status stable
+ * @augments AnimatedOutlet
+ * @tag wje-router-outlet
+ */
+export default class RouterOutlet {
+    /**
+     * The class name for the component.
+     * @type {string}
+     */
+    className: string;
+    connectedCallback(): void;
+}

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

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

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

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

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

@@ -0,0 +1,2 @@
+import { Select } from './select.element.js';
+export default Select;