@vonage/vivid 4.19.0-preview.0 → 4.19.0

package/shared/definition44.js

@@ -1,6 +1,7 @@
 import { B as Button, c as chevronTemplateFactory, b as buttonDefinition } from './definition11.js';
 import { P as Popup, p as popupDefinition } from './definition65.js';
 import { I as Icon, i as iconDefinition } from './definition28.js';
+import { P as ProgressRing, p as progressRingDefinition } from './definition38.js';
 import { V as VividElement, O as Observable, D as DOM, a as attr, n as nullableNumberConverter, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
 import { s as scrollIntoView } from './scrollIntoView.js';
@@ -8,9 +9,8 @@ import { F as FormAssociated } from './form-associated.js';
 import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { L as Localized } from './localized.js';
 import { F as FormElementSuccessText, a as FormElementHelperText, e as errorText, f as formElements, g as getFeedbackTemplate } from './form-elements.js';
-import { a as applyMixins } from './apply-mixins.js';
 import { i as isListboxOption } from './option.js';
-import { P as ProgressRing, p as progressRingDefinition } from './definition38.js';
+import { a as applyMixins } from './apply-mixins.js';
 import { w as when } from './when.js';
 import { r as ref } from './ref.js';
 import { s as slotted } from './slotted.js';
@@ -65,7 +65,7 @@ let SearchableSelect = class extends FormAssociatedSearchableSelect {
     this.maxLines = null;
     this.values = [];
     this.initialValues = [];
-    this._internalSearchText = null;
+    this._currentSearchText = null;
     // --- Slotted options ---
     /**
      * @internal
@@ -179,29 +179,30 @@ let SearchableSelect = class extends FormAssociatedSearchableSelect {
   /**
    * @internal
    */
-  _internalSearchTextChanged(newValue, oldValue) {
-    if (oldValue !== newValue) {
-      __privateMethod(this, _SearchableSelect_instances, updateFilteredOptions_fn).call(this);
-      this.$emit("input:search-text", void 0, {
-        bubbles: false,
-        composed: false
-      });
-    }
+  _currentSearchTextChanged() {
+    __privateMethod(this, _SearchableSelect_instances, updateFilteredOptions_fn).call(this);
+    this.$emit("search-text-change", void 0, {
+      bubbles: false,
+      composed: false
+    });
   }
+  /**
+   * The current search text of the component.
+   */
   get searchText() {
-    return this._internalSearchText ?? "";
+    return this._currentSearchText ?? "";
   }
   /**
    * @internal
    */
   get _inputValue() {
-    return this._internalSearchText ?? (!this.multiple && this.value !== "" ? __privateMethod(this, _SearchableSelect_instances, textForValue_fn).call(this, this.value) : "");
+    return this._currentSearchText ?? (!this.multiple && this.value !== "" ? __privateMethod(this, _SearchableSelect_instances, textForValue_fn).call(this, this.value) ?? "" : "");
   }
   /**
    * @internal
    */
   _onInputInput(event) {
-    this._internalSearchText = event.target.value;
+    this._currentSearchText = event.target.value;
   }
   /**
    * @internal
@@ -215,7 +216,7 @@ let SearchableSelect = class extends FormAssociatedSearchableSelect {
    */
   _onInputBlur(_) {
     this.open = false;
-    this._internalSearchText = null;
+    this._currentSearchText = null;
     this._changeDescription = "";
   }
   /**
@@ -333,6 +334,12 @@ let SearchableSelect = class extends FormAssociatedSearchableSelect {
   _tagIconSlotName(value) {
     return `_tag-icon-${this.values.indexOf(value)}`;
   }
+  /**
+   * @internal
+   */
+  optionFilterChanged() {
+    __privateMethod(this, _SearchableSelect_instances, updateFilteredOptions_fn).call(this);
+  }
   // --- Tags ---
   /**
    * @internal
@@ -492,9 +499,6 @@ updateValuesThroughUserInteraction_fn = function(newValues) {
 updateValuesWhileMaintainingOrder_fn = function(newValues) {
   const oldSet = new Set(this.values);
   const newSet = new Set(newValues);
-  if (oldSet.size === newSet.size && [...oldSet].every((v) => newSet.has(v))) {
-    return;
-  }
   this.values = [...this.values].filter((v) => newSet.has(v)).concat([...newValues].filter((v) => !oldSet.has(v)));
 };
 isValidValue_fn = function(value) {
@@ -531,7 +535,7 @@ handleOptionInteraction_fn = function(option) {
   this._changeDescription = isSelection ? this.locale.searchableSelect.optionSelectedMessage(option.text) : this.locale.searchableSelect.optionDeselectedMessage(option.text);
   __privateMethod(this, _SearchableSelect_instances, updateValuesThroughUserInteraction_fn).call(this, newValues);
   if (shouldClearSearchText) {
-    this._internalSearchText = null;
+    this._currentSearchText = null;
   }
 };
 _clonedTagIcons = new WeakMap();
@@ -557,17 +561,12 @@ updateClonedTagIconOfOption_fn = function(option) {
 };
 updateFilteredOptions_fn = function() {
   const newFilteredOptions = [];
-  const filterOption = this.filterOption ?? ((option, searchText) => option.text.toLowerCase().includes(searchText.toLowerCase()));
+  const optionFilter = this.optionFilter ?? ((option, searchText) => option.text.toLowerCase().includes(searchText.toLowerCase()));
   for (const option of this._slottedOptions ?? []) {
-    if (this.searchText === "") {
-      option._hidden = false;
-      option._internalHighlightText = "";
-    } else {
-      const matches = filterOption(option, this.searchText);
-      option._hidden = !matches;
-      option._internalHighlightText = matches ? this.searchText : "";
-    }
-    if (!option.hidden && !option._hidden) {
+    option._vvdSearchText = this.searchText;
+    const matches = !this.searchText || optionFilter(option, this.searchText);
+    option._isNotMatching = !matches;
+    if (!option.hidden && matches) {
       newFilteredOptions.push(option);
     }
   }
@@ -628,10 +627,7 @@ highlightNextOption_fn = function() {
   __privateMethod(this, _SearchableSelect_instances, transitionHighlightedOptionTo_fn).call(this, (this._highlightedOptionIndex ?? -1) + 1);
 };
 textForValue_fn = function(value) {
-  const option = this._slottedOptions.find(
-    (option2) => option2.value === value
-  );
-  return option.text;
+  return this._slottedOptions?.find((option) => option.value === value)?.text;
 };
 /**
  * @internal
@@ -799,19 +795,19 @@ __decorateClass$1([
 ], SearchableSelect.prototype, "_input", 2);
 __decorateClass$1([
   observable
-], SearchableSelect.prototype, "_internalSearchText", 2);
+], SearchableSelect.prototype, "_currentSearchText", 2);
 __decorateClass$1([
   observable
 ], SearchableSelect.prototype, "_slottedOptions", 2);
 __decorateClass$1([
   observable
-], SearchableSelect.prototype, "_filteredOptions", 2);
+], SearchableSelect.prototype, "optionFilter", 2);
 __decorateClass$1([
   observable
-], SearchableSelect.prototype, "_filteredEnabledOptions", 2);
+], SearchableSelect.prototype, "_filteredOptions", 2);
 __decorateClass$1([
   observable
-], SearchableSelect.prototype, "filterOption", 2);
+], SearchableSelect.prototype, "_filteredEnabledOptions", 2);
 __decorateClass$1([
   attr({
     mode: "boolean"
@@ -1082,8 +1078,8 @@ function renderControl(context) {
     html`<div class="empty-message">
 								${when(
       (x) => x.loading,
-      html` <slot name="loading-options">
-										Loading...
+      html`<slot name="loading-options">
+										${(x) => x.locale.searchableSelect.loadingOptionsMessage}
 									</slot>`
     )}
 								${when(