wj-elements 0.1.149 → 0.1.151

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

@@ -1,28 +0,0 @@
-import { default as WJElement } from '../wje-element/element.js';
-/**
- * @summary This element represents a footer. `Footer` is a custom web component that represents a footer.
- * @documentation https://elements.webjet.sk/components/footer
- * @status stable
- * @augments WJElement
- * @slot default - Default slot for the footer content
- * @cssproperty --primary-color - The primary color of the footer
- */
-export default class Footer extends WJElement {
-    /**
-     * Returns the CSS styles for the component.
-     * @static
-     * @returns {CSSStyleSheet}
-     */
-    static get cssStyleSheet(): CSSStyleSheet;
-    /**
-     * Returns the list of attributes to observe for changes.
-     * @static
-     * @returns {Array<string>}
-     */
-    static get observedAttributes(): string[];
-    /**
-     * Draws the component.
-     * @returns {DocumentFragment}
-     */
-    draw(): DocumentFragment;
-}

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

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

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

@@ -1,28 +0,0 @@
-import { default as WJElement } from '../wje-element/element.js';
-/**
- * @summary The Form class is a custom
- * web component that extends WJElement. It is a simple form that can hold other elements or components.
- * It provides a slot for adding child elements or components.
- * @documentation https://elements.webjet.sk/components/form
- * @status stable
- * @augments WJElement
- * @slot - The slot for adding child elements or components.
- * @tag wje-form
- */
-export default class Form extends WJElement {
-    /**
-     * Getter for the CSS stylesheet.
-     * @returns {*}
-     */
-    static get cssStyleSheet(): any;
-    /**
-     * Getter for the observed attributes.
-     * @returns {*[]}
-     */
-    static get observedAttributes(): any[];
-    /**
-     * Draws the Form.
-     * @returns {DocumentFragment}
-     */
-    draw(): DocumentFragment;
-}

package/dist/packages/wje-format-digital/format-digital.d.ts

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

package/dist/packages/wje-format-digital/format-digital.element.d.ts

@@ -1,87 +0,0 @@
-import { default as WJElement } from '../wje-element/element.js';
-import { Localizer } from '../utils/localize.js';
-/**
- * @summary This element formats and displays digital values such as file sizes or data transfer rates.
- * `FormatDigital` is a custom web component that represents a formatted digital value with units like
- * bytes or bits. It extends from `WJElement` and utilizes the `Localizer` class for locale-aware formatting.
- * @documentation https://elements.webjet.sk/components/format-digital
- * @status stable
- * @augments {WJElement}
- * @attribute {number} value - The numeric value to format (e.g., 1024 for 1 KB).
- * @attribute {string} unit - The unit of the value (`byte` or `bit`). Defaults to `byte`.
- * @attribute {string} unitDisplay - The display style of the unit (`short`, `long`, or `narrow`). Defaults to `short`.
- * @csspart native - The native part of the component.
- * @csspart formatted - The part representing the formatted value.
- * @csspart start - Slot for content before the formatted value.
- * @csspart end - Slot for content after the formatted value.
- * @cssproperty [--wje-format-digital-font-size=1rem] - The font size of the formatted digital value.
- * @cssproperty [--wje-format-digital-color=var(--wje-text-color)] - The color of the formatted text.
- * @cssproperty [--wje-format-digital-padding=.5rem] - The padding around the component.
- * @cssproperty [--wje-format-digital-border-radius=var(--wje-border-radius-small)] - The border radius of the component.
- * @tag wje-format-digital
- */
-export default class FormatDigital extends WJElement {
-    /**
-     * Returns the CSS styles for the component.
-     * Encapsulated using shadow DOM.
-     * @static
-     * @returns {CSSStyleSheet} - The CSS styles for the component.
-     */
-    static get cssStyleSheet(): CSSStyleSheet;
-    /**
-     * Returns the list of attributes to observe for changes.
-     * Observes `value` and `unit-display` for re-rendering.
-     * @static
-     * @returns {Array<string>} - The attributes to observe.
-     */
-    static get observedAttributes(): string[];
-    localizer: Localizer;
-    /**
-     * Sets the value of the digital format.
-     * This value determines the size in bytes or bits to be displayed.
-     * @param {number} value The value to set.
-     */
-    set value(value: number);
-    /**
-     * Returns the value of the digital format.
-     * @returns {number} The current value of the component.
-     */
-    get value(): number;
-    /**
-     * Sets the unit of the digital format.
-     * Valid values are `bit` or `byte`.
-     * @param {string} value The unit to set.
-     */
-    set unit(value: string);
-    /**
-     * Returns the unit of the digital format.
-     * Defaults to `byte` if no unit is set.
-     * @returns {string} The current unit (`bit` or `byte`).
-     */
-    get unit(): string;
-    /**
-     * Sets the unit display style for the digital format.
-     * Valid values are `short`, `long`, or `narrow`.
-     * @param {string} value The unit display style to set.
-     */
-    set unitDisplay(value: string);
-    /**
-     * Returns the unit display style for the digital format.
-     * Defaults to `short` if not set.
-     * @returns {string} - The current unit display style.
-     */
-    get unitDisplay(): string;
-    /**
-     * Prepares the component before rendering.
-     * Computes the formatted value based on the input value and unit.
-     */
-    beforeDraw(): void;
-    formattedValue: string;
-    /**
-     * Renders the component and returns a document fragment.
-     * The rendered structure includes a formatted value wrapped in a container
-     * with slots for additional customization.
-     * @returns {DocumentFragment} - The DOM structure for the component.
-     */
-    draw(): DocumentFragment;
-}

