wabtec-internal-volt-basic-components 1.0.0

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

@@ -0,0 +1,90 @@
+import { HTMLStencilElement, EventEmitter } from "../../stencil-public-runtime";
+import { Spacing } from "../../definitions/spacing";
+export declare class VdsDialog {
+    /** Sets the padding around the dialog */
+    padding: Spacing;
+    /** Toggles the background behind the dialog */
+    backdrop: boolean;
+    /** Sets the width size of the dialog */
+    width: string;
+    /** Sets the minimum width size of the dialog */
+    minWidth: string;
+    /** Sets the maximum width  size of the dialog */
+    maxWidth: string;
+    /** Avoids user to close dialog by clicking outside */
+    preventOutsideClose: boolean;
+    /** Emits the event when opens dialog */
+    opened: EventEmitter<string>;
+    /** Emits the event when opens dialog */
+    closed: EventEmitter<string>;
+    isOpen: boolean;
+    host: HTMLElement;
+    private dialog;
+    private trigger;
+    componentDidLoad(): void;
+    /**
+     * Opens the dialog element. This method displays the dialog modally
+     * with a backdrop if the `backdrop` property is set to `true`. Otherwise,
+     * it opens the dialog non-modally without a backdrop.
+     *
+     * @returns {Promise<void>} A promise that resolves when the dialog is opened.
+     */
+    open(): Promise<void>;
+    /**
+     * Closes the dialog element. This method hides the dialog.
+     *
+     * @returns {Promise<void>} A promise that resolves when the dialog is closed.
+     */
+    close(): Promise<void>;
+    /**
+     * Returns the main element container of the dialog.
+     *
+     * @returns {Promise<HTMLDialogElement>} A promise that resolves returning the dialog main element.
+     */
+    getContainer(): Promise<HTMLDialogElement>;
+    /**
+     * Listens for "closeButton" events on the children elements.
+     * This method calls the `close()` method to close the dialog when the button is clicked.
+     *
+     * @returns {void}
+     */
+    closeButtonHandle(): void;
+    /**
+     * Listens for "keydown" events on the children elements, when the Escape key is press down
+     * it closes the dialog.
+     *
+     * @returns {void}
+     */
+    handleEscKey(ev: KeyboardEvent): void;
+    /**
+     * Opens the dialog when the trigger element is clicked
+     *
+     * @returns {void}
+     */
+    handleClick(): void;
+    /**
+     * Closes the dialog when the backdrop element is clicked.
+     * The HTMLDialog adds a ::backdrop element when is open with showDialog. This element returns as target
+     * the DIALOG element; when clicking on the content it returns the element that was click.
+     *
+     * @returns {void}
+     */
+    handleClose(evt: Event): void;
+    /**
+     * @private
+     * Creates a styles object based on the component's properties (`width`, `minWidth`, `maxWidth`).
+     *
+     * @returns {Object} An object containing CSS styles for the component.
+     */
+    private setStyles;
+    /**
+     * @private
+     * Sets up event listeners for the dialog component elements.
+     *
+     * - Listens for "click" events on the `trigger` element and calls `handleClick`.
+     * - Listens for "click" events on the `dialog` element and calls `handleClose`.
+     *
+     */
+    private setHTMLElementEvents;
+    render(): HTMLStencilElement;
+}

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

