@tylertech/forge 3.0.0-next.5 → 3.0.0-next.7

package/esm/slider/slider-constants.js

@@ -6,33 +6,78 @@
 import { COMPONENT_NAME_PREFIX } from '../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}slider`;
 const attributes = {
-    TYPE: 'type',
+    ARIA_LABEL: 'data-aria-label',
+    ARIA_LABEL_START: 'data-aria-label-start',
+    ARIA_LABEL_END: 'data-aria-label-end',
     VALUE: 'value',
     VALUE_START: 'value-start',
+    VALUE_END: 'value-end',
+    LABEL: 'label',
+    LABEL_START: 'label-start',
+    LABEL_END: 'label-end',
     MIN: 'min',
     MAX: 'max',
     STEP: 'step',
+    TICKMARKS: 'tickmarks',
+    LABELED: 'labeled',
+    RANGE: 'range',
     DISABLED: 'disabled',
-    COLOR: 'color'
+    READONLY: 'readonly'
 };
 const selectors = {
-    ROOT: '.mdc-slider',
-    THUMB: '.mdc-slider__thumb[part=thumb],.mdc-slider__thumb[part=\'thumb-end\']',
-    THUMB_START: '.mdc-slider__thumb[part=\'thumb-start\']',
-    VALUE_INPUT: 'input[id=\'value-input\']',
-    VALUE_INPUT_START: 'input[id=\'value-input-start\']',
-    TRACK_CONTAINER: '.mdc-slider__track-container',
-    TRACK_ACTIVE_FILL: '.mdc-slider__track--active_fill'
+    ROOT: '.forge-slider',
+    TRACK: '.track',
+    HANDLE_CONTAINER: '.handle-container',
+    START_INPUT: 'input.start',
+    END_INPUT: 'input.end',
+    START_HANDLE: '.handle.start',
+    START_HANDLE_THUMB: '.handle.start .handle-thumb',
+    END_HANDLE: '.handle.end',
+    END_HANDLE_THUMB: '.handle.end .handle-thumb',
+    START_LABEL: '.handle.start .handle-label',
+    START_LABEL_CONTENT: '.handle.start .handle-label-content',
+    END_LABEL: '.handle.end .handle-label',
+    END_LABEL_CONTENT: '.handle.end .handle-label-content',
+    START_RIPPLE_SURFACE: '.handle.start .handle-ripple',
+    END_RIPPLE_SURFACE: '.handle.end .handle-ripple',
+    LABEL: '.handle-label',
+    INPUT: 'input[type=range]'
+};
+const classes = {
+    RANGE: 'range',
+    TICKMARKS: 'tickmarks',
+    ON_TOP: 'on-top',
+    OVERLAPPING: 'overlapping',
+    HOVER: 'hover',
+    HANDLE: 'handle',
+    HANDLE_RIPPLE: 'handle-ripple',
+    HANDLE_THUMB: 'handle-thumb',
+    HANDLE_START: 'start',
+    HANDLE_LABEL: 'handle-label',
+    LABEL: 'handle-label',
+    LABEL_CONTENT: 'handle-label-content'
 };
 const events = {
-    MDC_INPUT: 'MDCSlider:input',
-    MDC_CHANGE: 'MDCSlider:change',
-    FORGE_INPUT: 'forge-slider-input',
-    FORGE_CHANGE: 'forge-slider-change'
+    INPUT: 'forge-slider-input',
+    CHANGE: 'forge-slider-change'
+};
+const cssCustomProperties = {
+    START_FRACTION: '--_start-fraction',
+    END_FRACTION: '--_end-fraction',
+    TICK_COUNT: '--_tick-count'
+};
+const numbers = {
+    DEFAULT_STEP: 1,
+    DEFAULT_VALUE: 50,
+    DEFAULT_START_VALUE: 33,
+    DEFAULT_END_VALUE: 67
 };
 export const SLIDER_CONSTANTS = {
     elementName,
     attributes,
     selectors,
-    events
+    classes,
+    events,
+    numbers,
+    cssCustomProperties
 };

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

