@refinitiv-ui/elements 5.7.0 → 5.8.0

package/lib/number-field/custom-elements.md

@@ -1,33 +1,38 @@
 # ef-number-field
 
-Form control element for numbers
+Form control element for numbers.
 
 ## Properties
 
-| Property        | Attribute     | Modifiers | Type             | Default | Description                                      |
-|-----------------|---------------|-----------|------------------|---------|--------------------------------------------------|
-| `disabled`      | `disabled`    |           | `boolean`        | false   | Set disabled state                               |
-| `error`         | `error`       |           | `boolean`        | false   | Set state to error                               |
-| `max`           | `max`         |           | `string \| null` | null    | Set maximum value.<br />This value must be greater than or equal to the value of the `min` attribute |
-| `min`           | `min`         |           | `string \| null` | null    | Set minimum value.<br />This value must be less than or equal to the value of the `max` attribute |
-| `noSpinner`     | `no-spinner`  |           | `boolean`        | false   | Set spinner's visibility                         |
-| `placeholder`   | `placeholder` |           | `string \| null` | null    | Set placeholder text                             |
-| `readonly`      | `readonly`    |           | `boolean`        | false   | Set readonly state                               |
-| `step`          | `step`        |           | `string \| null` | null    | Set step value                                   |
-| `transparent`   | `transparent` |           | `boolean`        | false   | Set state to transparent                         |
-| `value`         | `value`       |           | `string`         | 0       | The value of the number entered into the input.  |
-| `valueAsNumber` |               | readonly  | `number`         |         | Returns the value of the element, interpreted as double number |
-| `warning`       | `warning`     |           | `boolean`        | false   | Set state to warning                             |
+| Property                   | Attribute     | Type                                        | Default | Description                                      |
+|----------------------------|---------------|---------------------------------------------|---------|--------------------------------------------------|
+| `disabled`                 | `disabled`    | `boolean`                                   | false   | Set disabled state                               |
+| `error`                    | `error`       | `boolean`                                   | false   | Set error state                                  |
+| `max`                      | `max`         | `string \| null`                            | null    | Set maximum value.<br />This value must be greater than or equal to the value of the `min` attribute |
+| `min`                      | `min`         | `string \| null`                            | null    | Set minimum value.<br />This value must be less than or equal to the value of the `max` attribute |
+| `noSpinner`                | `no-spinner`  | `boolean`                                   | false   | Set spinner's visibility                         |
+| `placeholder`              | `placeholder` | `string`                                    | ""      | Set placeholder text                             |
+| `readonly`                 | `readonly`    | `boolean`                                   | false   | Set readonly state                               |
+| `selectionDirection`       |               | `"forward" \| "backward" \| "none" \| null` |         |                                                  |
+| `selectionEnd`             |               | `number \| null`                            |         |                                                  |
+| `selectionStart`           |               | `number \| null`                            |         |                                                  |
+| `step`                     | `step`        | `string \| null`                            | null    | Set step value                                   |
+| `transparent`              | `transparent` | `boolean`                                   | false   | Disables all other states and border/background styles. |
+| `value`                    | `value`       | `string`                                    | ""      | The value of the number entered into the input.  |
+| `valueAsNumber (readonly)` |               | `number`                                    |         | Returns the value of the element, interpreted as double number |
+| `warning`                  | `warning`     | `boolean`                                   | false   | Set warning state                                |
 
 ## Methods
 
-| Method           | Type                                          | Description                                      |
-|------------------|-----------------------------------------------|--------------------------------------------------|
-| `checkValidity`  | `(): boolean`                                 | Returns true if an input element contains valid data. |
-| `reportValidity` | `(): boolean`                                 | Validate input. Mark as error if input is invalid |
-| `select`         | `(): void`                                    | Select the contents of input                     |
-| `stepDown`       | `(stepIncrement?: number \| undefined): void` | Decreases the input value by amount of step<br /><br />**stepIncrement**: The stepIncrement parameter is a numeric value. If no parameter is passed, stepIncrement defaults to 1. |
-| `stepUp`         | `(stepIncrement?: number \| undefined): void` | Increases the input value by amount of step<br /><br />**stepIncrement**: The stepIncrement parameter is a numeric value. If no parameter is passed, stepIncrement defaults to 1. |
+| Method              | Type                                             | Description                                      |
+|---------------------|--------------------------------------------------|--------------------------------------------------|
+| `checkValidity`     | `(): boolean`                                    | Returns true if an input element contains valid data. |
+| `onInputChange`     | `(event: any): void`                             |                                                  |
+| `onInputInput`      | `(event: any): void`                             |                                                  |
+| `reportValidity`    | `(): boolean`                                    | Validate input. Mark as error if input is invalid |
+| `setSelectionRange` | `(startSelection: number \| null, endSelection: number \| null, selectionDirection?: "forward" \| "backward" \| "none" \| undefined): void` |                                                  |
+| `stepDown`          | `(stepIncrement?: number \| undefined): void`    | Decreases the input value by amount of step<br /><br />**stepIncrement**: The stepIncrement parameter is a numeric value. If no parameter is passed, stepIncrement defaults to 1. |
+| `stepUp`            | `(stepIncrement?: number \| undefined): void`    | Increases the input value by amount of step<br /><br />**stepIncrement**: The stepIncrement parameter is a numeric value. If no parameter is passed, stepIncrement defaults to 1. |
 
 ## Events
 

