wabtec-internal-volt-basic-components 1.0.0

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

@@ -0,0 +1,203 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class VdsBasicSliderRangeContinuous {
+    /** Sets the start value of the slider.*/
+    startValue: number;
+    /** Sets the start value of the slider.*/
+    endValue: 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 */
+    changeRangeValue: EventEmitter<{
+        startValue: number;
+        endValue: number;
+    }>;
+    host: HTMLElement;
+    displayLabelShowValue: boolean;
+    startInputRangeEl: HTMLInputElement;
+    endInputRangeEl: HTMLInputElement;
+    startShownValue: string;
+    endShownValue: string;
+    startThumbPosition: string;
+    endThumbPosition: string;
+    trackRangeFillContainerEl: HTMLDivElement;
+    trackContentContainerEl: HTMLDivElement;
+    displayLabelStartEventTriggerIn: "mouseover" | "focus";
+    displayLabelEndEventTriggerIn: "mouseover" | "focus";
+    hasFocus: boolean;
+    componentWillRender(): void;
+    componentDidRender(): void;
+    componentDidLoad(): void;
+    /**
+     * Sets the slider startValue and endValue to the specified value.
+     *
+     * @param { startValue: number; endValue: number } values - The new values for the slider.
+     * @returns {Promise<void>} A promise that resolves when the value is set.
+     */
+    setValues({ startValue, endValue }: {
+        startValue: number;
+        endValue: number;
+    }): Promise<void>;
+    /**
+     * Gets the slider startValue and endValue.
+     *
+     * @returns {Promise<{ startValue: number; endValue: number }>} A promise that resolves the values.
+     */
+    getValues(): Promise<{
+        startValue: number;
+        endValue: number;
+    }>;
+    /**
+     * Clears the slider range values by setting it to the minimum and maximun value respectively.
+     *
+     * @returns {Promise<void>} A promise that resolves when the value is cleared.
+     */
+    clear(): Promise<void>;
+    /**
+     * Focus the slider range by focusing start slider.
+     *
+     * @returns {Promise<void>} A promise that resolves when the first slider is focused.
+     */
+    setFocus(): Promise<void>;
+    /**
+     * Sets slider startThumbPosition, startShownValue.
+     * Calculates the start thumb position based on the value.
+     * Emits changeRangeValue event
+     *
+     * @returns {void}
+     */
+    setInputStartValue(): void;
+    /**
+     * Sets slider endThumbPosition, endShownValue.
+     * Calculates the end thumb position based on the value.
+     * Emits changeRangeValue event
+     *
+     * @returns {void}
+     */
+    setInputEndValue(): void;
+    /**
+     * Updates the thumb position and forces a component update on window resize.
+     *
+     * @ListensTo("resize", {target: "window"})
+     */
+    updateThumbAndTrackPosition(): void;
+    /**
+     * Focus the first slider when displayLabel is set to auto.
+     *
+     * @ListensTo("focus")
+     */
+    setFocusOnDisplayLabelAuto(): void;
+    /**
+     * Sets the initial value of the slider to the minimum and maximum value when start and end value are not provided.
+     * When values are provided, shownValues get 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;
+    /**
+     * Calculates the CSS left position of the slider thumb based on the current value.
+     *
+     * @private
+     * @params value - number
+     * @params inputRangeEl - HTMLInputElement
+     * @returns {string} The calculated left position of the slider thumb as a CSS pixel value.
+     */
+    private getValuePosition;
+    /**
+     * Sets the start/end value of the slider range to the specified in the event.
+     *
+     * @private
+     * @param {InputEvent} evt - The event emitted by the input.
+     * @param {SliderRangeValueType} rangeType - start | end slider.
+     * @returns {void}
+     */
+    private handleInputRangeChange;
+    /**
+     * Handles mouseover or focus events on the slider.
+     * Sets the `displayLabelShowValue` flag to `true` to indicate that the display label should show the value.
+     *
+     * @private
+     * @param {SliderRangeValueType} rangeType - The type of range (either "start" or "end").
+     * @param {"mouseover" | "focus"} eventTrigger - The type of event that triggered this function.
+     * @returns {void}
+     */
+    private handleInputMouseoverOrFocus;
+    /**
+     * Handles mouseleave or blur events on the slider.
+     * Sets the `displayLabelShowValue` flag to `false` to hide the value in the display label.
+     *
+     * @private
+     * @param {SliderRangeValueType} rangeType - The type of range (either "start" or "end").
+     * @returns {void}
+     */
+    private handleInputMouseleaveOrBlur;
+    /**
+     * Handles click events on the slider track.
+     * Calculates the corresponding value based on the click position and updates the slider's start or end value accordingly.
+     *
+     * @private
+     * @param {MouseEvent} evt - The mouse event object.
+     * @returns {void}
+     */
+    private handleTrackClick;
+    /**
+     * Determines whether the value should be displayed in the label based on the current displayLabel setting.
+     *
+     * @private
+     * @returns {boolean} - True if the value should be displayed, false otherwise.
+     */
+    private getShowValue;
+    /**
+     * 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 renderShownValue;
+    private renderValueReferences;
+    private renderSliders;
+    render(): any;
+}

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

@@ -0,0 +1,42 @@
+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;

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

@@ -0,0 +1,68 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class VdsSwitch {
+    /** Sets the text to be shown in the switch */
+    labelValue: string;
+    /** Sets the switch in checked state */
+    checked: boolean;
+    /** Sets the switch in disabled state */
+    disabled: boolean;
+    /** Sets the switch'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;
+    /** Aligns the label in relation to the switch*/
+    labelAlignment: "start" | "end";
+    hostEl: HTMLElement;
+    internals: ElementInternals;
+    /** Makes a custom change to target property using checked (use for React components) */
+    check: EventEmitter<boolean>;
+    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 switch is being click.
+     * Executes toggleCheck method.
+     *
+     * @param event - MouseEvent
+     * @returns void
+     */
+    handleClick(_: MouseEvent): void;
+    /**
+    * Toggles switch value.
+    * Emits check event with checked value.
+    *
+    * @returns Promise<void>
+    */
+    toggleCheck(): Promise<void>;
+    /**
+     * Determine state of the switch based on the checked property.
+     * When checked is true, state is checked.
+     * When checked is false, state is unchecked.
+     *
+     * @returns void
+     */
+    private setSwitchState;
+    /**
+     * Returns the icon prop based on the state and calculate the size.
+     *
+     * @returns HTMLStencilElement
+     */
+    private renderSwitch;
+    /**
+    * Returns the vds-label for the switch when there is a label provided.
+    *
+    * @returns HTMLStencilElement
+    */
+    private renderLabel;
+    render(): any;
+}

