wabtec-internal-volt-basic-components 1.0.0

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

@@ -0,0 +1,99 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class VdsBasicDropdown {
+    hostEl: HTMLElement;
+    /** Sets the dropdown's size. */
+    size: 'small' | 'medium' | 'large';
+    /** Sets the dropdown's value. */
+    value: string;
+    /** Allows user to define a information icon to the left of the dropdown. */
+    informativeIcon: string;
+    /** Allows dropdown-item informativeIcon reflect dynamically as informativeIcon of the dropdown. */
+    dynamicInformativeIcon: boolean;
+    /** Sets the dropdown's placeholder. */
+    placeholder: string;
+    /** Sets the dropdown in disabled state. */
+    disabled: boolean;
+    /** Sets the dropdown in readonly state. */
+    isReadonly: boolean;
+    /** Sets the dropdown in error state. */
+    error: boolean;
+    /** Sets the dropdown's trigger event. */
+    event: 'click' | 'hover';
+    /** Sets the dropdown's clear button visibility. */
+    showClearButton: boolean;
+    /** 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 dropdown width */
+    matchWidth: 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;
+    /** 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 */
+    valueChanged: EventEmitter<string>;
+    /** Emits an event when the clear button is clicked */
+    cleared: EventEmitter<boolean>;
+    /** Dropdown's status. */
+    dropdownOpened: boolean;
+    /** Dropdown's label of the current value. */
+    private valueLabel;
+    internals: ElementInternals;
+    private actionElementRef;
+    private dropdownContentElementRef;
+    private defaultInformativeIcon;
+    private options;
+    private floatingCleanUp;
+    observer: any;
+    emitValue(): Promise<void>;
+    setValueHandler(): void;
+    private setFormValue;
+    private handleClickOut;
+    private handleFloatingKeydown;
+    private handleClick;
+    private clearValue;
+    private handleDropdownItemClicked;
+    private handleSelection;
+    open(): Promise<void>;
+    close(): Promise<void>;
+    clear(): Promise<void>;
+    /**
+     *  Gets the target that will manage the menu
+     *  returns a promise with the target HTMLElement.
+     */
+    getTarget(): Promise<HTMLElement | null>;
+    /**
+     *  Gets the selected value of the dropdown
+     *  returns a promise with the value.
+     */
+    getValue(): Promise<String | null>;
+    /**
+     *  Set the value of the dropdown
+     */
+    setValue(value: string): Promise<void>;
+    private handleHover;
+    private handleHoverOut;
+    private setPredefinedItem;
+    private findAndSetPredefinedItem;
+    private defineValue;
+    componentWillLoad(): void;
+    componentDidRender(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private setListenerForChildren;
+    /** Gets the icon color.
+     *
+     * @returns string
+     */
+    private getIconColor;
+    private setDropdownIcon;
+    private setInformativeIcon;
+    private setLabelValue;
+    private setClearValueButtonIcon;
+    render(): any;
+}

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

@@ -0,0 +1,40 @@
+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;
+            };
+        };
+        event: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        autoPosition: {
+            control: string;
+        };
+    };
+};
+export default _default;
+export declare const BasicUsage: any;
+export declare const BasicWithIconsUsage: any;
+export declare const BasicWithPredefinedItemUsage: any;
+export declare const BasicWithItemCheckmarkUsage: any;

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

