wj-elements 0.2.0-alpha.2 → 0.2.0-alpha.4

package/dist/wje-popup/popup.element.d.ts

@@ -0,0 +1,145 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `Popup` is a custom web component that represents a popup.
+ * @summary This element represents a popup.
+ * @documentation https://elements.webjet.sk/components/popup
+ * @status stable
+ * @augments {WJElement}
+ * @csspart native - The native part of the popup.
+ * @slot anchor - The slot for the anchor of the popup.
+ * @slot arrow - The slot for the arrow of the popup.
+ * @slot - The default slot for the popup.
+ * // @fires wje-popup:reposition - Event fired when the popup is repositioned.
+ * // @fires wje-popup:show - Event fired when the popup is shown.
+ * // @fires wje-popup:hide - Event fired when the popup is hidden.
+ * @tag wje-popup
+ */
+export default class Popup extends WJElement {
+    /**
+     * Returns the CSS styles for the component.
+     * @static
+     * @returns {CSSStyleSheet} The CSS styles for the component.
+     */
+    static get cssStyleSheet(): CSSStyleSheet;
+    /**
+     * Returns the list of attributes to observe for changes.
+     * @static
+     * @returns {Array<string>}
+     */
+    static get observedAttributes(): Array<string>;
+    _manual: boolean;
+    set loader(value: boolean);
+    get loader(): boolean;
+    /**
+     * Sets the manual property of the popup.
+     * @param {boolean} value The value to set.
+     */
+    set manual(value: boolean);
+    /**
+     * Gets the manual property of the popup.
+     * @returns {boolean} The value of the manual property.
+     */
+    get manual(): boolean;
+    /**
+     * Sets or removes the 'portal' attribute on the element based on the provided value.
+     * If the value is truthy, the 'portal' attribute will be added.
+     * If the value is falsy, the 'portal' attribute will be removed.
+     * @param {boolean} value Determines whether the 'portal' attribute should be added or removed.
+     */
+    set portal(value: boolean);
+    /**
+     * Returns whether the 'portal' attribute is present on the element.
+     * @returns {boolean} True if the 'portal' attribute exists, otherwise false.
+     */
+    get portal(): boolean;
+    get floatingEl(): HTMLDivElement;
+    beforeDraw(context: any, store: any, params: any): void;
+    /**
+     * Draws the component for the popup.
+     * @returns {DocumentFragment}
+     */
+    draw(): DocumentFragment;
+    slotAnchor: HTMLSlotElement;
+    slotArrow: HTMLSlotElement;
+    native: HTMLDivElement;
+    loaderEl: HTMLDivElement;
+    /**
+     * After Draws the component.
+     */
+    afterDraw(): void;
+    /**
+     * Sets the anchor for the popup.
+     * Adds a click event listener to the anchor element.
+     */
+    setAnchor(): void;
+    anchorEl: any;
+    manualCallback: (e: any) => void;
+    clickHandler: (e: any) => void;
+    /**
+     * Toggles the active attribute of the popup.
+     */
+    showHide(): void;
+    /**
+     * Repositions the popup.
+     * Uses the floating-ui library to compute the position.
+     */
+    reposition(): void;
+    offsetCalc: number;
+    arrow: Element;
+    /**
+     * Mounts content to a portal container by creating or ensuring a portal root and mirroring
+     * the host's classes, attributes, and slot contents onto the portal. This method manages the
+     * movement of default and arrow slot content into the portal shadow DOM, while also setting
+     * up necessary mutation observers to keep attributes in sync.
+     * @returns {void} Does not return a value.
+     */
+    _mountContentToPortal(): void;
+    _portalNative: HTMLDivElement;
+    _portalSlot: HTMLSlotElement;
+    _portalArrowSlot: HTMLSlotElement;
+    _portalAttrObserver: MutationObserver;
+    _defPlaceholders: any[];
+    _arrowPlaceholders: any[];
+    _floatingEl: HTMLDivElement;
+    _portaled: boolean;
+    /**
+     * Restores the content previously moved to a portal back to its original location.
+     * This method handles restoring default slot content, arrow placeholders, disconnecting
+     * attribute mirroring observers, and cleaning up elements and containers related to the portal.
+     * Ensures all placeholders and native portal elements are properly removed from the DOM.
+     * @returns {void} Does not return a value.
+     */
+    _restoreContentFromPortal(): void;
+    _portalContainer: HTMLDivElement;
+    _portalShadow: ShadowRoot;
+    /**
+     * Ensures that a portal root is created and initialized properly with a shadow DOM and attached styles.
+     * If the portal root already exists, the method exits early.
+     * The method creates a `div` element in the document body and attaches a shadow DOM to it.
+     * It also applies the required styles to the shadow DOM, either using constructable stylesheets
+     * or by appending a `<style>` element. Additionally, it copies CSS custom properties from the
+     * component's computed styles to the portal host to ensure proper style resolution.
+     * @returns {void} This method does not return a value.
+     */
+    _ensurePortalRoot(): void;
+    findDialog(el: any): any;
+    /**
+     * Displays the popup by portaling the content, managing the loader state, and attaching event handlers.
+     * Optionally dispatches a custom event when the popup is shown.
+     * @param {boolean} [dispatchEvent] Indicates whether to dispatch a custom event ('wje-popup:show') when the popup is shown.
+     * @returns {void} Does not return any value.
+     */
+    show(dispatchEvent?: boolean): void;
+    cleanup: any;
+    /**
+     * Hides the popup.
+     * Removes the popup-active class from the floating element.
+     * Cleans up the auto update for repositioning.
+     */
+    hide(dispatchEvent?: boolean): void;
+    /**
+     * Removes the active attribute when the popup is hidden.
+     */
+    handleHide: () => void;
+    markContentReady(): void;
+}

