@refinitiv-ui/elements 5.3.3 → 5.7.0

package/lib/number-field/index.js

@@ -0,0 +1,707 @@
+import { __decorate } from "tslib";
+import { ControlElement, html, css, FocusedPropertyKey } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
+import { VERSION } from '../version.js';
+import '../icon/index.js';
+const NUMBER_PATTERN = '^[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?$';
+const DEFAULT_STEP_BASE = 1;
+const ANY_STEP = 'any';
+var Direction;
+(function (Direction) {
+    Direction[Direction["Up"] = 1] = "Up";
+    Direction[Direction["Down"] = -1] = "Down";
+})(Direction || (Direction = {}));
+/**
+ * Form control element for numbers
+ *
+ * @fires value-changed - Dispatched when value changes
+ * @fires error-changed - Dispatched when error state changes
+ *
+ * @attr {string} value - Input's default value
+ * @prop {string} [value=] - Input's value
+ *
+ * @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
+ */
+let NumberField = class NumberField extends ControlElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Set placeholder text
+         */
+        this.placeholder = null;
+        /**
+         * Set spinner's visibility
+         */
+        this.noSpinner = false;
+        /**
+         * Set step value
+         */
+        this.step = null;
+        /**
+         * Set minimum value.
+         * This value must be less than or equal to the value of the `max` attribute
+         */
+        this.min = null;
+        /**
+         * Set maximum value.
+         * This value must be greater than or equal to the value of the `min` attribute
+         */
+        this.max = null;
+        /**
+         * Set state to transparent
+         */
+        this.transparent = false;
+        /**
+         * Set state to error
+         */
+        this.error = false;
+        /**
+         * Set state to warning
+         */
+        this.warning = false;
+        this.interimValueState = false; // make sure that internal input field value is updated only on external value change
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * A `CSSResultGroup` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @return CSS template
+     */
+    static get styles() {
+        return css `
+      :host {
+        display: inline-block;
+      }
+      :host(:focus), :host input:focus {
+        outline: none;
+      }
+      :host([transparent]) {
+        background: none !important;
+        border: none !important;
+      }
+      [part=input] {
+        font: inherit;
+        background: none;
+        color: currentColor;
+        border: none;
+        text-align: inherit;
+      }
+      [part=spinner]{
+        display: flex;
+        flex-direction: column;
+      }
+      [part=spinner-up], [part=spinner-down] {
+        display: flex;
+        height: 50%;
+        cursor: pointer;
+        user-select: none;
+      }
+      [part^=spinner][disabled],
+      [part^=spinner][readonly] {
+        cursor: default;
+      }
+    `;
+    }
+    /**
+    * The value of the number entered into the input.
+    * @param value number-field value
+    */
+    set value(value) {
+        this.interimValueState = true;
+        super.value = value;
+    }
+    get value() {
+        return this.valueAsNumberString(this.internalValue);
+    }
+    /**
+     * Returns the value of the element, interpreted as double number
+     */
+    get valueAsNumber() {
+        return this.stringToNumber(this.internalValue);
+    }
+    /**
+     * Updates the element
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
+    update(changedProperties) {
+        // This code probably should not be here, as validation must be instantiated by the app developer
+        // Keep the element inline with others for now
+        if (changedProperties.has(FocusedPropertyKey) && !this.focused) {
+            this.reportValidity();
+        }
+        super.update(changedProperties);
+    }
+    /**
+     * Called when the element’s DOM has been updated and rendered
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
+    updated(changedProperties) {
+        // cannot use property binding on value as it may override the current input of the control
+        // set it manually only if value has been updated externally
+        // all internal input changes should not update input value
+        if (changedProperties.has('value') && this.interimValueState) {
+            this.inputValue = this.value;
+            this.interimValueState = false;
+        }
+    }
+    /**
+     * Convert string to number
+     * @param value value to convert
+     * @returns NaN if string is an invalid number or Infinity or empty string;
+     */
+    stringToNumber(value) {
+        return value && this.isValidValue(value) ? Number(value) : NaN;
+    }
+    /**
+     * Convert a float number to a fixed number
+     * @param value Value to convert
+     * @param [decimals] optional decimals. Default is based on step base and allowed value step
+     * @returns fixed number
+     */
+    toFixedNumber(value, decimals = this.stepDecimals) {
+        return Number(value.toFixed(decimals));
+    }
+    /**
+     * Convert step value from string to number or 'any'
+     * @returns step value of input as a number or 'any'
+     */
+    get stepValue() {
+        // special value as defined by HTML specs
+        if (String(this.step).toLowerCase() === ANY_STEP) {
+            return ANY_STEP;
+        }
+        const step = this.stringToNumber(this.step);
+        return isNaN(step) || step <= 0 ? DEFAULT_STEP_BASE : step;
+    }
+    /**
+     * Get the number of decimal places
+     * @param value Value to check
+     * @returns the number of decimal places
+     */
+    getDecimalPlace(value) {
+        if (Math.floor(value) === value || isNaN(value) || !isFinite(value)) {
+            return 0;
+        }
+        return value.toString().split('.')[1].length || 0;
+    }
+    /**
+     * Get number of decimals based on step base and allowed value step
+     * @returns decimals
+     */
+    get stepDecimals() {
+        return Math.max(this.getDecimalPlace(this.stepBase), this.getDecimalPlace(this.getAllowedValueStep()));
+    }
+    /**
+     * Check if passed value is a valid value
+     * @override
+     * @param value Value to check
+     * @returns {boolean} false if value is invalid
+     */
+    isValidValue(value) {
+        const number = Number(value);
+        return !isNaN(number) && isFinite(number);
+    }
+    /**
+     * Get value as valid number string.
+     * @param value A value to convert
+     * @returns string value
+     */
+    valueAsNumberString(value) {
+        return this.isValidValue(value) ? value : '';
+    }
+    /**
+     * Get either inputValue or actual value dependant on control state
+     * @returns string of input value
+     */
+    get internalValue() {
+        // cover the case when value getter is called before first render or in interim state
+        return this.interimValueState || !this.inputEl ? super.value : this.inputValue;
+    }
+    /**
+     * Get native input value
+     * @returns string of input value
+     */
+    get inputValue() {
+        return this.inputEl.value;
+    }
+    /**
+     * Set native input value
+     * @param value input's value
+     */
+    set inputValue(value) {
+        this.inputEl.value = value;
+    }
+    /**
+     * Handles key down input event
+     * @param event Key down event object
+     * @returns {void}
+     */
+    onNativeInputKeyDown(event) {
+        if (this.readonly || this.disabled || event.defaultPrevented) {
+            return;
+        }
+        switch (event.key) {
+            case 'Up':
+            case 'ArrowUp':
+                this.onApplyStep(Direction.Up);
+                break;
+            case 'Down':
+            case 'ArrowDown':
+                this.onApplyStep(Direction.Down);
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+    }
+    /**
+     * Run when spinner has been tapped
+     * @param event tap event
+     * @returns {void}
+     */
+    onSpinnerTap(event) {
+        if (this.disabled || this.readonly || event.defaultPrevented) {
+            return;
+        }
+        const target = event.target;
+        if (target === this.spinnerDownEl) {
+            this.onApplyStep(Direction.Down);
+        }
+        else if (target === this.spinnerUpEl) {
+            this.onApplyStep(Direction.Up);
+        }
+    }
+    /**
+     * Step down or up and notify value change
+     * @param direction Up or Down
+     * @returns {void}
+     */
+    onApplyStep(direction) {
+        try {
+            this.applyStepDirection(undefined, direction);
+            this.setSilentlyValueAndNotify();
+        }
+        catch (error) {
+            // According to specs stepDown/stepUp may fail for some invalid inputs
+            // do nothing and report nothing in that case
+        }
+    }
+    /**
+     * Run before input changes
+     * Prevent invalid characters
+     * @param event before input event
+     * @returns {void}
+     */
+    /* istanbul ignore next */
+    onNativeBeforeInputChange(event) {
+        // The event is not supported in IE11 and old browsers
+        // Therefore just try to prevent some of invalid characters to be entered
+        // but still do full validation on actual `input` and `change` events
+        const inputType = event.inputType;
+        // cover all insert types, such as type, paste, drag&drop and others
+        if (inputType.startsWith('insert')) {
+            const data = event.data || '';
+            const inputEl = this.inputEl;
+            const oldInput = this.inputValue;
+            // Calculate what could be the new input
+            const selectionStart = inputEl.selectionStart || 0;
+            const selectionEnd = inputEl.selectionEnd || 0;
+            const newInput = `${oldInput.substring(0, selectionStart)}${data}${oldInput.substring(selectionEnd)}`;
+            const validatedInput = this.stripeInvalidCharacters(newInput, oldInput, data);
+            const insertionData = validatedInput.slice(0, validatedInput.length - (oldInput.length - selectionEnd)).substring(selectionStart);
+            // Invalid characters or sequence of characters
+            if (!insertionData.length) {
+                event.preventDefault();
+                return;
+            }
+            if (insertionData !== data) {
+                // In theory here we should emulate the new input
+                // in practice we cannot as there is no API (apart of deprecated execCommand), so do nothing
+                // invalid input will be stripped out on `input` event handler, but that will break Undo logic
+            }
+        }
+    }
+    /**
+     * Triggers when native input value change with input event or change event
+     * @param event Input event
+     * @returns {void}
+     */
+    onNativeInputChange(event) {
+        const currentInput = this.inputValue;
+        const inputValue = this.stripeInvalidCharacters(currentInput, this.value, event.data || '');
+        if (inputValue !== currentInput) {
+            const inputEl = this.inputEl;
+            // we can only stripe the characters, so try to make the best guess where the cursor should be
+            const selectionStart = inputEl.selectionStart || 0;
+            const selectionEnd = inputEl.selectionEnd || 0;
+            this.inputValue = inputValue;
+            const diff = currentInput.length - inputValue.length;
+            inputEl.selectionStart = Math.max(selectionStart - diff, 0);
+            inputEl.selectionEnd = Math.max(selectionEnd - diff, 0);
+        }
+        this.setSilentlyValueAndNotify();
+    }
+    /**
+     * Stripe characters from input text based on previous input and data
+     * @param input The new input to process
+     * @param oldInput Previous input
+     * @param data The data that has been inserted
+     * @returns the input where characters are striped away
+     */
+    stripeInvalidCharacters(input = '', oldInput = '', data = '') {
+        // all these actions depends on new value and previous value trying to guess the best action
+        const dataHasDot = data.includes('.');
+        const dataHasE = data.search(/e/i) !== -1;
+        const dotIndex = input.indexOf('.');
+        const eIndex = input.search(/e/i);
+        const valueHasDot = dotIndex !== -1 && !dataHasDot;
+        const valueHasE = eIndex !== -1 && !dataHasE;
+        // filter . and e/E keystrokes. Note: paste is not covered by this
+        if (data !== input && ((valueHasDot && data === '.') || (valueHasE && (data === 'e' || data === 'E')))) {
+            input = oldInput;
+        }
+        // stripe all e before dot and multiple . occurrences
+        if (dotIndex !== -1) {
+            input = `${input.substring(0, dotIndex + 1)}${input.substring(dotIndex + 1).replace(/\./g, '')}`;
+            if (!valueHasE) {
+                input = `${input.substring(0, dotIndex).replace(/e/ig, '')}${input.substring(dotIndex)}`;
+            }
+        }
+        // stripe all dots after e and multiple e occurrences
+        if (eIndex !== -1) {
+            input = `${input.substring(0, eIndex + 1)}${input.substring(eIndex + 1).replace(/e/ig, '')}`;
+            if (!valueHasDot) {
+                input = `${input.substring(0, eIndex)}${input.substring(eIndex).replace(/\./g, '')}`;
+            }
+        }
+        // stripe all other invalid characters and make sure that + and - signs are correct
+        return input.replace(/(^[-+]|[e][-+])|[-+]|[^0-9e.+-]/ig, '$1');
+    }
+    /**
+     * On *user-interaction* set the value and notify.
+     * This function will not call request update, but will fire value-changed event
+     * @returns {void}
+     */
+    setSilentlyValueAndNotify() {
+        // Nobody likes to see a red border
+        this.resetError();
+        const value = this.valueAsNumberString(this.inputValue);
+        if (super.value !== value) {
+            // here we must set the value silently to avoid re-rendering of input
+            super.value = value;
+            this.notifyPropertyChange('value', value);
+        }
+    }
+    /**
+     * Reset error state on input
+     * @returns {void}
+     */
+    resetError() {
+        if (this.error && this.checkValidity()) {
+            this.reportValidity();
+        }
+    }
+    /**
+     * Get the allowed step value
+     * @returns allowed step
+     */
+    getAllowedValueStep() {
+        let stepValue = this.stepValue;
+        if (stepValue === ANY_STEP) {
+            // By algorithm, this should throw an error
+            // however keep the default value as we use same method for stepping up and down
+            stepValue = DEFAULT_STEP_BASE;
+        }
+        return stepValue;
+    }
+    /**
+     * Get the step base as per HTML5 specs
+     * @returns step base
+     */
+    get stepBase() {
+        // If the element has a min content attribute, and the result of applying the algorithm to convert a string to a number
+        // to the value of the min content attribute is not an error, then return that result.
+        const min = this.stringToNumber(this.min);
+        if (!isNaN(min)) {
+            return min;
+        }
+        // If the element has a value content attribute, and the result of applying the algorithm to convert a string to a number
+        // to the value of the value content attribute is not an error, then return that result.
+        const valueAttribute = this.stringToNumber(this.getAttribute('value') || '');
+        if (!isNaN(valueAttribute)) {
+            return valueAttribute;
+        }
+        return 0;
+    }
+    /**
+     * Check if value subtracted from the step base is not an integral multiple of the allowed value step
+     * @param value value to check
+     * @returns true if value is integral
+     */
+    isValueIntegralMultipleOfStep(value) {
+        const decimals = Math.max(this.getDecimalPlace(value), this.stepDecimals);
+        const division = (this.stepBase - value) / this.getAllowedValueStep();
+        const number = decimals ? this.toFixedNumber(division, decimals) : division;
+        // (2 - 1.01) % 0.33 needs to give 0. So we cannot use % directly as it is intended for integers
+        return number % 1 === 0;
+    }
+    /**
+     * Find the nearest value that, when subtracted from the `stepBase`
+     * is an integral multiple of the `allowedValueStep`,
+     * and that is less than `value` if the `direction` was `Down`, and more than value otherwise.
+     * @param value the value to operate on
+     * @param stepBase base to start calculation
+     * @param allowedValueStep a step to go Down or Up
+     * @param direction Direction, either -1 for Down or 1 for Up
+     * @returns nearest number
+     */
+    findNearestSteppedValue(value, stepBase, allowedValueStep, direction) {
+        // TODO: there is probably much better way on how to implement this function
+        let newValue = this.toFixedNumber(value + (stepBase - value) % allowedValueStep);
+        if (direction === Direction.Up) {
+            // with float number rounding this may need to run more than once to find the valid value
+            while (newValue <= value) {
+                const steppedValue = this.toFixedNumber(newValue + allowedValueStep);
+                if (steppedValue <= newValue) {
+                    // Non safe integers might behave incorrectly
+                    // Avoid any potential infinitive loops
+                    break;
+                }
+                newValue = steppedValue;
+            }
+        }
+        else if (direction === Direction.Down) {
+            while (newValue >= value) {
+                const steppedValue = this.toFixedNumber(newValue - allowedValueStep);
+                if (steppedValue >= newValue) {
+                    break;
+                }
+                newValue = steppedValue;
+            }
+        }
+        return newValue;
+    }
+    /**
+     * Apply step up or step down on the input
+     * @param stepIncrement step increment factor
+     * @param direction either go up or down
+     * @returns {void}
+     */
+    applyStepDirection(stepIncrement = 1, direction) {
+        const min = this.stringToNumber(this.min);
+        const max = this.stringToNumber(this.max);
+        // If the element has a minimum and a maximum and the minimum is greater than the maximum, then return.
+        if (min > max) {
+            return;
+        }
+        // passing floats to step increment does not make sense as this potentially leads to incorrect results
+        stepIncrement = stepIncrement < 0 ? Math.ceil(stepIncrement) : Math.floor(stepIncrement);
+        if (stepIncrement < 0) {
+            direction = direction === Direction.Up ? Direction.Down : Direction.Up;
+            stepIncrement = Math.abs(stepIncrement);
+        }
+        const stepBase = this.stepBase;
+        const allowedValueStep = this.getAllowedValueStep();
+        // If applying the algorithm to convert a string to a number to the string given by the element's value
+        // does not result in an error, then let value be the result of that algorithm. Otherwise, let value be zero.
+        const inputValue = this.stringToNumber(this.inputValue);
+        const valueBeforeStepping = isNaN(inputValue) ? 0 : inputValue;
+        let value = valueBeforeStepping;
+        // step-up or step-down
+        if (this.isValueIntegralMultipleOfStep(value)) {
+            const delta = allowedValueStep * stepIncrement * direction;
+            value += delta;
+        }
+        else {
+            value = this.findNearestSteppedValue(valueBeforeStepping, stepBase, allowedValueStep, direction);
+        }
+        // If the element has a minimum, and value is less than that minimum,
+        // then set value to the smallest value that, when subtracted from the step base,
+        // is an integral multiple of the allowed value step, and that is more than or equal to minimum.
+        if (value < min) {
+            value = this.findNearestSteppedValue(min + allowedValueStep, stepBase, allowedValueStep, Direction.Down);
+        }
+        // If the element has a maximum, and value is greater than that maximum,
+        // then set value to the largest value that, when subtracted from the step base,
+        // is an integral multiple of the allowed value step, and that is less than or equal to maximum.
+        if (value > max) {
+            value = this.findNearestSteppedValue(max - allowedValueStep, stepBase, allowedValueStep, Direction.Up);
+        }
+        // If either the method invoked was the stepDown() method and value is greater than valueBeforeStepping
+        // or the method invoked was the stepUp() method and value is less than valueBeforeStepping, then return.
+        if (!isNaN(inputValue) && ((direction === Direction.Up && value < valueBeforeStepping) || (direction === Direction.Down && value > valueBeforeStepping))) {
+            return;
+        }
+        this.inputValue = `${this.toFixedNumber(value)}`;
+    }
+    /**
+     * Increases the input value by amount of step
+     * @param [stepIncrement] The stepIncrement parameter is a numeric value. If no parameter is passed, stepIncrement defaults to 1.
+     * @returns {void}
+     */
+    stepUp(stepIncrement) {
+        this.applyStepDirection(stepIncrement, Direction.Up);
+    }
+    /**
+     * Decreases the input value by amount of step
+     * @param [stepIncrement] The stepIncrement parameter is a numeric value. If no parameter is passed, stepIncrement defaults to 1.
+     * @returns {void}
+     */
+    stepDown(stepIncrement) {
+        this.applyStepDirection(stepIncrement, Direction.Down);
+    }
+    /**
+     * Returns true if an input element contains valid data.
+     * @returns true if input is valid
+     */
+    checkValidity() {
+        const value = this.internalValue;
+        // No support for required
+        if (value === '') {
+            return true;
+        }
+        if (!this.isValidValue(value)) {
+            return false;
+        }
+        // Check min and max numbers
+        const numberValue = Number(value);
+        const max = this.stringToNumber(this.max);
+        const min = this.stringToNumber(this.min);
+        if (numberValue < min || numberValue > max) {
+            return false;
+        }
+        // Check step for an integral step
+        const stepValue = this.stepValue;
+        if (stepValue !== ANY_STEP && !this.isValueIntegralMultipleOfStep(numberValue)) {
+            return false;
+        }
+        return true;
+    }
+    /**
+     * Validate input. Mark as error if input is invalid
+     * @returns false if there is an error
+     */
+    reportValidity() {
+        const hasError = !this.checkValidity();
+        if (this.error !== hasError) {
+            this.error = hasError;
+            this.notifyPropertyChange('error', this.error);
+        }
+        return !hasError;
+    }
+    /**
+     * Select the contents of input
+     * @returns void
+     */
+    select() {
+        if (!this.disabled) {
+            this.inputEl && this.inputEl.select();
+        }
+    }
+    /**
+     * Renders spinner
+     * @returns {TemplateResult} spinner part template
+     */
+    renderSpinner() {
+        return html `
+      <div
+        part="spinner"
+        @tap=${this.onSpinnerTap}>
+        <ef-icon
+          icon="up"
+          part="spinner-up"
+          ?readonly=${this.readonly}
+          ?disabled=${this.disabled}>
+        </ef-icon>
+        <ef-icon
+          icon="down"
+          part="spinner-down"
+          ?readonly=${this.readonly}
+          ?disabled=${this.disabled}>
+        </ef-icon>
+      </div>
+    `;
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return {TemplateResult}  Render template
+     */
+    render() {
+        return html `
+      <input
+        part="input"
+        type="text"
+        inputmode="decimal"
+        pattern="${NUMBER_PATTERN}"
+        ?readonly=${this.readonly}
+        ?disabled=${this.disabled}
+        placeholder=${ifDefined(this.placeholder ? this.placeholder : undefined)}
+        @input="${this.onNativeInputChange}"
+        @keydown="${this.onNativeInputKeyDown}"
+        @beforeinput="${this.onNativeBeforeInputChange}"
+        @change="${this.onNativeInputChange}"
+        autocomplete="off"
+      >
+      ${this.noSpinner ? null : this.renderSpinner()}
+      `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], NumberField.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'no-spinner', reflect: true })
+], NumberField.prototype, "noSpinner", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NumberField.prototype, "step", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NumberField.prototype, "min", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NumberField.prototype, "max", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NumberField.prototype, "transparent", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NumberField.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NumberField.prototype, "warning", void 0);
+__decorate([
+    property({ type: String })
+], NumberField.prototype, "value", null);
+__decorate([
+    query('[part=input]')
+], NumberField.prototype, "inputEl", void 0);
+__decorate([
+    query('[part=spinner-up]')
+], NumberField.prototype, "spinnerUpEl", void 0);
+__decorate([
+    query('[part=spinner-down]')
+], NumberField.prototype, "spinnerDownEl", void 0);
+NumberField = __decorate([
+    customElement('ef-number-field', {
+        alias: 'coral-number-field'
+    })
+], NumberField);
+export { NumberField };