@refinitiv-ui/elements 5.6.0 → 5.8.2-alpha.0

package/lib/collapse/custom-elements.md

@@ -0,0 +1,27 @@
+# ef-collapse
+
+Allows users to hide non-critical information
+or areas of the screen, maximizing the amount of real estate
+for their primary displays.
+
+## Properties
+
+| Property   | Attribute  | Type                | Default | Description                                      |
+|------------|------------|---------------------|---------|--------------------------------------------------|
+| `expanded` | `expanded` | `boolean`           | false   | Set to expand the item                           |
+| `header`   | `header`   | `string \| null`    | null    | Set text on the header                           |
+| `level`    | `level`    | `"1" \| "2" \| "3"` | "3"     | Use level styling from theme                     |
+| `spacing`  | `spacing`  | `boolean`           | false   | Set to apply padding from theme to content section |
+
+## Events
+
+| Event              | Description                                 |
+|--------------------|---------------------------------------------|
+| `expanded-changed` | Fired when the `expanded` property changes. |
+
+## Slots
+
+| Name           | Description                                      |
+|----------------|--------------------------------------------------|
+| `header-left`  | Slot to add custom contents to the left side of header e.g. ef-icon, ef-checkbox |
+| `header-right` | Slot to add custom contents to the right side of header e.g. ef-icon, ef-checkbox |

package/lib/color-dialog/custom-elements.json