@@ -0,0 +1,95 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { ISliderAdapter } from './slider-adapter';
+import { SliderLabelBuilder } from './slider-constants';
+export interface ISliderFoundation extends ICustomElementFoundation {
+    ariaLabel: string | null;
+    ariaLabelStart: string | null;
+    ariaLabelEnd: string | null;
+    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;
+}
+export declare class SliderFoundation implements ISliderFoundation {
+    private readonly _adapter;
+    private _value;
+    private _valueStart;
+    private _valueEnd;
+    private _labelStart;
+    private _labelEnd;
+    private _labelBuilder;
+    private _min;
+    private _max;
+    private _step;
+    private _tickmarks;
+    private _labeled;
+    private _range;
+    private _disabled;
+    private _readonly;
+    private readonly _pointerEnterListener;
+    private readonly _pointerMoveListener;
+    private readonly _pointerLeaveListener;
+    private readonly _changeUpdateListener;
+    private readonly _focusListener;
+    constructor(_adapter: ISliderAdapter);
+    initialize(): void;
+    destroy(): void;
+    private _update;
+    private _clampMinMax;
+    private _applyInputListeners;
+    private _handlePointerEnter;
+    private _handlePointerMove;
+    private _handlePointerLeave;
+    private _handleInputUpdate;
+    private _handleFocus;
+    private _canClamp;
+    get value(): number;
+    set value(value: number);
+    get valueStart(): number;
+    set valueStart(value: number);
+    get valueEnd(): number;
+    set valueEnd(value: number);
+    get label(): string;
+    set label(value: string);
+    get labelStart(): string;
+    set labelStart(value: string);
+    get labelEnd(): string;
+    set labelEnd(value: string);
+    get labelBuilder(): SliderLabelBuilder;
+    set labelBuilder(cb: SliderLabelBuilder);
+    get min(): number;
+    set min(value: number);
+    get max(): number;
+    set max(value: number);
+    get step(): number;
+    set step(value: number);
+    get tickmarks(): boolean;
+    set tickmarks(value: boolean);
+    get labeled(): boolean;
+    set labeled(value: boolean);
+    get range(): boolean;
+    set range(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get readonly(): boolean;
+    set readonly(value: boolean);
+    set ariaLabel(value: string | null);
+    set ariaLabelStart(value: string | null);
+    set ariaLabelEnd(value: string | null);
+}

package/esm/slider/slider-foundation.js

@@ -0,0 +1,319 @@
+/**
+ * @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._adapter.initialize();
+        this._applyInputListeners();
+        this._update();
+    }
+    destroy() {
+        this._adapter.destroy();
+    }
+    _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();
+        this._adapter.tryBlurStartHandle();
+        this._adapter.tryBlurEndHandle();
+    }
+    _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-handle-ripple.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ForgeRippleCapableSurface } from '../ripple';
+export declare class SliderHandleRipple implements ForgeRippleCapableSurface {
+    private _root;
+    private _inputElement;
+    private _rippleInstance;
+    constructor(_root: HTMLElement, _inputElement: HTMLInputElement);
+    destroy(): void;
+    emulateFocus(): void;
+    emulateBlur(): void;
+    get root(): Element;
+    get unbounded(): boolean;
+    get disabled(): boolean;
+}

package/esm/slider/slider-handle-ripple.js

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { addClass, removeClass } from '@tylertech/forge-core';
+import { ForgeRipple, ForgeRippleFoundation } from '../ripple';
+export class SliderHandleRipple {
+    constructor(_root, _inputElement) {
+        this._root = _root;
+        this._inputElement = _inputElement;
+        const adapter = Object.assign(Object.assign({}, ForgeRipple.createAdapter(this)), { registerInteractionHandler: (evtType, handler) => this._inputElement.addEventListener(evtType, handler, { passive: true }), deregisterInteractionHandler: (evtType, handler) => this._inputElement.removeEventListener(evtType, handler, { passive: true }), isSurfaceActive: () => this._inputElement.matches(':active'), isUnbounded: () => this.unbounded, isSurfaceDisabled: () => this.disabled, addClass: (className) => addClass(className, this._root), removeClass: (className) => removeClass(className, this._root), updateCssVariable: (varName, value) => this._root.style.setProperty(varName, value) });
+        this._rippleInstance = new ForgeRipple(this._root, new ForgeRippleFoundation(adapter));
+    }
+    destroy() {
+        var _a;
+        (_a = this._rippleInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+        this._rippleInstance = undefined;
+    }
+    emulateFocus() {
+        var _a;
+        (_a = this._rippleInstance) === null || _a === void 0 ? void 0 : _a.handleFocus();
+    }
+    emulateBlur() {
+        var _a;
+        (_a = this._rippleInstance) === null || _a === void 0 ? void 0 : _a.handleBlur();
+    }
+    get root() {
+        return this._root;
+    }
+    get unbounded() {
+        return true;
+    }
+    get disabled() {
+        return this._inputElement.disabled;
+    }
+}

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,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;
+}