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

package/dist/packages/wje-sliding-container/sliding-container.element.d.ts

@@ -0,0 +1,265 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * @summary SlidingContainer is a custom web component that extends WJElement.
+ * @documentation https://elements.webjet.sk/components/SlidingContainer
+ * @status stable
+ * @augments WJElement
+ * @csspart - Styles the element.
+ * @slot - The default slot for the SlidingContainer.
+ * @property {string} maxWidth - The maximum width of the SlidingContainer.
+ * @property {string} maxHeight - The maximum height of the SlidingContainer.
+ * @property {string} trigger - The trigger for the SlidingContainer.
+ * @property {string} direction - Specifies the sliding direction of the container (e.g., 'left' or 'right').
+ * @property {string} variant - Determines how the SlidingContainer behaves, such as 'over' or 'in-place'.
+ * @property {string} screenBreakPoint - The width (in pixels) at which the SlidingContainer switches to the "over" variant for smaller screens.
+ * @property {boolean} removeChildAfterClose - Removes the child after the SlidingContainer is closed.
+ * @property {string} animationDuration - Specifies the duration (in milliseconds) of the sliding animation.
+ * @property {string} animationEasing - Specifies the easing function used for the sliding animation (e.g., 'linear', 'ease-in', 'ease-out').
+ * @property {boolean} hasOpacity - Sets the opacity of the SlidingContainer.
+ * @tag wje-sliding-container
+ * @example
+ * <wje-sliding-container trigger="test-resize-container-event-right" id="left-in-place" direction="left" max-width="100px" max-height="100%">
+ *    <wje-card>
+ *       <wje-card-header>
+ *        <wje-card-subtitle>CONTENT Subtitle</wje-card-subtitle>
+ *       <wje-card-title>CONTENT Title</wje-card-title>
+ *      </wje-card-header>
+ *     <wje-card-content>
+ *        CONTENT Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ *    </wje-card-content>
+ * </wje-card>
+ * </wje-sliding-container>
+ */
+export default class SlidingContainer extends WJElement {
+    /**
+     * Returns the observed attributes for the component.
+     * @returns {string[]}
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Returns the CSS styles for the component.
+     * @static
+     * @returns {CSSStyleSheet}
+     */
+    static get cssStyleSheet(): CSSStyleSheet;
+    _isOpen: boolean;
+    _lastCaller: EventTarget;
+    _resizeObserver: ResizeObserver;
+    /**
+     * Sets the 'variant' attribute to the specified value.
+     * @param {string} value The value to set for the 'variant' attribute.
+     */
+    set variant(value: string);
+    /**
+     * Retrieves the value of the "variant" attribute. If the attribute is not set,
+     * it returns the default value 'in-place'.
+     * @returns {string} The variant value or the default value 'in-place'.
+     */
+    get variant(): string;
+    /**
+     * Sets the maximum width of an element by updating the 'max-width' attribute.
+     * @param {string} value The maximum width value to be set (e.g., '100px', '50%', etc.).
+     */
+    set maxWidth(value: string);
+    /**
+     * Gets the maximum width value of the element.
+     * Retrieves the value of the 'max-width' attribute. If the attribute is not set, it defaults to 'auto'.
+     * @returns {string} The maximum width value of the element or 'auto' if the attribute is not defined.
+     */
+    get maxWidth(): string;
+    /**
+     * Sets the maximum height for the element.
+     * @param {string} value The maximum height value to be applied to the element. This can include units such as "px", "em", "%", etc.
+     */
+    set maxHeight(value: string);
+    /**
+     * Retrieves the maximum height value of the element, or returns 'auto' if not set.
+     * @returns {string} The maximum height value or 'auto' if the attribute is not specified.
+     */
+    get maxHeight(): string;
+    /**
+     * Sets the 'trigger' attribute for the element.
+     * @param {string} value The value to set for the 'trigger' attribute.
+     */
+    set trigger(value: string);
+    /**
+     * Retrieves the value of the 'trigger' attribute. If the attribute is not set, it defaults to 'sliding-container'.
+     * @returns {string} The value of the 'trigger' attribute or the default value 'sliding-container' if not defined.
+     */
+    get trigger(): string;
+    /**
+     * Sets the direction attribute for the element.
+     * @param {string} value The direction value to be assigned. Possible values are typically 'ltr' (left-to-right), 'rtl' (right-to-left), or 'auto'.
+     */
+    set direction(value: string);
+    /**
+     * Retrieves the direction attribute of the instance.
+     * If the direction attribute is not set, it defaults to 'right'.
+     * @returns {string} The value of the direction attribute or 'right' if not set.
+     */
+    get direction(): string;
+    /**
+     * Sets the value of the `remove-child-after-close` attribute.
+     * This attribute determines if a child element should be removed after a close operation.
+     * @param {boolean|string} value The value to set for the `remove-child-after-close` attribute. The value can be a boolean or a string representation of a boolean.
+     */
+    set removeChildAfterClose(value: boolean | string);
+    /**
+     * Gets the value indicating whether the child element should be removed after closing.
+     *
+     * This property checks the presence of the 'remove-child-after-close' attribute on the element.
+     * Returns `false` if the attribute does not exist.
+     * @returns {boolean} True if the 'remove-child-after-close' attribute is present, otherwise false.
+     */
+    get removeChildAfterClose(): boolean;
+    /**
+     * Sets the screen break point value to determine responsive behavior.
+     * @param {string} value The value to set as the screen break point.
+     */
+    set screenBreakPoint(value: string);
+    /**
+     * Retrieves the value of the 'screen-break-point' attribute.
+     * @returns {string} The value of the 'screen-break-point' attribute.
+     */
+    get screenBreakPoint(): string;
+    /**
+     * Sets the duration of the animation by updating the `animation-duration` attribute.
+     * @param {string} value The duration value for the animation, specified in a format
+     * such as seconds (e.g., "2s") or milliseconds (e.g., "200ms").
+     */
+    set animationDuration(value: string);
+    /**
+     * Gets the animation duration for an element.
+     * It retrieves the value of the 'animation-duration' attribute if present; otherwise, it defaults to '500'.
+     * @returns {string} The value of the animation duration, either from the attribute or the default '500'.
+     */
+    get animationDuration(): string;
+    /**
+     * Sets the easing function for the animation.
+     * @param {string} value The easing function to use for the animation. This can be any valid CSS timing function such as "ease", "linear", "ease-in", "ease-out", etc.
+     */
+    set animationEasing(value: string);
+    /**
+     * Retrieves the easing function for the animation.
+     * @returns {string} The value of the 'animation-easing' attribute if set, otherwise defaults to 'linear'.
+     */
+    get animationEasing(): string;
+    /**
+     * Determines if the element has an 'has-opacity' attribute.
+     * @returns {boolean} True if the element has the 'has-opacity' attribute, otherwise false.
+     */
+    get hasOpacity(): boolean;
+    /**
+     * Sets the value of the 'add-to-height' attribute.
+     * This attribute is used to modify or adjust the height dynamically.
+     * @param {string} value The value to be assigned to the 'add-to-height' attribute.
+     */
+    set addToHeight(value: string);
+    /**
+     * Retrieves the value of the 'add-to-height' attribute from the element.
+     * If the attribute is not set, it defaults to '0'.
+     * @returns {string} The value of the 'add-to-height' attribute or '0' if the attribute is not present.
+     */
+    get addToHeight(): string;
+    /**
+     * Determines whether the current state is open.
+     * @returns {boolean} True if the state is open, otherwise false.
+     */
+    get isOpen(): boolean;
+    /**
+     * Executes before drawing the element.
+     */
+    beforeDraw(): void;
+    /**
+     * 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: object, store: object, params: object): DocumentFragment;
+    transparentDiv: HTMLDivElement;
+    wrapperDiv: HTMLDivElement;
+    nativeElement: HTMLDivElement;
+    /**
+     * Performs actions after the element is drawn on the screen.
+     * Attaches an event listener to the document based on the specified trigger.
+     * Sets the variant to "over" if the document width is smaller than the screen break point.
+     * Calls the checkForVariant method with the current variant.
+     */
+    afterDraw(): void;
+    /**
+     * Creates and returns a styled close button element with an icon,
+     * including an event listener to trigger the close method.
+     * @returns {HTMLElement} The close button element configured with styles, an icon, and event listener.
+     */
+    htmlCloseButton(): HTMLElement;
+    /**
+     * Retrieves the parent element of the current element.
+     * If the parent element is not found, it attempts to find the root host element.
+     * @returns {Element|null} The parent element or the root host element if no parent exists. Returns null if neither is found.
+     */
+    getParentElement(): Element | null;
+    /**
+     * Adjusts the position and dimensions of the current element based on the specified variant.
+     *
+     * The method handles modifications to the element's positioning style, aligns it relative to its parent,
+     * and manages alignment to its siblings based on the specified direction.
+     * @param {string} variant The variant to determine how the element should be updated. For example, when set to 'over', specific adjustments to the position and size are performed.
+     * @returns {void} No value is returned, the method modifies the element's style properties directly.
+     */
+    checkForVariant(variant: string): void;
+    /**
+     * Triggers the event based on the target element.
+     * If the target element is different from the last caller, it refreshes the children by calling the `open` method.
+     * If the target element is the same as the last caller, it toggles the state by calling the `toggle` method.
+     * @param {Event} e The event object.
+     */
+    triggerEvent: (e: Event) => Promise<void>;
+    /**
+     * Executes before the element is opened.
+     */
+    beforeOpen(e: any): void;
+    /**
+     * Callback function called after the element is opened.
+     */
+    afterOpen(e: any): void;
+    /**
+     * Executes before closing the element.
+     */
+    beforeClose(e: any): void;
+    /**
+     * Callback function that is called after the container is closed.
+     */
+    afterClose(e: any): void;
+    /**
+     * Animates the transition of elements with specified options, toggling the visibility and/or dimensions
+     * of the associated elements based on their current state.
+     *
+     * This method handles both forward and reverse animations for two elements (`transparentDiv` and `nativeElement`)
+     * with optional opacity changes. It ensures smooth transitioning by canceling any previous animations on the provided
+     * elements before initiating a new animation sequence.
+     * @returns {Promise<void>} A promise that resolves when the transition animation is completed.
+     */
+    doAnimateTransition(): Promise<void>;
+    animation: any;
+    nativeAnimation: any;
+    /**
+     * Opens the sliding container by performing necessary preparatory and transitional operations.
+     * @param {Event} e The event that triggered the open operation.
+     * @returns {Promise<void>} A promise that resolves when the open operation, including animations and subsequent handlers, is complete.
+     */
+    open(e: Event): Promise<void>;
+    /**
+     * Closes the sliding container and performs associated operations such as animations and event dispatches.
+     * @param {Event} e The event object associated with the close action.
+     * @returns {Promise<void>} A promise that resolves when the closing operation, including animations and child element removal, is completed.
+     */
+    close(e: Event): Promise<void>;
+    /**
+     * Toggles the state between open and closed.
+     * @param {Event} e The event object triggering the toggle.
+     * @returns {Promise<void>} A promise that resolves once the toggle operation (open or close) is complete.
+     */
+    toggle(e: Event): Promise<void>;
+}

