@refinitiv-ui/elements 5.12.0-alpha.0 → 5.12.0

package/lib/multi-input/index.js

@@ -0,0 +1,594 @@
+import { __decorate } from "tslib";
+import { ControlElement, css, html } 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 { 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 '../pill/index.js';
+import '../text-field/index.js';
+const hasChanged = (newVal, oldVal) => oldVal === undefined ? false : newVal !== oldVal;
+/**
+ * An input control component to display a selection of pills
+ *
+ * @event value-changed - Fired when new value of text field is changed.
+ * Property `detail.value` will be the new value.
+ *
+ * @event error-changed - Dispatched when error state changes.
+ * Property `detail.error` is error from validation.
+ *
+ * @event item-added - Fired when new pill is added.
+ * Property `detail.item` is new added pill.
+ * Property `detail.items` is new list of all pills.
+ *
+ * @event item-removed - Fired when item is removed.
+ * Property `detail.item` is pill that removed.
+ * Property `detail.items` is new list of all pills.
+ *
+ * @event item-error - Fired when item that attempt to add is invalid.
+ * Property `detail.item` is item with an error.
+ * Property `detail.items` a current list of pills.
+ *
+ * @prop {boolean} [readonly=false] - Hides text field and clear icon from all pills
+ * @attr {boolean} readonly - Hides text field and clear icon from all pills
+ *
+ * @attr {boolean} disabled - Set disabled state
+ * @prop {boolean} [disabled=false] - Set disabled state
+ *
+ * @prop {string} value - Current value of text field
+ * @attr {string} value - Current value of text field
+ *
+ */
+let MultiInput = class MultiInput extends ControlElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Hide text input box
+         */
+        this.pillsOnly = false;
+        /**
+         * Specify icon to display inside input box
+         */
+        this.icon = '';
+        /**
+         * Placeholder text to display in input box
+         */
+        this.placeholder = '';
+        /**
+         * Set state to error
+         */
+        this.error = false;
+        /**
+         * Set state to warning
+         */
+        this.warning = false;
+        /**
+         * Set character max limit
+         */
+        this.maxLength = null;
+        /**
+         * Set character min limit
+         */
+        this.minLength = null;
+        this._data = null;
+        this.composer = new CollectionComposer([]);
+        /**
+         * @ignore
+         */
+        this.multiple = true;
+        /** Old value for handle reset value */
+        this.oldValue = '';
+        /**
+         * render the pill component
+         * @param item for render
+         * @param index the position item of values
+         * @returns the template of a pill component
+         */
+        this.pillTemplate = (item, index) => {
+            return html `
+      <ef-pill
+        part="pill"
+        index="${index}"
+        clears
+        ?readonly="${item.readonly || this.readonly}"
+        ?disabled="${item.disabled || this.disabled}"
+        value="${item.value}"
+        @clear="${this.onPillClearsHandler}">
+        ${item.label}
+      </ef-pill>
+    `;
+        };
+    }
+    /**
+     * 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
+     */
+    static get styles() {
+        return css `
+      :host {
+        display: block;
+      }
+      [part=list] {
+       flex-flow: row wrap;
+       max-height: 100%;
+       display: flex;
+       align-items: center;
+       align-content: flex-start;
+       flex: 1 1 auto;
+       flex-direction: row;
+       overflow-y: auto;
+       margin: auto;
+      }
+      [part=pill] {
+        display: inline-flex;
+      }
+      [part=search] {
+        flex: 1;
+        min-width: 170px;
+      }
+      [scrollable] {
+        overflow: auto;
+      }
+    `;
+    }
+    /**
+     * Array of item's values ( readonly )
+     * @readonly
+     * @type {string[]}
+     * @default []
+     */
+    get values() {
+        return this.composer.queryItems(() => true).map(({ value }) => value);
+    }
+    /**
+     * Selection start index
+     * @default null
+     */
+    get selectionStart() {
+        if (this.search) {
+            return this.search.selectionStart;
+        }
+        return null;
+    }
+    set selectionStart(index) {
+        if (this.search) {
+            this.search.selectionStart = index;
+        }
+    }
+    /**
+     * Selection end index
+     * @default null
+     */
+    get selectionEnd() {
+        if (this.search) {
+            return this.search.selectionEnd;
+        }
+        return null;
+    }
+    set selectionEnd(index) {
+        if (this.search) {
+            this.search.selectionEnd = index;
+        }
+    }
+    /**
+     * The data object, used to render the list.
+     * @type {MultiInputData | null}
+     * @default null
+     */
+    get data() {
+        return this._data;
+    }
+    set data(value) {
+        const oldValue = this._data;
+        if (oldValue === value) {
+            return;
+        }
+        else if (Array.isArray(value)) {
+            this.composer = new CollectionComposer(value);
+        }
+        else {
+            this.composer = new CollectionComposer([]);
+        }
+        this._data = value;
+        this.requestUpdate('data', oldValue);
+    }
+    /**
+     * Removes the item by the value and returns array of removed items
+     * @param value {string} Value of item to remove
+     * @returns array of removed items
+     */
+    removeByValue(value) {
+        return this.removeByProperty(value, 'value');
+    }
+    /**
+     * Add a new item to the input. Return newly added object or null if added invalid object.
+     * @param item to add. Object must have at least value and label
+     * @returns {MultiInputDataItem | null} added item
+     */
+    add(item) {
+        if (!this.isItem(item)) {
+            this.notify(item, 'item-error');
+            return null;
+        }
+        return this.addItem(item);
+    }
+    /**
+     * Removes last item. Returns item that removed or null if list was empty
+     * @returns {MultiInputDataItem | null} Removed item or null if list was empty
+     */
+    removeLastItem() {
+        if (!this.values.length) {
+            return null;
+        }
+        return this.removeByIndex(this.values.length - 1);
+    }
+    /**
+     * Removes pill by index. Returns item that removed or null if list was empty
+     * @param {number} index of pill to be removed
+     * @returns {MultiInputDataItem | null} Removed item or null if list was empty
+     */
+    removeByIndex(index) {
+        const items = this.composer.queryItems(() => true);
+        if (items.length <= index) {
+            return null;
+        }
+        const item = items[index];
+        return this.removeItem(item);
+    }
+    /**
+     * Remove item from collection and notify
+     * @param item processed entity
+     * @param notifyEvent should notify about changes
+     * @returns removed item or null
+     */
+    removeItem(item, notifyEvent = false) {
+        let process = true;
+        if (notifyEvent) {
+            process = this.notify(item, 'item-removed');
+        }
+        if (process) {
+            this.composer.removeItem(item);
+            this.requestUpdate();
+            return item;
+        }
+        return null;
+    }
+    /**
+     * Removes item by a property within item
+     * @param value of property
+     * @param property name
+     * @returns array of removed items
+     */
+    removeByProperty(value, property) {
+        const items = this.composer.queryItemsByPropertyValue(property, value);
+        const result = [];
+        for (let x = 0; x < items.length; x += 1) {
+            const item = this.removeItem(items[x]);
+            item && result.push(item);
+        }
+        return result;
+    }
+    /**
+     * Add item to collection and notify
+     * @param item processed entity
+     * @param notifyEvent should notify about changes
+     * @returns added item or null
+     */
+    addItem(item, notifyEvent = false) {
+        let process = true;
+        if (notifyEvent) {
+            process = this.notify(item, 'item-added');
+        }
+        if (process) {
+            this.composer.addItem(item);
+            this.requestUpdate();
+            return item;
+        }
+        return null;
+    }
+    /**
+     * validate input according `minLength` and `maxLength` properties
+     * @param {string} value value for validate
+     * change state of `error` property according validation
+     * @returns {void}
+     */
+    validateInput(value) {
+        const error = this.shouldValidateForMinLength(value);
+        if (this.error !== error) {
+            this.error = error;
+            this.notifyPropertyChange('error', this.error);
+        }
+    }
+    /**
+     * @param value value of changed.
+     * @returns {boolean} true if there is no error, false when minLength more than 0 and value is too short
+     */
+    shouldValidateForMinLength(value) {
+        let error = false;
+        if (value) {
+            error = !!this.minLength && (this.minLength > value.length);
+        }
+        return error;
+    }
+    /**
+    * Current value of text field
+    * @default -
+    * @param value Element value
+    */
+    set value(value) {
+        const oldValue = this.oldValue;
+        value = this.castValue(value);
+        if (!this.shouldValidateForMaxLength(value)) {
+            this.warnInvalidValue(value);
+            value = oldValue;
+        }
+        if (oldValue !== value) {
+            this.oldValue = value;
+            this.requestUpdate('value', oldValue);
+        }
+    }
+    get value() {
+        return this.oldValue;
+    }
+    /**
+     * @param value value for validate.
+     * @returns true if there is maxLength is null and maxLength is more than value.
+     */
+    shouldValidateForMaxLength(value) {
+        if (this.maxLength) {
+            return value.length <= this.maxLength;
+        }
+        return true;
+    }
+    /**
+     * Called when the element’s DOM has been updated and rendered
+     * @param changedProperties Properties that has changed
+     * @returns shouldUpdate
+     */
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (this.shouldValidateInput(changedProperties)) {
+            this.validateInput(this.value);
+        }
+    }
+    /**
+     * Check if input should be re-validated
+     * @param changedProperties Properties that has changed
+     * @returns True if input should be re-validated
+     */
+    shouldValidateInput(changedProperties) {
+        return (changedProperties.has('minLength') || !!(this.minLength && changedProperties.has('value')));
+    }
+    /**
+     * Set the selection range
+     * @param startSelection Start of selection
+     * @param endSelection End of the selection
+     * @returns {void}
+     */
+    setSelectionRange(startSelection, endSelection) {
+        var _a;
+        (_a = this.search) === null || _a === void 0 ? void 0 : _a.setSelectionRange(startSelection, endSelection);
+    }
+    /**
+     * Select the contents of input
+     * @returns void
+     */
+    select() {
+        if (!this.disabled && !this.readonly) {
+            if (this.search) {
+                this.search.select();
+            }
+        }
+    }
+    /**
+     * render this component
+     * @returns the main template
+     */
+    render() {
+        return html `
+      <div id="list" part="list">
+        ${this.pillsTemplate()}
+        ${this.textFieldTemplate}
+      </div>
+    `;
+    }
+    /**
+     * render the search element
+     * @returns the template of the search element
+     */
+    get textFieldTemplate() {
+        if (this.readonly || this.pillsOnly) {
+            return null;
+        }
+        return html `
+        <ef-text-field
+          tabindex="1"
+          part="search"
+          transparent
+          ?disabled="${this.disabled}"
+          @keydown="${this.handleKeyDown}"
+          @change="${this.onInputChange}"
+          @input="${this.onInputChange}"
+          maxlength="${ifDefined(this.maxLength || undefined)}"
+          minlength="${ifDefined(this.minLength || undefined)}"
+          ?error="${this.error}"
+          .value="${this.value}"
+          .icon="${this.icon || null}"
+          .placeholder="${this.placeholder}"
+          ></ef-text-field>
+    `;
+    }
+    /**
+     * render pill components
+     * @returns the template of pill components
+     */
+    pillsTemplate() {
+        return html `
+      ${this.composer.queryItems(() => true).map(this.pillTemplate)}
+    `;
+    }
+    /**
+     * handle the clear event of pill
+     * @param event the event contains the current pill
+     * @returns {void}
+     */
+    onPillClearsHandler(event) {
+        const pill = event.target;
+        const index = pill.getAttribute('index');
+        if (index === null) {
+            return;
+        }
+        const items = this.composer.queryItems(() => true);
+        const item = items[Number(index)];
+        this.removeItem(item, true);
+        this.focus(); // keep focus on multi-input
+    }
+    /**
+     * the wrapper for item events
+     * @param item to notify about
+     * @param eventType notify mode - [item-removed|item-added|item-error]
+     * @returns true if event was not prevented
+     */
+    notify(item, eventType) {
+        const customEventInit = {
+            detail: { item, items: this.composer.queryItems(() => true) },
+            cancelable: true
+        };
+        const event = new CustomEvent(eventType, customEventInit);
+        this.dispatchEvent(event);
+        return !event.defaultPrevented;
+    }
+    /**
+     * Detect keydown and delete last item if delete key is pushed
+     * @param event keydown event
+     * @returns {void}
+     */
+    handleKeyDown(event) {
+        if (event.key === 'Backspace') {
+            this.removeLastItemByKeyboard(event);
+        }
+        else if (event.key === 'Enter') {
+            this.addItemByKeyboard();
+        }
+    }
+    /**
+     * handle when value is changed
+     * @param event Input change event
+     * @returns {void}
+     */
+    onInputChange(event) {
+        const target = event.target;
+        this.setValueAndNotify(target.value);
+    }
+    /**
+     * handle keydown event when the key code is the backspace
+     * @param event keyboard backspace keydown for preventing default in case of native functionality removing
+     * @returns {void}
+     */
+    removeLastItemByKeyboard(event) {
+        if (this.isSearchValueEmptyWithoutReadonlyAndDisabled()) {
+            const items = this.composer.queryItems(() => true);
+            if (!items.length) {
+                return;
+            }
+            const item = items[items.length - 1];
+            const lastItem = this.removeItem(item, true);
+            if (lastItem) {
+                event.preventDefault();
+            }
+        }
+    }
+    /**
+     * handle keydown event when the key code is the enter
+     * @returns {void}
+     */
+    addItemByKeyboard() {
+        if (this.isSearchValueNotEmptyWithoutReadonlyAndDisabled()) {
+            const newItem = { value: this.value, label: this.value };
+            const item = this.addItem(newItem, true);
+            if (item) {
+                this.setValueAndNotify('');
+            }
+        }
+    }
+    /**
+     * check the value of the search element and check readonly and disabled
+     * @returns the condition checks the search value is empty and switched off readonly and disabled of this component
+     */
+    isSearchValueEmptyWithoutReadonlyAndDisabled() {
+        return this.value === '' && !this.readonly && !this.disabled;
+    }
+    /**
+     * check the value of the search element and check readonly and disabled
+     * @returns the condition checks the search value is empty and switched off readonly and disabled of this component
+     */
+    isSearchValueNotEmptyWithoutReadonlyAndDisabled() {
+        return this.value.trim() !== '' && !this.readonly && !this.disabled;
+    }
+    /**
+     * Item check for value and label to ensure it can be rendered
+     * @param item Item to check
+     * @returns true if item exists and contains value and label
+     */
+    isItem(item) {
+        return !!(item.value && item.label);
+    }
+};
+__decorate([
+    property({ attribute: false })
+], MultiInput.prototype, "values", null);
+__decorate([
+    property({ type: Boolean, attribute: 'pills-only', reflect: true })
+], MultiInput.prototype, "pillsOnly", void 0);
+__decorate([
+    property({ type: String })
+], MultiInput.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], MultiInput.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MultiInput.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MultiInput.prototype, "warning", void 0);
+__decorate([
+    property({ type: Number, attribute: 'maxlength', reflect: true })
+], MultiInput.prototype, "maxLength", void 0);
+__decorate([
+    property({ type: Number, attribute: 'minlength', reflect: true, hasChanged })
+], MultiInput.prototype, "minLength", void 0);
+__decorate([
+    property({ type: Number, attribute: false })
+], MultiInput.prototype, "selectionStart", null);
+__decorate([
+    property({ type: Number, attribute: false })
+], MultiInput.prototype, "selectionEnd", null);
+__decorate([
+    property({ attribute: false })
+], MultiInput.prototype, "data", null);
+__decorate([
+    query('[part="list"]')
+], MultiInput.prototype, "list", void 0);
+__decorate([
+    query('[part="search"]')
+], MultiInput.prototype, "search", void 0);
+__decorate([
+    property({ type: String })
+], MultiInput.prototype, "value", null);
+MultiInput = __decorate([
+    customElement('ef-multi-input', {
+        alias: 'coral-multi-input'
+    })
+], MultiInput);
+export { MultiInput };