@@ -44,34 +44,45 @@
         {
           "name": "header",
           "description": "Set Header/Title of the color dialog",
-          "type": "string|null"
+          "type": "string | null"
         },
         {
           "name": "opened",
           "description": "Set dialog to open",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
+        },
+        {
+          "name": "no-cancel-on-esc-key",
+          "description": "Prevents dialog to close when user presses ESC key",
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "x",
           "description": "Set a specific x coordinate of dialog",
-          "type": "string"
+          "type": "string | undefined"
         },
         {
           "name": "y",
           "description": "Set a specific y coordinate of dialog",
-          "type": "string"
+          "type": "string | undefined"
+        },
+        {
+          "name": "position-target",
+          "description": "Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.",
+          "type": "string | undefined"
         },
         {
           "name": "no-cancel-on-esc-key",
           "description": "Prevents dialog to close when user presses ESC key",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "position-target",
           "description": "Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.",
-          "type": "string"
+          "type": "string | undefined"
         }
       ],
       "properties": [
@@ -121,61 +132,63 @@
           "name": "header",
           "attribute": "header",
           "description": "Set Header/Title of the color dialog",
-          "type": "string|null"
+          "type": "string | null"
         },
         {
           "name": "opened",
           "attribute": "opened",
           "description": "Set dialog to open",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "noCancelOnEscKey",
+          "attribute": "no-cancel-on-esc-key",
           "description": "Prevents dialog to close when user presses ESC key",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "x",
           "attribute": "x",
           "description": "Set a specific x coordinate of dialog",
-          "type": "string"
+          "type": "string | undefined"
         },
         {
           "name": "y",
           "attribute": "y",
           "description": "Set a specific y coordinate of dialog",
-          "type": "string"
+          "type": "string | undefined"
         },
         {
           "name": "positionTarget",
+          "attribute": "position-target",
           "description": "Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.",
-          "type": "string"
+          "type": "string | undefined"
         },
         {
           "name": "noCancelOnOutsideClick",
           "description": "Prevents dialog to close when user clicks outside the dialog.",
           "type": "boolean",
-          "default": "\"true\""
+          "default": "true"
         },
         {
           "name": "withBackdrop",
           "description": "False to hide backdrop.",
           "type": "boolean",
-          "default": "\"true\""
+          "default": "true"
         },
         {
           "name": "draggable",
           "description": "False to make the dialog not draggable.",
           "type": "boolean",
-          "default": "\"true\""
+          "default": "true"
         },
         {
           "name": "withShadow",
           "description": "False to remove shadow for dialog component.",
           "type": "boolean",
-          "default": "\"true\""
+          "default": "true"
         }
       ],
       "events": [

package/lib/color-dialog/custom-elements.md

@@ -0,0 +1,39 @@
+# ef-color-dialog
+
+Displays a colour picker dialog,
+for selecting a predefined range of colours.
+
+## Attributes
+
+| Attribute              | Type                  | Default | Description                                      |
+|------------------------|-----------------------|---------|--------------------------------------------------|
+| `no-cancel-on-esc-key` | `boolean`             | false   | Prevents dialog to close when user presses ESC key |
+| `position-target`      | `string \| undefined` |         | Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`. |
+
+## Properties
+
+| Property                 | Attribute              | Type                  | Default | Description                                      |
+|--------------------------|------------------------|-----------------------|---------|--------------------------------------------------|
+| `allowNocolor`           | `allow-nocolor`        | `boolean`             | false   | Set the palettes to activate no-color option     |
+| `blue`                   | `blue`                 | `string`              | ""      | Blue value from 0 to 255                         |
+| `draggable`              |                        | `boolean`             | true    | False to make the dialog not draggable.          |
+| `green`                  | `green`                | `string`              | ""      | Green value from 0 to 255                        |
+| `header`                 | `header`               | `string \| null`      | null    | Set Header/Title of the color dialog             |
+| `hex`                    | `hex`                  | `string`              | ""      | Value of hex without # sign, supports both 3-digits shorthand hex and regular 6-digits hex |
+| `noCancelOnEscKey`       | `no-cancel-on-esc-key` | `boolean`             | false   | Prevents dialog to close when user presses ESC key |
+| `noCancelOnOutsideClick` |                        | `boolean`             | true    | Prevents dialog to close when user clicks outside the dialog. |
+| `opened`                 | `opened`               | `boolean`             | false   | Set dialog to open                               |
+| `positionTarget`         | `position-target`      | `string \| undefined` |         | Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`. |
+| `red`                    | `red`                  | `string`              | ""      | Red value from 0 to 255                          |
+| `value`                  | `value`                | `string`              | ""      | Value of selected color from color dialog will be written here as hex value<br />e.g. "#00f" or "#0000ff" |
+| `withBackdrop`           |                        | `boolean`             | true    | False to hide backdrop.                          |
+| `withShadow`             |                        | `boolean`             | true    | False to remove shadow for dialog component.     |
+| `x`                      | `x`                    | `string \| undefined` |         | Set a specific x coordinate of dialog            |
+| `y`                      | `y`                    | `string \| undefined` |         | Set a specific y coordinate of dialog            |
+
+## Events
+
+| Event            | Description                               |
+|------------------|-------------------------------------------|
+| `opened-changed` | Fired when the `opened` property changes. |
+| `value-changed`  | Fired when the `value` property changes.  |

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

@@ -15,8 +15,8 @@ import '@refinitiv-ui/phrasebook/lib/locale/en/color-dialog.js';
  * @fires value-changed - Fired when the `value` property changes.
  * @fires opened-changed - Fired when the `opened` property changes.
  *
- * @attr {string|null} header - Set Header/Title of the color dialog
- * @prop {string|null} header - Set Header/Title of the color dialog
+ * @attr {string | null} header - Set Header/Title of the color dialog
+ * @prop {string | null} [header=null] - Set Header/Title of the color dialog
  *
  * @attr {boolean} [opened=false] - Set dialog to open
  * @prop {boolean} [opened=false] - Set dialog to open
@@ -24,14 +24,14 @@ import '@refinitiv-ui/phrasebook/lib/locale/en/color-dialog.js';
  * @attr {boolean} [no-cancel-on-esc-key=false] - Prevents dialog to close when user presses ESC key
  * @prop {boolean} [noCancelOnEscKey=false] - Prevents dialog to close when user presses ESC key
  *
- * @attr {string} x - Set a specific x coordinate of dialog
- * @prop {string} x - Set a specific x coordinate of dialog
+ * @attr {string | undefined} x - Set a specific x coordinate of dialog
+ * @prop {string | undefined} x - Set a specific x coordinate of dialog
  *
- * @attr {string} y - Set a specific y coordinate of dialog
- * @prop {string} y - Set a specific y coordinate of dialog
+ * @attr {string | undefined} y - Set a specific y coordinate of dialog
+ * @prop {string | undefined} y - Set a specific y coordinate of dialog
  *
- * @attr {string} position-target - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
- * @prop {string} positionTarget - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
+ * @attr {string | undefined} position-target - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
+ * @prop {string | undefined} positionTarget - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
  *
  * @prop {boolean} [noCancelOnOutsideClick=true] - Prevents dialog to close when user clicks outside the dialog.
  *

package/lib/color-dialog/index.js

@@ -23,8 +23,8 @@ import '@refinitiv-ui/phrasebook/lib/locale/en/color-dialog.js';
  * @fires value-changed - Fired when the `value` property changes.
  * @fires opened-changed - Fired when the `opened` property changes.
  *
- * @attr {string|null} header - Set Header/Title of the color dialog
- * @prop {string|null} header - Set Header/Title of the color dialog
+ * @attr {string | null} header - Set Header/Title of the color dialog
+ * @prop {string | null} [header=null] - Set Header/Title of the color dialog
  *
  * @attr {boolean} [opened=false] - Set dialog to open
  * @prop {boolean} [opened=false] - Set dialog to open
@@ -32,14 +32,14 @@ import '@refinitiv-ui/phrasebook/lib/locale/en/color-dialog.js';
  * @attr {boolean} [no-cancel-on-esc-key=false] - Prevents dialog to close when user presses ESC key
  * @prop {boolean} [noCancelOnEscKey=false] - Prevents dialog to close when user presses ESC key
  *
- * @attr {string} x - Set a specific x coordinate of dialog
- * @prop {string} x - Set a specific x coordinate of dialog
+ * @attr {string | undefined} x - Set a specific x coordinate of dialog
+ * @prop {string | undefined} x - Set a specific x coordinate of dialog
  *
- * @attr {string} y - Set a specific y coordinate of dialog
- * @prop {string} y - Set a specific y coordinate of dialog
+ * @attr {string | undefined} y - Set a specific y coordinate of dialog
+ * @prop {string | undefined} y - Set a specific y coordinate of dialog
  *
- * @attr {string} position-target - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
- * @prop {string} positionTarget - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
+ * @attr {string | undefined} position-target - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
+ * @prop {string | undefined} positionTarget - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
  *
  * @prop {boolean} [noCancelOnOutsideClick=true] - Prevents dialog to close when user clicks outside the dialog.
  *

package/lib/combo-box/custom-elements.json

@@ -8,7 +8,8 @@
         {
           "name": "multiple",
           "description": "Multiple selection mode",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "opened",
@@ -31,7 +32,8 @@
         {
           "name": "free-text",
           "description": "Allow to enter any value",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "error",
@@ -53,25 +55,26 @@
         {
           "name": "value",
           "description": "Returns the first selected item value.\nUse `values` when multiple selection mode is enabled.",
-          "type": "string"
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "name",
           "description": "Set name of the element",
           "type": "string",
-          "default": "\"''\""
+          "default": "\"\""
         }
       ],
       "properties": [
@@ -91,7 +94,8 @@
           "name": "multiple",
           "attribute": "multiple",
           "description": "Multiple selection mode",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "opened",
@@ -118,7 +122,8 @@
           "name": "freeText",
           "attribute": "free-text",
           "description": "Allow to enter any value",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "error",
@@ -143,18 +148,21 @@
         {
           "name": "data",
           "description": "Data array to be displayed",
-          "type": "ComboBoxData<T>"
+          "type": "ComboBoxData<T>",
+          "default": "[]"
         },
         {
           "name": "value",
           "attribute": "value",
           "description": "Returns the first selected item value.\nUse `values` when multiple selection mode is enabled.",
-          "type": "string"
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "values",
           "description": "Returns a values collection of the currently\nselected item values",
-          "type": "string[]"
+          "type": "string[]",
+          "default": "[]"
         },
         {
           "name": "query",
@@ -162,30 +170,31 @@
           "type": "string | null"
         },
         {
-          "name": "label",
+          "name": "label (readonly)",
           "description": "Label of selected value",
-          "type": "string"
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "readonly",
           "attribute": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "attribute": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "name",
           "attribute": "name",
           "description": "Set name of the element",
           "type": "string",
-          "default": "\"''\""
+          "default": "\"\""
         }
       ],
       "events": [
@@ -200,6 +209,9 @@
         {
           "name": "opened-changed",
           "description": "Dispatched when opened state changes"
+        },
+        {
+          "name": "animationiteration"
         }
       ]
     }

package/lib/combo-box/custom-elements.md

@@ -0,0 +1,35 @@
+# ef-combo-box
+
+Combines a popup with a filterable selection list
+
+## Properties
+
+| Property            | Attribute             | Type                        | Default                      | Description                                      |
+|---------------------|-----------------------|-----------------------------|------------------------------|--------------------------------------------------|
+| `clears`            | `clears`              | `boolean`                   | false                        | Show clears button                               |
+| `data`              |                       | `ComboBoxData<T>`           | []                           | Data array to be displayed                       |
+| `disabled`          | `disabled`            | `boolean`                   | false                        | Set disabled state                               |
+| `error`             | `error`               | `boolean`                   | false                        | Set state to error                               |
+| `filter`            |                       | `ComboBoxFilter<T> \| null` | "defaultFilter<T>(this)"     | Custom filter for static data<br />Set this to null when data is filtered externally, eg XHR |
+| `freeText`          | `free-text`           | `boolean`                   | false                        | Allow to enter any value                         |
+| `label (readonly)`  |                       | `string`                    | ""                           | Label of selected value                          |
+| `multiple`          | `multiple`            | `boolean`                   | false                        | Multiple selection mode                          |
+| `name`              | `name`                | `string`                    | ""                           | Set name of the element                          |
+| `opened`            | `opened`              | `boolean`                   | false                        | Track opened state of popup                      |
+| `placeholder`       | `placeholder`         | `string`                    | ""                           | Placeholder for input field                      |
+| `query`             |                       | `string \| null`            | null                         | Query string applied to combo-box<br />Set via internal text-field input |
+| `queryDebounceRate` | `query-debounce-rate` | `number`                    |                              | Control query rate, defaults to 0                |
+| `readonly`          | `readonly`            | `boolean`                   | false                        | Set readonly state                               |
+| `renderer`          |                       | `ComboBoxRenderer`          | "new ComboBoxRenderer(this)" | Renderer used to render list item elements       |
+| `value`             | `value`               | `string`                    | ""                           | Returns the first selected item value.<br />Use `values` when multiple selection mode is enabled. |
+| `values`            |                       | `string[]`                  | []                           | Returns a values collection of the currently<br />selected item values |
+| `warning`           | `warning`             | `boolean`                   | false                        | Set state to warning                             |
+
+## Events
+
+| Event                | Description                          |
+|----------------------|--------------------------------------|
+| `animationiteration` |                                      |
+| `opened-changed`     | Dispatched when opened state changes |
+| `query-changed`      | Dispatched when query changes        |
+| `value-changed`      | Dispatched when value changes        |

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

@@ -11,11 +11,12 @@ import { CustomKeyboardEvent } from './helpers/keyboard-event.js';
 import '../icon/index.js';
 import '../overlay/index.js';
 import '../list/index.js';
-import '../pill/index.js';
+import '../counter/index.js';
 import '../text-field/index.js';
 import { TranslateDirective } from '@refinitiv-ui/translate';
 import '@refinitiv-ui/phrasebook/lib/locale/en/combo-box.js';
-export type { ComboBoxRenderer, ComboBoxFilter, ComboBoxData };
+export type { ComboBoxFilter, ComboBoxData };
+export { ComboBoxRenderer };
 /**
  * Combines a popup with a filterable selection list
  *
@@ -60,6 +61,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;
@@ -79,6 +81,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;
@@ -101,6 +104,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>);
@@ -112,6 +116,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);
@@ -119,6 +124,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[]);
@@ -133,12 +139,14 @@ export declare class ComboBox<T extends DataItem = ItemData> extends ControlElem
      * Query string applied to combo-box
      * Set via internal text-field 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;

package/lib/combo-box/index.js

@@ -15,10 +15,11 @@ import { CustomKeyboardEvent } from './helpers/keyboard-event.js';
 import '../icon/index.js';
 import '../overlay/index.js';
 import '../list/index.js';
-import '../pill/index.js';
+import '../counter/index.js';
 import '../text-field/index.js';
 import { translate } from '@refinitiv-ui/translate';
 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
 const MULTIPLE_LABEL_MAX_SIZE = 250;
@@ -169,6 +170,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) {
@@ -185,6 +187,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) {
@@ -218,6 +221,7 @@ let ComboBox = class ComboBox extends ControlElement {
     /**
      * Data array to be displayed
      * @type {ComboBoxData<T>}
+     * @default []
      */
     get data() {
         return this._data;
@@ -229,6 +233,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] || '';
@@ -249,6 +254,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
@@ -292,6 +298,7 @@ let ComboBox = class ComboBox extends ControlElement {
      * Query string applied to combo-box
      * Set via internal text-field input
      * @readonly
+     * @default null
      */
     get query() {
         return this._query;
@@ -309,6 +316,7 @@ let ComboBox = class ComboBox extends ControlElement {
     /**
      * Label of selected value
      * @returns Label to use, defaults to empty string
+     * @default -
      * @readonly
      */
     get label() {
@@ -1054,6 +1062,7 @@ let ComboBox = class ComboBox extends ControlElement {
         transparent
         .placeholder="${this.placeholder}"
         .readonly="${this.readonly}"
+        .disabled="${this.disabled}"
         .value="${inputValue}"
         @value-changed="${this.onInputValueChanged}"></ef-text-field>
       ${this.selectionBadgeTemplate}

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

@@ -5,4 +5,4 @@ import '@refinitiv-ui/elements/lib/text-field/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([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=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:16px;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}:host [part=selection-badge]:hover{background-color:#334bff;color:#fff}');
+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([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=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:16px;min-width:20px}: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]: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}:host [part=selection-badge]:hover{background-color:#334bff;color:#fff}');