wabtec-internal-volt-basic-components 1.2.0 → 1.4.0

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

@@ -1,90 +1,155 @@
 import { HTMLStencilElement, EventEmitter } from "../../stencil-public-runtime";
 import { Spacing } from "../../definitions/spacing";
+/**
+ * @component vds-dialog
+ * @description A dialog component that displays modal or non-modal content with customizable dimensions, backdrop, and spacing. Supports trigger-based opening and outside-click closing.
+ * @slot dialog-trigger - The element that triggers the dialog when clicked
+ * @slot - The default slot for dialog content
+ */
 export declare class VdsDialog {
-    /** Sets the padding around the dialog */
+    /**
+     * Sets the padding around the dialog
+     * @type {Spacing}
+     * @default "spacing-07"
+     */
     padding: Spacing;
-    /** Toggles the background behind the dialog */
+    /**
+     * Toggles the background behind the dialog
+     * @type {boolean}
+     * @default true
+     */
     backdrop: boolean;
-    /** Sets the width size of the dialog */
+    /**
+     * Sets the width size of the dialog
+     * @type {string}
+     * @default "37.5rem"
+     */
     width: string;
-    /** Sets the minimum width size of the dialog */
+    /**
+     * Sets the minimum width size of the dialog
+     * @type {string}
+     * @default "20rem"
+     */
     minWidth: string;
-    /** Sets the maximum width  size of the dialog */
+    /**
+     * Sets the maximum width size of the dialog
+     * @type {string}
+     * @default "80%"
+     */
     maxWidth: string;
-    /** Avoids user to close dialog by clicking outside */
+    /**
+     * Avoids user to close dialog by clicking outside
+     * @type {boolean}
+     * @default false
+     */
     preventOutsideClose: boolean;
-    /** Emits the event when opens dialog */
+    /**
+     * Emits the event when dialog opens
+     * @event opened
+     * @type {EventEmitter<string>}
+     */
     opened: EventEmitter<string>;
-    /** Emits the event when opens dialog */
+    /**
+     * Emits the event when dialog closes
+     * @event closed
+     * @type {EventEmitter<string>}
+     */
     closed: EventEmitter<string>;
+    /**
+     * Internal state tracking whether the dialog is open
+     * @type {boolean}
+     */
     isOpen: boolean;
+    /**
+     * Reference to the host element
+     * @type {HTMLElement}
+     */
     host: HTMLElement;
+    /**
+     * Reference to the dialog HTML element
+     * @private
+     * @type {HTMLDialogElement}
+     */
     private dialog;
+    /**
+     * Reference to the trigger element
+     * @private
+     * @type {HTMLElement}
+     */
     private trigger;
+    /**
+     * Lifecycle hook that runs after component is loaded
+     * @returns {void}
+     */
     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.
+     * @method
+     * @public
+     * @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.
+     * @method
+     * @public
+     * @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.
+     * @method
+     * @public
+     * @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
+     * Listens for "keydown" events on the children elements, when the Escape key is pressed down
      * it closes the dialog.
-     *
+     * @param {KeyboardEvent} ev - The keyboard event
      * @returns {void}
      */
     handleEscKey(ev: KeyboardEvent): void;
     /**
      * Opens the dialog when the trigger element is clicked
-     *
+     * @private
      * @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.
-     *
+     * the DIALOG element; when clicking on the content it returns the element that was clicked.
+     * @private
+     * @param {Event} evt - The click event
      * @returns {void}
      */
     handleClose(evt: Event): void;
     /**
+     * Creates a styles object based on the component's properties (`width`, `minWidth`, `maxWidth`)
      * @private
-     * Creates a styles object based on the component's properties (`width`, `minWidth`, `maxWidth`).
-     *
-     * @returns {Object} An object containing CSS styles for the component.
+     * @returns {{ [key: string]: string }} 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
+     * @returns {void}
      */
     private setHTMLElementEvents;
+    /**
+     * Renders the dialog component
+     * @returns {HTMLStencilElement} The rendered dialog element
+     */
     render(): HTMLStencilElement;
 }

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

@@ -1,16 +1,36 @@
 import { EventEmitter, HTMLStencilElement } from "../../stencil-public-runtime";
