wj-elements 0.1.131 → 0.1.132

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

@@ -0,0 +1,25 @@
+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

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

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

@@ -0,0 +1,27 @@
+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

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

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

@@ -0,0 +1,173 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `Toast` is a custom web component that represents a toast notification.
+ * @summary This element represents a toast notification.
+ * @documentation https://elements.webjet.sk/components/toast
+ * @status stable
+ * @augments {WJElement}
+ * @csspart native - The native part
+ * @cssproperty {string} headline - Specifies the headline text of the toast. Represents the main title or heading displayed in the toast.
+ * @cssproperty {boolean} open - Indicates whether the toast is currently open (visible). A value of `true` shows the toast, while `false` hides it.
+ * @cssproperty {number} duration - Determines the duration (in milliseconds) for which the toast is displayed. After this time, the toast will automatically close unless it is manually closed.
+ * @cssproperty {boolean} closable - Specifies whether the toast can be manually closed by the user. If `true`, the toast will include a close button or mechanism.
+ * @cssproperty {string} color - Defines the color of the toast. Accepts any valid CSS color value such as `hex`, `RGB`, or named colors.
+ * @cssproperty {boolean} countdown - Indicates whether a countdown is displayed in the toast. When `true`, a visual countdown timer is shown to indicate the remaining time before the toast closes.
+ * @slot - The content of the toast.
+ * @slot media - The media of the toast.
+ * // @fires wje-toast:after-show - Fired after the toast is shown.
+ * // @fires wje-toast:after-hide - Fired after the toast is hidden.
+ */
+export default class Toast extends WJElement {
+    /**
+     * Returns the CSS stylesheet for the component.
+     * @static
+     * @returns {CSSStyleSheet} The CSS stylesheet
+     */
+    static get cssStyleSheet(): CSSStyleSheet;
+    toastStack: HTMLDivElement & {
+        className: string;
+    };
+    /**
+     * Set headline value of the toast.
+     * @param value
+     */
+    set headline(value: string);
+    /**
+     * Get headline value of the toast.
+     * @returns {string}
+     */
+    get headline(): string;
+    /**
+     * Set open value of the toast.
+     * @param value
+     */
+    set open(value: boolean);
+    /**
+     * Get open value of the toast.
+     * @returns {boolean}
+     */
+    get open(): boolean;
+    /**
+     * Set duration value of the toast.
+     * @param value
+     */
+    set duration(value: number);
+    /**
+     * Get duration value of the toast.
+     * @returns {number}
+     */
+    get duration(): number;
+    /**
+     * Set closable value of the toast.
+     * @param value
+     */
+    set closable(value: boolean);
+    /**
+     * Get closable value of the toast.
+     * @returns {boolean}
+     */
+    get closable(): boolean;
+    /**
+     * Set color value of the toast.
+     * @param value
+     */
+    set color(value: string);
+    /**
+     * Get color value of the toast.
+     * @returns {string}
+     */
+    get color(): string;
+    /**
+     * Set countdown value of the toast.
+     * @param value
+     */
+    set countdown(value: boolean);
+    /**
+     * Get countdown value of the toast.
+     * @returns {boolean}
+     */
+    get countdown(): boolean;
+    /**
+     * Set icon value of the toast.
+     * @param value
+     */
+    set icon(value: string);
+    /**
+     * Get icon value of the toast.
+     * @returns {string}
+     */
+    get icon(): string;
+    /**
+     * Draw method for the toast notification.
+     * @returns {object} Document fragment
+     */
+    draw(): object;
+    closeBtn: HTMLElement;
+    countdownBar: HTMLDivElement;
+    /**
+     * After draw method for the toast notification.
+     */
+    afterDraw(): void;
+    countdownAnimation: Animation;
+    remainingTime: number;
+    /**
+     * Starts the timer.
+     * This method sets the `startTime` property to the current time and sets
+     * the `timeoutID` property to the ID of the timeout. The method also
+     * dispatches the `wje-toast:after-hide` custom event when the timeout
+     * expires.
+     */
+    startTimer(): void;
+    startTime: number;
+    timeoutID: number;
+    /**
+     * Stops the timer.
+     * This method clears the timeout and calculates the remaining time.
+     * The method is called when the toast notification is paused.
+     */
+    stopTimer(): void;
+    /**
+     * Resumes the timer.
+     * This method resumes the timer if the remaining time is greater
+     * than zero. The method is called when the toast notification is resumed.
+     */
+    resumeTimer(): void;
+    /**
+     * Asynchronously shows the toast notification.
+     * This method sets the `open` property to `true` and dispatches the
+     * `wje-toast:after-show` custom event. If the toast is already open,
+     * the method returns `undefined`.
+     */
+    show: () => void;
+    /**
+     * Asynchronously hides the toast notification.
+     * This method sets the `open` property to `false` and dispatches the
+     * `wje-toast:after-hide` custom event. If the toast is already hidden,
+     * the method returns `undefined`.
+     */
+    hide: () => void;
+    /**
+     * Pauses the countdown animation and stops the timer.
+     */
+    pause: () => void;
+    /**
+     * Resumes the countdown animation and resumes the timer.
+     */
+    resume: () => void;
+    /**
+     * Removes the toast notification and the toast stack.
+     *
+     * This method removes the toast notification from the toast stack and
+     * removes the toast stack from the document body if the toast stack is
+     * empty.
+     */
+    removeChildAndStack(): void;
+    /**
+     * Asynchronously starts the toast notification.
+     * This method appends the toast notification to the document body and
+     * shows the toast notification. The method returns a promise that
+     * resolves when the toast notification is shown.
+     * @returns {Promise<unknown>}
+     */
+    start: () => Promise<unknown>;
+}

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

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -0,0 +1,65 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `Toggle` is a custom web component that represents a toggle input.
+ * @summary This element represents a toggle input.
+ * @documentation https://elements.webjet.sk/components/toggle
+ * @status stable
+ * @augments {WJElement}
+ * @csspart native - The native toggle wrapper.
+ * @csspart input - The toggle input.
+ * @csspart toggle - The toggle part.
+ * @slot - The default slot for the toggle.
+ * @cssproperty [--wje-toggle-color-base=var(--wje-color-contrast-3)] - The base background color of the toggle. Defines the default background color when the toggle is in an unselected state.
+ * @cssproperty [--wje-toggle-width=30px] - The overall width of the toggle switch. Determines how wide the toggle component appears.
+ * @cssproperty [--wje-toggle-height=18px] - The overall height of the toggle switch. Specifies how tall the toggle component appears.
+ * @cssproperty [--wje-toggle-border-radius=50px] - The border radius of the toggle. Controls how rounded the corners of the toggle are.
+ * @cssproperty [--wje-toggle-handle-width=14px] - The width of the toggle handle (knob). Determines the size of the handle for user interaction.
+ * @cssproperty [--wje-toggle-handle-height=14px] - The height of the toggle handle (knob). Specifies the vertical size of the handle.
+ * @cssproperty [--wje-toggle-handle-border-radius=9px] - The border radius of the toggle handle. Controls how rounded the handle is.
+ * @cssproperty [--wje-toggle-handle-color=#fff] - The color of the toggle handle. Accepts any valid CSS color, such as `hex`, `rgb`, or `css variable`.
+ * @cssproperty [--wje-toggle-handle-shadow=1px 0 1px 0.5px rgba(0,0,0,0.12), 2px 4px 6px rgba(0,0,0,0.2)] - The shadow applied to the toggle handle. Adds a subtle shadow effect for better visual clarity.
+ * @cssproperty [--wje-toggle-handle-shadow-checked=1px 1px 0 rgba(0,0,0,0.08), -3px 3px 6px rgba(0,0,0,0.3)] - The shadow applied to the toggle handle when it is in the checked (on) state. Provides visual feedback to indicate the toggle state.
+ * @cssproperty [--wje-toggle-duration=250ms] - The duration of the toggle animation in milliseconds. Controls how long the toggle animation lasts during state changes.
+ * @cssproperty [--wje-toggle-curve=cubic-bezier(.4,0,.2,1)] - The easing curve used for the toggle animation. Defines the speed curve for the animation, enhancing the user experience with smooth transitions.
+ * @tag wje-toggle
+ */
+export default class Toggle extends WJElement {
+    /**
+     * Get CSS stylesheet for the Button element.
+     * @static
+     * @returns {CSSStyleSheet} styles - The CSS stylesheet for the Button element.
+     */
+    static get cssStyleSheet(): CSSStyleSheet;
+    /**
+     * Get observed attributes for the toggle element.
+     * @returns {string[]}
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Set checked attribute for the toggle element.
+     */
+    set disabled(value: boolean);
+    /**
+     * Get checked attribute for the toggle element.
+     * @returns {boolean} true if the toggle is disabled, false otherwise
+     */
+    get disabled(): boolean;
+    /**
+     * Set checked attribute for the toggle element.
+     */
+    set checked(value: boolean);
+    /**
+     * Get checked attribute for the toggle element.
+     * @returns {boolean} true if the toggle is checked, false otherwise
+     */
+    get checked(): boolean;
+    /**
+     * Draw the toggle element for the component.
+     */
+    draw(): DocumentFragment;
+    input: HTMLInputElement;
+    /**
+     * After draw method for the toggle element to add event listeners for the input element after the element is drawn.
+     */
+    afterDraw(): void;
+}

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

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

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

@@ -0,0 +1,39 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `Toolbar` is a custom web component that represents a toolbar.
+ * @summary This element represents a toolbar.
+ * @documentation https://elements.webjet.sk/components/toolbar
+ * @status stable
+ * @augments {WJElement}
+ * @csspart native - The native toolbar wrapper.
+ * @slot start - The start slot for the toolbar.
+ * @slot end - The end slot for the toolbar.
+ * @cssproperty [--wje-toolbar-background=var(--wje-background)] - Specifies the background color of the toolbar. Accepts any valid CSS color value, such as `hex`, `rgb`, or `CSS variable`.
+ * @cssproperty [--wje-toolbar-height=auto] - Defines the height of the toolbar. If set to `auto`, the height adjusts based on the content.
+ * @cssproperty [--wje-toolbar-min-height=70px] - Sets the minimum height of the toolbar. Ensures the toolbar maintains a consistent minimum size.
+ * @cssproperty [--wje-toolbar-padding-top=1rem] - Specifies the padding at the top of the toolbar. Accepts any valid CSS length unit.
+ * @cssproperty [--wje-toolbar-padding-bottom=1rem] - Specifies the padding at the bottom of the toolbar. Helps create spacing between the content and the bottom edge.
+ * @cssproperty [--wje-toolbar-padding-inline=1.5rem] - Defines the horizontal padding (left and right) of the toolbar. Creates consistent spacing on both sides.
+ * @cssproperty [--wje-toolbar-border-color=var(--wje-border-color)] - Sets the color of the toolbar's border. Accepts any valid CSS color value.
+ * @cssproperty [--wje-toolbar-top=0] - Specifies the vertical position of the toolbar relative to its container. Useful for fixed or sticky toolbars.
+ * @tag wje-toolbar
+ */
+export default class Toolbar 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 toolbar.
+     * @returns {object} Document fragment
+     */
+    draw(): object;
+}

