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

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

@@ -0,0 +1,94 @@
+/**
+ * @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;
+    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,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;
+}