@refinitiv-ui/elements 5.3.3 → 5.7.0

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

@@ -0,0 +1,248 @@
+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

@@ -0,0 +1,395 @@
+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

@@ -0,0 +1,7 @@
+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]{padding:4px 8px;word-break:break-word;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}');