package/dist/packages/wje-format-digital/format-digital.test.d.ts

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

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

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

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

@@ -1,26 +0,0 @@
-import { default as WJElement } from '../wje-element/element.js';
-/**
- * @summary The Grid class is a custom web component that extends WJElement. It is a simple grid that can hold other elements or components.
- * It provides a slot for adding child elements or components.
- * @documentation https://elements.webjet.sk/components/grid
- * @status stable
- * @augments WJElement
- * @slot - The slot for adding child elements or components.
- */
-export default class Grid extends WJElement {
-    /**
-     * Getter for the CSS stylesheet.
-     * @returns {*}
-     */
-    static get cssStyleSheet(): any;
-    /**
-     * Getter for the observed attributes.
-     * @returns {*[]}
-     */
-    static get observedAttributes(): any[];
-    /**
-     * Draws the Grid element.
-     * @returns {DocumentFragment}
-     */
-    draw(): DocumentFragment;
-}

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

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

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

@@ -1,35 +0,0 @@
-import { default as WJElement } from '../wje-element/element.js';
-/**
- * @summary `Header` is a custom web component that represents a header. It extends from `WJElement`.
- * @documentation https://elements.webjet.sk/components/header
- * @status stable
- * @augments {WJElement}
- * @csspart native - The native part
- * @slot default - Default slot for the header content
- * @cssproperty [--wje-header-background=var(--wje-background)] - The background of the header element.
- * @cssproperty [--wje-header-border-color=var(--wje-border-color)] - The border color of the header element.
- * @cssproperty [--wje-header-border-width=0 0 1px 0] - The border width of the header element.
- * @cssproperty [--wje-header-border-style=solid] - The border styles of the header
- * @cssproperty [--wje-header-top=0] - The position top of the header
- * @cssproperty [--wje-header-height=60px] - The height of the header element.
- * @tag wje-header
- */
-export default class Header extends WJElement {
-    /**
-     * Returns the CSS styles for the component.
-     * @static
-     * @returns {CSSStyleSheet}
-     */
-    static get cssStyleSheet(): CSSStyleSheet;
-    /**
-     * Returns the list of attributes to observe for changes.
-     * @static
-     * @returns {Array<string>}
-     */
-    static get observedAttributes(): string[];
-    /**
-     * Draws the component.
-     * @returns {DocumentFragment}
-     */
-    draw(): DocumentFragment;
-}

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

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

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

