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

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

@@ -0,0 +1,159 @@
+import { FormAssociatedElement } from '../internals/form-associated-element.js';
+/**
+ * @summary This class represents a custom input element. It extends the WJElement class and provides additional functionality for handling input.
+ * @documentation https://elements.webjet.sk/components/input
+ * @status stable
+ * @augments {FormAssociatedElement}
+ * @csspart native - The native part.
+ * @csspart wrapper - The wrapper part.
+ * @csspart input - The input part.
+ * @csspart clear - The clear part.
+ * @slot start - Slot for content at the start of the input.
+ * @slot end - Slot for content at the end of the input.
+ * @cssproperty [--wje-input-font-family=var(--wje-font-family)] - Defines the font family for the input text.
+ * @cssproperty [--wje-input-background-color=var(--wje-background)] - Specifies the background color of the input field.
+ * @cssproperty [--wje-input-color=var(--wje-color)] - Sets the text color within the input field.
+ * @cssproperty [--wje-input-color-invalid=var(--wje-color-danger)] - Changes the text color when the input value is invalid.
+ * @cssproperty [--wje-input-border-color=var(--wje-border-color)] - Defines the border color of the input field.
+ * @cssproperty [--wje-input-border-color-focus=var(--wje-color-primary)] - Specifies the border color when the input is focused.
+ * @cssproperty [--wje-input-border-width=1px] - Sets the width of the input border.
+ * @cssproperty [--wje-input-border-style=solid] - Defines the border style of the input (e.g., solid, dashed).
+ * @cssproperty [--wje-input-border-radius=4px] - Specifies the border radius, creating rounded corners.
+ * @cssproperty [--wje-input-margin-bottom=.5rem] - Adds spacing below the input field.
+ * @cssproperty [--wje-input-line-height=20px] - Sets the line height of the text within the input field.
+ * @cssproperty [--wje-input-slot-padding-inline=.5rem] - Controls the padding on the left and right of the input slot content.
+ * // @fires wje-input:input - Dispatched when the input value changes.
+ * // @fires wje-input:clear - Dispatched when the input is cleared.
+ */
+export default class Input extends FormAssociatedElement {
+    /**
+     * Getter for the cssStyleSheet attribute.
+     * @returns {CSSStyleSheet} The CSS style sheet of the input element.
+     */
+    static get cssStyleSheet(): CSSStyleSheet;
+    /**
+     * Getter for the observedAttributes attribute of the input element.
+     * @returns {Array} The attributes to observe for changes.
+     */
+    static get observedAttributes(): any[];
+    pristine: boolean;
+    /**
+     * Setter for the value attribute.
+     * @param {string} value The value to set.
+     */
+    set value(value: string);
+    /**
+     * Retrieves the value from the input element if available; otherwise,
+     * returns the internal _value property or an empty string as the default.
+     * @returns {string} The current value from the input element, the internal _value, or an empty string.
+     */
+    get value(): string;
+    _value: string;
+    /**
+     * Sets the label attribute of the element.
+     * @param {string} value The value to set as the label attribute.
+     */
+    set label(value: string);
+    /**
+     * Retrieves the value of the 'label' attribute if it exists.
+     * If the 'label' attribute is not set, it returns false.
+     * @returns {string|boolean} The value of the 'label' attribute as a string, or false if the attribute is not set.
+     */
+    get label(): string | boolean;
+    /**
+     * Sets the custom error display attribute for an element.
+     * @param {boolean} value If true, adds the 'custom-error-display' attribute to the element. If false, removes the attribute from the element.
+     */
+    set customErrorDisplay(value: boolean);
+    /**
+     * Getter for the customErrorDisplay attribute.
+     * @returns {boolean} Whether the attribute is present.
+     */
+    get customErrorDisplay(): boolean;
+    /**
+     * Sets the `validateOnChange` property. If set to a truthy value, it adds the
+     * `validate-on-change` attribute to the element. If set to a falsy value, it
+     * removes the `validate-on-change` attribute from the element.
+     * @param {boolean} value Determines whether to add or remove the
+     * `validate-on-change` attribute. A truthy value adds the attribute, whereas a
+     * falsy value removes it.
+     */
+    set validateOnChange(value: boolean);
+    /**
+     * Getter for the validateOnChange attribute.
+     * @returns {boolean} Whether the attribute is present.
+     */
+    get validateOnChange(): boolean;
+    /**
+     * @summary Setter for the defaultValue attribute.
+     * This method sets the 'value' attribute of the custom input element to the provided value.
+     * The 'value' attribute represents the default value of the input element.
+     * @param {string} value The value to set as the default value.
+     */
+    set defaultValue(value: string);
+    /**
+     * @summary Getter for the defaultValue attribute.
+     * This method retrieves the 'value' attribute of the custom input element.
+     * The 'value' attribute represents the default value of the input element.
+     * If the 'value' attribute is not set, it returns an empty string.
+     * @returns {string} The default value of the input element.
+     */
+    get defaultValue(): string;
+    /**
+     * Sets or removes the 'clearable' attribute on the element.
+     * When set to a truthy value, the 'clearable' attribute is added; when falsy, the attribute is removed.
+     * @param {boolean} value Determines whether to set or remove the 'clearable' attribute. If true, the 'clearable' attribute is added. If false, it is removed.
+     */
+    set clearable(value: boolean);
+    /**
+     * Checks if the 'clearable' attribute is present on the element.
+     * @returns {boolean} True if the 'clearable' attribute is set, otherwise false.
+     */
+    get clearable(): boolean;
+    /**
+     * Sets the placeholder value for an element. If the provided value is non-empty,
+     * it assigns the value to the "placeholder" attribute. Otherwise, it removes
+     * the "placeholder" attribute from the element.
+     * @param {string} value The placeholder text to set or null/undefined to remove the attribute.
+     */
+    set placeholder(value: string);
+    /**
+     * Retrieves the value of the 'placeholder' attribute from the element.
+     * If the attribute is not set, it returns an empty string.
+     * @returns {string} The value of the 'placeholder' attribute or an empty string if not set.
+     */
+    get placeholder(): string;
+    /**
+     * Sets the `variant` attribute on the element. If a value is provided, it will set the attribute to the given value.
+     * If no value is provided, it removes the `variant` attribute from the element.
+     * @param {string} value The value to set for the `variant` attribute. If falsy, the attribute is removed.
+     */
+    set variant(value: string);
+    /**
+     * Retrieves the value of the 'variant' attribute from the element.
+     * If the attribute is not set, it defaults to 'default'.
+     * @returns {string} The value of the 'variant' attribute or 'default' if not set.
+     */
+    get variant(): string;
+    /**
+     * Draws the input element.
+     * @returns {DocumentFragment} The drawn input.
+     */
+    draw(): DocumentFragment;
+    clear: HTMLElement;
+    native: HTMLDivElement;
+    labelElement: HTMLLabelElement;
+    input: HTMLInputElement;
+    errorMessage: HTMLDivElement;
+    /**
+     * Runs after the input is drawn to the DOM.
+     */
+    afterDraw(): void;
+    /**
+     * Checks whether the input has a slot.
+     * @param {HTMLElement} el The element to check.
+     * @param {string} slotName The name of the slot to check for.
+     * @returns {boolean} Whether the input has the slot.
+     */
+    hasSlot(el: HTMLElement, slotName?: string): boolean;
+}

