@refinitiv-ui/efx-grid 6.0.106 → 6.0.108

package/lib/core/es6/grid/Core.d.ts

@@ -371,8 +371,6 @@ declare class Core extends ElementWrapper {
 
     public reserveRightSpace(size: number): boolean;
 
-    public getHiddenInput(): Element|null;
-
     public focus(): void;
 
     public isBinding(): boolean;
@@ -391,6 +389,8 @@ declare class Core extends ElementWrapper {
 
     public isSelectedColumn(colIndex: number): boolean;
 
+    public updateColumnBounds(): void;
+
     public getColumnRect(startColIndex: number, endColIndex: number): any;
 
     public getRowRect(startRowIndex: number, endRowIndex: number): any;

package/lib/core/es6/grid/Core.js

@@ -52,6 +52,9 @@ import VirtualizedLayoutGrid from "./VirtualizedLayoutGrid.js";
 /** @event Core#preForcedUpdate
 * @ignore
 */
+/** @event Core#tabNavigation
+* @ignore
+*/
 //#endregion Events
 
 /** @private
@@ -62,6 +65,44 @@ import VirtualizedLayoutGrid from "./VirtualizedLayoutGrid.js";
 let ascNumberSorter = function (a, b) {
 	return a - b;
 };
+/** @private
+* @return {!Element}
+*/
+let _createHiddenInput = function () {
+	let hiddenInput = document.createElement("input");
+	let styleObj = hiddenInput.style;
+	styleObj.position = "absolute";
+	styleObj.width = styleObj.height = styleObj.padding = styleObj.border = "0";
+	hiddenInput.value = "0";
+	return hiddenInput;
+};
+/** @private
+* @param {Object} e
+* @return {boolean}
+*/
+let _isTabCommand = function (e) {
+	if(e.keyCode === 9) {
+		return !e.ctrlKey && !e.altKey && !e.metaKey;
+	}
+	return false;
+};
+/** @private
+* @param {Element} elem
+* @return {Element}
+*/
+let _getActiveElement = function (elem) {
+	if(elem) {
+		if(elem.getRootNode) {
+			let rootNode = elem.getRootNode(); // Get uncomposed root node
+			if(rootNode && rootNode !== elem) { // The root node could be the element itself, if it is not attached to the DOM tree
+				return rootNode.activeElement || null;
+			}
+		} else { // Older browser does not support getRootNode
+			return document.activeElement;
+		}
+	}
+	return null;
+};
 
 /** @constructor
 * @param {Element=} opt_initializer this can be either element id (string) or DOM element.
@@ -85,6 +126,8 @@ let Core = function (opt_initializer) {
 	_t._onMouseMove = _t._onMouseMove.bind(_t);
 	_t._onRowHightlighted = _t._onRowHightlighted.bind(_t);
 	_t._onGridClicked = _t._onGridClicked.bind(_t);
+	_t._onKeyDown = _t._onKeyDown.bind(_t);
+	_t._onKeyUp = _t._onKeyUp.bind(_t);
 
 	_t._onWindowResize = _t._onWindowResize.bind(_t);
 	_t._onSectionDataChanged = _t._onSectionDataChanged.bind(_t);
@@ -105,7 +148,7 @@ let Core = function (opt_initializer) {
 	_t._onColInViewChanged =  _t._onColInViewChanged.bind(_t);
 
 	_t._updateVScrollbar = _t._updateVScrollbar.bind(_t);
-	_t._updateColumnBounds = _t._updateColumnBounds.bind(_t);
+	_t.updateColumnBounds = _t.updateColumnBounds.bind(_t);
 	_t._dispatchColumnPositionChanged = _t._dispatchColumnPositionChanged.bind(_t);
 	_t._dispatchRowPositionChanged = _t._dispatchRowPositionChanged.bind(_t);
 	_t._requestScrollbarUpdate = _t._requestScrollbarUpdate.bind(_t);
@@ -146,7 +189,7 @@ let Core = function (opt_initializer) {
 	// Initialize vertical scrollbar
 	_t._vscrollbar = new VScrollbar();
 	_t._vscrollbar.disable();
-	_t._vscrollbar.setParent(this.getParent() || this.getElement());
+	_t._vscrollbar.setParent(_t.getParent() || _t.getElement());
 
 	_t._vscrollbar.listen("scroll", _t._onVScroll);
 	_t._vscrollbar.listen("layoutChanged", _t._onVScroll);
@@ -159,25 +202,28 @@ let Core = function (opt_initializer) {
 	// Initialize horizontal scrollbars
 	_t._hscrollbar = new HScrollbar();
 	_t._hscrollbar.disable();
-	_t._hscrollbar.setParent(this.getParent() || this.getElement());
+	_t._hscrollbar.setParent(_t.getParent() || _t.getElement());
 
-	_t._hscrollbar.listen("scroll", this._onHScroll);
-	_t._hscrollbar.listen("layoutChanged", this._onHScroll);
-	_t._hscrollbar.listen("activated", this.updateLayout);
-	_t._hscrollbar.listen("deactivated", this.updateLayout);
+	_t._hscrollbar.listen("scroll", _t._onHScroll);
+	_t._hscrollbar.listen("layoutChanged", _t._onHScroll);
+	_t._hscrollbar.listen("activated", _t.updateLayout);
+	_t._hscrollbar.listen("deactivated", _t.updateLayout);
 
 	// cross-reference scrollbars
 	_t._hscrollbar.setOtherScrollbar(_t._vscrollbar);
 	_t._vscrollbar.setOtherScrollbar(_t._hscrollbar);
 
+
+	_t._element.addEventListener("keydown", _t._onKeyDown);
+	_t._element.addEventListener("keyup", _t._onKeyUp);
 	if (Util.isMobile || Util.isTouchDevice) {
-		_t._element.addEventListener("touchmove", this._onMouseMove, false);
+		_t._element.addEventListener("touchmove", _t._onMouseMove, false);
 	} else {
-		_t._element.addEventListener("mousemove", this._onMouseMove, false);
+		_t._element.addEventListener("mousemove", _t._onMouseMove, false);
 	}
 
 	if(Util.isSafari){
-		_t._element.addEventListener("click", this._onGridClicked);
+		_t._element.addEventListener("click", _t._onGridClicked);
 	}
 
 	window.addEventListener("resize", _t._onWindowResize, false); // Should be unlistened after destroyed
@@ -185,10 +231,17 @@ let Core = function (opt_initializer) {
 	_t._colVirtualizer.listen("indexChanged", _t._onColInViewChanged);
 	_t._rowHeightConflator = new Conflator(_t._onRowHeightChanged, 50);
 	_t._vScrollbarConflator = new Conflator(_t._updateVScrollbar, 200);
-	_t._columnBoundConflator = new Conflator(_t._updateColumnBounds, 10);
+	_t._columnBoundConflator = new Conflator(_t.updateColumnBounds, 10);
 	_t._columnPositionConflator = new Conflator(_t._dispatchColumnPositionChanged, 10);
 	_t._rowPositionConflator = new Conflator(_t._dispatchRowPositionChanged, 10);
 
+	_t._firstHiddenInput = _createHiddenInput();
+	_t._firstHiddenInput.className = "first-input";
+	_t._lastHiddenInput = _createHiddenInput();
+	_t._lastHiddenInput.className = "last-input";
+	_t._element.insertBefore(_t._firstHiddenInput, _t._element.firstChild);
+	_t._element.appendChild(_t._lastHiddenInput);
+
 	// Initialize events for external users
 	_t._addEvents(
 		"sectionAdded",
@@ -217,7 +270,8 @@ let Core = function (opt_initializer) {
 		"beforeColumnBoundUpdate",
 		"beforeBatchOperation",
 		"afterBatchOperation",
-		"pinningChanged"
+		"pinningChanged",
+		"tabNavigation"
 	);
 
 	// For debugging in advanced optimization mode
@@ -226,9 +280,9 @@ let Core = function (opt_initializer) {
 		map = {};
 		Core["map"] = map;
 	}
-	let elem = _t._element;
-	elem["_control"] = _t;
-	let id = elem.id || elem.name;
+
+	_t._element["_control"] = _t;
+	let id = _t._element.id || _t._element.name;
 	if(!id || map[id]) {
 		id = "_grid" + Core._runningGridId;
 	}
@@ -236,17 +290,6 @@ let Core = function (opt_initializer) {
 	map[id] = _t;
 	Core._runningGridId++;
 
-	// init hiddenInput for retrieve copy and cut event
-	let hiddenInput = document.createElement("input");
-	hiddenInput.style.position = "absolute";
-	hiddenInput.style.width = "0";
-	hiddenInput.style.height = "0";
-	hiddenInput.style.padding = "0";
-	hiddenInput.style.border = "0";
-	hiddenInput.value = "0";
-	_t._hiddenInput = hiddenInput;
-	elem.insertBefore(hiddenInput, elem.firstChild);
-
 	// Ensure all affected plugins are loaded prior zoom plugin
 	// use as entity to trigger updateLayout once zoom is changed
 	Object.defineProperty(_t, "zoomFactor", {
@@ -526,11 +569,16 @@ Core.prototype._rowRefreshTimer = 0;
 * @private
 */
 Core.prototype._layoutUpdating = false;
-/** A Hidden input that allow to get cut and copy event when user perform cut, copy activities
-* @type {Element}
+/** A hidden input that allows grid to receive keyboard input and focus
+* @type {!Element}
+* @private
+*/
+Core.prototype._firstHiddenInput;
+/** A hidden input that allows grid to receive keyboard input and focus
+* @type {!Element}
 * @private
 */
-Core.prototype._hiddenInput;
+Core.prototype._lastHiddenInput;
 /** @type {number}
 * @private
 */
@@ -574,7 +622,7 @@ Core.prototype._hasPendingRowChange = false;
 * @return {string}
 */
 Core.getVersion = function () {
-	return "5.1.107";
+	return "5.1.110";
 };
 /** {@link ElementWrapper#dispose}
 * @override
@@ -635,11 +683,12 @@ Core.prototype.dispose = function () {
 
 	// Clean Top node
 	let elem = this._element;
-	if (elem !== null) {
+	if (elem) {
 		if (elem["_control"]) {
 			delete elem["_control"];
 		}
-		elem.removeChild(this._hiddenInput);
+		elem.removeChild(this._firstHiddenInput);
+		elem.removeChild(this._lastHiddenInput);
 	}
 	this._dispose();
 
@@ -1804,7 +1853,7 @@ Core.prototype._moveColumn = function (fromCol, destCol) {
 			this._colVirtualizer.update();
 		}
 	}
-	this._updateColumnBounds();
+	this.updateColumnBounds();
 	this._updateColumnSeparators();
 	return true;
 };
@@ -4037,15 +4086,14 @@ Core.prototype.reserveRightSpace = function (size) {
 	return false;
 };
 
-/** Get hidden input in grid <br>
-* this input for make grid can copy <br>
-* normal user should not touch it <br>
-* but sometime grid extension will have to use this element
+/** Get the hidden input. This input allows grid to receive keyboard input
 * @public
-* @return {Element}
+* @ignore
+* @param {boolean} firstInput
+* @return {!Element}
 */
-Core.prototype.getHiddenInput = function () {
-	return this._hiddenInput;
+Core.prototype.getHiddenInput = function (firstInput) {
+	return firstInput ? this._firstHiddenInput : this._lastHiddenInput;
 };
 
 /** Focus grid element without bringing grid into window's view. This is useful when grid is very wide or tall, since window can be scrolled to focused element by default in some browsers.
@@ -4054,8 +4102,8 @@ Core.prototype.getHiddenInput = function () {
 * @see {@link http://help.dottoro.com/ljqmdirr.php}
 */
 Core.prototype.focus = function () {
-	let elem = this._hiddenInput;
-	let activeElem = document.activeElement;
+	let elem = this._lastHiddenInput;
+	let activeElem = _getActiveElement(elem);
 	if(elem && elem !== activeElem) {
 		let x = window.pageXOffset;
 		let y = window.pageYOffset;
@@ -4186,7 +4234,7 @@ Core.prototype.selectColumn = function (colIndex, selected) {
 	for (let i = this._settings.length; --i >= 0; ) {
 		this._settings[i].getSection().selectColumn(colIndex, selected);
 	}
-	this._updateColumnBounds();
+	this.updateColumnBounds();
 };
 /** @public
 * @param {number} colIndex
@@ -4200,9 +4248,9 @@ Core.prototype.isSelectedColumn = function (colIndex) {
 	return false;
 };
 
-/** @private
+/** @public
 */
-Core.prototype._updateColumnBounds = function () {
+Core.prototype.updateColumnBounds = function () {
 	if(this._columnBoundConflator.conflate()) {
 		return;
 	}
@@ -4689,14 +4737,14 @@ Core.prototype._newSection = function (opt_type, sectionName) {
 Core.prototype._putToLast = function(section) {
 	let sectionCount = this._settings.length;
 	if (sectionCount === 0) {
-		section.setParent(this._element, true);
+		section.insertBefore(this._lastHiddenInput);
 	} else {
 		let lastGrid = this.getLastSection();
 		let nextSibling = lastGrid.getElement().nextSibling;
 		if (nextSibling !== null) {
 			section.insertBefore(nextSibling);
 		} else {
-			section.setParent(this._element);
+			section.insertBefore(this._lastHiddenInput);
 		}
 	}
 };
@@ -5082,7 +5130,7 @@ Core.prototype._onVScroll = function (e) {
 Core.prototype._onHScroll = function (e) {
 	let scrollVal = this._hscrollbar.getScrollLeft();
 	this._colVirtualizer.setViewOffset(scrollVal); // Trigger virtualization event
-	this._updateColumnBounds();
+	this.updateColumnBounds();
 	this._dispatchColumnPositionChanged();
 };
 /** @private
@@ -5381,14 +5429,66 @@ Core.prototype._onMouseMove = function () {
 };
 /** @private */
 Core.prototype._onGridClicked = function () {
-	// research for dragging
 	let selection = window.getSelection();
-	if(selection.toString()){
+	if(!selection.toString()){
+		if(!this._element.contains(_getActiveElement(this._element))){
+			this.focus();
+		}
+	}
+};
+
+/** @private
+* @param {Object} e
+*/
+Core.prototype._onKeyDown = function (e) {
+	if(!_isTabCommand(e)) {
 		return;
 	}
-	let activeElem = document.activeElement;
-	if(!this._element.contains(activeElem)){
-		this.focus();
+	let activeElement = _getActiveElement(this._element);
+	let onTheEdge = false;
+	if(this._firstHiddenInput === activeElement) {
+		onTheEdge = -1;
+	} else if(this._lastHiddenInput === activeElement) {
+		onTheEdge = 1;
+	}
+
+	this._dispatch("tabNavigation", {
+		"activeElement": activeElement,
+		"firstHiddenInput": this._firstHiddenInput,
+		"lastHiddenInput": this._lastHiddenInput,
+		"onTheEdge": onTheEdge,
+		"shiftKey": e.shiftKey,
+		"event": e
+	});
+
+	if(onTheEdge && !e.defaultPrevented) {
+		if(onTheEdge > 0 && e.shiftKey) {
+			this._firstHiddenInput.focus(); // jump to the top
+			e.preventDefault();
+		} else if(onTheEdge < 0 && !e.shiftKey) {
+			this._lastHiddenInput.focus(); // skip to the end
+			e.preventDefault();
+		}
+	}
+};
+/** @private
+* @param {Object} e
+*/
+Core.prototype._onKeyUp = function (e) {
+	if(!_isTabCommand(e)) {
+		return;
+	}
+	var activeElem = _getActiveElement(this._element);
+	if(e.shiftKey) {
+		if(activeElem === this._lastHiddenInput) {
+			this._firstHiddenInput.focus();
+			e.preventDefault();
+		}
+	} else {
+		if(activeElem === this._firstHiddenInput) {
+			this._lastHiddenInput.focus();
+			e.preventDefault();
+		}
 	}
 };
 
@@ -5571,6 +5671,7 @@ Core.prototype._onSectionCountChanged = function (opt_suppressLayout) {
 
 		// Reinsert sections
 		this._vscrollbar.setScrollContent(this, this._getAllSections(), this._startVScrollbarIndex);
+		this._element.appendChild(this._lastHiddenInput); // Ensure that the hidden input is always at the last position
 
 		if(!opt_suppressLayout) {
 			this._updateScrollbarHeight(true, true);
@@ -5588,7 +5689,7 @@ Core.prototype._onColumnCountChanged = function () {
 	let pinnedLeft = this._countPinnedLeftColumns();
 	let pinnedRight = this._countPinnedRightColumns();
 
-	this._updateColumnBounds();
+	this.updateColumnBounds();
 	this._updateColumnSeparators();
 
 	if (this._hScrollbarEnabled && pinnedLeft + pinnedRight < this.getColumnCount()) {
@@ -5884,7 +5985,7 @@ Core.prototype._syncLayoutToColumns = function (from, to, opt_forceDispatching)
 	// TODO: Check if "to" should be greater than or equal to first pinnied right index
 	let paneChanged = forceUpdate || (from < this.getHScrollStartIndex()) || (to > this.getFirstPinnedRightIndex());
 	this._updateScrollbarWidth(paneChanged, true /* contentChanged */);
-	this._updateColumnBounds();
+	this.updateColumnBounds();
 	this._updateColumnSeparators();
 	this._dispatchColumnPositionChanged();
 

package/lib/core/es6/grid/ILayoutGrid.js

@@ -537,7 +537,7 @@ ILayoutGrid.prototype.setRowOffset = function (index) { };
 ILayoutGrid.prototype.updateLayout = function () { };
 
 /** This will make the specified cell horizontally span to fit entire row regardless of position of the cell -- cell will shift to the left most of the section.<br>
-* If opt_noLeftStretching is true, the cell will not extend to the left most position<br>
+* If onlyToTheRight is true, the cell will not extend to the left most position<br>
 * This is different from cell colSpan, which the cell remain in the same position. tr-stretched class will also be added to the cell
 * @public
 * @param {number|Cell} cellRef Either column index or cell reference is acceptable

package/lib/core/es6/grid/components/Scrollbar.js

@@ -375,7 +375,6 @@ Scrollbar.updateTrackThickness = function () {
 
 /** @override */
 Scrollbar.prototype.dispose = function () {
-
 	let sbListeners = Scrollbar._listeners;
 	if(sbListeners) {
 		let idx = sbListeners.indexOf(this._onThicknessChanged);
@@ -839,7 +838,7 @@ Scrollbar.prototype._clearAllPanes = function() {
 */
 Scrollbar.prototype.disableKeyboardInput = function (opt_disabled) {
 	if(opt_disabled === false) {
-		this._element.setAttribute("tabindex", "0");
+		this._element.setAttribute("tabindex", "-1"); // tabindex makes the element focusable. The negative value exclude it from tab key navigation
 		this._element.addEventListener("keydown", this._onKeyDown, false);
 	} else {
 		this._element.removeAttribute("tabindex");
@@ -1034,8 +1033,11 @@ Scrollbar.prototype._onStartFading = function (e) {
 * @param {Object} e
 */
 Scrollbar.prototype._onTrackScroll = function (e) {
-	let tScrollVal = (this._vertical) ? e.target["scrollTop"] : e.target["scrollLeft"];
+	if(!this._element) {
+		return; // Element has been disposed
+	}
 
+	let tScrollVal = (this._vertical) ? e.target["scrollTop"] : e.target["scrollLeft"];
 	let pScrollVal = this._convertTrackToPane(tScrollVal);
 
 	pScrollVal = this._calcProperScrollValue(pScrollVal);

package/lib/filter-dialog/lib/filter-dialog.d.ts

@@ -27,6 +27,8 @@ declare namespace FilterDialog {
         sortState?: string|null,
         sortUI?: boolean|null,
         filterUI?: boolean|null,
+        advancedFilter?: boolean|null,
+        compactMode?: boolean|null,
         blankValues?: (string|boolean)|null,
         filterChanged?: ((...params: any[]) => any)|null,
         confirm?: ((...params: any[]) => any)|null,

package/lib/filter-dialog/lib/filter-dialog.js

@@ -25,6 +25,8 @@ import "./checkbox-list.js";
  * @property {string=} sortState "a" for ascending or "d" for descending
  * @property {boolean=} sortUI Show Sort area
  * @property {boolean=} filterUI Show Filter area
+ * @property {boolean=} advancedFilter Show advanced tab
+ * @property {boolean=} compactMode Force compact mode in dialog
  * @property {(string|boolean)=} blankValues Display a Blanks item in the filter dialog to represent an empty value. If a string is passed, it will be used as the label for the blank item
  * @property {Function=} filterChanged Filter changed handler
  * @property {Function=} confirm Alias of filterChanged
@@ -141,6 +143,7 @@ class FilterDialog extends BasicElement {
 			conditions: {attribute: false},
 			hiddenSortUI: {type: Boolean},
 			hiddenFilterUI: {type: Boolean},
+			hiddenAdvancedFilter: {type: Boolean},
 			sortState: {type: String},
 			useUTCTime: {type: Boolean},
 			fieldDataType: {type: String},
@@ -163,11 +166,13 @@ class FilterDialog extends BasicElement {
 		this._translation = translation;
 		this.hiddenSortUI = false;
 		this.hiddenFilterUI = false;
+		this.hiddenAdvancedFilter = false;
 		this.isShown = false;
 		this.sortState = "n";
 		this.fieldDataType = "";
 		this._blankValues = false;
 		this._blankValuesChecked = false;
+		this._compactMode = false;
 		this.useUTCTime = true;
 		this._popup = new Popup({
 			"shown": this._onPopupShown.bind(this),
@@ -212,10 +217,18 @@ class FilterDialog extends BasicElement {
 					this.hiddenFilterUI = options.filterUI === false;
 				}
 
+				if(options.advancedFilter != null) {
+					this.hiddenAdvancedFilter = options.advancedFilter === false;
+				}
+
 				if(options.blankValues != null ) {
 					this._blankValues = options.blankValues;
 				}
 
+				if(options.compactMode != null) {
+					this._compactMode = options.compactMode;
+				}
+
 				this._blankValuesChecked = false;
 				if(options.blankValuesChecked != null) {
 					this._blankValuesChecked = options.blankValuesChecked;
@@ -409,6 +422,7 @@ class FilterDialog extends BasicElement {
 		// Update Sort UI
 		var isHiddenSortUIChanged = changedProps.has("hiddenSortUI");
 		var isHiddenFilterUIChanged = changedProps.has("hiddenFilterUI");
+		var isHiddenAdvancedFilterChanged = changedProps.has("hiddenAdvancedFilter");
 		if (isHiddenSortUIChanged) {
 			let pn = this._sortUI.parentNode;
 			if (this.hiddenSortUI) {
@@ -447,6 +461,10 @@ class FilterDialog extends BasicElement {
 			var isHide = this.hiddenSortUI || this.hiddenFilterUI;
 			this._separator.classList.toggle("hide", isHide);
 		}
+		if(isHiddenAdvancedFilterChanged) {
+			// TODO: Add class for no advance filter
+			this._filterBtns.classList.toggle("hide", this.hiddenAdvancedFilter);
+		}
 
 		if (changedProps.has("isShown")) {
 			if (this.isShown) {
@@ -934,7 +952,11 @@ class FilterDialog extends BasicElement {
 	* @returns {boolean}
 	*/
 	_updateDialogHeight() {
-		this._rootContainer.classList.remove("compact");
+		if(!this._compactMode) {
+			this._rootContainer.classList.remove("compact");
+		} else {
+			this._rootContainer.classList.add("compact"); // Compact mode impact height of element, so we need to set it before height changed to calculate exactly height
+		}
 		this._rootContainer.style.height = "";
 		this._popup.updatePosition(false); // update position without fallback
 

package/lib/filter-dialog/themes/base-checkbox.less

@@ -5,8 +5,7 @@
 	}
 	.select-btn {
 		margin-top: 0;
-		margin-bottom: 0;
-		border-bottom: none;
+		margin-bottom: 4px;
 	}
 
 	.ie-scrollbars();

package/lib/filter-dialog/themes/elemental/dark/checkbox-list.js

@@ -1,4 +1,4 @@
 import "./imports/native-elements.js";
 
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'checkbox-list', styles: ':host{display:block;scrollbar-face-color:#3e444f;scrollbar-shadow-color:#3e444f;scrollbar-highlight-color:#3e444f;scrollbar-arrow-color:#3e444f;scrollbar-track-color:#21242a;scrollbar-3dlight-color:#21242a;scrollbar-darkshadow-color:#21242a;scrollbar-color:#3e444f #21242a}:host .hidden{display:none}:host .select-btn{margin-top:0;margin-bottom:0;border-bottom:none}:host #container{border:1px solid #3e444f;overflow-y:auto;min-height:48px;flex-grow:1}:host .item-container{display:flex;width:100%;align-items:center}:host .item-label{margin-left:7px;min-width:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .root{display:flex;flex-flow:column;overflow:hidden}::-webkit-scrollbar{width:15px;height:15px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #21242a;height:15px;width:15px;display:block}::-webkit-scrollbar-thumb{background:#3e444f;border-radius:8px;border:2px solid #21242a}::-webkit-scrollbar-thumb:hover{background:#b7bcc6}::-webkit-scrollbar-thumb:active{background:#707a8e}::-webkit-scrollbar-track{background:#21242a}::-webkit-scrollbar-corner{background:#21242a}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f);background-position:12px 8.5px,11px 7.5px,10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 4.5px,5px 5.5px,4px 6.5px,3px 7.5px,2px 8.5px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6);background-position:12px 8.5px,11px 7.5px,10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 4.5px,5px 5.5px,4px 6.5px,3px 7.5px,2px 8.5px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e);background-position:12px 8.5px,11px 7.5px,10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 4.5px,5px 5.5px,4px 6.5px,3px 7.5px,2px 8.5px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f);background-position:12px 4.5px,11px 5.5px,10px 6.5px,9px 7.5px,8px 8.5px,7px 9.5px,6px 8.5px,5px 7.5px,4px 6.5px,3px 5.5px,2px 4.5px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6);background-position:12px 4.5px,11px 5.5px,10px 6.5px,9px 7.5px,8px 8.5px,7px 9.5px,6px 8.5px,5px 7.5px,4px 6.5px,3px 5.5px,2px 4.5px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e);background-position:12px 4.5px,11px 5.5px,10px 6.5px,9px 7.5px,8px 8.5px,7px 9.5px,6px 8.5px,5px 7.5px,4px 6.5px,3px 5.5px,2px 4.5px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f);background-position:8.5px 12px,7.5px 11px,6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,4.5px 6px,5.5px 5px,6.5px 4px,7.5px 3px,8.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6);background-position:8.5px 12px,7.5px 11px,6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,4.5px 6px,5.5px 5px,6.5px 4px,7.5px 3px,8.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e);background-position:8.5px 12px,7.5px 11px,6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,4.5px 6px,5.5px 5px,6.5px 4px,7.5px 3px,8.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f);background-position:4.5px 12px,5.5px 11px,6.5px 10px,7.5px 9px,8.5px 8px,9.5px 7px,8.5px 6px,7.5px 5px,6.5px 4px,5.5px 3px,4.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6);background-position:4.5px 12px,5.5px 11px,6.5px 10px,7.5px 9px,8.5px 8px,9.5px 7px,8.5px 6px,7.5px 5px,6.5px 4px,5.5px 3px,4.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e);background-position:4.5px 12px,5.5px 11px,6.5px 10px,7.5px 9px,8.5px 8px,9.5px 7px,8.5px 6px,7.5px 5px,6.5px 4px,5.5px 3px,4.5px 2px}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'checkbox-list', styles: ':host{display:block;scrollbar-face-color:#3e444f;scrollbar-shadow-color:#3e444f;scrollbar-highlight-color:#3e444f;scrollbar-arrow-color:#3e444f;scrollbar-track-color:#21242a;scrollbar-3dlight-color:#21242a;scrollbar-darkshadow-color:#21242a;scrollbar-color:#3e444f #21242a}:host .hidden{display:none}:host .select-btn{margin-top:0;margin-bottom:4px}:host #container{border:1px solid #3e444f;overflow-y:auto;min-height:48px;flex-grow:1}:host .item-container{display:flex;width:100%;align-items:center}:host .item-label{margin-left:7px;min-width:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .root{display:flex;flex-flow:column;overflow:hidden}::-webkit-scrollbar{width:15px;height:15px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #21242a;height:15px;width:15px;display:block}::-webkit-scrollbar-thumb{background:#3e444f;border-radius:8px;border:2px solid #21242a}::-webkit-scrollbar-thumb:hover{background:#b7bcc6}::-webkit-scrollbar-thumb:active{background:#707a8e}::-webkit-scrollbar-track{background:#21242a}::-webkit-scrollbar-corner{background:#21242a}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f);background-position:12px 8.5px,11px 7.5px,10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 4.5px,5px 5.5px,4px 6.5px,3px 7.5px,2px 8.5px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6);background-position:12px 8.5px,11px 7.5px,10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 4.5px,5px 5.5px,4px 6.5px,3px 7.5px,2px 8.5px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e);background-position:12px 8.5px,11px 7.5px,10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 4.5px,5px 5.5px,4px 6.5px,3px 7.5px,2px 8.5px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f);background-position:12px 4.5px,11px 5.5px,10px 6.5px,9px 7.5px,8px 8.5px,7px 9.5px,6px 8.5px,5px 7.5px,4px 6.5px,3px 5.5px,2px 4.5px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6);background-position:12px 4.5px,11px 5.5px,10px 6.5px,9px 7.5px,8px 8.5px,7px 9.5px,6px 8.5px,5px 7.5px,4px 6.5px,3px 5.5px,2px 4.5px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e);background-position:12px 4.5px,11px 5.5px,10px 6.5px,9px 7.5px,8px 8.5px,7px 9.5px,6px 8.5px,5px 7.5px,4px 6.5px,3px 5.5px,2px 4.5px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f);background-position:8.5px 12px,7.5px 11px,6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,4.5px 6px,5.5px 5px,6.5px 4px,7.5px 3px,8.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6);background-position:8.5px 12px,7.5px 11px,6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,4.5px 6px,5.5px 5px,6.5px 4px,7.5px 3px,8.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e);background-position:8.5px 12px,7.5px 11px,6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,4.5px 6px,5.5px 5px,6.5px 4px,7.5px 3px,8.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f);background-position:4.5px 12px,5.5px 11px,6.5px 10px,7.5px 9px,8.5px 8px,9.5px 7px,8.5px 6px,7.5px 5px,6.5px 4px,5.5px 3px,4.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6);background-position:4.5px 12px,5.5px 11px,6.5px 10px,7.5px 9px,8.5px 8px,9.5px 7px,8.5px 6px,7.5px 5px,6.5px 4px,5.5px 3px,4.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e);background-position:4.5px 12px,5.5px 11px,6.5px 10px,7.5px 9px,8.5px 8px,9.5px 7px,8.5px 6px,7.5px 5px,6.5px 4px,5.5px 3px,4.5px 2px}' }}));

package/lib/filter-dialog/themes/elemental/dark/es5/all-elements.js

@@ -1,4 +1,4 @@
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'filter-dialog', styles: ':host{display:block}:host *{margin-bottom:0;margin-top:0}:host .compact{padding-top:8px;padding-bottom:8px}:host .compact #filterAdvancedUI,:host .compact #filterValueUI{margin-top:5px}:host .compact #filterValueUI>*+*{margin-top:4px}:host .compact .input-group ef-combo-box+ef-combo-box,:host .compact .input-group ef-combo-box+ef-datetime-picker{margin-top:10px}:host .compact .input-group ef-combo-box+div.radio-group,:host .compact .input-group ef-datetime-picker+div.radio-group{margin-top:6px}:host .compact .input-group div.radio-group+ef-combo-box{margin-top:8px}:host .compact .cancel-ok{margin-top:4px}:host .compact #separator,:host .compact .group-label{display:none}:host ef-panel{box-shadow:0 0 10px rgba(0,0,0,.5);padding-top:17px;padding-bottom:31px;display:block}:host label{line-height:18px;font-size:12px}:host hr{border-top:1px solid;margin-top:9px;margin-bottom:6px;width:100%}:host ef-radio-button{height:18px}:host #filterCoralSplitBtn,:host ef-combo-box,:host ef-input,:host ef-search-field,:host ef-datetime-picker{width:100%}:host ef-radio-group{text-align:center}:host #root_panel{display:flex;flex-direction:column}:host #filterUI{display:flex;flex-direction:column;overflow-y:hidden;flex:1}:host #dataSelector{overflow:hidden;display:flex;flex-direction:column}:host #filterAdvancedUI,:host #filterValueUI{margin-top:19px;display:flex;flex-direction:column;flex:1;overflow:auto}:host #filterValueUI>*+*{margin-top:19px}:host #filterDialogContent{width:243px;display:flex;flex-direction:column;overflow:hidden;flex:1}:host #dataFilter{flex:0 0 auto}:host .group-block>*+*{margin-top:4px}:host .group-block label{display:block}:host .group-filter{overflow:hidden;display:flex;flex-direction:column;flex:1}:host .input-group ef-combo-box+ef-combo-box,:host .input-group ef-combo-box+ef-datetime-picker{margin-top:19px}:host .input-group ef-radio-button+ef-radio-button{margin-left:6px}:host .input-group ef-combo-box+div.radio-group,:host .input-group ef-datetime-picker+div.radio-group{margin-top:13px}:host .input-group div.radio-group+ef-combo-box{margin-top:16px}:host .cancel-ok{text-align:right;margin-top:31px}:host .cancel-ok #cancel_btn{margin-left:12px}:host .cancel-ok #clear_btn{float:left}:host .hide{display:none!important}' }}))
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'checkbox-list', styles: ':host{display:block;scrollbar-face-color:#3e444f;scrollbar-shadow-color:#3e444f;scrollbar-highlight-color:#3e444f;scrollbar-arrow-color:#3e444f;scrollbar-track-color:#21242a;scrollbar-3dlight-color:#21242a;scrollbar-darkshadow-color:#21242a;scrollbar-color:#3e444f #21242a}:host .hidden{display:none}:host .select-btn{margin-top:0;margin-bottom:0;border-bottom:none}:host #container{border:1px solid #3e444f;overflow-y:auto;min-height:48px;flex-grow:1}:host .item-container{display:flex;width:100%;align-items:center}:host .item-label{margin-left:7px;min-width:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .root{display:flex;flex-flow:column;overflow:hidden}::-webkit-scrollbar{width:15px;height:15px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #21242a;height:15px;width:15px;display:block}::-webkit-scrollbar-thumb{background:#3e444f;border-radius:8px;border:2px solid #21242a}::-webkit-scrollbar-thumb:hover{background:#b7bcc6}::-webkit-scrollbar-thumb:active{background:#707a8e}::-webkit-scrollbar-track{background:#21242a}::-webkit-scrollbar-corner{background:#21242a}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f);background-position:12px 8.5px,11px 7.5px,10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 4.5px,5px 5.5px,4px 6.5px,3px 7.5px,2px 8.5px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6);background-position:12px 8.5px,11px 7.5px,10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 4.5px,5px 5.5px,4px 6.5px,3px 7.5px,2px 8.5px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e);background-position:12px 8.5px,11px 7.5px,10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 4.5px,5px 5.5px,4px 6.5px,3px 7.5px,2px 8.5px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f);background-position:12px 4.5px,11px 5.5px,10px 6.5px,9px 7.5px,8px 8.5px,7px 9.5px,6px 8.5px,5px 7.5px,4px 6.5px,3px 5.5px,2px 4.5px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6);background-position:12px 4.5px,11px 5.5px,10px 6.5px,9px 7.5px,8px 8.5px,7px 9.5px,6px 8.5px,5px 7.5px,4px 6.5px,3px 5.5px,2px 4.5px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e);background-position:12px 4.5px,11px 5.5px,10px 6.5px,9px 7.5px,8px 8.5px,7px 9.5px,6px 8.5px,5px 7.5px,4px 6.5px,3px 5.5px,2px 4.5px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f);background-position:8.5px 12px,7.5px 11px,6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,4.5px 6px,5.5px 5px,6.5px 4px,7.5px 3px,8.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6);background-position:8.5px 12px,7.5px 11px,6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,4.5px 6px,5.5px 5px,6.5px 4px,7.5px 3px,8.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e);background-position:8.5px 12px,7.5px 11px,6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,4.5px 6px,5.5px 5px,6.5px 4px,7.5px 3px,8.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f);background-position:4.5px 12px,5.5px 11px,6.5px 10px,7.5px 9px,8.5px 8px,9.5px 7px,8.5px 6px,7.5px 5px,6.5px 4px,5.5px 3px,4.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6);background-position:4.5px 12px,5.5px 11px,6.5px 10px,7.5px 9px,8.5px 8px,9.5px 7px,8.5px 6px,7.5px 5px,6.5px 4px,5.5px 3px,4.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e);background-position:4.5px 12px,5.5px 11px,6.5px 10px,7.5px 9px,8.5px 8px,9.5px 7px,8.5px 6px,7.5px 5px,6.5px 4px,5.5px 3px,4.5px 2px}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'checkbox-list', styles: ':host{display:block;scrollbar-face-color:#3e444f;scrollbar-shadow-color:#3e444f;scrollbar-highlight-color:#3e444f;scrollbar-arrow-color:#3e444f;scrollbar-track-color:#21242a;scrollbar-3dlight-color:#21242a;scrollbar-darkshadow-color:#21242a;scrollbar-color:#3e444f #21242a}:host .hidden{display:none}:host .select-btn{margin-top:0;margin-bottom:4px}:host #container{border:1px solid #3e444f;overflow-y:auto;min-height:48px;flex-grow:1}:host .item-container{display:flex;width:100%;align-items:center}:host .item-label{margin-left:7px;min-width:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .root{display:flex;flex-flow:column;overflow:hidden}::-webkit-scrollbar{width:15px;height:15px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #21242a;height:15px;width:15px;display:block}::-webkit-scrollbar-thumb{background:#3e444f;border-radius:8px;border:2px solid #21242a}::-webkit-scrollbar-thumb:hover{background:#b7bcc6}::-webkit-scrollbar-thumb:active{background:#707a8e}::-webkit-scrollbar-track{background:#21242a}::-webkit-scrollbar-corner{background:#21242a}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f);background-position:12px 8.5px,11px 7.5px,10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 4.5px,5px 5.5px,4px 6.5px,3px 7.5px,2px 8.5px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6);background-position:12px 8.5px,11px 7.5px,10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 4.5px,5px 5.5px,4px 6.5px,3px 7.5px,2px 8.5px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e);background-position:12px 8.5px,11px 7.5px,10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 4.5px,5px 5.5px,4px 6.5px,3px 7.5px,2px 8.5px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f);background-position:12px 4.5px,11px 5.5px,10px 6.5px,9px 7.5px,8px 8.5px,7px 9.5px,6px 8.5px,5px 7.5px,4px 6.5px,3px 5.5px,2px 4.5px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6);background-position:12px 4.5px,11px 5.5px,10px 6.5px,9px 7.5px,8px 8.5px,7px 9.5px,6px 8.5px,5px 7.5px,4px 6.5px,3px 5.5px,2px 4.5px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e);background-position:12px 4.5px,11px 5.5px,10px 6.5px,9px 7.5px,8px 8.5px,7px 9.5px,6px 8.5px,5px 7.5px,4px 6.5px,3px 5.5px,2px 4.5px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f);background-position:8.5px 12px,7.5px 11px,6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,4.5px 6px,5.5px 5px,6.5px 4px,7.5px 3px,8.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6);background-position:8.5px 12px,7.5px 11px,6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,4.5px 6px,5.5px 5px,6.5px 4px,7.5px 3px,8.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e);background-position:8.5px 12px,7.5px 11px,6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,4.5px 6px,5.5px 5px,6.5px 4px,7.5px 3px,8.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f);background-position:4.5px 12px,5.5px 11px,6.5px 10px,7.5px 9px,8.5px 8px,9.5px 7px,8.5px 6px,7.5px 5px,6.5px 4px,5.5px 3px,4.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6);background-position:4.5px 12px,5.5px 11px,6.5px 10px,7.5px 9px,8.5px 8px,9.5px 7px,8.5px 6px,7.5px 5px,6.5px 4px,5.5px 3px,4.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e);background-position:4.5px 12px,5.5px 11px,6.5px 10px,7.5px 9px,8.5px 8px,9.5px 7px,8.5px 6px,7.5px 5px,6.5px 4px,5.5px 3px,4.5px 2px}' }}));