@refinitiv-ui/elements 7.0.0 → 7.0.2

package/lib/notification/themes/solar/charcoal/index.js

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/icon/themes/solar/charcoal';
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-notification-tray', styles: ':host{--max:1;--default-timeout:5000;display:flex;flex-flow:column nowrap;justify-content:flex-end}:host([attach]){position:fixed;z-index:100000}:host([attach=top]){top:0;left:0;right:0}:host([attach=right]){top:0;right:0;bottom:0}:host([attach=bottom]){left:0;right:0;bottom:0}:host([attach=left]){top:0;left:0;bottom:0}' }}));
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-notification', styles: ':host{touch-action:manipulation;perspective:2000px;position:relative;height:var(--bar-height,3em);overflow:hidden;display:flex;align-items:center;text-align:center;color:var(--color,#c2c2c2);animation:.4s forwards notification-open;--bar-height:30px;--background-color:#295e8c;color:#fff}:host [part=container]{height:var(--bar-height,3em);width:100%;position:relative;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:6px 27px 6px 10px;background-color:var(--background-color,#19aaee);animation:.4s notification-container-open}:host [part=container]::before{content:\'\';display:block;position:absolute;top:0;right:0;bottom:0;width:3em;opacity:0;transition:opacity .2s;color:var(--background-color,#19aaee);background:currentColor;box-shadow:0 0 1em 1em currentColor}:host [part=content]{width:100%;text-align:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host [part=clear]{touch-action:manipulation;margin:auto;display:block;position:absolute;top:0;bottom:0;opacity:0;transition:opacity .2s;right:.5em;width:16px;height:16px;stroke-width:1.5px;opacity:1}:host(:hover) [part=clear],:host(:hover) [part=container]::before{opacity:1}:host([confirm]){--background-color:#2ec57e;--background-color:#237843}:host([warning]){--background-color:#FF9933;--background-color:#cc7f33}:host([error]){--background-color:#F5475B;--background-color:#a8313f}:host([collapsed]){animation-fill-mode:forwards;animation-name:notification-close}:host([collapsed]) [part=container]{animation-name:notification-container-close}:host([collapsed]) [part=clear],:host([collapsed]) [part=container]::before{opacity:0}@keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}:host [part=content] ::slotted(a){color:inherit!important;text-decoration:underline!important}:host [part=content] ::slotted(a:hover){cursor:pointer!important;text-decoration-color:inherit!important}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-notification', styles: ':host{touch-action:manipulation;perspective:2000px;position:relative;height:var(--bar-height,3em);overflow:hidden;display:flex;align-items:center;text-align:center;color:var(--color,#c2c2c2);animation:.4s forwards notification-open;-webkit-user-select:none;-moz-user-select:none;user-select:none;--bar-height:30px;--background-color:#295e8c;color:#fff}:host [part=container]{height:var(--bar-height,3em);width:100%;position:relative;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:6px 27px 6px 10px;background-color:var(--background-color,#19aaee);animation:.4s notification-container-open}:host [part=container]::before{content:\'\';display:block;position:absolute;top:0;right:0;bottom:0;width:3em;opacity:0;transition:opacity .2s;color:var(--background-color,#19aaee);background:currentColor;box-shadow:0 0 1em 1em currentColor}:host [part=content]{width:100%;text-align:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host [part=clear]{touch-action:manipulation;margin:auto;display:block;position:absolute;top:0;bottom:0;opacity:0;transition:opacity .2s;right:.5em;width:16px;height:16px;stroke-width:1.5px;opacity:1}:host(:hover) [part=clear],:host(:hover) [part=container]::before{opacity:1}:host([confirm]){--background-color:#2ec57e;--background-color:#237843}:host([warning]){--background-color:#FF9933;--background-color:#cc7f33}:host([error]){--background-color:#F5475B;--background-color:#a8313f}:host([collapsed]){animation-fill-mode:forwards;animation-name:notification-close}:host([collapsed]) [part=container]{animation-name:notification-container-close}:host([collapsed]) [part=clear],:host([collapsed]) [part=container]::before{opacity:0}@keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}:host [part=content] ::slotted(a){color:inherit!important;text-decoration:underline!important}:host [part=content] ::slotted(a:hover){cursor:pointer!important;text-decoration-color:inherit!important}' }}));

package/lib/notification/themes/solar/pearl/index.js

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/icon/themes/solar/pearl';
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-notification-tray', styles: ':host{--max:1;--default-timeout:5000;display:flex;flex-flow:column nowrap;justify-content:flex-end}:host([attach]){position:fixed;z-index:100000}:host([attach=top]){top:0;left:0;right:0}:host([attach=right]){top:0;right:0;bottom:0}:host([attach=bottom]){left:0;right:0;bottom:0}:host([attach=left]){top:0;left:0;bottom:0}' }}));
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-notification', styles: ':host{touch-action:manipulation;perspective:2000px;position:relative;height:var(--bar-height,3em);overflow:hidden;display:flex;align-items:center;text-align:center;color:var(--color,#505050);animation:.4s forwards notification-open;--bar-height:30px;--background-color:#295e8c;color:#fff}:host [part=container]{height:var(--bar-height,3em);width:100%;position:relative;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:6px 27px 6px 10px;background-color:var(--background-color,#19aaee);animation:.4s notification-container-open}:host [part=container]::before{content:\'\';display:block;position:absolute;top:0;right:0;bottom:0;width:3em;opacity:0;transition:opacity .2s;color:var(--background-color,#19aaee);background:currentColor;box-shadow:0 0 1em 1em currentColor}:host [part=content]{width:100%;text-align:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host [part=clear]{touch-action:manipulation;margin:auto;display:block;position:absolute;top:0;bottom:0;opacity:0;transition:opacity .2s;right:.5em;width:16px;height:16px;stroke-width:1.5px;opacity:1}:host(:hover) [part=clear],:host(:hover) [part=container]::before{opacity:1}:host([confirm]){--background-color:#2ec57e;--background-color:#237843}:host([warning]){--background-color:#FF9933;--background-color:#cc7f33}:host([error]){--background-color:#D94255;--background-color:#a8313f}:host([collapsed]){animation-fill-mode:forwards;animation-name:notification-close}:host([collapsed]) [part=container]{animation-name:notification-container-close}:host([collapsed]) [part=clear],:host([collapsed]) [part=container]::before{opacity:0}@keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}:host [part=content] ::slotted(a){color:inherit!important;text-decoration:underline!important}:host [part=content] ::slotted(a:hover){cursor:pointer!important;text-decoration-color:inherit!important}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-notification', styles: ':host{touch-action:manipulation;perspective:2000px;position:relative;height:var(--bar-height,3em);overflow:hidden;display:flex;align-items:center;text-align:center;color:var(--color,#505050);animation:.4s forwards notification-open;-webkit-user-select:none;-moz-user-select:none;user-select:none;--bar-height:30px;--background-color:#295e8c;color:#fff}:host [part=container]{height:var(--bar-height,3em);width:100%;position:relative;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:6px 27px 6px 10px;background-color:var(--background-color,#19aaee);animation:.4s notification-container-open}:host [part=container]::before{content:\'\';display:block;position:absolute;top:0;right:0;bottom:0;width:3em;opacity:0;transition:opacity .2s;color:var(--background-color,#19aaee);background:currentColor;box-shadow:0 0 1em 1em currentColor}:host [part=content]{width:100%;text-align:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host [part=clear]{touch-action:manipulation;margin:auto;display:block;position:absolute;top:0;bottom:0;opacity:0;transition:opacity .2s;right:.5em;width:16px;height:16px;stroke-width:1.5px;opacity:1}:host(:hover) [part=clear],:host(:hover) [part=container]::before{opacity:1}:host([confirm]){--background-color:#2ec57e;--background-color:#237843}:host([warning]){--background-color:#FF9933;--background-color:#cc7f33}:host([error]){--background-color:#D94255;--background-color:#a8313f}:host([collapsed]){animation-fill-mode:forwards;animation-name:notification-close}:host([collapsed]) [part=container]{animation-name:notification-container-close}:host([collapsed]) [part=clear],:host([collapsed]) [part=container]::before{opacity:0}@keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}:host [part=content] ::slotted(a){color:inherit!important;text-decoration:underline!important}:host [part=content] ::slotted(a:hover){cursor:pointer!important;text-decoration-color:inherit!important}' }}));

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
@@ -304,7 +305,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();
@@ -378,18 +381,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.
@@ -498,7 +501,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) {
@@ -575,7 +578,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);
@@ -650,7 +655,7 @@ let NumberField = class NumberField extends FormFieldElement {
      */
     /* c8 ignore start */
     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.");
     }
     /* c8 ignore stop */
     /**
@@ -668,7 +673,7 @@ let NumberField = class NumberField extends FormFieldElement {
      */
     /* c8 ignore start */
     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.");
     }
     /* c8 ignore stop */
     /**
@@ -686,7 +691,7 @@ let NumberField = class NumberField extends FormFieldElement {
      */
     /* c8 ignore start */
     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.");
     }
     /* c8 ignore stop */
     /**
@@ -696,7 +701,7 @@ let NumberField = class NumberField extends FormFieldElement {
     /* c8 ignore start */
     // 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.");
     }
     /* c8 ignore stop */
     /**
@@ -705,20 +710,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>
     `;
@@ -728,7 +722,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`
@@ -738,11 +731,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
@@ -754,9 +746,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 } from '@refinitiv-ui/core';
+import { CSSResultGroup, ResponsiveElement } 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