package/dist/packages/wje-input-file/input-file.d.ts

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

package/dist/packages/wje-input-file/input-file.element.d.ts

@@ -0,0 +1,50 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `InputFile` is a custom web component that represents a file input.
+ * @summary This element represents a file input.
+ * @documentation https://elements.webjet.sk/components/input-file
+ * @status stable
+ * @augments {WJElement}
+ * @csspart native - The native file input wrapper.
+ * @csspart input - The text input.
+ * @csspart file-input - The file input element.
+ * // @fires wje-input-file:change - Event fired when the file input changes.
+ * @tag wje-input-file
+ */
+export default class InputFile extends WJElement {
+    /**
+     * Returns the CSS stylesheet.
+     * @static
+     * @returns {object} styles
+     */
+    static get cssStyleSheet(): object;
+    /**
+     * Returns the observed attributes.
+     * @static
+     * @returns {Array} An empty array
+     */
+    static get observedAttributes(): any[];
+    _value: string;
+    /**
+     * @summary Sets the value of the input file.
+     * @param {string} value The value to set for the input file.
+     */
+    set value(value: string);
+    /**
+     * Gets the value of the input file.
+     * @returns {string}
+     */
+    get value(): string;
+    /**
+     * Draws the component.
+     * @returns {object} Document fragment
+     */
+    draw(): object;
+    native: HTMLDivElement;
+    input: HTMLElement;
+    fileInput: HTMLInputElement;
+    /**
+     * After draw method for the InputFile class.
+     */
+    afterDraw(): void;
+}

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

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

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

