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

package/dist/packages/wje-color-picker/color-picker.element.d.ts

@@ -1,230 +0,0 @@
-import { default as WJElement } from '../wje-element/element.js';
-/**
- * @summary ColorPicker is a custom web component that extends WJElement.
- * It provides a color picker functionality with a color area, hue slider, alpha slider, and color swatches.
- * The color picker allows users to select a color by moving a marker on the color area, adjusting the hue and alpha sliders, or clicking on a color swatch.
- * @documentation https://elements.webjet.sk/components/color-picker
- * @status stable
- * @augments WJElement
- * @slot - The card header main content.
- * @csspart anchor - The anchor part of the color picker.
- * @csspart picker - The main part of the color picker.
- * @csspart marker - The marker part of the color picker.
- * @csspart color-area - The color area part of the color picker.
- * @csspart hue - The hue slider part of the color picker.
- * @csspart alpha - The alpha slider part of the color picker.
- * @csspart color-preview - The color preview part of the color picker.
- * @csspart input - The input part of the color picker.
- * @cssproperty [--wje-color-picker-area] - The color of the color area background.
- * @cssproperty [--wje-color-picker-value] - The value of the color picker input.
- * @cssproperty [--wje-color-picker-swatch] - The color of the color swatch button.
- * @cssproperty [--wje-color-picker-size] - The color of the color marker.
- * @cssproperty [--wje-color-picker-radius] - The color of the color anchor.
- */
-export default class ColorPicker extends WJElement {
-    /**
-     * Getter for the CSS stylesheet.
-     * @returns {object} The styles object.
-     * @static
-     */
-    static get cssStyleSheet(): object;
-    /**
-     * Getter for the observed attributes.
-     * @returns {Array} An empty array.
-     * @static
-     */
-    static get observedAttributes(): any[];
-    /**
-     * The position of the color marker.
-     * @type {object}
-     * @private
-     */
-    private _markerPosition;
-    /**
-     * The color swatches.
-     * @type {Array}
-     * @private
-     */
-    private _swatches;
-    /**
-     * Sets the color attribute of the element.
-     * @param {string} value The color value to be set. It should be a valid color string such as a named color, HEX, RGB, or HSL format.
-     */
-    set color(value: string);
-    /**
-     * Retrieves the color attribute of the element.
-     * @returns {string | null} The current value of the 'color' attribute, or null if the attribute is not set.
-     */
-    get color(): string | null;
-    /**
-     * Setter for the marker position.
-     * @param {object} value The new marker position.
-     */
-    set markerPosition(value: object);
-    /**
-     * Getter for the marker position.
-     * @returns {object} The current marker position.
-     */
-    get markerPosition(): object;
-    /**
-     * Setter for the color swatches.
-     * @param {string} value The new color swatches.
-     */
-    set swatches(value: string);
-    /**
-     * Getter for the color swatches.
-     * @returns {Array} The current color swatches.
-     */
-    get swatches(): any[];
-    /**
-     * Sets or removes the 'no-color-area' attribute based on the provided value.
-     * @param {boolean} value A boolean value indicating whether to set or remove the 'no-color-area' attribute. If true, the attribute is added; if false, the attribute is removed.
-     */
-    set noColorArea(value: boolean);
-    /**
-     * Getter method to check if the 'no-color-area' attribute is applied.
-     * @returns {boolean} Returns true if the 'no-color-area' attribute is present; otherwise, false.
-     */
-    get noColorArea(): boolean;
-    /**
-     * Sets or removes the "no-controls" attribute.
-     * @param {boolean} value If true, sets the "no-controls" attribute. If false, removes the "no-controls" attribute.
-     */
-    set noControls(value: boolean);
-    /**
-     * Checks if the 'no-controls' attribute is present on the element.
-     * @returns {boolean} Returns true if the 'no-controls' attribute is present; otherwise, false.
-     */
-    get noControls(): boolean;
-    /**
-     * Sets or removes the 'no-swatches' attribute on the element.
-     * If the value is truthy, the 'no-swatches' attribute is added.
-     * If the value is falsy, the 'no-swatches' attribute is removed.
-     * @param {boolean} value Determines whether the 'no-swatches' attribute is set (true) or removed (false).
-     */
-    set noSwatches(value: boolean);
-    /**
-     * Checks if the 'no-swatches' attribute is present on the element.
-     * @returns {boolean} Returns true if the 'no-swatches' attribute is present; otherwise, false.
-     */
-    get noSwatches(): boolean;
-    /**
-     * Creates and returns a document fragment containing the structure and components of a custom color picker.
-     * The method initializes DOM elements such as divs, sliders, and inputs, with specific classes and attributes,
-     * and attaches various event listeners to handle user interactions.
-     * @returns {DocumentFragment} A DocumentFragment containing the constructed and fully initialized DOM elements for the color picker.
-     */
-    draw(): DocumentFragment;
-    anchor: HTMLDivElement;
-    picker: HTMLDivElement;
-    marker: HTMLDivElement;
-    colorArea: HTMLDivElement;
-    hueSlider: HTMLElement;
-    alphaSlider: HTMLElement;
-    colorPreview: HTMLDivElement;
-    input: HTMLElement;
-    /**
-     * Executes after the component is drawn. Initializes some configurations if not already initialized,
-     * including updating slider values, setting marker positions, and applying initial color settings.
-     * This method ensures that all necessary visual elements and configurations are properly set up.
-     * @returns {void} Does not return a value.
-     */
-    afterDraw(): void;
-    colorAreaDimension: any;
-    /**
-     * Sets the hue.
-     * @param node
-     */
-    createSwatches(node: any): void;
-    /**
-     * Sets the sliders to the given color.
-     * @param color
-     */
-    setSliders(color: any): void;
-    /**
-     * Retrieves the dimensions and position of the color area element relative to the viewport.
-     * @returns {object} An object containing the following properties:
-     * width: The width of the element in pixels.
-     * height: The height of the element in pixels.
-     * x: The x-coordinate of the element's left edge relative to the viewport.
-     * y: The y-coordinate of the element's top edge relative to the viewport.
-     */
-    dimension(): object;
-    /**
-     * Updates the position of the marker based on the pointer event.
-     * This function calculates the position of the marker relative to the color area
-     * dimensions based on the given event. It adjusts the marker position and updates
-     * the color associated with the new position. It is intended to handle pointer movement
-     * events such as mouse or touch interactions.
-     * @param {Event} e The event triggering the marker movement, typically a mouse or touch event.
-     */
-    moveMarker: (e: Event) => void;
-    /**
-     * Gets the pointer position in client coordinates (viewport-relative).
-     * @param e
-     * @returns {{x: number, y: number}}
-     */
-    getPointerPosition(e: any): {
-        x: number;
-        y: number;
-    };
-    /**
-     * Sets the position of the marker.
-     * @param x
-     * @param y
-     */
-    setMarkerPosition(x: any, y: any): void;
-    /**
-     * Sets the color at the given position.
-     * @param x
-     * @param y
-     * @param alpha
-     * @returns {*|tinycolor}
-     */
-    setColorAtPosition(x: any, y: any, alpha?: number): any | tinycolor;
-    /**
-     * Sets the marker position by color.
-     * @param color
-     * @returns {{x: number, y: number}}
-     */
-    setMarkerPositionByColor: (color?: string) => {
-        x: number;
-        y: number;
-    };
-    /**
-     * Updates the color picker's current color and its associated UI elements.
-     * @param {tinycolor.Instance|null} [color] The color value to set. If null, the current value from the input field is used.
-     * @param {string} [type] The type of action determining which UI element to update. Possible values: "marker", "hue", "alpha", "swatch".
-     */
-    setColor: (color?: tinycolor.Instance | null, type?: string) => void;
-    value: {
-        hex8: any;
-        hex: any;
-        rgb: any;
-        rgba: any;
-        hsl: any;
-        hsla: any;
-        hsv: any;
-        hsva: any;
-        name: any;
-        format: any;
-    };
-    /**
-     * Sets the hue.
-     * @param {object} e The event object.
-     */
-    setHue: (e: object) => void;
-    /**
-     * Sets the alpha.
-     * @param {object} e The event object.
-     */
-    setAlpha: (e: object) => void;
-    /**
-     * Converts hue and alpha values into an HSVA color string.
-     * @param {number} hue The hue value, typically between 0 and 360.
-     * @param {number} alpha The alpha value, typically between 0 and 100, representing the opacity percentage.
-     * @returns {string} - The HSVA color string in the format `hsva(h, 100%, 100%, a)`.
-     */
-    getHSVA: (hue: number, alpha: number) => string;
-    #private;
-}