@@ -1,40 +0,0 @@
-import { default as WJElement } from '../wje-element/element.js';
-/**
- * @summary This element represents an icon. `IconElement` is a custom web component that represents an icon.
- * @documentation https://elements.webjet.sk/components/icon
- * @status stable
- * @augments WJElement
- * @csspart svg - The SVG part of the icon
- * @cssproperty [--wje-icon-size=1rem] - The size of the icon element
- * @cssproperty [--wje-icon-width=var(--wje-icon-size, 100%)] - The width of the icon element
- * @cssproperty [--wje-icon-height=var(--wje-icon-size, 100%)] - The height of the icon element
- * @tag wje-icon
- */
-export default class Icon extends WJElement {
-    /**
-     * Returns the CSS styles for the component.
-     * @static
-     * @returns {CSSStyleSheet}
-     */
-    static get cssStyleSheet(): CSSStyleSheet;
-    /**
-     * Returns the list of attributes to observe for changes.
-     * @static
-     * @returns {Array<string>}
-     */
-    static get observedAttributes(): string[];
-    /**
-     * Draws the component.
-     * @param {object} context The context for drawing.
-     * @param {object} store The store for drawing.
-     * @param {object} params The parameters for drawing.
-     * @returns {DocumentFragment}
-     */
-    draw(context: object, store: object, params: object): DocumentFragment;
-    url: string;
-    native: HTMLDivElement;
-    /**
-     * Called after the component has been drawn.
-     */
-    afterDraw(): void;
-}

package/dist/packages/wje-icon/service/service.d.ts

@@ -1,11 +0,0 @@
-export const iconContent: Map<any, any>;
-export function getSrc(src: string): string | null;
-export function isSrc(str: string): boolean;
-export function isSvgDataUrl(url: string): boolean;
-export function isEncodedDataUrl(url: string): boolean;
-export function isStr(val: any): boolean;
-export function validateContent(svgContent: string): string;
-export function isValid(elm: Element | Node): boolean;
-export function getSvgContent(url: string, sanitize?: boolean): Promise<void>;
-export function getUrl(i: HTMLElement): string | null;
-export function getName(iconName: string): string | null;

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

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

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

