wabtec-internal-volt-basic-components 1.0.0

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

@@ -0,0 +1,48 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+export declare class VdsSheet {
+    /** Create a backdrop that allow's to close the bottom sheet by clicking outside. */
+    backdrop: boolean;
+    /** Open / Close the bottom sheet. */
+    opened: boolean;
+    /** Sets the height of the bottom sheet (any CSS height value: auto, 50%, 400px, etc.) */
+    height: string;
+    /** Allow drag handle interaction to close the bottom sheet. */
+    hideDragHandle: boolean;
+    /** Emits event when bottom-sheet is opened */
+    bottomsheetOpened: EventEmitter<void>;
+    /** Emits event when bottom-sheet is closed */
+    bottomsheetClosed: EventEmitter<void>;
+    el: HTMLElement;
+    private dragStartY;
+    private isDragging;
+    private dragThreshold;
+    emitValue(): void;
+    /** Listen for Escape key to close the bottom sheet */
+    handleKeyDown(event: KeyboardEvent): void;
+    /**
+     * Trigger open the bottomsheet
+     * @returns Promise that resolves when the bottomsheet is opened
+     */
+    open(): Promise<void>;
+    /**
+     * Trigger closes the bottomsheet
+     * @returns Promise that resolves when the bottomsheet is closed
+     */
+    close(): Promise<void>;
+    /**
+     * Handle drag interactions to close the bottom sheet.
+     */
+    private handleDragStart;
+    private handleDragMove;
+    private handleDragEnd;
+    private getClientY;
+    /**
+     * Get the style for the container based on the height prop
+     * If the height is a percentage, it converts it to viewport height.
+     */
+    private getContainerStyle;
+    private renderBackdrop;
+    private renderDragHandle;
+    render(): HTMLStencilElement;
+}

package/dist/types/components/sheet/vds-sheet.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 RichContent: any;
+export declare const CustomUsage: any;

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

@@ -0,0 +1,31 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+export declare class VdsSidenavItem {
+    /** Puts the navItem in disabled state */
+    disabled: boolean;
+    /** When true expands the nav item to show both text and icon. When false, only shows the icon */
+    expanded: boolean;
+    /** Define the icon value */
+    icon: string;
+    /** Define item as active when is true */
+    isActive: boolean;
+    /** Toggles static mode in nav-item */
+    isStatic: boolean;
+    /** Shows arrow when there are children */
+    hasChildren: boolean;
+    /** Defines the element as a link */
+    link_href: string;
+    /** Sets the target value */
+    link_target: '_self' | '_blank' | '_parent' | '_top';
+    /** Sets the link rel value */
+    link_rel: string;
+    /** Define text value */
+    value: string;
+    /** Emits event when item gets clicked */
+    clicked: EventEmitter<MouseEvent>;
+    private handleClick;
+    private generateRightSlot;
+    private generateChildrenIcon;
+    private generateInformativeIcon;
+    render(): HTMLStencilElement;
+}

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

@@ -0,0 +1,15 @@
+declare const _default: {
+    title: string;
+    parameters: {
+        docs: {
+            toc: boolean;
+        };
+    };
+};
+export default _default;
+export declare const ExpandableUsage: any;
+export declare const ExpandableWithChildrenUsage: any;
+export declare const StaticUsage: any;
+export declare const ExpandableAsLinkUsage: any;
+export declare const ExpandableWithRightSlotUsage: any;
+export declare const CustomWidthUsage: any;

package/dist/types/components/sidenav-item-app/vds-sidenav-item-app.d.ts

@@ -0,0 +1,18 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+export declare class VdsSidenavItemApp {
+    /** Define text value */
+    value: string;
+    /** Shows arrow when there are children */
+    menuIcon: boolean;
+    /** When true expands the nav item to show both text and icon. When false, only shows the icon */
+    expanded: boolean;
+    /** Puts the navItem in active state */
+    isActive: boolean;
+    /** Emits event when item gets clicked */
+    clicked: EventEmitter<MouseEvent>;
+    /** Emits event when the user clicks on menu icon*/
+    viewMoreClick: EventEmitter<MouseEvent>;
+    private getExpandedSidenavItemApp;
+    render(): HTMLStencilElement;
+}

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

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

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

@@ -0,0 +1,24 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+export declare class VdsSidenavItemButton {
+    /** Puts the navItem in disabled state */
+    disabled: boolean;
+    /** When true expands the nav item to show both text and icon. When false, only shows the icon */
+    expanded: boolean;
+    /** Define the icon value */
+    icon: string;
+    /** Toggles static mode in nav-item */
+    isStatic: boolean;
+    /** Define text value */
+    value: string;
+    /** Define aria label value */
+    setAriaLabel: string;
+    /** Define variant */
+    variant: "primary" | "secondary";
+    /** Emits event when item gets clicked */
+    clicked: EventEmitter<MouseEvent>;
+    private handleClick;
+    private generateInformativeIcon;
+    private generateLabel;
+    render(): HTMLStencilElement;
+}

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