@@ -0,0 +1,91 @@
+/**
+ * Toggles the display style of an HTML element.
+ *
+ * @param {HTMLElement} contentBox The HTML element to toggle the display for.
+ * @param {boolean} toggle A boolean value to control the display.
+ *  - True: Sets the display to "block".
+ *  - False: Sets the display to "none".
+ * @returns {void}
+ */
+export declare const toggleContainerDisplay: (contentBox: HTMLElement, toggle: boolean) => void;
+/**
+ * Unselects non-selected items in a dropdown.
+ *
+ * @param {HTMLElement} dropdownContent The dropdown content element.
+ * @param {string[]|string} value The selected value or an array of selected values.
+ */
+export declare const unselectNonSelectedItems: (dropdownContent: HTMLElement, value: string[] | string) => void;
+/**
+ * Selects selected items in a dropdown.
+ *
+ * @param {HTMLElement} dropdownContent The dropdown content element.
+ * @param {string[]|string} value The selected value or an array of selected values.
+ */
+export declare const selectSelectedItems: (dropdownContent: HTMLElement, value: string[] | string) => void;
+/**
+ * Gets selected label in single dropdown using value
+ *
+ * @param {HTMLElement} dropdownContent The dropdown content element.
+ * @param {string[]|string} value The selected value or an array of selected values.
+ */
+export declare const getSelectedLabel: (dropdownContent: HTMLElement, value: string) => string;
+export declare const scrollToSelectedValue: (dropdownContent: HTMLElement, value: string[] | string) => void;
+/**
+ * Gets thje selected text items in a dropdown.
+ *
+ * @param {HTMLElement} dropdownContent The dropdown content element.
+ * @param {string[]|string} value The selected value or an array of selected values.
+ */
+export declare const getSelectedItemsText: (dropdownContent: HTMLElement, value: string[]) => string[];
+/**
+ * Unselects all items in a dropdown.
+ *
+ * @param {HTMLElement} dropdownContent The dropdown content element.
+ * @param {string[]|string} value The selected value or an array of selected values.
+ */
+export declare const unselectAllItems: (dropdownContent: HTMLElement) => void;
+/**
+ * Emits a native "input" event on the specified host element.
+ *
+ * @param {HTMLElement} hostEl The host element to emit the event on.
+ */
+export declare const emitNativeInputEvent: (hostEl: HTMLElement) => void;
+/**
+ * Checks if a given value is a valid option within a dropdown content element.
+ *
+ * @param {HTMLElement} dropdownContent The dropdown content element.
+ * @param {string} value The value to check for validity.
+ * @returns {boolean} True if the value is a valid option, false otherwise.
+ *
+ * **Validity criteria:**
+ * - The value must match the `value` attribute of at least one `vds-dropdown-item` element within the dropdown content.
+ */
+export declare const isValidOption: (dropdownContent: HTMLElement, value: string) => boolean;
+/**
+ * Filters a list of options to only include those that are valid within a specified host element.
+ *
+ * @param {HTMLElement} hostEl The host element to validate options against.
+ * @param {string[]} options The list of options to filter.
+ * @returns {string[]} A new array containing only the valid options from the input list.
+ *
+ * **Validity criteria:**
+ * - An option is considered valid if it matches the `value` attribute of at least one `vds-dropdown-item` element within the host element's dropdown content.
+ */
+export declare const getValidOptions: (hostEl: HTMLElement, options: string[]) => string[];
+/**
+ * Sets dropdown styles for JSX.style property
+ *
+ * @param maxHeight string
+ * @returns { [key: string]: string }
+ */
+export declare const setDropdownStyles: (maxHeight: string) => {
+    [key: string]: string;
+};
+/**
+ * Updates the container width to match the trigger width when matchWidth is true.
+ *
+ * @param {HTMLElement} dropdownTrigger - The HTML button element that triggers the dropdown.
+ * @param {boolean} matchWidth - A flag indicating whether to match the width of the dropdown content to the trigger.
+ * @param {HTMLDivElement} dropdownContent - The dropdown content element whose width is to be updated.
+ */
+export declare const updateContainerWidth: (dropdownTrigger: HTMLElement, matchWidth: boolean, dropdownContent: HTMLDivElement) => void;

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

@@ -0,0 +1,18 @@
+export declare class VdsButton {
+    /** Set button's size */
+    size: "large" | "medium" | "small";
+    /** Set button's variant */
+    variant: "primary" | "secondary" | "tertiary" | "ghost" | "ghost-alt";
+    /** Allow to change the button's text alignment */
+    textAlignment: "right" | "left" | "center";
+    /** Enable button's danger/error state */
+    danger: boolean;
+    /** Enable button's disable state */
+    disabled: boolean;
+    /** Enable button's full width. This prop permits to the component will be adaptable to the container available horizontal space. */
+    isFullWidth: boolean;
+    hostEl: HTMLButtonElement;
+    handleSubmit(event: Event): void;
+    private submitForm;
+    render(): any;
+}

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

