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

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

@@ -0,0 +1,72 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * @summary This class represents an Accordion element, extending the WJElement class.
+ * @documentation https://elements.webjet.sk/components/accordion
+ * @status stable
+ * @augments WJElement
+ * @attribute {boolean} multiple - The multiple attribute for the accordion.
+ * @attribute {number} index - The index attribute for the accordion.
+ * @attribute {boolean} disabled - The disabled attribute for the accordion.
+ * @attribute {boolean} expanded - The expanded attribute for the accordion.
+ * @slot - The accordion main content.
+ * //@fires [wje-accordion-item:open] The event fired when the accordion item is opened.
+ * @tag wje-accordion
+ */
+export default class Accordion extends WJElement {
+    /**
+     * Getter for the CSS stylesheet.
+     * @returns {object} The styles for the Accordion element.
+     */
+    static get cssStyleSheet(): object;
+    /**
+     * Getter for the observed attributes.
+     * @returns {Array} An array containing the name of the observed attribute.
+     */
+    static get observedAttributes(): any[];
+    /**
+     * Sets the `multiple` attribute on the element.
+     * If `true`, the `multiple` attribute is added.
+     * If `false`, the `multiple` attribute is removed.
+     * @param {boolean} value A boolean value indicating whether the element should support multiple selections.
+     */
+    set multiple(value: boolean);
+    /**
+     * Determines whether the element has the `multiple` attribute.
+     * @returns {boolean} `true` if the `multiple` attribute is present, otherwise `false`.
+     */
+    get multiple(): boolean;
+    /**
+     * Sets the value of the `index` attribute.
+     * @param {number|string} value The value to set for the `index` attribute.
+     */
+    set index(value: number | string);
+    /**
+     * Retrieves the value of the `index` attribute as a number.
+     * @returns {number} The numerical value of the `index` attribute, or `0` if the attribute is not set.
+     */
+    get index(): number;
+    /**
+     * Method to run before the element is drawn.
+     */
+    beforeDraw(): void;
+    /**
+     * Method to draw the Accordion element.
+     * @returns {object} The document fragment containing the drawn element.
+     */
+    draw(): object;
+    slotEl: HTMLSlotElement;
+    /**
+     * Method to run after the element is drawn.
+     */
+    afterDraw(): void;
+    /**
+     * Method to run after the element is drawn.
+     * @param exception
+     */
+    collapseAll(exception: any): void;
+    /**
+     * Method to get the accordions.
+     * @returns {Array} An array containing the accordions.
+     */
+    getAccordions(): any[];
+}

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

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

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

@@ -0,0 +1,40 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * @summary This class represents an Accordion Item element, extending the WJElement class.
+ * @documentation https://elements.webjet.sk/components/accordion-item
+ * @status stable
+ * @augments WJElement
+ * @slot - The accordion item main content.
+ * @tag wje-accordion
+ */
+export default class AccordionItem extends WJElement {
+    /**
+     * Getter for the CSS stylesheet.
+     * @returns {object} The styles for the Accordion Item element.
+     */
+    static get cssStyleSheet(): object;
+    /**
+     * Getter for the observed attributes.
+     * @returns {Array} An array containing the name of the observed attribute.
+     */
+    static get observedAttributes(): any[];
+    /**
+     * Method to draw the Accordion Item element. This method returns a document fragment containing the drawn element.
+     * @returns {object} The document fragment containing the drawn element.
+     */
+    draw(): object;
+    headline: HTMLDivElement;
+    toggle: HTMLSlotElement;
+    /**
+     * Method to execute after the Accordion Item element is drawn.
+     */
+    afterDraw(): void;
+    /**
+     * Method to handle the attribute changes.
+     */
+    collapse: () => void;
+    /**
+     * Method to handle the attribute changes.
+     */
+    expand: () => void;
+}

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

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

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

