wabtec-internal-volt-basic-components 1.0.0

package/dist/types/components/autocomplete/vds-basic-autocomplete.d.ts

@@ -0,0 +1,188 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+export declare class VdsBasicAutocomplete {
+    /**
+     * Sets the internal input size.
+     * If multiple property is true, This will only set the basic-input text value.
+     * If multiple property is false and the value prop matches with an option, the option will be selected,
+     * Otherwise text will be set in the basic-input.
+     */
+    size: "small" | "medium" | "large";
+    /** Sets the internal input value */
+    value: string;
+    /** Sets the selected options when multiple is activated */
+    multipleValues: Array<string>;
+    /** Sets the selected dropdown value when dropdown is activated */
+    selectedDropdownValue: string;
+    /** Sets the internal input placeholder. */
+    placeholder: string;
+    /** Sets the internal input in disabled state. */
+    disabled: boolean;
+    /** Sets the internal input in readonly state. */
+    isReadonly: boolean;
+    /** Sets the internal input in error state. */
+    error: boolean;
+    /** Toggles the required sign in the internal input */
+    isRequired: boolean;
+    /** Allows user to define a information icon inside the input at its left . */
+    informativeIcon: string;
+    /** Sets character formatting for user input. Useful for adding a mask to the input. */
+    formatter: Function;
+    /** Sets custom allowed styles to input (text-align, text-transform, unicode-bidi, direction) */
+    allowedStyles: {
+        [key: string]: string;
+    }[];
+    /** Set the max height value for the floating container of the items */
+    maxHeight: string;
+    /** Sets the width value for the floating container of the items to match the items list width */
+    matchWidth: boolean;
+    /** Debounce time for key inputs before the search */
+    debounce: number;
+    /** Allows user to define a search icon inside the input at its right (zoom by default) . */
+    actionIcon: string;
+    /** Sets the autocomplete clear button visibility. */
+    showClearButton: boolean;
+    /**
+     * Shows a dropdown chevron arrow that flips up/down when change state open/close.
+     * Also enables the selectedDropdownValue prop to be able to select an option from dropdown
+     * When multiple is true, this prop will be set to false.
+     */
+    dropdown: boolean;
+    /** Sets the autocomplete dropdown chevron icon visibility. */
+    showDropdownIcon: boolean;
+    /** Enables a message when there's no match options. */
+    showEmptyMessage: boolean;
+    /** Allow to set the text message in the 'emptyMessage' state. */
+    emptyMessage: string;
+    /**
+     * Allow multiple values to be selected.
+     * Also enables the multipleValues prop to be able to select multiple options
+     * When multiple is true, dropdown prop will be set to false.
+     * When multiple is true, valueChanged will emit an array of strings
+     */
+    multiple: boolean;
+    /**
+     * Toggles the floating container auto-positioning based on available window space.
+     * False by default as it may cause positioning issues in some situations, use with caution
+     */
+    autoPosition: boolean;
+    /**
+     * Clear selection and input on clicking the close button.
+     * Only works when multiple is true.
+     */
+    clearSelection: boolean;
+    /** Toggles the overlay element, allowing interaction only with this element when active */
+    backdrop: boolean;
+    /** Emits event when floating element gets opens */
+    opened: EventEmitter<void>;
+    /** Emits event when floating element gets closes */
+    closed: EventEmitter<void>;
+    /** Emits event when an item is selected, this event contains the value of the selected item(s) */
+    valueChanged: EventEmitter<string | string[]>;
+    /** Emits an event when the clear button is clicked */
+    cleared: EventEmitter<void>;
+    /** Emits an event when the user click the actionIcon (the magnifying glass) */
+    actionIconClick: EventEmitter<void>;
+    /** Emits updated inputed value from the vds-basic-input similar to the input event */
+    changeInput: EventEmitter<string>;
+    hostEl: HTMLElement;
+    autocompleteContent: HTMLDivElement;
+    basicInput: HTMLVdsBasicInputElement;
+    floatingCleanUp: () => void;
+    isOpened: boolean;
+    multiselectValues: Array<string>;
+    options: HTMLVdsAutocompleteItemElement[];
+    autocompleteItemEmptyOption: HTMLVdsAutocompleteItemElement;
+    debounceTimeTracker: NodeJS.Timeout;
+    showUnfilteredOptions: boolean;
+    private updateContainerWidth;
+    validateDropdownValue: boolean;
+    componentWillLoad(): void;
+    componentWillRender(): void;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    setMulitpleValueHandler(): void;
+    setDisabledState(): void;
+    setDropdownValueValidation(): void;
+    toggleAutocomplete(): Promise<void>;
+    open(): Promise<void>;
+    close(): Promise<void>;
+    setFocus(): Promise<void>;
+    /**
+     * Sets the autocomplete input value to handle filtering.
+     *
+     * @returns {Promise<void>}
+     */
+    setValue(value: string): Promise<void>;
+    /**
+     * Sets the autocomplete selection value to handle.
+     * When multiple is true, sets the selected values from the list
+     * When dropdown is true and multiple is false, sets a single selected value.
+     * When dropdown is false and When multiple is false, set the input value
+     *
+     * @returns {Promise<void>}
+     */
+    setSelectionValue(value: string | string[]): Promise<void>;
+    /**
+     * Return the autocomplete value.
+     *
+     * @returns {Promise<string>} A promise that resolves by returning the autocomplete value.
+     */
+    getValue(): Promise<string | string[]>;
+    /**
+     * Clears the selected options and resets the value of the autocomplete.
+     *
+     * @returns {Promise<void>} A promise that resolves when the clearing operation is complete.
+     */
+    clear(): Promise<void>;
+    handleSelectOption(evt: CustomEvent<{
+        value: string;
+        selected: boolean;
+    }>): void;
+    handleClickOut(evt: MouseEvent): void;
+    handleEscPress(evt: any): void;
+    handleMultiselection(selection: {
+        value: string;
+        selected: boolean;
+    }): void;
+    handleValueAssignment(evt: CustomEvent<{
+        value: string;
+        selected: boolean;
+    }>): void;
+    handleChange(evt: CustomEvent<string>): void;
+    hasFocus(): void;
+    lostFocus(): void;
+    emitActionIcon(): void;
+    handleDebounceValueChange(newValue: string): void;
+    private hasValue;
+    /**
+     * Sets autocomplete styles for JSX.style property
+     *
+     * @param maxHeight string
+     * @returns { [key: string]: string }
+     */
+    private setAutoCompleteStyles;
+    setPreselection(): void;
+    private setOptionsMultiple;
+    /**
+     * Sets the selected value for a autocomplete type dropdown and updates the options accordingly.
+     * @private
+     * @param {string} selectedValue - The value of the selected option.
+     */
+    private setOptionsSingle;
+    private setDropdownOption;
+    /**
+     * Sets the all the options to unselected state
+     * @private
+     * @param {string} selectedValue - The value of the selected option.
+     */
+    private clearOptions;
+    private renderUnfilteredOptions;
+    private renderItem;
+    private renderFilteredOptions;
+    private renderEmptyOption;
+    private renderClearIcon;
+    private renderActionIcon;
+    private renderOptions;
+    render(): HTMLStencilElement;
+}

