@refinitiv-ui/efx-grid 6.0.0-next.0

package/lib/grid/lib/efx-grid.js

@@ -0,0 +1,469 @@
+/* eslint-disable */
+import {
+	ResponsiveElement,
+	css,
+	unsafeCSS,
+	html
+} from "@refinitiv-ui/core";
+import { customElement } from "@refinitiv-ui/core/decorators/custom-element.js";
+/* eslint-enable */
+import ElfUtil from "../../tr-grid-util/es6/ElfUtil.js";
+import Grid from "../../rt-grid/es6/Grid.js";
+import ConditionalColoringPlugin from "../../tr-grid-conditional-coloring/es6/ConditionalColoring.js";
+import RowSegmentingPlugin from "../../row-segmenting/es6/RowSegmenting.js";
+import { preload as preloadElfIcons } from "@refinitiv-ui/elements/icon";
+import cssStr from "../../core/es6/tr-grid-theme.js";
+
+const coreGridStyle = css`${unsafeCSS(cssStr)}`;
+
+/**
+ * @typedef {Object} EfxGrid~Config
+ * @property {Object} config
+ * @property {Array.<*>} data
+ * @property {Array.<*>} columns
+ */
+
+/**
+ * @class
+ * @constructor
+ * @public
+ */
+class EfxGrid extends ResponsiveElement {
+
+	static get properties() {
+		return {
+			config: { type: Object },
+			data: { type: Array },
+			columns: { type: Array }
+		};
+	}
+
+	/** Element version number. Note: This need to be inject in release process
+		 * @static
+		 * @returns {string}
+		 */
+	static get version() {
+		return 'PUBLISH_VERSION';
+	}
+
+	constructor() {
+		super();
+		/**
+				 * @private
+				 * @type {number}
+				 */
+		this._resizeTimer = 0;
+		/**
+				 * @public
+				 * Configuration for initializing the grid,
+				 * See options here: https://doccloud.int.refinitiv.com/content/tr-grid/latest/usage_guide/en/apis/rt_grid/Grid.html
+				 * then search for "GridOptions"
+				 * @type {Object}
+				 */
+		this.config = null;
+		/**
+				 * @public
+				 * Property for updating internal grid data.
+				 * @type {Array.<*>|null}
+				 */
+		this.data = null;
+		/**
+				 * @public
+				 * Property for updating grid columns
+				 * @type {Array.<*>|null}
+				 */
+		this.columns = null;
+		/**
+				 * @public
+				 * Property for updating grid rows
+				 * @type {Array.<*>|null}
+				 */
+		this.rows = null;
+		/**
+				 * @public
+				 * The actual grid object. This object exposes all TR Composite Grid's API
+				 * @type {Object|null}
+				 */
+		this.api = null;
+
+		this._getJETMovementColor = this._getJETMovementColor.bind(this);
+		this._updateMovementColor = this._updateMovementColor.bind(this);
+		this._onResizeHandler = this._onResizeHandler.bind(this);
+		this.resizedCallback = this.resizedCallback.bind(this);
+	}
+	/**
+		 * @protected
+		 * @ignore
+		 * @param {Object} changedProperties
+		 */
+	update(changedProperties) {
+		const isColumnsChanged = this._isValidChange(changedProperties, 'columns');
+		const isRowsChanged = this._isValidChange(changedProperties, 'rows');
+		const isDataChanged = this._isValidChange(changedProperties, 'data');
+		const rows = this.rows;
+		const data = this.data;
+
+		if (isColumnsChanged) {
+			this._columnsChange();
+		}
+
+		if (isDataChanged && isRowsChanged) {
+			if (data && rows) { // merge rows and data
+				this._rowsUpdated(true);
+				this._dataUpdated();
+			}
+			else if (rows && !data) { // treat as row changed only
+				this._rowsUpdated(false);
+			}
+			else if (data && !rows) { // treat as data changed only
+				this._dataUpdated();
+			}
+			else {
+				this._removeAllRows();
+			}
+		}
+		else if (isRowsChanged) {
+			if (rows) {
+				this._rowsUpdated(false);
+			}
+			else {
+				this._removeAllRows();
+			}
+		}
+		else if (isDataChanged) {
+			if (data) {
+				this._dataUpdated();
+			}
+			else {
+				this._removeAllRows();
+			}
+		}
+
+		super.update(changedProperties);
+	}
+
+	/**
+		 * @protected
+		 * @ignore
+		 * @param {Object} changedProperties
+		 */
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has('config')) {
+			this._configChange();
+		}
+	}
+
+	/**
+		 * @private
+		 * @param {Object} changedProperties
+		 * @param {string} propName
+		 * @return {boolean}
+		 */
+	_isValidChange (changedProperties, propName) {
+		if (changedProperties.has(propName)) {
+			if (changedProperties.get(propName) != null
+				// eslint-disable-next-line
+				// @ts-ignore
+				|| this[propName] != null) { // avoid undefined <-> null changing
+				return true;
+			}
+		}
+		return false;
+	}
+
+	/**
+		 * @private
+		 */
+	_columnsChange() {
+		if (this.api) {
+			this.api.setColumns(this.columns);
+		}
+	}
+
+	/**
+		 * @private
+		 */
+	_removeAllRows() {
+		if (this.api) {
+			this.rows = null;
+			this.data = null;
+			this.api.removeAllRows();
+		}
+	}
+
+	/**
+		 * @private
+		 * @param {boolean} dataChange
+		 */
+	_rowsUpdated(dataChange) {
+		const api = this.api;
+		if (api) {
+			if (!dataChange) {
+				this.data = null;
+			}
+			api.removeAllRows();
+			if(this.rows) {
+				api.insertRows(this.rows);
+			}
+		}
+	}
+
+	/**
+		 * @private
+		 */
+	_dataUpdated() {
+		const api = this.api;
+		if (api) { // TODO: parse string data to JSON object
+			let staticRows = this.data;
+			if (staticRows) {
+				const rowCount = api.getRowCount();
+				if (!rowCount) {
+					api.addStaticDataRows(this.data);
+				}
+				else {
+					// Update data to existing row
+					const fields = api.getColumnFields();
+					for (let i = 0; i < rowCount; i++) {
+						const rowDef = api.getRowDefinition(i);
+						rowDef.updateRowData(staticRows[i], fields);
+					}
+					if (staticRows.length > rowCount) {
+						staticRows = staticRows.slice(rowCount, staticRows.length);
+						api.addStaticDataRows(staticRows);
+					}
+				}
+			}
+		}
+	}
+
+	/**
+		 * @private
+		 */
+	_configChange() {
+		let gridElem;
+		if (this.api) {
+			// Remove old grid element and Realtime Grid's API
+			gridElem = this.api.getElement();
+			this.api.dispose();
+			if (gridElem.parentNode) {
+				gridElem.parentNode.removeChild(gridElem);
+			}
+			this.api = null;
+		}
+
+		const options = this.config;
+		if (!options || !this.shadowRoot) {
+			// Do not create or render anything if no config is provided
+			return;
+		}
+
+		// Apply default settings
+		if (options.scrollbar == null) {
+			options.scrollbar = true;
+		}
+		if (options.rowSegmenting == null) {
+			options.rowSegmenting = {};
+		}
+		if (options.rowSegmenting) {
+			if (options.rowSegmenting.spanning == null) {
+				options.rowSegmenting.spanning = false;
+			}
+		}
+		// Inject extensions for some specific built-in features
+		let extList = {};
+		let extensions = options.plugins || options.extensions;
+		if (extensions) {
+			for (let i = extensions.length; --i >= 0;) {
+				let extName = extensions[i].getName();
+				extList[extName] = 1;
+			}
+		}
+		else {
+			options.extensions = extensions = [];
+		}
+
+		if (!extList['ConditionalColoringPlugin']) {
+			extensions.push(new ConditionalColoringPlugin());
+		}
+		if (!extList['RowSegmentingPlugin']) {
+			extensions.push(new RowSegmentingPlugin());
+		}
+
+		// use row height from theme if row height is not specified
+		if (!options.rowHeight) {
+			const rowHeight = parseFloat(this.getComputedVariable('--grid-row-height'));
+			if (rowHeight) {
+				options.rowHeight = rowHeight;
+			}
+		}
+
+		// use header height from theme if header height is not specified
+		if (!options.headerRowHeight) {
+			const headerHeight = parseFloat(this.getComputedVariable('--grid-header-height'));
+			if (headerHeight) {
+				options.headerRowHeight = headerHeight;
+			}
+		}
+
+		// set html property for column
+		if (!this.config.columns && this.columns) {
+			this.config.columns = this.columns;
+		}
+
+		// set html property for rows
+		if (!this.config.rows && this.rows) {
+			this.config.rows = this.rows;
+		}
+
+		// set html property for dataModel
+		if (!(this.config.staticDataRows || this.config.dataModel) && this.data) {
+			this.config.staticDataRows = this.data;
+		}
+
+		// Inject icons and theme name
+		ElfUtil.injectIcons(options, this);
+		// pre load elf svg icon
+		const iconList = ElfUtil.prepareIconPreloading();
+		if (iconList) {
+			preloadElfIcons(...iconList);
+		}
+
+		if (ElfUtil.isHaloTheme()) {
+			if (options.borders == null) {
+				options.borders = false;
+			}
+		}
+
+		const grid = this.api = new Grid(null, options);
+		gridElem = grid.getElement();
+		gridElem.classList.add('tr-fill-parent');
+
+		if (options.themeName && options.icons) {
+			grid.getCoreGrid().addClass(options.themeName);
+		}
+
+		this._getJETMovementColor();
+		this.shadowRoot.appendChild(gridElem);
+
+		// should call resizedCallback every time when change config
+		// because resize event will fire only first time init atlas blotter and resize event occur
+		// but just config change resizedCallback will never been call so we need to call it manually
+		this.resizedCallback();
+
+		const evtArg = {
+			api: this.api,
+			element: this
+		};
+		if (typeof options.whenDefined === 'function') {
+			options.whenDefined(evtArg);
+		}
+		this.dispatchEvent(new CustomEvent('configured', { bubbles: true, detail: evtArg }));
+	}
+
+	/** Get user current tickcolor setting from JET and set it to HTML element
+		 * @private
+		 */
+	_getJETMovementColor() {
+		const jet = window.JET;
+		if (jet && jet.Settings) {
+			const handler = this._updateMovementColor;
+			// eslint-disable-next-line
+						jet.Settings.read(function (locale) {
+				const movementColorScheme = locale.toLowerCase();
+				document.documentElement.setAttribute('movement-color-profile', movementColorScheme);
+				handler();
+			}, {
+				providerName: 'Configuration',
+				settingName: 'RDE_USER_CURRENT_TICK_COLOR'
+			});
+		}
+		else {
+			setTimeout(this._updateMovementColor, 100);
+		}
+	}
+
+	/** Update theme colors of ConditionalColoringExtension
+		 * @private
+		 */
+	_updateMovementColor() {
+		const up = this.getComputedVariable('--color-scheme-positive');
+		const down = this.getComputedVariable('--color-scheme-negative');
+		const level = this.getComputedVariable('--color-scheme-neutral');
+		const tickUp = this.getComputedVariable('--color-scheme-tickup');
+		const tickDown = this.getComputedVariable('--color-scheme-tickdown');
+
+		ConditionalColoringPlugin.setThemeColors({
+			up: up,
+			down: down,
+			level: level,
+			tickUp: tickUp,
+			tickDown: tickDown
+		});
+	}
+
+	/**
+		 * @private
+		 * Update grid layout when
+		 * the element's size has been changed
+		 * @return {void}
+		 */
+	_onResizeHandler() {
+		this._resizeTimer = 0;
+
+		if (this.api) {
+			this.api.getCoreGrid().updateLayout();
+		}
+	}
+
+	/** Called when the element's size has changed
+		 * @public
+		 * @return {void}
+		 * @ignore
+		 */
+	resizedCallback() {
+		if (!this._resizeTimer) {
+			// split layout updating to another execution-loop
+			// to prevents resizeObserver triggers resize-loop-error
+			this._resizeTimer = setTimeout(this._onResizeHandler, 50);
+		}
+	}
+
+	/**
+		 * A `CSSResult` that will be used
+		 * to style the host, slotted children
+		 * and the internal template of the element.
+		 * @return {CSSResult | Array.<CSSResult>} CSS template
+		 */
+	static get styles() {
+		return [coreGridStyle, css`
+				:host {
+					display: block;
+					max-height: 2000px; /* Prevent rendering all rows */
+					position: relative; /* Enforce z-index */
+					z-index: 0;
+				}
+				:host .tr-fill-parent>.tr-grid { /* WORKAROUND: To make ef-popup float on top of the scrollbars */
+					z-index: unset;
+				}
+				:host .grid-scrollbar {
+					z-index: 1;
+				}
+			`];
+	}
+
+	/**
+		 * need to have this to prevent error on IE
+		 * A `TemplateResult` that will be used
+		 * to render the updated internal template.
+		 * @return {TemplateResult} Render template
+		 */
+	render() {
+		return html``;
+	}
+}
+
+customElement('efx-grid')(EfxGrid);
+
+export default EfxGrid;
+export { EfxGrid };