package/dist/packages/wje-color-picker/color-picker.test.d.ts

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

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

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

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

@@ -1,31 +0,0 @@
-import { default as WJElement } from '../wje-element/element.js';
-/**
- * @summary The Container class is a custom web component that extends WJElement. It is a simple container that can hold other elements or components.
- * It provides a slot for adding child elements or components. The Container class also supports indentation through the `indent` property.
- * The indentation is applied as a CSS variable (`--wje-container-indent`) which can be used in the styles of child elements or components.
- * @documentation https://elements.webjet.sk/components/card-header
- * @status stable
- * @augments WJElement
- * @slot - The slot for adding child elements or components.
- * @cssproperty [--wje-container-indent] - The indentation of the container.
- * @tag wje-container
- */
-export default class Container extends WJElement {
-    /**
-     * Getter for the CSS stylesheet.
-     * @returns {object} The styles object.
-     * @static
-     */
-    static get cssStyleSheet(): object;
-    /**
-     * Getter for the observed attributes.
-     * @returns {Array} An empty array.
-     * @static
-     */
-    static get observedAttributes(): any[];
-    /**
-     * Draws the Container element.
-     * @returns {DocumentFragment} The created document fragment.
-     */
-    draw(): DocumentFragment;
-}

package/dist/packages/wje-copy-button/copy-button.d.ts

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

