@refinitiv-ui/elements 5.0.0-beta.3 → 5.0.0-dev.204

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

@@ -1,25 +1,21 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, CSSResult, PropertyValues, TapEvent, TemplateResult } from '@refinitiv-ui/core';
-import { TranslateDirective } from '@refinitiv-ui/translate';
-import { AnimationTaskRunner, CollectionComposer, DataItem } from '@refinitiv-ui/utils';
-import '@refinitiv-ui/phrasebook/lib/locale/en/combo-box';
-import '../icon';
-import '../overlay';
-import '../list';
-import '../pill';
-import '../text-field';
-import { List, ListRenderer as ComboBoxRenderer } from '../list';
+import { FormFieldElement, CSSResultGroup, PropertyValues, TapEvent, TemplateResult, StyleMap } from '@refinitiv-ui/core';
+import { TemplateMap } from '@refinitiv-ui/core/lib/directives/template-map.js';
+import { CollectionComposer, DataItem } from '@refinitiv-ui/utils/lib/collection.js';
+import { AnimationTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
 import { ItemData } from '../item';
-import { TextField } from '../text-field';
 import { ComboBoxData, ComboBoxFilter } from './helpers/types';
-import { CustomKeyboardEvent } from './helpers/keyboard-event';
-export { ComboBoxRenderer, ComboBoxFilter, ComboBoxData };
-/**
- * Style required by popup
- */
-declare type StyleInfo = {
-    [name: string]: string;
-};
+import type { List } from '../list/index.js';
+import { ComboBoxRenderer } from './helpers/renderer.js';
+import { CustomKeyboardEvent } from './helpers/keyboard-event.js';
+import '../icon/index.js';
+import '../overlay/index.js';
+import '../list/index.js';
+import '../counter/index.js';
+import { TranslateDirective } from '@refinitiv-ui/translate';
+import '@refinitiv-ui/phrasebook/lib/locale/en/combo-box.js';
+export type { ComboBoxFilter, ComboBoxData };
+export { ComboBoxRenderer };
 /**
  * Combines a popup with a filterable selection list
  *
@@ -36,14 +32,19 @@ declare type StyleInfo = {
  * @fires query-changed - Dispatched when query changes
  * @fires opened-changed - Dispatched when opened state changes
  */
-export declare class ComboBox<T extends DataItem = ItemData> extends ControlElement {
+export declare class ComboBox<T extends DataItem = ItemData> extends FormFieldElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * Custom filter for static data
      * Set this to null when data is filtered externally, eg XHR
@@ -59,6 +60,7 @@ export declare class ComboBox<T extends DataItem = ItemData> extends ControlElem
     /**
      * Multiple selection mode
      * @param multiple true to set multiple mode
+     * @default false
      */
     set multiple(multiple: boolean);
     get multiple(): boolean;
@@ -78,6 +80,7 @@ export declare class ComboBox<T extends DataItem = ItemData> extends ControlElem
     /**
      * Allow to enter any value
      * @param freeText true to set freeText mode
+     * @default false
      */
     set freeText(freeText: boolean);
     get freeText(): boolean;
@@ -100,6 +103,7 @@ export declare class ComboBox<T extends DataItem = ItemData> extends ControlElem
     /**
      * Data array to be displayed
      * @type {ComboBoxData<T>}
+     * @default []
      */
     get data(): ComboBoxData<T>;
     set data(value: ComboBoxData<T>);
@@ -111,6 +115,7 @@ export declare class ComboBox<T extends DataItem = ItemData> extends ControlElem
     /**
      * Returns the first selected item value.
      * Use `values` when multiple selection mode is enabled.
+     * @default -
      */
     get value(): string;
     set value(value: string);
@@ -118,6 +123,7 @@ export declare class ComboBox<T extends DataItem = ItemData> extends ControlElem
      * Returns a values collection of the currently
      * selected item values
      * @type {string[]}
+     * @default []
      */
     get values(): string[];
     set values(values: string[]);
@@ -130,14 +136,16 @@ export declare class ComboBox<T extends DataItem = ItemData> extends ControlElem
     private _query;
     /**
      * Query string applied to combo-box
-     * Set via internal text-field input
+     * Set via internal input
      * @readonly
+     * @default null
      */
     get query(): string | null;
     set query(query: string | null);
     /**
      * Label of selected value
      * @returns Label to use, defaults to empty string
+     * @default -
      * @readonly
      */
     get label(): string;
@@ -166,11 +174,7 @@ export declare class ComboBox<T extends DataItem = ItemData> extends ControlElem
     /**
      * Hold popup styling applied on open
      */
-    protected popupDynamicStyles: StyleInfo;
-    /**
-     * Internal reference to text-field element
-     */
-    protected inputEl: TextField;
+    protected popupDynamicStyles: StyleMap;
     /**
      * Internal reference to list element
      */
@@ -209,6 +213,10 @@ export declare class ComboBox<T extends DataItem = ItemData> extends ControlElem
      * The the values from composer ignoring freeTextValue
      */
     protected get composerValues(): string[];
+    /**
+     * Get the first value of highlighted item
+     */
+    protected get highlightedItemValue(): string | null;
     /**
      * Mark combobox with loading flag
      * Used in conjunction with data promise
@@ -313,6 +321,10 @@ export declare class ComboBox<T extends DataItem = ItemData> extends ControlElem
      * @returns {void}
      */
     protected scrollToSelected(): void;
+    /**
+     * Get a list of highlighted items
+     */
+    protected get highlightedItems(): readonly T[];
     /**
      * Highlights the item
      * @param item data item to highlight
@@ -375,11 +387,23 @@ export declare class ComboBox<T extends DataItem = ItemData> extends ControlElem
      */
     protected shiftFocus(): void;
     /**
-     * Handle text value change from text-field
-     * @param event Custom Event fired from text-field
+     * Runs on input element `input` event
+     * @param event `input` event
+     * @returns {void}
+     */
+    protected onInputInput(event: InputEvent): void;
+    /**
+     * Runs on input element `change` event
+     * @param event `change` event
      * @returns {void}
      */
-    protected onInputValueChanged(event: CustomEvent<HTMLInputElement>): void;
+    protected onInputChange(event: InputEvent): void;
+    /**
+     * Handle text value change from input field
+     * @param event Custom Event fired from input field
+     * @returns {void}
+     */
+    protected onInputValueChanged(event: InputEvent): void;
     /**
      * Handle list value changed
      * @returns {void}
@@ -494,6 +518,11 @@ export declare class ComboBox<T extends DataItem = ItemData> extends ControlElem
      * @returns Popup template or undefined
      */
     protected get popupTemplate(): TemplateResult | undefined;
+    /**
+     * Decorate `<input>` element with common properties extended from combobox input
+     * @returns template map
+     */
+    protected get decorateInputMap(): TemplateMap;
     /**
      * Returns a template for input field
      * @returns Input template
@@ -517,4 +546,6 @@ declare global {
       'ef-combo-box': Partial<ComboBox> | JSXInterface.HTMLAttributes<ComboBox>;
     }
   }
-}
+}
+
+export {};

package/lib/combo-box/index.js

@@ -1,21 +1,23 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { ControlElement, css, customElement, html, property, query, styleMap, WarningNotice, FocusedPropertyKey, eventOptions } from '@refinitiv-ui/core';
+import { __decorate } from "tslib";
+import { FormFieldElement, css, html, WarningNotice, FocusedPropertyKey } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { eventOptions } from '@refinitiv-ui/core/lib/decorators/event-options.js';
+import { styleMap } from '@refinitiv-ui/core/lib/directives/style-map.js';
+import { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
+import { VERSION } from '../version.js';
+import { CollectionComposer } from '@refinitiv-ui/utils/lib/collection.js';
+import { AnimationTaskRunner, TimeoutTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
+import { ComboBoxRenderer } from './helpers/renderer.js';
+import { defaultFilter } from './helpers/filter.js';
+import { CustomKeyboardEvent } from './helpers/keyboard-event.js';
+import '../icon/index.js';
+import '../overlay/index.js';
+import '../list/index.js';
+import '../counter/index.js';
 import { translate } from '@refinitiv-ui/translate';
-import { AnimationTaskRunner, CollectionComposer, TimeoutTaskRunner } from '@refinitiv-ui/utils';
-import '@refinitiv-ui/phrasebook/lib/locale/en/combo-box';
-import '../icon';
-import '../overlay';
-import '../list';
-import '../pill';
-import '../text-field';
-import { ListRenderer as ComboBoxRenderer } from '../list';
-import { defaultFilter } from './helpers/filter';
-import { CustomKeyboardEvent } from './helpers/keyboard-event';
+import '@refinitiv-ui/phrasebook/lib/locale/en/combo-box.js';
 export { ComboBoxRenderer };
 const QUERY_DEBOUNCE_RATE = 0;
 // Maximum number of characters to display in multiple mode
@@ -42,7 +44,7 @@ const freeTextMultipleWarning = new WarningNotice('"free-text" mode is not compa
  * @fires query-changed - Dispatched when query changes
  * @fires opened-changed - Dispatched when opened state changes
  */
-let ComboBox = class ComboBox extends ControlElement {
+let ComboBox = class ComboBox extends FormFieldElement {
     constructor() {
         super(...arguments);
         /**
@@ -130,7 +132,14 @@ let ComboBox = class ComboBox extends ControlElement {
         this.shouldOpenOnFocus = false;
     }
     /**
-     * A `CSSResult` that will be used
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
@@ -143,18 +152,15 @@ let ComboBox = class ComboBox extends ControlElement {
         user-select: none;
         outline: none;
       }
-      [part=input-wrapper] {
+      [part~=input-wrapper] {
         cursor: pointer;
       }
-      [part=input] {
+      [part~=input] {
         cursor: text;
       }
-      [part=input]::-ms-clear {
+      [part~=input]::-ms-clear {
         display: none;
       }
-      [part=selection-badge] {
-        pointer-events: none;
-      }
       [hidden] {
         display: none !important;
       }
@@ -163,6 +169,7 @@ let ComboBox = class ComboBox extends ControlElement {
     /**
      * Multiple selection mode
      * @param multiple true to set multiple mode
+     * @default false
      */
     set multiple(multiple) {
         if (multiple && this.freeText) {
@@ -171,7 +178,7 @@ let ComboBox = class ComboBox extends ControlElement {
         }
         const oldMultiple = this._multiple;
         this._multiple = multiple;
-        void this.requestUpdate('multiple', oldMultiple);
+        this.requestUpdate('multiple', oldMultiple);
     }
     get multiple() {
         return this._multiple;
@@ -179,6 +186,7 @@ let ComboBox = class ComboBox extends ControlElement {
     /**
      * Allow to enter any value
      * @param freeText true to set freeText mode
+     * @default false
      */
     set freeText(freeText) {
         if (this.multiple && freeText) {
@@ -190,7 +198,7 @@ let ComboBox = class ComboBox extends ControlElement {
         }
         const oldFreeText = this._freeText;
         this._freeText = freeText;
-        void this.requestUpdate('freeText', oldFreeText);
+        this.requestUpdate('freeText', oldFreeText);
     }
     get freeText() {
         return this._freeText;
@@ -212,6 +220,7 @@ let ComboBox = class ComboBox extends ControlElement {
     /**
      * Data array to be displayed
      * @type {ComboBoxData<T>}
+     * @default []
      */
     get data() {
         return this._data;
@@ -223,6 +232,7 @@ let ComboBox = class ComboBox extends ControlElement {
     /**
      * Returns the first selected item value.
      * Use `values` when multiple selection mode is enabled.
+     * @default -
      */
     get value() {
         return this.values[0] || '';
@@ -243,6 +253,7 @@ let ComboBox = class ComboBox extends ControlElement {
      * Returns a values collection of the currently
      * selected item values
      * @type {string[]}
+     * @default []
      */
     get values() {
         // In free text mode, compare selected to values
@@ -263,7 +274,7 @@ let ComboBox = class ComboBox extends ControlElement {
             // Should we update the selection state?
             if (newComparison !== oldComparison) {
                 this.updateComposerValues(newValues);
-                void this.requestUpdate('values', oldValues);
+                this.requestUpdate('values', oldValues);
             }
         }
     }
@@ -284,8 +295,9 @@ let ComboBox = class ComboBox extends ControlElement {
     }
     /**
      * Query string applied to combo-box
-     * Set via internal text-field input
+     * Set via internal input
      * @readonly
+     * @default null
      */
     get query() {
         return this._query;
@@ -297,12 +309,13 @@ let ComboBox = class ComboBox extends ControlElement {
         if (oldVal !== this._query) {
             this.clearHighlighted();
             this.filterItems();
-            void this.requestUpdate('query', oldVal);
+            this.requestUpdate('query', oldVal);
         }
     }
     /**
      * Label of selected value
      * @returns Label to use, defaults to empty string
+     * @default -
      * @readonly
      */
     get label() {
@@ -343,7 +356,7 @@ let ComboBox = class ComboBox extends ControlElement {
                 this.value = this.cachedValue;
                 this.cachedValue = ''; // Reset as it's only needed for initialisation
             }
-            void this.requestUpdate('data', oldValue);
+            this.requestUpdate('data', oldValue);
         }
     }
     /**
@@ -378,6 +391,15 @@ let ComboBox = class ComboBox extends ControlElement {
         return this.queryItemsByPropertyValue('selected', true)
             .map(item => this.getItemPropertyValue(item, 'value'));
     }
+    /**
+     * Get the first value of highlighted item
+     */
+    get highlightedItemValue() {
+        if (!this.opened) {
+            return null;
+        }
+        return this.highlightedItems.map(item => this.getItemPropertyValue(item, 'value'))[0] || '';
+    }
     /**
      * Return currently selected items
      * This is distinct from values as for controls with persistence features
@@ -465,9 +487,9 @@ let ComboBox = class ComboBox extends ControlElement {
         }
         // If label is defined it means that there is an actual value
         // Select input text to simplify clearing the value
-        if (focusedChanged && this.focused && this.label) {
-            this.inputEl.focus();
-            this.inputEl.select();
+        if (focusedChanged && this.focused && this.label && this.inputElement) {
+            this.inputElement.focus();
+            this.inputElement.select();
         }
         // Make sure that the first item is always highlighted
         if (this.opened && (changedProperties.has('opened') || changedProperties.has('data') || changedProperties.has('query'))) {
@@ -487,8 +509,8 @@ let ComboBox = class ComboBox extends ControlElement {
      */
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
-        this.addEventListener('keydown', event => this.onKeyDown(event));
-        this.addEventListener('tapstart', event => this.onTapStart(event));
+        this.addEventListener('keydown', this.onKeyDown);
+        this.addEventListener('tapstart', this.onTapStart);
     }
     /**
      * Sets opened state and fires event
@@ -506,7 +528,7 @@ let ComboBox = class ComboBox extends ControlElement {
      * @returns {void}
      */
     modificationUpdate() {
-        void this.requestUpdate();
+        this.requestUpdate();
     }
     /**
      * Queries the composer for data items
@@ -564,6 +586,12 @@ let ComboBox = class ComboBox extends ControlElement {
             (_a = this.listEl) === null || _a === void 0 ? void 0 : _a.scrollToItem(item);
         }
     }
+    /**
+     * Get a list of highlighted items
+     */
+    get highlightedItems() {
+        return this.queryItemsByPropertyValue('highlighted', true);
+    }
     /**
      * Highlights the item
      * @param item data item to highlight
@@ -578,8 +606,7 @@ let ComboBox = class ComboBox extends ControlElement {
      * @returns {void}
      */
     clearHighlighted() {
-        this.queryItemsByPropertyValue('highlighted', true)
-            .forEach(item => this.setItemPropertyValue(item, 'highlighted', false));
+        this.highlightedItems.forEach(item => this.setItemPropertyValue(item, 'highlighted', false));
     }
     /**
      * Popup has to use max width if --list-max-width specified
@@ -594,7 +621,7 @@ let ComboBox = class ComboBox extends ControlElement {
             this.resizeThrottler.schedule(() => {
                 if (this.offsetWidth) { /* must be here to avoid infinitive loop */
                     this.restrictPopupWidth();
-                    void this.requestUpdate();
+                    this.requestUpdate();
                 }
             });
             return;
@@ -724,12 +751,29 @@ let ComboBox = class ComboBox extends ControlElement {
         });
     }
     /**
-     * Handle text value change from text-field
-     * @param event Custom Event fired from text-field
+     * Runs on input element `input` event
+     * @param event `input` event
      * @returns {void}
      */
+    onInputInput(event) {
+        this.onInputValueChanged(event);
+    }
+    /**
+     * Runs on input element `change` event
+     * @param event `change` event
+     * @returns {void}
+     */
+    onInputChange(event) {
+        this.onInputValueChanged(event);
+    }
+    /**
+     * Handle text value change from input field
+     * @param event Custom Event fired from input field
+     * @returns {void}
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onInputValueChanged(event) {
-        const inputText = event.detail.value;
+        const inputText = this.inputValue;
         /**
          * Query is used to track if there is a query
          * We always use it so the absence of it can be used to reapply the
@@ -852,8 +896,8 @@ let ComboBox = class ComboBox extends ControlElement {
      * @returns {void}
      */
     onKeyDown(event) {
-        // Check if the event is already handle by list
-        if (event.defaultPrevented) {
+        // Check if the event is already handle by list or it set to 'readonly'
+        if (event.defaultPrevented || this.readonly) {
             return;
         }
         switch (event.key) {
@@ -888,8 +932,10 @@ let ComboBox = class ComboBox extends ControlElement {
             // and the cursor is positioned at the end of input
             // Wait before the update cycle completes
             void this.updateComplete.then(() => {
-                this.inputEl.focus();
-                this.inputEl.setSelectionRange(label.length, label.length);
+                if (this.inputElement) {
+                    this.inputElement.focus();
+                    this.inputElement.setSelectionRange(label.length, label.length);
+                }
             });
         }
     }
@@ -983,7 +1029,7 @@ let ComboBox = class ComboBox extends ControlElement {
             // benefit of being localised too
             if (this.focused || selectionLength > 1) {
                 return html `
-        <ef-pill readonly part="selection-badge" tabindex="-1">${selectionLength}</ef-pill>
+        <ef-counter part="selection-badge" tabindex="-1" .value=${selectionLength} title=${ifDefined(selectionLength > 999 ? selectionLength.toLocaleString() : undefined)} max="999"></ef-counter>
       `;
             }
         }
@@ -1036,20 +1082,20 @@ let ComboBox = class ComboBox extends ControlElement {
       >${hasVisibleItems ? this.listTemplate : this.noItemsTemplate}</ef-overlay>`;
         }
     }
+    /**
+     * Decorate `<input>` element with common properties extended from combobox input
+     * @returns template map
+     */
+    get decorateInputMap() {
+        return Object.assign(Object.assign({}, super.decorateInputMap), { 'part': 'input', 'type': 'text', 'role': 'combobox', '.value': this.focused ? this.inputText : this.freeTextValue || this.label, 'aria-expanded': this.opened ? 'true' : 'false', 'aria-haspopup': 'listbox', 'aria-autocomplete': 'list', 'aria-owns': 'internal-list', 'aria-activedescendant': this.highlightedItemValue });
+    }
     /**
      * Returns a template for input field
      * @returns Input template
      */
     get inputTemplate() {
-        const inputValue = this.focused ? this.inputText : this.freeTextValue || this.label;
         return html `<div part="input-wrapper">
-      <ef-text-field
-        part="input"
-        transparent
-        .placeholder="${this.placeholder}"
-        .readonly="${this.readonly}"
-        .value="${inputValue}"
-        @value-changed="${this.onInputValueChanged}"></ef-text-field>
+      ${this.renderInput()}
       ${this.selectionBadgeTemplate}
       ${this.clearButtonTemplate}
       <div id="toggle-button" part="button button-toggle">
@@ -1111,9 +1157,6 @@ __decorate([
 __decorate([
     property({ type: String, attribute: false })
 ], ComboBox.prototype, "query", null);
-__decorate([
-    query('[part=input]')
-], ComboBox.prototype, "inputEl", void 0);
 __decorate([
     query('#internal-list')
 ], ComboBox.prototype, "listEl", void 0);
@@ -1138,4 +1181,3 @@ ComboBox = __decorate([
     })
 ], ComboBox);
 export { ComboBox };
-//# sourceMappingURL=index.js.map

package/lib/combo-box/themes/halo/dark/index.js

@@ -1,8 +1,7 @@
 import '@refinitiv-ui/elements/lib/overlay/themes/halo/dark';
 import '@refinitiv-ui/elements/lib/list/themes/halo/dark';
-import '@refinitiv-ui/elements/lib/pill/themes/halo/dark';
-import '@refinitiv-ui/elements/lib/text-field/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/counter/themes/halo/dark';
 import '@refinitiv-ui/elements/lib/item/themes/halo/dark';
 import '@refinitiv-ui/elements/lib/icon/themes/halo/dark';
 
-elf.customStyles.define('ef-combo-box', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;width:152px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;scrollbar-face-color:#595959;scrollbar-shadow-color:#595959;scrollbar-highlight-color:#595959;scrollbar-arrow-color:#595959;scrollbar-track-color:#1a1a1a;scrollbar-3dlight-color:#1a1a1a;scrollbar-darkshadow-color:#1a1a1a;scrollbar-color:#595959 #1a1a1a;scrollbar-width:thin;color:#ccc;cursor:pointer;scrollbar-face-color:#595959;scrollbar-shadow-color:#595959;scrollbar-highlight-color:#595959;scrollbar-arrow-color:#595959;scrollbar-track-color:#1a1a1a;scrollbar-3dlight-color:#1a1a1a;scrollbar-darkshadow-color:#1a1a1a;scrollbar-color:#595959 #1a1a1a;scrollbar-width:thin;padding:0}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #ffc800}:host([warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(127,100,0,.5)}:host([error]),:host([error][warning]){border:1px solid #f5475b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(160,28,43,.5)}:host ::-ms-clear{display:none}:host(:not([readonly])[focused]),:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;margin:0;flex:1 1 auto;min-width:0;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation;width:100%;padding:0 8px}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host([readonly]){cursor:default}:host [part=placeholder]{opacity:.5;opacity:.7}:host [part=label],:host [part=placeholder]{margin-right:3px}:host [part~=icon]{color:#ccc;opacity:.7}:host(:not([readonly]):hover) [part~=icon],:host(:not([readonly])[focused]) [part~=icon]{opacity:1}:host(:not([readonly])[focused]) [part~=icon]{color:#334bff}:host([disabled]) [part~=icon]{color:rgba(64,64,64,.5)}:host [part=input-wrapper]{touch-action:manipulation;display:flex;align-items:center;width:100%;height:100%}:host [part~=button]{display:flex;justify-content:center;align-items:center;flex:none;height:100%;width:24px}:host [part=list]{max-width:var(--list-max-width,300px);max-height:var(--list-max-height);display:flex;flex-flow:column nowrap;color:#ccc;max-width:var(--list-max-width,300px);max-height:var(--list-max-height);border:1px solid #334bff;margin:2px 0;background-color:#262626}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host [part=list] ::slotted(ef-list){max-height:inherit}}:host [part=selection-badge]{min-width:21px;flex-shrink:0;height:17px;min-width:20px}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host [part=icon]{color:#ccc;min-width:1em;padding-left:2px;color:inherit}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:grey;color:#fff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#6678ff}:host([warning]:hover:not([readonly]):not([focused])){color:#fff;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#fff;border-color:#faa8b1}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(250,168,177,.5)}:host([disabled]){border:1px solid rgba(64,64,64,.5);color:rgba(204,204,204,.5);background-color:rgba(13,13,13,.5)}:host([readonly]:not([focused])){border-color:rgba(64,64,64,.5);background-color:rgba(13,13,13,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(204,204,204,.5)}:host(:not([readonly])[focused]),:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#fff}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#6678ff}:host [part=list] ::slotted(ef-item:not(:first-child):not([type=divider])),:host [part=list] ef-item:not(:first-child):not([type=divider]){box-shadow:0 -1px 0 #404040}:host [part=list] ::slotted(:not(ef-item)){display:none}::-webkit-scrollbar-corner{background:0 0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#595959;border-radius:0;border:1px solid transparent}::-webkit-scrollbar-thumb:hover{background:#334bff}::-webkit-scrollbar-thumb:active{background:#0f1e8a}::-webkit-scrollbar-track{background:#1a1a1a}::-webkit-scrollbar-thumb:horizontal{background-size:auto 6px;background-repeat:repeat-x;background-image:linear-gradient(to bottom,#595959,#595959);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:horizontal:hover{background-image:linear-gradient(to bottom,#334bff,#334bff);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:horizontal:active{background-image:linear-gradient(to bottom,#0f1e8a,#0f1e8a);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical{background-size:6px auto;background-repeat:repeat-y;background-image:linear-gradient(to right,#595959,#595959);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical:hover{background-image:linear-gradient(to right,#334bff,#334bff);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical:active{background-image:linear-gradient(to right,#0f1e8a,#0f1e8a);background-color:transparent;background-position:center}::-webkit-scrollbar-track:horizontal{border-top:1px solid #0d0d0d;border-bottom:1px solid #0d0d0d}::-webkit-scrollbar-track:vertical{border-left:1px solid #0d0d0d;border-right:1px solid #0d0d0d}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #1a1a1a;height:16px;width:16px;display:none;border:1px solid #0d0d0d}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:hover{background-color:#334bff;border:1px solid #334bff}::-webkit-scrollbar-button:active{background-color:#0f1e8a;border:1px solid #0d0d0d}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{border-bottom-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px;border-bottom-color:#334bff}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px;border-bottom-color:#0d0d0d}::-webkit-scrollbar-button:vertical:end:increment{border-top-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px;border-top-color:#334bff}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px;border-top-color:#0d0d0d}::-webkit-scrollbar-button:horizontal:start:decrement{border-right-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px;border-right-color:#334bff}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px;border-right-color:#0d0d0d}::-webkit-scrollbar-button:horizontal:end:increment{border-left-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px;border-left-color:#334bff}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px;border-left-color:#0d0d0d}:host [part=input-wrapper]{border-left-color:inherit}:host [part~=button-toggle]{border-left:1px solid #404040;border-left-color:inherit}:host [part~=button-toggle]::before{content:\'\';display:block;position:absolute;top:-1px;right:-1px;bottom:-1px;width:24px;border:1px solid transparent}:host(:not([readonly])) [part~=button-clear]:hover{color:#334bff}:host(:not([readonly]):hover) [part~=button-toggle]{color:#334bff}:host(:not([readonly])[focused]) [part~=button-toggle]{border-left-color:#334bff;color:#334bff}:host(:not([readonly])) [part~=button-toggle]:hover{border-left-color:#334bff;color:#fff;background:#334bff}:host(:not([readonly])) [part~=button-toggle]:hover::after{content:\'\';display:block;position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:1px solid #334bff;pointer-events:none}:host(:not([readonly])) [part~=button-toggle]:active{background:#0f1e8a}:host(:not([readonly])) [part~=button]:active{color:#fff}:host(:not([readonly])) [part~=icon]{color:inherit!important}:host([disabled]) [part~=button-toggle],:host([readonly]) [part~=button-toggle]{border-left-color:rgba(64,64,64,.5)}:host([readonly]) [part~=button-toggle]{color:rgba(204,204,204,.5);cursor:default}:host([focused][readonly]) [part~=button-toggle]{border-left-color:#334bff}:host [part=list] ::slotted(ef-list){display:block}');
+elf.customStyles.define('ef-combo-box', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;width:152px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;scrollbar-face-color:#595959;scrollbar-shadow-color:#595959;scrollbar-highlight-color:#595959;scrollbar-arrow-color:#595959;scrollbar-track-color:#1a1a1a;scrollbar-3dlight-color:#1a1a1a;scrollbar-darkshadow-color:#1a1a1a;scrollbar-color:#595959 #1a1a1a;scrollbar-width:thin;color:#ccc;cursor:pointer;scrollbar-face-color:#595959;scrollbar-shadow-color:#595959;scrollbar-highlight-color:#595959;scrollbar-arrow-color:#595959;scrollbar-track-color:#1a1a1a;scrollbar-3dlight-color:#1a1a1a;scrollbar-darkshadow-color:#1a1a1a;scrollbar-color:#595959 #1a1a1a;scrollbar-width:thin;padding:0}:host([disabled]){border:1px solid rgba(64,64,64,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #7f6400}:host([warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(127,100,0,.5)}:host([error]),:host([error][warning]){border:1px solid #a01c2b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(160,28,43,.5)}:host ::-ms-clear{display:none}:host(:not([readonly])[focused]),:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([readonly]){cursor:default}:host [part=placeholder]{opacity:.5;opacity:.7}:host [part=label],:host [part=placeholder]{margin-right:3px}:host [part~=icon]{color:#ccc;opacity:.7}:host(:not([readonly]):hover) [part~=icon],:host(:not([readonly])[focused]) [part~=icon]{opacity:1}:host(:not([readonly])[focused]) [part~=icon]{color:#334bff}:host([disabled]) [part~=icon]{color:rgba(64,64,64,.5)}:host [part=list]{max-width:var(--list-max-width,300px);max-height:var(--list-max-height)}:host [part~=input-wrapper]{touch-action:manipulation;display:flex;align-items:center;width:100%;height:100%}:host [part~=input]{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#ccc;border-radius:0;text-overflow:ellipsis;border:1px solid #404040;width:100%;background:0 0;border:none}:host [part~=input][disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(64,64,64,.5)}:host [part~=input][type=number]{padding-right:0}:host [part~=input][warning]{border:1px solid #7f6400}:host [part~=input][warning][disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(127,100,0,.5)}:host [part~=input][error],:host [part~=input][error][warning]{border:1px solid #a01c2b}:host [part~=input][error][disabled],:host [part~=input][error][warning][disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(160,28,43,.5)}:host [part~=input] ::-ms-clear{display:none}:host [part~=button]{display:flex;justify-content:center;align-items:center;flex:none;height:100%;width:24px}:host [part~=list]{display:flex;flex-flow:column nowrap}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host [part~=list] ::slotted(ef-list){max-height:inherit}}:host [part=selection-badge]{flex-shrink:0}:host([disabled]) [part~=selection-badge]{opacity:.4}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host [part=icon]{color:#ccc;min-width:1em;padding-left:2px;color:inherit}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:grey;color:#fff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#6678ff}:host([warning]){border-color:#ffc800}:host([error]),:host([error][warning]){border-color:#f5475b}:host([warning]:hover:not([readonly]):not([focused])){color:#fff;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#fff;border-color:#faa8b1}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(250,168,177,.5)}:host([disabled]){color:rgba(204,204,204,.5);border-color:rgba(64,64,64,.5);background-color:rgba(13,13,13,.5)}:host([readonly]:not([focused])){border-color:rgba(64,64,64,.5);background-color:rgba(13,13,13,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(204,204,204,.5)}:host(:not([readonly])[focused]),:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#fff}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#6678ff}:host [part=list]{color:#ccc;max-width:var(--list-max-width,300px);max-height:var(--list-max-height);border:1px solid #334bff;margin:2px 0;background-color:#262626}:host [part=list] ::slotted(ef-item:not(:first-child):not([type=divider])),:host [part=list] ef-item:not(:first-child):not([type=divider]){box-shadow:0 -1px 0 #404040}:host [part=list] ::slotted(:not(ef-item)){display:none}::-webkit-scrollbar-corner{background:0 0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#595959;border-radius:0;border:1px solid transparent}::-webkit-scrollbar-thumb:hover{background:#334bff}::-webkit-scrollbar-thumb:active{background:#0f1e8a}::-webkit-scrollbar-track{background:#1a1a1a}::-webkit-scrollbar-thumb:horizontal{background-size:auto 6px;background-repeat:repeat-x;background-image:linear-gradient(to bottom,#595959,#595959);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:horizontal:hover{background-image:linear-gradient(to bottom,#334bff,#334bff);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:horizontal:active{background-image:linear-gradient(to bottom,#0f1e8a,#0f1e8a);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical{background-size:6px auto;background-repeat:repeat-y;background-image:linear-gradient(to right,#595959,#595959);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical:hover{background-image:linear-gradient(to right,#334bff,#334bff);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical:active{background-image:linear-gradient(to right,#0f1e8a,#0f1e8a);background-color:transparent;background-position:center}::-webkit-scrollbar-track:horizontal{border-top:1px solid #0d0d0d;border-bottom:1px solid #0d0d0d}::-webkit-scrollbar-track:vertical{border-left:1px solid #0d0d0d;border-right:1px solid #0d0d0d}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #1a1a1a;height:16px;width:16px;display:none;border:1px solid #0d0d0d}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:hover{background-color:#334bff;border:1px solid #334bff}::-webkit-scrollbar-button:active{background-color:#0f1e8a;border:1px solid #0d0d0d}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{border-bottom-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px;border-bottom-color:#334bff}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px;border-bottom-color:#0d0d0d}::-webkit-scrollbar-button:vertical:end:increment{border-top-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px;border-top-color:#334bff}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px;border-top-color:#0d0d0d}::-webkit-scrollbar-button:horizontal:start:decrement{border-right-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px;border-right-color:#334bff}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px;border-right-color:#0d0d0d}::-webkit-scrollbar-button:horizontal:end:increment{border-left-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px;border-left-color:#334bff}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px;border-left-color:#0d0d0d}:host [part~=input-wrapper]{border-left-color:inherit}:host [part~=input]{padding:0 8px}:host [part~=button-toggle]{border-left:1px solid #404040;border-left-color:inherit}:host [part~=button-toggle]::before{content:\'\';display:block;position:absolute;top:-1px;right:-1px;bottom:-1px;width:24px;border:1px solid transparent}:host(:not([readonly])) [part~=button-clear]:hover{color:#334bff}:host(:not([readonly]):hover) [part~=button-toggle]{color:#334bff}:host(:not([readonly])[focused]) [part~=button-toggle]{border-left-color:#334bff;color:#334bff}:host(:not([readonly])) [part~=button-toggle]:hover{border-left-color:#334bff;color:#fff;background:#334bff}:host(:not([readonly])) [part~=button-toggle]:hover::after{content:\'\';display:block;position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:1px solid #334bff;pointer-events:none}:host(:not([readonly])) [part~=button-toggle]:active{background:#0f1e8a}:host(:not([readonly])) [part~=button]:active{color:#fff}:host(:not([readonly])) [part~=icon]{color:inherit!important}:host([disabled]) [part~=button-toggle],:host([readonly]) [part~=button-toggle]{border-left-color:rgba(64,64,64,.5)}:host([readonly]) [part~=button-toggle]{color:rgba(204,204,204,.5);cursor:default}:host([focused][readonly]) [part~=button-toggle]{border-left-color:#334bff}:host [part=list] ::slotted(ef-list){display:block}');