package/lib/grid/themes/base.less

@@ -0,0 +1,134 @@
+
+:host {
+	--grid-header-height                            : @grid-header-height;
+	--grid-row-height                               : @grid-row-height;
+	--grid-guideline-color                          : @scheme-color-primary;
+	--theme-name                                    : @theme-name;
+
+	.grid-vscroll, .grid-hscroll {
+		.ie-scrollbars();
+		.mozilla-scrollbars();
+	}
+
+	// More custom theme that has to be done via css selector
+	.cell input,
+	.cell textarea,
+	.cell select,
+	.cell button,
+	ef-checkbox,
+	input[type=checkbox] {
+	  margin: 0;
+	}
+	select, button, input[type=text] { // Todo: force every thing in cells to have max size not exceed row height.
+	  max-height: calc(var(--grid-row-height) - 6px);
+	}
+	select {
+	  width: 100%;
+	}
+	.cell button {
+	  min-width: unset;
+	}
+  
+	.title input[type=search] {
+	  width: 100%;
+	  background-color: @grid-row-background-color;
+	  max-height: calc(var(--grid-row-height) - 6px);
+	}
+  
+	.grid-pane, .cell, .editing, .sorting, .filter-input, .folder {
+	  .touch-action();
+	}
+	.tr-lg .cell {
+	  // for ie
+	  padding: @grid-cell-padding;
+	  // for modern browser
+	  padding: var(--grid-cell-padding, @grid-cell-padding);
+	}
+  
+	// Sorted column text color
+	.tr-grid .title .sorting,
+	.tr-grid .title .sorting:hover,
+	.tr-grid .title .cell.sorting:hover {
+	  color: @grid-row-active-text-color;
+	}
+  
+	// grid-theme
+	
+	--global-focus-bordercolor       : @grid-row-focus-border-color;
+  
+	--scrollbar-bgcolor              : @scrollbar-track-background-color;
+  
+	--button-txtcolor                : @button-text-color;
+	--button-border-color            : @button-border-color;
+	--button-bgcolor                 : @button-background-color;
+	--button-bgoverlay-1             : transparent;
+	--button-bgoverlay-2             : transparent;
+	--button-hover-txtcolor          : @button-hover-text-color;
+	--button-hover-bgcolor           : @button-hover-background-color;
+  
+	--input-txtcolor                 : @input-text-color;
+	--input-selection-txtcolor       : @global-text-selection-color;
+	--input-selection-bgcolor        : @global-text-selection-background;
+  
+	--grid-bordercolor               : @grid-border-color;
+  
+	--grid-title-bgcolor             : @grid-header-background-color;
+	--grid-title-txtcolor            : @grid-header-text-color;
+	--grid-title-hover-txtcolor      : @grid-header-text-color;
+  
+	--grid-header-bgcolor            : @grid-header-background-color;
+	--grid-header-txtcolor           : @grid-header-text-color;
+	--grid-header-icon-color         : @scheme-color-secondary; // TODO : Change to @grid-header-icon-color when @refinitiv/elemental-theme variable updated
+  
+	// Column collapsing
+	--grid-column-grouped-bgcolor    : @grid-header-background-color;
+  
+	// Intentionally use invalidColor cause we need css to malformat
+	// And then no border rendered cause css malformat
+	--grid-column-active-border-color: @grid-column-active-border-color; // invalid color
+  
+	--grid-row-txtcolor              : @grid-row-text-color;
+	--grid-row-bgcolor               : @grid-row-background-color;
+	--grid-alt-row-bgcolor           : @grid-row-alternate-background-color;
+  
+	--grid-active-txtcolor           : @grid-row-active-text-color;
+	--grid-active-bordercolor        : @grid-row-focus-border-color;
+	--grid-active-bgcolor            : @grid-row-active-background-color;
+  
+	--grid-highlight-txtcolor        : @grid-row-hover-text-color;
+	--grid-highlight-bgcolor         : @grid-row-hover-background-color;
+  
+	--grid-selection-bgcolor         : @grid-row-active-background-color;
+  
+	--grid-guideline-bgcolor         : @scheme-color-primary;
+	--grid-dragbox-bordercolor       : @control-border-color;
+  
+  
+	// cgrid-theme
+  
+	--global-txtcolor                : @grid-row-text-color;
+	--global-hover-txtcolor          : @grid-row-hover-text-color;
+	--global-active-txtcolor         : @grid-row-active-text-color;
+	--global-bordercolor             : @grid-border-color;
+  
+	--field-bgcolor-a                : @grid-row-background-color;
+	--field-txtcolor-a               : @grid-row-text-color;
+  
+	// Popup
+	--popup-boxshadow                : 0 0 10px fade(@dataviz-color-black, 50%);
+	--popup-overlay-modal-bgcolor    : fade(@dataviz-color-black, 50%);
+  
+	// List
+	--list-item-separator-bordercolor: @separator-color;
+	--list-item-hover-bgcolor        : @grid-row-hover-background-color;
+	--list-matched-txtcolor          : @scheme-color-primary;
+  
+	// Pager UI
+	--pager-ui-bgcolor               : @grid-header-background-color;
+  
+	// Loading mask
+	--loading-mask-color             : @overlay-background-color;
+}
+  
+.webkit-scrollbars();
+  