package/dist/wje-progress-bar/progress-bar.d.ts

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

package/dist/wje-progress-bar/progress-bar.element.d.ts

@@ -0,0 +1,96 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `ProgressBar` is a custom web component that represents a progress bar.
+ * @summary This element represents a progress bar.
+ * @documentation https://elements.webjet.sk/components/progress-bar
+ * @status stable
+ * @augments {WJElement}
+ * @slot - The default slot for the progress bar.
+ * @slot start - The start slot of the progress bar.
+ * @slot end - The end slot of the progress bar.
+ * @cssproperty [--wje-progress-bar-color=var(--wje-color-contrast-6)] - Sets the color of the progress bar. This property controls the fill color of the progress indicator. Accepts any valid CSS color value, such as named colors (`red`), hex values (`#ff0000`), or CSS variables.
+ * @cssproperty [--wje-progress-bar-text-size=.75rem] - Defines the font size of the text displayed within the progress bar. Accepts any valid CSS length unit (e.g., `rem`, `px`, `em`) to control text size relative to the bar's design.
+ * @cssproperty [--wje-progress-bar-text-color=var(--wje-color)] - Specifies the color of the text displayed within the progress bar. Accepts any valid CSS color value to ensure contrast and readability against the progress bar's background.
+ * @tag wje-progress-bar
+ */
+export default class ProgressBar 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>;
+    /**
+     * Sets the radius of the progress bar.
+     * @param {number} value The value to set.
+     */
+    set radius(value: number);
+    /**
+     * Gets the radius of the progress bar.
+     * @returns {number} The value of the radius.
+     */
+    get radius(): number;
+    /**
+     * Gets the diameter of the progress bar.
+     * @returns {number} The value of the diameter.
+     */
+    get diameter(): number;
+    /**
+     * Gets the diameter of the progress bar.
+     * @returns {number} The value of the diameter.
+     */
+    get containerSize(): number;
+    /**
+     * Sets the stroke of the progress bar.
+     * @param {number} value The value to set.
+     */
+    set stroke(value: number);
+    /**
+     * Gets the stroke of the progress bar.
+     * @returns {number} The value of the stroke.
+     */
+    get stroke(): number;
+    /**
+     * Gets the linecap of the progress bar.
+     * @returns {string} The value of the linecap.
+     */
+    get linecap(): string;
+    /**
+     * 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;
+    background: SVGCircleElement | SVGRectElement;
+    bar: SVGCircleElement | SVGRectElement;
+    /**
+     * Adds event listeners after the component is drawn.
+     */
+    afterDraw(): void;
+    /**
+     * Returns the dasharray for a circle with the given radius.
+     * @param {number} radius The radius of the circle in pixels.
+     * @returns {number} The dasharray value.
+     */
+    getCircleDasharray(radius?: number): number;
+    /**
+     * Returns the dashoffset for a circle with the given progress and radius.
+     * @param {number} progress The progress of the circle in percentage.
+     * @param {number} radius The radius of the circle in pixels.
+     * @returns {number} The dashoffset value.
+     */
+    getCircleDashoffset(progress?: number, radius?: number): number;
+    /**
+     * Sets the progress of the circle.
+     * @param percent
+     */
+    setCircleProgress(percent: any): void;
+}

