@momentum-design/components 0.110.1 → 0.111.0

package/dist/components/slider/index.d.ts

@@ -1,3 +1,4 @@
+import '../icon';
 import Slider from './slider.component';
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/slider/index.js

@@ -1,3 +1,4 @@
+import '../icon';
 import Slider from './slider.component';
 import { TAG_NAME } from './slider.constants';
 Slider.register(TAG_NAME);

package/dist/components/slider/slider.component.d.ts

@@ -1,21 +1,66 @@
-import { CSSResult } from 'lit';
+import type { CSSResult, PropertyValueMap } from 'lit';
 import { Component } from '../../models';
 /**
- * slider component, which ...
+ * Slider component is used to select a value or range of values from within a defined range.
+ * It provides a visual representation of the current value(s) and allows users to adjust the value(s) by dragging the thumb(s) along the track.
+ * It can be used as a single slider or a range slider. This is set by the boolean attribute `range`
+ * If the step value is more than 1, tick marks are shown to represent the steps between the min and max values. The slider thumb will snap to the nearest tick mark.
  *
  * @tagname mdc-slider
  *
- * @slot default - This is a default/unnamed slot
+ * @dependency mdc-icon
  *
- * @cssproperty --custom-property-name - Description of the CSS custom property
+ * @csspart slider-tooltip - The tooltip of the slider
+ * @csspart slider-track - The track of the slider
+ * @csspart slider-wrapper - The wrapper around the slider input(s)
+ * @csspart slider-ticks - The container for the tick marks
+ * @csspart slider-tick - The individual tick marks
+ * @csspart slider-input - The input element of the slider
+ * @csspart slider-label - The label of the slider
+ *
+ * @event input - Fired when the slider value changes
+ * @event change - Fired when the slider value is committed
+ *
+ * @cssproperty --mdc-slider-thumb-color - The color of the slider thumb
+ * @cssproperty --mdc-slider-thumb-border-color - The color of the slider thumb border
+ * @cssproperty --mdc-slider-thumb-size - The size of the slider thumb
+ * @cssproperty --mdc-slider-input-size - The height of the slider input
+ * @cssproperty --mdc-slider-tick-size - The size of the slider tick marks
+ * @cssproperty --mdc-slider-track-height - The height of the slider track
+ * @cssproperty --mdc-slider-tick-color - The color of the slider tick marks
+ * @cssproperty --mdc-slider-progress-color - The color of the slider progress
+ * @cssproperty --mdc-slider-track-color - The color of the slider track
+ * @cssproperty --mdc-slider-tooltip-left - The left position of the slider tooltip
+ * @cssproperty --mdc-slider-tick-left - The left position of the slider tick marks
  */
 declare class Slider extends Component {
     /**
-     * Whether or not to show a value range. When false, the slider displays a slide-able handle for the value property; when true, it displays slide-able handles for the valueStart and valueEnd properties.
+     * Internal state to track if the slider thumb is focused (single value)
+     * @internal
+     */
+    private thumbFocused;
+    /**
+     * @internal
+     */
+    private thumbHovered;
+    /**
+     * Indicates whether it is a range slider. When true, the slider displays two handles for selecting a range of values.
+     * When false, the slider displays a single handle for selecting a single value.
+     * @default false
      */
     range: boolean;
     /**
-     * Whether the slider is disabled.
+     * The slider minimum value.
+     * @default 0
+     */
+    min: number;
+    /**
+     * The slider maximum value.
+     * @default 100
+     */
+    max: number;
+    /**
+     * Whether the slider is disabled. When true, the slider cannot be interacted with.
      */
     disabled?: boolean;
     /**
@@ -30,14 +75,6 @@ declare class Slider extends Component {
      * Icon that represents the maximum value; ex: speaker with full volume.
      */
     trailingIcon?: string;
-    /**
-     * The slider minimum value.
-     */
-    min: number;
-    /**
-     * The slider maximum value.
-     */
-    max: number;
     /**
      * The slider value displayed when range is false.
      */
@@ -51,7 +88,8 @@ declare class Slider extends Component {
      */
     valueEnd?: number;
     /**
-     * The step between values. This will show tick marks and the stepper will snap to the nearest tick mark.
+     * The step between values. If defined and greater than 1, we will show tick marks and the stepper will snap to the nearest tick mark.
+     * @default 1
      */
     step: number;
     /**
@@ -67,53 +105,132 @@ declare class Slider extends Component {
      */
     labelEnd?: string;
     /**
-     * An optional label for the slider's value displayed when range is false; if not set, the label is the value itself.
+     * An optional label for the slider's value displayed when range is false; if not set, the label is the 'value' itself.
      */
-    valueLabel: string;
+    valueLabel?: string;
     /**
-     * An optional label for the slider's start value displayed when range is true; if not set, the label is the valueStart itself.
+     * An optional label for the slider's start value displayed when range is true; if not set, the label is the 'valueStart' itself.
      */
-    valueLabelStart: string;
+    valueLabelStart?: string;
     /**
-     * An optional label for the slider's end value displayed when range is true; if not set, the label is the valueEnd itself.
+     * An optional label for the slider's end value displayed when range is true; if not set, the label is the 'valueEnd' itself.
      */
-    valueLabelEnd: string;
+    valueLabelEnd?: string;
     /**
-     * Aria label for the slider's start handle displayed when range is true.
+     * Name attribute for the slider (single value).
      */
-    ariaLabelStart: string;
+    name?: string;
     /**
-     * Aria value text for the slider's start value displayed when range is true.
+     * Name attribute for the slider's start handle when range is true.
+     */
+    nameStart?: string;
+    /**
+     * Name attribute for the slider's end handle when range is true.
+     */
+    nameEnd?: string;
+    /**
+     * Aria label for the slider's handle displayed when range is false.
+     */
+    dataAriaLabel?: string;
+    /**
+     * Aria label for the slider's start handle displayed when range is true.
      */
-    ariaValuetextStart: string;
+    startAriaLabel?: string;
     /**
      * Aria label for the slider's end handle displayed when range is true.
      */
-    ariaLabelEnd: string;
+    endAriaLabel?: string;
+    /**
+     * Aria value text for the slider's value displayed when range is false.
+     */
+    dataAriaValuetext?: string;
+    /**
+     * Aria value text for the slider's start value displayed when range is true.
+     */
+    startAriaValuetext?: string;
     /**
      * Aria value text for the slider's end value displayed when range is true.
      */
-    ariaValuetextEnd: string;
+    endAriaValueText?: string;
     /**
-     * Name attribute for the slider (single value).
+     * Targets all the input components with type='range'
+     * @internal
      */
-    name?: string;
+    protected inputElements: HTMLInputElement[];
+    constructor();
+    protected updated(changedProperties: PropertyValueMap<Slider>): void;
     /**
-     * Name attribute for the slider's start handle (range).
+     * Prevents default behavior for mouse and keyboard events.
+     * This prevents user interaction with the slider when it is soft-disabled.
+     * @param e - The event to prevent.
      */
-    nameStart?: string;
+    private preventChange;
     /**
-     * Name attribute for the slider's end handle (range).
+     * Sets the soft-disabled state for the slider.
+     * Applies the appropriate ARIA attributes.
      */
-    nameEnd?: string;
+    private setSoftDisabled;
     /**
-     * Aria value text for the slider's value displayed when range is false.
+     * Initializes the range slider by setting default values for the start and end handles.
+     * Updates the slider's input elements to reflect the current values.
      */
-    dataAriaValuetext: string;
+    private initializeRangeSlider;
     /**
-     * Aria label for the slider's handle displayed when range is false.
+     * Handles input changes for either the start or end thumb of the range slider.
+     * Ensures thumbs do not cross over each other.
+     * @param thumbIndex - 0 for start thumb, 1 for end thumb.
+     */
+    private handleInput;
+    /**
+     * Renders an icon element.
+     * @param icon - The name of the icon to render.
+     * @param part - The part attribute for the icon element.
+     * @returns The icon element or null.
+     */
+    private iconTemplate;
+    /**
+     * Renders a visual representation of tooltip element and places it exactly above the slider thumb.
+     * @param label - The label to display in the tooltip.
+     * @param source - The source of the tooltip (e.g., 'start' or 'end').
+     * @returns The tooltip element.
+     */
+    private tooltipTemplate;
+    /**
+     * Updates the styling of the slider track.
+     * The progress value is calculated and updated using appropriate tokens
+     * In a range slider, both thumbs are considered.
+     * The track is filled between the two thumbs.
+     */
+    updateTrackStyling(): void;
+    /**
+     * Handles the input event for the single value slider.
+     * @param e - The input event.
+     */
+    onInput(e: Event): void;
+    /**
+     * Handles the change event for the single value slider.
+     * @param e - The change event.
+     */
+    onChange(e: Event): void;
+    /**
+     * Handles the change event for the start thumb of the range slider.
+     * @param e - The change event.
+     */
+    onChangeStart(e: Event): void;
+    /**
+     * Handles the change event for the end thumb of the range slider.
+     * @param e - The change event.
+     */
+    onChangeEnd(e: Event): void;
+    /**
+     * Get the styles for the tick marks.
+     * Since the ticks are placed above the slider, we need to hide the tick that is placed exactly where the slider thumb is.
+     * Based on this condition, it renders the styles appropriately.
+     * @param tick - The tick value.
+     * @returns The styles for the tick mark.
      */
-    dataAriaLabel: string;
+    getTickStyles(tick: number): string;
+    private renderTicks;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }