@refinitiv-ui/elements 6.8.7 → 6.8.9

package/lib/select/index.js

@@ -1,31 +1,25 @@
 import { __decorate } from "tslib";
-import { ControlElement, html, css, FocusedPropertyKey } from '@refinitiv-ui/core';
+import { ControlElement, FocusedPropertyKey, 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';
 import { createRef, ref } from '@refinitiv-ui/core/directives/ref.js';
-import { VERSION } from '../version.js';
-import '../overlay/index.js';
-import '../item/index.js';
-import '../icon/index.js';
-import { Item } from '../item/index.js';
+import { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
+import { AnimationTaskRunner, TimeoutTaskRunner } from '@refinitiv-ui/utils/async.js';
 import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
-import { TimeoutTaskRunner, AnimationTaskRunner } from '@refinitiv-ui/utils/async.js';
 import { isElementOverflown } from '@refinitiv-ui/utils/element.js';
+import '../icon/index.js';
+import '../item/index.js';
+import { Item } from '../item/index.js';
+import '../overlay/index.js';
 import { registerOverflowTooltip } from '../tooltip/index.js';
+import { VERSION } from '../version.js';
 // Observer config for items
 const observerOptions = {
     subtree: true,
     childList: true,
     attributes: true,
     characterData: true,
-    attributeFilter: [
-        'label',
-        'value',
-        'selected',
-        'disabled',
-        'readonly'
-    ]
+    attributeFilter: ['label', 'value', 'selected', 'disabled', 'readonly']
 };
 const LABEL_SEPARATOR = ', '; // TODO: for multiselect
 const POPUP_POSITION = ['bottom-start', 'top-start'];
@@ -50,7 +44,7 @@ var Navigation;
 let Select = class Select extends ControlElement {
     constructor() {
         super(...arguments);
-        this.defaultRole = 'button';
+        this.defaultRole = 'combobox';
         this.composer = new CollectionComposer([]);
         this._data = null;
         this.popupDynamicStyles = {}; /* set popup min-width based on select width or CSS vars */
@@ -61,20 +55,20 @@ let Select = class Select extends ControlElement {
         this.keySearchThrottler = new TimeoutTaskRunner(KEY_SEARCH_DEBOUNCER);
         this.resizeThrottler = new AnimationTaskRunner();
         /**
-        * Placeholder to display when no value is set
-        */
+         * Placeholder to display when no value is set
+         */
         this.placeholder = '';
         /**
-        * Toggles the opened state of the list
-        */
+         * Toggles the opened state of the list
+         */
         this.opened = false;
         /**
-        * Set state to error
-        */
+         * Set state to error
+         */
         this.error = false;
         /**
-        * Set state to warning
-        */
+         * Set state to warning
+         */
         this.warning = false;
         /**
          * This variable is here to ensure that the value and data are in sync when data is set after the value.
@@ -98,8 +92,7 @@ let Select = class Select extends ControlElement {
          * @returns {void}
          */
         this.handleMutations = (mutations) => {
-            const hasLightDomMutations = mutations
-                .some(m => m.target.getRootNode() !== this.shadowRoot);
+            const hasLightDomMutations = mutations.some((m) => m.target.getRootNode() !== this.shadowRoot);
             if (hasLightDomMutations) {
                 this.requestUpdate();
             }
@@ -136,19 +129,19 @@ let Select = class Select extends ControlElement {
         display: inline-block;
       }
 
-      [part=label],
-      [part=placeholder] {
+      [part='label'],
+      [part='placeholder'] {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
       }
-      [part=icon] {
+      [part='icon'] {
         flex: none;
       }
-      :host [part=list] {
+      :host [part='list'] {
         overflow-y: auto;
       }
-      :host [part="list"] ::slotted(:not(ef-item)) {
+      :host [part='list'] ::slotted(:not(ef-item)) {
         display: none;
       }
       #box {
@@ -190,42 +183,42 @@ let Select = class Select extends ControlElement {
     `;
     }
     /**
-    * Current text content of the selected value
-    * @readonly
-    */
+     * Current text content of the selected value
+     * @readonly
+     */
     get label() {
         return this.labels[0];
     }
     /**
-    * Current text content of the selected values
-    * @ignore
-    * @readonly
-    */
+     * Current text content of the selected values
+     * @ignore
+     * @readonly
+     */
     get labels() {
         if (this.hasDataItems()) {
-            return this.selectedDataItems.map(item => this.composer.getItemPropertyValue(item, 'label'));
+            return this.selectedDataItems.map((item) => this.composer.getItemPropertyValue(item, 'label'));
         }
-        return this.selectedSlotItems.map(item => this.getItemLabel(item));
+        return this.selectedSlotItems.map((item) => this.getItemLabel(item));
     }
     /**
-    * 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) {
         // TODO: not implemented
     }
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     get multiple() {
         return false;
     }
     /**
-    * 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() {
         return this._data;
     }
@@ -249,10 +242,10 @@ let Select = class Select extends ControlElement {
         this.requestUpdate('data', oldValue);
     }
     /**
-    * Value of the element
-    * @param value Element value
-    * @default -
-    */
+     * Value of the element
+     * @param value Element value
+     * @default -
+     */
     set value(value) {
         value = this.castValue(value);
         this.cachedValue = value;
@@ -276,9 +269,9 @@ let Select = class Select extends ControlElement {
      */
     get values() {
         if (this.hasDataItems()) {
-            return this.selectedDataItems.map(item => this.composer.getItemPropertyValue(item, 'value'));
+            return this.selectedDataItems.map((item) => this.composer.getItemPropertyValue(item, 'value'));
         }
-        return this.selectedSlotItems.map(item => this.getItemValue(item));
+        return this.selectedSlotItems.map((item) => this.getItemValue(item));
     }
     /**
      * Called when connected to DOM
@@ -295,7 +288,8 @@ let Select = class Select extends ControlElement {
      * @returns {void}
      */
     update(changedProperties) {
-        this.cachedValue = ''; /* reset cached value as it is only valid when value and data are set the same time */
+        this.cachedValue =
+            ''; /* reset cached value as it is only valid when value and data are set the same time */
         const focusedChanged = changedProperties.has(FocusedPropertyKey);
         // the opened logic is bound to focus state
         if (focusedChanged) {
@@ -327,7 +321,7 @@ let Select = class Select extends ControlElement {
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
         this.addEventListener('keydown', this.onKeyDown); /* keydown when select is closed */
-        registerOverflowTooltip(this, () => this.labelText, () => this.labelRef.value ? isElementOverflown(this.labelRef.value) : false);
+        registerOverflowTooltip(this, () => this.labelText, () => (this.labelRef.value ? isElementOverflown(this.labelRef.value) : false));
     }
     /**
      * Called when element finished updating
@@ -397,7 +391,8 @@ let Select = class Select extends ControlElement {
             // this code might happen only when opened has been set during initialisation
             // or when display is set to none
             this.resizeThrottler.schedule(() => {
-                if (this.offsetWidth) { /* must be here to avoid infinitive loop */
+                if (this.offsetWidth) {
+                    /* must be here to avoid infinitive loop */
                     this.restrictPopupWidth();
                     this.requestUpdate();
                 }
@@ -500,7 +495,7 @@ let Select = class Select extends ControlElement {
      */
     onPopupClosed({ target }) {
         const eventOptions = {
-            capture: true,
+            /* need this for IE11, otherwise the event is not removed */ capture: true,
             passive: true
         };
         target?.removeEventListener('scroll', this.onPopupScroll, eventOptions);
@@ -601,10 +596,7 @@ let Select = class Select extends ControlElement {
      */
     isValidFilterKey(event) {
         // all printable keys have length of 1. This is better than regexp as we cover all non latin characters
-        return event.key.length === 1
-            && !event.ctrlKey
-            && !event.altKey
-            && !event.metaKey;
+        return event.key.length === 1 && !event.ctrlKey && !event.altKey && !event.metaKey;
     }
     /**
      * Focus and highlight element according to specified direction
@@ -676,7 +668,7 @@ let Select = class Select extends ControlElement {
         let selectableElements = this.getSelectableElements();
         const highlightedIdx = this.highlightedItem ? selectableElements.indexOf(this.highlightedItem) : -1;
         selectableElements = selectableElements.concat(selectableElements.splice(0, highlightedIdx));
-        const focusElement = selectableElements.find(item => {
+        const focusElement = selectableElements.find((item) => {
             const label = this.getItemLabel(item).toLowerCase();
             return label.startsWith(this.keySearchTerm) && item !== this.highlightedItem;
         });
@@ -738,7 +730,7 @@ let Select = class Select extends ControlElement {
      * @returns A list of selected elements
      */
     getSelectedElements() {
-        return this.getSelectableElements().filter(item => item.selected);
+        return this.getSelectableElements().filter((item) => item.selected);
     }
     /**
      * Clears the current selected items
@@ -749,7 +741,7 @@ let Select = class Select extends ControlElement {
             this.selectedDataItems.forEach((item) => this.composer.setItemPropertyValue(item, 'selected', false));
         }
         else {
-            this.selectedSlotItems.forEach(item => {
+            this.selectedSlotItems.forEach((item) => {
                 item.selected = false;
             });
         }
@@ -861,11 +853,7 @@ let Select = class Select extends ControlElement {
             case 'divider':
                 return html `<ef-item role="presentation" part="item" type="divider"></ef-item>`;
             case 'header':
-                return html `<ef-item
-          role="presentation"
-          part="item"
-          type="header"
-          .label=${item.label}></ef-item>`;
+                return html `<ef-item role="presentation" part="item" type="header" .label=${item.label}></ef-item>`;
             // no default
         }
         return html `<ef-item
@@ -910,11 +898,11 @@ let Select = class Select extends ControlElement {
      * Get data iterator template
      */
     get dataContent() {
-        return html `${this.composer.queryItems(() => true).map(item => this.toItem(item))}`;
+        return html `${this.composer.queryItems(() => true).map((item) => this.toItem(item))}`;
     }
     /**
-    * Edit template when select is not readonly or disabled
-    */
+     * Edit template when select is not readonly or disabled
+     */
     get popupTemplate() {
         if (this.lazyRendered) {
             return html `<ef-overlay
@@ -935,7 +923,9 @@ let Select = class Select extends ControlElement {
         @opened-changed="${this.onPopupOpenedChanged}"
         @opened="${this.onPopupOpened}"
         @refit=${this.onPopupRefit}
-        @closed="${this.onPopupClosed}">${this.hasDataItems() ? this.dataContent : this.slottedContent}</ef-overlay>`;
+        @closed="${this.onPopupClosed}"
+        >${this.hasDataItems() ? this.dataContent : this.slottedContent}</ef-overlay
+      >`;
         }
         else {
             // This code is required because IE11 polyfill need items to be within a slot
@@ -949,14 +939,11 @@ let Select = class Select extends ControlElement {
      * @return Render template
      */
     render() {
-        return html `
-    <div id="box">
-      <div id="text">
-        ${this.placeholderHidden() ? this.labelTemplate : this.placeholderTemplate}
+        return html ` <div id="box">
+        <div id="text">${this.placeholderHidden() ? this.labelTemplate : this.placeholderTemplate}</div>
+        <ef-icon icon="down" part="icon"></ef-icon>
       </div>
-      <ef-icon icon="down" part="icon"></ef-icon>
-    </div>
-    ${this.editTemplate}`;
+      ${this.editTemplate}`;
     }
 };
 __decorate([

package/lib/sidebar-layout/index.d.ts

@@ -1,7 +1,7 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
-import type { Layout } from '../layout';
+import { BasicElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import '../layout/index.js';
+import type { Layout } from '../layout';
 /**
  * Provides an app layout with sidebar.
  * There are 4 sections that can be slotted a component in.

package/lib/sidebar-layout/index.js

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
-import { BasicElement, html, css, nothing } from '@refinitiv-ui/core';
+import { BasicElement, css, html, nothing } 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 '../layout/index.js';
+import { VERSION } from '../version.js';
 /**
  * Provides an app layout with sidebar.
  * There are 4 sections that can be slotted a component in.
@@ -45,7 +45,7 @@ let SidebarLayout = class SidebarLayout extends BasicElement {
         display: block;
       }
 
-      [part=container] {
+      [part='container'] {
         height: 100%;
       }
 
@@ -58,16 +58,16 @@ let SidebarLayout = class SidebarLayout extends BasicElement {
         height: 100%;
       }
 
-      [part=sidebar] {
+      [part='sidebar'] {
         width: var(--sidebar-width);
       }
 
-      :host([collapsed]:not([sidebar-position])) [part=sidebar],
-      :host([collapsed][sidebar-position=left]) [part=sidebar] {
+      :host([collapsed]:not([sidebar-position])) [part='sidebar'],
+      :host([collapsed][sidebar-position='left']) [part='sidebar'] {
         margin-left: calc(var(--sidebar-width) * -1);
       }
 
-      :host([collapsed][sidebar-position=right]) [part=sidebar] {
+      :host([collapsed][sidebar-position='right']) [part='sidebar'] {
         margin-right: calc(var(--sidebar-width) * -1);
       }
     `;
@@ -80,7 +80,6 @@ let SidebarLayout = class SidebarLayout extends BasicElement {
     render() {
         return html `
       <ef-layout flex nowrap part="container">
-
         <ef-layout flex container part="sidebar" size="${this.sidebarWidth || nothing}">
           <ef-layout size="auto">
             <slot name="sidebar-header"></slot>
@@ -98,7 +97,6 @@ let SidebarLayout = class SidebarLayout extends BasicElement {
             <slot name="main-content"></slot>
           </ef-layout>
         </ef-layout>
-
       </ef-layout>
     `;
     }

package/lib/slider/index.d.ts

@@ -1,7 +1,7 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
-import { TranslateDirective } from '@refinitiv-ui/translate';
+import { CSSResultGroup, ControlElement, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import '@refinitiv-ui/phrasebook/locale/en/slider.js';
+import { TranslateDirective } from '@refinitiv-ui/translate';
 import '../number-field/index.js';
 /**
  * Allows users to make selections from a range of values