package/lib/grid/themes/halo/dark/efx-grid.js

@@ -0,0 +1,4 @@
+import './imports/native-elements.js';
+
+
+elf.customStyles.define('efx-grid', 'input{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;font-weight:400;text-align:left}input::-webkit-clear-button,input::-webkit-inner-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration{-webkit-appearance:none}input[type=button],input[type=submit]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;background-color:#333;color:#ccc;border:1px solid #0d0d0d;height:24px;box-shadow:0 0 0 0 rgba(0,0,0,.5);padding:0 12px;outline:0;font-family:inherit;font-size:12rem;font-weight:400;min-width:60px;margin:1px 0;transition:120ms;text-align:center;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;vertical-align:bottom;position:relative;overflow:hidden}input[type=button][cta],input[type=submit][cta]{background-color:#0d0d0d;color:#ccc;border-color:grey;box-shadow:0 0 0 0 rgba(0,0,0,.5);outline:0}input[type=button][toggles],input[type=submit][toggles]{background-color:#333;color:#ccc;border-color:#0d0d0d;box-shadow:0 0 0 0 rgba(0,0,0,.5);outline:0}input[type=button][toggles][active],input[type=submit][toggles][active]{background-color:#334bff;color:#fff;border-color:#0d0d0d;box-shadow:0 0 0 0 rgba(0,0,0,.5);outline:0}input:not([type]),input[type=date],input[type=email],input[type=file],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],input[type=week]{font-family:inherit;font-size:12rem;font-weight:400;height:24px;width:152px;max-width:100%;padding:0 8px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#ccc;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;-webkit-appearance:none;-moz-appearance:none;appearance:none}input:not([type])[disabled],input[type=date][disabled],input[type=email][disabled],input[type=file][disabled],input[type=month][disabled],input[type=number][disabled],input[type=password][disabled],input[type=search][disabled],input[type=tel][disabled],input[type=text][disabled],input[type=url][disabled],input[type=week][disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(64,64,64,.5)}input:not([type])[type=number],input[type=date][type=number],input[type=email][type=number],input[type=file][type=number],input[type=month][type=number],input[type=number][type=number],input[type=password][type=number],input[type=search][type=number],input[type=tel][type=number],input[type=text][type=number],input[type=url][type=number],input[type=week][type=number]{padding-right:0}input:not([type])[warning],input[type=date][warning],input[type=email][warning],input[type=file][warning],input[type=month][warning],input[type=number][warning],input[type=password][warning],input[type=search][warning],input[type=tel][warning],input[type=text][warning],input[type=url][warning],input[type=week][warning]{border:1px solid #7f6400}input:not([type])[warning][disabled],input[type=date][warning][disabled],input[type=email][warning][disabled],input[type=file][warning][disabled],input[type=month][warning][disabled],input[type=number][warning][disabled],input[type=password][warning][disabled],input[type=search][warning][disabled],input[type=tel][warning][disabled],input[type=text][warning][disabled],input[type=url][warning][disabled],input[type=week][warning][disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(127,100,0,.5)}input:not([type])[error],input:not([type])[error][warning],input[type=date][error],input[type=date][error][warning],input[type=email][error],input[type=email][error][warning],input[type=file][error],input[type=file][error][warning],input[type=month][error],input[type=month][error][warning],input[type=number][error],input[type=number][error][warning],input[type=password][error],input[type=password][error][warning],input[type=search][error],input[type=search][error][warning],input[type=tel][error],input[type=tel][error][warning],input[type=text][error],input[type=text][error][warning],input[type=url][error],input[type=url][error][warning],input[type=week][error],input[type=week][error][warning]{border:1px solid #a01c2b}input:not([type])[error][disabled],input:not([type])[error][warning][disabled],input[type=date][error][disabled],input[type=date][error][warning][disabled],input[type=email][error][disabled],input[type=email][error][warning][disabled],input[type=file][error][disabled],input[type=file][error][warning][disabled],input[type=month][error][disabled],input[type=month][error][warning][disabled],input[type=number][error][disabled],input[type=number][error][warning][disabled],input[type=password][error][disabled],input[type=password][error][warning][disabled],input[type=search][error][disabled],input[type=search][error][warning][disabled],input[type=tel][error][disabled],input[type=tel][error][warning][disabled],input[type=text][error][disabled],input[type=text][error][warning][disabled],input[type=url][error][disabled],input[type=url][error][warning][disabled],input[type=week][error][disabled],input[type=week][error][warning][disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(160,28,43,.5)}input:not([type]) ::-ms-clear,input[type=date] ::-ms-clear,input[type=email] ::-ms-clear,input[type=file] ::-ms-clear,input[type=month] ::-ms-clear,input[type=number] ::-ms-clear,input[type=password] ::-ms-clear,input[type=search] ::-ms-clear,input[type=tel] ::-ms-clear,input[type=text] ::-ms-clear,input[type=url] ::-ms-clear,input[type=week] ::-ms-clear{display:none}input:not([type]):focus,input[type=date]:focus,input[type=email]:focus,input[type=file]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=url]:focus,input[type=week]:focus,select:focus{background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}input[type=file]::-webkit-file-upload-button{width:0;padding:0;margin:0;min-width:0;border:none;height:100%;font-family:inherit;font-size:12rem}input[type=checkbox],input[type=radio]{display:inline-block;width:13px;height:13px;border-radius:0;background-color:#0d0d0d;margin:1px 0;transition:box-shadow 150ms,border-color 150ms;vertical-align:middle;box-shadow:inset 0 0 0 rgba(0,0,0,.5);border:1px solid #404040}input[type=checkbox]+label:not(:empty),input[type=radio]+label:not(:empty){vertical-align:middle;margin:1px 7px 1px 4px;display:inline-block}input[type=checkbox]:not([tabindex="-1"]):focus,input[type=radio]:not([tabindex="-1"]):focus{border-color:#334bff;box-shadow:0 0 0 #334bff}input[type=radio]{border-radius:100%}input[type=radio]:checked{background-image:radial-gradient(#6678ff 25%,transparent 30%);background-size:100%}input[type=checkbox]:checked{background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTVweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSIwIDAgMTUgMTMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJjaGVja2VkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMy4wMDAwMDAsIC01LjAwMDAwMCkiPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMjIiIGhlaWdodD0iMjIiPjwvcmVjdD4KICAgICAgICAgICAgPHBhdGggZD0iTTUuMjQ4NTY0MTQsMTQuMjk5NDQ5NCBMOC45NjM0MjQ5OCwxNC4zMjUwMzI3IiBpZD0iTGluZSIgc3Ryb2tlPSIjNTM1REU5IiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYuOTY4MjczLCAxNC44MTg4MTMpIHJvdGF0ZSg0MC4wMDAwMDApIHRyYW5zbGF0ZSgtNi45NjgyNzMsIC0xNC44MTg4MTMpICI+PC9wYXRoPgogICAgICAgICAgICA8cGF0aCBkPSJNMTEuOTYyNDIyNCw2LjgzNzY3NjYxIEwxMS45NjI0MjI0LDE3LjE0Nzk2MjIiIGlkPSJMaW5lIiBzdHJva2U9IiM1MzVERTkiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIuMzQ1NzM5LCAxMi4xMTA0MzkpIHJvdGF0ZSg0MC4wMDAwMDApIHRyYW5zbGF0ZSgtMTIuMzQ1NzM5LCAtMTIuMTEwNDM5KSAiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==) center center no-repeat #0d0d0d}input[type=checkbox]:indeterminate{background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9ImluZGV0ZXJtaW5hdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04LjAwMDAwMCwgLTcuMDAwMDAwKSI+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjAiIHk9IjAiIHdpZHRoPSIyMiIgaGVpZ2h0PSIyMiI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjNTM1REU5IiB4PSI4IiB5PSI3IiB3aWR0aD0iNy41IiBoZWlnaHQ9IjcuNSIgcng9IjEiPjwvcmVjdD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==) center center no-repeat #0d0d0d}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;font-size:12rem;height:24px;width:152px;max-width:100%;padding:0 8px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-block;position:relative;vertical-align:middle;background:#0d0d0d;color:#ccc;border:1px solid #404040}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;background-color:#333;color:#ccc;border:1px solid #0d0d0d;height:24px;box-shadow:0 0 0 0 rgba(0,0,0,.5);padding:0 12px;outline:0;font-family:inherit;font-size:12rem;font-weight:400;min-width:60px;margin:1px 0;transition:120ms;text-align:center;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;vertical-align:bottom;position:relative;overflow:hidden}button[cta]{background-color:#0d0d0d;color:#ccc;border-color:grey;box-shadow:0 0 0 0 rgba(0,0,0,.5);outline:0}button[toggles]{background-color:#333;color:#ccc;border-color:#0d0d0d;box-shadow:0 0 0 0 rgba(0,0,0,.5);outline:0}button[toggles][active]{background-color:#334bff;color:#fff;border-color:#0d0d0d;box-shadow:0 0 0 0 rgba(0,0,0,.5);outline:0}@media (-ms-high-contrast:none),(pointer:fine){button:focus:not([focused]),button[focused=visible],button[toggles]:focus:not([focused]),button[toggles][focused=visible],input[type=button]:focus:not([focused]),input[type=button][focused=visible],input[type=button][toggles]:focus:not([focused]),input[type=button][toggles][focused=visible],input[type=submit]:focus:not([focused]),input[type=submit][focused=visible],input[type=submit][toggles]:focus:not([focused]),input[type=submit][toggles][focused=visible]{background-color:#333;color:#fff;box-shadow:none;border-color:#0d0d0d;outline:0}button:hover,button[cta]:hover,button[toggles]:hover,button[toggles][active]:hover,input[type=button]:hover,input[type=button][cta]:hover,input[type=button][toggles]:hover,input[type=button][toggles][active]:hover,input[type=submit]:hover,input[type=submit][cta]:hover,input[type=submit][toggles]:hover,input[type=submit][toggles][active]:hover{background-color:#1429bd;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.8)}button:hover:not(:focus),button[cta]:hover:not(:focus),button[toggles]:hover:not(:focus),button[toggles][active]:hover:not(:focus),input[type=button]:hover:not(:focus),input[type=button][cta]:hover:not(:focus),input[type=button][toggles]:hover:not(:focus),input[type=button][toggles][active]:hover:not(:focus),input[type=submit]:hover:not(:focus),input[type=submit][cta]:hover:not(:focus),input[type=submit][toggles]:hover:not(:focus),input[type=submit][toggles][active]:hover:not(:focus){border-color:#1429bd;outline:0}button[cta]:focus:not([focused]),button[cta][focused=visible],input[type=button][cta]:focus:not([focused]),input[type=button][cta][focused=visible],input[type=submit][cta]:focus:not([focused]),input[type=submit][cta][focused=visible]{background-color:#0d0d0d;color:#fff;box-shadow:none;border-color:#0d0d0d;outline:0}button[toggles][active]:focus:not([focused]),button[toggles][active][focused=visible],input[type=button][toggles][active]:focus:not([focused]),input[type=button][toggles][active][focused=visible],input[type=submit][toggles][active]:focus:not([focused]),input[type=submit][toggles][active][focused=visible]{background-color:#334bff;color:#fff;box-shadow:none;border-color:#0d0d0d;outline:0}}@media all{button:active,button[cta]:active,button[toggles]:active,button[toggles][active]:active,input[type=button]:active,input[type=button][cta]:active,input[type=button][toggles]:active,input[type=button][toggles][active]:active,input[type=submit]:active,input[type=submit][cta]:active,input[type=submit][toggles]:active,input[type=submit][toggles][active]:active{background-color:#0f1e8a;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.5)}button:active:not(:focus),button[cta]:active:not(:focus),button[toggles]:active:not(:focus),button[toggles][active]:active:not(:focus),input[type=button]:active:not(:focus),input[type=button][cta]:active:not(:focus),input[type=button][toggles]:active:not(:focus),input[type=button][toggles][active]:active:not(:focus),input[type=submit]:active:not(:focus),input[type=submit][cta]:active:not(:focus),input[type=submit][toggles]:active:not(:focus),input[type=submit][toggles][active]:active:not(:focus){border-color:#0d0d0d;outline:0}button[disabled],button[toggles][disabled],input[type=button][disabled],input[type=button][toggles][disabled],input[type=submit][disabled],input[type=submit][toggles][disabled]{background-color:#333;color:#ccc;border-color:#0d0d0d;box-shadow:none;outline:0;pointer-events:none}button[cta][disabled],input[type=button][cta][disabled],input[type=submit][cta][disabled]{background-color:#0d0d0d;color:#ccc;border-color:#0d0d0d;box-shadow:none;outline:0;pointer-events:none}button[toggles][active][disabled],input[type=button][toggles][active][disabled],input[type=submit][toggles][active][disabled]{background-color:#334bff;color:#fff;border-color:#0d0d0d;box-shadow:none;outline:0;pointer-events:none}}a{text-decoration:none;color:#ccd2ff}a:active{color:#bec3ed}a:focus{outline:0}a:hover{text-decoration:underline;-webkit-text-decoration-color:#334bff;text-decoration-color:#334bff;color:#fff}a:visited,a[alt]:visited{color:#999}a[alt]{color:#ccd2ff}a[alt]:hover{color:#fff}textarea{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;width:152px;max-width:100%;padding:0 8px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#ccc;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;resize:none;line-height:1.2;padding:calc((24px - 1px * 2 - 1em * 1.2)/ 2) 8px}textarea[disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(64,64,64,.5)}textarea[type=number]{padding-right:0}textarea[warning]{border:1px solid #7f6400}textarea[warning][disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(127,100,0,.5)}textarea[error],textarea[error][warning]{border:1px solid #a01c2b}textarea[error][disabled],textarea[error][warning][disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(160,28,43,.5)}textarea ::-ms-clear{display:none}textarea[cols]{width:auto}textarea[rows]{height:auto}textarea:focus{background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host{--grid-header-height:28px;--grid-row-height:28px;--grid-guideline-color:#334BFF;--theme-name:\'elf-theme-halo\';--global-focus-bordercolor:#334BFF;--scrollbar-bgcolor:#1A1A1A;--button-txtcolor:#CCCCCC;--button-border-color:#0D0D0D;--button-bgcolor:#333333;--button-bgoverlay-1:transparent;--button-bgoverlay-2:transparent;--button-hover-txtcolor:#FFFFFF;--button-hover-bgcolor:#1429BD;--input-txtcolor:#CCCCCC;--input-selection-txtcolor:#FFFFFF;--input-selection-bgcolor:#334BFF;--grid-bordercolor:#333333;--grid-title-bgcolor:#262626;--grid-title-txtcolor:#CCCCCC;--grid-title-hover-txtcolor:#CCCCCC;--grid-header-bgcolor:#262626;--grid-header-txtcolor:#CCCCCC;--grid-header-icon-color:#6678FF;--grid-column-grouped-bgcolor:#262626;--grid-column-active-border-color:#334BFF;--grid-row-txtcolor:#CCCCCC;--grid-row-bgcolor:#1A1A1A;--grid-alt-row-bgcolor:#151515;--grid-active-txtcolor:#CCCCCC;--grid-active-bordercolor:#334BFF;--grid-active-bgcolor:#0d0d0d;--grid-highlight-txtcolor:#FFFFFF;--grid-highlight-bgcolor:#262626;--grid-selection-bgcolor:#0d0d0d;--grid-guideline-bgcolor:#334BFF;--grid-dragbox-bordercolor:#404040;--global-txtcolor:#CCCCCC;--global-hover-txtcolor:#FFFFFF;--global-active-txtcolor:#CCCCCC;--global-bordercolor:#333333;--field-bgcolor-a:#1A1A1A;--field-txtcolor-a:#CCCCCC;--popup-boxshadow:0 0 10px rgba(0, 0, 0, 0.5);--popup-overlay-modal-bgcolor:rgba(0, 0, 0, 0.5);--list-item-separator-bordercolor:#404040;--list-item-hover-bgcolor:#262626;--list-matched-txtcolor:#334BFF;--pager-ui-bgcolor:#262626;--loading-mask-color:#000000;--tag-bg-color:#333333;--expanded-tag-bg-color:#595959}:host .grid-hscroll,:host .grid-vscroll{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 .cell button,:host .cell input,:host .cell select,:host .cell textarea,:host ef-checkbox,:host input[type=checkbox]{margin:0}:host button,:host input[type=text],:host select{max-height:calc(var(--grid-row-height) - 6px)}:host select{width:100%}:host .cell button{min-width:unset}:host .title input[type=search]{width:100%;background-color:#1a1a1a;max-height:calc(var(--grid-row-height) - 6px)}:host .cell,:host .editing,:host .filter-input,:host .folder,:host .grid-pane,:host .sorting{touch-action:manipulation}:host .tr-lg .cell{padding:0 8px;padding:var(--grid-cell-padding,0 8px 0 8px)}:host .tr-grid .title .cell.sorting:hover,:host .tr-grid .title .sorting,:host .tr-grid .title .sorting:hover{color:#ccc}::-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:#1429bd}::-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,#1429bd,#1429bd);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,#1429bd,#1429bd);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:#1429bd;border:1px solid #1429bd}::-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:#1429bd}::-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:#1429bd}::-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:#1429bd}::-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:#1429bd}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px;border-left-color:#0d0d0d}:host .tr-grid{background-color:inherit}:host .tr-grid .title .selected-column .cell,:host .tr-grid .title .sortable.cell.sorting,:host .tr-grid .title .sortable.cell:not(.no-sort):hover{color:#fff;background-color:#333}:host .tr-grid .cell.selected-row::after{border-style:solid}:host .tr-grid .column.conditionally-colored .cell.highlighted-row,:host .tr-grid .column.conditionally-colored .cell.selected-row,:host .tr-grid .column.heat-map .cell.highlighted-row,:host .tr-grid .column.heat-map .cell.selected-row,:host .tr-grid .selected-column.conditionally-colored .cell,:host .tr-grid .selected-column.heat-map .cell,:host .tr-grid .title .selected-column .cell,:host .tr-lg .cell.highlighted-row,:host .tr-lg .cell.selected-row,:host .tr-lg .selected-column .cell{background-image:none}:host .tr-lg .cell.selected-row,:host .tr-lg .selected-column .cell{background-color:#0d0d0d}:host .tr-lg .cell.highlighted-row{background-color:#262626}:host .tr-grid .tr-lg .folder:not(.closed){color:#fff;font-weight:500}:host .tr-grid .sortable-indicator{opacity:.5}:host .tr-grid .footer .column.grouped:not(.collapsed),:host .tr-grid .header .column.grouped:not(.collapsed),:host .tr-grid .title .column.grouped:not(.collapsed){background-color:#333}:host .tr-grid .tr-lg .folder,:host .tr-grid .tr-lg .header{background-color:#1a1a1a}:host .tr-grid .tr-lg .folder.highlighted-row,:host .tr-grid .tr-lg .header.highlighted-row{background-color:#262626}');