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

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

@@ -1,11 +1,126 @@
 import { HTMLStencilElement } from '../../stencil-public-runtime';
+/**
+ * @component vds-skeleton-loading
+ * @description A skeleton loading placeholder component used to display loading states while content is being fetched. Supports rectangular and circular variants with customizable dimensions. Ideal for improving perceived performance and user experience.
+ *
+ * @example
+ * <!-- Basic rectangular skeleton -->
+ * <vds-skeleton-loading></vds-skeleton-loading>
+ *
+ * @example
+ * <!-- Circular skeleton for avatar -->
+ * <vds-skeleton-loading
+ *   variant="circular"
+ *   width="3rem"
+ *   height="3rem">
+ * </vds-skeleton-loading>
+ *
+ * @example
+ * <!-- Custom width and height -->
+ * <vds-skeleton-loading
+ *   width="200px"
+ *   height="100px">
+ * </vds-skeleton-loading>
+ *
+ * @example
+ * <!-- Card skeleton -->
+ * <div style="padding: 1rem; border: 1px solid #e0e0e0; border-radius: 8px;">
+ *   <vds-skeleton-loading variant="rectangular" width="100%" height="200px"></vds-skeleton-loading>
+ *   <vds-skeleton-loading variant="rectangular" width="60%" height="1.5rem" style="margin-top: 1rem;"></vds-skeleton-loading>
+ *   <vds-skeleton-loading variant="rectangular" width="80%" height="1rem" style="margin-top: 0.5rem;"></vds-skeleton-loading>
+ * </div>
+ *
+ * @example
+ * <!-- List item skeletons -->
+ * <div style="display: flex; flex-direction: column; gap: 1rem;">
+ *   <vds-skeleton-loading width="100%" height="3rem"></vds-skeleton-loading>
+ *   <vds-skeleton-loading width="100%" height="3rem"></vds-skeleton-loading>
+ *   <vds-skeleton-loading width="100%" height="3rem"></vds-skeleton-loading>
+ * </div>
+ *
+ * @example
+ * <!-- Profile skeleton with avatar and text -->
+ * <div style="display: flex; align-items: center; gap: 1rem;">
+ *   <vds-skeleton-loading variant="circular" width="3.5rem" height="3.5rem"></vds-skeleton-loading>
+ *   <div style="flex: 1;">
+ *     <vds-skeleton-loading width="40%" height="1.25rem"></vds-skeleton-loading>
+ *     <vds-skeleton-loading width="60%" height="1rem" style="margin-top: 0.5rem;"></vds-skeleton-loading>
+ *   </div>
+ * </div>
+ *
+ * @example
+ * <!-- Table skeleton -->
+ * <div>
+ *   <vds-skeleton-loading width="100%" height="3rem"></vds-skeleton-loading>
+ *   <vds-skeleton-loading width="100%" height="2.5rem" style="margin-top: 0.25rem;"></vds-skeleton-loading>
+ *   <vds-skeleton-loading width="100%" height="2.5rem" style="margin-top: 0.25rem;"></vds-skeleton-loading>
+ *   <vds-skeleton-loading width="100%" height="2.5rem" style="margin-top: 0.25rem;"></vds-skeleton-loading>
+ * </div>
+ *
+ * @example
+ * <!-- Text line skeletons -->
+ * <div>
+ *   <vds-skeleton-loading width="90%" height="1rem"></vds-skeleton-loading>
+ *   <vds-skeleton-loading width="85%" height="1rem" style="margin-top: 0.5rem;"></vds-skeleton-loading>
+ *   <vds-skeleton-loading width="95%" height="1rem" style="margin-top: 0.5rem;"></vds-skeleton-loading>
+ *   <vds-skeleton-loading width="70%" height="1rem" style="margin-top: 0.5rem;"></vds-skeleton-loading>
+ * </div>
+ *
+ * @example
+ * <!-- Image skeleton -->
+ * <vds-skeleton-loading
+ *   variant="rectangular"
+ *   width="400px"
+ *   height="300px">
+ * </vds-skeleton-loading>
+ *
+ * @example
+ * <!-- Complete page loading skeleton -->
+ * <div style="max-width: 800px; padding: 2rem;">
+ *   <!-- Header -->
+ *   <vds-skeleton-loading width="50%" height="2.5rem"></vds-skeleton-loading>
+ *   <vds-skeleton-loading width="70%" height="1.25rem" style="margin-top: 0.5rem;"></vds-skeleton-loading>
+ *
+ *   <!-- Image -->
+ *   <vds-skeleton-loading width="100%" height="400px" style="margin-top: 2rem;"></vds-skeleton-loading>
+ *
+ *   <!-- Content -->
+ *   <div style="margin-top: 2rem;">
+ *     <vds-skeleton-loading width="100%" height="1rem"></vds-skeleton-loading>
+ *     <vds-skeleton-loading width="95%" height="1rem" style="margin-top: 0.5rem;"></vds-skeleton-loading>
+ *     <vds-skeleton-loading width="98%" height="1rem" style="margin-top: 0.5rem;"></vds-skeleton-loading>
+ *     <vds-skeleton-loading width="85%" height="1rem" style="margin-top: 0.5rem;"></vds-skeleton-loading>
+ *   </div>
+ * </div>
+ */
 export declare class VdsSkeletonLoading {
-    /** Define the skeleton shape variant */
+    /**
+     * Define the skeleton shape variant
+     * @type {"rectangular" | "circular"}
+     * @default "rectangular"
+     */
     variant: "rectangular" | "circular";
-    /** Define the skeleton width value */
+    /**
+     * Define the skeleton width value
+     * @type {string}
+     * @default "100%" for rectangular, "1.75rem" for circular
+     */
     width: string;
-    /** Define the skeleton height value */
+    /**
+     * Define the skeleton height value
+     * @type {string}
+     * @default "2.25rem" for rectangular, "1.75rem" for circular
+     */
     height: string;
+    /**
+     * Get inline styles for the skeleton element based on width and height props
+     * @private
+     * @returns {Object} Style object with width and height properties
+     */
     private getStyles;
+    /**
+     * Render the skeleton loading component
+     * @returns {HTMLStencilElement} The rendered skeleton loading element
+     */
     render(): HTMLStencilElement;
 }

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