package/dist/types/components/autocomplete/vds-basic-autocomplete.stories.d.ts

@@ -0,0 +1,43 @@
+declare const _default: {
+    title: string;
+    parameters: {
+        docs: {
+            toc: boolean;
+        };
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+    argTypes: {
+        size: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        informativeIcon: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        checkmarkVariant: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        checkmarkAlignment: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const BasicUsage: any;
+export declare const DropdownUsage: any;
+export declare const BasicMultipleUsage: any;
+export declare const BasicMultipleSlotHeaderUsage: any;

package/dist/types/components/autocomplete/vds-basic-autocomplete.utils.d.ts

@@ -0,0 +1,19 @@
+export declare const getFilteredOptions: (options: HTMLVdsAutocompleteItemElement[], value: string, validateCasing?: boolean) => HTMLVdsAutocompleteItemElement[];
+/**
+ * Checks if an option object matches the given search value.
+ * @param {Object} option - The option object to be checked in a HTMLVdsAutocompleteItemElement
+ * @param {string} searchValue - The value to search for within the option.
+ * @returns {boolean} -
+ *   True if the searchValue is found within the option's `textContent`, `label`, or `value`.
+ *   False otherwise.
+ */
+export declare const findOptionByValue: (option: HTMLVdsAutocompleteItemElement, searchValue: string) => boolean;
+/**
+ * Checks if an option object matches the given search value exactly.
+ * @param {Object} option - The option object to be checked in a HTMLVdsAutocompleteItemElement
+ * @param {string} searchValue - The value to search for within the option.
+ * @returns {boolean} -
+ *   True if the searchValue is exactly the same to one of the option's `textContent`, `label`, or `value`.
+ *   False otherwise.
+ */
+export declare const findOptionByExactValue: (option: HTMLVdsAutocompleteItemElement, searchValue: string) => boolean;

package/dist/types/components/autocomplete-item/vds-autocomplete-item.d.ts

@@ -0,0 +1,49 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { HTMLStencilElement } from "../../stencil-public-runtime";
+export declare class VdsAutocompleteItem {
+    /** Sets the autocomplete in disabled state */
+    disabled: boolean;
+    /** Sets the icon value */
+    informativeIcon: string;
+    /** Sets item in active state */
+    isActive: boolean;
+    /** Sets item's value; This will be display as the text in the item when label is not present.
+     *  When value is present as text to be display, it will override children content. */
+    value: string;
+    /** Sets item's label; This will be display as the text in the item.
+     *  When label is present, it will override children content and value when present. */
+    label: string;
+    /** Sets aria-label */
+    setAriaLabel: string;
+    /** Set size of menu item */
+    size: "small" | "medium" | "large";
+    /** Shows checkmark */
+    hasCheckmark: boolean;
+    /** Set state of checkmark */
+    isSelected: boolean;
+    /** When has-checkmark is true, sets the checks element as checkmark or checkbox.  */
+    checkmarkVariant: "checkbox" | "checkmark";
+    /** When has-checkmark is true, sets the checks element at the beginning or end.  */
+    checkmarkAlignment: "start" | "end";
+    /** Sets the autocomplete item to danger state.  */
+    danger: boolean;
+    /** Emits event when item gets clicked */
+    autocompleteClicked: EventEmitter<{
+        value: string;
+        selected: boolean;
+    }>;
+    /** Emits event when item is selected */
+    selected: EventEmitter<MouseEvent>;
+    /** Emits event when item is deselected */
+    deselected: EventEmitter<MouseEvent>;
+    hostEl: HTMLElement;
+    updateItemState(): void;
+    private handleClick;
+    private handleSelected;
+    private generateCheckmarkIconButton;
+    private generateCheckbox;
+    private generateInformativeIcon;
+    private generateLabel;
+    private setAriaLabelText;
+    render(): HTMLStencilElement;
+}

package/dist/types/components/autocomplete-item/vds-autocomplete-item.stories.d.ts

@@ -0,0 +1,41 @@
+declare const _default: {
+    title: string;
+    parameters: {
+        docs: {
+            toc: boolean;
+        };
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+    argTypes: {
+        size: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        informativeIcon: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        checkmarkVariant: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        checkmarkAlignment: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const BasicUsage: any;
+export declare const BasicCheckboxUsage: any;

package/dist/types/components/avatar/vds-avatar.d.ts

@@ -0,0 +1,26 @@
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+export declare class VdsAvatar {
+    /**
+     * This property can receive:
+     * - Fullname to show the first letters inside the avatar.
+     * - Url of image.
+     * - +XX format for showing the number of additional users. Caps at +99.
+     */
+    value: string;
+    /** Set icon size in px or rem, IE: 32px or 1.25rem */
+    size: string;
+    setBackground: boolean;
+    private getNumberFormat;
+    private getNameInitials;
+    getAvatarValue(value: string): string;
+    calcFontSize(size: string): string;
+    calcLineHeight(size: string): string;
+    getValueStyles(): {
+        width: string;
+        height: string;
+        'font-size': string;
+    };
+    getAvatarContent(): any;
+    setBackgroundColor(): string;
+    render(): HTMLStencilElement;
+}

package/dist/types/components/avatar/vds-avatar.stories.d.ts

@@ -0,0 +1,16 @@
+declare const _default: {
+    title: string;
+    parameters: {
+        docs: {
+            toc: boolean;
+        };
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};
+export default _default;
+export declare const BasicUsage: any;
+export declare const ImageUsage: any;
+export declare const AdditionalUsersUsage: any;

package/dist/types/components/badge-dot/vds-badge-dot.d.ts

@@ -0,0 +1,18 @@
+import { Colors } from '../../definitions/colors';
+export declare class VdsBadgeDot {
+    /** Sets the badge's size */
+    size: "small" | "medium";
+    /** Sets the color of the badge, it provides special colors such as warning, danger, healthy, information, neutral
+     *  If you pass a color from out pallete it will consider as custom. The color will be applied as background color. */
+    statusColor: "warning" | "danger" | "healthy" | "information" | "neutral" | Colors;
+    /** Sets the aria label in badge */
+    setAriaLabel: string;
+    /** Sets to overlap component content */
+    overlap: boolean;
+    /** Sets the position of the badge */
+    position: "top-right" | "top-left" | "bottom-right" | "bottom-left";
+    private isCustom;
+    componentWillRender(): void;
+    setCustomColorStyle(): {};
+    render(): any;
+}

package/dist/types/components/badge-dot/vds-badge-dot.stories.d.ts

@@ -0,0 +1,35 @@
+declare const _default: {
+    title: string;
+    parameters: {
+        docs: {
+            toc: boolean;
+        };
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+    argTypes: {
+        statusColor: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        size: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        position: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const BasicUsage: any;
+export declare const BasicTextUsage: any;

package/dist/types/components/badge-pill/vds-badge-pill.d.ts

@@ -0,0 +1,33 @@
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+import { Colors } from '../../definitions/colors';
+export declare class VdsBadgePill {
+    /** Sets the badge's size */
+    size: '2x-small' | 'extra-small' | 'small' | 'medium' | 'large';
+    /** Sets the color of the badge, it provides special colors such as warning, danger, healthy, information, neutral
+     *  If you pass a color from out pallete it will consider as custom. The color will be applied as background color;
+     *  To fully customize please refer to props contentColor and borderFocusColor. */
+    statusColor: 'warning' | 'danger' | 'healthy' | 'information' | 'neutral';
+    /** Sets the aria label in badge */
+    setAriaLabel: string;
+    /** Sets an icon inside the badge */
+    icon?: string;
+    /** Sets the text value of the badge. */
+    value: string;
+    /** Sets the color of the text and icon. (Only works when passing a custom statusColor) */
+    contentColor: Colors;
+    /** Sets the color of the border in focus. (Only works when passing a custom statusColor) */
+    borderFocusColor: Colors;
+    /** Hides the native tooltip when set to true */
+    hideTitle: boolean;
+    private isCustom;
+    private customStyles;
+    private getIconSizeUpdated;
+    componentWillRender(): void;
+    private setCustomBadge;
+    /** Sets the icon in the vds-badge-pills
+     *
+     * @returns HTMLStencilElement
+     */
+    getIcon(): HTMLStencilElement;
+    render(): HTMLStencilElement;
+}

package/dist/types/components/badge-pill/vds-badge-pill.stories.d.ts

@@ -0,0 +1,40 @@
+declare const _default: {
+    title: string;
+    parameters: {
+        docs: {
+            toc: boolean;
+        };
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+    argTypes: {
+        statusColor: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        size: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        contentColor: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        borderFocusColor: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const BasicUsage: any;

package/dist/types/components/badge-pill/vds-badge-pill.utils.d.ts

@@ -0,0 +1 @@
+export declare const BADGE_VARIANTS: string[];

package/dist/types/components/base-group-header/base-group-header.d.ts

@@ -0,0 +1,11 @@
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+export type GroupHeaderSize = 'small' | 'medium' | 'large';
+/**
+ * Generates a group header container with a label.
+ *
+ * @param {GroupHeaderSize} size - The size of the group header.
+ * @param {string} value - The text value to display in the group header.
+ *
+ * @returns {HTMLStencilElement} The generated group header container.
+ */
+export declare const generateGroupHeaderContainer: (size: GroupHeaderSize, value?: string) => HTMLStencilElement;

package/dist/types/components/base-item/base-item.d.ts

@@ -0,0 +1,61 @@
+import { HTMLStencilElement } from "../../stencil-public-runtime";
+/**
+ * Generates a checkmark icon button based on the provided parameters.
+ *
+ * @param {boolean} isSelected - Whether the item is selected.
+ * @param {"medium" | "large"} size - The desired size of the icon.
+ * @param {boolean} disabled - Whether the icon is disabled.
+ * @param {boolean} isActive - Whether the icon is active.
+ * @param {boolean} danger - Whether the icon should indicate danger.
+ *
+ * @returns {HTMLStencilElement} The generated checkmark icon button.
+ */
+export declare const generateCheckmarkIconButton: (isSelected: boolean, size: "small" | "medium" | "large", disabled: boolean, isActive: boolean, danger: boolean) => HTMLStencilElement;
+/**
+ * Generates an informative icon based on the provided parameters.
+ *
+ * @param {string} icon - The name of the SVG icon to use.
+ * @param {string} value - The value associated with the icon.
+ * @param {"medium" | "large"} size - The desired size of the icon.
+ * @param {boolean} disabled - Whether the icon is disabled.
+ * @param {boolean} isActive - Whether the icon is active.
+ * @param {boolean} danger - Whether the icon should indicate danger.
+ *
+ * @returns {HTMLStencilElement} The generated informative icon.
+ */
+export declare const generateInformativeIcon: (icon: string, value: string, size: "small" | "medium" | "large", disabled: boolean, isActive: boolean, danger: boolean) => HTMLStencilElement;
+/**
+ * Generates a checkbox icon based on the provided parameters.
+ *
+ * @param {boolean} isSelected - Whether the checkbox is selected.
+ * @param {"medium" | "large"} size - The desired size of the checkbox.
+ * @param {boolean} disabled - Whether the checkbox is disabled.
+ * @param {boolean} isActive - Whether the checkbox is active.
+ * @param {boolean} danger - Whether the checkbox should indicate danger.
+ *
+ * @returns {HTMLStencilElement} The generated checkbox icon.
+ */
+export declare const generateCheckbox: (isSelected: boolean, size: "small" | "medium" | "large", disabled: boolean, isActive: boolean, danger: boolean) => HTMLStencilElement;
+/**
+ * Generates a label element based on the provided parameters.
+
+ * @param {string} label - The text content of the label.
+ * @param {"medium" | "large"} size - The desired size of the label.
+ * @param {boolean} disabled - Whether the label is disabled.
+ * @param {boolean} isActive - Whether the label is active.
+ * @param {boolean} danger - Whether the label should indicate danger.
+ *
+ * @returns {HTMLStencilElement} The generated label element.
+ */
+export declare const generateLabel: (label: string, size: "small" | "medium" | "large", disabled: boolean, isActive: boolean, danger: boolean) => HTMLStencilElement;
+/**
+ * Generates a children icon button based on the provided parameters.
+
+ * @param {"medium" | "large"} size - The desired size of the icon.
+ * @param {boolean} disabled - Whether the icon is disabled.
+ * @param {boolean} isActive - Whether the icon is active.
+ * @param {boolean} danger - Whether the icon should indicate danger.
+ *
+ * @returns {HTMLStencilElement} The generated children icon button.
+ */
+export declare const generateChildrenIconButton: (size: "small" | "medium" | "large", disabled: boolean, isActive: boolean, danger: boolean) => HTMLStencilElement;