wj-elements 0.1.151 → 0.1.152

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

@@ -0,0 +1,183 @@
+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 - Styles the native part of the Kanban board.
+ * @csspart pool - Styles the pool 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(): 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: any);
+    /**
+     * 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(): 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: number);
+    /**
+     * 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: number);
+    /**
+     * 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(): string[];
+    /**
+     * Draws the component for the main section.
+     * @returns {DocumentFragment}
+     */
+    draw(): DocumentFragment;
+}

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

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

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

@@ -0,0 +1,114 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `Masonry` is a custom web component that represents a masonry layout.
+ * It extends from `WJElement`.
+ * @summary This element represents a masonry layout.
+ * @documentation https://elements.webjet.sk/components/masonry
+ * @status stable
+ * @augments {WJElement}
+ * @csspart native - The native part of the masonry layout.
+ * @csspart column - The individual columns in the masonry layout.
+ * @slot - The default slot for the masonry layout.
+ * @cssproperty [--wje-masonry-gap=1rem] - The gap between items in the masonry layout. Accepts any valid CSS length. Default is 1rem.
+ * @cssproperty [--wje-masonry-layout-col-count=1] - The count column in the masonry layout. Accepts any valid CSS length.
+ * @tag wje-masonry
+ */
+export default class Masonry extends WJElement {
+    /**
+     * Getter for the cssStyleSheet property.
+     * @static
+     * @returns {CSSStyleSheet} The CSS style sheet for the masonry layout.
+     */
+    static get cssStyleSheet(): CSSStyleSheet;
+    /**
+     * Getter for the observedAttributes property.
+     * @returns {Array} An array of the observed attributes.
+     */
+    static get observedAttributes(): any[];
+    debounceId: string;
+    ro: any;
+    currentRequestAnimationFrameCallback: number;
+    unsetSlot: HTMLSlotElement;
+    /**
+     * Setter for the maxColWidth property.
+     * @param {number} value The maximum column width.
+     */
+    set maxColWidth(value: number);
+    /**
+     * Getter for the maxColWidth property.
+     * @returns {number} The maximum column width.
+     */
+    get maxColWidth(): number;
+    /**
+     * Setter for the cols property.
+     * @param {number} value The number of columns.
+     */
+    set cols(value: number);
+    /**
+     * Getter for the cols property.
+     * @returns {number} The number of columns.
+     */
+    get cols(): number;
+    /**
+     * Setter for the gap property.
+     * @param {number} value The gap between columns.
+     */
+    set gap(value: number);
+    /**
+     * Getter for the gap property.
+     * @returns {number} The gap between columns.
+     */
+    get gap(): number;
+    /**
+     * Setter for the debounce property.
+     * @param {number} value The debounce time.
+     */
+    set debounce(value: number);
+    /**
+     * Getter for the debounce property.
+     * @returns {number} The debounce time.
+     */
+    get debounce(): number;
+    /**
+     * Getter for the columns property.
+     * @returns {Array} An array of all the columns.
+     */
+    get columns(): any[];
+    /**
+     * Callback for when an attribute changes.
+     */
+    attributeChangedCallback(name: any, old: any, newName: any): void;
+    /**
+     * Draws the element for the masonry layout.
+     * @returns {DocumentFragment} The drawn element.
+     */
+    draw(): DocumentFragment;
+    native: HTMLDivElement;
+    /**
+     * Called after the element is drawn.
+     */
+    afterDraw(): void;
+    /**
+     * Called when the slot changes.
+     */
+    onSlotChange: () => void;
+    /**
+     * Called when the window resizes.
+     * @param {Array} entries The entries to use.
+     */
+    onResize: (entries: any[]) => void;
+    /**
+     * Renders the columns.
+     * @param {number} colCount The number of columns to render.
+     */
+    renderCols(colCount: number): void;
+    /**
+     * Schedules a layout.
+     * @param {number} ms The number of milliseconds to wait before laying out.
+     */
+    scheduleLayout(ms?: number): void;
+    /**
+     * Lays out the element.
+     */
+    layout: () => void;
+}

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