@@ -1,197 +0,0 @@
-import { default as WJElement } from '../wje-element/element.js';
-import { default as Input } from '../wje-input/input.js';
-import { default as InfiniteScroll } from '../wje-infinite-scroll/infinite-scroll.js';
-import { default as Tooltip } from '../wje-tooltip/tooltip.js';
-import { default as Popup } from '../wje-popup/popup.js';
-/**
- * @summary This element allows users to pick an icon from a set of available options.
- * `IconPicker` is a custom web component that represents an interactive icon picker. It features
- * search functionality, infinite scrolling, and popup-based selection. The component is highly customizable
- * and integrates seamlessly with other `WJElement` components.
- * @documentation https://elements.webjet.sk/components/icon-picker
- * @status stable
- * @augments {WJElement}
- * @attribute {string} icon - The selected icon's name.
- * @attribute {number} size - The number of icons displayed per page in infinite scroll. Default is 60.
- * @csspart native - The native part of the component.
- * @csspart anchor - The part representing the anchor button displaying the selected icon.
- * @csspart picker - The picker part containing the search and icon selection interface.
- * @csspart input - The input part for searching icons.
- * @cssproperty [--wje-color-picker-value=#ff0000] - The default color value.
- * @cssproperty [--wje-color-picker-area=transparent] - The background color of the color picker area.
- * @cssproperty [--wje-color-picker-swatch=transparent] - The background color of the swatch picker.
- * @cssproperty [--wje-color-picker-size=1rem] - The size of the icons in the picker.
- * @cssproperty [--wje-color-picker-radius=4px] - The border radius of the picker.
- * @tag wje-icon-picker
- */
-export default class IconPicker extends WJElement {
-    /**
-     * Returns the CSS styles for the component.
-     * @static
-     * @returns {CSSStyleSheet}
-     */
-    static get cssStyleSheet(): CSSStyleSheet;
-    /**
-     * Returns the list of attributes to observe for changes.
-     * @static
-     * @returns {Array<string>}
-     */
-    static get observedAttributes(): string[];
-    /**
-     * Dependencies of the IconPicker component.
-     * @property {object} dependencies
-     */
-    dependencies: {
-        'wje-input': typeof Input;
-        'wje-infinite-scroll': typeof InfiniteScroll;
-        'wje-tooltip': typeof Tooltip;
-        'wje-popup': typeof Popup;
-    };
-    /**
-     * Setter for the markerPosition property.
-     * @param {any} value The value to set.
-     */
-    set size(value: any);
-    /**
-     * Getter for the markerPosition property.
-     * @returns {any} size The value of the markerPosition property.
-     */
-    get size(): any;
-    /**
-     * Setter for the value property.
-     * @param value
-     */
-    set icon(value: string);
-    /**
-     * Getter for the value property.
-     * @returns {string}
-     */
-    get icon(): string;
-    /**
-     * Prepares the component before drawing.
-     */
-    beforeDraw(): Promise<void>;
-    tags: any[];
-    transformedObjects: any[];
-    index: any[];
-    /**
-     * Draws the component.
-     * @returns {DocumentFragment}
-     */
-    draw(): DocumentFragment;
-    popup: HTMLElement;
-    input: HTMLElement;
-    anchor: HTMLDivElement;
-    picker: HTMLDivElement;
-    infiniteScroll: InfiniteScroll;
-    /**
-     * Called after the component has been drawn.
-     */
-    afterDraw(): void;
-    value: any;
-    init: boolean;
-    /**
-     * Initializes the component.
-     */
-    initial(): void;
-    /**
-     * Converts an object of tags into a transformed array of objects, separating `filled` and `outline` styles.
-     * The function processes an input object containing tags, extracts its values,
-     * and for each tag that has both `filled` and `outline` styles, splits them into
-     * two separate objects. Tags without `filled` styles remain unchanged.
-     * @param {object} tags The input object containing tags as properties. Each property is an object with a `styles` key.
-     * @param {object} tags[].styles The styles object containing `filled` and/or `outline` styles.
-     * @param {object} [tags[].styles.outline] The outline style object, if present.
-     * @param {object} [tags[].styles.filled] The filled style object, if present.
-     * @returns {Array<object>} An array of transformed objects. Objects with both `filled` and `outline` styles are split into separate objects, each containing only one style.
-     * @example
-     * const tags = {
-     *     hourglass: {
-     *         styles: {
-     *             outline: { ... },
-     *             filled: { ... },
-     *         }
-     *     },
-     *     clock: {
-     *         styles: {
-     *             outline: { ... },
-     *         }
-     *     }
-     * };
-     * const result = convertObject(tags);
-     * console.log(result);
-     * // [
-     * //   { styles: { outline: { ... } } },
-     * //   { styles: { filled: { ... } } },
-     * //   { styles: { outline: { ... } } }
-     * // ]
-     */
-    convertObject: (tags?: {
-        styles: {
-            outline?: object;
-            filled?: object;
-        };
-    }) => Array<object>;
-    /**
-     * Converts an icon data object into an HTML element structure.
-     * This function creates a styled HTML element that represents an icon with a tooltip.
-     * The tooltip displays the name of the icon, and the icon itself is styled based on
-     * whether it uses the `filled` style.
-     * @param {object} data The icon data object.
-     * @returns {HTMLElement} A `div` element containing the icon wrapped in a `wje-tooltip`. The tooltip displays the icon name, and the `wje-icon` element represents the icon with attributes set according to the data.
-     * @example
-     * const iconData = {
-     *     name: "hourglass",
-     *     styles: {
-     *         filled: { ... }
-     *     }
-     * };
-     * const htmlElement = dataToHtml(iconData);
-     * document.body.appendChild(htmlElement);
-     *
-     * // The resulting structure:
-     * // <div class="icon-item">
-     * //   <wje-tooltip content="hourglass">
-     * //     <wje-icon name="hourglass" size="large" filled></wje-icon>
-     * //   </wje-tooltip>
-     * // </div>
-     */
-    dataToHtml: (data: object) => HTMLElement;
-    /**
-     * Sets up the infinite scroll for the component.
-     */
-    setupInfiniteScroll(): void;
-    /**
-     * Gets the category of the tags.
-     * @param {Array} tags The tags to get the category of.
-     * @returns {Array} The category of the tags.
-     */
-    getCategory(tags: any[]): any[];
-    /**
-     * Gets the tags.
-     * @returns {Promise<Array>} The tags of the component.
-     */
-    getTags(): Promise<any[]>;
-    /**
-     * Searches icons based on user input.
-     * This method handles the input event and filters the available icons based on the provided search string.
-     * The filtering is performed on an index that combines icon names and their tags.
-     * The results are then adjusted for infinite scrolling.
-     * @param {Event} e The input event (e.g., `wje-input:input`) containing the search query details.
-     */
-    searchIcon: (e: Event) => void;
-    /**
-     * Clears the icons container.
-     */
-    clearIconsContainer(): void;
-    /**
-     * Closes the component.
-     */
-    onClose: () => void;
-    /**
-     * Gets the URL of the tags.
-     * @param {string} path The path to get the URL of.
-     * @returns {string} The URL of the tags path.
-     */
-    getTagsUrl: (path: string) => string;
-}

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

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

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