@@ -1,148 +1,377 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { Marks } from '../../utils/slider.utils';
+/**
+ * @component vds-basic-slider-continuous
+ * @description A continuous slider component for selecting numeric values from a range. Supports horizontal and vertical orientations, custom marks, value labels, step increments, and custom theming. Form-associated for native form integration.
+ *
+ * @example
+ * <!-- Basic slider with default range 0-100 -->
+ * <vds-basic-slider-continuous
+ *   value="50">
+ * </vds-basic-slider-continuous>
+ *
+ * @example
+ * <!-- Large slider with custom range -->
+ * <vds-basic-slider-continuous
+ *   value="25"
+ *   min-value="0"
+ *   max-value="50"
+ *   size="large">
+ * </vds-basic-slider-continuous>
+ *
+ * @example
+ * <!-- Slider with step increment -->
+ * <vds-basic-slider-continuous
+ *   value="20"
+ *   min-value="0"
+ *   max-value="100"
+ *   step="10">
+ * </vds-basic-slider-continuous>
+ *
+ * @example
+ * <!-- Vertical slider -->
+ * <vds-basic-slider-continuous
+ *   value="60"
+ *   orientation="vertical"
+ *   style="height: 300px;">
+ * </vds-basic-slider-continuous>
+ *
+ * @example
+ * <!-- Slider without value label -->
+ * <vds-basic-slider-continuous
+ *   value="30"
+ *   display-label="off">
+ * </vds-basic-slider-continuous>
+ *
+ * @example
+ * <!-- Slider with auto label (shows on hover) -->
+ * <vds-basic-slider-continuous
+ *   value="75"
+ *   display-label="auto">
+ * </vds-basic-slider-continuous>
+ *
+ * @example
+ * <!-- Slider without limit labels -->
+ * <vds-basic-slider-continuous
+ *   value="40"
+ *   display-limits="false">
+ * </vds-basic-slider-continuous>
+ *
+ * @example
+ * <!-- Disabled slider -->
+ * <vds-basic-slider-continuous
+ *   value="50"
+ *   disabled="true">
+ * </vds-basic-slider-continuous>
+ *
+ * @example
+ * <!-- Slider with custom marks -->
+ * <vds-basic-slider-continuous
+ *   value="50"
+ *   show-marks="true"
+ *   marks='[{"value": 0, "label": "Start"}, {"value": 50, "label": "Middle"}, {"value": 100, "label": "End"}]'>
+ * </vds-basic-slider-continuous>
+ *
+ * @example
+ * <!-- Slider with step marks -->
+ * <vds-basic-slider-continuous
+ *   value="40"
+ *   min-value="0"
+ *   max-value="100"
+ *   step="20"
+ *   show-marks="true">
+ * </vds-basic-slider-continuous>
+ *
+ * @example
+ * <!-- Slider with custom colors -->
+ * <vds-basic-slider-continuous
+ *   value="65"
+ *   colors='{"Track": "grey-200", "TrackFill": "primary-500", "Thumb": "primary-700"}'>
+ * </vds-basic-slider-continuous>
+ *
+ * @example
+ * <!-- Volume control slider -->
+ * <div style="display: flex; align-items: center; gap: 1rem;">
+ *   <vds-icon svg-icon="mute"></vds-icon>
+ *   <vds-basic-slider-continuous
+ *     id="volume"
+ *     value="50"
+ *     min-value="0"
+ *     max-value="100"
+ *     set-aria-label="Volume control">
+ *   </vds-basic-slider-continuous>
+ *   <vds-icon svg-icon="unmute"></vds-icon>
+ * </div>
+ *
+ * @example
+ * <!-- Temperature slider with event handling -->
+ * <div>
+ *   <label>Temperature: <span id="temp-value">20</span>°C</label>
+ *   <vds-basic-slider-continuous
+ *     id="temperature"
+ *     value="20"
+ *     min-value="10"
+ *     max-value="30"
+ *     step="0.5"
+ *     set-aria-label="Temperature control">
+ *   </vds-basic-slider-continuous>
+ * </div>
+ * <script>
+ *   const slider = document.getElementById('temperature');
+ *   const display = document.getElementById('temp-value');
+ *   slider.addEventListener('changeInput', (e) => {
+ *     display.textContent = e.detail;
+ *   });
+ * </script>
+ */
 export declare class VdsBasicSliderContinuous {
-    /** Sets the value of the slider..*/
+    /**
+     * Sets the value of the slider
+     * @type {number}
+     */
     value: number;
-    /** Sets the size of the slider. */
+    /**
+     * Sets the size of the slider
+     * @type {"medium" | "large"}
+     * @default "medium"
+     */
     size: "medium" | "large";
-    /** Sets the slider’s orientation. */
+    /**
+     * Sets the slider's orientation
+     * @type {"horizontal" | "vertical"}
+     * @default "horizontal"
+     */
     orientation: "horizontal" | "vertical";
-    /** Sets the slider on disabled state. */
+    /**
+     * Sets the slider on disabled state
+     * @type {boolean}
+     * @default false
+     */
     disabled: boolean;
-    /** Sets the min value of the slider (Min value should always be lower than the max value). */
+    /**
+     * Sets the min value of the slider (Min value should always be lower than the max value)
+     * @type {number}
+     * @default 0
+     */
     minValue: number;
-    /** Sets the max value of the slider..*/
+    /**
+     * Sets the max value of the slider
+     * @type {number}
+     * @default 100
+     */
     maxValue: number;
-    /** Sets the amount of advance of the slider. */
+    /**
+     * Sets the amount of advance of the slider
+     * @type {number}
+     */
     step: number;
-    /** Sets the aria label in slider */
+    /**
+     * Sets the aria label in slider
+     * @type {string}
+     */
     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.
-    */
+    /**
+     * 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
+     * @type {"on" | "off" | "auto"}
+     * @default "on"
+     */
     displayLabel: "on" | "off" | "auto";
-    /** Toggles the limit value (min and max) of the slider .*/
+    /**
+     * Toggles the limit value (min and max) of the slider
+     * @type {boolean}
+     * @default true
+     */
     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.
+    /**
+     * 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
+     * @type {{ [key: string]: string } | string}
      */
     colors: {
         [key: string]: string;
     } | string;
-    /** Sets the thumb icon */
+    /**
+     * Sets the thumb icon
+     * @type {string}
+     * @default "thumb"
+     */
     icon: string;
-    /**  Emits updated input value */
+    /**
+     * Show / Hide marks in the slider track
+     * @type {boolean}
+     * @default false
+     */
+    showMarks: boolean;
+    /**
+     * Marks definition for discrete slider mode
+     * @type {Marks[]}
+     */
+    marks: Marks[];
+    /**
+   * A formatter function that processes the displayed numeric value.
+   * This function receives the current slider value and returns a formatted string for display.
+   *
+   * The formatter function is called with a single numeric argument and should return a string.
+   */
+    formattedValue: (value: number) => string;
+    /**
+     * Emits updated input value
+     * @event changeInput
+     * @type {EventEmitter<number>}
+     */
     changeInput: EventEmitter<number>;
     host: HTMLElement;
     internals: ElementInternals;
     displayLabelShowValue: boolean;
+    /**
+     * Component lifecycle hook - logs warnings and sets default values
+     * @private
+     */
     componentWillRender(): void;
-    componentDidRender(): void;
+    /**
+     * Component lifecycle hook - sets input value and thumb position
+     * @private
+     */
     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.
+     * Sets the slider value to the specified value
+     * @method
+     * @public
+     * @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.
+     * Clears the slider value by setting it to the minimum value
+     * @method
+     * @public
+     * @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}
+     * @private
      */
     setInputValue(): void;
     /**
-     * Updates the thumb position and forces a component update on window resize.
-     *
+     * Updates the thumb position and forces a component update on window resize
      * @private
-     * @ListensTo("resize", {target: "window"})
      */
     updateThumbAndTrackPosition(): void;