@@ -0,0 +1,68 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `Item` is a custom web component that represents an item.
+ * @summary This element represents an item.
+ * @documentation https://elements.webjet.sk/components/item
+ * @status stable
+ * @augments {WJElement}
+ * @csspart native - The native part
+ * @csspart inner - The inner part
+ * @slot start - The start slot
+ * @slot end - The end slot
+ * @slot error - The error slot
+ * @slot helper - The helper slot
+ * @cssproperty [--wje-item-background=var(--wje-background)] - Sets the background color of the item. Accepts any valid CSS color value.
+ * @cssproperty [--wje-item-color=var(--wje-color)] - Defines the text color for the item. Accepts any valid CSS color value.
+ * @cssproperty [--wje-item-padding-start=var(--wje-padding)] - Specifies the left padding of the item. Accepts any valid CSS length.
+ * @cssproperty [--wje-item-padding-end=var(--wje-padding)] - Specifies the right padding of the item. Accepts any valid CSS length.
+ * @cssproperty [--wje-item-padding-top=var(--wje-padding)] - Specifies the top padding of the item. Accepts any valid CSS length.
+ * @cssproperty [--wje-item-padding-bottom=var(--wje-padding)] - Specifies the bottom padding of the item. Accepts any valid CSS length.
+ * @cssproperty [--wje-item-inner-padding-start=var(--wje-padding)] - Specifies the left inner padding of the item. Accepts any valid CSS length.
+ * @cssproperty [--wje-item-inner-padding-end=var(--wje-padding)] - Specifies the right inner padding of the item. Accepts any valid CSS length.
+ * @cssproperty [--wje-item-inner-padding-top=var(--wje-padding)] - Specifies the top inner padding of the item. Accepts any valid CSS length.
+ * @cssproperty [--wje-item-inner-padding-bottom=var(--wje-padding)] - Specifies the bottom inner padding of the item. Accepts any valid CSS length.
+ * @cssproperty [--wje-item-border-radius=var(--wje-border-radius)] - Defines the border radius, providing rounded corners for the item.
+ * @cssproperty [--wje-item-border-width=var(--wje-border-width)] - Sets the border width of the item. Accepts any valid CSS length.
+ * @cssproperty [--wje-item-border-style=var(--wje-border-style)] - Specifies the style of the border, such as `solid`, `dashed`, or `dotted`.
+ * @cssproperty [--wje-item-border-color=var(--wje-border-color)] - Defines the color of the item's border. Accepts any valid CSS color value.
+ * @cssproperty [--wje-item-min-height=var(--wje-min-height)] - Sets the minimum height of the item to ensure consistent layout.
+ * @cssproperty [--wje-item-transition=var(--wje-transition)] - Specifies the transition effects for the item, such as for hover or focus states.
+ * @cssproperty [--wje-item-inner-box-shadow=var(--wje-box-shadow)] - Adds a shadow effect inside the item for a 3D appearance.
+ * @tag wje-item
+ */
+export default class Item extends WJElement {
+    /**
+     * Returns the CSS styles for the component.
+     * @static
+     * @returns {object} styles
+     */
+    static get cssStyleSheet(): object;
+    labelColorStyles: {};
+    itemStyles: Map<any, any>;
+    inheritedAriaAttributes: {};
+    multipleInputs: boolean;
+    focusable: boolean;
+    button: boolean;
+    detailIcon: string;
+    disabled: boolean;
+    counter: boolean;
+    routerDirection: string;
+    type: string;
+    /**
+     * Returns the CSS styles for the component.
+     * @returns {boolean}
+     */
+    isClickable(): boolean;
+    /**
+     * Draws the component for the item.
+     * @returns {DocumentFragment}
+     */
+    draw(): DocumentFragment;
+    /**
+     * Determines if the given element or any of its ancestors matches the specified selector.
+     * @param {string} selector The CSS selector to match against the element's ancestors.
+     * @param {HTMLElement} el The element from which to start the search.
+     * @returns {boolean} - Returns `true` if the element or one of its ancestors matches the selector; otherwise, `false`.
+     */
+    hostContext: (selector: string, el: HTMLElement) => boolean;
+}

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

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

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

