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

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

@@ -0,0 +1,105 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * @summary This class represents a Breadcrumbs container, extending the WJElement class. It acts as a wrapper for individual breadcrumb elements and manages their behavior, such as collapsing and marking the last breadcrumb.
+ * @documentation https://elements.webjet.sk/components/breadcrumbs
+ * @status stable
+ * @augments WJElement
+ * @slot - The container for breadcrumb elements.
+ * @csspart container - The component's container wrapper.
+ * @attribute {number} max-items - The maximum number of visible breadcrumbs before collapsing.
+ * @attribute {number} items-before-collapse - The number of breadcrumbs to show before the collapsed indicator.
+ * @attribute {number} items-after-collapse - The number of breadcrumbs to show after the collapsed indicator.
+ * @tag wje-breadcrumbs
+ * @example
+ * <!-- Example usage -->
+ * <wje-breadcrumbs max-items="5" items-before-collapse="2" items-after-collapse="2">
+ *   <wje-breadcrumb>Home</wje-breadcrumb>
+ *   <wje-breadcrumb>About</wje-breadcrumb>
+ *   <wje-breadcrumb>Services</wje-breadcrumb>
+ *   <wje-breadcrumb>Portfolio</wje-breadcrumb>
+ *   <wje-breadcrumb>Contact</wje-breadcrumb>
+ * </wje-breadcrumbs>
+ *
+ * <!-- Output: Only the first two and last two breadcrumbs will be visible, with a collapsed indicator in the middle -->
+ */
+export default class Breadcrumbs extends WJElement {
+    /**
+     * Get CSS stylesheet for the Breadcrumbs 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>;
+    /**
+     * Last breadcrumb flag
+     * @type {boolean}
+     */
+    last: boolean;
+    /**
+     * Set variant attribute for the Breadcrumbs element.
+     * @param value
+     */
+    set variant(value: string);
+    /**
+     * Get variant attribute for the Breadcrumbs element.
+     * @returns {string}
+     */
+    get variant(): string;
+    /**
+     * Get items before collapse attribute.
+     * @param {string} value
+     */
+    set maxItems(value: string);
+    /**
+     * Get items before collapse attribute.
+     * @returns {number}
+     */
+    get maxItems(): number;
+    /**
+     * Get items before collapse attribute.
+     * @param value
+     */
+    set itemsBeforeCollapse(value: number);
+    /**
+     * Get items before collapse attribute.
+     * @returns {number}
+     */
+    get itemsBeforeCollapse(): number;
+    /**
+     * Get items after collapse attribute.
+     * @param value
+     */
+    set itemsAfterCollapse(value: number);
+    /**
+     * Get items after collapse attribute.
+     * @returns {number}
+     */
+    get itemsAfterCollapse(): number;
+    /**
+     * Draw method for the Breadcrumbs element.
+     * @returns {object} fragment - The document fragment
+     */
+    draw(): object;
+    /**
+     * Updates the breadcrumb elements after they are drawn on the page.
+     * It manages attributes on breadcrumb items and handles the logic for collapsing breadcrumbs
+     * if the total exceeds the specified maximum items.
+     * @returns {void} This method does not return a value.
+     */
+    afterDraw(): void;
+    /**
+     * Retrieves all breadcrumb elements within the current instance.
+     * @returns {Array<Element>} An array of breadcrumb elements (`wje-breadcrumb`) found within the instance. Returns an empty array if no breadcrumbs are found.
+     */
+    getBreadcrumbs(): Array<Element>;
+    /**
+     * Retrieves all breadcrumb elements that have the 'collapsed' attribute.
+     * @returns {Array<Element>} An array of DOM elements representing breadcrumbs with the 'collapsed' attribute.
+     */
+    getBreadcrumbsCollapsed(): Array<Element>;
+}

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

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

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

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

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