-    private inputRangeEl;
+    /**
+     * Reference to the track container element
+     * @private
+     */
     private trackContainerEl;
+    /**
+     * String representation of the current value
+     * @private
+     */
     private shownValue;
+    /**
+     * CSS position of the thumb
+     * @private
+     */
     private thumbPosition;
+    /**
+     * Flag indicating custom background is set
+     * @private
+     */
     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.
-     *
+     * Sets the value of the slider to the specified in the event
      * @private
-     * @param {InputEvent} evt - The event emitted by the input.
-     * @returns {void}
+     * @param {InputEvent} evt - The event emitted by the input
      */
     private handleInputChange;
     /**
-     * Sets the displayLabelShowValue to true when the mouse enters or focus the slider.
-     *
+     * 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.
-     *
+     * Sets the displayLabelShowValue to false when the mouse leaves or blur the slider
      * @private
-     * @returns {void}
      */
     private handleInputMouseleaveOrBlur;
+    /**
+     * Determines whether to show the value label based on displayLabel prop
+     * @private
+     * @returns {boolean} True if value should be shown
+     */
     private getShowValue;
     /**
-     * Calculates the CSS left position of the slider thumb based on the current value.
-     *
+     * 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.
+     * @returns {string} The calculated left position of the slider thumb as a CSS percentage value
      */
     private getValuePosition;