package/dist/wje-qr-code/qr-code.d.ts

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

package/dist/wje-qr-code/qr-code.element.d.ts

@@ -0,0 +1,33 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `QrCode` is a custom web component that generates a QR code.
+ * @summary This element represents a QR code generator.
+ * @documentation https://elements.webjet.sk/components/qr-code
+ * @status stable
+ * @augments {WJElement}
+ * @csspart native - The native part of the QR code.
+ * @slot top - The slot for the top content of the QR code.
+ * @slot bottom - The slot for the bottom content of the QR code.
+ * @tag wje-qr-code
+ */
+export default class QrCode 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 {string[]} The list of observed attributes.
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Draws the QR code component.
+     * @returns {DocumentFragment} The document fragment containing the QR code component.
+     */
+    draw(): DocumentFragment;
+    /**
+     * Called after the component is drawn to generate the QR code.
+     */
+    afterDraw(): void;
+}

package/dist/wje-radio/radio.d.ts

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

package/dist/wje-radio/radio.element.d.ts

@@ -0,0 +1,64 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * @summary This class represents a Radio button element, extending the WJElement class.
+ * @documentation https://elements.webjet.sk/components/radio
+ * @status stable
+ * @augments WJElement
+ * @slot - Default slot for the radio button label content.
+ * @csspart native-radio - The native wrapper for the radio button.
+ * @cssproperty [--wje-radio-margin-inline=0] - Specifies the horizontal (left and right) margin for the radio button. Accepts any valid CSS length unit (e.g., `px`, `rem`, `%`) to control spacing on both sides of the component.
+ * @cssproperty [--wje-radio-margin-top=0] - Defines the top margin for the radio button. Accepts any valid CSS length value to adjust vertical spacing above the component.
+ * @cssproperty [--wje-radio-margin-bottom=0] - Sets the bottom margin for the radio button. Accepts any valid CSS length value to adjust vertical spacing below the component.
+ * // @fires wje-radio:change - Dispatched when the radio button's state changes.
+ * // @fires wje-radio:input - Dispatched when the radio button is interacted with.
+ */
+export default class Radio extends WJElement {
+    /**
+     * Returns the CSS styles for the component.
+     * @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 value(value: string);
+    get value(): string;
+    /**
+     * Sets the name of the radio button.
+     * @param value
+     */
+    set checked(value: boolean);
+    /**
+     * Gets the checked property of the radio button.
+     * @returns {boolean}
+     */
+    get checked(): boolean;
+    /**
+     * Set checked attribute.
+     * @param {boolean} value true if the toggle is checked, false otherwise
+     */
+    set disabled(value: boolean);
+    /**
+     * Get disabled attribute value.
+     * @returns {boolean} true if the toggle is disabled, false otherwise
+     */
+    get disabled(): boolean;
+    /**
+     * Draws the radio button.
+     * @returns {DocumentFragment}
+     */
+    draw(): DocumentFragment;
+    input: HTMLInputElement;
+    /**
+     * Sets up the event listeners for the component.
+     */
+    afterDraw(): void;
+    /**
+     * Called when an attribute changes.
+     * @param {object} e
+     */
+    inputEvent: (e: object) => void;
+}

package/dist/wje-radio-group/radio-group.d.ts

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

package/dist/wje-radio-group/radio-group.element.d.ts

