@refinitiv-ui/elements 6.14.2 → 6.15.0

package/lib/slider/index.js

@@ -1,1313 +1,2 @@
-import { __decorate } from "tslib";
-import { ControlElement, WarningNotice, css, html, nothing } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { query } from '@refinitiv-ui/core/decorators/query.js';
-import { state } from '@refinitiv-ui/core/decorators/state.js';
-import { createRef, ref } from '@refinitiv-ui/core/directives/ref.js';
-import { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
-import '@refinitiv-ui/phrasebook/locale/en/slider.js';
-import { translate } from '@refinitiv-ui/translate';
-import '../number-field/index.js';
-import { VERSION } from '../version.js';
-import { Direction, SliderDataName } from './constants.js';
-import { clamp, countDecimalPlace, isDecimalNumber, preventDefault } from './utils.js';
-/**
- * Allows users to make selections from a range of values
- *
- * @attr {string} value - Value of slider. Not applicable in range mode.
- * @prop {string} [value="0"] - Value of slider. Not applicable in range mode.
- *
- * @attr {boolean} readonly - Set readonly state
- * @prop {boolean} [readonly=false] - Set readonly state
- *
- * @attr {boolean} disabled - Set disabled state
- * @prop {boolean} [disabled=false] - Set disabled state
- *
- * @fires value-changed - Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically.
- * @fires from-changed - Fired when the user changes from's value. The event is not triggered if `from` property is changed programmatically.
- * @fires to-changed - Fired when the user changes to's value. The event is not triggered if `to` property is changed programmatically.
- * @fires input - Fired with the value of the input in `e.detail.value` like another custom events when the user inputs a value by interacting with the slider or updating its input field.
- * @fires from-input - Fired when the user inputs from's value by interacting with the slider or updating its input field.
- * @fires to-input - Fired when the user inputs to's value by interacting with the slider or updating its input field.
- */
-let Slider = class Slider extends ControlElement {
-    /**
-     * Element version number
-     * @returns version number
-     */
-    static get version() {
-        return VERSION;
-    }
-    /**
-     * Define styles in a tagged template literal, using the css tag function.
-     * @returns CSS template
-     */
-    static get styles() {
-        return css `
-      :host {
-        display: flex;
-      }
-      [part='slider-wrapper'] {
-        position: relative;
-        width: 100%;
-      }
-      [part='slider'] {
-        width: 100%;
-        height: 100%;
-        display: inline-block;
-      }
-      :host(:not([disabled]):focus) {
-        outline: none;
-      }
-      :host([show-steps]) [part='track-wrapper']::after {
-        display: block;
-        position: absolute;
-        content: '';
-        right: 0;
-      }
-      [part='track-wrapper'] {
-        content: '';
-        position: absolute;
-        width: 100%;
-        top: 50%;
-        left: 0;
-        pointer-events: none;
-      }
-      [part='thumb-container'] {
-        outline: none;
-        position: absolute;
-        top: 0;
-        width: 100%;
-        z-index: 3;
-      }
-      [part='thumb'] {
-        position: absolute;
-        margin: 0 auto;
-      }
-      [part='pin'] {
-        display: flex;
-        position: absolute;
-        align-items: center;
-        justify-content: center;
-        z-index: 1;
-      }
-      :host([show-steps]) [part='step-container'] {
-        position: absolute;
-        left: 0;
-        width: 100%;
-      }
-      :host([show-steps]) [part='step'] {
-        width: 100%;
-        position: absolute;
-        left: 0;
-      }
-      [part='track-fill'] {
-        z-index: 2;
-        content: '';
-        position: absolute;
-        left: 0;
-      }
-      :host([show-steps][step='0']) [part='track-wrapper']::after {
-        width: 0;
-      }
-    `;
-    }
-    /**
-     * Converts value from string to number for calculations
-     * @returns value of input as a number
-     */
-    get valueNumber() {
-        const value = parseFloat(this.value);
-        if (!this.value || isNaN(value)) {
-            return 0;
-        }
-        return value;
-    }
-    /**
-     * Converts min value from string to number for calculations
-     * @returns minimum value of slider as a number
-     */
-    get minNumber() {
-        const min = parseFloat(this.min);
-        if (!this.min || isNaN(min)) {
-            return 0;
-        }
-        return min;
-    }
-    /**
-     * Converts max value from string to number for calculations
-     * @returns maximum value of slider as a number
-     */
-    get maxNumber() {
-        const max = parseFloat(this.max);
-        if (!this.max || isNaN(max)) {
-            return 100;
-        }
-        return max;
-    }
-    /**
-     * Converts step value from string to number for calculations
-     * @returns step value of slider as a number
-     */
-    get stepNumber() {
-        const step = parseFloat(this.step);
-        if (!this.step || isNaN(step)) {
-            return 1;
-        }
-        return step;
-    }
-    /**
-     * Compute and normalise step value for calculations
-     * @returns step value that should be inside the min / max boundary
-     */
-    get stepRange() {
-        const step = Math.abs(this.stepNumber);
-        if (step > this.maxNumber - this.minNumber && !isDecimalNumber(step)) {
-            // new step shouldn't be larger than slider
-            return Math.abs(this.maxNumber - this.minNumber);
-        }
-        return step;
-    }
-    /**
-     * Converts from value from string to number for calculations
-     * @returns from value of slider as a number
-     */
-    get fromNumber() {
-        const from = parseFloat(this.from);
-        if (!this.from || isNaN(from)) {
-            return this.minNumber;
-        }
-        return from;
-    }
-    /**
-     * Converts to value from string to number for calculations
-     * @returns to value of slider as a number
-     */
-    get toNumber() {
-        const to = parseFloat(this.to);
-        if (!this.to || isNaN(to)) {
-            return this.maxNumber;
-        }
-        return to;
-    }
-    /**
-     * Converts min-range from string to number for calculations
-     * @returns min-range of input as a number
-     */
-    get minRangeNumber() {
-        const minRange = parseFloat(this.minRange);
-        if (!this.minRange || isNaN(minRange)) {
-            return 0;
-        }
-        return minRange;
-    }
-    /**
-     * Number of decimal places used for displaying value
-     * Based on step or min decimal places
-     */
-    get decimalPlace() {
-        if (isDecimalNumber(this.stepRange) || isDecimalNumber(this.minNumber)) {
-            const stepDecimal = countDecimalPlace(this.stepRange);
-            const minDecimal = countDecimalPlace(this.minNumber);
-            return stepDecimal > minDecimal ? stepDecimal : minDecimal;
-        }
-        return 0;
-    }
-    /**
-     * Return hide/show input field state
-     * @returns true if showInputField value is exist
-     */
-    get isShowInputField() {
-        return this.showInputField !== null && this.showInputField !== undefined;
-    }
-    constructor() {
-        super();
-        /**
-         * Whether if the thumb is being drag
-         */
-        this.dragging = false;
-        this.valuePrevious = '';
-        this.fromPrevious = '';
-        this.toPrevious = '';
-        this.valuePreviousInput = ''; // dynamically accessed
-        this.fromPreviousInput = ''; // dynamically accessed
-        this.toPreviousInput = ''; // dynamically accessed
-        /**
-         * Specified size of increment or decrement jump between value.
-         */
-        this.step = '1';
-        /**
-         * Set minimum value of slider.
-         */
-        this.min = '0';
-        /**
-         * Set maximum value of slider.
-         */
-        this.max = '100';
-        /**
-         * Uses with `range`. Low value of slider in range mode.
-         */
-        this.from = '0';
-        /**
-         * Uses with `range`. High value of slider in range mode
-         */
-        this.to = '100';
-        /**
-         * Set slider appearances to show pin mode.
-         * @ignore
-         * NOTE: Pin isn't applicable in Halo. Hide this from document
-         */
-        this.pin = false;
-        /**
-         * Set slider to range mode. Instead of a single value, slider will provide `from` and `to`.
-         */
-        this.range = false;
-        /**
-         * Show steps marker on slider.
-         */
-        this.showSteps = false;
-        /**
-         * Show input number field.
-         */
-        this.showInputField = null;
-        /**
-         * Uses with `range`. Set minimum allowance value (distance) between `from` and `to`.
-         */
-        this.minRange = '0';
-        /**
-         * Slider element reference
-         */
-        this.sliderRef = createRef();
-        /**
-         * Slider's track reference
-         */
-        this.trackRef = createRef();
-        /**
-         * From value thumb reference, rendered only in range mode
-         */
-        this.fromThumbRef = createRef();
-        /**
-         * To value thumb reference, rendered only in range mode
-         */
-        this.toThumbRef = createRef();
-        /**
-         * Value thumb reference
-         */
-        this.valueThumbRef = createRef();
-        /**
-         * Current focused thumb
-         */
-        this.activeThumb = null;
-        /**
-         * Thumb that may involves data changes
-         */
-        this.changedThumb = null;
-        /**
-         * @ignore
-         */
-        this.onDrag = this.onDrag.bind(this);
-        /**
-         * @ignore
-         */
-        this.onDragStart = this.onDragStart.bind(this);
-        /**
-         * @ignore
-         */
-        this.onDragEnd = this.onDragEnd.bind(this);
-        /**
-         * @ignore
-         */
-        this.onKeyDown = this.onKeyDown.bind(this);
-    }
-    /**
-     * On first updated lifecycle
-     * @param changedProperties changed properties
-     * @returns {void}
-     */
-    firstUpdated(changedProperties) {
-        super.firstUpdated(changedProperties);
-        this.prepareValues();
-        this.prepareThumbs();
-        this.prepareSliderTrack();
-    }
-    /**
-     * On willUpdate lifecycle
-     * @param changedProperties changed properties
-     * @returns {void}
-     */
-    willUpdate(changedProperties) {
-        super.willUpdate(changedProperties);
-        if ((changedProperties.has('disabled') && changedProperties.get('disabled') !== undefined) ||
-            (changedProperties.has('readonly') && changedProperties.get('readonly') !== undefined)) {
-            this.prepareSliderTrack();
-        }
-        changedProperties.forEach((_, changedProperty) => {
-            if (['value', 'min', 'max', 'from', 'to', 'step', 'minRange'].includes(changedProperty)) {
-                this.showWarningInvalidProperty(changedProperty);
-            }
-        });
-    }
-    /**
-     * On updated lifecycle
-     * @param changedProperties changed properties
-     * @returns {void}
-     */
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (changedProperties.has('value')) {
-            this.onValueChange();
-        }
-        if (changedProperties.has('min')) {
-            this.onMinChange(changedProperties.get('min'));
-        }
-        if (changedProperties.has('max')) {
-            this.onMaxChange(changedProperties.get('max'));
-        }
-        if (this.range) {
-            if (changedProperties.has('from')) {
-                this.onFromValueChange();
-            }
-            if (changedProperties.has('to')) {
-                this.onToValueChange();
-            }
-        }
-        if (changedProperties.has('step')) {
-            this.onStepChange();
-        }
-        if (changedProperties.has('minRange')) {
-            this.onMinRangeChange();
-        }
-        if (changedProperties.has('range')) {
-            this.prepareValues();
-            this.prepareThumbs();
-        }
-    }
-    /**
-     * Show Warning a warning message invalid property
-     * @param propName value for checking
-     * @returns {void}
-     */
-    showWarningInvalidProperty(propName) {
-        let isValid = true;
-        let message = '';
-        if (propName === 'value') {
-            isValid = this.isValueInBoundary(this.valueNumber, '');
-            message = 'value should be between min and max.';
-        }
-        else if (propName === 'min') {
-            isValid = this.minNumber <= this.maxNumber;
-            message = 'value should be less than max.';
-        }
-        else if (propName === 'max') {
-            isValid = this.maxNumber >= this.minNumber;
-            message = 'value should be more than min.';
-        }
-        else if (propName === 'from' && this.range) {
-            isValid = this.fromNumber >= this.minNumber && this.fromNumber <= this.toNumber;
-            message = 'value should be more than min and less than to.';
-        }
-        else if (propName === 'to' && this.range) {
-            isValid = this.toNumber <= this.maxNumber && this.toNumber >= this.fromNumber;
-            message = 'value should be less than max and more than from.';
-        }
-        else if (propName === 'step') {
-            isValid = this.maxNumber - this.minNumber >= this.stepNumber;
-            message = 'value should be between min and max.';
-        }
-        else if (propName === 'minRange' && this.minRangeNumber > 0) {
-            const distanceFromTo = Math.abs(this.toNumber - this.fromNumber);
-            const distanceMinMax = Math.abs(this.maxNumber - this.minNumber);
-            isValid = distanceMinMax >= this.minRangeNumber && distanceFromTo >= this.minRangeNumber;
-            message = 'value should be less than distance from and to, min and max.';
-        }
-        if (!isValid) {
-            new WarningNotice(`${this.localName}: Invalid ${propName} provided, The correct ${propName} ${message}`).show();
-        }
-    }
-    /**
-     * Initialises slider value properties
-     * @returns {void}
-     */
-    prepareValues() {
-        if (this.minNumber !== this.maxNumber) {
-            if (this.range) {
-                if (this.minRangeNumber) {
-                    const distanceFromTo = Math.abs(this.toNumber - this.fromNumber);
-                    const clampValueFrom = this.toNumber - this.minRangeNumber;
-                    if (this.minRangeNumber > distanceFromTo) {
-                        if (clampValueFrom < this.minNumber) {
-                            this.to = (this.fromNumber + this.minRangeNumber).toString();
-                        }
-                        else {
-                            this.from = clampValueFrom.toString();
-                        }
-                    }
-                }
-                else {
-                    this.from = clamp(this.fromNumber, this.minNumber, this.toNumber);
-                    this.to = clamp(this.toNumber, this.fromNumber, this.maxNumber);
-                }
-            }
-            else {
-                this.value = clamp(this.valueNumber, this.minNumber, this.maxNumber);
-            }
-        }
-        else if (this.range) {
-            this.from = this.min;
-            this.to = this.max;
-        }
-        else {
-            this.value = this.min;
-        }
-        this.valuePrevious = this.value;
-        this.toPrevious = this.to;
-        this.fromPrevious = this.from;
-    }
-    /**
-     * Add event listeners to thumbs depending on mode
-     * @returns {void}
-     */
-    prepareThumbs() {
-        if (this.range) {
-            this.fromThumbRef.value?.addEventListener('keydown', this.onKeyDown);
-            this.fromThumbRef.value?.addEventListener('drag', preventDefault);
-            this.fromThumbRef.value?.addEventListener('dragstart', preventDefault);
-            this.fromThumbRef.value?.addEventListener('dragend', preventDefault);
-            this.toThumbRef.value?.addEventListener('keydown', this.onKeyDown);
-            this.toThumbRef.value?.addEventListener('drag', preventDefault);
-            this.toThumbRef.value?.addEventListener('dragstart', preventDefault);
-            this.toThumbRef.value?.addEventListener('dragend', preventDefault);
-        }
-        else {
-            this.valueThumbRef.value?.addEventListener('keydown', this.onKeyDown);
-            this.valueThumbRef.value?.addEventListener('drag', preventDefault);
-            this.valueThumbRef.value?.addEventListener('dragstart', preventDefault);
-            this.valueThumbRef.value?.addEventListener('dragend', preventDefault);
-        }
-    }
-    /**
-     * Add or remove event listener on slider track depending on slider disabled and readonly state
-     * @returns {void}
-     */
-    prepareSliderTrack() {
-        if (this.disabled || this.readonly) {
-            this.sliderRef.value?.removeEventListener('mousedown', this.onDragStart);
-            this.sliderRef.value?.removeEventListener('touchstart', this.onDragStart);
-        }
-        else {
-            this.sliderRef.value?.addEventListener('mousedown', this.onDragStart, { passive: true });
-            this.sliderRef.value?.addEventListener('touchstart', this.onDragStart, { passive: true });
-        }
-    }
-    /**
-     * Get slider data name from keyboard event target
-     * @param target target element
-     * @returns Slider data name
-     */
-    getThumbName(target) {
-        switch (target) {
-            case this.fromThumbRef.value:
-                return SliderDataName.from;
-            case this.toThumbRef.value:
-                return SliderDataName.to;
-            case this.valueThumbRef.value:
-                return SliderDataName.value;
-            default:
-                return null;
-        }
-    }
-    /**
-     * Handles key down event on thumbs
-     * @param event Keyboard event
-     * @returns {void}
-     */
-    onKeyDown(event) {
-        if (this.readonly || event.defaultPrevented || this.minNumber >= this.maxNumber) {
-            return;
-        }
-        // Ignore special keys
-        if (event.shiftKey || event.ctrlKey || event.altKey || event.metaKey) {
-            return;
-        }
-        const thumbName = this.getThumbName(event.target);
-        if (!thumbName) {
-            return;
-        }
-        this.changedThumb = event.target;
-        switch (event.key) {
-            case 'ArrowDown':
-            case 'Down':
-            case 'ArrowLeft':
-            case 'Left':
-                this.onApplyStep(Direction.Down, thumbName);
-                break;
-            case 'ArrowUp':
-            case 'Up':
-            case 'ArrowRight':
-            case 'Right':
-                this.onApplyStep(Direction.Up, thumbName);
-                break;
-            case 'Home':
-                this.onApplyMin(thumbName);
-                break;
-            case 'End':
-                this.onApplyMax(thumbName);
-                break;
-            default:
-                return;
-        }
-        event.preventDefault();
-    }
-    /**
-     * Set thumb to minimum value possible
-     * @param data type of data to change
-     * @returns {void}
-     */
-    onApplyMin(data) {
-        let position;
-        if (data === SliderDataName.from || data === SliderDataName.value) {
-            position = this.calculatePosition(this.minNumber, 1);
-        }
-        else {
-            position = this.calculatePosition(this.fromNumber + this.minRangeNumber, 1);
-        }
-        const possibleValue = this.getNearestPossibleValue(position);
-        const value = this.getValueFromPosition(possibleValue);
-        this.persistChangedData(value);
-        this.dispatchDataChangedEvent();
-    }
-    /**
-     * Set thumb to maximum value possible
-     * @param data type of data to change
-     * @returns {void}
-     */
-    onApplyMax(data) {
-        let position;
-        if (data === SliderDataName.to || data === SliderDataName.value) {
-            position = this.calculatePosition(this.maxNumber, 1);
-        }
-        else {
-            position = this.calculatePosition(this.toNumber - this.minRangeNumber, 1);
-        }
-        const possibleValue = this.getNearestPossibleValue(position);
-        const value = this.getValueFromPosition(possibleValue);
-        this.persistChangedData(value);
-        this.dispatchDataChangedEvent();
-    }
-    /**
-     * Increase or decrease value depending on direction
-     * Then fires value change event
-     * @param direction Up or Down
-     * @param data type of data to change
-     * @returns {void}
-     */
-    onApplyStep(direction, data) {
-        // Get current thumb position and step in percentage format
-        const thumbPosition = this.calculatePosition(this[`${data}Number`], 1);
-        const step = this.calculatePosition(this.minNumber + this.stepRange, 1);
-        const possibleValue = direction === Direction.Up ? thumbPosition + step : thumbPosition - step;
-        const nearestPossibleValue = this.getNearestPossibleValue(possibleValue);
-        const value = this.getValueFromPosition(nearestPossibleValue);
-        this.persistChangedData(value);
-        this.dispatchDataChangedEvent();
-    }
-    /**
-     * Calculate thumb position based on value and multiplier
-     * @param value decimal fraction value
-     * @param multiplier defaults to 100
-     * @returns thumb position as a fraction of 100
-     */
-    calculatePosition(value, multiplier = 100) {
-        const position = Math.abs(((value - this.minNumber) / (this.maxNumber - this.minNumber)) * multiplier);
-        if (position > multiplier) {
-            return multiplier;
-        }
-        return position;
-    }
-    /**
-     * Adds active attribute used in styling
-     * @param event focus event
-     * @returns {void}
-     */
-    onThumbFocus(event) {
-        this.activeThumb = event.target;
-    }
-    /**
-     * Removes active attribute used in styling
-     * @param event focus event
-     * @returns {void}
-     */
-    onThumbBlur() {
-        this.activeThumb = null;
-    }
-    /**
-     * On number-field blur
-     * @param event focus event
-     * @returns {void}
-     */
-    onNumberFieldBlur(event) {
-        if (this.readonly) {
-            return;
-        }
-        const { value, name } = event.target;
-        const currentData = name;
-        const previousData = `${name}Previous`;
-        if (value && this[currentData] !== value) {
-            this.updateNotifyProperty(currentData, value);
-            this[previousData] = value;
-        }
-        event.preventDefault();
-    }
-    /**
-     * On number-field input
-     * @param event input event
-     * @returns {void}
-     */
-    onNumberFieldInput(event) {
-        if (this.readonly) {
-            return;
-        }
-        const { value, name } = event.target;
-        const currentData = name;
-        this.notifyPropertyInput(currentData, value);
-        event.preventDefault();
-        event.stopPropagation();
-    }
-    /**
-     * On number-field keydown
-     * @param event keyboard event
-     * @returns {void}
-     */
-    onNumberFieldKeyDown(event) {
-        if (this.readonly || this.disabled) {
-            return;
-        }
-        if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
-            event.target.blur();
-        }
-    }
-    /**
-     * Update notify property by input name attribute
-     * @param name name input attribute
-     * @param value input value
-     * @returns {void}
-     */
-    updateNotifyProperty(name, value) {
-        let shouldUpdate = false;
-        if (name === SliderDataName.to) {
-            shouldUpdate = this.isValueInBoundary(Number(value), SliderDataName.to);
-        }
-        else {
-            shouldUpdate = this.isValueInBoundary(Number(value), '');
-        }
-        if (shouldUpdate) {
-            this[name] = value;
-            this.notifyPropertyChange(name, value);
-        }
-        else {
-            const inputName = `${name}Input`;
-            this[inputName].value = this[name];
-        }
-    }
-    /**
-     * Dispatch data {value, from, to} changed event
-     * @returns {void}
-     */
-    dispatchDataChangedEvent() {
-        const name = this.changedThumb?.getAttribute('name') || '';
-        const currentData = name;
-        const previousData = `${name}Previous`;
-        // Dispatch event only when value or from or to changed
-        if (this[previousData] !== this[currentData]) {
-            this.notifyPropertyChange(name, this[currentData]);
-            this[previousData] = this[currentData];
-        }
-    }
-    /**
-     * Dispatch data {input, from-input, to-input} changing event
-     * @returns {void}
-     */
-    dispatchDataInputEvent() {
-        const name = this.changedThumb?.getAttribute('name') || '';
-        const currentData = name;
-        const previousDataInput = `${name}PreviousInput`;
-        // Dispatch event only when changing the input value
-        if (this[previousDataInput] !== this[currentData]) {
-            this.notifyPropertyInput(name, this[currentData]);
-            this[previousDataInput] = this[currentData];
-        }
-    }
-    /**
-     * Start dragging event on slider
-     * @param event event dragstart
-     * @returns {void}
-     */
-    onDragStart(event) {
-        this.dragging = true;
-        this.classList.add('grabbable');
-        if (this.range) {
-            const mousePosition = this.getMousePosition(event);
-            const relativeMousePosition = (this.maxNumber - this.minNumber) * mousePosition + this.minNumber;
-            const distanceFrom = Math.abs(relativeMousePosition - this.fromNumber);
-            const distanceTo = Math.abs(relativeMousePosition - this.toNumber);
-            if (distanceFrom < distanceTo) {
-                this.changedThumb = this.fromThumbRef.value;
-                this.fromPreviousInput = this.from;
-            }
-            else if (distanceFrom > distanceTo) {
-                this.changedThumb = this.toThumbRef.value;
-                this.toPreviousInput = this.to;
-            }
-            // When from === to, use latest value of changedThumb and z-index will determine thumb on top
-        }
-        else {
-            this.changedThumb = this.valueThumbRef.value;
-            this.valuePreviousInput = this.value;
-        }
-        this.onDrag(event);
-        this.validateNumberField();
-        if (event.changedTouches) {
-            this.addEventListener('touchmove', this.onDrag);
-            this.addEventListener('touchend', this.onDragEnd);
-        }
-        else {
-            window.addEventListener('mousemove', this.onDrag);
-            window.addEventListener('mouseup', this.onDragEnd);
-        }
-    }
-    /**
-     * Get mouse position in percentage value
-     * @param event event mousemove and touchmove
-     * @returns mouse position by percentage
-     */
-    getMousePosition(event) {
-        const sliderRect = this.trackRef.value?.getBoundingClientRect();
-        if (!sliderRect) {
-            return 1;
-        }
-        // check drag desktop or mobile
-        const pageX = event.changedTouches
-            ? event.changedTouches[0].pageX
-            : event.pageX;
-        const positionSize = pageX - sliderRect.left;
-        if (positionSize <= sliderRect.width) {
-            return Math.min(Math.max((pageX - sliderRect.left) / sliderRect.width, 0), 1);
-        }
-        else {
-            return 1;
-        }
-    }
-    /**
-     * Dragging after on dragging start event
-     * @param event event mousemove and touchmove
-     * @returns {void}
-     */
-    onDrag(event) {
-        if (this.minNumber === this.maxNumber) {
-            return;
-        }
-        const thumbPosition = this.getMousePosition(event);
-        const nearestValue = this.getNearestPossibleValue(thumbPosition);
-        if (nearestValue > 1) {
-            return;
-        }
-        const newThumbPosition = this.stepRange !== 0 ? nearestValue : thumbPosition;
-        const value = this.getValueFromPosition(newThumbPosition);
-        this.persistChangedData(value);
-        this.dispatchDataInputEvent();
-    }
-    /**
-     * Saves changed data into correct field
-     * @param value value of changed data
-     * @returns {void}
-     */
-    persistChangedData(value) {
-        const newValue = this.format(value);
-        if (this.range) {
-            if (this.changedThumb === this.fromThumbRef.value) {
-                this.from = this.validateFrom(Number(newValue)).toString();
-            }
-            else {
-                this.to = this.validateTo(Number(newValue)).toString();
-            }
-        }
-        else {
-            this.value = newValue;
-        }
-    }
-    /**
-     * Validate and return FROM value within available range
-     * @param value from value
-     * @returns validated from value
-     */
-    validateFrom(value) {
-        const valueFrom = value + this.minRangeNumber;
-        if (valueFrom < this.toNumber && valueFrom >= this.minNumber) {
-            return value;
-        }
-        return this.toNumber - this.minRangeNumber;
-    }
-    /**
-     * Validate and return TO value within available range
-     * @param value to value
-     * @returns validated to value.
-     */
-    validateTo(value) {
-        const valueTo = value - this.minRangeNumber;
-        if (valueTo > this.fromNumber && valueTo <= this.maxNumber) {
-            return value;
-        }
-        return this.fromNumber + this.minRangeNumber;
-    }
-    /**
-     * Validate number field from changed thumb
-     * @returns {void}
-     */
-    validateNumberField() {
-        if (this.isShowInputField) {
-            const name = this.changedThumb?.getAttribute('name');
-            const numberField = this[`${name}Input`];
-            requestAnimationFrame(() => numberField.reportValidity());
-        }
-    }
-    /**
-     * Calculate the nearest possible step value depending on step interval
-     * @param thumbPosition current thumb position in fraction
-     * @returns nearest available slider step in fraction
-     */
-    getNearestPossibleValue(thumbPosition) {
-        const stepSize = this.calculatePosition(this.minNumber + this.stepRange, 1);
-        const nearestValue = Math.round(thumbPosition / stepSize) * stepSize;
-        if (thumbPosition <= nearestValue + stepSize / 2) {
-            if (nearestValue <= 1) {
-                return nearestValue;
-            }
-            return nearestValue - stepSize;
-        }
-        return nearestValue + stepSize;
-    }
-    /**
-     * Get slider value from thumb position
-     * @param position thumb position
-     * @returns calculated value
-     */
-    getValueFromPosition(position) {
-        const value = this.minNumber + position * (this.maxNumber - this.minNumber);
-        // if value is outside boundary, set to boundary
-        if (value >= this.maxNumber) {
-            return this.maxNumber;
-        }
-        else if (value <= this.minNumber) {
-            return this.minNumber;
-        }
-        else {
-            return value;
-        }
-    }
-    /**
-     * Format value to display in both integer and fraction cases
-     * @param value value before use display
-     * @returns formatted value
-     */
-    format(value) {
-        if (isDecimalNumber(value) && countDecimalPlace(value) > this.decimalPlace) {
-            return value.toFixed(this.decimalPlace);
-        }
-        return value.toString();
-    }
-    /**
-     * End dragging event and remove dragging event
-     * @param event event mouseup and touchmove
-     * @returns {void}
-     */
-    onDragEnd(event) {
-        if (this.dragging) {
-            this.dragging = false;
-            const touchEvent = event;
-            if (touchEvent.changedTouches) {
-                this.removeEventListener('touchmove', this.onDrag);
-                this.removeEventListener('touchend', this.onDragEnd);
-            }
-            else {
-                window.removeEventListener('mousemove', this.onDrag);
-                window.removeEventListener('mouseup', this.onDragEnd);
-            }
-            this.classList.remove('grabbable');
-            if (this.classList.length === 0) {
-                this.removeAttribute('class');
-            }
-            if (!touchEvent.changedTouches) {
-                event.preventDefault();
-            }
-            this.dispatchDataChangedEvent();
-        }
-    }
-    /**
-     * Value observer
-     * @returns {void}
-     */
-    onValueChange() {
-        if (this.readonly) {
-            const thumbPosition = this.calculatePosition(this.valueNumber, 1);
-            const nearestPossibleValue = this.getNearestPossibleValue(thumbPosition);
-            const value = this.getValueFromPosition(this.stepRange === 0 ? thumbPosition : nearestPossibleValue);
-            this.value = this.format(value);
-        }
-        else if (this.isValueInBoundary(this.valueNumber, '')) {
-            this.value = this.format(this.valueNumber);
-        }
-        else if (this.valueNumber < this.minNumber) {
-            this.value = this.min;
-        }
-        else if (this.valueNumber > this.maxNumber) {
-            this.value = this.max;
-        }
-        if (!this.dragging) {
-            // Update internal `valuePrevious` when `value` was programatically set by user.
-            this.valuePrevious = this.value;
-        }
-    }
-    /**
-     * From value observer
-     * @returns {void}
-     */
-    onFromValueChange() {
-        if (this.isValueInBoundary(this.fromNumber, SliderDataName.from)) {
-            this.from = this.format(this.fromNumber);
-        }
-        else {
-            // if value is outside boundary, set to boundary
-            this.from = clamp(this.fromNumber, this.minNumber, this.maxNumber);
-            if (this.fromNumber > this.toNumber) {
-                this.from = this.to;
-            }
-            if (this.minRangeNumber) {
-                const distanceFromTo = Math.abs(this.toNumber - this.fromNumber);
-                const distanceMin = this.toNumber - this.minRangeNumber;
-                if (this.minRangeNumber > distanceFromTo && distanceMin > this.minNumber) {
-                    this.from = distanceMin.toString();
-                }
-            }
-        }
-        if (!this.dragging) {
-            this.fromPrevious = this.from;
-        }
-    }
-    /**
-     * Check if value is inside min / max boundary
-     * @param value value is checking
-     * @param valueFor notation variable binding if range === true
-     * @returns true if value and step inside a boundary
-     */
-    isValueInBoundary(value, valueFor) {
-        if (this.minNumber > this.maxNumber) {
-            return false;
-        }
-        // Check if value is in range
-        if (value < this.minNumber || value > this.maxNumber) {
-            return false;
-        }
-        if (this.range) {
-            if (valueFor === SliderDataName.to && value < this.fromNumber + this.minRangeNumber) {
-                return false;
-            }
-            else if (valueFor === SliderDataName.from && value > this.toNumber - this.minRangeNumber) {
-                return false;
-            }
-        }
-        return true;
-    }
-    /**
-     * To value observer
-     * @returns {void}
-     */
-    onToValueChange() {
-        if (this.isValueInBoundary(this.toNumber, SliderDataName.to)) {
-            this.to = this.format(this.toNumber);
-        }
-        else {
-            // if value is outside boundary, set to boundary
-            this.to = clamp(this.toNumber, this.minNumber, this.maxNumber);
-            if (this.toNumber < this.fromNumber) {
-                this.to = this.from;
-            }
-            if (this.minRangeNumber) {
-                const distanceFromTo = Math.abs(this.toNumber - this.fromNumber);
-                const distanceMax = this.fromNumber + this.minRangeNumber;
-                if (this.minRangeNumber > distanceFromTo && distanceMax < this.maxNumber) {
-                    this.to = distanceMax.toString();
-                }
-            }
-        }
-        if (!this.dragging) {
-            this.toPrevious = this.to;
-        }
-    }
-    /**
-     * Step observer
-     * @returns {void}
-     */
-    onStepChange() {
-        this.step = this.stepNumber.toString();
-    }
-    /**
-     * Min range observer
-     * @returns {void}
-     */
-    onMinRangeChange() {
-        const valueMinRange = Math.abs(this.minRangeNumber);
-        const maximumRangeMinMax = Math.abs(this.maxNumber - this.minNumber);
-        if (valueMinRange && valueMinRange >= this.stepNumber) {
-            if (valueMinRange <= maximumRangeMinMax) {
-                this.minRange = valueMinRange.toString();
-            }
-            else {
-                this.minRange = maximumRangeMinMax.toString();
-                this.from = this.min;
-                this.to = this.max;
-            }
-        }
-        else {
-            // Reset min-range when min-range less step
-            this.minRange = '0';
-        }
-    }
-    /**
-     * Min observer
-     * @param oldValue old value of min property
-     * @returns {void}
-     */
-    onMinChange(oldValue) {
-        this.min = this.minNumber.toString();
-        if (this.minNumber > this.maxNumber) {
-            this.min = this.max;
-            return;
-        }
-        if (this.range) {
-            if (this.minNumber <= this.toNumber - this.minRangeNumber) {
-                this.from = clamp(this.fromNumber, this.minNumber, this.toNumber);
-            }
-            else if (oldValue) {
-                this.min = oldValue;
-            }
-        }
-        else {
-            this.value = clamp(this.valueNumber, this.minNumber, this.maxNumber);
-        }
-    }
-    /**
-     * Max observer
-     * @param oldValue old value of max property
-     * @returns {void}
-     */
-    onMaxChange(oldValue) {
-        this.max = this.maxNumber.toString();
-        if (this.maxNumber < this.minNumber) {
-            this.max = this.min;
-            return;
-        }
-        if (this.range) {
-            if (this.maxNumber >= this.fromNumber + this.minRangeNumber) {
-                this.to = clamp(this.toNumber, this.fromNumber, this.maxNumber);
-            }
-            else if (oldValue) {
-                this.max = oldValue;
-            }
-        }
-        else {
-            this.value = clamp(this.valueNumber, this.minNumber, this.maxNumber);
-        }
-    }
-    /**
-     * Implement `render` Track template.
-     * @param range show range slider
-     * @returns Track template
-     */
-    renderTrack(range) {
-        const stepContainerSize = this.calculatePosition(this.minNumber + this.stepNumber);
-        const translateX = stepContainerSize / 2;
-        const stepsStyle = {
-            transform: `translateX(${translateX}%)`,
-            backgroundSize: `${stepContainerSize}% 100%`
-        };
-        const stepContainerStyle = { transform: `translateX(-${translateX}%)` };
-        const trackFillStyle = range
-            ? {
-                width: `${this.calculatePosition(this.toNumber) - this.calculatePosition(this.fromNumber)}%`,
-                left: `${this.calculatePosition(this.fromNumber)}%`
-            }
-            : { width: `${this.calculatePosition(Number(this.value))}%` };
-        return html `
-      <div part="track-wrapper" ${ref(this.trackRef)}>
-        <div part="track-fill" style=${styleMap(trackFillStyle)}></div>
-        <div part="step-container" style=${styleMap(stepContainerStyle)}>
-          <div part="step" style=${styleMap(stepsStyle)}></div>
-        </div>
-      </div>
-    `;
-    }
-    /**
-     * Implement `render` Thumb template.
-     * @param value thumb value in track
-     * @param thumbPosition thumb position in track
-     * @param name name of thumb to render
-     * @returns Thumb template
-     */
-    thumbTemplate(value, thumbPosition, name) {
-        const isActive = this.activeThumb?.getAttribute('name') === name;
-        const isChanged = this.changedThumb?.getAttribute('name') === name;
-        let valueNow = this.value;
-        let valueMin = this.min;
-        let valueMax = this.max;
-        if (this.range) {
-            if (name === SliderDataName.from) {
-                valueNow = this.from;
-                valueMax = String(this.toNumber - this.minRangeNumber);
-            }
-            else {
-                valueNow = this.to;
-                valueMin = String(this.fromNumber + this.minRangeNumber);
-            }
-        }
-        const thumbZIndex = this.range ? (isChanged ? '4' : '3') : null;
-        const thumbStyle = { left: `${thumbPosition}%`, zIndex: thumbZIndex };
-        return html `
-      <div
-        ${ref(this[`${name}ThumbRef`])}
-        @focus=${this.onThumbFocus}
-        @blur=${this.onThumbBlur}
-        active=${isActive || nothing}
-        name="${name}"
-        role="slider"
-        aria-label="${this.t(name.toUpperCase())}"
-        tabindex="1"
-        aria-valuemin=${valueMin}
-        aria-valuemax=${valueMax}
-        aria-valuenow=${valueNow}
-        part="thumb-container"
-        style=${styleMap(thumbStyle)}
-      >
-        <div part="pin">
-          <span part="pin-value-marker">${value}</span>
-        </div>
-        <div part="thumb" draggable="true"></div>
-      </div>
-    `;
-    }
-    /**
-     * Renders thumb template depending on parameter
-     * @param from thumb value start in track
-     * @param to thumb value end in track (optional)
-     * @returns Thumbs template
-     */
-    renderThumb(from, to) {
-        return html `
-      ${this.thumbTemplate(from, this.calculatePosition(from), to !== undefined ? SliderDataName.from : SliderDataName.value)}
-      ${to !== undefined ? this.thumbTemplate(to, this.calculatePosition(to), SliderDataName.to) : nothing}
-    `;
-    }
-    /**
-     * Implement `render` number field has template.
-     * @param value value in the slider for binding in the input value
-     * @param name name input value
-     * @returns {TemplateResult} number field template
-     */
-    renderNumberField(value, name) {
-        /**
-         * Hiding number-field from screen reader and tabbing sequence because it's redundant,
-         * and complicate the accessibility implementation.
-         */
-        return html `
-      <ef-number-field
-        tabindex="-1"
-        aria-hidden="true"
-        @blur=${this.onNumberFieldBlur}
-        @keydown=${this.onNumberFieldKeyDown}
-        @input=${this.onNumberFieldInput}
-        part="input"
-        name="${name}"
-        no-spinner
-        .value="${value}"
-        min="${this.min}"
-        max="${this.max}"
-        step="${this.step}"
-        ?disabled="${this.disabled}"
-        ?readonly="${this.readonly || this.showInputField === 'readonly'}"
-      ></ef-number-field>
-    `;
-    }
-    /**
-     * Implement `render` slider template.
-     * @returns Slider template
-     */
-    render() {
-        return html `
-      ${this.range && this.isShowInputField ? this.renderNumberField(this.from, SliderDataName.from) : null}
-      <div part="slider-wrapper">
-        <div part="slider" ${ref(this.sliderRef)}>
-          ${this.renderTrack(this.range)}
-          ${this.range
-            ? this.renderThumb(this.fromNumber, this.toNumber)
-            : this.renderThumb(this.valueNumber)}
-        </div>
-      </div>
-      ${this.range && this.isShowInputField ? this.renderNumberField(this.to, SliderDataName.to) : null}
-      ${!this.range && this.isShowInputField
-            ? this.renderNumberField(this.value, SliderDataName.value)
-            : null}
-    `;
-    }
-};
-__decorate([
-    property({ type: String })
-], Slider.prototype, "step", void 0);
-__decorate([
-    property({ type: String })
-], Slider.prototype, "min", void 0);
-__decorate([
-    property({ type: String })
-], Slider.prototype, "max", void 0);
-__decorate([
-    property({ type: String })
-], Slider.prototype, "from", void 0);
-__decorate([
-    property({ type: String })
-], Slider.prototype, "to", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Slider.prototype, "pin", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Slider.prototype, "range", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'show-steps' })
-], Slider.prototype, "showSteps", void 0);
-__decorate([
-    property({ type: String, reflect: true, attribute: 'show-input-field' })
-], Slider.prototype, "showInputField", void 0);
-__decorate([
-    property({ type: String, attribute: 'min-range' })
-], Slider.prototype, "minRange", void 0);
-__decorate([
-    translate({ scope: 'ef-slider' })
-], Slider.prototype, "t", void 0);
-__decorate([
-    query('ef-number-field[name=value]')
-], Slider.prototype, "valueInput", void 0);
-__decorate([
-    query('ef-number-field[name=from]')
-], Slider.prototype, "fromInput", void 0);
-__decorate([
-    query('ef-number-field[name=to]')
-], Slider.prototype, "toInput", void 0);
-__decorate([
-    state()
-], Slider.prototype, "activeThumb", void 0);
-__decorate([
-    state()
-], Slider.prototype, "changedThumb", void 0);
-Slider = __decorate([
-    customElement('ef-slider')
-], Slider);
-export { Slider };
+export { Slider } from './elements/slider.js';
+export { SliderMarker } from './elements/slider-marker.js';