package/dist/packages/wje-split-view/service/service.d.ts

@@ -0,0 +1 @@
+export function drag(container: any, options: any): void;

package/dist/packages/wje-split-view/split-view.d.ts

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

package/dist/packages/wje-split-view/split-view.element.d.ts

@@ -0,0 +1,65 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `SplitView` is a custom web component that represents a split view.
+ * @summary This element represents a split view.
+ * @documentation https://elements.webjet.sk/components/split-view
+ * @status stable
+ * @augments WJElement
+ * @slot start - Slot for the start view.
+ * @slot end - Slot for the end view.
+ * @slot divider - Slot for the divider.
+ * @csspart wje-divider - The divider of the split view.
+ * @cssproperty [--wje-split-view-divider-area=12px] - Defines the interactive area (hitbox) of the divider for resizing. Accepts any valid CSS length unit (e.g., `px`, `rem`, `%`).
+ * @cssproperty [--wje-split-view-divider-width=4px] - Specifies the visual width of the divider. Controls how thick the divider appears.
+ * @cssproperty [--wje-split-view-min=0%] - Sets the minimum size limit for the split views. Ensures that a view cannot be resized below this value.
+ * @cssproperty [--wje-split-view-max=100%] - Sets the maximum size limit for the split views. Ensures that a view cannot be resized beyond this value.
+ * @cssproperty [--wje-split-view-calc-a=50%] - Represents the calculated size of the first view. This is used to dynamically set the size of the first view.
+ * @cssproperty [--wje-split-view-calc-b=50%] - Represents the calculated size of the second view. This is used to dynamically set the size of the second view.
+ * @cssproperty [--wje-split-view-clamp-a=clamp(var(--wje-split-view-min), var(--wje-split-view-calc-a), var(--wje-split-view-max))] - Clamps the size of the first view between minimum and maximum limits. Ensures the calculated size stays within the defined range.
+ * @cssproperty [--wje-split-view-clamp-b=clamp(var(--wje-split-view-min), var(--wje-split-view-calc-b), var(--wje-split-view-max))] - Clamps the size of the second view between minimum and maximum limits. Ensures the calculated size stays within the defined range.
+ * @cssproperty [--wje-split-view-divider-background=var(--wje-border-color)] - Sets the background color of the divider. Accepts any valid CSS color value (e.g., hex, RGB, or CSS variable).
+ * @cssproperty [--wje-split-view-divider-size=4px] - Defines the overall size of the divider, affecting both its visual and interactive dimensions. Accepts any valid CSS length unit.
+ * @tag wje-split-view
+ */
+export default class SplitView 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>;
+    set initial(value: number);
+    get initial(): number;
+    /**
+     * Draws the component for the split view.
+     * @returns {DocumentFragment}
+     */
+    draw(): DocumentFragment;
+    /**
+     * Sets up the event listeners after the component is drawn.
+     */
+    afterDraw(): void;
+    resizeObserver: ResizeObserver;
+    /**
+     * Handles the drag event.
+     * @param {Event} e The event object.
+     */
+    handleDrag: (e: Event) => void;
+    /**
+     * Detects the size of the split view.
+     */
+    detectSize(): void;
+    size: number;
+    /**
+     * Converts pixels to a percentage.
+     * @param {number} value The pixel value.
+     * @returns {number} The percentage value.
+     */
+    pixelsToPercentage(value: number): number;
+}

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

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

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

