wabtec-internal-volt-basic-components 1.0.0

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

@@ -0,0 +1,32 @@
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+export declare class VdsFooter {
+    /**
+     *  Sets the type for the footer, expandable shows an extra layer of the footer.
+     *  Default is only what is visible.
+     *  and custom allows to set the content of the footer.
+     */
+    type: 'default' | 'expandable' | 'custom';
+    /** Sets the app version to be display in the footer */
+    appVersion: string;
+    /** Sets the expanded content position, default is bottom */
+    expandedContentPosition: 'top' | 'bottom';
+    /** Defines the text in the central block of the footer */
+    centralText: string;
+    /** Modify the text in the "powered by" section of the footer */
+    poweredByText: string;
+    host: HTMLStencilElement;
+    isExpanded: boolean;
+    private currentYear;
+    private observer;
+    componentWillRender(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private setFooterOptions;
+    private setSeparators;
+    private setCurrentYear;
+    private toggleExpand;
+    private renderExpandableButton;
+    private renderCustomFooter;
+    render(): HTMLStencilElement;
+}

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

@@ -0,0 +1,11 @@
+declare const _default: {
+    title: string;
+    parameters: {
+        docs: {
+            toc: boolean;
+        };
+    };
+};
+export default _default;
+export declare const BasicUsage: any;
+export declare const CustomUsage: any;

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

@@ -0,0 +1 @@
+export declare const popoverCaretFilledLarge = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iNiIgdmlld0JveD0iMCAwIDEyIDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wIDBMNiA2TDEyIDBIMFoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=";

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

@@ -0,0 +1,21 @@
+export declare class VdsHeader {
+    /** Defines app name for header */
+    value: string;
+    /** Defines the value in the avatar component */
+    avatar: string;
+    /** Defines the username at the left of the avatar */
+    username: string;
+    /** Allow hide/show User-Section */
+    showUserSection: boolean;
+    hostEl: HTMLElement;
+    popupOpened: boolean;
+    handleClickOut(evt: any): void;
+    private actionElementRef;
+    private arrowElementRef;
+    private floatingMenuElementRef;
+    private floatingCleanUp;
+    componentDidLoad(): void;
+    private handleClick;
+    handlePopupOpened(): Promise<void>;
+    render(): any;
+}

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

@@ -0,0 +1,11 @@
+declare const _default: {
+    title: string;
+    parameters: {
+        docs: {
+            toc: boolean;
+        };
+    };
+};
+export default _default;
+export declare const BasicUsage: any;
+export declare const WithAvatarImageUsage: any;

package/dist/types/components/icon/utils/icons-list.d.ts

@@ -0,0 +1 @@
+export declare const iconsList: string[];

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

@@ -0,0 +1,24 @@
+import { HostElement } from '../../stencil-public-runtime';
+import { Colors, IconColors } from '../../definitions/colors';
+export declare class VdsIcon {
+    /** Set svg icon name to display */
+    svgIcon: string;
+    /** Set icon size in px or rem, IE: 1.25rem */
+    size: string;
+    /** Set icon color based in volt palette */
+    color: IconColors | Colors;
+    /** Set alt text for accesibility */
+    alt: string;
+    host: HTMLDivElement;
+    private svgContent;
+    componentWillLoad(): Promise<void>;
+    private isSvgString;
+    private isValidUrl;
+    private isInternalIcon;
+    private isValidSvgUrl;
+    private setSvgContent;
+    private fetchSvgContent;
+    private getSize;
+    private getSvgContent;
+    render(): HostElement;
+}

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

@@ -0,0 +1,48 @@
+declare const _default: {
+    title: string;
+    parameters: {
+        docs: {
+            toc: boolean;
+        };
+    };
+    argTypes: {
+        color: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        svgIcon: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        size: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const BasicUsage: any;
+export declare const BasicUsageWithSvgVariable: any;
+export declare const BasicUsageWithSvgURL: any;
+export declare const BasicUsageWithImgURL: any;
+export declare const navigationIcons: any;
+export declare const filesIcons: any;
+export declare const statusIcons: any;
+export declare const deviceIcons: any;
+export declare const userIcons: any;
+export declare const actionIcons: any;
+export declare const controlIcons: any;
+export declare const timeIcons: any;
+export declare const toolIcons: any;
+export declare const transportIcons: any;
+export declare const toggleIcons: any;
+export declare const dataIcons: any;
+export declare const inventoryIcons: any;
+export declare const brandIcons: any;
+export declare const IconList: any;

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

@@ -0,0 +1,17 @@
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+export declare class VdsIconButton {
+    /** Set icon button's size */
+    size: "large" | "medium" | "small" | "extra-small";
+    /** Set icon button's variant */
+    variant: "primary" | "secondary" | "tertiary";
+    /** Enable icon button's disable state */
+    disabled: boolean;
+    /** Sets the icon inside icon button */
+    icon: string;
+    /** Sets the button icon arial-label */
+    setAriaLabel: string;
+    hostEl: HTMLVdsButtonElement;
+    handleSubmit(): void;
+    private submitForm;
+    render(): HTMLStencilElement;
+}

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

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

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

@@ -0,0 +1,6 @@
+export declare const ICON_SIZE: {
+    "extra-small": string;
+    small: string;
+    medium: string;
+    large: string;
+};

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

@@ -0,0 +1,96 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { VdsInputType } from './vds-basic-input.utils';
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+export declare class VdsBasicInput {
+    /** Sets the input size. */
+    size: "small" | "medium" | "large";
+    /** Sets input type in the DOM. Check HTML 5 Input type. */
+    type: VdsInputType;
+    /** Sets the input value. */
+    value: string;
+    /** Sets the input 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;
+    /** Toggles the required sign in the field */
+    isRequired: boolean;
+    /** Allows user to define a information icon inside the input at its left . */
+    informativeIcon: string;
+    /** Sets character formatting for user input. Useful for adding a mask to the input. */
+    formatter?: Function;
+    /** Sets custom allowed styles to input (text-align, text-transform, unicode-bidi, direction) */
+    allowedStyles: {
+        [key: string]: string;
+    }[];
+    hostEl: HTMLInputElement;
+    /**  Emits updated input value */
+    changeInput: EventEmitter<string>;
+    internals: ElementInternals;
+    private inputContainerRef;
+    private inputEl;
+    componentDidLoad(): void;
+    setFormValue(): void;
+    /**
+     * Displays vds-icon when icon string is valid
+     *
+     * @returns HTMLStencilElement
+     */
+    private getInputIcon;
+    /**
+     * Toggle class vds__input__container--focus in focus/blur input's event
+     *
+     * @returns void
+     */
+    private toggleFocusClass;
+    /**
+     * Sets input inline styles for the allowedStyles
+     * [direction, text-align, textAlign, text-transform, textTransform, unicode-bidi, unicodeBidi]
+     *
+     * @returns void
+     */
+    private setInputStyles;
+    /**
+     * Sets value from input's event target.
+     * Emits change, input and changeInput events.
+     * Sets input as dirty when input's event is triggered.
+     * Executes formatter prop function on every inputed value.
+     *
+     * @returns void
+     */
+    private handleInput;
+    /**
+       * Executes method when input's keyup event is triggered.
+       *
+       * @returns void
+       */
+    handleEnterKey(event: KeyboardEvent): void;
+    /**
+       * Executes method when vds-input gets focus.
+       *
+       * @returns void
+       */
+    handleFocus(): 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<voiid>
+       */
+    clear(): Promise<void>;
+    render(): HTMLStencilElement;
+}

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

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

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

@@ -0,0 +1,70 @@
+import { IconColors } from "../../definitions/colors";
+export type VdsInputType = "number" | "text" | "date" | "tel" | "datetime" | "datetime-local" | "email" | "submit" | "password" | "month" | "time" | "url" | "week";
+/**
+ * Validates whether an icon is valid or not by comparing with sprite file.
+ *
+ * @param icon string
+ * @returns boolean
+ */
+export declare const isValidIcon: (icon: string) => boolean;
+/**
+ * Toggle class [vds__input__container--focus] in focus/blur input's event
+ *
+ * @param divEl HTMLElement
+ * @returns void
+ */
+export declare const toggleFocusClass: (divEl: HTMLElement, target?: string) => void;
+/**
+ * Add class touched in focus event
+ *
+ * @param input HTMLElement
+ * @returns void
+ */
+export declare const setTouchedClass: (input: HTMLElement) => void;
+/**
+ * Add class touched in input event
+ *
+ * @param input HTMLElement
+ * @returns void
+ */
+export declare const setDirtyClass: (input: HTMLElement) => void;
+/**
+ * Get icon color according to input state.
+ *
+ * @param divEl HTMLElement
+ * @returns IconColors
+ */
+export declare const getIconColor: (inputState: "normal" | "readonly" | "disabled") => IconColors;
+/**
+ * Validates whether the style is valid or not.
+ *
+ * @param input { [key: string]: string }
+ * @returns boolean
+ */
+export declare const isValidInputStyle: (input: {
+    [key: string]: string;
+}) => boolean;
+/**
+ * Sets input styles so they can be pass to JSX.style property
+ *
+ * @param input { [key: string]: string }
+ * @returns { [key: string]: string }
+ */
+export declare const setInputStyles: (allowedStyles: {
+    [key: string]: string;
+}[]) => {
+    [key: string]: string;
+};
+/**
+ * Executes Formatter Function in order to mask value inside input.
+ *
+ * @param formatter Function
+ * @param input string
+ * @param currentValue string
+ * @param eventData string
+ * @param element HTMLInputElement | HTMLTextAreaElement
+ * @param fullEvent InputEvent
+ *
+ * @returns string
+ */
+export declare const maskInput: (formatter: Function, input: string, currentValue: string, eventData: string, element?: HTMLInputElement | HTMLTextAreaElement, fullEvent?: InputEvent) => string;

package/dist/types/components/key-value-pair/vds-key-value-pair.d.ts

@@ -0,0 +1,15 @@
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+import { Typography } from '../../definitions/typography';
+export declare class VdsKeyValuePair {
+    /** Set the position for the label */
+    labelPosition: 'top' | 'bottom';
+    /** Set the label value */
+    label: string;
+    /** Set the size of the label */
+    labelSize: Typography;
+    /** Define the value content */
+    value: string;
+    /** Define the text value size based on the vds font mixing */
+    valueSize: Typography;
+    render(): HTMLStencilElement;
+}

package/dist/types/components/key-value-pair/vds-key-value-pair.stories.d.ts

@@ -0,0 +1,62 @@
+declare const _default: {
+    title: string;
+    parameters: {
+        docs: {
+            toc: boolean;
+        };
+    };
+    argTypes: {
+        labelPosition: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        labelSize: {
+            options: {
+                'title-large': string;
+                'title-medium': string;
+                'title-small': string;
+                'title-extra-small': string;
+                'title-2x-small': string;
+                'headline-large': string;
+                'headline-medium': string;
+                'headline-small': string;
+                'display-large': string;
+                'display-medium': string;
+                'display-small': string;
+                'body-large': string;
+                'body-medium': string;
+                'body-small': string;
+            };
+            control: {
+                type: string;
+            };
+        };
+        valueSize: {
+            options: {
+                'title-large': string;
+                'title-medium': string;
+                'title-small': string;
+                'title-extra-small': string;
+                'title-2x-small': string;
+                'headline-large': string;
+                'headline-medium': string;
+                'headline-small': string;
+                'display-large': string;
+                'display-medium': string;
+                'display-small': string;
+                'body-large': string;
+                'body-medium': string;
+                'body-small': string;
+            };
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const BasicUsage: any;
+export declare const SlotUsage: any;
+export declare const CustomUsage: any;

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

@@ -0,0 +1,16 @@
+import { HTMLStencilElement } from '../../stencil-public-runtime';
+export declare class VdsLabel {
+    /** Sets the size of the label */
+    size: "small" | "large" | "medium";
+    /** Sets label in disabled state */
+    disabled: boolean;
+    /** Sets the label as required element adding * at the end */
+    required: boolean;
+    /** Sets the label text */
+    labelValue: string;
+    /** Displays icon at the end of the text */
+    icon: string;
+    private getRequired;
+    private getIcon;
+    render(): HTMLStencilElement;
+}

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

@@ -0,0 +1,20 @@
+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 Required: any;
+export declare const Disabled: any;

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

@@ -0,0 +1,29 @@
+import { HTMLStencilElement } from "../../stencil-public-runtime";
+export declare class VdsLink {
+    /** Sets the value for the label text */
+    value: string;
+    /** Sets icon position relative to the label text */
+    iconPosition: "right" | "left";
+    /** Enable / Disable underline text decoration */
+    underline: boolean;
+    /** Sets url link for the internal href */
+    url: string;
+    /** Sets href target */
+    target: "_self" | "_blank" | "_parent" | "_top";
+    /** Sets the link rel value */
+    rel: string;
+    /** Set the link size */
+    size: "large" | "medium" | "small" | "extra-small" | "2x-small";
+    /** Sets the informative icon in the vds-link */
+    informativeIcon: string;
+    /** Sets the link variant - footer variant is the same as secondary.
+     * @tobedeprecated footer variant will be deprecated in the future.
+     */
+    variant: "primary" | "secondary" | "footer";
+    /** Sets the informative icon in the vds-link
+     *
+     * @returns HTMLStencilElement
+     */
+    getIcon(): HTMLStencilElement;
+    render(): HTMLStencilElement;
+}

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

@@ -0,0 +1,48 @@
+declare const _default: {
+    title: string;
+    parameters: {
+        docs: {
+            toc: boolean;
+        };
+    };
+    argTypes: {
+        size: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        informativeIcon: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        iconPosition: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        target: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        variant: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        rel: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const BasicUsage: any;
+export declare const BasicIconUsage: any;

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

@@ -0,0 +1,48 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { HTMLStencilElement } from "../../stencil-public-runtime";
+export declare class VdsMenu {
+    hostEl: HTMLElement;
+    /** Defines the position where the menu will be opened */
+    position: "top" | "bottom" | "right" | "left";
+    /** Sets the maximum width of the menu"s content */
+    maxWidth: string;
+    /** Sets the maximum height of the menu"s content */
+    maxHeight: string;
+    /** The type of event that will trigger the popover */
+    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;
+    /** Set backdrop when show the menu */
+    backdrop: boolean;
+    menuOpened: boolean;
+    /** Emits event when menu gets opens */
+    opened: EventEmitter<void>;
+    /** Emits event when menu gets closes */
+    closed: EventEmitter<void>;
+    private actionElementRef;
+    private menuElementRef;
+    private floatingCleanUp;
+    private isSubmenu;
+    emitValue(): Promise<void>;
+    handleClickOut(evt: MouseEvent): void;
+    handleHoverOut(event: Event): void;
+    private closeNestedMenus;
+    handleClick(evt: Event): Promise<void>;
+    handleMenuItemClicked(): void;
+    open(): Promise<void>;
+    close(): Promise<void>;
+    /**
+     *  Gets the target that will manage the menu
+     *  returns a promise with the target HTMLElement.
+     */
+    getTarget(): Promise<HTMLElement | null>;
+    private handleHover;
+    private setMaxWidthAndHeight;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    render(): HTMLStencilElement;
+}