@@ -0,0 +1,61 @@
+import { FormAssociatedElement } from '../internals/form-associated-element.js';
+import { default as Radio } from '../wje-radio/radio.js';
+/**
+ * `RadioGroup` is a custom web component that represents a group of radio buttons.
+ * @summary This element represents a group of radio buttons.
+ * @documentation https://elements.webjet.sk/components/radio-group
+ * @status stable
+ * @augments {FormAssociatedElement}
+ * @slot - The default slot for the radio group.
+ * @tag wje-radio-group
+ */
+export default class RadioGroup extends FormAssociatedElement {
+    /**
+     * Returns the CSS styles for the component.
+     * @static
+     * @returns {CSSStyleSheet}
+     */
+    static get cssStyleSheet(): CSSStyleSheet;
+    static get observedAttributes(): any[];
+    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;
+    /**
+     * Draws the component for the radio group.
+     * @returns {DocumentFragment}
+     */
+    draw(): DocumentFragment;
+    input: HTMLInputElement;
+    /**
+     * Adds event listeners after the component is drawn. Handles the selection of radio buttons.
+     */
+    afterDraw(): void;
+    /**
+     * Returns the radio button with the given value.
+     * @param {string} value The value of the radio button.
+     * @returns {Radio} The radio button.
+     */
+    getRadioByValue(value: string): Radio;
+    /**
+     * Removes the check from all radio buttons.
+     */
+    removeCheck(): void;
+    /**
+     * Sets the given radio button to checked.
+     */
+    checkRadio(radio: any): boolean;
+    /**
+     * Retrieves all direct child elements of the current element.
+     * @returns {HTMLElement[]} An array of child elements.
+     */
+    getAllElements(): HTMLElement[];
+    #private;
+}

package/dist/wje-rate/rate.d.ts

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

package/dist/wje-rate/rate.element.d.ts