package/dist/types/components/switch/vds-switch.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/tab/vds-tab.d.ts

@@ -0,0 +1,54 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class VdsTab {
+    hostEl: HTMLElement;
+    /** Sets tab title. The value of this property is used by default as an aria-label too. */
+    value: string;
+    /**
+     * @deprecated This property is now being overridden by the VdsTabsGroup,
+     * the activeTabIndex property is the new preferred way of setting the default tab.
+     * Sets tab to active state.
+     */
+    isActive: boolean;
+    /** Sets tab to disable state */
+    disabled: boolean;
+    /**
+     * @deprecated This property is being replaced by informativeIcon.
+     * Sets tab icon. The tab icon is only a visual representation.
+     */
+    icon?: string;
+    /** Sets tab icon. The tab icon is only a visual representation. */
+    informativeIcon?: string;
+    /** Sets tab fixed width. This property can't be used at the same time with the property maxWidth */
+    width: string;
+    /** Sets tab maxWidth. This property can't be used at the same time with the property width */
+    maxWidth: string;
+    /** Sets tab type. Default shows Icon+Label. Icon shows only the Icon. withAction shows the Icon+Label+ActionIconButton. Custom permits define content in a slot. */
+    type: 'default' | 'icon' | 'withAction' | 'text' | 'custom';
+    /** Sets tab action icon button. Only available selecting withAction type. */
+    actionIcon: string;
+    /** Sets tab action icon button aria-label*/
+    actionAriaLabel: string;
+    /** Set aria-label for the tab. This property will be used only if the aria-label is required to be different from the value property. */
+    setAriaLabel: string;
+    /** Emits event when the tab is selected (sets isActive prop to true) */
+    isSelected: EventEmitter<MouseEvent>;
+    /** Emits event when the action icon button is clicked */
+    clicked: EventEmitter<MouseEvent>;
+    /** Emits event when the value is changed */
+    valueChanged: EventEmitter<string>;
+    handleKeyDown(event: KeyboardEvent): void;
+    handleValueChange(): void;
+    private generateIcon;
+    private generateActionIconButton;
+    private generateLabel;
+    private generateTypeDefault;
+    private generateTypeIcon;
+    private generateTypeWithAction;
+    private generateTypeCustom;
+    private generateTypeText;
+    private getType;
+    private handleClick;
+    private handleActionIconClick;
+    private setStyle;
+    render(): any;
+}

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

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