@@ -0,0 +1,182 @@
+import { default as WJElement } from '../wje-element/element.js';
+import { default as Checkbox } from '../wje-checkbox/checkbox.js';
+import { default as MenuItem } from '../wje-menu-item/menu-item.js';
+/**
+ * `Kanban` is a custom web component that represents a Kanban board with draggable columns and cards.
+ * @summary This element represents a Kanban board.
+ * @documentation https://elements.webjet.sk/components/kanban
+ * @status stable
+ * @augments {WJElement}
+ * @slot - The default slot for the Kanban board.
+ * @csspart native-infinite-scroll - Styles the native part of the Kanban board.
+ * @tag wje-kanban
+ */
+export default class Kanban 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>;
+    totalPages: number;
+    isLoading: any[];
+    _response: {};
+    isDragging: boolean;
+    selectedCards: any[];
+    /**
+     * Dependencies of the Option component.
+     */
+    dependencies: {
+        'wje-checkbox': typeof Checkbox;
+        'wje-menu-item': typeof MenuItem;
+    };
+    /**
+     * Sets the URL for fetching data.
+     * @param value {string}
+     */
+    set response(value: string);
+    /**
+     * Gets the URL for fetching data.
+     * @returns {*|{}|{}}
+     */
+    get response(): any | {} | {};
+    /**
+     * Sets the URL for fetching data.
+     * @param value {array}
+     */
+    set selectedItems(value: any[]);
+    /**
+     * Gets the URL for fetching data.
+     * @returns {Array}
+     */
+    get selectedItems(): any[];
+    _selectedItems: any[];
+    /**
+     * Prepares the component before drawing.
+     * @param {object} context The context for drawing.
+     * @param {object} store The store for drawing.
+     * @param {object} params The parameters for drawing.
+     */
+    beforeDraw(context: object, store: object, params: object): Promise<void>;
+    /**
+     * Draws the component after it has been prepared.
+     * @returns {DocumentFragment}
+     */
+    draw(): DocumentFragment;
+    /**
+     * Called after the component has been drawn.
+     */
+    afterDraw(): void;
+    ui: {
+        elBoard: HTMLElement;
+        elTotalCardCount: HTMLElement;
+        elCardPlaceholder: any;
+    };
+    /**
+     * Iterates over a list of items, generates an HTML card for each, and appends it to the specified pool's content area.
+     * @param {HTMLElement} pool The container element where the cards will be appended. It should contain an element with the class `.pool-content`.
+     * @param {Array} items An array of items used to generate HTML cards.
+     */
+    customForeach: (pool: HTMLElement, items: any[]) => void;
+    /**
+     * Sets up the drag and drop events for the component.
+     */
+    setupDragAndDropEvents(): void;
+    draggedElementWidth: any;
+    draggedElementHeight: any;
+    /**
+     * Sets up the select all cards event for the component.
+     */
+    setupSelectAllCardsEvent(): void;
+    /**
+     * Sets up the menu item click events for the component.
+     */
+    setupMenuItemClickEvents(): void;
+    /**
+     * Handles the menu item click event.
+     * @param e
+     */
+    menuItemClickHandler: (e: any) => void;
+    /**
+     * Updates the selected cards in the pool.
+     * @param pool {HTMLElement}
+     * @param isChecked {boolean}
+     */
+    updateSelectedCards(pool: HTMLElement, isChecked: boolean): void;
+    /**
+     * Updates the column item count.
+     */
+    updateColumnItemCount: () => void;
+    /**
+     * Handles the pool action.
+     * @param action {string}
+     * @param pool {HTMLElement}
+     */
+    handlePoolAction(action: string, pool: HTMLElement): void;
+    /**
+     * Moves the pool in the specified direction.
+     * @param pool {HTMLElement}
+     * @param direction {string}
+     */
+    movePool(pool: HTMLElement, direction: string): void;
+    /**
+     * Renames the pool.
+     * @param pool {HTMLElement}
+     */
+    renamePool(pool: HTMLElement): void;
+    /**
+     * Gets the card placeholder.
+     * @returns {null|*}
+     */
+    getCardPlaceholder(): null | any;
+    /**
+     * Adds a live event listener to the component.
+     * @param eventType {string}
+     * @param selector {string}
+     * @param callback {function}
+     */
+    live(eventType: string, selector: string, callback: Function): void;
+    /**
+     * Sets the selected cards.
+     * @param isChecked {boolean}
+     * @param card {HTMLElement}
+     */
+    setSelectedCards(isChecked: boolean, card: HTMLElement): void;
+    /**
+     * Sets the selected items.
+     */
+    setSelectedItems(): void;
+    /**
+     * Fetches the pages.
+     * @param page
+     * @returns {Promise<any>}
+     */
+    getPages(page?: number): Promise<any>;
+    /**
+     * Gets the pool.
+     * @param data {Array}
+     * @param poolName {string}
+     * @returns {*}
+     */
+    getPool: (data: any[], poolName: string) => any;
+    /**
+     * Returns the HTML for the pool.
+     * @param title {string}
+     * @param countItems {number}
+     * @returns {Element}
+     */
+    htmlPool: (title: string, countItems: number) => Element;
+    /**
+     * Returns the HTML for the card.
+     * @param item {Object}
+     * @returns {Element}
+     */
+    htmlCard: (item: any) => Element;
+    dispatchEvent(event: any): boolean;
+}

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

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

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