@@ -0,0 +1,158 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * @summary This class represents an Animation element, extending the WJElement class.
+ * @documentation https://elements.webjet.sk/components/animation
+ * @status stable
+ * @augments WJElement
+ * @slot - The animation main content.
+ * @cssproperty --size - The size of the avatar.
+ * @tag wje-animation
+ */
+export default class Animation extends WJElement {
+    /**
+     * Getter for the CSS stylesheet.
+     * @returns {object} The styles for the Animation element.
+     */
+    static get cssStyleSheet(): object;
+    /**
+     * Getter for the observed attributes.
+     * @returns {Array} An array containing the name of the observed attribute.
+     */
+    static get observedAttributes(): any[];
+    _animations: any[];
+    /**
+     * Setter for the name attribute.
+     * @param value
+     */
+    set name(value: string);
+    /**
+     * Getter for the name attribute.
+     * @returns {string}
+     */
+    get name(): string;
+    /**
+     * Setter for the name attribute.
+     * @param value
+     */
+    set duration(value: number);
+    /**
+     * Getter for the name attribute.
+     * @returns {number}
+     */
+    get duration(): number;
+    /**
+     * Setter for the name attribute.
+     * @param value
+     */
+    set delay(value: number);
+    /**
+     * Getter for the name attribute.
+     * @returns {number}
+     */
+    get delay(): number;
+    /**
+     * Setter for the name attribute.
+     * @param value
+     */
+    set endDelay(value: number);
+    /**
+     * Getter for the name attribute.
+     * @returns {number}
+     */
+    get endDelay(): number;
+    /**
+     * Setter for the name attribute.
+     * @param value
+     */
+    set fill(value: string);
+    /**
+     * Getter for the name attribute.
+     * @returns {string}
+     */
+    get fill(): string;
+    /**
+     * Setter for the name attribute.
+     * @param value
+     */
+    set iterations(value: string | number);
+    /**
+     * Getter for the name attribute.
+     * @returns {string|number}
+     */
+    get iterations(): string | number;
+    /**
+     * Setter for the name attribute.
+     * @param value
+     */
+    set iterationStart(value: number);
+    /**
+     * Getter for the name attribute.
+     * @returns {number}
+     */
+    get iterationStart(): number;
+    /**
+     * Setter for the name attribute.
+     * @param value
+     */
+    set direction(value: string);
+    /**
+     * Getter for the name attribute.
+     * @returns {string}
+     */
+    get direction(): string;
+    /**
+     * Setter for the name attribute.
+     * @param value
+     */
+    set easing(value: string);
+    /**
+     * Getter for the name attribute.
+     * @returns {string}
+     */
+    get easing(): string;
+    /**
+     * Setter for the animations property.
+     * @param {Array} value The new value for the animations property.
+     */
+    set animations(value: any[]);
+    /**
+     * Getter for the animations' property.
+     * @returns {Array} The current value of the animations' property.
+     */
+    get animations(): any[];
+    /**
+     * Method to draw the Animation element.
+     * @returns {object} The document fragment containing the drawn element.
+     */
+    draw(): object;
+    slotEl: HTMLSlotElement;
+    /**
+     * Method to perform actions after the Animation element is drawn.
+     * This method destroys any existing animation, fetches a new animations array,
+     * selects the appropriate animation, and applies it to the element.
+     */
+    afterDraw(): Promise<void>;
+    animation: Animation;
+    /**
+     * Method to fetch and parse the animations array from a CSS file.
+     * @returns {Array} An array of animation definitions parsed from the CSS file.
+     */
+    getAnimationsArray(): any[];
+    /**
+     * Terminates and cleans up the currently active animation if it exists.
+     * Calls the `cancel` method to stop the animation process.
+     * @returns {void} Does not return any value.
+     */
+    destroyAnimation(): void;
+    /**
+     * Plays the currently assigned animation, if available.
+     * @returns {void} This method does not return any value.
+     */
+    play(): void;
+    /**
+     * Cancels the current animation if it is initialized and has a cancel method.
+     * Logs a warning if the animation is not initialized or the cancel method is unavailable.
+     * @returns {void} Does not return a value.
+     */
+    cancel(): void;
+}

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

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

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

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

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

