@refinitiv-ui/elements 5.0.0-beta.3 → 5.0.0-dev.204

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

@@ -0,0 +1,42 @@
+# ef-number-field
+
+Form control element for numbers.
+
+## Properties
+
+| 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. |
+| `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
+
+| Event           | Description                         |
+|-----------------|-------------------------------------|
+| `error-changed` | Dispatched when error state changes |
+| `value-changed` | Dispatched when value changes       |

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

@@ -1,33 +1,52 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, CSSResult, TemplateResult, PropertyValues } from '@refinitiv-ui/core';
-import '../icon';
+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 {
     /**
-     * A `CSSResult` that will be used
-     * to style the host, slotted children
-     * and the internal template of the element.
-     * @return {CSSResult | CSSResult[]} CSS template
+     * Element version number
+     * @returns version number
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get version(): string;
     /**
-     * Set placeholder text
+     * A `CSSResultGroup` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @return CSS template
      */
-    placeholder: string | null;
+    static get styles(): CSSResultGroup;
     /**
      * Set spinner's visibility
      */
@@ -46,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;
@@ -69,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
      */
@@ -140,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
@@ -257,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.
@@ -273,6 +322,7 @@ export declare class NumberField extends ControlElement {
      */
     protected render(): TemplateResult;
 }
+export {};
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -281,7 +331,9 @@ declare global {
 
   namespace JSX {
     interface IntrinsicElements {
-      'ef-number-field': Partial<NumberField> | JSXInterface.ControlHTMLAttributes<NumberField>;
+      'ef-number-field': Partial<NumberField> | JSXInterface.HTMLAttributes<NumberField>;
     }
   }
-}
+}
+
+export {};

package/lib/number-field/index.js

@@ -1,11 +1,10 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { ControlElement, html, css, query, ifDefined, property, customElement, FocusedPropertyKey } from '@refinitiv-ui/core';
-import '../icon';
+import { __decorate } from "tslib";
+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 { 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';
@@ -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,25 +61,20 @@ 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
     }
     /**
-     * A `CSSResult` that will be used
+     * 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 {CSSResult | CSSResult[]} CSS template
+     * @return CSS template
      */
     static get styles() {
         return css `
@@ -112,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;
@@ -224,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;
         }
