@oiz/stzh-components 2.12.0-beta2 → 2.13.0-beta1

package/dist/esm/stzh-dropdown.entry.js

@@ -1609,6 +1609,7 @@ var defaults = {
   searchField: ['text'],
   searchConjunction: 'and',
   mode: null,
+  openDisplay: 'block',
   wrapperClass: 'ts-wrapper',
   controlClass: 'ts-control',
   dropdownClass: 'ts-dropdown',
@@ -1620,6 +1621,9 @@ var defaults = {
   copyClassesToDropdown: false,
   placeholder: null,
   hidePlaceholder: null,
+  transformLoadQuery: function (inputValue) {
+    return inputValue.trim();
+  },
   shouldLoad: function (query) {
     return query.length > 0;
   },
@@ -2613,7 +2617,7 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     if (self.isLocked) {
       return;
     }
-    var value = self.inputValue();
+    var value = this.settings.transformLoadQuery(this.control_input.value);
     if (self.lastValue !== value) {
       self.lastValue = value;
       if (self.settings.shouldLoad.call(self, value)) {
@@ -3187,7 +3191,7 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     const groups = {};
     const groups_order = [];
     var self = this;
-    var query = self.inputValue();
+    var query = this.settings.transformLoadQuery(this.control_input.value);
     const same_query = query === self.lastQuery || query == '' && self.lastQuery == null;
     var results = self.search(query);
     var active_option = null;
@@ -3959,12 +3963,12 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     self.refreshState();
     applyCSS(self.dropdown, {
       visibility: 'hidden',
-      display: 'block'
+      display: self.settings.openDisplay
     });
     self.positionDropdown();
     applyCSS(self.dropdown, {
       visibility: 'visible',
-      display: 'block'
+      display: self.settings.openDisplay
     });
     self.focus();
     self.trigger('dropdown_open', self.dropdown);
@@ -4930,6 +4934,9 @@ const StzhDropdown = class {
     this.stzhBlur = createEvent(this, "stzhBlur", 7);
     this.stzhInit = createEvent(this, "stzhInit", 7);
     this.focusedByInput = false;
+    this.reset = () => {
+      this.items = [];
+    };
     this.onRootFocus = () => {
       if (!this.focusedByInput) {
         this.setFocus();
@@ -4944,6 +4951,7 @@ const StzhDropdown = class {
     this.inline = false;
     this.maxOptions = null;
     this.searchConjunction = "and";
+    this.transformLoadQuery = "trim";
     this.allowEmptyOption = false;
     this.openOnFocus = true;
     this.closeAfterSelect = null;
@@ -5141,6 +5149,25 @@ const StzhDropdown = class {
       optgroupValueField: this.optgroupValueField,
       lockOptgroupOrder: this.lockOptgroupOrder,
       load: this.load,
+      transformLoadQuery: (inputValue) => {
+        if (typeof this.transformLoadQuery === "function") {
+          return this.transformLoadQuery(inputValue);
+        }
+        else if (this.transformLoadQuery === "join") {
+          const lastQueries = Array.from(this.tomSelect.controlChildren())
+            .map((element) => element.innerText);
+          return (lastQueries.length > 0
+            ? lastQueries.join(" ") + (inputValue ? " " : "")
+            : "")
+            + inputValue.replace(/\s\s+/g, ' ');
+        }
+        else if (this.transformLoadQuery === "trim-to-single-ws") {
+          return inputValue.replace(/\s\s+/g, ' ');
+        }
+        else {
+          return inputValue.trim();
+        }
+      },
       shouldLoad: (query) => {
         return query.length >= this.minCharacters;
       },
@@ -5340,11 +5367,17 @@ const StzhDropdown = class {
       this.show();
     }
   }
+  connectedCallback() {
+    var _a, _b;
+    (_b = (_a = this.element) === null || _a === void 0 ? void 0 : _a.closest('form')) === null || _b === void 0 ? void 0 : _b.addEventListener('reset', this.reset);
+  }
   disconnectedCallback() {
+    var _a, _b;
     if (this.tomSelect) {
       this.tomSelect.destroy();
       this.tomSelect = null;
     }
+    (_b = (_a = this.element) === null || _a === void 0 ? void 0 : _a.closest('form')) === null || _b === void 0 ? void 0 : _b.removeEventListener('reset', this.reset);
   }
   render() {
     var _a;