wj-elements 0.1.199 → 0.1.200

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

@@ -0,0 +1,38 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * @summary This class represents CarouselItem element, extending the WJElement class.
+ * @documentation https://elements.webjet.sk/components/carousel-item
+ * @status stable
+ * @augments WJElement
+ * @slot - The carousel item main content.
+ * @csspart native - The component's native wrapper.
+ * @cssproperty [--wje-carousel-item-background-color=transparent] - Background color of the component;
+ * @cssproperty [--wje-carousel-item-border-color=--wje-color-contrast-4] - Border color of the component;
+ * @cssproperty [--wje-carousel-item-color=--wje-color-contrast-11] - Color of the component;
+ * @cssproperty [--wje-carousel-item-border-radius=--wje-border-radius-medium] - Border radius of the component;
+ * @cssproperty [--wje-carousel-item-border-width=1px] - Border width of the component;
+ * @cssproperty [--wje-carousel-item-border-style=solid] - Border style of the component;
+ * @cssproperty [--wje-carousel-item-border-color=--wje-color-contrast-1] - Border color of the component;
+ * @cssproperty [--wje-carousel-item-margin-inline=0] - Margin inline of the component;
+ */
+export default class CarouselItem extends WJElement {
+    /**
+     * Getter for the CSS stylesheet.
+     * @returns {*}
+     */
+    static get cssStyleSheet(): any;
+    /**
+     * Getter for the observed attributes.
+     * @returns {*[]}
+     */
+    static get observedAttributes(): any[];
+    /**
+     * Draws the CarouselItem element.
+     * @returns {DocumentFragment}
+     */
+    draw(): DocumentFragment;
+    /**
+     * After draw event for the CarouselItem element.
+     */
+    afterDraw(): void;
+}

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

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

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

@@ -0,0 +1,99 @@
+import { FormAssociatedElement } from '../internals/form-associated-element.js';
+/**
+ * @summary This method dispatches a custom event named "wje-checkbox:change".
+ * It is triggered when the input event is fired, which happens when the state of the checkbox changes.
+ * The event is dispatched on the current instance of the Checkbox class.
+ * @documentation https://elements.webjet.sk/components/checkbox
+ * @status stable
+ * @augments {FormAssociatedElement}
+ * @slot - The checkbox main content.
+ * @csspart native - The component's native wrapper.
+ * @cssproperty [--wje-checkbox-border-radius=--wje-border-radius-medium] - Border radius of the component;
+ * @cssproperty [--wje-checkbox-border-width=1px] - Border width of the component;
+ * @cssproperty [--wje-checkbox-border-style=solid] - Border style of the component;
+ * @cssproperty [--wje-checkbox-border-color=--wje-color-contrast-1] - Border color of the component;
+ * @cssproperty [--wje-checkbox-margin-inline=0] - Margin inline of the component;
+ * //@fires wje-checkbox:change - Dispatched when the checkbox state changes;
+ */
+export default class Checkbox extends FormAssociatedElement {
+    /**
+     * Getter for the CSS stylesheet.
+     * @returns {string} The CSS stylesheet.
+     */
+    static get cssStyleSheet(): string;
+    static get observedAttributes(): string[];
+    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;
+    /**
+     * Getter for the customErrorDisplay attribute.
+     * @returns {boolean} Whether the attribute is present.
+     */
+    get customErrorDisplay(): boolean;
+    /**
+     * Getter for the validateOnChange attribute.
+     * @returns {boolean} Whether the attribute is present.
+     */
+    get validateOnChange(): boolean;
+    /**
+     * Setter for the defaultValue attribute.
+     * This method sets the 'value' attribute of the custom input element to the provided value.
+     * The 'value' attribute represents the default value of the input element.
+     * @param {string} value The value to set as the default value.
+     */
+    set defaultValue(value: string);
+    /**
+     * Getter for the defaultValue attribute.
+     * This method retrieves the 'value' attribute of the custom input element.
+     * The 'value' attribute represents the default value of the input element.
+     * If the 'value' attribute is not set, it returns an empty string.
+     * @returns {string} The default value of the input element.
+     */
+    get defaultValue(): string;
+    /**
+     * Sets or removes the 'indeterminate' attribute for the object.
+     * This property typically reflects the visual or functional state where
+     * the component is neither fully active nor inactive.
+     * @param {boolean} value A boolean where `true` indicates the 'indeterminate'
+     * state should be set, and `false` removes it.
+     */
+    set indeterminate(value: boolean);
+    /**
+     * Retrieves the current state of the 'indeterminate' attribute.
+     *
+     * The 'indeterminate' attribute is typically used to signify a state
+     * where a checkbox is neither checked nor unchecked, such as a partially
+     * selected state.
+     * @returns {boolean} Returns true if the 'indeterminate' attribute is present; otherwise, false.
+     */
+    get indeterminate(): boolean;
+    /**
+     * Set checked attribute.
+     * @param {boolean} value true if the toggle is checked, false otherwise
+     */
+    set checked(value: boolean);
+    /**
+     * Get checked attribute.
+     * @returns {boolean} true if the toggle is checked, false otherwise
+     */
+    get checked(): boolean;
+    /**
+     * Draws the checkbox element.
+     * @returns {DocumentFragment} The created fragment.
+     */
+    draw(): DocumentFragment;
+    input: HTMLInputElement;
+    /**
+     * Adds an event listener after drawing the checkbox.
+     */
+    afterDraw(): void;
+    #private;
+}

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

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

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