@@ -0,0 +1,204 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * @summary This class represents Button element, extending the WJElement class.
+ * @documentation https://elements.webjet.sk/components/button
+ * @status stable
+ * @augments WJElement
+ * @dependency wje-icon
+ * @slot - The button main content.
+ * @slot icon - The button icon.
+ * @slot caret - The button caret.
+ * @slot start - The button start slot.
+ * @slot end - The button end slot.
+ * @slot toggle - The button toggle slot.
+ * @csspart native - The component's native wrapper.
+ * @cssproperty [--wje-button-background-color=transparent] - Background color of the component;
+ * @cssproperty [--wje-button-border-color=--wje-color-contrast-4] - Border color of the component;
+ * @cssproperty [--wje-button-color=--wje-color-contrast-11] - Color of the component;
+ * @cssproperty [--wje-button-border-radius=--wje-border-radius-medium] - Border radius of the component;
+ * @cssproperty [--wje-button-border-width=1px] - Border width of the component;
+ * @cssproperty [--wje-button-border-style=solid] - Border style of the component;
+ * @cssproperty [--wje-button-border-color=--wje-color-contrast-1] - Border color of the component;
+ * @cssproperty [--wje-button-margin-inline=0] - Margin inline of the component;
+ */
+export default class Button extends WJElement {
+    /**
+     * Get CSS stylesheet for the Button element.
+     * @static
+     * @returns {CSSStyleSheet} styles - The CSS stylesheet for the Button element.
+     */
+    static get cssStyleSheet(): CSSStyleSheet;
+    /**
+     * Get observed attributes for the Button element.
+     * @static
+     * @returns {Array<string>} observedAttributes - The observed attributes array for the Button element.
+     */
+    static get observedAttributes(): Array<string>;
+    /**
+     * @summary A static property that indicates whether the custom element is form-associated or not.
+     * Form-associated custom elements are elements that can participate in form submission.
+     * @type {boolean}
+     */
+    static formAssociated: boolean;
+    internals_: ElementInternals;
+    /**
+     * Dependencies of the Button element.
+     * @type {object}
+     */
+    dependencies: object;
+    /**
+     * Properties of the element Button.
+     * @param value
+     */
+    set color(value: string | string);
+    /**
+     * Get color of the Button element.
+     * @returns {string|string}
+     */
+    get color(): string | string;
+    /**
+     * Set variant of the Button element.
+     * @param value
+     */
+    set caret(value: boolean);
+    /**
+     * Get variant of the Button element.
+     * @returns {boolean}
+     */
+    get caret(): boolean;
+    /**
+     * Sets the 'round' attribute on the element. If the value is true, the attribute is added;
+     * otherwise, it is removed from the element.
+     * @param {boolean} value A boolean indicating whether to set or remove the 'round' attribute.
+     */
+    set round(value: boolean);
+    /**
+     * Retrieves the value of the 'round' attribute as a boolean.
+     * Checks if the 'round' attribute is present on the element.
+     * @returns {boolean} True if the 'round' attribute exists, otherwise false.
+     */
+    get round(): boolean;
+    /**
+     * Set variant of the Button element.
+     * @param value
+     */
+    set tooltip(value: boolean);
+    /**
+     * Get variant of the Button element.
+     * @returns {boolean}
+     */
+    get tooltip(): boolean;
+    /**
+     * Set variant of the Button element.
+     * @param value
+     */
+    set dialog(value: string | object);
+    /**
+     * Get variant of the Button element.
+     * @returns {string|object}
+     */
+    get dialog(): string | object;
+    /**
+     * Set active state of the Button element.
+     * @param {boolean} value The value to set
+     */
+    set active(value: boolean);
+    /**
+     * Get active state of the Button element.
+     * @returns {boolean} active - The active state
+     */
+    get active(): boolean;
+    /**
+     * Set disabled state of the Button element.
+     * @param {boolean} value The value to set
+     */
+    set disabled(value: boolean);
+    /**
+     * Get disabled state of the Button element.
+     * @returns {boolean} disabled - The disabled state
+     */
+    get disabled(): boolean;
+    /**
+     * Set fill of the Button element.
+     * @param {string} value The value to set
+     */
+    set fill(value: string);
+    /**
+     * Get fill of the Button element.
+     * @returns {string} fill - The fill value
+     */
+    get fill(): string;
+    /**
+     * Set outline state of the Button element.
+     * @param {boolean} value The value to set
+     */
+    set outline(value: boolean);
+    /**
+     * Get outline state of the Button element.
+     * @returns {boolean} outline - The outline state
+     */
+    get outline(): boolean;
+    /**
+     * Set stop propagation state of the Button element.
+     * @param {boolean} value The value to set
+     */
+    set stopPropagation(value: boolean);
+    /**
+     * Get stop propagation state of the Button element.
+     * @returns {boolean} stopPropagation - The stop propagation state
+     */
+    get stopPropagation(): boolean;
+    /**
+     * Sets the value of the custom event attribute.
+     * @param {string} value The value to be assigned to the custom event attribute.
+     */
+    set customEvent(value: string);
+    /**
+     * Retrieves the value of the 'custom-event' attribute from the element.
+     * @returns {string | null} The value of the 'custom-event' attribute, or null if the attribute is not set.
+     */
+    get customEvent(): string | null;
+    /**
+     * Retrieves a mapped object containing custom event parameters extracted from the element's attributes.
+     * Attributes considered are those that begin with 'custom-event-'.
+     * The mapped object's keys are derived by removing the 'custom-event-' prefix from the attribute names,
+     * and the values are the corresponding attribute values.
+     * @returns {object} An object containing key-value pairs of custom event parameters.
+     */
+    get customEventParameters(): object;
+    /**
+     * @summary Callback function that is called when the custom element is associated with a form.
+     * This function sets the internal `_form` property to the associated form.
+     * @param {HTMLFormElement} form The form the custom element is associated with.
+     */
+    formAssociatedCallback(form: HTMLFormElement): void;
+    _form: HTMLFormElement;
+    /**
+     * @summary Callback function that is called when the form-associated state of the custom element changes.
+     * This function updates the 'disabled' attribute of the element based on the new state.
+     * @param {boolean} disabled The new form-associated state.
+     */
+    formDisabledCallback(disabled: boolean): void;
+    /**
+     * Draw method for the Button element.
+     * @returns {object} fragment - The document fragment containing the drawn element.
+     */
+    draw(): object;
+    hasToggle: boolean;
+    slotToggle: HTMLSlotElement;
+    /**
+     * After draw method for the Button element.
+     */
+    afterDraw(): void;
+    unbindRouterLinks: any;
+    /**
+     * Event dialog open method for the Button element.
+     * @param {Event} e The event object
+     */
+    eventDialogOpen: (e: Event) => void;
+    /**
+     * Toggle states method for the Button element.
+     */
+    toggleStates: () => void;
+    #private;
+}

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

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

package/dist/wje-button-group/button-group.d.ts

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

package/dist/wje-button-group/button-group.element.d.ts

@@ -0,0 +1,96 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * @summary ButtonGroup class
+ * @class
+ * @augments WJElement
+ * @csspart native - The component's native wrapper.
+ * @slot - The button group main content.
+ * @csspart native - The component's native wrapper.
+ */
+export default class ButtonGroup extends WJElement {
+    /**
+     * Get CSS stylesheet for the ButtonGroup element.
+     * @static
+     * @returns {object} styles - The CSS styles
+     */
+    static get cssStyleSheet(): object;
+    /**
+     * Get observed attributes for the ButtonGroup element.
+     * @static
+     * @returns {Array<string>} observedAttributes - The observed attributes array
+     */
+    static get observedAttributes(): Array<string>;
+    /**
+     * Sets the "active" attribute to indicate the active state.
+     * @param {boolean|string|number} value The value to set for the "active" attribute, indicating the active state.
+     */
+    set active(value: boolean | string | number);
+    /**
+     * Retrieves the value of the 'active' attribute.
+     * If the attribute is not set, it returns false.
+     * @returns {string|boolean} The value of the 'active' attribute or false if it is not set.
+     */
+    get active(): string | boolean;
+    /**
+     * Sets the color attribute of the element.
+     * @param {string} value The value to set for the color attribute.
+     */
+    set color(value: string);
+    /**
+     * Retrieves the current value of the 'color' attribute.
+     * If the 'color' attribute is not set, it defaults to 'primary'.
+     * @returns {string} The value of the 'color' attribute or the default value 'primary'.
+     */
+    get color(): string;
+    /**
+     * Sets the round attribute for the element.
+     * @param {string} value The value to set for the round attribute.
+     */
+    set round(value: string);
+    /**
+     * Returns whether the element has the 'round' attribute.
+     * @returns {boolean} True if the 'round' attribute is present, otherwise false.
+     */
+    get round(): boolean;
+    /**
+     * Sets the 'fill' attribute of the element.
+     * @param {string} value The value to assign to the 'fill' attribute.
+     */
+    set fill(value: string);
+    /**
+     * Retrieves the 'fill' attribute of the element. If the 'fill' attribute is not set,
+     * it returns the default value 'link'.
+     * @returns {string} The value of the 'fill' attribute, or 'link' if the attribute is not present.
+     */
+    get fill(): string;
+    /**
+     * Draw method for the ButtonGroup element.
+     * @returns {object} fragment - The document fragment
+     */
+    draw(): object;
+    slotElement: HTMLSlotElement;
+    /**
+     * After draw method for the ButtonGroup element.
+     */
+    afterDraw(): void;
+    /**
+     * Find button method to find the button element.
+     * @param {object} el The element
+     * @returns {object} button - The button element
+     */
+    findButton(el: object): object;
+    /**
+     * Toggles the state of a group of buttons based on the active button.
+     * @param {object} activeButton The button that is currently active.
+     * @param {Array<object>} buttons An array of button objects to be toggled.
+     * @returns {void} This method does not return a value.
+     */
+    toggle(activeButton: object, buttons: Array<object>, index: any): void;
+    /**
+     * Updates the state of a button by removing one mode attribute and setting another mode attribute.
+     * @param {HTMLElement} button The button element whose state is to be updated.
+     * @param {string} modeToRemove The mode attribute to be removed from the button. Expected values are 'color' or 'fill'.
+     * @returns {void}
+     */
+    updateButtonState(button: HTMLElement, modeToRemove: string): void;
+}

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

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

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