@@ -302,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
@@ -310,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;
@@ -330,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
@@ -339,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;
@@ -599,13 +606,61 @@ 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 */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    setSelectionRange(startSelection, endSelection, selectionDirection) {
+        throw new Error('Failed to execute \'setSelectionRange\' on \'NumberField\': The element does not support selection.');
     }
     /**
      * Renders spinner
@@ -631,6 +686,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.
@@ -638,26 +708,10 @@ let NumberField = class NumberField extends ControlElement {
      */
     render() {
         return html `
-      <input
-        part="input"
-        type="text"
-        inputmode="decimal"
-        pattern="${NUMBER_PATTERN}"
-        ?readonly=${this.readonly}
-        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);
@@ -670,21 +724,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);
@@ -697,4 +739,3 @@ NumberField = __decorate([
     })
 ], NumberField);
 export { NumberField };
-//# sourceMappingURL=index.js.map

package/lib/number-field/themes/halo/dark/index.js

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/lib/icon/themes/halo/dark';
 
-elf.customStyles.define('ef-number-field', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;width:152px;max-width:100%;padding:0 8px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;color:#ccc}:host([disabled]){border:1px solid rgba(64,64,64,.5);color:rgba(204,204,204,.5);background-color:rgba(13,13,13,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #ffc800}:host([warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(127,100,0,.5)}:host([error]),:host([error][warning]){border:1px solid #f5475b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(160,28,43,.5)}:host ::-ms-clear{display:none}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{color:#ccc;min-width:1em;padding-left:2px}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:grey;color:#fff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#6678ff}:host([warning]:hover:not([readonly]):not([focused])){color:#fff;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#fff;border-color:#faa8b1}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(250,168,177,.5)}:host([readonly]:not([focused])){border-color:rgba(64,64,64,.5);background-color:rgba(13,13,13,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(204,204,204,.5)}:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#fff}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#6678ff}:host [part=input]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}:host [part=spinner-down],:host [part=spinner-up]{line-height:0;min-width:22px;color:#ccc}:host [part=spinner]{height:100%;margin-left:8px;border-left:inherit;border-color:inherit}:host(:not([no-spinner])){padding:0 0 0 8px}:host([transparent]),:host([transparent]) [part=spinner]{border:none}:host(:hover:not([readonly])) [part=spinner-down],:host(:hover:not([readonly])) [part=spinner-up]{color:#6678ff}:host(:hover:not([readonly])) [part=spinner-down]:hover,:host(:hover:not([readonly])) [part=spinner-up]:hover{color:#fff;background-color:#334bff}:host(:hover:not([readonly])) [part=spinner-down]:active,:host(:hover:not([readonly])) [part=spinner-up]:active{color:#fff;background:#0f1e8a}:host(:not([transparent]):not([readonly])) [part=spinner]:hover{border-left-color:#334bff!important;border-left-style:solid!important}:host(:not([transparent]):not([readonly])) [part=spinner]:hover::after{content:\'\';border:1px solid #334bff;position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;pointer-events:none}:host([focused]) [part=spinner-down],:host([focused]) [part=spinner-up]{color:#6678ff}:host([disabled]) [part=spinner-down],:host([disabled]) [part=spinner-up],:host([readonly]:not([focused])) [part=spinner-down],:host([readonly]:not([focused])) [part=spinner-up]{color:rgba(204,204,204,.5)}:host([disabled][error]) [part=spinner],:host([readonly]:not([focused])[error]) [part=spinner]{border-color:rgba(250,168,177,.5)}:host([disabled][warning]) [part=spinner],:host([readonly]:not([focused])[warning]) [part=spinner]{border-color:rgba(255,233,153,.5)}');
+elf.customStyles.define('ef-number-field', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;width:152px;max-width:100%;padding:0 8px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;color:#ccc}:host([disabled]){border:1px solid rgba(64,64,64,.5);color:rgba(204,204,204,.5);background-color:rgba(13,13,13,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #ffc800}:host([warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(127,100,0,.5)}:host([error]),:host([error][warning]){border:1px solid #f5475b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(160,28,43,.5)}:host ::-ms-clear{display:none}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{color:#ccc;min-width:1em;padding-left:2px}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:grey;color:#fff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#6678ff}:host([warning]:hover:not([readonly]):not([focused])){color:#fff;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#fff;border-color:#faa8b1}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(250,168,177,.5)}:host([readonly]:not([focused])){border-color:rgba(64,64,64,.5);background-color:rgba(13,13,13,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(204,204,204,.5)}:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#fff}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#6678ff}:host [part=input]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}:host [part=spinner-down],:host [part=spinner-up]{line-height:0;min-width:22px;color:#ccc}:host [part=spinner]{height:100%;margin-left:8px;border-left:inherit;border-color:inherit}:host(:not([no-spinner])){padding:0 0 0 8px}:host([transparent]),:host([transparent]) [part=spinner]{border:none}:host(:hover:not([readonly])) [part=spinner-down],:host(:hover:not([readonly])) [part=spinner-up]{color:#6678ff}:host(:hover:not([readonly])) [part=spinner-down]:hover,:host(:hover:not([readonly])) [part=spinner-up]:hover{color:#fff;background-color:#334bff}:host(:hover:not([readonly])) [part=spinner-down]:active,:host(:hover:not([readonly])) [part=spinner-up]:active{color:#fff;background:#0f1e8a}:host(:not([transparent]):not([readonly])) [part=spinner]:hover{border-left-color:#334bff!important;border-left-style:solid!important}:host(:not([transparent]):not([readonly])) [part=spinner]:hover::after{content:\'\';border:1px solid #334bff;position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;pointer-events:none}:host([focused]) [part=spinner-down],:host([focused]) [part=spinner-up]{color:#6678ff}:host([disabled]) [part=spinner-down],:host([disabled]) [part=spinner-up],:host([readonly]:not([focused])) [part=spinner-down],:host([readonly]:not([focused])) [part=spinner-up]{color:rgba(204,204,204,.5)}:host([disabled][error]) [part=spinner],:host([readonly]:not([focused])[error]) [part=spinner]{border-color:rgba(250,168,177,.5)}:host([disabled][warning]) [part=spinner],:host([readonly]:not([focused])[warning]) [part=spinner]{border-color:rgba(255,233,153,.5)}');

package/lib/number-field/themes/halo/light/index.js

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
 
-elf.customStyles.define('ef-number-field', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;width:152px;max-width:100%;padding:0 8px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959;color:#404040}:host([disabled]){border:1px solid rgba(89,89,89,.5);color:rgba(64,64,64,.5);background-color:rgba(255,255,255,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #cca000}:host([warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(204,160,0,.5)}:host([error]),:host([error][warning]){border:1px solid #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(182,50,67,.5)}:host ::-ms-clear{display:none}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{color:#404040;min-width:1em;padding-left:2px}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:#0d0d0d;color:#0d0d0d}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#334bff}:host([warning]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#eeacb4}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(238,172,180,.5)}:host([readonly]:not([focused])){border-color:rgba(89,89,89,.5);background-color:rgba(255,255,255,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(64,64,64,.5)}:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#0d0d0d}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#334bff}:host [part=input]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}:host [part=spinner-down],:host [part=spinner-up]{line-height:0;min-width:22px;color:#404040}:host [part=spinner]{height:100%;margin-left:8px;border-left:inherit;border-color:inherit}:host(:not([no-spinner])){padding:0 0 0 8px}:host([transparent]),:host([transparent]) [part=spinner]{border:none}:host(:hover:not([readonly])) [part=spinner-down],:host(:hover:not([readonly])) [part=spinner-up]{color:#334bff}:host(:hover:not([readonly])) [part=spinner-down]:hover,:host(:hover:not([readonly])) [part=spinner-up]:hover{color:#fff;background-color:#334bff}:host(:hover:not([readonly])) [part=spinner-down]:active,:host(:hover:not([readonly])) [part=spinner-up]:active{color:#fff;background:#0f1e8a}:host(:not([transparent]):not([readonly])) [part=spinner]:hover{border-left-color:#334bff!important;border-left-style:solid!important}:host(:not([transparent]):not([readonly])) [part=spinner]:hover::after{content:\'\';border:1px solid #334bff;position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;pointer-events:none}:host([focused]) [part=spinner-down],:host([focused]) [part=spinner-up]{color:#334bff}:host([disabled]) [part=spinner-down],:host([disabled]) [part=spinner-up],:host([readonly]:not([focused])) [part=spinner-down],:host([readonly]:not([focused])) [part=spinner-up]{color:rgba(64,64,64,.5)}:host([disabled][error]) [part=spinner],:host([readonly]:not([focused])[error]) [part=spinner]{border-color:rgba(238,172,180,.5)}:host([disabled][warning]) [part=spinner],:host([readonly]:not([focused])[warning]) [part=spinner]{border-color:rgba(255,233,153,.5)}');
+elf.customStyles.define('ef-number-field', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;width:152px;max-width:100%;padding:0 8px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959;color:#404040}:host([disabled]){border:1px solid rgba(89,89,89,.5);color:rgba(64,64,64,.5);background-color:rgba(255,255,255,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #cca000}:host([warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(204,160,0,.5)}:host([error]),:host([error][warning]){border:1px solid #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(182,50,67,.5)}:host ::-ms-clear{display:none}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{color:#404040;min-width:1em;padding-left:2px}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:#0d0d0d;color:#0d0d0d}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#334bff}:host([warning]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#eeacb4}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(238,172,180,.5)}:host([readonly]:not([focused])){border-color:rgba(89,89,89,.5);background-color:rgba(255,255,255,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(64,64,64,.5)}:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#0d0d0d}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#334bff}:host [part=input]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}:host [part=spinner-down],:host [part=spinner-up]{line-height:0;min-width:22px;color:#404040}:host [part=spinner]{height:100%;margin-left:8px;border-left:inherit;border-color:inherit}:host(:not([no-spinner])){padding:0 0 0 8px}:host([transparent]),:host([transparent]) [part=spinner]{border:none}:host(:hover:not([readonly])) [part=spinner-down],:host(:hover:not([readonly])) [part=spinner-up]{color:#334bff}:host(:hover:not([readonly])) [part=spinner-down]:hover,:host(:hover:not([readonly])) [part=spinner-up]:hover{color:#fff;background-color:#334bff}:host(:hover:not([readonly])) [part=spinner-down]:active,:host(:hover:not([readonly])) [part=spinner-up]:active{color:#fff;background:#0f1e8a}:host(:not([transparent]):not([readonly])) [part=spinner]:hover{border-left-color:#334bff!important;border-left-style:solid!important}:host(:not([transparent]):not([readonly])) [part=spinner]:hover::after{content:\'\';border:1px solid #334bff;position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;pointer-events:none}:host([focused]) [part=spinner-down],:host([focused]) [part=spinner-up]{color:#334bff}:host([disabled]) [part=spinner-down],:host([disabled]) [part=spinner-up],:host([readonly]:not([focused])) [part=spinner-down],:host([readonly]:not([focused])) [part=spinner-up]{color:rgba(64,64,64,.5)}:host([disabled][error]) [part=spinner],:host([readonly]:not([focused])[error]) [part=spinner]{border-color:rgba(238,172,180,.5)}:host([disabled][warning]) [part=spinner],:host([readonly]:not([focused])[warning]) [part=spinner]{border-color:rgba(255,233,153,.5)}');