@@ -0,0 +1,31 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * @summary This class represents an Aside element, extending the WJElement class.
+ * @documentation https://elements.webjet.sk/components/aside
+ * @status stable
+ * @augments WJElement
+ * @slot - The aside main content.
+ * @cssproperty --wje-aside-width;
+ * @cssproperty --wje-aside-top;
+ * @cssproperty --wje-aside-border-color: var(--wje-border-color);
+ * @cssproperty --wje-aside-border-width;
+ * @cssproperty --wje-aside-border-style;
+ * @tag wje-aside
+ */
+export default class Aside extends WJElement {
+    /**
+     * Getter for the CSS stylesheet.
+     * @returns {object} The styles for the Aside element.
+     */
+    static get cssStyleSheet(): object;
+    /**
+     * Getter for the observed attributes.
+     * @returns {Array} An empty array as there are no observed attributes.
+     */
+    static get observedAttributes(): any[];
+    /**
+     * Method to draw the Aside element.
+     * @returns {object} The document fragment containing the drawn element.
+     */
+    draw(): object;
+}

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

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

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

@@ -0,0 +1,76 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * @summary This class represents an Avatar element, extending the WJElement class.
+ * @documentation https://elements.webjet.sk/components/avatar
+ * @status stable
+ * @augments WJElement
+ * @slot - The avatar main content.
+ * @csspart native - The component's native wrapper.
+ * @cssproperty --wje-avatar-width;
+ * @cssproperty --wje-avatar-height;
+ * @cssproperty --wje-avatar-font-size;
+ * @cssproperty --wje-avatar-font-weight;
+ * @cssproperty --wje-avatar-color;
+ * @cssproperty --wje-avatar-background-color;
+ * @cssproperty --wje-avatar-border-radius;
+ * @cssproperty --wje-avatar-border-color;
+ * @cssproperty --wje-avatar-border-width;
+ * @cssproperty --wje-avatar-border-style;
+ * @tag wje-avatar
+ */
+export default class Avatar extends WJElement {
+    /**
+     * Getter for cssStyleSheet.
+     * @returns {string} styles
+     */
+    static get cssStyleSheet(): string;
+    /**
+     * Returns the list of attributes to observe for changes.
+     * @static
+     * @returns {Array<string>}
+     */
+    static get observedAttributes(): Array<string>;
+    /**
+     * Sets the value of the 'label' attribute for the element.
+     * @param {string} value The new value to be set for the 'label' attribute.
+     */
+    set label(value: string);
+    /**
+     * Retrieves the value of the 'label' attribute for the element.
+     * If the attribute is not set, it defaults to an empty string.
+     * @returns {string} The value of the 'label' attribute or an empty string if not defined.
+     */
+    get label(): string;
+    /**
+     * Sets the value of initials for the element by updating
+     * the 'initials' attribute with the provided value.
+     * @param {string} value The value to be set as the initials.
+     */
+    set initials(value: string);
+    /**
+     * Retrieves the value of the 'initials' attribute if it exists.
+     * @returns {boolean} Returns true if the 'initials' attribute is present, otherwise false.
+     */
+    get initials(): boolean;
+    /**
+     * Sets the size attribute for the element.
+     * @param {string | number} value The value to set for the size attribute.
+     */
+    set size(value: string | number);
+    /**
+     * Retrieves the size attribute of the element. If the size attribute
+     * is not defined, it returns the default value 'medium'.
+     * @returns {string} The size value of the element or 'medium' if not specified.
+     */
+    get size(): string;
+    /**
+     * Method to draw the avatar element and return a document fragment.
+     * @returns {object} fragment - The document fragment
+     */
+    draw(): object;
+    /**
+     * Method to check if the avatar is an image.
+     * @returns {boolean} - True if the avatar is an image, false otherwise
+     */
+    isImage(): boolean;
+}

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

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

