tom-select 1.4, css updates, hide search, customProperties

package.json

@@ -91,7 +91,7 @@
     "imask": "^6.0.7",
     "litepicker": "^2.0.11",
     "nouislider": "^14.6.3",
-    "tom-select": "^1.3.0"
+    "tom-select": "^1.4.0"
   },
   "resolutions": {
     "**/**/node-gyp": "^5.0.0"

src/pages/_includes/ui/select.html

@@ -56,7 +56,28 @@
 		var el;
 		window.TomSelect && ({% if jekyll.environment == 'development' %}window.tabler_select["select-{{ id }}"] = {% endif %}new TomSelect(el = document.getElementById('select-{{ id }}'), {
 			copyClassesToDropdown: false,
+			dropdownClass: 'dropdown-menu',
+			//dropdownContentClass: 'ts-dropdown-content',
+			optionClass:'dropdown-item',
 
+			{% unless include.show-search %}
+			controlInput: '<input>',
+			{% endunless %}
+
+			render:{
+				item: function(data,escape) {
+					if( data.customProperties ){
+						return '<div><span class="dropdown-item-indicator">' + data.customProperties + '</span>' + escape(data.text) + '</div>';
+					}
+					return '<div>' + escape(data.text) + '</div>';
+				},
+				option: function(data,escape){
+					if( data.customProperties ){
+						return '<div><span class="dropdown-item-indicator">' + data.customProperties + '</span>' + String(data.text) + '</div>';
+					}
+					return '<div>' + String(data.text) + '</div>';
+				},
+			},
 		}));
 
 	});

src/scss/vendor/_tom-select.scss

@@ -1,6 +1,10 @@
 @import "~tom-select/src/scss/tom-select.bootstrap5.scss";
 
-.ts-control.form-select{
+.ts-control{
-	border:		none !important;
+  .dropdown-menu {
-	padding:	0 !important;
+    width: 100%;
+    height: auto;
+  }
+
+
 }