@@ -0,0 +1,64 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * @summary This method dispatches a custom event named "wje-chip:remove".
+ * It is triggered when the remove button is clicked, which happens when the chip is removed.
+ * The event is dispatched on the current instance of the Chip class.
+ * @documentation https://elements.webjet.sk/components/chip
+ * @status stable
+ * @augments WJElement
+ * @slot - The chip main content.
+ * @csspart native - The component's native wrapper.
+ * //@fires wje-chip:remove - Dispatched when the chip is removed;
+ */
+export default class Chip extends WJElement {
+    /**
+     * Getter for the CSS stylesheet.
+     * @returns {*}
+     */
+    static get cssStyleSheet(): any;
+    /**
+     * Sets or removes the "round" attribute on the element based on the provided value.
+     * @param {boolean} value Determines whether the "round" attribute should be set or removed.
+     * If true, the "round" attribute is added. If false, the "round"
+     * attribute is removed.
+     */
+    set round(value: boolean);
+    /**
+     * Checks if the 'round' attribute is present on the element.
+     * @returns {boolean} Returns true if the 'round' attribute exists, otherwise false.
+     */
+    get round(): boolean;
+    /**
+     * Sets the size attribute of the element.
+     * @param {string} value The value to set for the size attribute.
+     */
+    set size(value: string);
+    /**
+     * Retrieves the 'size' attribute of the current element.
+     * @returns {string | null} The value of the 'size' attribute, or null if the attribute is not set.
+     */
+    get size(): string | null;
+    /**
+     * Sets or removes the "removable" attribute on the element.
+     * @param {boolean} value A boolean indicating whether the element should have the "removable" attribute.
+     * If true, the "removable" attribute is added;
+     * if false, the "removable" attribute is removed.
+     */
+    set removable(value: boolean);
+    /**
+     * Determines if the element has the 'removable' attribute.
+     * @returns {boolean} True if the element has the 'removable' attribute, otherwise false.
+     */
+    get removable(): boolean;
+    /**
+     * Draws the Chip element.
+     * @returns {DocumentFragment}
+     */
+    draw(): DocumentFragment;
+    removeElement: HTMLElement;
+    slotEnd: HTMLSlotElement;
+    /**
+     * Getter for the observed attributes.
+     */
+    afterDraw(): void;
+}

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

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

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

@@ -0,0 +1,16 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * @summary Col class that extends WJElement.
+ * @documentation https://elements.webjet.sk/components/col
+ * @status stable
+ * @augments WJElement
+ * @slot - The col main content.
+ */
+export default class Col extends WJElement {
+    static get cssStyleSheet(): any;
+    /**
+     * Draws the component element.
+     * @returns {DocumentFragment}
+     */
+    draw(): DocumentFragment;
+}

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

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

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(): 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;
+    /**
+     * 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[];
+    /**
+     * 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(): 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

@@ -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;