package/lib/multi-input/themes/halo/dark/index.js

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/text-field/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/pill/themes/halo/dark';
+
+elf.customStyles.define('ef-multi-input', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;max-width:100%;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#ccc;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;display:flex;width:100%;height:auto;min-height:24px;justify-content:normal;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;margin:0;padding:0}:host([disabled]){color:rgba(204,204,204,.5);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([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=search-holder]{align-items:center}::-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=pill]{margin:2px;height:18px}:host [part=search]{margin:0;height:20px}:host(:not([readonly]):not([error]):not([warning]):hover){border-color:grey}:host([readonly]:not([focused])){border-color:rgba(64,64,64,.5)}:host([warning]){border-color:#ffc800}:host([warning]:hover:not([readonly])){border-color:#ffe999}:host([error]){border-color:#f5475b}:host([error]:hover:not([readonly])){border-color:#faa8b1}');

package/lib/multi-input/themes/halo/light/index.js

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/text-field/themes/halo/light';
+import '@refinitiv-ui/elements/lib/pill/themes/halo/light';
+
+elf.customStyles.define('ef-multi-input', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;max-width:100%;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#404040;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959;display:flex;width:100%;height:auto;min-height:24px;justify-content:normal;scrollbar-face-color:#999;scrollbar-shadow-color:#999;scrollbar-highlight-color:#999;scrollbar-arrow-color:#999;scrollbar-track-color:#f2f2f2;scrollbar-3dlight-color:#f2f2f2;scrollbar-darkshadow-color:#f2f2f2;scrollbar-color:#999 #f2f2f2;scrollbar-width:thin;margin:0;padding:0}:host([disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(89,89,89,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #cca000}:host([warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(204,160,0,.5)}:host([error]),:host([error][warning]){border:1px solid #b63243}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(182,50,67,.5)}:host ::-ms-clear{display:none}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=search-holder]{align-items:center}::-webkit-scrollbar-corner{background:0 0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#999;border-radius:0;border:1px solid transparent}::-webkit-scrollbar-thumb:hover{background:#334bff}::-webkit-scrollbar-thumb:active{background:#0f1e8a}::-webkit-scrollbar-track{background:#f2f2f2}::-webkit-scrollbar-thumb:horizontal{background-size:auto 6px;background-repeat:repeat-x;background-image:linear-gradient(to bottom,#999,#999);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,#999,#999);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 #fff;border-bottom:1px solid #fff}::-webkit-scrollbar-track:vertical{border-left:1px solid #fff;border-right:1px solid #fff}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #f2f2f2;height:16px;width:16px;display:none;border:1px solid #fff}::-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 #fff}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{border-bottom-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);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:#fff}::-webkit-scrollbar-button:vertical:end:increment{border-top-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);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:#fff}::-webkit-scrollbar-button:horizontal:start:decrement{border-right-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);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:#fff}::-webkit-scrollbar-button:horizontal:end:increment{border-left-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);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:#fff}:host [part=pill]{margin:2px;height:18px}:host [part=search]{margin:0;height:20px}:host(:not([readonly]):not([error]):not([warning]):hover){border-color:#0d0d0d}:host([readonly]:not([focused])){border-color:rgba(89,89,89,.5)}:host([warning]){border-color:#cca000}:host([warning]:hover:not([readonly])){border-color:#ffe999}:host([error]){border-color:#d94255}:host([error]:hover:not([readonly])){border-color:#eeacb4}');

package/lib/multi-input/themes/solar/charcoal/index.js

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/text-field/themes/solar/charcoal';
+import '@refinitiv-ui/elements/lib/pill/themes/solar/charcoal';
+
+elf.customStyles.define('ef-multi-input', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#c2c2c2;border-radius:0;text-overflow:ellipsis;display:flex;width:100%;height:auto;min-height:23px;justify-content:normal;scrollbar-face-color:#666570;scrollbar-shadow-color:#666570;scrollbar-highlight-color:#666570;scrollbar-arrow-color:#666570;scrollbar-track-color:#2e2e33;scrollbar-3dlight-color:#2e2e33;scrollbar-darkshadow-color:#2e2e33;scrollbar-color:#666570 #2e2e33}:host([type=number]){padding-right:0}:host([error]),:host([error][warning]){border:1px solid #f5475b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(194,194,194,.6);border:1px solid rgba(245,71,91,.6)}:host ::-ms-clear{display:none}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#f93;border-style:dotted}:host [part=search-holder]{align-items:center}::-webkit-scrollbar{width:13px;height:13px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #2e2e33;height:12px;width:12px;display:block}::-webkit-scrollbar-thumb{background:#666570;border-radius:7px;border:2px solid #2e2e33}::-webkit-scrollbar-thumb:hover{background:#e2e2e2}::-webkit-scrollbar-thumb:active{background:#f93}::-webkit-scrollbar-track{background:#2e2e33}::-webkit-scrollbar-corner{background:#2e2e33}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}:host{background-color:#000;border:1px solid #4a4a52;padding:0 0 3px 3px}:host([disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6)}:host([readonly]){border:1px solid rgba(74,74,82,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([warning]){background-color:#000;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(194,194,194,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#000;border:1px solid #f5475b}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(245,71,91,.6);color:rgba(194,194,194,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(245,71,91,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #f87584}:host([highlight]){background-color:#1b252f;border:1px solid #4a4a52}:host([highlight][disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6);background-color:rgba(27,37,47,.6)}:host([highlight][readonly]){border:1px solid rgba(74,74,82,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([indirect]){color:#0fd;background-color:#000;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,255,221,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}:host [part=search]{height:17px;margin:3px 3px 0 0}');