@refinitiv-ui/elements 7.0.0-next.5 → 7.0.1

package/lib/color-dialog/index.d.ts

@@ -1,13 +1,13 @@
 import { JSXInterface } from '../jsx';
-import { TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import { CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import '@refinitiv-ui/phrasebook/locale/en/color-dialog.js';
+import { Translate } from '@refinitiv-ui/translate';
 import '../button/index.js';
+import { Dialog } from '../dialog/index.js';
 import '../number-field/index.js';
 import '../text-field/index.js';
-import { Dialog } from '../dialog/index.js';
 import './elements/color-palettes.js';
 import './elements/grayscale-palettes.js';
-import { Translate } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/locale/en/color-dialog.js';
 /**
  * Displays a colour picker dialog,
  * for selecting a predefined range of colours.
@@ -64,8 +64,8 @@ export declare class ColorDialog extends Dialog {
      */
     private valueModel;
     /**
-    * @ignore
-    */
+     * @ignore
+     */
     draggable: boolean;
     /**
      * Set the palettes to activate no-color option

package/lib/color-dialog/index.js

@@ -1,20 +1,20 @@
 import { __decorate } from "tslib";
-import { html, css, WarningNotice } from '@refinitiv-ui/core';
+import { WarningNotice, 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 { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
-import { rgb, isHex, removeHashSign } from '@refinitiv-ui/utils/color.js';
-import { VERSION } from '../version.js';
-import { ValueModel } from './helpers/value-model.js';
+import '@refinitiv-ui/phrasebook/locale/en/color-dialog.js';
+import { translate } from '@refinitiv-ui/translate';
+import { isHex, removeHashSign, rgb } from '@refinitiv-ui/utils/color.js';
 import '../button/index.js';
+import { Dialog } from '../dialog/index.js';
 import '../number-field/index.js';
 import '../text-field/index.js';
-import { Dialog } from '../dialog/index.js';
+import { VERSION } from '../version.js';
 import './elements/color-palettes.js';
 import './elements/grayscale-palettes.js';
-import { translate } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/locale/en/color-dialog.js';
+import { ValueModel } from './helpers/value-model.js';
 /**
  * Displays a colour picker dialog,
  * for selecting a predefined range of colours.
@@ -61,8 +61,8 @@ let ColorDialog = class ColorDialog extends Dialog {
          */
         this.valueModel = new ValueModel();
         /**
-        * @ignore
-        */
+         * @ignore
+         */
         this.draggable = true;
         /**
          * Set the palettes to activate no-color option
@@ -90,13 +90,16 @@ let ColorDialog = class ColorDialog extends Dialog {
         :host {
           display: block;
         }
-        [part=preview-color][no-color] {
-          background: linear-gradient(to bottom right, transparent calc(50% - 2px),
-          var(--no-color-line-color, #ff0000) calc(50% - 1px),
-          var(--no-color-line-color, #ff0000) calc(50% + 1px),
-          transparent calc(50% + 2px));
+        [part='preview-color'][no-color] {
+          background: linear-gradient(
+            to bottom right,
+            transparent calc(50% - 2px),
+            var(--no-color-line-color, #ff0000) calc(50% - 1px),
+            var(--no-color-line-color, #ff0000) calc(50% + 1px),
+            transparent calc(50% + 2px)
+          );
         }
-    `
+      `
         ];
     }
     /**
@@ -140,7 +143,9 @@ let ColorDialog = class ColorDialog extends Dialog {
      */
     set red(red) {
         red = String(red);
-        this.value = this.isValidRGB(red) ? rgb(Number(red), Number(this.green), Number(this.blue)).formatHex() : '';
+        this.value = this.isValidRGB(red)
+            ? rgb(Number(red), Number(this.green), Number(this.blue)).formatHex()
+            : '';
     }
     get red() {
         return this.hex ? rgb(`#${this.hex}`).r.toString() : '';
@@ -152,7 +157,9 @@ let ColorDialog = class ColorDialog extends Dialog {
      */
     set green(green) {
         green = String(green);
-        this.value = this.isValidRGB(green) ? rgb(Number(this.red), Number(green), Number(this.blue)).formatHex() : '';
+        this.value = this.isValidRGB(green)
+            ? rgb(Number(this.red), Number(green), Number(this.blue)).formatHex()
+            : '';
     }
     get green() {
         return this.hex ? rgb(`#${this.hex}`).g.toString() : '';
@@ -164,7 +171,9 @@ let ColorDialog = class ColorDialog extends Dialog {
      */
     set blue(blue) {
         blue = String(blue);
-        this.value = this.isValidRGB(blue) ? rgb(Number(this.red), Number(this.green), Number(blue)).formatHex() : '';
+        this.value = this.isValidRGB(blue)
+            ? rgb(Number(this.red), Number(this.green), Number(blue)).formatHex()
+            : '';
     }
     get blue() {
         return this.hex ? rgb(`#${this.hex}`).b.toString() : '';
@@ -176,14 +185,14 @@ let ColorDialog = class ColorDialog extends Dialog {
      */
     shouldUpdate(changedProperties) {
         const shouldUpdate = super.shouldUpdate(changedProperties);
-        return shouldUpdate
-            || changedProperties.has('allowNocolor')
-            || changedProperties.has('red')
-            || changedProperties.has('green')
-            || changedProperties.has('blue')
-            || changedProperties.has('value')
-            || changedProperties.has('hex')
-            || changedProperties.has('enableConfirm');
+        return (shouldUpdate ||
+            changedProperties.has('allowNocolor') ||
+            changedProperties.has('red') ||
+            changedProperties.has('green') ||
+            changedProperties.has('blue') ||
+            changedProperties.has('value') ||
+            changedProperties.has('hex') ||
+            changedProperties.has('enableConfirm'));
     }
     /**
      * Updates the element
@@ -250,7 +259,7 @@ let ColorDialog = class ColorDialog extends Dialog {
      * @returns true if value is within 0 - 255
      */
     isValidRGB(value) {
-        const isValid = value === '' || Number(value) >= 0 && Number(value) <= 255;
+        const isValid = value === '' || (Number(value) >= 0 && Number(value) <= 255);
         if (!isValid) {
             new WarningNotice(`The specified RGB "${value}" is not valid color. The value should be 0 - 255.`).show();
         }
@@ -316,7 +325,11 @@ let ColorDialog = class ColorDialog extends Dialog {
      * @returns {boolean} true if disabled
      */
     isApplyDisabled() {
-        return this.valueModel.hasChanged() && this.valueModel.isValid() ? this.allowNocolor ? false : this.valueModel.hex === '' : true;
+        return this.valueModel.hasChanged() && this.valueModel.isValid()
+            ? this.allowNocolor
+                ? false
+                : this.valueModel.hex === ''
+            : true;
     }
     /**
      * A `TemplateResult` that will be used
@@ -334,14 +347,16 @@ let ColorDialog = class ColorDialog extends Dialog {
             .value=${this.valueModel.value}
             @value-changed=${this.onColorChanged}
             part="color-palettes"
-            aria-hidden="true">
+            aria-hidden="true"
+          >
           </ef-color-palettes>
           <ef-grayscale-palettes
             .value=${this.valueModel.value}
             @value-changed=${this.onColorChanged}
             ?allow-nocolor=${this.allowNocolor}
             part="grayscale-palettes"
-            aria-hidden="true">
+            aria-hidden="true"
+          >
           </ef-grayscale-palettes>
         </div>
         <div part="inputs-container">
@@ -350,7 +365,8 @@ let ColorDialog = class ColorDialog extends Dialog {
             style=${styleMap({
             backgroundColor: this.valueModel.value || undefined
         })}
-            ?no-color=${!this.valueModel.value}></div>
+            ?no-color=${!this.valueModel.value}
+          ></div>
           <div>
             <label for="redInput">${this.t('RED')}&nbsp;:</label>
             <ef-number-field
@@ -395,7 +411,8 @@ let ColorDialog = class ColorDialog extends Dialog {
               pattern="^([0-9a-fA-F]{3}){1,2}$"
               part="color-input"
               id="hexInput"
-              maxlength="6">
+              maxlength="6"
+            >
             </ef-text-field>
           </div>
         </div>
@@ -417,11 +434,10 @@ let ColorDialog = class ColorDialog extends Dialog {
         part="button"
         cta
         @tap=${this.onConfirmValue}
-        ?disabled=${this.isApplyDisabled()}>${this.t('APPLY')}</ef-button>
-      <ef-button
-        id="closeButton"
-        @tap=${this.onCloseDialog}
-        part="button">${this.t('CLOSE')}</ef-button>
+        ?disabled=${this.isApplyDisabled()}
+        >${this.t('APPLY')}</ef-button
+      >
+      <ef-button id="closeButton" @tap=${this.onCloseDialog} part="button">${this.t('CLOSE')}</ef-button>
     `;
     }
 };

package/lib/color-dialog/themes/halo/dark/index.js

@@ -3,5 +3,4 @@ import '@refinitiv-ui/elements/number-field/themes/halo/dark';
 import '@refinitiv-ui/elements/button/themes/halo/dark';
 import '@refinitiv-ui/elements/panel/themes/halo/dark';
 import '@refinitiv-ui/elements/dialog/themes/halo/dark';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-color-dialog', styles: ':host{width:425px}:host [part=content-section]{display:flex;min-width:0}:host [part=inputs-container]{display:flex;flex-direction:column;align-items:flex-end;padding-left:15px}:host [part=inputs-container]>*{display:flex;align-items:center;margin-bottom:5px}:host [part=color-input],:host [part=preview-color]{touch-action:manipulation;margin:2px;width:100px;box-sizing:border-box}:host [part=preview-color]{border:1px solid #404040;height:24px;margin-bottom:10px}:host [part=palettes-container]{width:100%}:host [part=color-palettes]{width:100%;height:calc(100% - 23px)}:host [part=grayscale-palettes]{height:23px}:host [part=color-palettes],:host [part=grayscale-palettes]{touch-action:manipulation}:host [part=footer]{display:flex;justify-content:flex-end;align-items:center}:host [part=button]{touch-action:manipulation;margin:8px}:host [part=button]:first-child{margin-right:0}' }}));

package/lib/color-dialog/themes/halo/light/index.js

@@ -3,5 +3,4 @@ import '@refinitiv-ui/elements/number-field/themes/halo/light';
 import '@refinitiv-ui/elements/button/themes/halo/light';
 import '@refinitiv-ui/elements/panel/themes/halo/light';
 import '@refinitiv-ui/elements/dialog/themes/halo/light';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-color-dialog', styles: ':host{width:425px}:host [part=content-section]{display:flex;min-width:0}:host [part=inputs-container]{display:flex;flex-direction:column;align-items:flex-end;padding-left:15px}:host [part=inputs-container]>*{display:flex;align-items:center;margin-bottom:5px}:host [part=color-input],:host [part=preview-color]{touch-action:manipulation;margin:2px;width:100px;box-sizing:border-box}:host [part=preview-color]{border:1px solid #595959;height:24px;margin-bottom:10px}:host [part=palettes-container]{width:100%}:host [part=color-palettes]{width:100%;height:calc(100% - 23px)}:host [part=grayscale-palettes]{height:23px}:host [part=color-palettes],:host [part=grayscale-palettes]{touch-action:manipulation}:host [part=footer]{display:flex;justify-content:flex-end;align-items:center}:host [part=button]{touch-action:manipulation;margin:8px}:host [part=button]:first-child{margin-right:0}' }}));

package/lib/color-dialog/themes/solar/charcoal/index.js

@@ -3,5 +3,4 @@ import '@refinitiv-ui/elements/number-field/themes/solar/charcoal';
 import '@refinitiv-ui/elements/button/themes/solar/charcoal';
 import '@refinitiv-ui/elements/panel/themes/solar/charcoal';
 import '@refinitiv-ui/elements/dialog/themes/solar/charcoal';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-color-dialog', styles: ':host [part=content-section]{display:flex;min-width:0;padding:5px 0}:host [part=inputs-container]{display:flex;flex-direction:column;align-items:flex-end;padding-left:15px}:host [part=inputs-container]>*{display:flex;align-items:center;margin-bottom:5px}:host [part=color-input],:host [part=preview-color]{touch-action:manipulation;box-sizing:border-box;width:60px;margin:0 0 0 5px}:host [part=preview-color]{border:1px solid #4a4a52;height:30px;margin-bottom:15px}:host [part=palettes-container]{width:100%}:host [part=color-palettes]{width:100%;height:calc(100% - 23px)}:host [part=color-palettes],:host [part=grayscale-palettes]{touch-action:manipulation}:host [part=footer]{display:flex;justify-content:flex-end;align-items:center}:host [part=button]{touch-action:manipulation;margin:10px 10px 10px 3px}:host{width:300px}:host [part=grayscale-palettes]{height:18px;width:140px;margin:5px 0 0 23px}:host [part=button]:first-child{margin-right:3px}' }}));

package/lib/color-dialog/themes/solar/pearl/index.js

@@ -3,5 +3,4 @@ import '@refinitiv-ui/elements/number-field/themes/solar/pearl';
 import '@refinitiv-ui/elements/button/themes/solar/pearl';
 import '@refinitiv-ui/elements/panel/themes/solar/pearl';
 import '@refinitiv-ui/elements/dialog/themes/solar/pearl';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-color-dialog', styles: ':host [part=content-section]{display:flex;min-width:0;padding:5px 0}:host [part=inputs-container]{display:flex;flex-direction:column;align-items:flex-end;padding-left:15px}:host [part=inputs-container]>*{display:flex;align-items:center;margin-bottom:5px}:host [part=color-input],:host [part=preview-color]{touch-action:manipulation;box-sizing:border-box;width:60px;margin:0 0 0 5px}:host [part=preview-color]{border:1px solid #a9afba;height:30px;margin-bottom:15px}:host [part=palettes-container]{width:100%}:host [part=color-palettes]{width:100%;height:calc(100% - 23px)}:host [part=color-palettes],:host [part=grayscale-palettes]{touch-action:manipulation}:host [part=footer]{display:flex;justify-content:flex-end;align-items:center}:host [part=button]{touch-action:manipulation;margin:10px 10px 10px 3px}:host{width:300px}:host [part=grayscale-palettes]{height:18px;width:140px;margin:5px 0 0 23px}:host [part=button]:first-child{margin-right:3px}' }}));

package/lib/color-picker/index.d.ts

@@ -1,8 +1,8 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, PropertyValues, TemplateResult, CSSResult } from '@refinitiv-ui/core';
-import '../color-dialog/index.js';
+import { CSSResult, ControlElement, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import '@refinitiv-ui/phrasebook/locale/en/color-picker.js';
 import { TranslatePromise } from '@refinitiv-ui/translate';
+import '../color-dialog/index.js';
 /**
  *
  * Color picker control

package/lib/color-picker/index.js

@@ -1,15 +1,15 @@
 import { __decorate } from "tslib";
-import { ControlElement, html, css, WarningNotice, nothing } from '@refinitiv-ui/core';
+import { ControlElement, WarningNotice, 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 { state } from '@refinitiv-ui/core/decorators/state.js';
+import { createRef, ref } from '@refinitiv-ui/core/directives/ref.js';
 import { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
-import { VERSION } from '../version.js';
+import '@refinitiv-ui/phrasebook/locale/en/color-picker.js';
+import { TranslatePropertyKey, translate } from '@refinitiv-ui/translate';
 import { isHex, readableColor } from '@refinitiv-ui/utils/color.js';
-import { ref, createRef } from '@refinitiv-ui/core/directives/ref.js';
 import '../color-dialog/index.js';
-import '@refinitiv-ui/phrasebook/locale/en/color-picker.js';
-import { state } from '@refinitiv-ui/core/decorators/state.js';
-import { translate, TranslatePropertyKey } from '@refinitiv-ui/translate';
+import { VERSION } from '../version.js';
 const DIALOG_POSITION = ['right-start', 'right-end', 'right-middle', 'left-start', 'left-end', 'left-middle'];
 /**
  *
@@ -67,11 +67,14 @@ let ColorPicker = class ColorPicker extends ControlElement {
       :host {
         display: inline-block;
       }
-      [part=color-item][no-color] {
-        background: linear-gradient(to bottom right, transparent calc(50% - 1px),
-        var(--no-color-line-color, #ff0000) calc(50% - 1px),
-        var(--no-color-line-color, #ff0000) calc(50% + 1px),
-        transparent calc(50% + 1px));
+      [part='color-item'][no-color] {
+        background: linear-gradient(
+          to bottom right,
+          transparent calc(50% - 1px),
+          var(--no-color-line-color, #ff0000) calc(50% - 1px),
+          var(--no-color-line-color, #ff0000) calc(50% + 1px),
+          transparent calc(50% + 1px)
+        );
       }
     `;
     }
@@ -172,7 +175,8 @@ let ColorPicker = class ColorPicker extends ControlElement {
      * @returns {void}
      */
     setOpened(opened) {
-        if (opened && !this.canOpenPopup) { /* never allow to open popup if cannot do so */
+        if (opened && !this.canOpenPopup) {
+            /* never allow to open popup if cannot do so */
             return;
         }
         if (this.opened !== opened) {
@@ -208,10 +212,11 @@ let ColorPicker = class ColorPicker extends ControlElement {
             return null;
         }
         return html `<div
-    part="aria-selection"
-    role="status"
-    aria-live="polite"
-    aria-label="${this.colorAriaLabel}"></div>`;
+      part="aria-selection"
+      role="status"
+      aria-live="polite"
+      aria-label="${this.colorAriaLabel}"
+    ></div>`;
     }
     /**
      * Helper method, used to set the color description.
@@ -243,25 +248,30 @@ let ColorPicker = class ColorPicker extends ControlElement {
     get dialogTemplate() {
         if (this.lazyRendered) {
             return html `<ef-color-dialog
-      offset="4"
-      ${ref(this.dialogRef)}
-      .lang=${this.lang || nothing}
-      .value=${this.value}
-      .focusBoundary=${this}
-      .positionTarget=${this}
-      .position=${DIALOG_POSITION}
-      .withBackdrop=${false}
-      ?opened=${this.opened}
-      ?allow-nocolor=${this.allowNocolor}
-      @opened-changed=${this.onColorDialogOpenedChanged}
-      @value-changed=${this.onColorDialogValueChanged}></ef-color-dialog>`;
+        offset="4"
+        ${ref(this.dialogRef)}
+        .lang=${this.lang || nothing}
+        .value=${this.value}
+        .focusBoundary=${this}
+        .positionTarget=${this}
+        .position=${DIALOG_POSITION}
+        .withBackdrop=${false}
+        ?opened=${this.opened}
+        ?allow-nocolor=${this.allowNocolor}
+        @opened-changed=${this.onColorDialogOpenedChanged}
+        @value-changed=${this.onColorDialogValueChanged}
+      ></ef-color-dialog>`;
         }
     }
     /**
      * Color item template
      */
     get colorItemTemplate() {
-        return html `<div part="color-item" ?no-color=${!this.value} style=${styleMap({ backgroundColor: this.value })}></div>`;
+        return html `<div
+      part="color-item"
+      ?no-color=${!this.value}
+      style=${styleMap({ backgroundColor: this.value })}
+    ></div>`;
     }
     /**
      * A `TemplateResult` that will be used
@@ -269,11 +279,7 @@ let ColorPicker = class ColorPicker extends ControlElement {
      * @return Render template
      */
     render() {
-        return html `
-      ${this.selectionTemplate}
-      ${this.colorItemTemplate}
-      ${this.dialogTemplate}
-      `;
+        return html ` ${this.selectionTemplate} ${this.colorItemTemplate} ${this.dialogTemplate} `;
     }
 };
 __decorate([

package/lib/color-picker/themes/halo/dark/index.js

@@ -1,3 +1,2 @@
 import '@refinitiv-ui/elements/color-dialog/themes/halo/dark';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-color-picker', styles: ':host{outline:0;box-sizing:border-box;height:24px;min-width:24px;border:1px solid #404040}:host([disabled]),:host([readonly]){border-color:rgba(64,64,64,.5)}:host [part=color-item]{cursor:pointer;height:100%}:host([disabled]) [part=color-item],:host([readonly]) [part=color-item]{pointer-events:none}:host([focused=visible]){border-color:#334bff}:host(:not([readonly]):not([disabled]):not([focused]):hover){border-color:grey}' }}));

package/lib/color-picker/themes/halo/light/index.js

@@ -1,3 +1,2 @@
 import '@refinitiv-ui/elements/color-dialog/themes/halo/light';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-color-picker', styles: ':host{outline:0;box-sizing:border-box;height:24px;min-width:24px;border:1px solid #595959}:host([disabled]),:host([readonly]){border-color:rgba(89,89,89,.5)}:host [part=color-item]{cursor:pointer;height:100%}:host([disabled]) [part=color-item],:host([readonly]) [part=color-item]{pointer-events:none}:host([focused=visible]){border-color:#334bff}:host(:not([readonly]):not([disabled]):not([focused]):hover){border-color:#0d0d0d}' }}));

package/lib/color-picker/themes/solar/charcoal/index.js

@@ -1,3 +1,2 @@
 import '@refinitiv-ui/elements/color-dialog/themes/solar/charcoal';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-color-picker', styles: ':host{outline:0;box-sizing:border-box;height:23px;min-width:23px;border:1px solid #4a4a52}:host([disabled]),:host([readonly]){border-color:rgba(74,74,82,.6)}:host [part=color-item]{cursor:pointer;height:100%}:host([disabled]) [part=color-item],:host([readonly]) [part=color-item]{pointer-events:none}:host([focused=visible]){border-color:#f93;border-style:dotted}' }}));

package/lib/color-picker/themes/solar/pearl/index.js

@@ -1,3 +1,2 @@
 import '@refinitiv-ui/elements/color-dialog/themes/solar/pearl';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-color-picker', styles: ':host{outline:0;box-sizing:border-box;height:23px;min-width:23px;border:1px solid #a9afba}:host([disabled]),:host([readonly]){border-color:rgba(169,175,186,.6)}:host [part=color-item]{cursor:pointer;height:100%}:host([disabled]) [part=color-item],:host([readonly]) [part=color-item]{pointer-events:none}:host([focused=visible]){border-color:#f93;border-style:dotted}' }}));

package/lib/combo-box/helpers/filter.d.ts

@@ -1,7 +1,7 @@
-import type { DataItem } from '@refinitiv-ui/utils/collection.js';
+import type { ItemData } from '../../item';
 import type { ComboBox } from '../index';
 import type { ComboBoxFilter } from './types';
-import type { ItemData } from '../../item';
+import type { DataItem } from '@refinitiv-ui/utils/collection.js';
 /**
  * Default filter used by combo box
  * @param el ComboBox instance to filter

package/lib/combo-box/helpers/types.d.ts

@@ -1,5 +1,5 @@
-import type { DataItem } from '@refinitiv-ui/utils/collection.js';
 import type { ItemData } from '../../item';
+import type { DataItem } from '@refinitiv-ui/utils/collection.js';
 /**
  * Predicate callback
  * Matches item against filter function

package/lib/combo-box/index.d.ts

@@ -1,19 +1,19 @@
 import { JSXInterface } from '../jsx';
-import { FormFieldElement, CSSResultGroup, PropertyValues, TapEvent, TemplateResult, StyleMap } from '@refinitiv-ui/core';
+import { CSSResultGroup, FormFieldElement, PropertyValues, StyleMap, TapEvent, TemplateResult } from '@refinitiv-ui/core';
 import { TemplateMap } from '@refinitiv-ui/core/directives/template-map.js';
-import { CollectionComposer, DataItem } from '@refinitiv-ui/utils/collection.js';
+import '@refinitiv-ui/phrasebook/locale/en/combo-box.js';
+import { TranslateDirective } from '@refinitiv-ui/translate';
 import { AnimationTaskRunner } from '@refinitiv-ui/utils/async.js';
-import { ComboBoxRenderer } from './helpers/renderer.js';
-import { CustomKeyboardEvent } from './helpers/keyboard-event.js';
+import { CollectionComposer, DataItem } from '@refinitiv-ui/utils/collection.js';
+import '../counter/index.js';
 import '../icon/index.js';
-import '../overlay/index.js';
 import '../list/index.js';
-import '../counter/index.js';
+import '../overlay/index.js';
+import { CustomKeyboardEvent } from './helpers/keyboard-event.js';
+import { ComboBoxRenderer } from './helpers/renderer.js';
 import type { ItemData } from '../item';
-import type { ComboBoxData, ComboBoxFilter } from './helpers/types';
 import type { List } from '../list';
-import { TranslateDirective } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/locale/en/combo-box.js';
+import type { ComboBoxData, ComboBoxFilter } from './helpers/types';
 export type { ComboBoxFilter, ComboBoxData };
 export { ComboBoxRenderer };
 /**