package/lib/number-field/index.d.ts

@@ -1,22 +1,40 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, CSSResultGroup, TemplateResult, PropertyValues } from '@refinitiv-ui/core';
+import { FormFieldElement, CSSResultGroup, TemplateResult, PropertyValues, TapEvent } from '@refinitiv-ui/core';
+import { TemplateMap } from '@refinitiv-ui/core/lib/directives/template-map.js';
 import '../icon/index.js';
+declare type SelectionDirection = 'forward' | 'backward' | 'none';
+declare enum Direction {
+    Up = 1,
+    Down = -1
+}
 /**
- * Form control element for numbers
+ * 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} disabled - Set disabled state
+ * @prop {boolean} [disabled=false] - Set disabled state
+ *
+ * @attr {boolean} error - Set error state
+ * @prop {boolean} [error=false] - Set error state
+ *
+ * @attr {string} placeholder - Set placeholder text
+ * @prop {string} [placeholder=""] - Set placeholder text
  *
  * @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
+ * @attr {boolean} transparent - Disables all other states and border/background styles.
+ * @prop {boolean} [transparent=false] - Disables all other states and border/background styles.
+ *
+ * @attr {boolean} warning - Set warning state
+ * @prop {boolean} [warning=false] - Set warning state
+ *
+ * @attr {string} value - Input's value
+ * @prop {string} [value=""] - Input's value
  */
