@tylertech/forge 3.0.0-next.4 → 3.0.0-next.6

package/esm/slider/slider-utils.js

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { SLIDER_CONSTANTS } from './slider-constants';
+export function createStartInputElement(component) {
+    const startInput = document.createElement('input');
+    startInput.type = 'range';
+    startInput.id = 'start';
+    startInput.min = String(component.min);
+    startInput.max = String(component.max);
+    startInput.step = String(component.step);
+    startInput.valueAsNumber = component.valueStart;
+    startInput.disabled = component.disabled;
+    startInput.classList.add('start');
+    if (component.hasAttribute(SLIDER_CONSTANTS.attributes.ARIA_LABEL_START)) {
+        startInput.setAttribute('aria-label', component.getAttribute(SLIDER_CONSTANTS.attributes.ARIA_LABEL_START));
+    }
+    startInput.setAttribute('aria-valuetext', String(component.valueStart));
+    return startInput;
+}
+export function createStartHandleElement(thumbLabel) {
+    const startHandle = document.createElement('div');
+    startHandle.classList.add(SLIDER_CONSTANTS.classes.HANDLE, SLIDER_CONSTANTS.classes.HANDLE_START);
+    startHandle.setAttribute('part', 'handle-start');
+    const startHandleThumb = document.createElement('div');
+    startHandleThumb.classList.add(SLIDER_CONSTANTS.classes.HANDLE_THUMB);
+    startHandleThumb.setAttribute('part', 'handle-start-thumb');
+    startHandle.appendChild(startHandleThumb);
+    const startHandleLabel = document.createElement('div');
+    startHandleLabel.classList.add(SLIDER_CONSTANTS.classes.HANDLE_LABEL);
+    startHandleLabel.setAttribute('part', 'handle-start-label');
+    startHandle.appendChild(startHandleLabel);
+    const startHandleLabelContent = document.createElement('span');
+    startHandleLabelContent.textContent = thumbLabel;
+    startHandleLabelContent.classList.add(SLIDER_CONSTANTS.classes.LABEL_CONTENT);
+    startHandleLabelContent.setAttribute('part', 'handle-start-label-content');
+    startHandleLabel.appendChild(startHandleLabelContent);
+    const startHandleRipple = document.createElement('span');
+    startHandleRipple.classList.add(SLIDER_CONSTANTS.classes.HANDLE_RIPPLE);
+    startHandle.appendChild(startHandleRipple);
+    return startHandle;
+}
+export function createLabel(text) {
+    const labelElement = document.createElement('div');
+    labelElement.classList.add(SLIDER_CONSTANTS.classes.LABEL);
+    const labelContentElement = document.createElement('span');
+    labelContentElement.textContent = text;
+    labelContentElement.classList.add(SLIDER_CONSTANTS.classes.LABEL_CONTENT);
+    labelElement.appendChild(labelContentElement);
+    return labelElement;
+}

package/esm/slider/slider.d.ts

@@ -4,93 +4,163 @@
  * License: Apache-2.0
  */
 import { BaseComponent, IBaseComponent } from '../core/base/base-component';