@@ -0,0 +1,31 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * @summary This class represents Card element, extending the WJElement class.
+ * @documentation https://elements.webjet.sk/components/card
+ * @status stable
+ * @augments WJElement
+ * @slot - The card main content.
+ * @cssproperty [--wje-card-background=#fff] - Background of the component;
+ * @cssproperty [--wje-card-color=#000] - Color of the component;
+ * @cssproperty [--wje-card-border-color=transparent] - Border color of the component;
+ * @cssproperty [--wje-card-border-style=solid] - Border style of the component;
+ * @cssproperty [--wje-card-border-width=1px] - Border width of the component;
+ * @cssproperty [--wje-card-border-radius=0.5rem] - Border radius of the component;
+ * @cssproperty [--wje-card-shadow=var(--wje-shadow-x-large)] - Shadow of the component;
+ */
+export default class Card extends WJElement {
+    /**
+     * Get CSS stylesheet for the Card element.
+     * @static
+     * @returns {object} styles - The CSS styles
+     */
+    static get cssStyleSheet(): object;
+    /**
+     * Draw method for the Card element.
+     * @param {object} context The context object
+     * @param {object} store The store object
+     * @param {object} params The parameters
+     * @returns {object} fragment - The document fragment
+     */
+    draw(context: object, store: object, params: object): object;
+}

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

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

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

@@ -0,0 +1,22 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * @summary This class represents an Card Content element, extending the WJElement class.
+ * @documentation https://elements.webjet.sk/components/card-content
+ * @status stable
+ * @augments WJElement
+ * @slot - The card content main content.
+ * @cssproperty [--wje-card-padding=0] - Padding of the component;
+ */
+export default class CardContent extends WJElement {
+    /**
+     * Get CSS stylesheet for the CardContent element.
+     * @static
+     * @returns {object} styles - The CSS styles for the CardContent element.
+     */
+    static get cssStyleSheet(): object;
+    /**
+     * Draw method for the CardContent element.
+     * @returns {object} fragment - The document fragment containing the drawn element.
+     */
+    draw(): object;
+}

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

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

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

@@ -0,0 +1,23 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * @summary This class represents Card Controls element, extending the WJElement class.
+ * @documentation https://elements.webjet.sk/components/card-controls
+ * @status stable
+ * @augments WJElement
+ * @slot - The card controls main content.
+ * @cssproperty [--wje-card-controls-font-size=11px] - Font size of the component;
+ * @cssproperty [--wje-card-controls-font-family=--wje-font-family-secondary] - Font family of the component;
+ */
+export default class CardControls extends WJElement {
+    /**
+     * Get CSS stylesheet for the CardControls element.
+     * @static
+     * @returns {object} styles - The CSS styles
+     */
+    static get cssStyleSheet(): object;
+    /**
+     * Draw method for the CardControls element.
+     * @returns {object} fragment - The document fragment
+     */
+    draw(): object;
+}

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

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

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

@@ -0,0 +1,22 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * @summary CardHeader class that extends WJElement.
+ * @documentation https://elements.webjet.sk/components/card-header
+ * @status stable
+ * @augments WJElement
+ * @slot - The card header main content.
+ * @cssproperty [--wje-card-header-padding=1rem 1rem 0.5rem] - Padding of the component;
+ */
+export default class CardHeader extends WJElement {
+    /**
+     * Getter for the CSS stylesheet.
+     * @returns {object} The styles object.
+     * @static
+     */
+    static get cssStyleSheet(): object;
+    /**
+     * Draws the CardHeader.
+     * @returns {DocumentFragment} The created document fragment.
+     */
+    draw(): DocumentFragment;
+}

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

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

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

@@ -0,0 +1,30 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * @summary CardSubtitle class that extends WJElement.
+ * @documentation https://elements.webjet.sk/components/card-subtitle
+ * @status stable
+ * @augments WJElement
+ * @slot - The card subtitle main content.
+ * @cssproperty [--wje-card-subtitle-font-size=11px] - Font size of the component;
+ * @cssproperty [--wje-card-subtitle-font-family=var(--wje-font-family-secondary)] - Font family of the component;
+ * @cssproperty [--wje-card-subtitle-padding=0] - Padding of the component;
+ */
+export default class CardSubtitle 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 CardSubtitle element.
+     * @returns {DocumentFragment} The created document fragment.
+     */
+    draw(): DocumentFragment;
+}

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

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

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

@@ -0,0 +1,32 @@
+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

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