package/dist/packages/wje-copy-button/copy-button.element.d.ts

@@ -1,89 +0,0 @@
-import { default as WJElement } from '../wje-element/element.js';
-/**
- * @summary CopyButton is a custom web component that extends WJElement.
- * It provides a button that, when clicked, copies a specified text to the clipboard.
- * The text to be copied can be specified through the `value` attribute.
- * The CopyButton also supports keyboard interaction, copying the text when the space or enter key is pressed.
- * @documentation https://elements.webjet.sk/components/copy-button
- * @status stable
- * @augments WJElement
- * @attribute {string} for - The id of the element to copy content from.
- * @attribute {string} value - The text to be copied.
- * @slot - This is a default/unnamed slot.
- * @csspart button - Styles the button element.
- * @cssproperty --text-color - Controls the color of the text.
- * @cssproperty --background-color - Controls the background color of the button.
- * //@fires wje:copy-button - Dispatched when the button is clicked and the text is copied.
- * @tag wje-copy-button
- */
-export default class CopyButton extends WJElement {
-    /**
-     * Getter for the cssStyleSheet property.
-     * @returns {string} The CSS styles.
-     */
-    static get cssStyleSheet(): string;
-    /**
-     * Getter for the observedAttributes property.
-     * @returns {Array} An empty array.
-     */
-    static get observedAttributes(): any[];
-    timeout: number;
-    /**
-     * Setter for the value property.
-     * @param {string} value The value to be set.
-     */
-    set value(value: string);
-    /**
-     * Getter for the value property.
-     * @returns {string} The value of the value property.
-     */
-    get value(): string;
-    /**
-     * Draws the ColorPicker element.
-     * @returns {DocumentFragment} The created document fragment.
-     */
-    draw(): DocumentFragment;
-    icon: HTMLElement;
-    tooltip: HTMLElement;
-    /**
-     * Adds event listeners for the click, focus, and blur events.
-     */
-    afterDraw(): void;
-    /**
-     * Handles the click event.
-     * @param {Event} e The event object.
-     */
-    clicked: (e: Event) => void;
-    /**
-     * Handles the keydown event.
-     * @param {Event} e The event object.
-     */
-    keydown: (e: Event) => void;
-    /**
-     * Handles the focus event.
-     * @param {Event} e The event object.
-     */
-    focused: (e: Event) => void;
-    /**
-     * Handles the blur event.
-     * @param {Event} e The event object.
-     */
-    blurred: (e: Event) => void;
-    /**
-     * Handles the copied event.
-     * You can override this method to customize the behavior when the text is copied.
-     * @param {Event} e The event object.
-     */
-    copied: (e: Event) => void;
-    /**
-     * Copies the specified text or node.
-     * @param {HTMLElement} button The button element.
-     */
-    copy(button: HTMLElement): Promise<void>;
-    /**
-     * Copies the target content.
-     * @param {HTMLElement} content The content to be copied.
-     * @returns {Promise} A promise that resolves when the content is copied.
-     */
-    copyTarget(content: HTMLElement): Promise<any>;
-}

package/dist/packages/wje-copy-button/service/service.d.ts

@@ -1,12 +0,0 @@
-/**
- * Copy the node to the clipboard.
- * @param node
- * @returns {Promise<never>|Promise<void>}
- */
-export function copyNode(node: any): Promise<never> | Promise<void>;
-/**
- * Copy the text to the clipboard.
- * @param text
- * @returns {Promise<never>|Promise<void>}
- */
-export function copyText(text: any): Promise<never> | Promise<void>;

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

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

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

