@refinitiv-ui/elements 6.8.7 → 6.8.9

package/lib/notification/elements/notification.js

@@ -1,11 +1,11 @@
 import { __decorate } from "tslib";
-import { BasicElement, html, css } from '@refinitiv-ui/core';
+import { BasicElement, css, html } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { translate } from '@refinitiv-ui/translate';
-import { VERSION } from '../../version.js';
 import '@refinitiv-ui/phrasebook/locale/en/notification.js';
+import { translate } from '@refinitiv-ui/translate';
 import '../../icon/index.js';
+import { VERSION } from '../../version.js';
 /**
  * Used to show informative content when something happens in the application
  *
@@ -60,7 +60,9 @@ let Notification = class Notification extends BasicElement {
     update(changedProperties) {
         super.update(changedProperties);
         // Fix bg doesn't work on IE 11
-        if (changedProperties.has('confirm') || changedProperties.has('warning') || changedProperties.has('error')) {
+        if (changedProperties.has('confirm') ||
+            changedProperties.has('warning') ||
+            changedProperties.has('error')) {
             this.updateStyles();
         }
     }
@@ -112,7 +114,7 @@ let Notification = class Notification extends BasicElement {
       :host {
         display: block;
       }
-      [part=label] {
+      [part='label'] {
         color: red;
       }
     `;
@@ -125,15 +127,21 @@ let Notification = class Notification extends BasicElement {
      */
     render() {
         return html `
-    <style>
-    :host {
-      display: block;
-    }
-    </style>
-    <div part="container">
-      <div part="content"><slot>${this.message}</slot></div>
-      <ef-icon part="clear" icon="cross" role="button" aria-description="${this.t('CLOSE')}" @click="${this.onClearClick.bind(this)}"></ef-icon>
-    </div>
+      <style>
+        :host {
+          display: block;
+        }
+      </style>
+      <div part="container">
+        <div part="content"><slot>${this.message}</slot></div>
+        <ef-icon
+          part="clear"
+          icon="cross"
+          role="button"
+          aria-description="${this.t('CLOSE')}"
+          @click="${this.onClearClick.bind(this)}"
+        ></ef-icon>
+      </div>
     `;
     }
 };

package/lib/notification/helpers/status.js

@@ -1,6 +1,6 @@
 import { NotificationTray } from '../elements/notification-tray.js';
 // TODO: Add to utils?