@@ -0,0 +1,113 @@
+declare const _default: {
+    title: string;
+    parameters: {
+        docs: {
+            toc: boolean;
+        };
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+    argTypes: {
+        variant: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        size: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        textAlignment: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        iconLeft: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        iconRight: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const BasicUsage: any;
+export declare const Sizes: any;
+export declare const Primary: {
+    (args: any): string;
+    args: {
+        size: string;
+        danger: boolean;
+        disabled: boolean;
+        text: string;
+        iconLeft: any;
+        iconRight: any;
+        isFullWidth: boolean;
+    };
+};
+export declare const Secondary: {
+    (args: any): string;
+    args: {
+        size: string;
+        danger: boolean;
+        disabled: boolean;
+        text: string;
+        iconLeft: any;
+        iconRight: any;
+        isFullWidth: boolean;
+    };
+};
+export declare const Tertiary: {
+    (args: any): string;
+    args: {
+        size: string;
+        danger: boolean;
+        disabled: boolean;
+        text: string;
+        iconLeft: any;
+        iconRight: any;
+        isFullWidth: boolean;
+    };
+};
+export declare const Ghost: {
+    (args: any): string;
+    args: {
+        size: string;
+        danger: boolean;
+        disabled: boolean;
+        text: string;
+        iconLeft: any;
+        iconRight: any;
+        isFullWidth: boolean;
+    };
+};
+export declare const GhostAlt: {
+    (args: any): string;
+    args: {
+        size: string;
+        danger: boolean;
+        disabled: boolean;
+        text: string;
+        iconLeft: any;
+        iconRight: any;
+        isFullWidth: boolean;
+    };
+};
+export declare const Danger: {
+    (args: any): string;
+    args: {
+        isFullWidth: boolean;
+    };
+};

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

@@ -0,0 +1,49 @@
+import { HTMLStencilElement, EventEmitter } from '../../stencil-public-runtime';
+import { Colors } from '../../definitions/colors';
+import { Spacing } from '../../definitions/spacing';
+import { ShadowBox } from '../../definitions/shadows';
+export declare class VdsCard {
+    /** Padding of component based on volt-spacing tokens */
+    padding: Spacing;
+    /** Selectable property allow the card to toggle between selected and unselected state.
+     * This property can't be used with the button property at the same time */
+    selectable: boolean;
+    /** Sets the selected state for the card (only works when selectable property is true).
+     * This property can't be used with the button property at the same time */
+    selected: boolean;
+    /** Button property allows the card to behave like a button.
+     * This property can't be used with the selectable property at the same time */
+    button: boolean;
+    /** Sets the card in disabled state */
+    disabled: boolean;
+    /** Allows changing the default card variant */
+    variant: 'primary' | 'secondary' | 'danger' | 'default';
+    /** Sets the shadow for the card */
+    shadowBox: ShadowBox;
+    /**
+     * Allows changing the default border color.
+     * @deprecated This property is deprecated and will be removed from the code in the future.
+     */
+    borderColor: Colors;
+    /**
+     * Allows changing the border color when hovering.
+     * @deprecated This property is deprecated and will be removed from the code in the future.
+     */
+    borderHoverColor: Colors;
+    /** Emits event when card have been selected (only works when selectable property is true) */
+    select: EventEmitter<boolean>;
+    /** Emits event when card have been clicked on (only works when button property is true) */
+    click: EventEmitter<MouseEvent>;
+    emitSelected(): void;
+    handleBehaviorValidation(): void;
+    /**
+     * Sets card's custom border colors
+     *
+     * @returns { [key: string]: string }
+     */
+    private setCustomBorderColors;
+    private handleSelectable;
+    private handleClick;
+    componentWillLoad(): void;
+    render(): HTMLStencilElement;
+}

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

@@ -0,0 +1,37 @@
+declare const _default: {
+    title: string;
+    parameters: {
+        docs: {
+            toc: boolean;
+        };
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+    argTypes: {
+        padding: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        shadowBox: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        variant: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const BasicUsage: any;
+export declare const Selectable: any;
+export declare const Button: any;
+export declare const CustomColorsUsage: any;

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

@@ -0,0 +1,90 @@
+import { HTMLStencilElement, EventEmitter } from "../../stencil-public-runtime";
+import { CheckboxEvent } from "./vds-checkbox.utils";
+export declare class VdsBasicCheckbox {
+    /** Sets the text to be shown in the checkbox */
+    labelValue: string;
+    /** Sets the checkbox in checked state */
+    checked: boolean;
+    /** Sets the checkbodx in indeterminate state */
+    indeterminate: boolean;
+    /** Sets the checkbox in disabled state */
+    disabled: boolean;
+    /** Sets the checkbox in error state */
+    error: boolean;
+    /** Sets the checkbox's size */
+    size: "medium" | "large";
+    /** Toggles the required sign in the field */
+    isRequired: boolean;
+    /** Sets the value in the input. Usually uses checked prop as string.
+     *  Used to manage Reactive forms and other native functionality */
+    value: string;
+    hostEl: HTMLElement;
+    internals: ElementInternals;
+    /**
+     * Event which is triggered when checkbox state changes. This event also captures if
+     * any of the special keys (shift, ctrl, meta or alt) where pressed when the checkbox state
+     * changed. Use CheckboxEvent.isChecked() or
+     * checkbox.on('checkboxEvent', (event : CustomEvent<CheckboxEvent>) => {
+     *		if(event.detail == true) {
+     *			console.log('Checked');
+     * 		}
+     * console.log(event.detail.altKey);
+     * console.log(event.detail.shiftKey);
+     * console.log(event.detail.ctrlKey);
+     * })
+     *
+     */
+    checkboxChange: EventEmitter<CheckboxEvent>;
+    /** Makes a custom change to target property using checked and indeterminate (use for React components) */
+    check: EventEmitter<boolean>;
+    private state;
+    componentWillRender(): void;
+    componentDidLoad(): void;
+    /**
+     * Executes every time checked value changes.
+     * Sets indeterminate value to false in order to guarantee a change in value.
+     * Sets form value in order to work properly with native forms
+     *
+     * @returns void
+     */
+    setCheckedStates(): void;
+    /**
+     * Executes every time the checkbox is being click.
+     * Executes toggleCheck method.
+     *
+     * @param event - MouseEvent
+     * @returns void
+     */
+    handleClick(event: MouseEvent): void;
+    /**
+    * Toggles checkbox value.
+    * Emits checkboxChange event with CheckboxEvent value.
+    * Emits check event with checked value.
+    *
+    * @param evt - KeyboardEvent | MouseEvent
+    * @returns Promise<void>
+    */
+    toggleCheck(evt?: KeyboardEvent | MouseEvent): Promise<void>;
+    /**
+     * Determine state of the checkbox based on the indeterminate and checked properties.
+     * When indetermanate is true, state is indeterminate.
+     * When indetermanate is false and checked is true, state is checked.
+     * When indetermanate is false and checked is false, state is unchecked.
+     *
+     * @returns void
+     */
+    private setCheckboxState;
+    /**
+     * Returns the icon prop based on the state and calculate the size.
+     *
+     * @returns HTMLStencilElement
+     */
+    private renderCheckbox;
+    /**
+    * Returns the vds-label for the checkbox when there is a label provided.
+    *
+    * @returns HTMLStencilElement
+    */
+    private renderLabel;
+    render(): HTMLStencilElement;
+}

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

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

package/dist/types/components/checkbox/vds-checkbox.utils.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Custom checkbox change event to capture
+ * extra keys being pressed when user clicks on the checkbox
+ */
+export declare class CheckboxEvent extends Boolean {
+    private _value;
+    private _altKey;
+    private _ctrlKey;
+    private _metaKey;
+    private _shiftKey;
+    constructor(_value?: boolean, _altKey?: boolean, _ctrlKey?: boolean, _metaKey?: boolean, _shiftKey?: boolean);
+    valueOf(): boolean;
+    isChecked(): boolean;
+    get altKey(): boolean;
+    get ctrlKey(): boolean;
+    get metaKey(): boolean;
+    get shiftKey(): boolean;
+}

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

@@ -0,0 +1,77 @@
+import { HTMLStencilElement, EventEmitter } from '../../stencil-public-runtime';
+export declare class VdsChip {
+    /** Sets chips content value */
+    value: string;
+    /** Displays close icon */
+    close: boolean;
+    /** Displays menu (chevron-down) icon */
+    menu: boolean;
+    /** Displays chip in active state */
+    active: boolean;
+    /** Sets chip to disabled */
+    disabled: boolean;
+    /** Sets content size  */
+    size: "small" | "medium" | "large";
+    /** Defines the aria label on the close button  */
+    closeAriaLabel: string;
+    /** They turn active on/off when clicking the chip */
+    toggle: boolean;
+    /** Receives the icon name to be shown in the left side */
+    informativeIcon: string;
+    /** When close button is clicked, the element is removed from the DOM */
+    removeOnClose: boolean;
+    /** Fires after chip dismiss and hide */
+    afterClosed: EventEmitter<void>;
+    /** Fires when chip is selected (only works when toggle is enabled) */
+    selected: EventEmitter<void>;
+    /** Fires when menu-icon is clicked */
+    menuClick: EventEmitter<void>;
+    hostEl: HTMLVdsChipElement;
+    _informativeIcon: string;
+    private iconColor;
+    private iconSize;
+    /**
+     * Executes before every render cycle.
+     *
+     * @returns void
+     */
+    componentWillRender(): void;
+    /**
+     * Dismiss/Hide the chip.
+     * Emits afterClosed event
+     *
+     * @Returns Promise<void>
+     */
+    dismiss(): Promise<void>;
+    /**
+     * Emits event when menu-icon is clicked
+     *
+     * @Returns void
+     */
+    private emitMenuClicked;
+    /**
+     * Sets informative icon based on the following herarchy
+     * When informativeIcon prop is provided it will always display.
+     * When Chip is toggle and active it will set informativeIcon to checkMarck (good)
+     * Otherwise it'll not be display.
+     *
+     * @Returns void
+     */
+    private setInformativeIcon;
+    /**
+     * Sets the color for the icons inside the chip.
+     * Sets the chip's vds-icon colors
+     *
+     * @returns void
+     */
+    private setChipIconsColor;
+    private setChipIconsSize;
+    /**
+     * Changes the chip active state when toggle option is enabled.
+     * Add checks icon when informativeIcon is not provided
+     *
+     * @returns void
+     */
+    private handleChipClick;
+    render(): HTMLStencilElement;
+}

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

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