@@ -0,0 +1,34 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `Label` is a custom web component that represents a label.
+ * It extends from `WJElement`.
+ * @summary This element represents a label.
+ * @documentation https://elements.webjet.sk/components/label
+ * @status stable
+ * @augments {WJElement}
+ * @csspart label - The label part of the component.
+ * @slot - The default slot for the label.
+ * @cssproperty [--wje-label-color=black] - Defines the text color of the label. This property determines the color of the label's text. Accepts any valid CSS color value (e.g., named colors like `black`, `red`, or values like `#000000`, `rgb(0, 0, 0)`).
+ * @cssproperty [--wje-label-font-size=16px] - Specifies the font size of the label. This property sets the size of the label's text. Accepts any valid CSS length unit (e.g., `px`, `em`, `rem`). The default value is `16px`, which provides optimal readability in most designs.
+ * // @fires wje-label:change - Event fired when the label is changed.
+ * @tag wje-label
+ */
+export default class Label 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-level-indicator/level-indicator.d.ts

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

package/dist/packages/wje-level-indicator/level-indicator.element.d.ts

@@ -0,0 +1,91 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * @summary LevelIndicator is a custom web component that extends WJElement.
+ * @documentation https://elements.webjet.sk/components/LevelIndicator
+ * @status stable
+ * @augments WJElement
+ * @csspart - Styles the element.
+ * @tag wje-level-indicator
+ * @example
+ * <wje-level-indicator></wje-level-indicator>
+ */
+export default class LevelIndicator extends WJElement {
+    /**
+     * Returns the CSS styles for the component.
+     * @static
+     * @returns {CSSStyleSheet}
+     */
+    static get cssStyleSheet(): CSSStyleSheet;
+    /**
+     * Sets the level attribute for an instance.
+     * @param {string} value The value to set for the 'level' attribute.
+     */
+    set level(value: string);
+    /**
+     * Retrieves the level attribute of an element, with validation to ensure
+     * it is within the range of 0 to 3. If the level attribute is not present,
+     * the default value is 1. The result is parsed as an integer and constrained
+     * to the valid range.
+     * @returns {number} The normalized level value, which is an integer between 0 and 3.
+     */
+    get level(): number;
+    /**
+     * Sets the value of the "bars" attribute.
+     * @param {string} value The value to set for the "bars" attribute.
+     */
+    set bars(value: string);
+    /**
+     * Retrieves the value of the "bars" attribute, parses it as an integer,
+     * and ensures it is at least 1. If the attribute is not set, defaults to 3.
+     * @returns {number} The parsed integer value of the "bars" attribute or the default value of 3, constrained to a minimum of 1.
+     */
+    get bars(): number;
+    /**
+     * Sets the 'colorize' attribute on the element. If the provided value is truthy,
+     * the attribute will be set. If the value is falsy, the attribute will be removed.
+     * @param {boolean} value A boolean determining whether to set or remove the 'colorize' attribute.
+     */
+    set colorize(value: boolean);
+    /**
+     * Determines whether the element has the "colorize" attribute set.
+     * @returns {boolean} Returns true if the "colorize" attribute is present, otherwise false.
+     */
+    get colorize(): boolean;
+    /**
+     * Sets the 'reverse' attribute on the element. If the provided value is truthy, the attribute is added;
+     * otherwise, the attribute is removed.
+     * @param {boolean} value The value determining whether to set or remove the 'reverse' attribute.
+     */
+    set reverse(value: boolean);
+    /**
+     * Getter method to check if the "reverse" attribute is present on the element.
+     * @returns {boolean} Returns true if the "reverse" attribute is set; otherwise, returns false.
+     */
+    get reverse(): boolean;
+    /**
+     * Creates a document fragment, appends a new slot element to it, and returns the fragment.
+     * @returns {DocumentFragment} A document fragment containing a slot element.
+     */
+    draw(): DocumentFragment;
+    barsArray: any[];
+    native: HTMLDivElement;
+    /**
+     * Executes any additional operations or updates required after the drawing process is completed.
+     * @returns {void} This method does not return any value.
+     */
+    afterDraw(): void;
+    /**
+     * Updates the class of each bar element based on the specified level.
+     * @param {number} level The threshold level determining how many bars should be active.
+     * @param {Array} bars An array of bar elements to be updated.
+     * @returns {void} This method does not return a value.
+     */
+    updateBars(level: number, bars: any[]): void;
+    /**
+     * Determines the color indicator based on the given level and bars.
+     * @param {number} level The current value level used to calculate the ratio.
+     * @param {number} bars The maximum value that level can reach.
+     * @returns {string | undefined} A string representing the color code based on the ratio, or undefined if colorize is disabled.
+     */
+    getColor(level: number, bars: number): string | undefined;
+}

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

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

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