@@ -0,0 +1,29 @@
+declare const _default: {
+    title: string;
+    parameters: {
+        docs: {
+            toc: boolean;
+        };
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+    argTypes: {
+        padding: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const BasicUsage: any;
+export declare const nonModal: any;
+export declare const alert: any;
+export declare const scroll: any;
+export declare const action: any;
+export declare const fluid: any;
+export declare const NoFocusableElement: any;
+export declare const form: any;

package/dist/types/components/dialog-action-footer/vds-dialog-action-footer.d.ts

@@ -0,0 +1,16 @@
+import { EventEmitter, HTMLStencilElement } from "../../stencil-public-runtime";
+export declare class VdsDialogActionFooter {
+    /** Emits event when closed button is clicked */
+    closeButton: EventEmitter<void>;
+    host: HTMLElement;
+    componentDidLoad(): void;
+    /**
+    * @private
+    * Sets up event listeners for the dialog children elements which has attribute close-dialog.
+    *
+    * - Listens for "click" events on the element and emits `closeButton`.
+    *
+    */
+    private setClosebuttonEventEmitterToCloseDialogElements;
+    render(): HTMLStencilElement;
+}

package/dist/types/components/dialog-action-footer/vds-dialog-action-footer.stories.d.ts

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

package/dist/types/components/dialog-body/vds-dialog-body.d.ts

@@ -0,0 +1,4 @@
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+export declare class VdsDialogBody {
+    render(): HTMLStencilElement;
+}

package/dist/types/components/dialog-body/vds-dialog-body.stories.d.ts

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

package/dist/types/components/dialog-header/vds-dialog-header.d.ts

@@ -0,0 +1,9 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+export declare class VdsDialogHeader {
+    /** Toggles show close button in dialog header */
+    showCloseButton: boolean;
+    /** Emits event when closed button is clicked */
+    closeButton: EventEmitter<void>;
+    render(): HTMLStencilElement;
+}

package/dist/types/components/dialog-header/vds-dialog-header.stories.d.ts

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

package/dist/types/components/dialog-modal/vds-dialog-modal.d.ts

@@ -0,0 +1,4 @@
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+export declare class VdsDialogModal {
+    render(): HTMLStencilElement;
+}

package/dist/types/components/dialog-modal/vds-dialog-modal.stories.d.ts

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

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

@@ -0,0 +1,15 @@
+import { Spacing } from '../../definitions/spacing';
+import { BorderColors } from '../../definitions/colors';
+import { BorderThickness } from '../../definitions/thickness';
+export declare class VdsDivider {
+    /** Define divider padding using our spacing system */
+    padding: Spacing;
+    /** Define divider orientation horizontal or vertical */
+    orientation: 'horizontal' | 'vertical';
+    /** Set the divider line color */
+    color: BorderColors;
+    /** Set the divider line thickness */
+    thickness: BorderThickness;
+    private setDividerStyle;
+    render(): any;
+}

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

@@ -0,0 +1,41 @@
+declare const _default: {
+    title: string;
+    parameters: {
+        docs: {
+            toc: boolean;
+        };
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+    argTypes: {
+        orientation: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        borderColor: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        borderThickness: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        padding: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const BasicHorizontalUsage: any;
+export declare const BasicVerticalUsage: any;

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

@@ -0,0 +1,35 @@
+import { HTMLStencilElement, EventEmitter } from '../../stencil-public-runtime';
+import { Spacing } from '../../definitions/spacing';
+export declare class VdsDrawer {
+    /** Opens/closes the drawer */
+    opened: boolean;
+    /** Toggles close button in the drawer */
+    showCloseButton: boolean;
+    /** Disables the close button in the drawer */
+    disableClose: boolean;
+    /** Places the drawer in the screen */
+    position: 'left' | 'right';
+    /** Toggles backdrop behind the drawer in the screen */
+    backdrop: boolean;
+    /** Adds the padding to the drawer */
+    padding: Spacing;
+    /** Mode of the drawer; one of 'over' or 'side'. */
+    mode: 'over' | 'side';
+    /** Allow the vds-drawer to fit inside another html element */
+    isAdaptable: boolean;
+    /** Allow show or hide the shadow of the drawer */
+    showShadow: boolean;
+    showBorder: boolean;
+    /** Emits event when drawer is closed */
+    drawerClosed: EventEmitter<void>;
+    /** Emits event when drawer is opened */
+    drawerOpened: EventEmitter<void>;
+    dropdownIsOpened: boolean;
+    emitValue(): void;
+    setPositionRelativeForDropdowns(evt: CustomEvent<boolean>): void;
+    open(): Promise<void>;
+    close(): Promise<void>;
+    private renderBackdrop;
+    private renderCloseIcon;
+    render(): HTMLStencilElement;
+}

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

@@ -0,0 +1,36 @@
+declare const _default: {
+    title: string;
+    parameters: {
+        docs: {
+            toc: boolean;
+        };
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+    argTypes: {
+        padding: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        position: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        mode: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const BasicUsage: any;
+export declare const HeaderFooterUsage: any;
+export declare const CustomColorUsage: any;

package/dist/types/components/dropdown-group-header/vds-dropdown-group-header.d.ts

@@ -0,0 +1,6 @@
+import { GroupHeaderSize } from '../base-group-header/base-group-header';
+export declare class VdsDropdownGroupHeader {
+    /** Size of the group header */
+    size: GroupHeaderSize;
+    render(): any;
+}

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

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

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

@@ -0,0 +1,42 @@
+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;
+export declare const LinkUsage: any;

package/dist/types/components/dropdown-item/vds-dropdown-item-clicked-event.d.ts

@@ -0,0 +1,7 @@
+export interface DropdownItemClickedEvent {
+    value: string;
+    label: string;
+    icon: string;
+    selected: boolean;
+    event: MouseEvent;
+}

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

@@ -0,0 +1,51 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+import { DropdownItemClickedEvent } from './vds-dropdown-item-clicked-event';
+export declare class VdsDropdownItem {
+    /** Puts the VdsDropdownItem in disabled state */
+    disabled: boolean;
+    /** Define the icon value */
+    informativeIcon: string;
+    /** Define item as active when is true */
+    isActive: boolean;
+    /** Defines the element as a link */
+    linkHref: string;
+    /** Sets the link target value */
+    linkTarget: '_self' | '_blank' | '_parent' | '_top';
+    /** Sets the link rel value */
+    linkRel: string;
+    /** Define item value */
+    value: string;
+    /** Define item label */
+    label: string;
+    /** Define 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 dropdown item to danger state.  */
+    danger: boolean;
+    /** Emits event when item gets clicked */
+    dropdownItemClicked: EventEmitter<DropdownItemClickedEvent>;
+    /** 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/dropdown-multiselect/vds-basic-dropdown-multiselect.d.ts

@@ -0,0 +1,105 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { HTMLStencilElement } from "../../stencil-public-runtime";
+import { DropdownItemClickedEvent } from "../dropdown-item/vds-dropdown-item-clicked-event";
+export declare class VdsBasicDropdownMultiselect {
+    /** Sets the dropdown's size. */
+    size: "small" | "medium" | "large";
+    /** Sets the dropdown's value. */
+    value: string[] | string;
+    /** Allows user to define a information icon to the left of the dropdown. */
+    informativeIcon: string;
+    /** 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";
+    /** Sets the dropdown's value max items selected in plain text. */
+    displaySelectionLimit: number;
+    /** Sets displaySelectionLimit text */
+    displaySelectionLimitText: string;
+    /** 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>;
+    isOpened: boolean;
+    hostEl: HTMLElement;
+    internals: ElementInternals;
+    private dropdownTrigger;
+    private dropdownContent;
+    private options;
+    private observer;
+    private floatingCleanUp;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private setListenerForChildren;
+    setValueHandler(newValue: string[] | string): void;
+    componentDidRender(): void;
+    toggleDropdown(): Promise<void>;
+    open(): Promise<void>;
+    close(): Promise<void>;
+    /**
+     * Clears the selected options and resets the value of the dropdown.
+     *
+     * @returns {Promise<void>} A promise that resolves when the clearing operation is complete.
+     */
+    clear(): Promise<void>;
+    /**
+     *  Gets the target that will manage the menu
+     *  returns a promise with the target HTMLElement.
+     *
+     *  @returns {Promise<HTMLElement>} A promise that resolves with the target html element.
+     */
+    getTarget(): Promise<HTMLElement | null>;
+    /**
+     *  Gets the selected value of the dropdown
+     *  returns a promise with the value.
+     *
+     *  @returns {Promise<string[]>} A promise that resolves with the value as string[].
+     */
+    getValue(): Promise<string[]>;
+    /**
+     * Sets the selected value(s) for the dropdown.
+     *
+     * @param {string[] | string} value The new value or array of values to select.
+     * @returns {Promise<void>} A promise that resolves when the value is set.
+     */
+    setValue(value: string[] | string): Promise<void>;
+    private handleClickOut;
+    /**
+     * Listen when Dropdown Item element is clicked to close Dropdown Items window, set the value and emit the changes.
+     *
+     * @param {CustomEvent<DropdownItemClickedEvent>} event The dropdown item clicked event.
+     */
+    handleDropdownSelection(event: CustomEvent<DropdownItemClickedEvent>): void;
+    private handleClick;
+    private handleFloatingKeydown;
+    private clearIconClick;
+    private renderLabelValue;
+    private getTextValue;
+    private renderInformativeIcon;
+    private renderClearIcon;
+    private renderDropdownIcon;
+    private hasValue;
+    render(): HTMLStencilElement;
+}

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

@@ -0,0 +1,37 @@
+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;
+            };
+        };
+    };
+};
+export default _default;
+export declare const BasicUsage: any;
+export declare const DisplayLimit: any;
+export declare const MaxContent: any;
+export declare const CheckboxUsage: any;

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

@@ -0,0 +1,21 @@
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+import { Colors } from '../../definitions/colors';
+export declare class VdsField {
+    /** Sets the field's label */
+    label: string;
+    /** Toggles the required sign in the field */
+    isRequired: boolean;
+    /** Sets the field in disabled state */
+    isDisabled: boolean;
+    /** Sets the field's helper text */
+    helperText: string;
+    /** Sets the field's helper text color */
+    helperTextColor: Colors;
+    /** Sets the field's error message */
+    errorMessage: string;
+    /** Sets the field's size */
+    size: "small" | "medium" | "large";
+    private getLabel;
+    private getHelperText;
+    render(): HTMLStencilElement;
+}

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

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