package/dist/wje-avatar/service/service.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Generates an HSL color value based on the input text.
+ * @param {string} text The input text to generate the HSL color.
+ * @param {number} [s] The saturation value (in percentage) for the HSL color.
+ * @param {number} [l] The lightness value (in percentage) for the HSL color.
+ * @returns {string} - The HSL color string in the format `hsl(h, s%, l%)`.
+ * @description
+ * This function computes a hash from the input text and uses it to generate
+ * a hue value. The hue is combined with the provided saturation and lightness
+ * values to create an HSL color. This can be useful for consistently assigning
+ * colors based on text input, such as for avatars or tags.
+ * @example
+ * // Returns 'hsl(180, 40%, 65%)'
+ * getHsl('example');
+ * @example
+ * // Returns 'hsl(300, 50%, 70%)'
+ * getHsl('test', 50, 70);
+ */
+export function getHsl(text: string, s?: number, l?: number): string;
+/**
+ * Generates background and text HSL colors for avatars based on input text.
+ * The text color is a darker, more saturated variant of the background color
+ * to ensure sufficient contrast while keeping the same hue.
+ *
+ * @param {string} text The input text (e.g. initials or name).
+ * @returns {{ background: string, color: string }}
+ */
+export function getAvatarColors(text: string): {
+    background: string;
+    color: string;
+};
+/**
+ * Generates initials from a given string.
+ * @param {string} string The input string, typically a full name.
+ * @param {number} [length] The desired number of initials (default is 2).
+ * @returns {string} - The generated initials in uppercase.
+ * @description
+ * This function takes a string, splits it by spaces, and generates initials.
+ * It always includes the first character of the first word. If the input string
+ * contains more than one word and the `length` parameter is greater than 1, it
+ * also includes the first character of the last word.
+ * @example
+ * // Returns 'JD'
+ * getInitials('John Doe');
+ * @example
+ * // Returns 'J'
+ * getInitials('John');
+ * @example
+ * // Returns 'JM'
+ * getInitials('John Michael Doe', 2);
+ */
+export function getInitials(string: string, length?: number): string;

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

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

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

@@ -0,0 +1,35 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * @summary This class represents a Badge element, extending the WJElement class.
+ * @documentation https://elements.webjet.sk/components/badge
+ * @status stable
+ * @augments WJElement
+ * @attribute {string} color - The color of the badge element. Accepts any valid string primary, secondary, success, danger, warning, info, default.
+ * @slot - The badge's main content.
+ * @csspart native - The component's native wrapper.
+ * @cssproperty [--wje-badge-border-radius=var(--wje-border-radius-pill)] - Border radius of the badge element.
+ * @tag wje-badge
+ */
+export default class Badge extends WJElement {
+    /**
+     * Retrieves the CSS stylesheet for the Badge element.
+     * @static
+     * @returns {CSSStyleSheet} The CSS styles associated with the Badge.
+     */
+    static get cssStyleSheet(): CSSStyleSheet;
+    /**
+     * Specifies the attributes to observe for changes.
+     * @static
+     * @returns {Array<string>} An array containing the names of attributes to observe.
+     * @example
+     * static get observedAttributes() {
+     *   return ['color'];
+     * }
+     */
+    static get observedAttributes(): Array<string>;
+    /**
+     * Creates the DOM structure for the Badge element.
+     * @returns {DocumentFragment} A document fragment containing the Badge's structure.
+     */
+    draw(): DocumentFragment;
+}

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

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

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

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

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

