@tylertech/forge 3.0.0-next.1 → 3.0.0-next.11

package/esm/slider/slider-foundation.js

@@ -0,0 +1,313 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { SLIDER_CONSTANTS } from './slider-constants';
+export class SliderFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        // State
+        this._value = SLIDER_CONSTANTS.numbers.DEFAULT_VALUE;
+        this._valueStart = SLIDER_CONSTANTS.numbers.DEFAULT_START_VALUE;
+        this._valueEnd = SLIDER_CONSTANTS.numbers.DEFAULT_END_VALUE;
+        this._min = 0;
+        this._max = 100;
+        this._step = SLIDER_CONSTANTS.numbers.DEFAULT_STEP;
+        this._tickmarks = false;
+        this._labeled = true;
+        this._range = false;
+        this._disabled = false;
+        this._readonly = false;
+        this._pointerEnterListener = (evt) => this._handlePointerEnter(evt);
+        this._pointerMoveListener = (evt) => this._handlePointerMove(evt);
+        this._pointerLeaveListener = (evt) => this._handlePointerLeave(evt);
+        this._changeUpdateListener = (evt) => this._handleInputUpdate(evt);
+        this._focusListener = (evt) => this._handleFocus(evt);
+    }
+    initialize() {
+        this._applyInputListeners();
+        this._update();
+    }
+    _update() {
+        var _a, _b;
+        const { value: renderValue, valueStart: renderValueStart, valueEnd: renderValueEnd } = this._clampMinMax();
+        const step = this._step <= 0 ? 1 : this._step;
+        const range = Math.max(this._max - this._min, step);
+        const startFraction = this._range ? ((renderValueStart !== null && renderValueStart !== void 0 ? renderValueStart : this._min) - this._min) / range : 0;
+        const valueEnd = this._range ? renderValueEnd : renderValue;
+        const endFraction = ((valueEnd !== null && valueEnd !== void 0 ? valueEnd : this.min) - this.min) / range;
+        const tickCount = range / step;
+        this._adapter.update({ startFraction, endFraction, tickCount });
+        this._adapter.syncInputValues(renderValueStart, this._range ? renderValueEnd : renderValue);
+        if (this._range) {
+            this._adapter.tryDetectOverlap();
+        }
+        let labelStart = (_a = this._labelStart) !== null && _a !== void 0 ? _a : String(renderValueStart);
+        let labelEnd = (_b = this._labelEnd) !== null && _b !== void 0 ? _b : String(this._range ? renderValueEnd : renderValue);
+        if (typeof this._labelBuilder === 'function') {
+            if (this._range) {
+                labelStart = this._labelBuilder(renderValueStart, 'start');
+                labelEnd = this._labelBuilder(renderValueEnd, 'end');
+            }
+            else {
+                labelEnd = this._labelBuilder(renderValue);
+            }
+        }
+        this._adapter.updateLabels(labelStart, labelEnd);
+    }
+    _clampMinMax() {
+        // We make copies of our values so we can mutate them without affecting the original values
+        let valueCopy = this._value;
+        let valueStartCopy = this._valueStart;
+        let valueEndCopy = this._valueEnd;
+        if (this._range) {
+            if (valueStartCopy > this._max) {
+                valueStartCopy = this._max;
+            }
+            else if (valueStartCopy < this._min) {
+                valueStartCopy = this._min;
+            }
+            if (valueEndCopy > this._max) {
+                valueEndCopy = this._max;
+            }
+            else if (valueEndCopy < this._min) {
+                valueEndCopy = this._min;
+            }
+        }
+        else {
+            if (valueCopy > this._max) {
+                valueCopy = this._max;
+            }
+            else if (this._value < this._min) {
+                valueCopy = this._min;
+            }
+        }
+        return {
+            value: valueCopy,
+            valueStart: valueStartCopy,
+            valueEnd: valueEndCopy
+        };
+    }
+    _applyInputListeners() {
+        this._adapter.addInputListener('pointerenter', this._pointerEnterListener);
+        this._adapter.addInputListener('pointermove', this._pointerMoveListener);
+        this._adapter.addInputListener('pointerleave', this._pointerLeaveListener);
+        this._adapter.addInputListener('input', this._changeUpdateListener);
+        this._adapter.addInputListener('change', this._changeUpdateListener);
+        this._adapter.addInputListener('focus', this._focusListener);
+    }
+    _handlePointerEnter(evt) {
+        this._handlePointerMove(evt);
+    }
+    _handlePointerMove({ target, x, y }) {
+        const isStart = target.id === 'start';
+        if (isStart) {
+            this._adapter.tryHoverStartHandle({ x, y });
+        }
+        else {
+            this._adapter.tryHoverEndHandle({ x, y });
+        }
+    }
+    _handlePointerLeave(_evt) {
+        this._adapter.leaveHandleContainer();
+    }
+    _handleInputUpdate(evt) {
+        evt.stopPropagation(); // We don't allow the native input & change events to bubble outside of the component
+        if (this._disabled || this._readonly) {
+            this._adapter.syncInputValues(this._valueStart, this._range ? this._valueEnd : this._value);
+            return;
+        }
+        const input = evt.target;
+        if (this._range) {
+            const isStart = input.id === 'start';
+            if (isStart) {
+                this._valueStart = input.valueAsNumber;
+            }
+            else {
+                this._valueEnd = input.valueAsNumber;
+            }
+            // Clamp values to keep start and end from going past each other
+            if (this._canClamp()) {
+                if (isStart) {
+                    this._valueStart = this._valueEnd;
+                }
+                else {
+                    this._valueEnd = this._valueStart;
+                }
+                // Ensure our underlying inputs are synchronized with our state since they continue moving even when we clamp
+                this._adapter.syncInputValues(this._valueStart, this._valueEnd);
+                this._update();
+                return; // We don't dispatch events when clamping
+            }
+        }
+        else {
+            this._value = input.valueAsNumber;
+        }
+        const type = evt.type === 'change' ? SLIDER_CONSTANTS.events.CHANGE : SLIDER_CONSTANTS.events.INPUT;
+        const data = this._range ? { valueStart: this._valueStart, valueEnd: this._valueEnd } : this._value;
+        this._adapter.emitHostEvent(type, data, true);
+        this._update();
+    }
+    _handleFocus(_evt) {
+        this._adapter.updateHandleLayering();
+    }
+    _canClamp() {
+        return this._valueStart > this._valueEnd || this._valueEnd < this._valueStart;
+    }
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        if (this._value !== value) {
+            this._value = value;
+            this._update();
+        }
+    }
+    get valueStart() {
+        return this._valueStart;
+    }
+    set valueStart(value) {
+        if (this._valueStart !== value) {
+            this._valueStart = value;
+            this._update();
+        }
+    }
+    get valueEnd() {
+        return this._valueEnd;
+    }
+    set valueEnd(value) {
+        if (this._valueEnd !== value) {
+            this._valueEnd = value;
+            this._update();
+        }
+    }
+    get label() {
+        return this.labelEnd;
+    }
+    set label(value) {
+        this.labelEnd = value;
+    }
+    get labelStart() {
+        return this._labelStart;
+    }
+    set labelStart(value) {
+        if (this._labelStart !== value) {
+            this._labelStart = value;
+            this._adapter.updateLabels(this._labelStart, this._labelEnd);
+        }
+    }
+    get labelEnd() {
+        return this._labelEnd;
+    }
+    set labelEnd(value) {
+        if (this._labelEnd !== value) {
+            this._labelEnd = value;
+            this._adapter.updateLabels(this._labelStart, this._labelEnd);
+        }
+    }
+    get labelBuilder() {
+        return this._labelBuilder;
+    }
+    set labelBuilder(cb) {
+        this._labelBuilder = cb;
+        this._update();
+    }
+    get min() {
+        return this._min;
+    }
+    set min(value) {
+        if (this._min !== value) {
+            this._min = value;
+            this._adapter.setMin(this._min);
+            this._update();
+            this._adapter.setHostAttribute(SLIDER_CONSTANTS.attributes.MIN, String(this._min));
+        }
+    }
+    get max() {
+        return this._max;
+    }
+    set max(value) {
+        if (this._max !== value) {
+            this._max = value;
+            this._adapter.setMax(this._max);
+            this._update();
+            this._adapter.setHostAttribute(SLIDER_CONSTANTS.attributes.MAX, String(this._max));
+        }
+    }
+    get step() {
+        return this._step;
+    }
+    set step(value) {
+        if (this._step !== value) {
+            this._step = value;
+            this._adapter.setStep(this._step);
+            this._update();
+            this._adapter.setHostAttribute(SLIDER_CONSTANTS.attributes.STEP, String(this._step));
+        }
+    }
+    get tickmarks() {
+        return this._tickmarks;
+    }
+    set tickmarks(value) {
+        if (this._tickmarks !== value) {
+            this._tickmarks = value;
+            this._adapter.setTickmarks(this._tickmarks);
+            this._adapter.toggleHostAttribute(SLIDER_CONSTANTS.attributes.TICKMARKS, this._tickmarks);
+        }
+    }
+    get labeled() {
+        return this._labeled;
+    }
+    set labeled(value) {
+        if (this._labeled !== value) {
+            this._labeled = value;
+            this._adapter.toggleLabels(this._labeled);
+            this._update();
+            this._adapter.toggleHostAttribute(SLIDER_CONSTANTS.attributes.LABELED, this._labeled);
+        }
+    }
+    get range() {
+        return this._range;
+    }
+    set range(value) {
+        if (this._range !== value) {
+            this._range = value;
+            this._adapter.setRange(this._range);
+            if (this._range) {
+                this._applyInputListeners();
+            }
+            this._update();
+            this._adapter.toggleHostAttribute(SLIDER_CONSTANTS.attributes.RANGE, this._range);
+        }
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        if (this._disabled !== value) {
+            this._disabled = value;
+            this._adapter.setDisabled(value);
+            this._adapter.toggleHostAttribute(SLIDER_CONSTANTS.attributes.DISABLED, this._disabled);
+        }
+    }
+    get readonly() {
+        return this._readonly;
+    }
+    set readonly(value) {
+        if (this._readonly !== value) {
+            this._readonly = value;
+            this._adapter.setReadonly(value);
+            this._adapter.toggleHostAttribute(SLIDER_CONSTANTS.attributes.READONLY, this._readonly);
+        }
+    }
+    set ariaLabel(value) {
+        this.ariaLabelEnd = value;
+    }
+    set ariaLabelStart(value) {
+        this._adapter.setStartAriaLabel(value);
+    }
+    set ariaLabelEnd(value) {
+        this._adapter.setEndAriaLabel(value);
+    }
+}

package/esm/slider/slider-utils.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ISliderComponent } from '../slider';
+export declare function createStartInputElement(component: ISliderComponent): HTMLInputElement;
+export declare function createStartHandleElement(thumbLabel: string): HTMLElement;
+export declare function createLabel(text: string): HTMLElement;

package/esm/slider/slider-utils.js

@@ -0,0 +1,56 @@
+/**
+ * @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 startHandleStateLayer = document.createElement('forge-state-layer');
+    startHandleStateLayer.target = 'start';
+    startHandle.appendChild(startHandleStateLayer);
+    const startHandleFocusIndicator = document.createElement('forge-focus-indicator');
+    startHandleFocusIndicator.target = 'start';
+    startHandle.appendChild(startHandleFocusIndicator);
+    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);
+    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,162 @@
  * 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-shape - The shape of the label container.
+ * @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-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;
 }