package/dist/types/components/tabs-group/vds-tabs-group.d.ts

@@ -0,0 +1,53 @@
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+export declare class VdsTabsGroup {
+    hostEl: HTMLElement;
+    /** Sets the type for the tabs group */
+    type: 'default' | 'icon' | 'withAction' | 'text' | 'custom';
+    /** Sets the width for the tabs */
+    width?: string;
+    /** Sets the max width for the tabs */
+    maxWidth?: string;
+    /** Sets the alignment for the tabs */
+    tabAlignment: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
+    /** Shows the indicator track under the tab*/
+    showTrack: boolean;
+    /** Sets the index to select the active tab inside the group.
+     * If not specified, loads the first tab.
+     */
+    activeTabIndex: number;
+    /** Sets tab group to disable state */
+    disabled: boolean;
+    internalActiveTabIndex: number;
+    private activeTab;
+    private tabsGroupContainer;
+    private indicatorEl;
+    private tabs;
+    private resizeObserver;
+    handleTabSelection(evt: CustomEvent): void;
+    handleValueChanged(): void;
+    componentWillLoad(): void;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    private observeActiveTabContent;
+    handleActiveTabIndexChange(): void;
+    setDisabledState(): void;
+    /**
+     * Gets the currently active tab index
+     *
+     * @returns {Promise<number>} A promise that resolves with the active tab index.
+     */
+    getActive(): Promise<number>;
+    /**
+     * Sets the active tab index
+     *
+     * @param {number} index - The index of the tab to set as active.
+     */
+    setActive(index: number): Promise<void>;
+    private setActiveTab;
+    private validateTabIndex;
+    private defineAttributes;
+    private updateIndicatorPosition;
+    private renderActiveTabIndicator;
+    private updateTabsState;
+    render(): HTMLStencilElement;
+}

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

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

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

