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

package/lib/tree/managers/tree-manager.d.ts

@@ -1,248 +0,0 @@
-import type { CollectionComposer } from '@refinitiv-ui/utils/lib/collection';
-import type { TreeDataItem } from '../helpers/types';
-export declare enum CheckedState {
-    CHECKED = 1,
-    UNCHECKED = 0,
-    INDETERMINATE = -1
-}
-export declare enum TreeManagerMode {
-    /**
-     * Maintains relationship states across children and parents.
-     */
-    RELATIONAL = 1,
-    /**
-     * Items are independent of each other and do not maintain relationship states.
-     */
-    INDEPENDENT = 0
-}
-export declare class TreeManager<T extends TreeDataItem> {
-    /**
-     * Internal composer used for managing the data
-     */
-    private composer;
-    /**
-     * Mode (algorithm) the tree manage is using
-     */
-    private mode;
-    constructor(composer: CollectionComposer<T>, mode?: TreeManagerMode);
-    /**
-     * Is the manager maintaining parent/child relationships
-     */
-    private get manageRelationships();
-    /**
-     * Returns all items in the tree
-     */
-    private get items();
-    /**
-     * Return all items which have children
-     */
-    private get parentItems();
-    /**
-     * Returns all checked items.
-     * When managing relationships, this excludes groups/parents from the result.
-     */
-    get checkedItems(): readonly T[];
-    /**
-     * Items which should be visibly displayed.
-     * This can be used to render items.
-     */
-    get editableItems(): readonly T[];
-    /**
-     * Internal query for getting visible items/nodes
-     * @param items Data item collection
-     * @param result Resulting array of visible items
-     * @returns Collection of visible items
-     */
-    private getEditableItems;
-    /**
-     * Items which should be visibly displayed.
-     * This can be used to render items.
-     */
-    get visibleItems(): readonly T[];
-    /**
-     * Internal query for getting visible items/nodes
-     * @param items Data item collection
-     * @param result Resulting array of visible items
-     * @returns Collection of visible items
-     */
-    private getVisibleItems;
-    /**
-     * Is the item hidden?
-     * @param item Original data item
-     * @returns `True` if the item is hidden
-     */
-    private isItemHidden;
-    /**
-     * Is the item checked?
-     * @param item Original data item
-     * @returns `True` if the item is checked
-     */
-    private isItemChecked;
-    /**
-     * Is the item checked indeterminately?
-     * @param item Original data item
-     * @returns `True` if the item has managed relationships and contains checked descendants
-     */
-    private isItemCheckedIndeterminate;
-    /**
-     * Determines whether the item is unchecked and can be changed to a checked state.
-     * @param item Original data item
-     * @returns True if the item can be changed to 'checked'.
-     */
-    private canCheckItem;
-    /**
-     * Determines whether the item is checked and can be changed to an unchecked state.
-     * @param item Original data item
-     * @returns True if the item can be changed to 'unchecked'.
-     */
-    private canUncheckItem;
-    /**
-     * Makes an item visible
-     * @param item Original data item
-     * @returns {void}
-     */
-    private showItem;
-    /**
-     * Hides an item from the visible collection
-     * @param item Original data item
-     * @returns {void}
-     */
-    private hideItem;
-    /**
-     * Forces a modification event, so that the renderer can update.
-     * @param item Item of which to find path
-     * @returns {void}
-     */
-    private forceUpdateOnPath;
-    /**
-     * Sets the mode (algorithm) the manager should use
-     * @param mode Tree manager mode
-     * @returns {void}
-     */
-    setMode(mode: TreeManagerMode): void;
-    /**
-     * Updates the data item, forcing a render
-     * @param item Original data item
-     * @returns {void}
-     */
-    updateItem(item: T): void;
-    /**
-     * Includes an item as part of the tree.
-     * @param item Item to include
-     * @returns `True` if the item is newly included
-     */
-    includeItem(item: T): boolean;
-    /**
-     * Excludes an item as part of the tree.
-     * @param item Item to exclude
-     * @returns `True` if the item is newly excluded
-     */
-    excludeItem(item: T): boolean;
-    /**
-     * Is the item checkable?
-     * @param item Original data item
-     * @returns `True` if the item is not disabled or readonly
-     */
-    isItemCheckable(item: T): boolean;
-    /**
-     * Is the item expanded?
-     * @param item Original data item
-     * @returns `True` if the item is expanded and its children should be visible
-     */
-    isItemExpanded(item: T): boolean;
-    /**
-     * Is the item a parent?
-     * @param item Original data item
-     * @returns `True` if the item has children
-     */
-    isItemParent(item: T): boolean;
-    /**
-     * Is the item a child?
-     * @param item Original data item
-     * @returns `True` if the item has a parent
-     */
-    isItemChild(item: T): boolean;
-    /**
-     * Calculates the checked stated of the item
-     * @param item Original data item
-     * @returns Checked state of the item
-     */
-    getItemCheckedState(item: T): CheckedState;
-    /**
-     * Gets an item's ancestors
-     * @param item Original data item
-     * @returns A list of ancestors
-     */
-    getItemAncestors(item: T): readonly T[];
-    /**
-     * Gets an item's descendants
-     * @param item Original data item
-     * @param depth Depth to retrieve
-     * @returns A list of descendants
-     */
-    getItemDescendants(item: T, depth?: number): readonly T[];
-    /**
-     * Gets an item's parent, if it has one.
-     * @param item Original data item
-     * @returns Item parent or `null`
-     */
-    getItemParent(item: T): T | null;
-    /**
-     * Gets an item's child collection
-     * @param item Original data item
-     * @returns A list of children
-     */
-    getItemChildren(item: T): readonly T[];
-    /**
-     * Expand an item to show its children
-     * @param item Original data item
-     * @returns {void}
-     */
-    expandItem(item: T): void;
-    /**
-     * Collapse an item to hide its children
-     * @param item Original data item
-     * @returns {void}
-     */
-    collapseItem(item: T): void;
-    /**
-     * Expands all items in the tree
-     * @returns {void}
-     */
-    expandAllItems(): void;
-    /**
-     * Collapses all items in the tree
-     * @returns {void}
-     */
-    collapseAllItems(): void;
-    /**
-     * Checks the item
-     * @param item Original data item
-     * @returns `True` if the item is modified
-     */
-    checkItem(item: T): boolean;
-    private _checkItem;
-    /**
-     * Unchecks the item
-     * @param item Original data item
-     * @returns `True` if the item is modified
-     */
-    uncheckItem(item: T): boolean;
-    private _uncheckItem;
-    /**
-     * Toggles the item checked state
-     * @param item Original data item
-     * @returns `True` if the item is modified
-     */
-    toggleItem(item: T): boolean;
-    /**
-     * Checks all items
-     * @returns {void}
-     */
-    checkAllItems(): void;
-    /**
-     * Unchecks all items
-     * @returns {void}
-     */
-    uncheckAllItems(): void;
-}

