@refinitiv-ui/elements 7.0.0 → 7.0.2

package/lib/pill/index.js

@@ -2,11 +2,11 @@ import { __decorate } from "tslib";
 import { ControlElement, 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 { registerOverflowTooltip } from '../tooltip/index.js';
-import { isElementOverflown } from '@refinitiv-ui/utils/element.js';
 import { createRef, ref } from '@refinitiv-ui/core/directives/ref.js';
-import { VERSION } from '../version.js';
+import { isElementOverflown } from '@refinitiv-ui/utils/element.js';
 import '../icon/index.js';
+import { registerOverflowTooltip } from '../tooltip/index.js';
+import { VERSION } from '../version.js';
 /**
  * A small button style component
  * which is used to show one or multiple selected item.
@@ -69,15 +69,15 @@ let Pill = class Pill extends ControlElement {
      */
     static get styles() {
         return css `
-    :host {
-      display: inline-block;
-      position: relative;
-    }
-    [part=content] {
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-    }
+      :host {
+        display: inline-block;
+        position: relative;
+      }
+      [part='content'] {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
     `;
     }
     firstUpdated(changedProperties) {
@@ -112,17 +112,20 @@ let Pill = class Pill extends ControlElement {
      * @returns {void}
      */
     onKeyDown(event) {
-        if (event.key === 'Delete' && (this.clears && !this.readonly)) {
+        if (event.key === 'Delete' && this.clears && !this.readonly) {
             this.dispatchEvent(new CustomEvent('clear'));
         }
     }
     get closeTemplate() {
-        return this.clears && !this.readonly ? html `<ef-icon
-      ${ref(this.closeIconRef)}
-      part="close"
-      icon="cross"
-      aria-hidden="true"
-      @tap="${this.clear}"></ef-icon>` : null;
+        return this.clears && !this.readonly
+            ? html `<ef-icon
+          ${ref(this.closeIconRef)}
+          part="close"
+          icon="cross"
+          aria-hidden="true"
+          @tap="${this.clear}"
+        ></ef-icon>`
+            : null;
     }
     /**
      * A `TemplateResult` that will be used

package/lib/progress-bar/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { CSSResultGroup, TemplateResult, BasicElement, PropertyValues } from '@refinitiv-ui/core';
+import { BasicElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 /**
  * Data visualisation component,
  * showing a simple percentage bar.

package/lib/progress-bar/index.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { css, html, BasicElement } 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 { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
@@ -45,36 +45,36 @@ let ProgressBar = class ProgressBar extends BasicElement {
      */
     static get styles() {
         return css `
-    :host {
-      height: 10px;
-      display: flex;
-      position: relative;
-    }
-    [part~=bar] {
-      height: 100%;
-      position: relative;
-    }
-    [part=label] {
-      position: absolute;
-      top: 50%;
-      left: 100%;
-      height: 0;
-      line-height: 0;
-      white-space: nowrap;
-      margin-left: 10px;
-    }
-    :host([alignment=right]) {
-      justify-content: flex-end;
-    }
-    :host([alignment=right]) [part=label] {
-      left: auto;
-      right: 100%;
-      margin-left: 0;
-      margin-right: 10px;
-    }
-    :host [part~=bar-zero] [part=label] {
-      margin: 0;
-    }
+      :host {
+        height: 10px;
+        display: flex;
+        position: relative;
+      }
+      [part~='bar'] {
+        height: 100%;
+        position: relative;
+      }
+      [part='label'] {
+        position: absolute;
+        top: 50%;
+        left: 100%;
+        height: 0;
+        line-height: 0;
+        white-space: nowrap;
+        margin-left: 10px;
+      }
+      :host([alignment='right']) {
+        justify-content: flex-end;
+      }
+      :host([alignment='right']) [part='label'] {
+        left: auto;
+        right: 100%;
+        margin-left: 0;
+        margin-right: 10px;
+      }
+      :host [part~='bar-zero'] [part='label'] {
+        margin: 0;
+      }
     `;
     }
     /**
@@ -83,7 +83,8 @@ let ProgressBar = class ProgressBar extends BasicElement {
      */
     get valueNumber() {
         const value = parseFloat(this.value);
-        if (!this.value || isNaN(value)) { // check value is invalid
+        if (!this.value || isNaN(value)) {
+            // check value is invalid
             const valuePrevious = parseFloat(this.valuePrevious);
             // if valuePrevious is invalid return default value 100
             return !valuePrevious || isNaN(valuePrevious) ? 100 : valuePrevious;
@@ -132,11 +133,11 @@ let ProgressBar = class ProgressBar extends BasicElement {
      */
     render() {
         return html `
-    <div part="${this.barParts}" style="${styleMap(this.barStyle)}">
-      <span part="label">
-        <slot name="label">${this.label}</slot>
-      </span>
-    </div>
+      <div part="${this.barParts}" style="${styleMap(this.barStyle)}">
+        <span part="label">
+          <slot name="label">${this.label}</slot>
+        </span>
+      </div>
     `;
     }
 };

package/lib/radio-button/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { CSSResultGroup, ControlElement, TemplateResult, PropertyValues } from '@refinitiv-ui/core';
+import { CSSResultGroup, ControlElement, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 /**
  * Basic radio button
  *
@@ -7,7 +7,7 @@ import { CSSResultGroup, ControlElement, TemplateResult, PropertyValues } from '
  *
  * @attr {string} value - Value of the radio button
  * @prop {string} [value=""] - Value of the radio button
-*
+ *
  * @attr {string} name - Group multiple radio buttons by assigning the same name
  * @prop {string} [name=""] - Group multiple radio buttons by assigning the same name
  *

package/lib/radio-button/index.js

@@ -1,11 +1,11 @@
 import { __decorate } from "tslib";
-import { html, css, ControlElement } from '@refinitiv-ui/core';
+import { ControlElement, 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 { registerOverflowTooltip } from '../tooltip/index.js';
-import { applyRegistry, removeFromRegistry, getRadioGroup } from './radio-button-registry.js';
+import { VERSION } from '../version.js';
+import { applyRegistry, getRadioGroup, removeFromRegistry } from './radio-button-registry.js';
 /**
  * Basic radio button
  *
@@ -13,7 +13,7 @@ import { applyRegistry, removeFromRegistry, getRadioGroup } from './radio-button
  *
  * @attr {string} value - Value of the radio button
  * @prop {string} [value=""] - Value of the radio button
-*
+ *
  * @attr {string} name - Group multiple radio buttons by assigning the same name
  * @prop {string} [name=""] - Group multiple radio buttons by assigning the same name
  *
@@ -50,21 +50,22 @@ let RadioButton = class RadioButton extends ControlElement {
       :host {
         display: inline-block;
       }
-      [part=check] {
+      [part='check'] {
         visibility: hidden;
       }
-      :host([checked]) [part=check] {
+      :host([checked]) [part='check'] {
         visibility: inherit;
       }
-      [part=label],
-      [part=container] {
+      [part='label'],
+      [part='container'] {
         display: inline-block;
         white-space: nowrap;
         vertical-align: middle;
         overflow: hidden;
         text-overflow: ellipsis;
       }
-      :host(:empty) [part=label], [part=label]:empty {
+      :host(:empty) [part='label'],
+      [part='label']:empty {
         display: none;
       }
     `;
@@ -107,7 +108,9 @@ let RadioButton = class RadioButton extends ControlElement {
             applyRegistry(this, changedProperties.get('name'));
         }
         // Ensure only one radio button is checked
-        if (this.isConnected && this.hasUpdated && (changedProperties.has('checked') || (changedProperties.has('name')))) {
+        if (this.isConnected &&
+            this.hasUpdated &&
+            (changedProperties.has('checked') || changedProperties.has('name'))) {
             this.manageGroupState();
         }
         super.updated(changedProperties);
@@ -131,7 +134,9 @@ let RadioButton = class RadioButton extends ControlElement {
         if (this.checked && this.name) {
             // restore tab index when checked
             this.tabIndex = 0;
-            getRadioGroup(this).filter(radio => radio !== this).forEach(radio => {
+            getRadioGroup(this)
+                .filter((radio) => radio !== this)
+                .forEach((radio) => {
                 // uncheck and hide the rest of the group members from focusability
                 radio.checked = false;
                 radio.tabIndex = -1;
@@ -199,7 +204,7 @@ let RadioButton = class RadioButton extends ControlElement {
         if (!this.name) {
             return;
         }
-        const group = getRadioGroup(this).filter(radio => !radio.disabled);
+        const group = getRadioGroup(this).filter((radio) => !radio.disabled);
         const index = group.indexOf(this);
         let element;
         if (direction === 'next') {

package/lib/radio-button/radio-button-registry.js

@@ -1,3 +1,4 @@
+// Keeps registration records of radio button group per its name
 import { getElementScope } from '@refinitiv-ui/utils/element.js';
 const registry = [];
 /**
@@ -36,7 +37,7 @@ const applyRegistry = (radio, oldGroupName = '') => {
         removeFromRegistry(radio);
         radio.tabIndex = 0; // Restores tabIndex and switch to single mode
         // Re-compute tabIndex for old radio group
-        const oldRadioGroup = registry.filter(radio => radio.name === oldGroupName);
+        const oldRadioGroup = registry.filter((radio) => radio.name === oldGroupName);
         restoreTabIndex(oldRadioGroup);
     }
     // Changes group
@@ -46,7 +47,9 @@ const applyRegistry = (radio, oldGroupName = '') => {
         if (radio.checked) {
             radio.tabIndex = 0;
             // uncheck and hide the rest of the group members from focusability
-            newRadioGroup.filter((newRadio) => newRadio !== radio).forEach(newRadio => {
+            newRadioGroup
+                .filter((newRadio) => newRadio !== radio)
+                .forEach((newRadio) => {
                 newRadio.checked = false;
                 newRadio.tabIndex = -1;
             });
@@ -56,7 +59,7 @@ const applyRegistry = (radio, oldGroupName = '') => {
             restoreTabIndex(newRadioGroup);
         }
         // Re-compute tabIndex for old radio group when name attribute has changed.
-        const oldRadioGroup = registry.filter(radio => radio.name === oldGroupName);
+        const oldRadioGroup = registry.filter((radio) => radio.name === oldGroupName);
         restoreTabIndex(oldRadioGroup);
     }
 };
@@ -71,7 +74,7 @@ const restoreTabIndex = (radioGroup) => {
     if (!radioGroup.length) {
         return;
     }
-    const checkedRadio = radioGroup.filter(radio => radio.checked);
+    const checkedRadio = radioGroup.filter((radio) => radio.checked);
     if (checkedRadio.length) {
         return;
     }
@@ -90,6 +93,6 @@ const getRadioGroup = (radio) => {
     }
     const groupName = radio.name;
     const rootNode = getElementScope(radio);
-    return registry.filter(radio => rootNode === getElementScope(radio) && radio.name === groupName);
+    return registry.filter((radio) => rootNode === getElementScope(radio) && radio.name === groupName);
 };
 export { applyRegistry, removeFromRegistry, getRadioGroup };

package/lib/rating/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import { BasicElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 /**
  * Star visualisation component that is generally used for ranking
  * @fires value-changed - Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically.

package/lib/rating/index.js

@@ -1,5 +1,5 @@
 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 { VERSION } from '../version.js';
@@ -259,10 +259,7 @@ let Rating = class Rating extends BasicElement {
      * @return Render template
      */
     render() {
-        return html `
-      <div part="container">
-        ${this.starsTemplate}
-      </div>`;
+        return html ` <div part="container">${this.starsTemplate}</div>`;
     }
 };
 __decorate([

package/lib/rating/utils.d.ts

@@ -1,9 +1,9 @@
 /**
-   * Return value that never exceed the maximum boundary
-   * @param value value for check clamp
-   * @param min max value
-   * @param max min value
-   * @returns number between two numbers
-   */
+ * Return value that never exceed the maximum boundary
+ * @param value value for check clamp
+ * @param min max value
+ * @param max min value
+ * @returns number between two numbers
+ */
 declare const clamp: (value: number, min: number, max: number) => number;
 export { clamp };

package/lib/rating/utils.js

@@ -1,10 +1,10 @@
 /**
-   * Return value that never exceed the maximum boundary
-   * @param value value for check clamp
-   * @param min max value
-   * @param max min value
-   * @returns number between two numbers
-   */
+ * Return value that never exceed the maximum boundary
+ * @param value value for check clamp
+ * @param min max value
+ * @param max min value
+ * @returns number between two numbers
+ */
 const clamp = function (value, min, max) {
     return Math.max(min, Math.min(value, max));
 };

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

@@ -1,10 +1,10 @@
 import { JSXInterface } from '../jsx';
 import { TemplateResult } from '@refinitiv-ui/core';
 import { TemplateMap } from '@refinitiv-ui/core/directives/template-map.js';
+import '@refinitiv-ui/phrasebook/locale/en/search-field.js';
+import { Translate } from '@refinitiv-ui/translate';
 import '../icon/index.js';
 import { TextField } from '../text-field/index.js';
-import { Translate } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/locale/en/search-field.js';
 /**
  * Form control to get a search input from users.
  *

package/lib/search-field/index.js

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
 import { html, nothing } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import '@refinitiv-ui/phrasebook/locale/en/search-field.js';
+import { translate } from '@refinitiv-ui/translate';
 import '../icon/index.js';
 import { TextField } from '../text-field/index.js';
-import { translate } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/locale/en/search-field.js';
 /**
  * Form control to get a search input from users.
  *
@@ -53,8 +53,8 @@ let SearchField = class SearchField extends TextField {
     get decorateInputMap() {
         return {
             ...super.decorateInputMap,
-            'type': 'search',
-            'inputmode': 'search'
+            type: 'search',
+            inputmode: 'search'
         };
     }
     /**

package/lib/select/index.d.ts

@@ -1,8 +1,8 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, TemplateResult, CSSResultGroup, PropertyValues, MultiValue } from '@refinitiv-ui/core';
-import '../overlay/index.js';
-import '../item/index.js';
+import { CSSResultGroup, ControlElement, MultiValue, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import '../icon/index.js';
+import '../item/index.js';
+import '../overlay/index.js';
 import type { SelectData, SelectDataItem } from './helpers/types';
 export type { SelectData, SelectDataItem };
 /**
@@ -41,47 +41,47 @@ export declare class Select extends ControlElement implements MultiValue {
     private keySearchThrottler;
     private resizeThrottler;
     /**
-    * Current text content of the selected value
-    * @readonly
-    */
+     * Current text content of the selected value
+     * @readonly
+     */
     get label(): string;
     /**
-    * Current text content of the selected values
-    * @ignore
-    * @readonly
-    */
+     * Current text content of the selected values
+     * @ignore
+     * @readonly
+     */
     get labels(): string[];
     /**
-    * Placeholder to display when no value is set
-    */
+     * Placeholder to display when no value is set
+     */
     placeholder: string;
     /**
-    * Toggles the opened state of the list
-    */
+     * Toggles the opened state of the list
+     */
     opened: boolean;
     /**
-    * Set state to error
-    */
+     * Set state to error
+     */
     error: boolean;
     /**
-    * Set state to warning
-    */
+     * Set state to warning
+     */
     warning: boolean;
     /**
-    * Switch to multiple select input
-    * @ignore
-    * @param multiple True if element needs to support multi selection
-    */
+     * Switch to multiple select input
+     * @ignore
+     * @param multiple True if element needs to support multi selection
+     */
     set multiple(multiple: boolean);
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     get multiple(): boolean;
     /**
-    * Construct the menu from data object. Cannot be used with slotted content
-    * @type {SelectData | null}
-    * @default null
-    */
+     * Construct the menu from data object. Cannot be used with slotted content
+     * @type {SelectData | null}
+     * @default null
+     */
     get data(): SelectData | null;
     set data(value: SelectData | null);
     /**
@@ -91,10 +91,10 @@ export declare class Select extends ControlElement implements MultiValue {
      */
     private cachedValue;
     /**
-    * Value of the element
-    * @param value Element value
-    * @default -
-    */
+     * Value of the element
+     * @param value Element value
+     * @default -
+     */
     set value(value: string);
     get value(): string;
     /**
@@ -382,8 +382,8 @@ export declare class Select extends ControlElement implements MultiValue {
      */
     private get dataContent();
     /**
-    * Edit template when select is not readonly or disabled
-    */
+     * Edit template when select is not readonly or disabled
+     */
     private get popupTemplate();
     /**
      * A `TemplateResult` that will be used