-const DEV_ENV = (/^(localhost|127\.0\.0\.1)$/).test(location.hostname);
+const DEV_ENV = /^(localhost|127\.0\.0\.1)$/.test(location.hostname);
 const NotificationType = {
     INFO: 'INFO',
     CONFIRM: 'CONFIRM',

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

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { FormFieldElement, CSSResultGroup, TemplateResult, PropertyValues, TapEvent } from '@refinitiv-ui/core';
+import { CSSResultGroup, FormFieldElement, PropertyValues, TapEvent, TemplateResult } from '@refinitiv-ui/core';
 import { TemplateMap } from '@refinitiv-ui/core/directives/template-map.js';
 import '../icon/index.js';
 type SelectionDirection = 'forward' | 'backward' | 'none';
@@ -67,10 +67,10 @@ export declare class NumberField extends FormFieldElement {
     max: string | null;
     private interimValueState;
     /**
-    * The value of the number entered into the input.
-    * @param value number-field value
-    * @default -
-    */
+     * The value of the number entered into the input.
+     * @param value number-field value
+     * @default -
+     */
     set value(value: string);
     get value(): string;
     /**
@@ -313,7 +313,6 @@ export declare class NumberField extends FormFieldElement {
      * 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`

package/lib/number-field/index.js

@@ -1,11 +1,10 @@
 import { __decorate } from "tslib";
-import { FormFieldElement, html, css, FocusedPropertyKey } from '@refinitiv-ui/core';
+import { FocusedPropertyKey, FormFieldElement, css, html } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { query } from '@refinitiv-ui/core/decorators/query.js';
-import { VERSION } from '../version.js';
 import '../icon/index.js';
-const NUMBER_PATTERN = '^[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?$';
+import { VERSION } from '../version.js';
 const DEFAULT_STEP_BASE = 1;
 const ANY_STEP = 'any';
 var Direction;
@@ -81,41 +80,43 @@ let NumberField = class NumberField extends FormFieldElement {
       :host {
         display: inline-block;
       }
-      :host(:focus), :host input:focus {
+      :host(:focus),
+      :host input:focus {
         outline: none;
       }
       :host([transparent]) {
         background: none !important;
         border: none !important;
       }
-      [part=input] {
+      [part='input'] {
         font: inherit;
         background: none;
         color: currentColor;
         border: none;
         text-align: inherit;
       }
-      [part=spinner]{
+      [part='spinner'] {
         display: flex;
         flex-direction: column;
       }
-      [part=spinner-up], [part=spinner-down] {
+      [part='spinner-up'],
+      [part='spinner-down'] {
         display: flex;
         height: 50%;
         cursor: pointer;
         user-select: none;
       }
-      [part^=spinner][disabled],
-      [part^=spinner][readonly] {
+      [part^='spinner'][disabled],
+      [part^='spinner'][readonly] {
         cursor: default;
       }
     `;
     }
     /**
-    * The value of the number entered into the input.
-    * @param value number-field value
-    * @default -
-    */
+     * The value of the number entered into the input.
+     * @param value number-field value
+     * @default -
+     */
     set value(value) {
         this.interimValueState = true;
         super.value = value;
@@ -194,7 +195,7 @@ let NumberField = class NumberField extends FormFieldElement {
         if (Math.floor(value) === value || isNaN(value) || !isFinite(value)) {
             return 0;
         }
-        return new Intl.NumberFormat('en', { minimumSignificantDigits: 1 }).format(value).split('.')[1].length || 0;
+        return (new Intl.NumberFormat('en', { minimumSignificantDigits: 1 }).format(value).split('.')[1].length || 0);
     }
     /**
      * Get number of decimals based on step base and allowed value step
@@ -307,7 +308,9 @@ let NumberField = class NumberField extends FormFieldElement {
             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);
+            const insertionData = validatedInput
+                .slice(0, validatedInput.length - (oldInput.length - selectionEnd))
+                .substring(selectionStart);
             // Invalid characters or sequence of characters
             if (!insertionData.length) {
                 event.preventDefault();
@@ -380,18 +383,18 @@ let NumberField = class NumberField extends FormFieldElement {
         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)}`;
+                input = `${input.substring(0, dotIndex).replace(/e/gi, '')}${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, '')}`;
+            input = `${input.substring(0, eIndex + 1)}${input.substring(eIndex + 1).replace(/e/gi, '')}`;
             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');
+        return input.replace(/(^[-+]|[e][-+])|[-+]|[^0-9e.+-]/gi, '$1');
     }
     /**
      * On *user-interaction* set the value and notify.
@@ -500,7 +503,7 @@ let NumberField = class NumberField extends FormFieldElement {
      */
     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);
+        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) {
@@ -577,7 +580,9 @@ let NumberField = class NumberField extends FormFieldElement {
         }
         // 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))) {
+        if (!isNaN(inputValue) &&
+            ((direction === Direction.Up && value < valueBeforeStepping) ||
+                (direction === Direction.Down && value > valueBeforeStepping))) {
             return;
         }
         this.inputValue = String(value);
@@ -651,7 +656,7 @@ let NumberField = class NumberField extends FormFieldElement {
      */
     /* istanbul ignore next */
     set selectionStart(index) {
-        throw new Error('Failed to set the \'selectionStart\' property on \'NumberField\': The element does not support selection.');
+        throw new Error("Failed to set the 'selectionStart' property on 'NumberField': The element does not support selection.");
     }
     /**
      * @ignore
@@ -667,7 +672,7 @@ let NumberField = class NumberField extends FormFieldElement {
      */
     /* istanbul ignore next */
     set selectionEnd(index) {
-        throw new Error('Failed to set the \'selectionEnd\' property on \'NumberField\': The element does not support selection.');
+        throw new Error("Failed to set the 'selectionEnd' property on 'NumberField': The element does not support selection.");
     }
     /**
      * @ignore
@@ -683,7 +688,7 @@ let NumberField = class NumberField extends FormFieldElement {
      */
     /* istanbul ignore next */
     set selectionDirection(direction) {
-        throw new Error('Failed to set the \'selectionDirection\' property on \'NumberField\': The element does not support selection.');
+        throw new Error("Failed to set the 'selectionDirection' property on 'NumberField': The element does not support selection.");
     }
     /**
      * @ignore
@@ -692,7 +697,7 @@ let NumberField = class NumberField extends FormFieldElement {
     /* 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.');
+        throw new Error("Failed to execute 'setSelectionRange' on 'NumberField': The element does not support selection.");
     }
     /**
      * Renders spinner
@@ -700,20 +705,9 @@ let NumberField = class NumberField extends FormFieldElement {
      */
     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}>
+      <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>
     `;
@@ -723,7 +717,6 @@ let NumberField = class NumberField extends FormFieldElement {
      * 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`
@@ -733,11 +726,10 @@ let NumberField = class NumberField extends FormFieldElement {
     get decorateInputMap() {
         return {
             ...super.decorateInputMap,
-            'type': 'text',
-            'part': 'input',
-            'inputmode': 'decimal',
-            'pattern': NUMBER_PATTERN,
-            'role': 'spinbutton',
+            type: 'text',
+            part: 'input',
+            inputmode: 'decimal',
+            role: 'spinbutton',
             'aria-valuenow': `${this.value || 0}`,
             '@keydown': this.onInputKeyDown,
             '@beforeinput': this.onBeforeInputChange
@@ -749,9 +741,7 @@ let NumberField = class NumberField extends FormFieldElement {
      * @return {TemplateResult}  Render template
      */
     render() {
-        return html `
-      ${super.render()}
-      ${this.noSpinner ? null : this.renderSpinner()}`;
+        return html ` ${super.render()} ${this.noSpinner ? null : this.renderSpinner()}`;
     }
 };
 __decorate([

package/lib/overlay/elements/overlay-viewport.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../../jsx';
-import { ResponsiveElement, CSSResultGroup, TemplateResult } from '@refinitiv-ui/core';
+import { CSSResultGroup, ResponsiveElement, TemplateResult } from '@refinitiv-ui/core';
 /**
  * A private element to find overlay size boundaries
  */

package/lib/overlay/elements/overlay.d.ts

@@ -1,6 +1,6 @@
 import { JSXInterface } from '../../jsx';
-import { ResponsiveElement, TemplateResult, CSSResultGroup, PropertyValues, ElementSize } from '@refinitiv-ui/core';
-import { TransitionStyle, PositionTarget, Position, NullOrUndefined, PositionTargetStrategy } from '../helpers/types.js';
+import { CSSResultGroup, ElementSize, PropertyValues, ResponsiveElement, TemplateResult } from '@refinitiv-ui/core';
+import { NullOrUndefined, Position, PositionTarget, PositionTargetStrategy, TransitionStyle } from '../helpers/types.js';
 export type { TransitionStyle, PositionTarget, Position, PositionTargetStrategy };
 /**
  * Element to help building modals, dialogs and other overlay content