package/dist/packages/wje-toolbar-action/toolbar-action.d.ts

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

package/dist/packages/wje-toolbar-action/toolbar-action.element.d.ts

@@ -0,0 +1,35 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `ToolbarAction` is a custom web component that represents a toolbar action.
+ * @summary This element represents a toolbar action.
+ * @documentation https://elements.webjet.sk/components/toolbar-action
+ * @status stable
+ * @augments {WJElement}
+ * @csspart native - The native toolbar action wrapper.
+ * @slot - The default slot for the toolbar action.
+ * @tag wje-toolbar-action
+ */
+export default class ToolbarAction 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 toolbar action.
+     * @returns {object} Document fragment
+     */
+    draw(): object;
+    /**
+     * Returns the actions for the toolbar action.
+     * @returns {Array} An array of wje-button elements
+     */
+    getActions(): any[];
+}

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

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

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

@@ -0,0 +1,71 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `Tooltip` is a custom web component that represents a tooltip.
+ * @summary This element represents a tooltip.
+ * @documentation https://elements.webjet.sk/components/tooltip
+ * @status stable
+ * @augments {WJElement}
+ * @attribute {string} content - The content of the tooltip element. Accepts any valid string value.
+ * @slot arrow - The arrow slot for the tooltip.
+ * @slot anchor - The anchor slot for the tooltip.
+ * @csspart native - The native tooltip wrapper.
+ * @cssproperty [--wje-tooltip-arrow-color=var(--wje-color-contrast-11)] - Specifies the color of the tooltip's arrow. This property determines the visual color of the arrow that points to the element the tooltip is attached to. Accepts any valid CSS color value such as `hex`, `rgb`, or `CSS variable`.
+ * @tag wje-tooltip
+ */
+export default class Tooltip 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 array of observed attributes
+     */
+    static get observedAttributes(): any[];
+    /**
+     * Set active attribute for the tooltip element.
+     * @param value
+     */
+    set content(value: string);
+    /**
+     * Get active attribute for the tooltip element.
+     * @returns {string}
+     */
+    get content(): string;
+    /**
+     * Draws the component for the tooltip.
+     * @returns {object} Document fragment
+     */
+    draw(): object;
+    mySlot: HTMLSlotElement;
+    popup: HTMLElement;
+    native: HTMLDivElement;
+    /**
+     * Draws the component for the tooltip.
+     */
+    afterDraw(): void;
+    dispatch(customEvent: any): Promise<any>;
+    beforeShow(): string;
+    afterShow(): boolean;
+    /**
+     * Handles the logic for showing the component's popup or tooltip.
+     * Adds the `active` class, invokes lifecycle hooks, and manages the popup visibility.
+     * @throws {Error} If the `beforeShow` method returns a non-string value or `false`.
+     */
+    onShow: () => void;
+    /**
+     * Hides the component's popup or tooltip.
+     * Removes the `active` class from the component and hides the popup element.
+     */
+    onHide: () => void;
+    /**
+     * Validates if the specified selector exists within the provided element.
+     * Logs an error if the selector is not found and returns the found element or `null`.
+     * @param {HTMLElement} anchorEl The root element to search within.
+     * @returns {HTMLElement|null} The first element matching the selector, or `null` if not found.
+     */
+    checkSelector(anchorEl: HTMLElement): HTMLElement | null;
+}

package/dist/packages/wje-visually-hidden/visually-hidden.d.ts

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

package/dist/packages/wje-visually-hidden/visually-hidden.element.d.ts

@@ -0,0 +1,29 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `VisuallyHidden` is a custom web component that represents a visually hidden element.
+ * @summary This element represents a visually hidden element.
+ * @documentation https://elements.webjet.sk/components/visually-hidden
+ * @status stable
+ * @augments {WJElement}
+ * @slot - The default slot for the visually hidden element.
+ * @tag wje-visually-hidden
+ */
+export default class VisuallyHidden 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 visually hidden element.
+     * @returns {object} Document fragment
+     */
+    draw(): object;
+}