package/lib/tree/managers/tree-manager.js

@@ -1,395 +0,0 @@
-export var CheckedState;
-(function (CheckedState) {
-    CheckedState[CheckedState["CHECKED"] = 1] = "CHECKED";
-    CheckedState[CheckedState["UNCHECKED"] = 0] = "UNCHECKED";
-    CheckedState[CheckedState["INDETERMINATE"] = -1] = "INDETERMINATE";
-})(CheckedState || (CheckedState = {}));
-export var TreeManagerMode;
-(function (TreeManagerMode) {
-    /**
-     * Maintains relationship states across children and parents.
-     */
-    TreeManagerMode[TreeManagerMode["RELATIONAL"] = 1] = "RELATIONAL";
-    /**
-     * Items are independent of each other and do not maintain relationship states.
-     */
-    TreeManagerMode[TreeManagerMode["INDEPENDENT"] = 0] = "INDEPENDENT";
-})(TreeManagerMode || (TreeManagerMode = {}));
-export class TreeManager {
-    constructor(composer, mode = TreeManagerMode.RELATIONAL) {
-        /**
-         * Mode (algorithm) the tree manage is using
-         */
-        this.mode = TreeManagerMode.RELATIONAL;
-        this.composer = composer;
-        this.mode = mode;
-    }
-    /**
-     * Is the manager maintaining parent/child relationships
-     */
-    get manageRelationships() {
-        return this.mode === TreeManagerMode.RELATIONAL;
-    }
-    /**
-     * Returns all items in the tree
-     */
-    get items() {
-        return this.composer.queryItems(() => true, Infinity);
-    }
-    /**
-     * Return all items which have children
-     */
-    get parentItems() {
-        return this.items.filter(item => this.isItemParent(item));
-    }
-    /**
-     * Returns all checked items.
-     * When managing relationships, this excludes groups/parents from the result.
-     */
-    get checkedItems() {
-        return this.composer.queryItems((item) => {
-            if (this.manageRelationships && this.isItemParent(item)) {
-                return false;
-            }
-            return this.isItemChecked(item);
-        }, Infinity);
-    }
-    /**
-     * Items which should be visibly displayed.
-     * This can be used to render items.
-     */
-    get editableItems() {
-        const topLevel = this.composer.queryItems(() => true, 0);
-        return this.getEditableItems(topLevel);
-    }
-    /**
-     * Internal query for getting visible items/nodes
-     * @param items Data item collection
-     * @param result Resulting array of visible items
-     * @returns Collection of visible items
-     */
-    getEditableItems(items, result = []) {
-        for (const item of items) {
-            if (this.isItemCheckable(item)) {
-                result.push(item);
-                const children = this.getItemChildren(item);
-                children.length && this.getEditableItems(children, result);
-            }
-        }
-        return result;
-    }
-    /**
-     * Items which should be visibly displayed.
-     * This can be used to render items.
-     */
-    get visibleItems() {
-        const topLevel = this.composer.queryItems(() => true, 0);
-        return this.getVisibleItems(topLevel);
-    }
-    /**
-     * Internal query for getting visible items/nodes
-     * @param items Data item collection
-     * @param result Resulting array of visible items
-     * @returns Collection of visible items
-     */
-    getVisibleItems(items, result = []) {
-        for (const item of items) {
-            if (!this.isItemHidden(item) && result.push(item) && this.isItemExpanded(item)) {
-                const children = this.getItemChildren(item);
-                children.length && this.getVisibleItems(children, result);
-            }
-        }
-        return result;
-    }
-    /**
-     * Is the item hidden?
-     * @param item Original data item
-     * @returns `True` if the item is hidden
-     */
-    isItemHidden(item) {
-        return this.composer.getItemPropertyValue(item, 'hidden') === true;
-    }
-    /**
-     * Is the item checked?
-     * @param item Original data item
-     * @returns `True` if the item is checked
-     */
-    isItemChecked(item) {
-        if (this.manageRelationships && this.isItemParent(item)) {
-            return !this.getItemChildren(item).some(child => !this.isItemChecked(child));
-        }
-        return this.composer.getItemPropertyValue(item, 'selected') === true;
-    }
-    /**
-     * Is the item checked indeterminately?
-     * @param item Original data item
-     * @returns `True` if the item has managed relationships and contains checked descendants
-     */
-    isItemCheckedIndeterminate(item) {
-        if (this.manageRelationships && this.isItemParent(item)) {
-            return this.getItemDescendants(item).some(desc => this.isItemChecked(desc));
-        }
-        return false;
-    }
-    /**
-     * Determines whether the item is unchecked and can be changed to a checked state.
-     * @param item Original data item
-     * @returns True if the item can be changed to 'checked'.
-     */
-    canCheckItem(item) {
-        if (this.manageRelationships && this.isItemParent(item)) {
-            return this.getItemChildren(item).some(child => this.canCheckItem(child));
-        }
-        return this.isItemCheckable(item) && this.composer.getItemPropertyValue(item, 'selected') !== true;
-    }
-    /**
-     * Determines whether the item is checked and can be changed to an unchecked state.
-     * @param item Original data item
-     * @returns True if the item can be changed to 'unchecked'.
-     */
-    canUncheckItem(item) {
-        if (this.manageRelationships && this.isItemParent(item)) {
-            return this.getItemChildren(item).some(child => this.canUncheckItem(child));
-        }
-        return this.isItemCheckable(item) && this.composer.getItemPropertyValue(item, 'selected') === true;
-    }
-    /**
-     * Makes an item visible
-     * @param item Original data item
-     * @returns {void}
-     */
-    showItem(item) {
-        this.composer.setItemPropertyValue(item, 'hidden', false);
-        this.updateItem(item); // Make sure the item is updated
-    }
-    /**
-     * Hides an item from the visible collection
-     * @param item Original data item
-     * @returns {void}
-     */
-    hideItem(item) {
-        this.composer.setItemPropertyValue(item, 'hidden', true);
-    }
-    /**
-     * Forces a modification event, so that the renderer can update.
-     * @param item Item of which to find path
-     * @returns {void}
-     */
-    forceUpdateOnPath(item) {
-        const path = [...this.getItemAncestors(item), item];
-        path.forEach(item => this.composer.updateItemTimestamp(item));
-    }
-    /**
-     * Sets the mode (algorithm) the manager should use
-     * @param mode Tree manager mode
-     * @returns {void}
-     */
-    setMode(mode) {
-        this.mode = mode;
-        // Force update of all visible parent items, making sure any indeterminate states are remove.
-        this.parentItems.forEach(item => this.updateItem(item));
-    }
-    /**
-     * Updates the data item, forcing a render
-     * @param item Original data item
-     * @returns {void}
-     */
-    updateItem(item) {
-        this.composer.updateItemTimestamp(item);
-    }
-    /**
-     * Includes an item as part of the tree.
-     * @param item Item to include
-     * @returns `True` if the item is newly included
-     */
-    includeItem(item) {
-        const result = this.composer.unlockItem(item);
-        this.showItem(item); // Item must be unlocked first
-        return result;
-    }
-    /**
-     * Excludes an item as part of the tree.
-     * @param item Item to exclude
-     * @returns `True` if the item is newly excluded
-     */
-    excludeItem(item) {
-        this.hideItem(item);
-        return this.composer.lockItem(item);
-    }
-    /**
-     * Is the item checkable?
-     * @param item Original data item
-     * @returns `True` if the item is not disabled or readonly
-     */
-    isItemCheckable(item) {
-        return !this.composer.isItemLocked(item)
-            && this.composer.getItemPropertyValue(item, 'disabled') !== true
-            && this.composer.getItemPropertyValue(item, 'readonly') !== true;
-    }
-    /**
-     * Is the item expanded?
-     * @param item Original data item
-     * @returns `True` if the item is expanded and its children should be visible
-     */
-    isItemExpanded(item) {
-        return this.isItemParent(item)
-            && this.composer.getItemPropertyValue(item, 'expanded') === true;
-    }
-    /**
-     * Is the item a parent?
-     * @param item Original data item
-     * @returns `True` if the item has children
-     */
-    isItemParent(item) {
-        return this.composer.isItemParent(item);
-    }
-    /**
-     * Is the item a child?
-     * @param item Original data item
-     * @returns `True` if the item has a parent
-     */
-    isItemChild(item) {
-        return this.composer.isItemChild(item);
-    }
-    /**
-     * Calculates the checked stated of the item
-     * @param item Original data item
-     * @returns Checked state of the item
-     */
-    getItemCheckedState(item) {
-        if (this.isItemChecked(item)) {
-            return CheckedState.CHECKED;
-        }
-        if (this.isItemCheckedIndeterminate(item)) {
-            return CheckedState.INDETERMINATE;
-        }
-        return CheckedState.UNCHECKED;
-    }
-    /**
-     * Gets an item's ancestors
-     * @param item Original data item
-     * @returns A list of ancestors
-     */
-    getItemAncestors(item) {
-        return this.composer.getItemAncestors(item);
-    }
-    /**
-     * Gets an item's descendants
-     * @param item Original data item
-     * @param depth Depth to retrieve
-     * @returns A list of descendants
-     */
-    getItemDescendants(item, depth) {
-        return this.composer.getItemDescendants(item, depth);
-    }
-    /**
-     * Gets an item's parent, if it has one.
-     * @param item Original data item
-     * @returns Item parent or `null`
-     */
-    getItemParent(item) {
-        return this.composer.getItemParent(item);
-    }
-    /**
-     * Gets an item's child collection
-     * @param item Original data item
-     * @returns A list of children
-     */
-    getItemChildren(item) {
-        return this.composer.getItemChildren(item);
-    }
-    /**
-     * Expand an item to show its children
-     * @param item Original data item
-     * @returns {void}
-     */
-    expandItem(item) {
-        if (this.isItemParent(item)) {
-            this.composer.setItemPropertyValue(item, 'expanded', true);
-        }
-    }
-    /**
-     * Collapse an item to hide its children
-     * @param item Original data item
-     * @returns {void}
-     */
-    collapseItem(item) {
-        if (this.isItemParent(item)) {
-            this.composer.setItemPropertyValue(item, 'expanded', false);
-        }
-    }
-    /**
-     * Expands all items in the tree
-     * @returns {void}
-     */
-    expandAllItems() {
-        this.parentItems.forEach(item => this.expandItem(item));
-    }
-    /**
-     * Collapses all items in the tree
-     * @returns {void}
-     */
-    collapseAllItems() {
-        this.parentItems.forEach(item => this.collapseItem(item));
-    }
-    /**
-     * Checks the item
-     * @param item Original data item
-     * @returns `True` if the item is modified
-     */
-    checkItem(item) {
-        return this._checkItem(item);
-    }
-    _checkItem(item, manageRelationships = this.manageRelationships) {
-        if (this.canCheckItem(item)) {
-            this.composer.setItemPropertyValue(item, 'selected', true);
-            if (manageRelationships) {
-                this.forceUpdateOnPath(item);
-                this.getItemDescendants(item).forEach(descendant => this._checkItem(descendant, false));
-            }
-            return true;
-        }
-        return false;
-    }
-    /**
-     * Unchecks the item
-     * @param item Original data item
-     * @returns `True` if the item is modified
-     */
-    uncheckItem(item) {
-        return this._uncheckItem(item);
-    }
-    _uncheckItem(item, manageRelationships = this.manageRelationships) {
-        if (this.canUncheckItem(item)) {
-            this.composer.setItemPropertyValue(item, 'selected', false);
-            if (manageRelationships) {
-                this.forceUpdateOnPath(item);
-                this.getItemDescendants(item).forEach(descendant => this._uncheckItem(descendant, false));
-            }
-            return true;
-        }
-        return false;
-    }
-    /**
-     * Toggles the item checked state
-     * @param item Original data item
-     * @returns `True` if the item is modified
-     */
-    toggleItem(item) {
-        return this.checkItem(item) || this.uncheckItem(item);
-    }
-    /**
-     * Checks all items
-     * @returns {void}
-     */
-    checkAllItems() {
-        this.editableItems.forEach(item => this.checkItem(item));
-    }
-    /**
-     * Unchecks all items
-     * @returns {void}
-     */
-    uncheckAllItems() {
-        this.editableItems.forEach(item => this.uncheckItem(item));
-    }
-}

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