-import { SliderType, ISliderChangeEventData, ISliderInputEventData } from './slider-constants';
+import { SliderLabelBuilder, ISliderRangeEventData } from './slider-constants';
 export interface ISliderComponent extends IBaseComponent {
-    type: SliderType;
     value: number;
     valueStart: number;
+    valueEnd: number;
+    label: string;
+    labelStart: string;
+    labelEnd: string;
+    labelBuilder: SliderLabelBuilder;
     min: number;
     max: number;
     step: number;
+    range: boolean;
+    tickmarks: boolean;
+    labeled: boolean;
     disabled: boolean;
+    readonly: boolean;
+    form: HTMLFormElement | null;
+    name: string;
+    nameStart: string;
+    nameEnd: string;
+    labels: NodeList;
+    internals: ElementInternals;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'forge-slider': ISliderComponent;
     }
     interface HTMLElementEventMap {
-        'forge-slider-input': CustomEvent<ISliderInputEventData>;
-        'forge-slider-change': CustomEvent<ISliderChangeEventData>;
+        'forge-slider-input': CustomEvent<number | ISliderRangeEventData>;
+        'forge-slider-change': CustomEvent<number | ISliderRangeEventData>;
     }
 }
 /**
- * The custom element class behind the `<forge-slider>` component.
- *
  * @tag forge-slider
+ *
+ * @summary Sliders allow users to make selections from a range of values.
+ *
+ * @description Use sliders to enable users to select a value from a continuous or discrete range of values.
+ *
+ * @property {number} value - The current value of the slider.
+ * @property {number} valueStart - The current start value of the slider.
+ * @property {number} valueEnd - The current end value of the slider.
+ * @property {string} label - The label text for the slider handle.
+ * @property {string} labelStart - The label text for the start slider handle.
+ * @property {string} labelEnd - The label text for the end slider handle.
+ * @property {SliderLabelBuilder} labelBuilder - A function that returns a label for the slider handle.
+ * @property {number} min - The minimum value of the slider.
+ * @property {number} max - The maximum value of the slider.
+ * @property {number} step - The step value of the slider.
+ * @property {boolean} range - Controls range mode.
+ * @property {boolean} tickmarks - Controls if tickmarks are visible.
+ * @property {boolean} labeled - Controls if labels are visible.
+ * @property {boolean} disabled - Controls if the slider is disabled.
+ * @property {boolean} readonly - Controls if the slider is readonly.
+ * @property {string} name - The form control name.
+ * @property {string} nameStart - The form control name for the start handle in range mode.
+ * @property {string} nameEnd - The form control name for the end handle in range mode.
+ *
+ * @attribute {string} value - Sets the current value of the slider.
+ * @attribute {string} value-start - Sets the current start value of the slider in range mode.
+ * @attribute {string} value-end - Sets the current end value of the slider in range mode.
+ * @attribute {string} label - Sets the label text for the slider handle.
+ * @attribute {string} label-start - Sets the label text for the start slider handle in range mode.
+ * @attribute {string} label-end - Sets the label text for the end slider handle in range mode.
+ * @attribute {string} min - Sets the minimum value of the slider.
+ * @attribute {string} max - Sets the maximum value of the slider.
+ * @attribute {string} step - Sets the step value of the slider.
+ * @attribute {string} tickmarks - Controls if tickmarks are visible.
+ * @attribute {string} labeled - Controls if labels are visible.
+ * @attribute {string} range - Controls range mode.
+ * @attribute {string} disabled - Controls if the slider is disabled.
+ * @attribute {string} readonly - Controls if the slider is readonly.
+ * @attribute {string} name - Controls the form control name.
+ * @attribute {string} name-start - Controls the form control name for the start handle in range mode.
+ * @attribute {string} name-end - Controls the form control name for the end handle in range mode.
+ *
+ * @event forge-slider-input {CustomEvent} - Dispatches when the slider value changes.
+ * @event forge-slider-change {CustomEvent} - Dispatches when the slider value changes and the value has been committed.
+ *
+ * @cssproperty --mdc-theme-primary - The primary color of the slider.
+ * @cssproperty --mdc-theme-on-primary - The color of elements placed on top of the primary color (the label text for example).
+ * @cssproperty --forge-slider-track-height - The height of the track.
+ * @cssproperty --forge-slider-active-track-color - The color of the active track.
+ * @cssproperty --forge-slider-active-track-height - The height of the active track.
+ * @cssproperty --forge-slider-active-track-shape - The shape of the active track.
+ * @cssproperty --forge-slider-disabled-active-track-color - The color of the active track when disabled.
+ * @cssproperty --forge-slider-disabled-active-track-opacity - The opacity of the active track when disabled.
+ * @cssproperty --forge-slider-disabled-handle-color - The color of the slider handle when disabled.
+ * @cssproperty --forge-slider-disabled-inactive-track-color - The color of the inactive track when disabled.
+ * @cssproperty --forge-slider-disabled-inactive-track-opacity - The opacity of the inactive track when disabled.
+ * @cssproperty --forge-slider-focus-handle-color - The color of the slider handle when focused.
+ * @cssproperty --forge-slider-handle-color - The color of the slider handle.
+ * @cssproperty --forge-slider-handle-height - The height of the slider handle.
+ * @cssproperty --forge-slider-handle-width - The width of the slider handle.
+ * @cssproperty --forge-slider-handle-shape - The shape of the slider handle.
+ * @cssproperty --forge-slider-hover-handle-color - The color of the slider handle when hovered.
+ * @cssproperty --forge-slider-inactive-track-color - The color of the inactive track.
+ * @cssproperty --forge-slider-inactive-track-height - The height of the inactive track.
+ * @cssproperty --forge-slider-inactive-track-shape - The shape of the inactive track.
+ * @cssproperty --forge-slider-label-container-color - The color of the label container.
+ * @cssproperty --forge-slider-label-container-height - The height of the label container.
+ * @cssproperty --forge-slider-label-label-text-color - The color of the label text.
+ * @cssproperty --forge-slider-pressed-handle-color - The color of the slider handle when pressed.
+ * @cssproperty --forge-slider-state-layer-size - The size of the state layer.
+ * @cssproperty --forge-slider-with-overlap-handle-outline-color - The color of the slider handle outline when overlapping.
+ * @cssproperty --forge-slider-with-overlap-handle-outline-width - The width of the slider handle outline when overlapping.
+ * @cssproperty --forge-slider-with-tick-marks-active-container-color - The color of the active tick mark container when tick marks are visible.
+ * @cssproperty --forge-slider-with-tick-marks-container-size - The size of the tick mark container when tick marks are visible.
+ * @cssproperty --forge-slider-with-tick-marks-disabled-active-container-color - The color of the active tick mark container when tick marks are visible and disabled.
+ * @cssproperty --forge-slider-with-tick-marks-disabled-inactive-container-color - The color of the inactive tick mark container when tick marks are visible and disabled.
+ * @cssproperty --forge-slider-with-tick-marks-inactive-container-color - The color of the inactive tick mark container when tick marks are visible.
+ *
+ * @csspart slider - Styles the slider container element.
+ * @csspart track - Styles the track element.
+ * @csspart handle-end - Styles the end handle element.
+ * @csspart handle-end-thumb - Styles the end handle thumb element.
+ * @csspart handle-end-label - Styles the end handle label element.
+ * @csspart handle-end-label-content - Styles the end handle label content element.
+ * @csspart handle-start - Styles the start handle element.
+ * @csspart handle-start-thumb - Styles the start handle thumb element.
+ * @csspart handle-start-label - Styles the start handle label element.
+ * @csspart handle-start-label-content - Styles the start handle label content element.
+ *
  */
 export declare class SliderComponent extends BaseComponent implements ISliderComponent {
     static get observedAttributes(): string[];
-    private _mdcSlider;
-    private _mdcSliderFoundation;
-    private _type;
-    private _value;
-    private _valueStart;
-    private _min;
-    private _max;
-    private _step;
-    private _disabled;
-    private _mdcSliderUpdateListener;
-    private _rootElement;
-    private _inputElement;
-    private _inputElementStart;
+    static formAssociated: boolean;
+    get form(): HTMLFormElement | null;
+    get labels(): NodeList;
+    get name(): string;
+    set name(value: string);
+    get nameStart(): string;
+    set nameStart(value: string);
+    get nameEnd(): string;
+    set nameEnd(value: string);
+    readonly internals: ElementInternals;
+    private readonly _foundation;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    private _setTemplate;
-    private _initializeTemplate;
-    private _initialize;
-    private _initializeMdcSlider;
-    private _onSliderUpdate;
-    private _syncToSlider;
-    private _syncFromSlider;
-    private _applyMin;
-    private _applyMax;
-    private _applyStep;
-    private get _isRangeSlider();
-    /**
-     * Gets/sets the type of slider this is: `continuous` (default), `discrete`, `discrete-markers`
-     */
-    get type(): SliderType;
-    set type(value: SliderType);
-    /**
-     * Gets/sets the value of the slider.
-     */
-    get value(): number;
-    set value(value: number);
-    /**
-     * Gets/sets the start value of the slider (only applicable for range sliders).
-     */
-    get valueStart(): number;
-    set valueStart(value: number);
-    /**
-     * Gets/sets the minimum value for the slider.
-     */
-    get min(): number;
-    set min(value: number);
-    /**
-     * Gets/sets the maximum value for the slider.
-     */
-    get max(): number;
-    set max(value: number);
-    /**
-     * Gets/sets the step value for the slider when in discrete mode.
-     */
-    get step(): number;
-    set step(value: number);
-    /**
-     * Gets/sets the disabled state of the slider.
-     */
-    get disabled(): boolean;
-    set disabled(value: boolean);
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string | Array<[string, string]> | null): void;
+    value: number;
+    valueStart: number;
+    valueEnd: number;
+    label: string;
+    labelStart: string;
+    labelEnd: string;
+    labelBuilder: SliderLabelBuilder;
+    min: number;
+    max: number;
+    step: number;
+    tickmarks: boolean;
+    labeled: boolean;
+    range: boolean;
+    disabled: boolean;
+    readonly: boolean;
 }