@@ -0,0 +1,156 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `Rate` is a custom web component that represents a rating component.
+ * @summary This element represents a rating component.
+ * @documentation https://elements.webjet.sk/components/rate
+ * @status stable
+ * @augments {WJElement}
+ * @attribute {number} precision - The precision of the rating component.
+ * @attribute {number} max - The maximum value of the rating component.
+ * @attribute {Array<string>} icons - The icons of the rating component.
+ * @csspart native - The native part of the rating component.
+ * @cssproperty [--wje-rate-gap=.25rem] - Defines the spacing (gap) between individual items in the rating component. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`) to adjust the distance between rating elements.
+ * @cssproperty [--wje-rate-color=var(--wje-color-contrast-11)] - Specifies the default color of the rating items. Accepts any valid CSS color value, including named colors, hex values, RGB, or CSS variables.
+ * @cssproperty [--wje-rate-selected-color=var(--wje-color-danger-9)] - Sets the color for selected or highlighted rating items. This property helps visually distinguish selected ratings. Accepts any valid CSS color value.
+ * @tag wje-rate
+ */
+export default class Rate 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>;
+    /**
+     * Sets the precision of the rating component.
+     * @param {number} value The value to set.
+     */
+    set precision(value: number);
+    /**
+     * Gets the precision of the rating component.
+     * @returns {number} The value of the precision.
+     */
+    get precision(): number;
+    /**
+     * Sets the maximum value of the rating component.
+     * @param {number} value The value to set.
+     */
+    set max(value: number);
+    /**
+     * Gets the maximum value of the rating component.
+     * @returns {number} The value of the maximum value.
+     */
+    get max(): number;
+    /**
+     * Sets the icons of the rating component.
+     * @param {Array<string>} value The value to set.
+     */
+    set icons(value: Array<string>);
+    /**
+     * Gets the icons of the rating component.
+     * @returns {Array<string>} The value of the icons.
+     */
+    get icons(): Array<string>;
+    /**
+     * Sets the value of the rating component.
+     * @param {number} value The value to set.
+     */
+    set value(value: number);
+    /**
+     * Gets the value of the rating component.
+     * @returns {number} The value of the rating component.
+     */
+    get value(): number;
+    /**
+     * Called when an attribute changes.
+     * @param {string} name The name of the attribute that changed.
+     * @param {string} old The old value of the attribute.
+     * @param {string} newName The new value of the attribute.
+     */
+    attributeChangedCallback(name: string, old: string, newName: string): void;
+    /**
+     * Draws the component for the rating component.
+     * @returns {DocumentFragment}
+     */
+    draw(): DocumentFragment;
+    native: HTMLDivElement;
+    /**
+     * Adds event listeners after the component is drawn.
+     */
+    afterDraw(): void;
+    /**
+     * Creates the icons for the rating component.
+     * @param {number} i The index of the icon.
+     * @returns {Element} The icon element.
+     */
+    createIcons(i: number): Element;
+    /**
+     * Changes the rate of the rating component.
+     */
+    changeRate(): void;
+    /**
+     * Event handler for the mouse enter event.
+     * @param {Event} e The event.
+     */
+    onMouseEnter: (e: Event) => void;
+    hoverValue: any;
+    /**
+     * Event handler for the mouse leave event.
+     * @param {Event} e The event.
+     */
+    onMouseLeave: (e: Event) => void;
+    /**
+     * Event handler for the mouse move event.
+     * @param {Event} e The event.
+     */
+    onMouseMove: (e: Event) => void;
+    /**
+     * Event handler for the touch start event.
+     * @param {Event} e The event.
+     */
+    onTouchStart: (e: Event) => void;
+    /**
+     * Event handler for the touch end event.
+     * @param {Event} e The event.
+     */
+    onTouchEnd: (e: Event) => void;
+    /**
+     * Event handler for the touch move event.
+     * @param {Event} e The event.
+     */
+    onTouchMove: (e: Event) => void;
+    /**
+     * Event handler for the click event.
+     * @param {Event} e The event.
+     */
+    onClick: (e: Event) => void;
+    /**
+     * Returns the icons for the rating component.
+     * @param {number} index The index of the icon.
+     * @returns {Element} The icon element.
+     */
+    getIcons(index: number): Element;
+    /**
+     * Returns the value from the x position.
+     * @param {number} coordinate The x coordinate.
+     * @returns {number} The value from the x position.
+     */
+    getValueFromXPosition(coordinate: number): number;
+    /**
+     * Rounds a given number to the nearest specified precision.
+     * @param {number} numberToRound The number to be rounded.
+     * @param {number} [precision] The precision to which the number should be rounded.
+     * @returns {number} - The rounded number.
+     * @example
+     * roundToPrecision(2.3); // Returns 2.5
+     * roundToPrecision(2.3, 0.1); // Returns 2.3
+     * roundToPrecision(2.6, 1); // Returns 3
+     */
+    roundToPrecision(numberToRound: number, precision?: number): number;
+}

package/dist/wje-relative-time/relative-time.d.ts

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

package/dist/wje-relative-time/relative-time.element.d.ts

@@ -0,0 +1,55 @@
+import { default as WJElement } from '../wje-element/element.js';
+import { Localizer } from '../utils/localize.js';
+/**
+ * `RelativeTime` is a custom web component that represents a relative time component.
+ * @summary This element represents a relative time component.
+ * @documentation https://elements.webjet.sk/components/relative-time
+ * @status stable
+ * @augments WJElement
+ * @csspart native - The native part of the relative time component.
+ * @tag wje-relative-time
+ */
+export default class RelativeTime extends WJElement {
+    /**
+     * Returns the list of attributes to observe for changes.
+     * @static
+     * @returns {Array<string>}
+     */
+    static get observedAttributes(): Array<string>;
+    localizer: Localizer;
+    /**
+     * Sets the date of the relative time component.
+     * @param value
+     */
+    set date(value: string);
+    /**
+     * Gets the date of the relative time component.
+     * @returns {string}
+     */
+    get date(): string;
+    /**
+     * Sets the object date of the relative time component.
+     * @param value
+     */
+    set objectDate(value: Date);
+    /**
+     * Gets the object date of the relative time component.
+     * @returns {Date}
+     */
+    get objectDate(): Date;
+    /**
+     * Draws the component for the relative time.
+     * @returns {DocumentFragment}
+     */
+    draw(): DocumentFragment;
+    /**
+     * Returns the relative time string for the given date.
+     */
+    getRelativeTimeString(lang?: string): string;
+    /**
+     * Checks if the given string is an ISO date.
+     * @param {string} str The string to check.
+     * @returns {boolean} True if the string is an ISO date, false otherwise.
+     */
+    isISODate(str: string): boolean;
+}

package/dist/wje-relative-time/relative-time.test.d.ts

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

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

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