@@ -0,0 +1,32 @@
+/**
+ * Returns a number attribute from an element.
+ * @param $elem
+ * @param name
+ * @param defaultValue
+ * @returns {string|number}
+ */
+export function getNumberAttribute($elem: any, name: any, defaultValue: any): string | number;
+/**
+ * Returns the amount of cols that the masonry grid should have.
+ * @param totalWidth
+ * @param cols
+ * @param maxColWidth
+ */
+export function getColCount(totalWidth: any, cols: any, maxColWidth: any): any;
+/**
+ * Debounces a function.
+ * @param cb
+ * @param ms
+ * @param id
+ */
+export function debounce(cb: any, ms: any, id: any): void;
+/**
+ * Returns the index of the column with the smallest height.
+ * @param colHeights
+ */
+export function findSmallestColIndex(colHeights: any): number;
+export const DEFAULT_MAX_COL_WIDTH: 500;
+export const DEFAULT_DEBOUNCE_MS: 300;
+export const COL_COUNT_CSS_VAR_NAME: "--wje-masonry-layout-col-count";
+export const GAP_CSS_VAR_NAME: "--wje-masonry-layout-gap";
+export const ELEMENT_NODE_TYPE: 1;

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

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

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

@@ -0,0 +1,47 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `Menu` is a custom web component that represents a menu.
+ * It extends from `WJElement`.
+ * @summary This element represents a menu.
+ * @documentation https://elements.webjet.sk/components/menu
+ * @status stable
+ * @augments {WJElement}
+ * @csspart native - The native part of the menu.
+ * @slot - The default slot for the menu.
+ * @cssproperty [--wje-menu-background=var(--wje-background)] - Defines the background color of the menu. Accepts any valid CSS color value, such as `#ffffff`, `rgb(255, 255, 255)`, or CSS variables.
+ * @cssproperty [--wje-menu-border-width=1px] - Specifies the width of the menu's border. Accepts any valid CSS length value (e.g., `px`, `em`, `%`).
+ * @cssproperty [--wje-menu-border-style=solid] - Sets the style of the menu's border. Common values include `solid`, `dashed`, `dotted`, etc.
+ * @cssproperty [--wje-menu-border-color=var(--wje-border-color)] - Defines the color of the menu's border. Accepts any valid CSS color value.
+ * @cssproperty [--wje-menu-border-radius=var(--wje-border-radius-small)] - Determines the radius of the menu's corners, creating rounded edges. Accepts any valid CSS length value (e.g., `px`, `%`).
+ * @cssproperty [--wje-menu-padding-top=.5rem] - Specifies the top padding inside the menu. Accepts any valid CSS length value.
+ * @cssproperty [--wje-menu-padding-bottom=.5rem] - Specifies the bottom padding inside the menu. Accepts any valid CSS length value.
+ * @cssproperty [--wje-menu-padding-inline=0] - Sets the horizontal (left and right) padding inside the menu. Accepts any valid CSS length value.
+ * @cssproperty [--wje-menu-margin-top=0] - Defines the top margin outside the menu. Accepts any valid CSS length value.
+ * @cssproperty [--wje-menu-margin-bottom=0] - Defines the bottom margin outside the menu. Accepts any valid CSS length value.
+ * @cssproperty [--wje-menu-margin-inline=0] - Specifies the horizontal (left and right) margin outside the menu. Accepts any valid CSS length value.
+ * @cssproperty [--wje-menu-collapse-width=65px] - Sets the width of the menu when it is collapsed. This property is typically used to define the reduced size of the menu in collapsed state. Accepts any valid CSS length value.
+ * @tag wje-menu
+ */
+export default class Menu extends WJElement {
+    /**
+     * Returns the CSS styles for the component.
+     * @static
+     * @returns {CSSStyleSheet}
+     */
+    static get cssStyleSheet(): CSSStyleSheet;
+    /**
+     * Returns the list of attributes to observe for changes.
+     * @static
+     * @returns {Array<string>}
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Draws the component for the menu.
+     * @returns {DocumentFragment}
+     */
+    draw(): DocumentFragment;
+    /**
+     * Refreshes the component after drawing.
+     */
+    afterDraw(): void;
+}

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

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

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

@@ -0,0 +1,34 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * `MenuButton` is a custom web component that represents a menu button.
+ * @summary This element represents a menu button.
+ * @documentation https://elements.webjet.sk/components/menu-button
+ * @status stable
+ * @augments {WJElement}
+ * @slot - The default slot for the menu button.
+ * // @fires click - Event fired when the menu button is clicked.
+ * @tag wje-menu-button
+ */
+export default class MenuButton extends WJElement {
+    /**
+     * Returns the CSS styles for the component.
+     * @static
+     * @returns {CSSStyleSheet}
+     */
+    static get cssStyleSheet(): CSSStyleSheet;
+    /**
+     * Returns the list of attributes to observe for changes.
+     * @static
+     * @returns {Array<string>}
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Draws the component for the menu button.
+     * @returns {DocumentFragment}
+     */
+    draw(): DocumentFragment;
+    /**
+     * Refreshes the component after drawing. Adds a click event listener that toggles the "open" class on the content element.
+     */
+    afterDraw(): void;
+}

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

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