@@ -1,132 +0,0 @@
-import { default as WJElement } from '../wje-element/element.js';
-/**
- * `Dialog` is a custom web component that represents a dialog.
- * @summary This element represents a dialog.
- * @documentation https://elements.webjet.sk/components/dialog
- * @status stable
- * @augments {WJElement}
- * @slot header - Slot for the header content.
- * @slot body - Slot for the body content.
- * @slot footer - Slot for the footer content.
- * @csspart dialog - The dialog wrapper.
- * @csspart header - The header of the dialog.
- * @csspart body - The body of the dialog.
- * @csspart footer - The footer of the dialog.
- * @csspart close - The close button of the dialog.
- * @cssproperty [--wje-dialog-background=var(--wje-background-color)] - Specifies the background color of the dialog.
- * @cssproperty [--wje-dialog-color=var(--wje-text-color)] - Defines the text color within the dialog.
- * @cssproperty [--wje-dialog-padding=1rem] - Controls the padding inside the dialog.
- * @cssproperty [--wje-dialog-border-radius=0.5rem] - Sets the border radius for the dialog's corners.
- * @cssproperty [--wje-dialog-box-shadow=0 2px 10px rgba(0, 0, 0, 0.1)] - Applies a shadow effect to the dialog.
- * @tag wje-dialog
- */
-export default class Dialog extends WJElement {
-    /**
-     * Returns the CSS styles for the component.
-     * @returns {*}
-     */
-    static get cssStyleSheet(): any;
-    /**
-     * Returns the list of attributes to observe for changes.
-     * @returns {*[]}
-     */
-    static get observedAttributes(): any[];
-    /**
-     * Sets the value of the 'headline' attribute.
-     * @param {string} value The new value for the 'headline' attribute.
-     */
-    set headline(value: string);
-    /**
-     * Retrieves the value of the "headline" attribute from the element.
-     * If the "headline" attribute is not present, returns an empty string.
-     * @returns {string} The headline attribute value or an empty string if not set.
-     */
-    get headline(): string;
-    /**
-     * Sets the headline of the dialog.
-     * @param value
-     */
-    set placement(value: string | string);
-    /**
-     * Gets the headline of the dialog.
-     * @returns {string|string}
-     */
-    get placement(): string | string;
-    /**
-     * Sets the headline of the dialog.
-     * @param value
-     */
-    set async(value: boolean);
-    /**
-     * Gets the headline of the dialog.
-     * @returns {boolean}
-     */
-    get async(): boolean;
-    /**
-     * Sets the headline of the dialog.
-     * @param value
-     */
-    set closeHidden(value: boolean);
-    /**
-     * Gets the headline of the dialog.
-     * @returns {boolean}
-     */
-    get closeHidden(): boolean;
-    set hiddenHeader(value: boolean);
-    get hiddenHeader(): boolean;
-    set hiddenFooter(value: boolean);
-    get hiddenFooter(): boolean;
-    /**
-     * 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;
-    dialog: HTMLDialogElement;
-    /**
-     * Creates the dialog body.
-     * @param dialog
-     */
-    htmlDialogBody(dialog: any): void;
-    /**
-     * Closes the dialog.
-     * @param e
-     */
-    close(e: any): void;
-    /**
-     * Before the dialog opens.
-     */
-    beforeOpen(dialog: any, trigger: any): void;
-    /**
-     * After the dialog opens.
-     */
-    afterOpen(dialog: any, trigger: any): void;
-    /**
-     * Before the dialog closes.
-     */
-    beforeClose(dialog: any, trigger: any): void;
-    /**
-     * After the dialog closes.
-     */
-    afterClose(dialog: any, trigger: any): void;
-    /**
-     * Opens the dialog.
-     * @param e
-     */
-    onOpen: (e: any) => void;
-    /**
-     * Closes the dialog.
-     * @param {object} e
-     */
-    onClose: (e: object) => void;
-    /**
-     * Registers an event listener on the provided button that triggers a blocking UI element
-     * and executes a given promise when the button is clicked.
-     * @param {HTMLElement} button The button element to attach the event listener to.
-     * @param {Function} promise A function that returns a promise to be executed when the button is clicked.
-     */
-    registerBlockingEvent(button: HTMLElement, promise: Function): void;
-    updateHasFooter(): void;
-}

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

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

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

