wj-elements 0.1.151 → 0.1.152

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

@@ -0,0 +1,187 @@
+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(): any;
+    /**
+     * 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;
+    /**
+     * Setter for the marker position.
+     * @param {object} value The new marker position.
+     */
+    set markerPosition(value: any);
+    /**
+     * Getter for the marker position.
+     * @returns {object} The current marker position.
+     */
+    get markerPosition(): any;
+    /**
+     * Setter for the color swatches.
+     * @param {string} value The new color swatches.
+     */
+    set swatches(value: any[]);
+    /**
+     * Getter for the color swatches.
+     * @returns {Array} The current color swatches.
+     */
+    get swatches(): any[];
+    /**
+     * Draws the ColorPicker element.
+     * @returns {DocumentFragment} The created document fragment.
+     */
+    draw(): DocumentFragment;
+    popup: HTMLElement;
+    anchor: HTMLDivElement;
+    picker: HTMLDivElement;
+    marker: HTMLDivElement;
+    colorArea: HTMLDivElement;
+    hueSlider: HTMLElement;
+    alphaSlider: HTMLElement;
+    colorPreview: HTMLDivElement;
+    input: HTMLElement;
+    /**
+     * Sets the hue.
+     * @param node
+     */
+    createSwatches(node: any): void;
+    /**
+     * Sets up the event listeners for the ColorPicker.
+     */
+    afterDraw(): void;
+    init: boolean;
+    colorAreaDimension: {
+        width: any;
+        x: any;
+        y: any;
+        height: any;
+    };
+    /**
+     * Sets the sliders to the given color.
+     * @param color
+     */
+    setSliders(color: any): void;
+    /**
+     * Gets the dimensions of the color area.
+     * @returns {{width: *, x: *, y: *, height: *}}
+     */
+    dimension(): {
+        width: any;
+        x: any;
+        y: any;
+        height: any;
+    };
+    /**
+     * Moves the marker to the given position.
+     * @param e
+     */
+    moveMarker: (e: any) => void;
+    /**
+     * Sets the hue.
+     * @param e
+     * @returns {{pageY: (*|number), pageX: (*|number)}}
+     */
+    getPointerPosition(e: any): {
+        pageY: (any | number);
+        pageX: (any | 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)`.
+     */
+    getH: any;
+    getHSVA: (hue: any, alpha: any) => string;
+}

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

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

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

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

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

@@ -0,0 +1,31 @@
+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(): any;
+    /**
+     * 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

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

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

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

@@ -0,0 +1,12 @@
+/**
+ * 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

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

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

@@ -0,0 +1,116 @@
+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 headline of the dialog.
+     * @param value
+     */
+    set placement(value: string);
+    /**
+     * Gets the headline of the dialog.
+     * @returns {string|string}
+     */
+    get placement(): 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;
+    /**
+     * 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(): void;
+    /**
+     * After the dialog opens.
+     */
+    afterOpen(): void;
+    /**
+     * Before the dialog closes.
+     */
+    beforeClose(): void;
+    /**
+     * After the dialog closes.
+     */
+    afterClose(): 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;
+}

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

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

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

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

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

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

@@ -0,0 +1,85 @@
+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 the placement of the dropdown.
+     * @param value
+     */
+    set trigger(value: string);
+    /**
+     * Gets the placement of the dropdown.
+     * @returns {string|string}
+     */
+    get trigger(): 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;
+    /**
+     * @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;
+    /**
+     * @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;
+    /**
+     * Open the popup element.
+     * @param {object} e
+     */
+    onOpen: (e: object) => void;
+    /**
+     * Close the popup element.
+     * @param {object} e
+     */
+    onClose: (e: object) => void;
+}