@refinitiv-ui/elements 5.3.3 → 5.7.0

package/lib/list/index.js

@@ -0,0 +1,600 @@
+import { __decorate } from "tslib";
+import { ControlElement, css, html, WarningNotice } 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 { VERSION } from '../version.js';
+import { CollectionComposer } from '@refinitiv-ui/utils/lib/collection.js';
+import { ListRenderer } from './helpers/list-renderer.js';
+import '../item/index.js';
+export { ListRenderer };
+/**
+ * Key direction
+ */
+var Direction;
+(function (Direction) {
+    Direction[Direction["UP"] = -1] = "UP";
+    Direction[Direction["DOWN"] = 1] = "DOWN";
+})(Direction || (Direction = {}));
+const valueFormatWarning = new WarningNotice('The specified \'values\' format does not conform to the required format.');
+/**
+ * Provides listing and immutable selection
+ * @fires value-changed - Dispatched when value changes
+ */
+let List = class List extends ControlElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Used to timestamp renders.
+         * This enables diff checking against item updates,
+         * rendering only items which have updated since the last render cycle.
+         */
+        this.renderTimestamp = new Map();
+        /**
+         * Requests an update after a composer modification.
+         * @returns Update promise.
+         */
+        this.modificationUpdate = () => {
+            this.requestUpdate();
+        };
+        /**
+         * Item map; used to link element nodes to data items.
+         */
+        this.itemMap = new Map();
+        /**
+         * Element map; used to link data items to element nodes.
+         */
+        this.elementMap = new Map();
+        /**
+         * Composer used to query and modify item state.
+         */
+        this.composer = new CollectionComposer([]);
+        /**
+         * Use default `tabindex` so that items are priority focus targets
+         */
+        this.defaultTabIndex = null;
+        /**
+         * Element focus delegation.
+         * Set to `false` and relies on native focusing.
+         */
+        this.delegatesFocus = false;
+        /**
+         * Renderer used to render list item elements
+         * @type {ListRenderer}
+         */
+        this.renderer = new ListRenderer(this);
+        /**
+         * Disable selections
+         */
+        this.stateless = false;
+        /**
+         * Allow multiple selections
+         */
+        this.multiple = false;
+        this._data = null;
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * The data object, used to render the list.
+     * @type {ListData}
+     */
+    get data() {
+        return this._data;
+    }
+    set data(value) {
+        const oldValue = this._data;
+        if (oldValue === value) {
+            return;
+        }
+        if (value instanceof CollectionComposer) {
+            this.composer = value;
+        }
+        else if (Array.isArray(value)) {
+            this.composer = new CollectionComposer(value);
+        }
+        else {
+            this.composer = new CollectionComposer([]);
+        }
+        this.composer.on('modification', // Listen for modifications
+        this.modificationUpdate // Update the template
+        );
+        this.clearMaps();
+        this._data = value;
+        this.requestUpdate('data', oldValue);
+    }
+    /**
+     * Returns the first selected item value.
+     * Use `values` when multiple selection mode is enabled.
+     */
+    get value() {
+        return this.values[0] || '';
+    }
+    set value(value) {
+        const oldValue = this.value;
+        if (value !== oldValue || this.values.length > 1) {
+            this.clearSelection();
+            const item = this.queryItemsByPropertyValue('value', value)[0];
+            if (item) {
+                this.composer.setItemPropertyValue(item, 'selected', true);
+            }
+            this.requestUpdate('value', oldValue);
+        }
+    }
+    /**
+     * Returns a values collection of the currently
+     * selected item values
+     * @readonly
+     */
+    get values() {
+        return this.queryItemsByPropertyValue('selected', true)
+            .map((item) => this.composer.getItemPropertyValue(item, 'value'));
+    }
+    set values(values) {
+        if (!Array.isArray(values)) {
+            valueFormatWarning.show();
+            this.values = [];
+        }
+        else {
+            // Clone value arrays
+            const newValue = values.slice();
+            const oldValue = this.values.slice();
+            // Create comparison strings to check for differences
+            const newComparison = newValue.sort().toString();
+            const oldComparison = oldValue.sort().toString();
+            // Should we update the selection state?
+            if (newComparison !== oldComparison) {
+                this.clearSelection();
+                values.some((value) => {
+                    const matches = this.queryItemsByPropertyValue('value', value);
+                    matches.forEach((match) => this.composer.setItemPropertyValue(match, 'selected', true));
+                    return !this.multiple; // Only set the fist value if multiple is not enabled
+                });
+                this.requestUpdate('values', oldValue);
+            }
+        }
+    }
+    /**
+     * Selects an item in the list
+     * @param item Data Item or Item Element
+     * @returns If a selection has been made or not
+     */
+    selectItem(item) {
+        if (!this.stateless) {
+            if (item instanceof HTMLElement) {
+                item = this.itemFromElement(item);
+            }
+            if (item && this.multiple) {
+                const value = this.composer.getItemPropertyValue(item, 'selected');
+                this.composer.setItemPropertyValue(item, 'selected', !value);
+                return true;
+            }
+            if (item && this.composer.getItemPropertyValue(item, 'selected') !== true) {
+                this.clearSelection();
+                this.composer.setItemPropertyValue(item, 'selected', true);
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Navigate up through the list items
+     * @returns {void}
+     */
+    up() {
+        this.highlightItem(this.getNextHighlightItem(Direction.UP), true);
+    }
+    /**
+     * Navigate up through the list items
+     * @returns {void}
+     */
+    down() {
+        this.highlightItem(this.getNextHighlightItem(Direction.DOWN), true);
+    }
+    /**
+     * Proxy for querying the composer
+     * @param engine composer querying engine
+     * @returns Collection of queried items
+     */
+    queryItems(engine) {
+        return this.composer.queryItems(engine);
+    }
+    /**
+     * Proxy for querying the composer by property and value
+     * @param property Property name
+     * @param value Property value
+     * @returns Collection of queried items
+     */
+    queryItemsByPropertyValue(property, value) {
+        return this.composer.queryItemsByPropertyValue(property, value);
+    }
+    /**
+     * Gets the associated element for the data item provided,
+     * if there is one available.
+     * @param item Item to map element to
+     * @returns Associated element
+     */
+    elementFromItem(item) {
+        return this.elementMap.get(item);
+    }
+    /**
+     * Gets the associated data item for the provided element,
+     * if there is one available.
+     * @param element Element to map item to
+     * @returns Associated date item
+     */
+    itemFromElement(element) {
+        return this.itemMap.get(element);
+    }
+    /**
+     * Tries to find the next focusable element.
+     * @param direction Direction to search
+     * @param element Starting element
+     * @returns Next logical element to focus
+     */
+    getNextFocusableItem(direction, element = this.activeElement) {
+        if (!element) {
+            return;
+        }
+        const children = this.tabbableItems;
+        if (children.length > 1) {
+            let index = children.indexOf(element) + direction;
+            index = index < 0 ? children.length - 1 : index === children.length ? 0 : index;
+            return children[index];
+        }
+    }
+    /**
+     * Tries to find the next highlight item
+     * @param direction Direction to search
+     * @returns A data item, if found.
+     */
+    getNextHighlightItem(direction) {
+        const highlightItem = this.queryItemsByPropertyValue('highlighted', true)[0];
+        const nextElement = this.getNextFocusableItem(direction) || this.getNextFocusableItem(direction, this.elementFromItem(highlightItem));
+        const backupElement = this.tabbableItems[0];
+        return nextElement ? this.itemFromElement(nextElement) : backupElement ? this.itemFromElement(backupElement) : undefined;
+    }
+    /**
+     * Clears any highlighted item
+     * @returns {void}
+     */
+    clearHighlighted() {
+        this.queryItemsByPropertyValue('highlighted', true)
+            .forEach(item => this.composer.setItemPropertyValue(item, 'highlighted', false));
+    }
+    /**
+     * Highlights a single item.
+     * Used for navigation.
+     * @param item Item to highlight
+     * @param scrollToItem Scroll the item into view?
+     * @returns {void}
+     */
+    highlightItem(item, scrollToItem = false) {
+        if (item) {
+            const elementToFocus = this.elementFromItem(item);
+            const focus = this.activeElement && this.activeElement !== elementToFocus;
+            this.clearHighlighted();
+            this.composer.setItemPropertyValue(item, 'highlighted', true);
+            focus && (elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.focus({ preventScroll: true }));
+            scrollToItem && this.scrollToItem(item);
+        }
+    }
+    /**
+     * Gets the available tabbable elements
+     */
+    get tabbableItems() {
+        return Array.from(this.children)
+            .filter((el) => el.tabIndex >= 0);
+    }
+    /**
+     * Returns the current focused element
+     */
+    get activeElement() {
+        const el = this.getRootNode().activeElement;
+        const itemEl = this.findItemElementFromTarget(el);
+        if (itemEl && this.tabbableItems.includes(itemEl)) {
+            return itemEl;
+        }
+        return null;
+    }
+    /**
+     * Returns the current focused element
+     */
+    get highlightElement() {
+        const item = this.queryItemsByPropertyValue('highlighted', true)[0];
+        return item ? this.elementFromItem(item) || null : null;
+    }
+    /**
+     * Tries to select the current highlighted element
+     * @returns {void}
+     */
+    triggerActiveItem() {
+        const el = this.activeElement || this.highlightElement;
+        const item = el && this.itemFromElement(el);
+        item && this.selectItem(item) && this.fireSelectionUpdate();
+    }
+    /**
+     * Scroll to list item element
+     * @param item Data item to scroll to
+     * @returns {void}
+     */
+    scrollToItem(item) {
+        const element = this.elementFromItem(item);
+        if (element) {
+            const min = this.scrollTop;
+            const max = this.scrollTop + this.clientHeight - element.offsetHeight;
+            const pos = element.offsetTop;
+            pos > max ? this.scrollTop = element.offsetTop - this.clientHeight + element.offsetHeight
+                : pos < min ? this.scrollTop = element.offsetTop : 0;
+        }
+    }
+    /**
+     * Handles key input
+     * @param event Key down event object
+     * @returns {void}
+     */
+    onKeyDown(event) {
+        switch (event.key) {
+            case ' ':
+            case 'Spacebar':
+            case 'Enter':
+                this.triggerActiveItem();
+                break;
+            case 'Up':
+            case 'ArrowUp':
+                this.up();
+                break;
+            case 'Down':
+            case 'ArrowDown':
+                this.down();
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+    }
+    /**
+     * Handle list on tap
+     * Typically it will select an item
+     * @param event Event to handle
+     * @returns {void}
+     */
+    onTap(event) {
+        const el = this.findItemElementFromTarget(event.target);
+        const item = el && this.itemFromElement(el);
+        if (item) {
+            this.clearHighlighted();
+            if (this.selectItem(item)) {
+                this.highlightItem(item);
+                this.fireSelectionUpdate();
+            }
+        }
+    }
+    /**
+     * Handles mouse move
+     * Typically it will highlight an item
+     * @param event Event to handle
+     * @returns {void}
+     */
+    onMouse(event) {
+        const el = this.findItemElementFromTarget(event.target);
+        const item = el ? this.itemFromElement(el) : null;
+        if (item && el !== this.highlightElement) {
+            if (this.activeElement) {
+                // prevent shifting focus to other items
+                // on mouse move and just fallback to host
+                this.activeElement.focus({ preventScroll: true });
+            }
+            this.highlightItem(item);
+        }
+    }
+    /**
+     * Handles item focus in
+     * Typically it will highlight the item
+     * @param event Event to handle
+     * @returns {void}
+     */
+    onFocus(event) {
+        const el = this.findItemElementFromTarget(event.target);
+        const item = el && this.itemFromElement(el);
+        if (item) {
+            this.highlightItem(item);
+        }
+    }
+    /**
+     * Handles item focus out
+     * Typically it will remove highlighting
+     * @returns {void}
+     */
+    onBlur() {
+        this.clearHighlighted();
+    }
+    /**
+     * Tries to find a known item element,
+     * from an event target
+     * @param target Event target
+     * @returns Found element, if available
+     */
+    findItemElementFromTarget(target) {
+        let el = target;
+        while (el) {
+            if (this.itemMap.has(el)) {
+                break; // known rendered item
+            }
+            el = el.parentElement;
+        }
+        return el;
+    }
+    /**
+     * Clears the current selected items
+     * @returns {void}
+     */
+    clearSelection() {
+        this.queryItemsByPropertyValue('selected', true)
+            .forEach((item) => this.composer.setItemPropertyValue(item, 'selected', false));
+        this.requestUpdate();
+    }
+    /**
+     * Queries and returns all renderable items.
+     * @returns Collection of renderable items
+     */
+    get renderItems() {
+        return this.queryItems((item, composer) => {
+            return composer.getItemPropertyValue(item, 'hidden') !== true;
+        });
+    }
+    /**
+     * Proxy for creating list item elements.
+     * Allows for a mapping to be created between
+     * Data Item and Item Element.
+     * @param item Data item context
+     * @param recyclableElements Child elements available for reuse
+     * @returns List item element
+     */
+    createListItem(item, recyclableElements) {
+        const cachedElement = this.elementFromItem(item);
+        const previousTimestamp = this.renderTimestamp.get(item) || NaN;
+        if (cachedElement && previousTimestamp > this.composer.getItemTimestamp(item)) {
+            return cachedElement; // don't re-render if the item hasn't changed
+        }
+        if (!cachedElement && recyclableElements.length) {
+            // Remove any old ties with the reusable element.
+            const recycledElement = recyclableElements.pop();
+            const previousItem = this.itemFromElement(recycledElement);
+            this.itemMap.delete(recycledElement);
+            previousItem && this.elementMap.delete(previousItem);
+            this.elementMap.set(item, recycledElement);
+        }
+        const freshElement = this.renderer(item, this.composer, this.elementFromItem(item));
+        if (cachedElement && cachedElement !== freshElement) {
+            // Renderer returned a new element, so remove the old link.
+            this.itemMap.delete(cachedElement);
+        }
+        this.itemMap.set(freshElement, item); // Link element to item
+        this.elementMap.set(item, freshElement); // Link item to element
+        this.renderTimestamp.set(item, performance.now());
+        return freshElement;
+    }
+    /**
+     * Clears all item-element and timestamp maps
+     * @returns {void}
+     */
+    clearMaps() {
+        this.itemMap.clear();
+        this.elementMap.clear();
+        this.renderTimestamp.clear();
+    }
+    /**
+     * Fire value changed event
+     * @returns {void}
+     */
+    fireSelectionUpdate() {
+        /**
+         * @event List#value-changed
+         */
+        this.notifyPropertyChange('value', this.value);
+    }
+    /**
+     * Calculates what elements can be recycled safely
+     * @param renderItems Current items to render
+     * @returns Collection of elements to be recycled
+     */
+    calculateRecyclableElements(renderItems) {
+        const result = [];
+        for (const element of this.children) {
+            const item = this.itemFromElement(element);
+            if (item && !renderItems.includes(item)) {
+                result.push(element);
+            }
+        }
+        return result;
+    }
+    /**
+     * Renders updates to light DOM
+     * @returns {void}
+     */
+    renderLightDOM() {
+        const renderItems = this.renderItems;
+        const currentChildren = Array.from(this.children);
+        const recyclableElements = this.calculateRecyclableElements(renderItems);
+        const renderChildren = renderItems.map((item) => this.createListItem(item, recyclableElements));
+        const deletions = currentChildren.filter(element => !renderChildren.includes(element));
+        deletions.forEach(element => this.removeChild(element));
+        renderChildren.forEach((element, index) => {
+            if (this.children.length === index) {
+                this.appendChild(element);
+            }
+            else if (element !== this.children[index]) {
+                this.insertBefore(element, this.children[index]);
+            }
+        });
+    }
+    firstUpdated(changeProperties) {
+        super.firstUpdated(changeProperties);
+        this.addEventListener('keydown', this.onKeyDown);
+        this.addEventListener('tap', this.onTap);
+        this.addEventListener('mousemove', this.onMouse);
+        this.addEventListener('mouseleave', this.clearHighlighted);
+        this.addEventListener('focusin', this.onFocus);
+        this.addEventListener('focusout', this.onBlur);
+    }
+    update(changeProperties) {
+        if (changeProperties.has('multiple')) {
+            this.renderTimestamp.clear(); // force render of all items
+        }
+        return super.update(changeProperties);
+    }
+    /**
+     * 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;
+        max-height: 600px;
+        overflow-y: auto;
+        position: relative; /* required for scrollToItem */
+      }
+    `;
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    render() {
+        this.renderLightDOM();
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    property({ type: Function, attribute: false })
+], List.prototype, "renderer", void 0);
+__decorate([
+    property({ type: Boolean })
+], List.prototype, "stateless", void 0);
+__decorate([
+    property({ type: Boolean })
+], List.prototype, "multiple", void 0);
+__decorate([
+    property({ attribute: false })
+], List.prototype, "data", null);
+__decorate([
+    property({ type: String })
+], List.prototype, "value", null);
+__decorate([
+    property({ type: Array, attribute: false })
+], List.prototype, "values", null);
+List = __decorate([
+    customElement('ef-list', {
+        alias: 'coral-list'
+    })
+], List);
+export { List };

package/lib/list/renderer.d.ts

@@ -0,0 +1,36 @@
+import { ExtensibleFunction } from './extensible-function.js';
+import type { DataItem, CollectionComposer } from '@refinitiv-ui/utils/lib/collection.js';
+/**
+ * Render function interface
+ * TODO: Move this to @refinitiv-ui/utils
+ * ! Do not import this module !
+ */
+export interface RenderFunction {
+    /**
+       * Renders data items into elements
+       * @param item Data item context
+       * @param composer Composer context
+       * @param element Reusable element. This element tries to be the same as was used before.
+       * @returns List item element
+   */
+    (item: DataItem, composer: CollectionComposer, element?: HTMLElement): HTMLElement;
+}
+/**
+ * Render constructor interface
+ * TODO: Move this to @refinitiv-ui/utils
+ * ! Do not import this module !
+ */
+export interface RendererConstructor {
+    /**
+     * @param fn Render function to use as the instance
+     */
+    new (fn: RenderFunction): RenderFunction;
+}
+/**
+ * Renderer base class.
+ * Used for creating renderers to render data items.
+ * TODO: Move this to @refinitiv-ui/utils
+ * ! Do not import this module !
+ */
+export declare abstract class Renderer extends ExtensibleFunction {
+}

package/lib/list/renderer.js

@@ -0,0 +1,9 @@
+import { ExtensibleFunction } from './extensible-function.js';
+/**
+ * Renderer base class.
+ * Used for creating renderers to render data items.
+ * TODO: Move this to @refinitiv-ui/utils
+ * ! Do not import this module !
+ */
+export class Renderer extends ExtensibleFunction {
+}

package/lib/list/themes/halo/dark/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/item/themes/halo/dark';
+
+elf.customStyles.define('ef-list', ':host{--item-indent:8px;--item-height:24px;color:#ccc;background-color:transparent;touch-action:manipulation;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}:host(:focus){outline:0}:host([readonly]) [part=list-item]{cursor:default}::-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}');

package/lib/list/themes/halo/light/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/item/themes/halo/light';
+
+elf.customStyles.define('ef-list', ':host{--item-indent:8px;--item-height:24px;color:#404040;background-color:transparent;touch-action:manipulation;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}:host(:focus){outline:0}:host([readonly]) [part=list-item]{cursor:default}::-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}');