@@ -0,0 +1,31 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `List` is a custom web component that represents a list.
+ * It extends from `WJElement`.
+ * @summary This element represents a list.
+ * @documentation https://elements.webjet.sk/components/list
+ * @status stable
+ * @augments {WJElement}
+ * @slot - The default slot for the list.
+ * @cssproperty [--wje-list-inset-padding=1rem] - The padding of the list when it is inset.
+ * @cssproperty [--wje-list-border-radius=8px] - The border radius of the list. Accepts any valid CSS length.
+ * @cssproperty [--wje-list-background=var(--wje-background)] - The background of the list. Accepts any valid CSS color value.
+ * @tag wje-list
+ */
+export default class List 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.
+     * @returns {DocumentFragment}
+     */
+    draw(): DocumentFragment;
+    /**
+     * Called after the component has been drawn.
+     */
+    afterDraw(): void;
+}

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

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

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

@@ -0,0 +1,30 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `Main` is a custom web component that represents a main section.
+ * It extends from `WJElement`.
+ * @summary This element represents a main section.
+ * @documentation https://elements.webjet.sk/components/main
+ * @status stable
+ * @augments {WJElement}
+ * @slot - The default slot for the main section.
+ * @tag wje-main
+ */
+export default class Main 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 for the main section.
+     * @returns {DocumentFragment}
+     */
+    draw(): DocumentFragment;
+}