@@ -1,32 +0,0 @@
-import { default as WJElement } from '../wje-element/element.js';
-/**
- * @summary Divider is a custom web component that extends WJElement.
- * It provides a simple divider line that can be used to separate content.
- * @documentation https://elements.webjet.sk/components/divider
- * @status stable
- * @augments WJElement
- * @slot - This is a default/unnamed slot.
- * @cssproperty [--wje-border-width=1px] - The size of the border.
- * @cssproperty [--wje-divider-border-color=var(--wje-border-color)] - The color of the divider borderline.
- * @cssproperty [--wje-divider-border-width=var(--wje-border-width, 1px)] - The width of the divider borderline.
- * @cssproperty [--wje-divider-spacing=0] - The spacing for the divider.
- * @tag wje-divider
- * @tag wje-divider
- */
-export default class Divider extends WJElement {
-    /**
-     * Getter for the CSS stylesheet.
-     * @returns {string} The CSS stylesheet.
-     */
-    static get cssStyleSheet(): string;
-    /**
-     * Getter for the observed attributes.
-     * @returns {Array} An empty array as there are no observed attributes.
-     */
-    static get observedAttributes(): any[];
-    /**
-     * Draws the Divider.
-     * @returns {DocumentFragment} The created document fragment.
-     */
-    draw(): DocumentFragment;
-}

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

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

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

@@ -1,108 +0,0 @@
-import { default as WJElement } from '../wje-element/element.js';
-import { default as Popup } from '../wje-popup/popup.element.js';
-/**
- * `Dropdown` is a custom element that displays a dropdown menu.
- * @summary This element represents a dropdown menu.
- * @documentation https://elements.webjet.sk/components/dropdown
- * @status stable
- * @augments {WJElement}
- * @csspart native - The native part of the dropdown.
- * @slot trigger - The slot for the trigger of the dropdown.
- * @slot - The default slot for the dropdown.
- * // @fires wje-dropdown:open - Event fired when the dropdown is opened.
- * // @fires wje-dropdown:close - Event fired when the dropdown is closed.
- * @tag wje-dropdown
- */
-export default class Dropdown extends WJElement {
-    /**
-     * Getter for the CSS stylesheet.
-     * @returns {string[]}
-     */
-    static get observedAttributes(): string[];
-    /**
-     * The placement of the dropdown.
-     * @type {{"wje-popup": Popup}}
-     */
-    dependencies: {
-        "wje-popup": Popup;
-    };
-    /**
-     * Sets or removes the 'portaled' attribute on the element.
-     * When the value is truthy, the attribute 'portaled' is added to the element.
-     * When the value is falsy, the attribute 'portaled' is removed from the element.
-     * @param {boolean} value Determines whether to add or remove the 'portaled' attribute.
-     */
-    set portaled(value: boolean);
-    /**
-     * Getter method for the `portaled` property.
-     * Checks if the `portaled` attribute is present on the element.
-     * @returns {boolean} Returns `true` if the `portaled` attribute exists, otherwise `false`.
-     */
-    get portaled(): boolean;
-    /**
-     * Checks whether the element has the 'portaled' attribute.
-     * @returns {boolean} True if the element has the 'portaled' attribute, otherwise false.
-     */
-    get isPortaled(): boolean;
-    /**
-     * Sets the placement of the dropdown.
-     * @param value
-     */
-    set trigger(value: string | string);
-    /**
-     * Gets the placement of the dropdown.
-     * @returns {string|string}
-     */
-    get trigger(): string | string;
-    /**
-     * Callback function to handle other dropdowns being opened. Close the dropdown if it is not the target and collapse is enabled.
-     * @param {Event} e The event object.
-     */
-    otherDropdownOpennedCallback: (e: Event) => void;
-    /**
-     * Removes the popup element.
-     */
-    beforeDraw(): void;
-    popup: HTMLElement;
-    /**
-     * Draws the dropdown element and returns the created document fragment.
-     * @returns {DocumentFragment}
-     */
-    draw(): DocumentFragment;
-    anchorSlot: HTMLSlotElement;
-    /**
-     * Adds event listeners for the mouseenter and mouseleave events.
-     */
-    afterDraw(): void;
-    popupHideCallback: (e: any) => void;
-    /**
-     * Handles delegated clicks from inside the popup and closes the dropdown when a leaf menu item is selected.
-     * This works even when the menu is portaled, because we rely on the composed path.
-     */
-    onMenuItemClick: (e: any) => void;
-    /**
-     * @summary Toggles the dropdown element between active and inactive states.
-     * Calls the `onOpen` method if the element is currently inactive,
-     * and calls the `onClose` method if the element is currently active.
-     * @param {Event} e The event object.
-     */
-    toggleCallback: (e: Event) => void;
-    /**
-     * @summary Returns the content to be displayed before showing the dropdown.
-     * @returns {any} The content to be displayed.
-     */
-    beforeShow(): any;
-    /**
-     * This method is called after the dropdown is shown.
-     */
-    afterShow(): void;
-    /**
-     * Open the popup element.
-     * @param {object} e
-     */
-    onOpen: (e: object) => void;
-    beforeClose: () => void;
-    afterClose: () => void;
-    onClose: () => void;
-    #private;
-}