@@ -0,0 +1,101 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+export declare class VdsBasicTextarea {
+    /** Sets the textarea's size. */
+    size: "small" | "medium" | "large";
+    /** Sets the textarea's value. */
+    value: string;
+    /** Sets the textarea's placeholder. */
+    placeholder: string;
+    /** Sets the textarea in disabled state. */
+    disabled: boolean;
+    /** Sets the textarea in readonly state. */
+    isReadonly: boolean;
+    /** Sets the textarea in error state. */
+    error: boolean;
+    /** Toggles the required sign in the field */
+    isRequired: boolean;
+    /** Sets character formatting for user inputs. Useful for adding a mask to the textarea. */
+    formatter: Function;
+    /** Sets custom allowed styles to textarea (text-align, text-transform, unicode-bidi, direction) */
+    allowedStyles: {
+        [key: string]: string;
+    }[];
+    /** Sets the width of the textarea. */
+    width: string;
+    /** Sets the height of the textarea. This prop not works combining with autogrow=true. */
+    height: string;
+    /** Sets the min-height for the textarea. This property works combining with autogrow=true only.
+     * - Default for medium: '4.5rem'
+     * - Default for large: '6rem'
+     *
+     * This value is automatically adjusted according to the 'size' property.
+     * @default '4.5rem' (when size is 'medium')
+    */
+    minHeight: string;
+    /** Sets the max-height for the textarea. This property works combining with autogrow=true only.
+     * - Default for medium: '12.15rem'
+     * - Default for large: '18rem'
+     *
+     * This value is automatically adjusted according to the 'size' property.
+     * @default '12.15rem' (when size is 'medium')
+    */
+    maxHeight: string;
+    /** Makes the textarea grows with its content. This property works combining with maxHeight and minHeight. This prop not works combining with property height defined. */
+    autogrow: boolean;
+    hostEl: HTMLVdsBasicTextareaElement;
+    /**  Emits updated textarea value */
+    changeInput: EventEmitter<string>;
+    internals: ElementInternals;
+    private textareaContainerRef;
+    private textAreaEl;
+    componentDidLoad(): void;
+    setFormValue(): void;
+    /**
+     * Toggle class vds__textarea__container--focus in focus/blur textarea's event
+     *
+     * @returns void
+     */
+    private toggleFocusClass;
+    /**
+     * Sets value from textarea's event target.
+     * Emits change, input and changeInput events.
+     * Sets textarea as dirty when textarea's event is triggered.
+     * Executes formatter prop function on every inputed value.
+     *
+     * @returns void
+     */
+    private handleInput;
+    /**
+     * Sets textarea inline styles for the allowedStyle, height and width
+     * [direction, text-align, textAlign, text-transform, textTransform, unicode-bidi, unicodeBidi]
+     *
+     * @returns { [key: string]: string }
+     */
+    private setTextareaStyles;
+    /**
+     * Sets textarea inline styles for the height and width
+     *
+     * @returns { [key: string]: string }
+     */
+    private setSizesStyles;
+    /**
+       * Executes method when vds-textarea gets focus.
+       *
+       * @returns void
+       */
+    handleFocus(): void;
+    /**
+       * Sets focus on the vds-textarea element.
+       *
+       * @returns Promise<void>
+       */
+    setFocus(): Promise<void>;
+    /**
+       * Gets value prop from the vds-textarea element.
+       *
+       * @returns Promise<string>
+       */
+    getValue(): Promise<string>;
+    render(): HTMLStencilElement;
+}

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

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

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

@@ -0,0 +1,44 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+export declare class VdsTooltip {
+    hostEl: HTMLElement;
+    /** standard type receives the text in the "text" property, "custom" is an slot to include any html element inside the tooltip, "manual" allow open and close the tooltip only with the public methods  */
+    type: "standard" | "custom" | "manual";
+    /** Sets the tooltip text, does not apply for custom tooltip */
+    text?: string;
+    /** Defines the position where the tooltip will be opened */
+    position: 'top' | 'bottom' | 'right' | 'left';
+    /** Sets the maximum width of the tooltip's content */
+    maxWidth: string;
+    /** The type of event that will trigger the tooltip */
+    event: 'hover' | 'click';
+    /** 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 tooltip gets opens */
+    opened: EventEmitter<void>;
+    /** Emits event when tooltip gets closes */
+    closed: EventEmitter<void>;
+    floatingCleanup: () => void;
+    emitValue(): Promise<void>;
+    private handleClickOut;
+    private handleClick;
+    open(): Promise<void>;
+    close(): Promise<void>;
+    /**
+     *  Gets the target that will manage the tooltip
+     *  returns a promise with the target HTMLElement.
+     */
+    getTarget(): Promise<HTMLElement | null>;
+    private handleHover;
+    private handleHoverOut;
+    private setMaxWidth;
+    private actionElementRef;
+    private arrowElementRef;
+    private tooltipElementRef;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    render(): HTMLStencilElement;
+}