@@ -1,7 +0,0 @@
-import '@refinitiv-ui/elements/lib/checkbox/themes/halo/dark';
-import '@refinitiv-ui/elements/lib/icon/themes/halo/dark';
-import '@refinitiv-ui/elements/lib/item/themes/halo/dark';
-
-elf.customStyles.define('ef-tree-item', '@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host(:after){content:\'\';min-height:inherit;font-size:0}}:host([selected]){color:#fff;font-weight:500}:host([readonly]){cursor:default}:host([focused]),:host([highlighted]){background-color:#334bff;color:#fff}:host([focused]:not([selected])),:host([highlighted]:not([selected])){color:#fff}:host [part=center],:host [part=sub-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host([disabled]){color:rgba(204,204,204,.5)}:host([type=divider]),:host([type=header]){pointer-events:none;min-height:auto}:host([type=divider]) [part=sub-label],:host([type=header]) [part=sub-label]{display:none}:host([type=header]){color:#999;background-color:transparent;font-size:83%;font-weight:500;border:none;height:24px;align-items:flex-end;margin:0;min-height:0;text-transform:uppercase}:host([type=divider]){border:none;padding:0;margin:0;height:5px;background:linear-gradient(#404040,#404040) 0 center/calc(100% - (0px * 2)) 1px no-repeat}:host [part=checkbox],:host [part=icon],:host [part=left] ::slotted(*){margin:0 .5em 0 0}:host [part=right] ::slotted(*){margin-left:.5em}:host{outline:0;cursor:pointer;padding:0 8px;min-height:24px;box-sizing:border-box;touch-action:manipulation;min-width:300px;display:flex;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-top:-1px;border-top:1px solid #404040;border-bottom:1px solid #404040;background-color:#1a1a1a;min-height:28px}:host(:after){content:\'\';min-height:inherit;font-size:0}:host [part=indent]{height:0;width:0;flex:none}:host [part=toggle]{width:24px;height:24px;margin-top:-4px;margin-bottom:-4px;margin-left:-4px;max-height:100%;display:flex;align-items:center;justify-content:center;flex:none}:host [part~=toggle-icon]{transition:transform .1s}:host [part~=toggle-icon-expanded]{transform:rotate(90deg)}:host [part=checkbox]{margin:0 8px 0 0;flex:none}:host [part=label-icon]{flex-shrink:0;margin:0 4px 0 0}:host [part=label]{width:100%;word-break:break-word;padding:4px 6px 4px 0;line-height:1.2}:host([type=header]){align-items:center}:host [part=sub-label]{font-size:90%}:host([sub-label]){padding:4px 8px}:host([selected]:not([highlighted]):not([focused])){background-color:#333}:host([selected]:not([multiple])){background-image:linear-gradient(#334bff,#334bff);background-size:4px 100%;background-position:left top;background-repeat:no-repeat}:host([selected][focused]),:host([selected][highlighted]){color:#fff}:host([group]:not([focused]):not([highlighted])){background-color:#262626}:host([group][focused]:not([multiple])),:host([group][highlighted]:not([multiple])){color:#fff;background-color:#333}:host [part=indent]{font-size:20px}');
-
-elf.customStyles.define('ef-tree', ':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;overflow-x:auto}: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}');