@@ -0,0 +1,26 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * @summary This class represents Status element, extending the WJElement class.
+ * @documentation https://elements.webjet.sk/components/status
+ * @status stable
+ * @augments WJElement
+ * @slot - The status main content.
+ * @slot start - The status start content.
+ * @slot end - The status end content.
+ * @csspart native - The native part of the status.
+ * @csspart bullet - The bullet part of the status.
+ * @tag wje-status
+ */
+export default class Status extends WJElement {
+    /**
+     * Returns the CSS stylesheet for the component.
+     * @static
+     * @returns {CSSStyleSheet} The CSS stylesheet
+     */
+    static get cssStyleSheet(): CSSStyleSheet;
+    /**
+     * Draws the component for the status.
+     * @returns {object} fragment - The document fragment
+     */
+    draw(): object;
+}

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

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

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

@@ -0,0 +1,23 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `Step` is a custom web component that represents a step.
+ * @summary This element represents a step.
+ * @documentation https://elements.webjet.sk/components/step
+ * @status stable
+ * @augments WJElement
+ * @csspart native - The native part of the step.
+ * @slot - The default slot for the step.
+ * @tag wje-step
+ */
+export default class Step 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-stepper/stepper.d.ts

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

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

@@ -0,0 +1,125 @@
+import { default as WJElement } from '../wje-element/element.js';
+import { Localizer } from '../utils/localize.js';
+/**
+ * `Stepper` is a custom web component that represents a stepper.
+ * @summary This element represents a stepper.
+ * @documentation https://elements.webjet.sk/components/stepper
+ * @status stable
+ * @augments WJElement
+ * @attribute {string} active - The active color for the stepper.
+ * @attribute {string} done - The done color for the stepper.
+ * @slot - The default slot for the stepper.
+ * @csspart native - The native part of the stepper.
+ * @csspart header - The header part of the stepper.
+ * @csspart content - The content part of the stepper.
+ * @tag wje-stepper
+ */
+export default class Stepper extends WJElement {
+    static get cssStyleSheet(): any;
+    currentStep: number;
+    localizer: Localizer;
+    steps: any[];
+    headerSteps: any[];
+    /**
+     * Sets the start index for an operation or a process. This method assigns
+     * the provided value to the attribute 'start-index'.
+     * @param {number|string} value The value to set for the 'start-index' attribute.
+     */
+    set startIndex(value: number | string);
+    /**
+     * Retrieves the starting index value stored as an attribute.
+     * If the attribute 'start-index' exists and is not null, it parses the value as an integer and returns it.
+     * If the attribute does not exist, it returns the default value of 0.
+     * @returns {number} The starting index as an integer, or 0 if the attribute is not present.
+     */
+    get startIndex(): number;
+    get active(): string;
+    get done(): string;
+    /**
+     * Draws the component for the stepper.
+     * @returns {DocumentFragment}
+     */
+    draw(): DocumentFragment;
+    header: HTMLDivElement;
+    prev: HTMLSlotElement;
+    next: HTMLSlotElement;
+    finish: HTMLSlotElement;
+    processStep(index: any, step: any, header: any, steps: any): HTMLDivElement;
+    /**
+     * Sets up the attributes for the component.
+     */
+    afterDraw(): void;
+    /**
+     * Navigates to a different step in a multi-step process based on the provided direction.
+     * @param {number} direction The navigation direction.
+     * Use a positive value to move forward or a negative value to move backward.
+     */
+    navigate(direction: number): void;
+    /**
+     * Navigates to a specific step in a workflow or process.
+     * Executes a set of operations before and after the step transition.
+     * @param {number} stepIndex The index of the step to navigate to.
+     * @returns {void} This method does not return a value.
+     */
+    goToStep(stepIndex: number): void;
+    _executeGoToStep(stepIndex?: number): void;
+    /**
+     * Resets a step to its default state by clearing its active and done attributes.
+     * Updates the step's badge to show its index and removes any color styling.
+     * @param {HTMLElement} nav The navigation element representing the step.
+     * @param {HTMLElement|null} [badge] The badge element within the step. If not provided, it will be selected from the `nav` element.
+     * @param {number} [stepIndex] The index of the step, used to set the badge content.
+     */
+    setStepDefault(nav: HTMLElement, badge?: HTMLElement | null, stepIndex?: number): void;
+    /**
+     * Sets a step as active by adding the `active` attribute and updating the step's badge.
+     * @param {HTMLElement} nav The navigation element representing the step to activate.
+     * @param {HTMLElement|null} [badge] The badge element within the step. If not provided, it will be selected from the `nav` element.
+     * @param {number|null} [stepIndex] The index of the step, used to set the badge content. Defaults to `null` if not provided.
+     */
+    setStepActive(nav: HTMLElement, badge?: HTMLElement | null, stepIndex?: number | null): void;
+    /**
+     * Activates the content of a specific step by displaying it and hiding all others.
+     * @param {number} stepIndex The index of the step whose content should be displayed.
+     */
+    setContentActive(stepIndex: number): void;
+    /**
+     * Returns the DOM element of a step by index.
+     * @param {number} stepIndex
+     * @returns {HTMLElement}
+     */
+    getStepElement(stepIndex: number): HTMLElement;
+    /**
+     * Appends or replaces content inside the step container.
+     * @param {number} stepIndex
+     * @param {Node|string|Node[]} content DOM node(s) or HTML string to insert.
+     * @param {{ replace?: boolean }} [options]
+     */
+    renderStepContent(stepIndex: number, content: Node | string | Node[], options?: {
+        replace?: boolean;
+    }): void;
+    /**
+     * Marks a step as completed by setting the `done` attribute and updating its badge with a check icon.
+     * @param {HTMLElement} nav The navigation element representing the completed step.
+     * @param {HTMLElement|null} [badge] The badge element within the step. If not provided, it will be selected from the `nav` element.
+     */
+    setStepDone(nav: HTMLElement, badge?: HTMLElement | null): void;
+    setStepLocked(nav: any, badge?: any): void;
+    /**
+     * A callback function that is executed before opening a step in a process.
+     * This allows for custom behavior or logic to be applied before the step is displayed.
+     * @callback beforeOpen
+     * @param {number} stepIndex The index of the step that is about to be opened.
+     * @param {object} currentStep The current step data or configuration object before opening the new step.
+     */
+    beforeOpen: (stepIndex: any, currentStep: any) => void;
+    /**
+     * Callback function executed after a step is opened.
+     * This function can be overridden to implement custom behavior
+     * that should take place immediately after a step is opened.
+     * @function afterOpen
+     * @param {number} stepIndex The index of the step that has been opened.
+     * @param {object} currentStep The object representing the current step that has been opened.
+     */
+    afterOpen: (stepIndex: number, currentStep: object) => void;
+}

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

@@ -0,0 +1,25 @@
+export function addAction(stateValueName: any): (payload2: any) => {
+    type: string;
+    payload: any;
+    actionType: string;
+};
+export function deleteAction(stateValueName: any): (payload2: any) => {
+    type: string;
+    payload: any;
+    actionType: string;
+};
+export function loadAction(stateValueName: any): (payload2: any) => {
+    type: string;
+    payload: any;
+    actionType: string;
+};
+export function updateAction(stateValueName: any): (payload2: any) => {
+    type: string;
+    payload: any;
+    actionType: string;
+};
+export function addManyAction(stateValueName: any): (payload2: any) => {
+    type: string;
+    payload: any;
+    actionType: string;
+};

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

@@ -0,0 +1,22 @@
+export default class PubSub {
+    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: string, callback: Function): number;
+    /**
+     * 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 {any} state The current state to pass to the callbacks
+     * @param {object} [newData] The new data to pass to the callbacks
+     * @param {object} [oldData] The old data to pass to the callbacks
+     * @returns {Array} The results of the callbacks for this event, or an empty array if no event exists
+     * @memberof PubSub
+     */
+    publish(event: string, state: any, newData?: object, oldData?: object): any[];
+}