-export declare class NumberField extends ControlElement {
+export declare class NumberField extends FormFieldElement {
     /**
      * Element version number
      * @returns version number
@@ -29,10 +47,6 @@ export declare class NumberField extends ControlElement {
      * @return CSS template
      */
     static get styles(): CSSResultGroup;
-    /**
-     * Set placeholder text
-     */
-    placeholder: string | null;
     /**
      * Set spinner's visibility
      */
@@ -51,22 +65,11 @@ export declare class NumberField extends ControlElement {
      * This value must be greater than or equal to the value of the `min` attribute
      */
     max: string | null;
-    /**
-     * Set state to transparent
-     */
-    transparent: boolean;
-    /**
-     * Set state to error
-     */
-    error: boolean;
-    /**
-     * Set state to warning
-     */
-    warning: boolean;
     private interimValueState;
     /**
     * The value of the number entered into the input.
     * @param value number-field value
+    * @default -
     */
     set value(value: string);
     get value(): string;
@@ -74,10 +77,6 @@ export declare class NumberField extends ControlElement {
      * Returns the value of the element, interpreted as double number
      */
     get valueAsNumber(): number;
-    /**
-     * Get native input element from shadow root
-     */
-    private inputEl;
     /**
      * Get spinner up element
      */
@@ -145,47 +144,49 @@ export declare class NumberField extends ControlElement {
      * @returns string of input value
      */
     private get internalValue();
-    /**
-     * Get native input value
-     * @returns string of input value
-     */
-    private get inputValue();
-    /**
-     * Set native input value
-     * @param value input's value
-     */
-    private set inputValue(value);
     /**
      * Handles key down input event
      * @param event Key down event object
      * @returns {void}
      */
-    private onNativeInputKeyDown;
+    protected onInputKeyDown(event: KeyboardEvent): void;
     /**
      * Run when spinner has been tapped
      * @param event tap event
      * @returns {void}
      */
-    private onSpinnerTap;
+    protected onSpinnerTap(event: TapEvent): void;
     /**
      * Step down or up and notify value change
      * @param direction Up or Down
      * @returns {void}
      */
-    private onApplyStep;
+    protected onApplyStep(direction: Direction): void;
     /**
      * Run before input changes
      * Prevent invalid characters
      * @param event before input event
      * @returns {void}
      */
-    private onNativeBeforeInputChange;
+    protected onBeforeInputChange(event: InputEvent): void;
+    /**
+     * Runs on input element `input` event
+     * @param event `input` event
+     * @returns {void}
+     */
+    protected onInputInput(event: InputEvent): void;
+    /**
+     * Runs on input element `change` event
+     * @param event `change` event
+     * @returns {void}
+     */
+    protected onInputChange(event: InputEvent): void;
     /**
      * Triggers when native input value change with input event or change event
      * @param event Input event
      * @returns {void}
      */
-    private onNativeInputChange;
+    protected onNativeInputChange(event: InputEvent): void;
     /**
      * Stripe characters from input text based on previous input and data
      * @param input The new input to process
@@ -262,15 +263,58 @@ export declare class NumberField extends ControlElement {
      */
     reportValidity(): boolean;
     /**
-     * Select the contents of input
-     * @returns void
+     * @ignore
+     * @inheritDoc
+     */
+    get selectionStart(): number | null;
+    /**
+     * @ignore
+     * @inheritDoc
+     */
+    set selectionStart(index: number | null);
+    /**
+     * @ignore
+     * @inheritDoc
      */
-    select(): void;
+    get selectionEnd(): number | null;
+    /**
+     * @ignore
+     * @inheritDoc
+     */
+    set selectionEnd(index: number | null);
+    /**
+     * @ignore
+     * @inheritDoc
+     */
+    get selectionDirection(): SelectionDirection | null;
+    /**
+     * @ignore
+     * @inheritDoc
+     */
+    set selectionDirection(direction: SelectionDirection | null);
+    /**
+     * @ignore
+     * @inheritDoc
+     */
+    setSelectionRange(startSelection: number | null, endSelection: number | null, selectionDirection?: SelectionDirection): void;
     /**
      * Renders spinner
      * @returns {TemplateResult} spinner part template
      */
-    private renderSpinner;
+    protected renderSpinner(): TemplateResult;
+    /**
+     * Decorate `<input>` element with common properties extended from form field element:
+     * type="text" - always `text`
+     * part="input" - always "input", used for styling
+     * inputmode="decimal" - show decimals keyboard by default
+     * pattern="'^[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?$'" - numbers only
+     * role="spinbutton" - number field is actually a spinner
+     * aria-valuenow - current value or 0
+     * @keydown - Listener for `keydown` event. Runs `this.onInputKeyDown`
+     * @beforeinput - Listener for `beforeinput` event. Runs `this.onBeforeInputChange`
+     * @returns template map
+     */
+    protected get decorateInputMap(): TemplateMap;
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.
@@ -278,6 +322,7 @@ export declare class NumberField extends ControlElement {
      */
     protected render(): TemplateResult;
 }
+export {};
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -286,7 +331,7 @@ declare global {
 
   namespace JSX {
     interface IntrinsicElements {
-      'ef-number-field': Partial<NumberField> | JSXInterface.ControlHTMLAttributes<NumberField>;
+      'ef-number-field': Partial<NumberField> | JSXInterface.HTMLAttributes<NumberField>;
     }
   }
 }

package/lib/number-field/index.js

@@ -1,9 +1,8 @@
 import { __decorate } from "tslib";
-import { ControlElement, html, css, FocusedPropertyKey } from '@refinitiv-ui/core';
+import { FormFieldElement, 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]+)?$';
@@ -15,27 +14,35 @@ var Direction;
     Direction[Direction["Down"] = -1] = "Down";
 })(Direction || (Direction = {}));
 /**
- * Form control element for numbers
+ * 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} disabled - Set disabled state
+ * @prop {boolean} [disabled=false] - Set disabled state
+ *
+ * @attr {boolean} error - Set error state
+ * @prop {boolean} [error=false] - Set error state
+ *
+ * @attr {string} placeholder - Set placeholder text
+ * @prop {string} [placeholder=""] - Set placeholder text
  *
  * @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
+ * @attr {boolean} transparent - Disables all other states and border/background styles.
+ * @prop {boolean} [transparent=false] - Disables all other states and border/background styles.
+ *
+ * @attr {boolean} warning - Set warning state
+ * @prop {boolean} [warning=false] - Set warning state
+ *
+ * @attr {string} value - Input's value
+ * @prop {string} [value=""] - Input's value
  */
-let NumberField = class NumberField extends ControlElement {
+let NumberField = class NumberField extends FormFieldElement {
     constructor() {
         super(...arguments);
-        /**
-         * Set placeholder text
-         */
-        this.placeholder = null;
         /**
          * Set spinner's visibility
          */
@@ -54,18 +61,6 @@ let NumberField = class NumberField extends ControlElement {
          * 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
     }
     /**
@@ -119,6 +114,7 @@ let NumberField = class NumberField extends ControlElement {
     /**
     * The value of the number entered into the input.
     * @param value number-field value
+    * @default -
     */
     set value(value) {
         this.interimValueState = true;
@@ -231,28 +227,14 @@ let NumberField = class NumberField extends ControlElement {
      */
     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;
+        return this.interimValueState || !this.inputElement ? super.value : this.inputValue;
     }
     /**
      * Handles key down input event
      * @param event Key down event object
      * @returns {void}
      */
-    onNativeInputKeyDown(event) {
+    onInputKeyDown(event) {
         if (this.readonly || this.disabled || event.defaultPrevented) {
             return;
         }
@@ -309,7 +291,7 @@ let NumberField = class NumberField extends ControlElement {
      * @returns {void}
      */
     /* istanbul ignore next */
-    onNativeBeforeInputChange(event) {
+    onBeforeInputChange(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
@@ -317,7 +299,8 @@ let NumberField = class NumberField extends ControlElement {
         // cover all insert types, such as type, paste, drag&drop and others
         if (inputType.startsWith('insert')) {
             const data = event.data || '';
-            const inputEl = this.inputEl;
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            const inputEl = this.inputElement;
             const oldInput = this.inputValue;
             // Calculate what could be the new input
             const selectionStart = inputEl.selectionStart || 0;
@@ -337,6 +320,22 @@ let NumberField = class NumberField extends ControlElement {
             }
         }
     }
+    /**
+     * Runs on input element `input` event
+     * @param event `input` event
+     * @returns {void}
+     */
+    onInputInput(event) {
+        this.onNativeInputChange(event);
+    }
+    /**
+     * Runs on input element `change` event
+     * @param event `change` event
+     * @returns {void}
+     */
+    onInputChange(event) {
+        this.onNativeInputChange(event);
+    }
     /**
      * Triggers when native input value change with input event or change event
      * @param event Input event
@@ -346,7 +345,8 @@ let NumberField = class NumberField extends ControlElement {
         const currentInput = this.inputValue;
         const inputValue = this.stripeInvalidCharacters(currentInput, this.value, event.data || '');
         if (inputValue !== currentInput) {
-            const inputEl = this.inputEl;
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            const inputEl = this.inputElement;
             // 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;
@@ -606,13 +606,60 @@ let NumberField = class NumberField extends ControlElement {
         return !hasError;
     }
     /**
-     * Select the contents of input
-     * @returns void
+     * @ignore
+     * @inheritDoc
      */
-    select() {
-        if (!this.disabled) {
-            this.inputEl && this.inputEl.select();
-        }
+    /* istanbul ignore next */
+    get selectionStart() {
+        return null;
+    }
+    /**
+     * @ignore
+     * @inheritDoc
+     */
+    /* istanbul ignore next */
+    set selectionStart(index) {
+        throw new Error('Failed to set the \'selectionStart\' property on \'NumberField\': The element does not support selection.');
+    }
+    /**
+     * @ignore
+     * @inheritDoc
+     */
+    /* istanbul ignore next */
+    get selectionEnd() {
+        return null;
+    }
+    /**
+     * @ignore
+     * @inheritDoc
+     */
+    /* istanbul ignore next */
+    set selectionEnd(index) {
+        throw new Error('Failed to set the \'selectionEnd\' property on \'NumberField\': The element does not support selection.');
+    }
+    /**
+     * @ignore
+     * @inheritDoc
+     */
+    /* istanbul ignore next */
+    get selectionDirection() {
+        return null;
+    }
+    /**
+     * @ignore
+     * @inheritDoc
+     */
+    /* istanbul ignore next */
+    set selectionDirection(direction) {
+        throw new Error('Failed to set the \'selectionDirection\' property on \'NumberField\': The element does not support selection.');
+    }
+    /**
+     * @ignore
+     * @inheritDoc
+     */
+    /* istanbul ignore next */
+    setSelectionRange(startSelection, endSelection, selectionDirection) {
+        throw new Error('Failed to execute \'setSelectionRange\' on \'NumberField\': The element does not support selection.');
     }
     /**
      * Renders spinner
@@ -638,6 +685,21 @@ let NumberField = class NumberField extends ControlElement {
       </div>
     `;
     }
+    /**
+     * Decorate `<input>` element with common properties extended from form field element:
+     * type="text" - always `text`
+     * part="input" - always "input", used for styling
+     * inputmode="decimal" - show decimals keyboard by default
+     * pattern="'^[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?$'" - numbers only
+     * role="spinbutton" - number field is actually a spinner
+     * aria-valuenow - current value or 0
+     * @keydown - Listener for `keydown` event. Runs `this.onInputKeyDown`
+     * @beforeinput - Listener for `beforeinput` event. Runs `this.onBeforeInputChange`
+     * @returns template map
+     */
+    get decorateInputMap() {
+        return Object.assign(Object.assign({}, super.decorateInputMap), { 'type': 'text', 'part': 'input', 'inputmode': 'decimal', 'pattern': NUMBER_PATTERN, 'role': 'spinbutton', 'aria-valuenow': `${this.value || 0}`, '@keydown': this.onInputKeyDown, '@beforeinput': this.onBeforeInputChange });
+    }
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.
@@ -645,27 +707,10 @@ let NumberField = class NumberField extends ControlElement {
      */
     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()}
-      `;
+      ${super.render()}
+      ${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);
@@ -678,21 +723,9 @@ __decorate([
 __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);