@@ -1,117 +0,0 @@
-import { default as WJElement } from '../wje-element/element.js';
-/**
- * @summary This element represents an image. `Img` is a custom web component that represents an image. It extends from `WJElement`.
- * @documentation https://elements.webjet.sk/components/img
- * @status stable
- * @augments {WJElement}
- * @cssproperty --img-width - The width of the image
- * @cssproperty --img-height - The height of the image
- * @property {string} src - The source URL of the image.
- * @property {string} alt - The alternative text for the image.
- * @property {string} fallout - The action to perform when an error occurs while loading the image. The value can be a function or a predefined action like 'delete'.
- * @property {string} loader - The URL of the image loader to display while the image is loading.
- * @tag wje-img
- */
-export default class Img extends WJElement {
-    /**
-     * Returns the CSS styles for the component.
-     * @static
-     * @returns {CSSStyleSheet}
-     */
-    static get cssStyleSheet(): CSSStyleSheet;
-    /**
-     * Returns the list of attributes to observe for changes.
-     * @static
-     * @returns {Array<string>}
-     */
-    static get observedAttributes(): string[];
-    _fallout: boolean;
-    actions: {
-        delete: () => void;
-        log: () => void;
-    };
-    /**
-     * Sets the value of the `src` attribute for the element.
-     * @param {string} value The value to set for the `src` attribute.
-     */
-    set src(value: string);
-    /**
-     * Retrieves the value of the 'src' attribute from the element.
-     * @returns {string} The value of the 'src' attribute.
-     */
-    get src(): string;
-    /**
-     * Sets the value of the 'alt' attribute for the element.
-     * @param {string} value The new value to set for the 'alt' attribute.
-     */
-    set alt(value: string);
-    /**
-     * Retrieves the value of the 'alt' attribute for the current element.
-     * @returns {string|null} The value of the 'alt' attribute, or null if the attribute is not set.
-     */
-    get alt(): string;
-    /**
-     * Sets the fallout property. Updates the `fallout` attribute if the value is a string;
-     * otherwise, assigns the value to the `_fallout` property.
-     * @param {string|*} value The value to set for the fallout property. If a string, it will update the `fallout` attribute; for other types, it will assign it to the `_fallout` property.
-     */
-    set fallout(value: string);
-    /**
-     * Retrieves the value of the 'fallout' attribute if it exists, otherwise returns the internal `_fallout` property.
-     * @returns {string|null} The value of the 'fallout' attribute or the `_fallout` property if the attribute is not present. Returns null if no value is found.
-     */
-    get fallout(): string;
-    /**
-     * Sets the value of the loader attribute.
-     * @param {string} value The value to set for the loader attribute.
-     */
-    set loader(value: string);
-    /**
-     * Retrieves the value of the 'loader' attribute from the element.
-     * @returns {string|null} The value of the 'loader' attribute if set, otherwise null.
-     */
-    get loader(): string;
-    /**
-     * Creates and assembles a lazy-loaded image element within a document fragment.
-     * @returns {DocumentFragment} A document fragment containing the image element.
-     */
-    draw(): DocumentFragment;
-    native: HTMLImageElement;
-    /**
-     * Handles post-draw operations, such as setting up a lazy image loader using an IntersectionObserver.
-     * Observes when the target element becomes visible in the viewport and updates its source with the provided image source.
-     * Removes the `lazy` class once the image source is updated and unobserves the element.
-     * It also invokes the `onerrorFunc` method at the beginning to handle potential error scenarios.
-     * @returns {void} Does not return a value.
-     */
-    afterDraw(): void;
-    /**
-     * Deletes the current image by calling the remove method.
-     * This function is typically used to trigger the removal of an image element
-     * or perform cleanup operations related to the image.
-     */
-    deleteImage: () => void;
-    /**
-     * Adds a new action to the internal actions object.
-     * @param {string} name The name of the action to be added.
-     * @param {Function} func The function representing the action logic.
-     * @returns {void} This method does not return a value.
-     */
-    addAction(name: string, func: Function): void;
-    /**
-     * Removes an action from the actions list if it exists.
-     * @param {string} name The name of the action to remove.
-     * @returns {void} Does not return a value.
-     */
-    removeAction(name: string): void;
-    /**
-     * Handles error scenarios by checking the `fallout` property and performing
-     * corresponding actions. If `fallout` is not defined, the function terminates
-     * early. Logs the active actions and attempts to assign an error handler
-     * based on the `fallout` value. If the `fallout` value does not correspond to
-     * a recognized action, it logs an error message.
-     * @function onerrorFunc
-     * @memberof Img
-     */
-    onerrorFunc: (img: any) => void;
-}

