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

package/dist/packages/wje-file-upload-item/file-upload-item.element.d.ts

@@ -1,84 +0,0 @@
-import { default as WJElement } from '../wje-element/element.js';
-import { Localizer } from '../utils/localize.js';
-/**
- * @summary This element allows users to upload files.
- * `FileUploadItem` is a custom web component that represents a file upload item.
- * It extends from `WJElement` and uses the `Localizer` utility for localization.
- * @documentation https://elements.webjet.sk/components/file-upload
- * @status stable
- * @augments WJElement
- * @csspart button - The delete button part
- * @csspart image - The image part
- * @csspart name - The name part
- * @csspart size - The size part
- * @slot img - Slot for the image
- * @slot action - Slot for the action buttons
- * @cssproperty --primary-color - The primary color of the file upload item.
- * //@fires wje-button:click - Dispatches when the delete button is clicked
- * @tag wje-file-upload
- */
-export default class FileUploadItem 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(): Array<string>;
-    localizer: Localizer;
-    /**
-     * Sets the 'is-uploaded' attribute to indicate the uploaded status.
-     * @param {boolean} value The value to determine if the element is uploaded.
-     */
-    set isUploaded(value: boolean);
-    /**
-     * Checks if the 'is-uploaded' attribute is present on the element.
-     * @returns {boolean} True if the 'is-uploaded' attribute exists, otherwise false.
-     */
-    get isUploaded(): boolean;
-    /**
-     * Sets the size attribute of the element.
-     * @param {string | number} value The value to set for the size attribute.
-     */
-    set size(value: string | number);
-    /**
-     * Retrieves the value of the 'size' attribute.
-     * @returns {string|null} The value of the 'size' attribute, or null if the attribute is not present.
-     */
-    get size(): string | null;
-    /**
-     * Dependencies for the component.
-     * @type {object}
-     */
-    dependencies: object;
-    /**
-     * A lifecycle method that is called when one of the observed attributes of the custom element is added, removed, or changed.
-     * This method is used to react to changes in the specified attributes.
-     * @param {string} name The name of the attribute that was changed.
-     * @param {string|null} oldValue The previous value of the attribute before the change, or null if the attribute was not previously set.
-     * @param {string|null} newValue The new value of the attribute after the change, or null if the attribute has been removed.
-     * @returns {void} This method does not return a value.
-     */
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
-    /**
-     * Method to draw the component on the screen.
-     * @returns {DocumentFragment} The fragment containing the component.
-     */
-    draw(): DocumentFragment;
-    button: HTMLElement;
-    uploadedEl: HTMLElement;
-    sliderEl: HTMLElement;
-    /**
-     * Called after the component has been drawn.
-     */
-    afterDraw(): void;
-    /**
-     * Handles the delete action.
-     */
-    onDelete: () => void;
-}

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

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

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(): Array<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,83 +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.
- * @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(): Array<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(): Array<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(): Array<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/library.d.ts

@@ -1,3 +0,0 @@
-export function getIconLibrary(name: any): any;
-export function registerIconLibrary(name: any, options: any): void;
-export function unregisterIconLibrary(name: any): 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,210 +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';
-/**
- * @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(): Array<string>;
-    /**
-     * Dependencies of the IconPicker component.
-     * @property {object} dependencies
-     */
-    dependencies: {
-        'wje-input': typeof Input;
-        'wje-infinite-scroll': typeof InfiniteScroll;
-        'wje-tooltip': typeof Tooltip;
-    };
-    /**
-     * 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;
-    /**
-     * Setter for the value property.
-     * @param value
-     */
-    set type(value: string);
-    /**
-     * Getter for the value property.
-     * @returns {string}
-     */
-    get type(): string;
-    /**
-     * Prepares data before the draw operation by fetching tags, transforming objects, and creating an index.
-     * @returns {Promise<void>} Resolves when data preparation is complete.
-     */
-    beforeDraw(): Promise<void>;
-    tags: any[];
-    transformedObjects: any[];
-    index: any[];
-    /**
-     * Draws and initializes the native color picker component on the DOM.
-     * This method creates and appends the necessary elements, including input and infinite scroll components,
-     * and sets their attributes and event listeners. It also provides custom data handling for infinite scrolling
-     * and manages the way icons are displayed based on input.
-     * @returns {DocumentFragment} A document fragment containing the fully constructed color picker component.
-     */
-    draw(): DocumentFragment;
-    input: HTMLElement;
-    picker: HTMLDivElement;
-    infiniteScroll: InfiniteScroll;
-    /**
-     * Executes actions that occur after the component finishes its draw phase. Sets up event listeners for input clear
-     * and infinite scroll item clicks, resets initialization state, and rebinds scroll-related events.
-     * @returns {void} Does not return a value.
-     */
-    afterDraw(): void;
-    init: boolean;
-    /**
-     * Handles the selection of an icon from a given input element and updates the relevant properties and events.
-     * @function selectIcon
-     * @param {HTMLElement} icon The icon element that was selected. It must have a 'name' attribute and may optionally have a 'filled' attribute.
-     * The function performs the following actions:
-     * - Retrieves the name of the selected icon from its 'name' attribute.
-     * - Determines the style type ('filled' or 'outline') based on the presence of the 'filled' attribute.
-     * - Searches for a matching object in the `transformedObjects` array based on name and style.
-     * - Creates a new `wje-icon` element and assigns its attributes based on the selected icon's properties.
-     * - Updates the selected object's properties and assigns it to the `value`, `icon`, and `type` properties of the class.
-     * - Dispatches a custom event (`wje-icon-picker:select`) to signal a change in the selected icon.
-     */
-    selectIcon: (icon: HTMLElement) => void;
-    value: any;
-    /**
-     * 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-icon>
-     * //   </wje-tooltip>
-     * // </div>
-     */
-    dataToHtml: (data: object) => HTMLElement;
-    /**
-     * 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;
-    /**
-     * Creates a debounced version of the provided function that delays its execution
-     * until after the specified delay has passed since the last time it was invoked.
-     * @param {Function} fn The function to debounce.
-     * @param {number} delay The delay duration in milliseconds.
-     * @returns {Function} A new debounced function that delays the execution of the original function.
-     */
-    debounce(fn: Function, delay: number): Function;
-}

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

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