+/**
+ * @component vds-dialog-action-footer
+ * @description A dialog footer component that contains action buttons. Automatically emits close events when elements with the close-dialog attribute are clicked.
+ * @slot - The default slot for footer content (typically action buttons)
+ */
 export declare class VdsDialogActionFooter {
-    /** Emits event when closed button is clicked */
+    /**
+     * Emits event when close button is clicked
+     * @event closeButton
+     * @type {EventEmitter<void>}
+     */
     closeButton: EventEmitter<void>;
+    /**
+     * Reference to the host element
+     * @type {HTMLElement}
+     */
     host: HTMLElement;
+    /**
+     * Lifecycle hook that runs after component is loaded
+     * @returns {void}
+     */
     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`.
-    *
-    */
+     * Sets up event listeners for the dialog children elements which have the close-dialog attribute.
+     * Listens for "click" events on the element and emits `closeButton`.
+     * @private
+     * @returns {void}
+     */
     private setClosebuttonEventEmitterToCloseDialogElements;
+    /**
+     * Renders the dialog action footer component
+     * @returns {HTMLStencilElement} The rendered footer element
+     */
     render(): HTMLStencilElement;
 }

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

@@ -1,4 +1,13 @@
 import { HTMLStencilElement } from '../../stencil-public-runtime';
+/**
+ * @component vds-dialog-body
+ * @description A dialog body component that provides a container for the main content of a dialog. Typically used within vds-dialog-modal to organize dialog content.
+ * @slot - The default slot for dialog body content
+ */
 export declare class VdsDialogBody {
+    /**
+     * Renders the dialog body component
+     * @returns {HTMLStencilElement} The rendered dialog body element
+     */
     render(): HTMLStencilElement;
 }

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

@@ -1,9 +1,26 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { HTMLStencilElement } from '../../stencil-public-runtime';
+/**
+ * @component vds-dialog-header
+ * @description A dialog header component that displays a title with an optional close button. The close button emits an event when clicked to allow parent dialogs to handle closing.
+ * @slot - The default slot for header title content
+ */
 export declare class VdsDialogHeader {
-    /** Toggles show close button in dialog header */
+    /**
+     * Toggles show close button in dialog header
+     * @type {boolean}
+     * @default true
+     */
     showCloseButton: boolean;
-    /** Emits event when closed button is clicked */
+    /**
+     * Emits event when close button is clicked
+     * @event closeButton
+     * @type {EventEmitter<void>}
+     */
     closeButton: EventEmitter<void>;
+    /**
+     * Renders the dialog header component
+     * @returns {HTMLStencilElement} The rendered dialog header element
+     */
     render(): HTMLStencilElement;
 }

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

@@ -1,4 +1,16 @@
 import { HTMLStencilElement } from '../../stencil-public-runtime';
+/**
+ * @component vds-dialog-modal
+ * @description A dialog modal container component that provides structured slots for header, body, and footer content. Used within vds-dialog to organize modal content layout.
+ * @slot header - The header slot for dialog modal header content
+ * @slot - The default slot for dialog modal content
+ * @slot body - The body slot for dialog modal body content
+ * @slot footer - The footer slot for dialog modal footer content
+ */
 export declare class VdsDialogModal {
+    /**
+     * Renders the dialog modal component
+     * @returns {HTMLStencilElement} The rendered dialog modal element
+     */
     render(): HTMLStencilElement;
 }

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

@@ -0,0 +1,135 @@
+/**
+ * @component vds-display
+ * @description Compact status display that renders title, value and description fields and animates content changes.
+ * @example
+ * <vds-display display-title="Safety Standby" value="0" description="Speed mph"></vds-display>
+ * @example
+ * <vds-display display-title="Autonomous" value="48" description="Max Speed"></vds-display>
+ */
+export declare class VdsDisplay {
+    /**
+     * Sets the display title shown on the top side.
+     * @type {string}
+     */
+    displayTitle: string;
+    /**
+     * Sets the display value shown on the left side.
+     * @type {string}
+     * @default "0"
+     */
+    value: string;
+    /**
+     * Sets the display description shown on the right side.
+     * @type {string}
+     */
+    description: string;
+    /**
+     * Incremental key used to retrigger title animation.
+     * @type {number}
+     * @default 0
+     */
+    titleAnimationCycle: number;
+    /**
+     * Incremental key used to retrigger value animation.
+     * @type {number}
+     * @default 0
+     */
+    valueAnimationCycle: number;
+    /**
+     * Incremental key used to retrigger description animation.
+     * @type {number}
+     * @default 0
+     */
+    descriptionAnimationCycle: number;
+    /**
+     * Stores the previous title while the exit animation is running.
+     * @type {string | undefined}
+     */
+    prevTitle: string | undefined;
+    /**
+     * Stores the previous value while the exit animation is running.
+     * @type {string | undefined}
+     */
+    prevValue: string | undefined;
+    /**
+     * Stores the previous description while the exit animation is running.
+     * @type {string | undefined}
+     */
+    prevDescription: string | undefined;
+    /**
+     * Stores active timeout handles per animated part.
+     * @private
+     */
+    private animationTimeouts;
+    /**
+     * Clears pending animation timeouts when the component is disconnected.
+     */
+    disconnectedCallback(): void;
+    /**
+     * Triggers title transition when the displayTitle prop changes.
+     * @param {string} newValue - Updated title.
+     * @param {string | undefined} oldValue - Previous title.
+     */
+    watchDisplayTitle(newValue: string, oldValue: string | undefined): void;
+    /**
+     * Triggers value transition when the value prop changes.
+     * @param {string} newValue - Updated value.
+     * @param {string | undefined} oldValue - Previous value.
+     */
+    watchValue(newValue: string, oldValue: string | undefined): void;
+    /**
+     * Triggers description transition when the description prop changes.
+     * @param {string} newValue - Updated description.
+     * @param {string | undefined} oldValue - Previous description.
+     */
+    watchDescription(newValue: string, oldValue: string | undefined): void;
+    /**
+     * Increments the animation cycle counter for the selected part.
+     * @private
+     * @param {AnimationPart} part - Display section to update.
+     */
+    private incrementAnimationCycle;
+    /**
+     * Saves the previous content for a section while transition runs.
+     * @private
+     * @param {AnimationPart} part - Display section to update.
+     * @param {string | undefined} value - Previous value to store.
+     */
+    private setPreviousValue;
+    /**
+     * Clears an active timeout for the selected section.
+     * @private
+     * @param {AnimationPart} part - Display section timeout to clear.
+     */
+    private clearAnimationTimeout;
+    /**
+     * Starts enter/exit animation bookkeeping for the selected section.
+     * @private
+     * @param {AnimationPart} part - Display section to animate.
+     * @param {string | undefined} previousValue - Previous content to animate out.
+     */
+    private triggerAnimation;
+    /**
+     * Renders the title section and previous title exit node when needed.
+     * @private
+     * @returns The title wrapper when title content exists.
+     */
+    private renderTitle;
+    /**
+     * Renders the value section and previous value exit node when needed.
+     * @private
+     * @returns The value wrapper.
+     */
+    private renderValue;
+    /**
+     * Renders the description section and previous description exit node when needed.
+     * @private
+     * @returns The description wrapper when description content exists.
+     */
+    private renderDescription;
+    /**
+     * Renders the display component.
+     * @returns The rendered display container.
+     */
+    render(): any;
+}

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

@@ -0,0 +1,15 @@
+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 CustomColors: any;

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

@@ -1,15 +1,45 @@
 import { Spacing } from '../../definitions/spacing';
 import { BorderColors, Palettes, StaticGlobal } from '../../definitions/colors';
 import { BorderThickness } from '../../definitions/thickness';
+/**
+ * @component vds-divider
+ * @description A divider component that creates visual separation between content sections. Supports horizontal and vertical orientations with customizable color, thickness, and spacing.
+ * @slot - The default slot is not used
+ */
 export declare class VdsDivider {
-    /** Define divider padding using our spacing system */
+    /**
+     * Define divider padding using our spacing system
+     * @type {Spacing}
+     * @default "spacing-03"
+     */
     padding: Spacing;
-    /** Define divider orientation horizontal or vertical */
+    /**
+     * Define divider orientation horizontal or vertical
+     * @type {"horizontal" | "vertical"}
+     * @default "horizontal"
+     */
     orientation: 'horizontal' | 'vertical';
-    /** Set the divider line color */
+    /**
+     * Set the divider line color
+     * @type {BorderColors | StaticGlobal | Palettes}
+     * @default "color-border-low"
+     */
     color: BorderColors | StaticGlobal | Palettes;
-    /** Set the divider line thickness */
+    /**
+     * Set the divider line thickness
+     * @type {BorderThickness}
+     * @default "border-thickness-01"
+     */
     thickness: BorderThickness;
+    /**
+     * Sets CSS custom properties for divider styling based on props
+     * @private
+     * @returns {{ [key: string]: string }} Object containing CSS custom properties
+     */
     private setDividerStyle;
+    /**
+     * Renders the divider component
+     * @returns {JSX.Element} The rendered divider element
+     */
     render(): any;
 }