wabtec-internal-volt-basic-components 1.0.0

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

@@ -0,0 +1,34 @@
+declare const _default: {
+    title: string;
+    parameters: {
+        docs: {
+            toc: boolean;
+        };
+    };
+    argTypes: {
+        position: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        event: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        backdrop: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const BasicUsage: any;
+export declare const WithSlottedItemUsage: any;
+export declare const WithSelectableItemsUsage: any;
+export declare const BasicWithScrollbarUsage: any;
+export declare const NestedUsage: any;

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

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

package/dist/types/components/menu-group-header/vds-menu-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/menu-item/vds-menu-item.d.ts

@@ -0,0 +1,55 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { HTMLStencilElement } from "../../stencil-public-runtime";
+export interface MenuItemClickedEvent {
+    value: string;
+    event: MouseEvent;
+}
+export declare class VdsMenuItem {
+    /** Puts the VdsMenuItem in disabled state */
+    disabled: boolean;
+    /** Define the icon value */
+    icon: string;
+    /** Define item as active when is true */
+    isActive: boolean;
+    /** Shows arrow when there are children */
+    hasChildren: 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 text value */
+    value: string;
+    /** Define aria-label */
+    setAriaLabel: string;
+    /** Set size of menu item */
+    size: "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 menu item to danger state.  */
+    danger: boolean;
+    /** Emits event when item gets clicked */
+    clicked: EventEmitter<MenuItemClickedEvent>;
+    /** 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 generateInformativeIcon;
+    private generateCheckbox;
+    private generateLabel;
+    private generateChildrenIconButton;
+    private setAriaLabelText;
+    render(): HTMLStencilElement;
+}

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

@@ -0,0 +1,37 @@
+declare const _default: {
+    title: string;
+    parameters: {
+        docs: {
+            toc: boolean;
+        };
+    };
+    argTypes: {
+        size: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        icon: {
+            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 LinkUsage: any;

package/dist/types/components/menu-list/vds-menu-list.d.ts

@@ -0,0 +1,3 @@
+export declare class VdsMenuList {
+    render(): any;
+}

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

@@ -0,0 +1,7 @@
+import { Colors } from '../../definitions/colors';
+export type NotificationsCustomColors = {
+    background: Colors;
+    border: Colors;
+    icon: Colors;
+};
+export type NotificationStatus = "informative" | "warning" | "danger" | "healthy" | "custom";

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

@@ -0,0 +1,33 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+import { Colors } from '../../definitions/colors';
+import { NotificationsCustomColors, NotificationStatus } from './vds-notification-utils';
+export declare class VdsNotification {
+    /** Define variant of the notification */
+    variant: "toast" | "inline";
+    /** Define status type of the notification */
+    status: NotificationStatus;
+    /** Define custom status color of notification */
+    colors?: NotificationsCustomColors;
+    /** Define custom Icon for the notification */
+    icon?: string;
+    /** Show / Hide the notification close button */
+    showCloseButton: boolean;
+    /** When set to true, the element will be removed from DOM when pressing the close button. */
+    removeOnClose: boolean;
+    currentIcon: string;
+    currentColor: Colors;
+    hostEl: HTMLElement;
+    /** Emits event when popover gets closed */
+    closed: EventEmitter<void>;
+    private setCustomBackground;
+    private setCustomBorder;
+    private setCustomIcon;
+    private setCustomColors;
+    private setIcon;
+    private handleClose;
+    close(): Promise<void>;
+    private showCloseBtn;
+    private renderActions;
+    render(): HTMLStencilElement;
+}

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

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

package/dist/types/components/popover/utils/utils.d.ts

@@ -0,0 +1 @@
+export declare const popoverCaretFilledSmall = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI0IiB2aWV3Qm94PSIwIDAgOCA0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBpZD0icG9wb3Zlci1jYXJldC1maWxsZWQtc21hbGwiIGQ9Ik0wIDBMNCA0TDggMEgwWiIgZmlsbD0iI2ZmZmZmZiIvPgo8L3N2Zz4K";

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

@@ -0,0 +1,45 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+export declare class VdsPopover {
+    hostEl: HTMLElement;
+    /** Defines the position where the popover will be opened */
+    position: 'top' | 'bottom' | 'right' | 'left';
+    /** Sets the maximum width of the popover’s content */
+    maxWidth: string;
+    /** Sets the maximum height of the popover’s content */
+    maxHeight: string;
+    /** The type of event that will trigger the popover */
+    event: 'hover' | 'click';
+    /** Toggles padding inside popover. */
+    padding: 'default' | 'none';
+    /** 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;
+    popupOpened: boolean;
+    /** Emits event when popover gets opens */
+    opened: EventEmitter<void>;
+    /** Emits event when popover gets closes */
+    closed: EventEmitter<void>;
+    private floatingCleanUp;
+    emitValue(): Promise<void>;
+    private handleClickOut;
+    handleClick(event: Event): void;
+    open(): Promise<void>;
+    close(): Promise<void>;
+    /**
+     *  Gets the target that will manage the popover
+     *  returns a promise with the target HTMLElement.
+     */
+    getTarget(): Promise<HTMLElement | null>;
+    private handleHover;
+    private handleHoverOut;
+    private setPadding;
+    private setMaxWidthAndHeight;
+    private actionElementRef;
+    private arrowElementRef;
+    private popoverElementRef;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    render(): HTMLStencilElement;
+}

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

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

package/dist/types/components/progress-circular/vds-progress-circular.d.ts

@@ -0,0 +1,83 @@
+export declare class VdsProgressCircular {
+    /** Sets the percentage filled value from 0 to 100 */
+    value: number;
+    /**
+     * Defines the color based on the status:
+     * error -> color-background-critical-default,
+     * success -> color-background-general-healthy-default,
+     * default -> color-background-brand-default
+     */
+    status: 'error' | 'success' | 'default';
+    /**
+     * Sets the loop duration time for the indeterminate loop progress in miliseconds.
+     * Determinate and indeterminate state will be defined by adding or not the duration.
+     */
+    duration: number;
+    /** Sets the aria label */
+    setAriaLabel: string;
+    /**
+     * Sets the progress indicator color from the Volt palette:
+     * backgroundProgress - ThemeColors,
+     * backgroundTrack - ThemeColors
+     */
+    colors: {
+        [key: string]: string;
+    } | string;
+    /**
+     * Set the size scale of the component based on 1 === 52px (3.5rem).
+     * Common values:
+     * - 0.25 (extra small): 13px
+     * - 0.5 (small): 26px
+     * - 1 (medium): 52px
+     * - 1.5 (large): 78px
+     * Minimum scale is 0.25
+     */
+    scale: number;
+    /**
+     * State variable to hold the progress value.
+     */
+    progress: number;
+    private customColors;
+    /**
+     * Calculates and returns the styling for the progress circle based on the current value.
+     * This is used to create the stroke-dasharray and stroke-dashoffset for the SVG circle,
+     * which visually represents the progress percentage.
+     *
+     * @private
+     * @returns {Object} An object containing the CSS styles for the SVG circle's stroke.
+     */
+    private setProgress;
+    /**
+     * Returns the animation for the indeterminate slider.
+     * Using the duration prop we return an animation effect in ms.
+     * Going from top to bottom using the value as the progress.
+     *
+     * @private
+     * @returns { animation: string }
+     */
+    private setDurationAnimation;
+    /**
+     * Ensures that the scale is clamped to a minimum value of 0.25.
+     *
+     * @private
+     * @param {number} scale - The new scale value.
+     */
+    private setScale;
+    /**
+     * Sets custom colors for the progress bar.
+     *
+     * @private
+     * @returns {Object} An object containing the CSS styles for the custom colors.
+     */
+    private setCustomColors;
+    /**
+     * Activates custom colors.
+     *
+     * @private
+     * @param {Object} colors - The colors object.
+     * @returns {void}
+     */
+    private activateCustomColors;
+    componentWillLoad(): void;
+    render(): any;
+}

package/dist/types/components/progress-circular/vds-progress-circular.stories.d.ts

@@ -0,0 +1,27 @@
+declare const _default: {
+    title: string;
+    parameters: {
+        docs: {
+            toc: boolean;
+        };
+    };
+    argTypes: {
+        status: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        scale: {
+            control: {
+                type: string;
+                min: number;
+                step: number;
+            };
+        };
+    };
+};
+export default _default;
+export declare const BasicUsage: any;
+export declare const AnimationUsage: any;
+export declare const customColorsUsage: any;

package/dist/types/components/progress-linear/vds-progress-linear.d.ts

@@ -0,0 +1,56 @@
+export declare class VdsProgressLinear {
+    /** Sets the percentage filled number for determinate mode from 0 to 100 */
+    value: number;
+    /** Defines the color based on the status:
+     * error -> color-background-critical-default,
+     * success -> color-background-general-healthy-default,
+     * default -> color-background-brand-default */
+    status: "error" | "success" | "default";
+    /** Sets the loop duration time for the indeterminate loop progress in miliseconds */
+    duration: number;
+    /** Sets the aria label in badge */
+    setAriaLabel: string;
+    /** Sets the progress indicator color from the Volt palette
+     * backgroundProgress - ThemeColors
+     * backgroundTrack - ThemeColors */
+    colors: {
+        [key: string]: string;
+    } | string;
+    private customColors;
+    /**
+     * Returns the percentage value to set as percentage
+     * When value is lower than 0, then returns 0.
+     * When value is greater than 100, then 0.
+     * else set value.
+     *
+     * @returns { width: string }
+     */
+    setProgress(): {
+        width: string;
+    };
+    /**
+     * Returns the animation for the indeterminate slider
+     * Using the duration prop we return an animation effect in ms.
+     * Going from left to right using the value as the progress
+     *
+     * @returns { animation: string }
+     */
+    setDurationAnimation(): {
+        animation: string;
+    } | {};
+    /**
+     * Sets the styles for the progress bar.
+     *
+     * @private
+     * @returns {Object} An object containing the CSS styles for the progress bar.
+     */
+    private setProgressStyles;
+    /**
+     * Sets custom colors for the progress bar.
+     *
+     * @private
+     * @returns {Object} An object containing the CSS styles for the custom colors.
+     */
+    private setCustomColors;
+    render(): any;
+}

package/dist/types/components/progress-linear/vds-progress-linear.stories.d.ts

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

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

@@ -0,0 +1,79 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { RadioButtonChecked } from './vds-radio-button.utils';
+export declare class VdsRadioButton {
+    /** Defines the size of the radio */
+    size: "large" | "medium";
+    /** Sets the radio in checked state */
+    checked: boolean;
+    /** Sets the radio in disabled state */
+    disabled: boolean;
+    /** Sets the radio in error state */
+    error: boolean;
+    /** It’s useful for identifying in a radio group */
+    value: string;
+    /** Aligns the label in relation to the radio-button*/
+    labelAlignment: "start" | "end";
+    /** Sets the text to be shown in the radio-button */
+    labelValue: string;
+    hostEl: HTMLElement;
+    internals: ElementInternals;
+    /** Makes a custom change to target property using checked (use for React components) */
+    check: EventEmitter<boolean>;
+    /** Emits radio button checked value */
+    radioCheck: EventEmitter<RadioButtonChecked>;
+    private state;
+    componentWillRender(): void;
+    componentDidLoad(): void;
+    /**
+     * Executes every time checked value changes.
+     * Sets form value in order to work properly with native forms
+     *
+     * @returns void
+     */
+    setCheckedStates(): void;
+    /**
+     * Executes every time the radio-button is being click.
+     *
+     * @param event - MouseEvent
+     * @returns void
+     */
+    handleClick(_: MouseEvent): void;
+    /**
+    * Toggles radio-button value.
+    * When parameter is not provided, if true get set to false. When false get set to true.
+    * Emits check event with checked value.
+    *
+    * @param checked - Boolean (Optional)
+    * @returns Promise<void>
+    */
+    toggleCheck(checked?: boolean): Promise<void>;
+    /**
+     * Emits event values when radio button state changed.
+     * Emits check event with checked prop.
+     * Emits input event with value prop.
+     *
+     * @returns void
+     */
+    private emitValues;
+    /**
+     * Determine state of the radio based on the checked property.
+     * When checked is true, state is checked.
+     * When checked is false, state is unchecked.
+     *
+     * @returns void
+     */
+    private setRadioState;
+    /**
+     * Returns the icon prop based on the state and calculate the size.
+     *
+     * @returns HTMLStencilElement
+     */
+    private renderRadioButton;
+    /**
+    * Returns the vds-label for the radio-button when there is a label provided.
+    *
+    * @returns HTMLStencilElement
+    */
+    private renderLabel;
+    render(): any;
+}

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

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

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

@@ -0,0 +1,5 @@
+export interface RadioButtonChecked {
+    checked: boolean;
+    value: string;
+    element: HTMLVdsRadioButtonElement;
+}

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

@@ -0,0 +1,30 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+export declare class VdsSegmentedButton {
+    /** Sets the icon at the left of the segment button */
+    informativeIcon: string;
+    /** Sets the segment button in active state */
+    isActive: boolean;
+    /** When is-active is true, shows checkmark */
+    hasCheckmark: boolean;
+    /** Set the segmented-button to disabled state */
+    disabled: boolean;
+    /** Set the segmented-button value */
+    value: string;
+    /** Allows the component to be adaptable to the container available horizontal space */
+    fullWidth: boolean;
+    /** Emits event when item gets clicked */
+    segmentedButtonClicked: EventEmitter<{
+        value: string;
+        selected: boolean;
+    }>;
+    /** Emits event when item is selected */
+    selected: EventEmitter<void>;
+    /** Emits event when item is deselected */
+    deselected: EventEmitter<void>;
+    hostEl: HTMLElement;
+    setActiveProp(): void;
+    handleClick(evt: MouseEvent): void;
+    generateInformativeIcon(): HTMLStencilElement;
+    render(): any;
+}

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

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