@refinitiv-ui/efx-grid 6.0.18 → 6.0.20

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

@@ -31,6 +31,11 @@ import "./checkbox-list.js";
  * @property {Function=} sortChanged Sort changed handler
 */
 
+/** @type {number}
+* @private
+* @constant
+*/
+const ITEM_LIMIT = 500;
 /** @type {Array.<Array>}
 * @private
 * @constant
@@ -126,12 +131,15 @@ class FilterDialog extends BasicElement {
 	}
 
 	static get is() {
-		return 'filter-dialog';
+		return "filter-dialog";
 	}
 
 	constructor() {
 		super();
 
+		this._updateDialogHeight = this._updateDialogHeight.bind(this);
+		this._afterDialogOpened = this._afterDialogOpened.bind(this);
+
 		this.lang = "en";
 		this._lang = "en";
 		this._translation = translation;
@@ -147,19 +155,21 @@ class FilterDialog extends BasicElement {
 		});
 		this._popup.enableUIBlocking(true);
 		this._dialogHeightTimerId = 0;
-		this._updateDialogHeight = this._updateDialogHeight.bind(this);
 		ElementObserver.addLanguageListener(this);
 	}
 
 	/**
-	 * @private
-	 * @param {Object} changedProperties
-	 */
+	* @private
+	* @param {Object} changedProperties
+	*/
 	update(changedProperties) {
 
 		if(changedProperties.has("lang")) {
 			this._lang = ElfUtil.toLangString(this.lang);
 		}
+		if(changedProperties.has("target")) {
+			this._popup.attachTo(this.target);
+		}
 
 		if(changedProperties.has("config")) {
 			var options = this.config;
@@ -182,6 +192,7 @@ class FilterDialog extends BasicElement {
 
 				if (options.target) {
 					this.target = options.target;
+					this._popup.attachTo(this.target);
 				}
 
 				if (typeof options.filterChanged === "function") {
@@ -224,9 +235,9 @@ class FilterDialog extends BasicElement {
 	}
 
 	/** A `TemplateResult` that will be used to render the updated internal template
-	 * @private
-	 * @return {*}
-	 */
+	* @private
+	* @return {*}
+	*/
 	render() {
 		var lang = this._translation[this._lang] ? this._lang : "en";
 		var t =  this._translation[lang];
@@ -294,9 +305,9 @@ class FilterDialog extends BasicElement {
 	}
 
 	/**
-	 * @private
-	 * @override
-	 */
+	* @private
+	* @override
+	*/
 	firstUpdated(changedProps) {
 		this._initialized = true;
 
@@ -356,13 +367,13 @@ class FilterDialog extends BasicElement {
 	}
 
 	/**
-	 * @private
-	 * @override
-	 */
+	* @private
+	* @override
+	*/
 	updated(changedProps) {
 		// Update Sort UI
-		var isHiddenSortUIChanged = changedProps.has('hiddenSortUI');
-		var isHiddenFilterUIChanged = changedProps.has('hiddenFilterUI');
+		var isHiddenSortUIChanged = changedProps.has("hiddenSortUI");
+		var isHiddenFilterUIChanged = changedProps.has("hiddenFilterUI");
 		if (isHiddenSortUIChanged) {
 			let pn = this._sortUI.parentNode;
 			if (this.hiddenSortUI) {
@@ -388,47 +399,56 @@ class FilterDialog extends BasicElement {
 				if (pn) {
 					pn.removeChild(this._filterUI);
 				}
-				this._dialogContent.classList.add('no-filter-ui');
+				this._dialogContent.classList.add("no-filter-ui");
 			} else {
 				if (!pn) {
 					this._dialogContent.appendChild(this._filterUI);
 				}
-				this._dialogContent.classList.remove('no-filter-ui');
+				this._dialogContent.classList.remove("no-filter-ui");
 			}
 		}
 
 		if (isHiddenSortUIChanged || isHiddenFilterUIChanged) {
 			var isHide = this.hiddenSortUI || this.hiddenFilterUI;
-			this._separator.classList.toggle('hide', isHide);
+			this._separator.classList.toggle("hide", isHide);
 		}
 
-		if (changedProps.has('isShown')) {
+		if (changedProps.has("isShown")) {
 			if (this.isShown) {
-				this._popup.attachTo(this.target, "bottom"); // This will cause popup to recalculate its position
 				this._updateUIState(); // should updateUIState everytime popup being show
-				if(this._cancelBtn){
-					var dialog = this;
-					setTimeout(function(){
-						dialog._cancelBtn.focus(); // Keep focus on cancel button when open dialog
-						dialog._updateDialogHeight();
-					}, 0); //use setTimeout to make sure everything is rendered before focus
-				}
+				this._popup.show(); // Update position
+				setTimeout(this._afterDialogOpened, 0); //use setTimeout to make sure everything is rendered before focus
+			} else { // This is to handle the case where isShown is directly modified from the dialog. We need to synchronize the states
+				this._popup.hide();
+			}
+		}
+	}
+
+	/**
+	* @private
+	*/
+	_afterDialogOpened() {
+		if(this.isShown) {
+			this._cancelBtn.focus(); // Keep focus on cancel button when open dialog
+			this._updateDialogHeight(true);
+			if(!this._firstRendered) {
+				this._firstRendered = true;
+				this._popup.show(); // Update position
 			}
-			this._popup.show(this.isShown);
 		}
 	}
 
 	/** Initialize dialog
-	 * @public
-	 * @param {FilterDialog~Config} options - initial data
-	 */
+	* @public
+	* @param {FilterDialog~Config} options - initial data
+	*/
 	init(options) {
 		this.config = options;
 	}
 
 	/** Show the dialog as a popup
-	 * @public
-	 */
+	* @public
+	*/
 	show() {
 		this._popup.appendChild(this); // To force first time initialization, focus is already included in updated()
 
@@ -436,62 +456,66 @@ class FilterDialog extends BasicElement {
 	}
 
 	/** Hide the dialog
-	 * @public
-	 */
+	* @public
+	*/
 	hide() {
 		this._popup.hide();
 	}
 
 	/**
-	 * @private
-	 */
+	* @private
+	*/
 	_onPopupShown() {
 		this.isShown = true; // To trigger update
 	}
 	/**
-	 * @private
-	 */
+	* @private
+	*/
 	_onPopupHidden() {
 		this.isShown = false; // For backward compatability
+		if (this._dialogHeightTimerId) {
+			clearTimeout(this._dialogHeightTimerId);
+			this._dialogHeightTimerId = 0;
+		}
 	}
 
 	/**
-	 * @private
-	 */
-	 _onWindowResize() {
+	* @private
+	*/
+	_onWindowResize() {
 		if(!this._dialogHeightTimerId && this.isShown){
 			this._dialogHeightTimerId = setTimeout(this._updateDialogHeight, 500);
 		}
 	}
 
 	/**
-	 * @public
-	 * @param {string} val Sorting state "d" or "a"
-	 */
+	* @public
+	* @param {string} val Sorting state "d" or "a"
+	*/
 	setSortState(val) {
 		this.sortState = (val) ? val.charAt(0).toLowerCase() : "";
 	}
 
 	/** Hide Sort UI block
-	 * @public
-	 * @param {boolean} val - value
-	 */
+	* @public
+	* @param {boolean} val - value
+	*/
 	hideSortUI(val) {
 		this.hiddenSortUI = val;
 	}
 
 	/**
-	 * @private
-	 * @param {*} e
-	 */
+	* @private
+	* @param {*} e
+	*/
 	_filterData(e) {
 		this._dataSelector.filter(e.detail.value);
 	}
 
 	/**
-	 * @private
-	 * @param {*} e
-	 */
+	* @private
+	* @param {*} e
+	*/
 	_onCondSelectorKeyDown(e) {
 		if (e.keyCode == 13) {
 			e.stopPropagation();
@@ -499,10 +523,10 @@ class FilterDialog extends BasicElement {
 	}
 
 	/**
-	 * Click on sort buttons
-	 * @private
-	 * @param {object} e - event
-	 */
+	* Click on sort buttons
+	* @private
+	* @param {object} e - event
+	*/
 	_onClickSort(e) {
 		const tgt = e.target;
 		let sortState = "n";
@@ -516,7 +540,7 @@ class FilterDialog extends BasicElement {
 		}
 		this.sortState = sortState;
 
-		this.dispatchEvent(new CustomEvent('sortChanged', {
+		this.dispatchEvent(new CustomEvent("sortChanged", {
 			detail: {
 				value: sortState
 			}
@@ -527,10 +551,10 @@ class FilterDialog extends BasicElement {
 	}
 
 	/**
-	 * Click on Filter By Value Condition buttons
-	 * @private
-	 * @param {object} e - event
-	 */
+	* Click on Filter By Value Condition buttons
+	* @private
+	* @param {object} e - event
+	*/
 	_onClickFilter(e) {
 		const tgt = e.target;
 		const children = this._filterBtns.children;
@@ -538,13 +562,13 @@ class FilterDialog extends BasicElement {
 		e.preventDefault();
 		e.stopPropagation();
 		this._updateFilterModeSelectionUI();
-		this._updateDialogHeight();
+		this._updateDialogHeight(true);
 	}
 
 	/**
-	 * @private
-	 * @param {object} e - event
-	 */
+	* @private
+	* @param {object} e - event
+	*/
 	_onDoneBtnClick(e) {
 		let context;
 		if (this._isAdvancedFilterMode()) {
@@ -626,17 +650,17 @@ class FilterDialog extends BasicElement {
 	}
 
 	/**
-	 * @private
-	 * @param {object} e - event
-	 */
+	* @private
+	* @param {object} e - event
+	*/
 	_onCancelBtnClick(e) {
-		this.dispatchEvent(new CustomEvent('cancel'));
+		this.dispatchEvent(new CustomEvent("cancel"));
 		this.hide();
 	}
 
 	/**
-	 * @private
-	 */
+	* @private
+	*/
 	_clearAdvanceFilterUI() {
 		var defaultVal = "";
 		var dateTimeType = toDateTimeType(this.fieldDataType);
@@ -662,8 +686,8 @@ class FilterDialog extends BasicElement {
 		}
 	}
 	/**
-	 * @private
-	 */
+	* @private
+	*/
 	_updateGeneralComboBoxes() {
 		if(this._initialized) {
 			var filterItems;
@@ -683,10 +707,10 @@ class FilterDialog extends BasicElement {
 	}
 
 	/**
-	 * Filter is Advanced (By Condition) or Custom (By Value)
-	 * @private
-	 * @return {boolean}
-	 */
+	* Filter is Advanced (By Condition) or Custom (By Value)
+	* @private
+	* @return {boolean}
+	*/
 	_isAdvancedFilterMode() {
 		const ch = this.filterMode ? this.filterMode.charAt(0).toLowerCase() : "";
 		// a - Advanced Filter by Condition; c - Custom Filter by Value
@@ -694,10 +718,10 @@ class FilterDialog extends BasicElement {
 	}
 
 	/**
-	 * @private
-	 * @param {Element} elem ef-combo-box element
-	 * @param {string} defaultVal=""
-	 */
+	* @private
+	* @param {Element} elem ef-combo-box element
+	* @param {string} defaultVal=""
+	*/
 	_clearValue(elem, defaultVal) {
 		if(elem.clearSelection) { // clearSelection is deprecated in ELF v4
 			elem.clearSelection();
@@ -706,34 +730,34 @@ class FilterDialog extends BasicElement {
 			// So wee need to remove free-text and re-set again
 			// to track bug https://jira.refinitiv.com/browse/ELF-1694
 			// TODO:: need to remove WORKAROUND after ELF-1694 fixed
-			var hasFreeTextMode = elem.getAttribute('free-text') != null;
+			var hasFreeTextMode = elem.getAttribute("free-text") != null;
 			if (hasFreeTextMode) {
-				elem.removeAttribute('free-text');
+				elem.removeAttribute("free-text");
 			}
 
 			elem.value = defaultVal || "";
 
 			if (hasFreeTextMode) {
-				elem.setAttribute('free-text', '');
+				elem.setAttribute("free-text", "");
 			}
 		}
 	}
 
 	/** to prepare and sync state from config into all UI
-	 * @private
-	 */
+	* @private
+	*/
 	_updateUIState() {
 		this._updateFilterModeSelectionUI();
 		this._dataFilter.value = "";
-		this._dataSelector.filter('');
+		this._dataSelector.filter("");
 		this._updateValueSelector();
 		this._updateAdvanceFilterUI();
 		this._updateSortButtonUI();
 	}
 
 	/**
-	 * @private
-	 */
+	* @private
+	*/
 	_updateAdvanceFilterUI() {
 		// Reset Advance Filter UIs
 		this._clearAdvanceFilterUI();
@@ -784,9 +808,14 @@ class FilterDialog extends BasicElement {
 		}
 	}
 	/**
-	 * @private
-	 */
-	 _updateDialogHeight() {
+	* @private
+	* @param {boolean=} afterOpened
+	*/
+	_updateDialogHeight(afterOpened) {
+		if(!afterOpened) {
+			this._dialogHeightTimerId = 0;
+		}
+
 		this._rootContainer.classList.remove("compact");
 		this._rootContainer.style.height = "";
 
@@ -810,34 +839,36 @@ class FilterDialog extends BasicElement {
 				this._rootContainer.classList.add("compact");
 			}
 		}
-
-		if(this._dialogHeightTimerId){
-			this._dialogHeightTimerId = 0;
-		}
 	}
 	/**
-	 * @private
-	 */
+	* @private
+	*/
 	_updateValueSelector() {
-		this._dataSelector.data = this.data; // Preserve original referencing
-
-		let data = this.data || [];
-		let items = null;
+		let data = this.data;
+		let ary = null;
 		if (Array.isArray(data)) {
-			items = data;
+			ary = data;
+		} else if(data) {
+			ary = Object.keys(data); // TODO: Obsolete this
 		} else {
-			items = Object.keys(data); // TODO: Obsolete this
+			ary = [];
 		}
 
+		// Data selector can take large number of items
+		this._dataSelector.data = ary; // Preserve original referencing
+
 		// Value selector for Filter by Condition
-		this._generalComboBoxes[1].data = items.map(this._toComboBoxItem);
-		this._generalComboBoxes[3].data = items.map(this._toComboBoxItem);
+		if(ary.length > ITEM_LIMIT) {
+			ary = ary.slice(0, ITEM_LIMIT); // Prevent combo box from over population
+		}
+		this._generalComboBoxes[1].data = ary.map(this._toComboBoxItem);
+		this._generalComboBoxes[3].data = ary.map(this._toComboBoxItem);
 	}
 	/**
-	 * @private
-	 * @param {*} obj
-	 * @returns {Object}
-	 */
+	* @private
+	* @param {*} obj
+	* @returns {Object}
+	*/
 	_toComboBoxItem(obj) {
 		let itemVal = (typeof obj === "string") ? obj : obj.title || "";
 		return {
@@ -847,11 +878,11 @@ class FilterDialog extends BasicElement {
 	}
 
 	/**
-	 * Return date string in format yyyy-MM-dd
-	 * @private
-	 * @param {Object|string} date
-	 * @return {string}
-	 */
+	* Return date string in format yyyy-MM-dd
+	* @private
+	* @param {Object|string} date
+	* @return {string}
+	*/
 	_getDateString(date) {
 		var dateString = "";
 		var dateFormat = "yyyy-MM-dd";
@@ -864,12 +895,12 @@ class FilterDialog extends BasicElement {
 	}
 
 	/**
-	 * Return date object
-	 * @private
-	 * @param {string} dateString // Date string in UTC format yyyy-MM-dd
-	 * @return {Date}
-	 */
-	 _getDateObject(dateString) {
+	* Return date object
+	* @private
+	* @param {string} dateString // Date string in UTC format yyyy-MM-dd
+	* @return {Date}
+	*/
+	_getDateObject(dateString) {
 		var date = new Date(dateString);
 		if(date && this.useUTCTime == false){
 			date.setTime(date.getTime() + (date.getTimezoneOffset() * 60000)); // convert to local time
@@ -878,19 +909,19 @@ class FilterDialog extends BasicElement {
 	}
 
 	/**
-	 * @private
-	 * @return {Object}
-	 */
+	* @private
+	* @return {Object}
+	*/
 	_getTranslation() {
-		var lang = this._translation[this._lang] ? this._lang : 'en';
+		var lang = this._translation[this._lang] ? this._lang : "en";
 		return this._translation[lang];
 	}
 
 	/**
-	 * @private
-	 * @param {Array} filters
-	 * @return {Array}
-	 */
+	* @private
+	* @param {Array} filters
+	* @return {Array}
+	*/
 	_translateFilters(filters) {
 		let trans = this._getTranslation();
 		var len = filters.length;
@@ -904,9 +935,9 @@ class FilterDialog extends BasicElement {
 	}
 
 	/**
-	 * Set filter Visibilities of layout
-	 * @private
-	 */
+	* Set filter Visibilities of layout
+	* @private
+	*/
 	_updateFilterModeSelectionUI() {
 		// Filter By Value - Condition buttons
 		const children = this._filterBtns.children;
@@ -923,9 +954,9 @@ class FilterDialog extends BasicElement {
 	}
 
 	/**
-	 * to update state of sort button
-	 * @private
-	 */
+	* to update state of sort button
+	* @private
+	*/
 	_updateSortButtonUI() {
 		const sortState = this.sortState;
 		const children = this._sortBtns.children;
@@ -934,7 +965,7 @@ class FilterDialog extends BasicElement {
 	}
 }
 
-customElement('filter-dialog')(FilterDialog);
+customElement("filter-dialog")(FilterDialog);
 
 export { FilterDialog };
 export default FilterDialog;

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

@@ -1,4 +1,4 @@
 import "./imports/native-elements.js";
 
 
-elf.customStyles.define('checkbox-list', ':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: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}' }}));