@@ -0,0 +1,20 @@
+declare const _default: {
+    title: string;
+    parameters: {
+        docs: {
+            toc: boolean;
+        };
+    };
+    argTypes: {
+        variant: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const ExpandableUsage: any;
+export declare const StaticUsage: any;
+export declare const CustomWidthUsage: any;

package/dist/types/components/sidenav-item-category/vds-sidenav-item-category.d.ts

@@ -0,0 +1,24 @@
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+import { GroupHeaderSize } from '../base-group-header/base-group-header';
+export declare class VdsSidenavItemCategory {
+    hostEl: HTMLElement;
+    /**
+     * Define text value. This component has the possibility of adding an element to the right of this value
+     * using the slot called "action-slot". The display condition is when a value is defined in the value property,
+     * the expanded property is equal to true, and the isStatic property is equal to false.
+     */
+    value: string;
+    /** When true expands the nav item to show both text and icon. When false, only shows the icon */
+    expanded: boolean;
+    /** Toggles static mode in nav-item */
+    isStatic: boolean;
+    /** Size of the group header when expanded */
+    size: GroupHeaderSize;
+    private getCollapsedView;
+    private getStaticView;
+    private getExpandedView;
+    private setView;
+    private setSlot;
+    componentDidRender(): void;
+    render(): HTMLStencilElement;
+}

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

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

package/dist/types/components/sidenav-item-input/vds-sidenav-item-input.d.ts

@@ -0,0 +1,92 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+export declare class VdsSidenavItemInput {
+    /** When true expands the nav item to show both text and icon. When false, only shows the icon */
+    expanded: boolean;
+    /** Sets the input's value. */
+    value: string;
+    /** Sets the input's placeholder. */
+    placeholder: string;
+    /** Sets the input in disabled state. */
+    disabled: boolean;
+    /** Sets the input in readonly state. */
+    isReadonly: boolean;
+    /** Sets the input in error state. */
+    error: boolean;
+    /** Allows user to define a information icon inside the input at its left . */
+    informativeIcon: string;
+    /** Allows user to define a search icon inside the input at its right (zoom by default) . */
+    actionIcon: string;
+    /** Sets character formatting for user input. Useful for adding a mask to the input. */
+    formatter?: Function;
+    /** Emits an event when the user change the value */
+    changeInput: EventEmitter<string>;
+    /** Emits an event when the user clicks on input's icon */
+    iconClick: EventEmitter<MouseEvent>;
+    /** Emits an event when the user clicks on icon when expanded is false */
+    collapseIconClick: EventEmitter<MouseEvent>;
+    hostEl: HTMLElement;
+    internals: ElementInternals;
+    inputIcon: string;
+    private inputEl;
+    componentDidLoad(): void;
+    setFormValue(): void;
+    /**
+       * Sets focus on the vds-input element.
+       *
+       * @returns Promise<void>
+       */
+    setFocus(): Promise<void>;
+    /**
+       * Gets value prop from the vds-input element.
+       *
+       * @returns Promise<string>
+       */
+    getValue(): Promise<string>;
+    /**
+       * Clears value prop from the vds-input element.
+       *
+       * @returns Promise<void>
+       */
+    clear(): Promise<void>;
+    /**
+       * Handles change input event from vds-basic-input
+     * Emits changeInput event.
+     * Sets icon to close when value is not blank otherwise zoom.
+       *
+     * @params evt - VdsBasicInputCustomEvent
+       * @returns void
+       */
+    private handleChangeInput;
+    /**
+       * Handles click event from vds-icon-button inside the input.
+     * Emits iconClick event.
+     * When inputIcon equals close, vds-basic-input gets clear.
+     * When inputIcon equals zoom, vds-basic-input gets focus.
+       *
+     * @params evt - MouseEvent
+       * @returns void
+       */
+    private handleIconClick;
+    /**
+       * Handles click event from vds-icon-button when expanded is false
+     * Emits collapseIconClick event.
+       *
+     * @params evt - MouseEvent
+       * @returns void
+       */
+    private handleCollapseIconClick;
+    /**
+       * Renders input when expanded is to set true.
+       *
+       * @returns HTMLStencilElement
+       */
+    private renderInput;
+    /**
+       * Renders sidenav-item icon when expanded is to set false.
+       *
+       * @returns HTMLStencilElement
+       */
+    private renderIcon;
+    render(): HTMLStencilElement;
+}

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

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

package/dist/types/components/skeleton-loading/vds-skeleton-loading.d.ts

@@ -0,0 +1,11 @@
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+export declare class VdsSkeletonLoading {
+    /** Define the skeleton shape variant */
+    variant: "rectangular" | "circular";
+    /** Define the skeleton width value */
+    width: string;
+    /** Define the skeleton height value */
+    height: string;
+    private getStyles;
+    render(): HTMLStencilElement;
+}

package/dist/types/components/skeleton-loading/vds-skeleton-loading.stories.d.ts

@@ -0,0 +1,23 @@
+declare const _default: {
+    title: string;
+    parameters: {
+        docs: {
+            toc: boolean;
+        };
+    };
+    argTypes: {
+        variant: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const BasicUsage: any;
+export declare const Rectangular: any;
+export declare const Circular: any;
+export declare const Avatar: any;
+export declare const CardWithText: any;
+export declare const CardForm: any;

package/dist/types/components/slider-continuous/vds-basic-slider-continuous.d.ts

@@ -0,0 +1,148 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class VdsBasicSliderContinuous {
+    /** Sets the value of the slider..*/
+    value: number;
+    /** Sets the size of the slider. */
+    size: "medium" | "large";
+    /** Sets the slider’s orientation. */
+    orientation: "horizontal" | "vertical";
+    /** Sets the slider on disabled state. */
+    disabled: boolean;
+    /** Sets the min value of the slider (Min value should always be lower than the max value). */
+    minValue: number;
+    /** Sets the max value of the slider..*/
+    maxValue: number;
+    /** Sets the amount of advance of the slider. */
+    step: number;
+    /** Sets the aria label in slider */
+    setAriaLabel: string;
+    /** Toggles the value over the thumb in the slider
+    * on - Always shows value over the thumb.
+    * off - Do not show the value over the thumb.
+    * auto - Shows value over the thumb when mouse hover.
+    */
+    displayLabel: "on" | "off" | "auto";
+    /** Toggles the limit value (min and max) of the slider .*/
+    displayLimits: boolean;
+    /** Sets colors of the slider.
+     * Track - ThemeColors
+     * TrackFill - ThemeColors
+     * Thumb - ThemeColors
+     * Background - ThemeColors - When specified, trackfill and track won't work. It will only be one background display.
+     */
+    colors: {
+        [key: string]: string;
+    } | string;
+    /** Sets the thumb icon */
+    icon: string;
+    /**  Emits updated input value */
+    changeInput: EventEmitter<number>;
+    host: HTMLElement;
+    internals: ElementInternals;
+    displayLabelShowValue: boolean;
+    componentWillRender(): void;
+    componentDidRender(): void;
+    componentDidLoad(): void;
+    /**
+     * Sets the slider value to the specified value.
+     *
+     * @param {number} value - The new value for the slider.
+     * @returns {Promise<void>} A promise that resolves when the value is set.
+     */
+    setValue(value: number): Promise<void>;
+    /**
+     * Clears the slider value by setting it to the minimum value.
+     *
+     * @returns {Promise<void>} A promise that resolves when the value is cleared.
+     */
+    clear(): Promise<void>;
+    /**
+     * Sets slider value, shownValue and internals value for forms.
+     * Calculates the thumb position based on the value.
+     * Sets the track fill percentage.
+     *
+     * @returns {void}
+     */
+    setInputValue(): void;
+    /**
+     * Updates the thumb position and forces a component update on window resize.
+     *
+     * @private
+     * @ListensTo("resize", {target: "window"})
+     */
+    updateThumbAndTrackPosition(): void;
+    private inputRangeEl;
+    private trackContainerEl;
+    private shownValue;
+    private thumbPosition;
+    private customBackground;
+    /**
+     * Sets the initial value of the slider to the minimum value if no value is provided.
+     * When value is provided, shownValue gets set.
+     *
+     * @private
+     */
+    private setDefaultValues;
+    /**
+     * Sets the values of the slider to the minimum and maximum value when start and end value are out of bound.
+     *
+     * @private
+     */
+    private setOutboundValues;
+    /**
+     * This is necessary to avoid converting thumbPosition into a State variable. When Thumb is State, it will render the component twice on every value change.
+     * When it has value on the first load, the component need to be re-render (forceUpdate) since
+     * we need the width of the slider which is only available after the component finish the first render
+     *
+     * @private
+     * @returns {void}
+     */
+    private setThumbPositionOnFirstLoad;
+    /**
+     * Sets the value of the slider to the specified in the event.
+     *
+     * @private
+     * @param {InputEvent} evt - The event emitted by the input.
+     * @returns {void}
+     */
+    private handleInputChange;
+    /**
+     * Sets the displayLabelShowValue to true when the mouse enters or focus the slider.
+     *
+     * @private
+     * @returns {void}
+     */
+    private handleInputMouseoverOrFocus;
+    /**
+     * Sets the displayLabelShowValue to false when the mouse leaves or blur the slider.
+     *
+     * @private
+     * @returns {void}
+     */
+    private handleInputMouseleaveOrBlur;
+    private getShowValue;
+    /**
+     * Calculates the CSS left position of the slider thumb based on the current value.
+     *
+     * @private
+     * @returns {string} The calculated left position of the slider thumb as a CSS pixel value.
+     */
+    private getValuePosition;
+    /**
+     * Sets the custom colors for the slider based on the colors property.
+     * This colors have to be css variables by preferences that work in both dark and light mode.
+     *
+     * Track - ThemeColors
+     * TrackFill - ThemeColors
+     * Thumb - ThemeColors
+     * Background - ThemeColors - When specified, trackfill and track won't work. It will only be one background display.
+     *
+     * @private
+     * @returns { [key: string]: string }
+     */
+    private setColors;
+    private renderValueReferences;
+    private renderShownValue;
+    private renderSlider;
+    render(): any;
+}

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

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