+    /**
+     * Gets the marks to display on the slider track
+     * @private
+     * @returns {Marks[]} Array of mark definitions
+     */
+    private getMarks;
     /**
      * 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.
-     *
+     * - 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 }
+     * @returns {{ [key: string]: string }} Object with CSS custom properties
      */
     private setColors;
+    /**
+     * Renders the min and max value references
+     * @private
+     * @returns {HTMLStencilElement} Value references element
+     */
     private renderValueReferences;
+    /**
+     * Renders the current value tooltip above the thumb
+     * @private
+     * @returns {HTMLStencilElement} Value display element
+     */
     private renderShownValue;
+    /**
+     * Renders the marks on the slider track
+     * @private
+     * @param {Marks[]} marks - Array of mark definitions
+     * @returns {HTMLStencilElement | null} Marks element or null if no marks
+     */
+    private renderMarks;
+    /**
+     * Renders the main slider input and track elements
+     * @private
+     * @returns {HTMLStencilElement} Slider element
+     */
     private renderSlider;
+    /**
+     * Render the slider component
+     * @returns {HTMLStencilElement} The rendered slider element
+     */
     render(): any;
 }

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

@@ -41,3 +41,4 @@ declare const _default: {
 export default _default;
 export declare const BasicUsage: any;
 export declare const CustomColorUsage: any;
+export declare const MarksUsage: any;