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

package/dist/wje-card-title/card-title.d.ts

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

package/dist/wje-card-title/card-title.element.d.ts

@@ -1,32 +0,0 @@
-import { default as WJElement } from '../wje-element/element.js';
-/**
- * @summary CardTitle class that extends WJElement.
- * @documentation https://elements.webjet.sk/components/card-title
- * @status stable
- * @augments WJElement
- * @slot - The card title main content.
- * @cssproperty [--wje-card-title-font-size=24px] - Font size of the component;
- * @cssproperty [--wje-card-title-font-weight=500] - Font weight of the component;
- * @cssproperty [--wje-card-title-margin=0] - Margin of the component;
- * @cssproperty [--wje-card-title-padding=0] - Padding of the component;
- * @cssproperty [--wje-card-title-line-height=1.2] - Line height of the component;
- */
-export default class CardTitle 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 CardTitle element.
-     * @returns {DocumentFragment} The created document fragment.
-     */
-    draw(): DocumentFragment;
-}

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

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

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

@@ -1,154 +0,0 @@
-import { default as WJElement } from '../wje-element/element.js';
-/**
- * @summary Carousel class that extends WJElement.
- * @documentation https://elements.webjet.sk/components/carousel
- * @status stable
- * @augments WJElement
- * @slot - The carousel main content.
- * @cssproperty [--wje-carousel-size=100%] - Size of the carousel component;
- */
-export default class Carousel extends WJElement {
-    /**
-     * Getter for the CSS stylesheet.
-     * @returns {*}
-     */
-    static get cssStyleSheet(): any;
-    /**
-     * Getter for the observed attributes.
-     * @returns {string[]}
-     */
-    static get observedAttributes(): string[];
-    slidePerPage: number;
-    /**
-     * Active slide attribute.
-     * @param value
-     */
-    set activeSlide(value: number | number);
-    /**
-     * Active slide attribute.
-     * @returns {number|number}
-     */
-    get activeSlide(): number | number;
-    /**
-     * Pagination attribute.
-     * @returns {boolean}
-     */
-    get pagination(): boolean;
-    /**
-     * Navigation attribute.
-     * @returns {boolean}
-     */
-    get navigation(): boolean;
-    /**
-     * Thumbnails attribute.
-     * @returns {boolean}
-     */
-    get thumbnails(): boolean;
-    /**
-     * Loop attribute.
-     * @returns {boolean}
-     */
-    get loop(): boolean;
-    /**
-     * Before draw method for the Carousel.
-     */
-    beforeDraw(): void;
-    /**
-     * Draw method for the Carousel.
-     * @returns {DocumentFragment}
-     */
-    draw(): DocumentFragment;
-    prevButton: Element;
-    nextButton: Element;
-    slides: HTMLDivElement;
-    /**
-     * After draw method for the Carousel.
-     */
-    afterDraw(): void;
-    /**
-     * Sync `activeSlide` to the slide whose center is closest to the container center.
-     */
-    syncActiveToCenter(): void;
-    /**
-     * Sets up the IntersectionObserver for the Carousel.
-     */
-    setIntersectionObserver(): void;
-    intersectionObserver: IntersectionObserver;
-    entriesMap: Map<any, any>;
-    records: IntersectionObserverEntry[];
-    /**
-     * Goes to the slide.
-     * @param index
-     * @param behavior
-     * @param next
-     */
-    goToSlide(index: any, behavior?: string, next?: boolean): void;
-    /**
-     * Clones the first and last items.
-     */
-    cloneFirstAndLastItems(): void;
-    /**
-     * Goes to the next slide.
-     */
-    removeActiveSlide(): void;
-    /**
-     * Goes to the next slide.
-     */
-    changePagination(): void;
-    /**
-     * Goes to the next slide.
-     */
-    changeThumbnails(): void;
-    /**
-     * Goes to the next slide.
-     * @returns {Element}
-     */
-    createNextButton(): Element;
-    /**
-     * Goes to the next slide.
-     * @returns {Element}
-     */
-    createPreviousButton(): Element;
-    /**
-     * Goes to the next slide.
-     * @returns {Element}
-     */
-    createPagination(): Element;
-    /**
-     * Goes to the next slide.
-     * @returns {Element}
-     */
-    createThumbnails(): Element;
-    /**
-     * Goes to the next slide.
-     */
-    nextSlide(): void;
-    /**
-     * Goes to the previous slide.
-     */
-    previousSlide(): void;
-    /**
-     * Goes to the slide.
-     * @returns {Array}
-     */
-    getSlides(): any[];
-    /**
-     * Goes to the slide.
-     * @returns {Array}
-     */
-    getSlidesWithClones(): any[];
-    /** Maps logical index -> visual index (accounts for leading clone when loop=true) */
-    getVisualIndexForLogical(index: any): any;
-    /** Maps visual index -> logical index (handles clones at 0 and last when loop=true) */
-    getLogicalIndexForVisual(vIndex: any): any;
-    /**
-     * Goes to the slide.
-     * @returns {boolean}
-     */
-    canGoNext(): boolean;
-    /**
-     * Goes to the slide.
-     * @returns {boolean}
-     */
-    canGoPrevious(): boolean;
-}

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

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

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

@@ -1,38 +0,0 @@
-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/wje-checkbox/checkbox.d.ts

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

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

@@ -1,100 +0,0 @@
-import { FormAssociatedElement } from '../internals/form-associated-element.js';
-/**
- * @summary This method dispatches a custom event named "wje-toggle: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;
- */
-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;
-    _valueOff: string;
-    /**
-     * 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;
-    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
-    /**
-     * 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/wje-chip/chip.d.ts

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

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

@@ -1,76 +0,0 @@
-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;
-    /**
-     * Sets the disabled state of the element.
-     * If true, the 'disabled' attribute is added to the element.
-     * If false, the 'disabled' attribute is removed from the element.
-     * @param {boolean} value Specifies whether the element should be disabled.
-     */
-    set disabled(value: boolean);
-    /**
-     * Determines if the element has the 'disabled' attribute.
-     * @returns {boolean} True if the element has the 'disabled' attribute, otherwise false.
-     */
-    get disabled(): boolean;
-    /**
-     * Draws the Chip element.
-     * @returns {DocumentFragment}
-     */
-    draw(): DocumentFragment;
-    removeElement: HTMLElement;
-    slotEnd: HTMLSlotElement;
-    /**
-     * Getter for the observed attributes.
-     */
-    afterDraw(): void;
-}

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

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

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

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

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

@@ -1,16 +0,0 @@
-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/wje-color-picker/color-picker.d.ts

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

package/dist/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/wje-color-picker/color-picker.test.d.ts

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