package/dist/packages/wje-img-comparer/img-comparer.d.ts

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

package/dist/packages/wje-img-comparer/img-comparer.element.d.ts

@@ -1,60 +0,0 @@
-import { default as WJElement } from '../wje-element/element.js';
-import { default as Icon } from '../wje-icon/icon.js';
-/**
- * @summary This element allows users to compare two images. `ImgComparer` is a custom web component that represents an image comparer.
- * It extends from `WJElement` and uses the `Icon` component.
- * @documentation https://elements.webjet.sk/components/img-comparer
- * @status stable
- * @augments {WJElement}
- * @slot before - The before image slot.
- * @slot after - The after image slot.
- * @csspart divider - The divider part.
- * @cssproperty [--wje-img-compare-divider-area=12px] - The area of the divider. This is the size of the divider. Accepts any valid CSS size.
- * @cssproperty [--wje-img-compare-divider-background=white] - Sets the background color of the divider in the image comparison component. Accepts any valid CSS color value (e.g., `red`, `#ff0000`, `rgba(255, 255, 255, 0.5)`). The default value is `white`, which ensures high contrast in most designs.
- * @cssproperty [--wje-img-compare-divider-size=2px] - The size of the divider. This is the thickness of the divider. Accepts any valid CSS size.
- * @cssproperty [--wje-img-compare-divider-left=50%] - The left position of the divider. This is the initial position of the divider.
- * @cssproperty [--wje-img-compare-position=50%] - The position of the divider. This is the position of the divider.
- * @cssproperty [--wje-img-compare-clip-path=inset(0 calc(100% - var(--wje-img-compare-position)) 0 0)] - The clip path of the divider. This is the clip path of the divider.
- * @tag wje-img-comparer
- */
-export default class ImgComparer extends WJElement {
-    /**
-     * Returns the CSS styles for the component.
-     * @static
-     * @returns {CSSStyleSheet}
-     */
-    static get cssStyleSheet(): CSSStyleSheet;
-    /**
-     * Returns the list of attributes to observe for changes.
-     * @static
-     * @returns {Array<string>}
-     */
-    static get observedAttributes(): string[];
-    /**
-     * Dependencies of the ImgComparer component.
-     * @property {object} dependencies
-     */
-    dependencies: {
-        'wje-icon': typeof Icon;
-    };
-    /**
-     * Draws the component.
-     * @returns {DocumentFragment}
-     */
-    draw(): DocumentFragment;
-    native: HTMLDivElement;
-    /**
-     * Handles the drag event.
-     * @param {Event} e The event.
-     */
-    handleDrag: (e: Event) => void;
-    position: number;
-    /**
-     * Clamps a number between a minimum and maximum value.
-     * @param {number} num The number to clamp.
-     * @param {number} min The minimum value.
-     * @param {number} max The maximum value.
-     * @returns {number} The clamped number.
-     */
-    clamp: (num: number, min: number, max: number) => number;
-}