@@ -0,0 +1,98 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * @summary This class represents a Breadcrumb element, extending the WJElement class. It provides a navigational aid in user interfaces, displaying the current location within a hierarchy.
+ * @documentation https://elements.webjet.sk/components/breadcrumb
+ * @status stable
+ * @augments WJElement
+ * @slot - The main content of the breadcrumb.
+ * @slot start - Slot for content at the start of the breadcrumb.
+ * @slot end - Slot for content at the end of the breadcrumb.
+ * @slot separator - Slot for a custom separator between breadcrumb items.
+ * @csspart native - The native wrapper of the breadcrumb component.
+ * @csspart separator - The separator between breadcrumb items.
+ * @cssproperty [--wje-breadcrumb-a=var(--wje-color-contrast-8)] - The color of the breadcrumb text.
+ * @cssproperty [--wje-breadcrumb-a-hover=var(--wje-color-contrast-6)] - The color of the breadcrumb separator line.
+ * @tag wje-breadcrumb
+ */
+export default class Breadcrumb extends WJElement {
+    /**
+     * Get CSS stylesheet for the Breadcrumb element.
+     * @static
+     * @returns {object} styles - The CSS styles
+     */
+    static get cssStyleSheet(): object;
+    /**
+     * Get observed attributes for the Breadcrumb element.
+     * @static
+     * @returns {Array<string>} - The observed attributes array for the Breadcrumb element.
+     */
+    static get observedAttributes(): Array<string>;
+    _showSeparator: boolean;
+    _showCollapsedIndicator: boolean;
+    /**
+     * Set show separator flag.
+     * @param {boolean} value The value to set
+     */
+    set showSeparator(value: boolean);
+    /**
+     * Get show separator flag.
+     * @returns {boolean} showSeparator - The show separator flag
+     */
+    get showSeparator(): boolean;
+    /**
+     * Set collapsed variant.
+     * @param {string} value The value to set
+     */
+    set collapsedVariant(value: string);
+    /**
+     * Get collapsed variant.
+     * @returns {string} The collapsed variant value in uppercase.
+     */
+    get collapsedVariant(): string;
+    _collapsedVariant: string;
+    /**
+     * Handles attribute changes for the custom element and updates its behavior or appearance accordingly.
+     * @param {string} name The name of the attribute that was changed.
+     * @param {string|null} oldValue The previous value of the attribute before it was changed. Null if the attribute was not previously set.
+     * @param {string|null} newValue The new value of the attribute after it was changed. Null if the attribute was removed.
+     * @returns {boolean} Returns false to signal no default behavior is implemented.
+     */
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): boolean;
+    active: boolean;
+    /**
+     * Draw method for the Breadcrumb element.
+     * @returns {object} fragment - The document fragment
+     */
+    draw(): object;
+    native: HTMLAnchorElement;
+    /**
+     * Renders the collapsed indicator based on the current collapsed variant.
+     * If the collapsed variant is 'DROPDOWN', it invokes the collapseDropdown method.
+     * Otherwise, it invokes the collapseButton method.
+     * @returns {any} The rendered collapsed indicator, either as a dropdown or a button.
+     */
+    drawCollapsedIndicator(): any;
+    /**
+     * Creates and returns a dropdown UI component for collapsed breadcrumbs.
+     * This method generates a dropdown element with a button trigger and a menu populated with items corresponding
+     * to the collapsed breadcrumbs. The dropdown is configured to handle specific interactions and ensure that
+     * events are appropriately managed to avoid propagation issues. Menu items are linked to their corresponding
+     * breadcrumbs, enabling the same functionality as clicking on the original breadcrumb.
+     * @returns {HTMLElement} A configured dropdown element containing a button as trigger and a menu with breadcrumb items.
+     */
+    collapseDropdown(): HTMLElement;
+    /**
+     * Creates a button element that expands hidden breadcrumbs when clicked.
+     * The button is set with appropriate attributes and event listeners to handle
+     * the expanding of hidden breadcrumb elements. Clicking the button will remove
+     * the button itself, reveal hidden breadcrumbs, and stop the current event
+     * propagation.
+     * @returns {HTMLButtonElement} The created button configured to expand breadcrumbs.
+     */
+    collapseButton(): HTMLButtonElement;
+    /**
+     * Retrieves the breadcrumb trail for the current element by returning its parent element.
+     * @returns {Element} The parent element representing the breadcrumb trail.
+     */
+    getBreadcrumbs(): Element;
+}

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

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