@ukic/web-components 2.1.0-beta.12 → 2.1.0-beta.13

package/dist/components/ic-select.js

@@ -35,14 +35,26 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.icBlur = createEvent(this, "icBlur", 7);
     this.icOptionSelect = createEvent(this, "icOptionSelect", 7);
     this.icInput = createEvent(this, "icInput", 7);
+    this.icRetryLoad = createEvent(this, "icRetryLoad", 7);
     this.inputId = `ic-select-input-${inputIds++}`;
     this.menuId = `${this.inputId}-menu`;
     this.ungroupedOptions = [];
     this.inheritedAttributes = {};
     this.hasSetDefaultValue = false;
     this.initialOptionsEmpty = false;
+    this.handleRetry = (ev) => {
+      var _a;
+      if (ev.detail.keyPressed)
+        (_a = this.searchableSelectElement) === null || _a === void 0 ? void 0 : _a.focus();
+      this.blurredBecauseButtonPressed = true;
+      this.retryButtonClick = true;
+      this.hasSetDefaultValue = true;
+      this.icRetryLoad.emit({ value: this.hiddenInputValue });
+    };
     this.emitIcChange = (value) => {
-      this.value = value;
+      if (!this.searchable) {
+        this.value = value;
+      }
       clearTimeout(this.debounceIcChange);
       this.debounceIcChange = window.setTimeout(() => {
         this.icChange.emit({ value: value });
@@ -85,11 +97,6 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.getLabelFromValue = (value) => {
       return getLabelFromValue(value, this.options);
     };
-    this.getValueFromLabel = (label) => {
-      var _a;
-      const value = (_a = this.options.find((option) => option.label === label)) === null || _a === void 0 ? void 0 : _a.value;
-      return value;
-    };
     this.getFilteredChildMenuOptions = (option) => {
       let children = option.children;
       if (this.searchable) {
@@ -113,7 +120,13 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         return;
       }
       if (this.searchable) {
-        this.searchableSelectInputValue = this.getLabelFromValue(event.detail.value);
+        this.value = event.detail.value;
+        // After editing the input, if selecting the same option as before, set the input value to label again
+        if (this.value === this.currValue) {
+          this.searchableSelectInputValue = this.getLabelFromValue(this.value);
+        }
+        this.inputValueToFilter = null;
+        this.hiddenInputValue = this.getValueFromLabel(this.searchableSelectInputValue);
       }
       this.ariaActiveDescendant = event.detail.optionId;
       this.icOptionSelect.emit({ value: event.detail.value });
@@ -150,8 +163,10 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         this.menu.options = this.filteredOptions;
       }
       else {
-        this.noOptions = null;
-        this.menu.options = this.options;
+        if (!this.hasTimedOut && !this.loading) {
+          this.noOptions = null;
+          this.menu.options = this.options;
+        }
       }
       if (event.detail !== 0 && this.isMenuEnabled()) {
         this.menu.handleClickOpen();
@@ -166,13 +181,15 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     this.handleClear = (event) => {
       event.stopPropagation();
+      this.hasTimedOut = false;
       this.noOptions = null;
       this.emitImmediateIcChange(null);
       this.icClear.emit();
       if (this.searchable) {
         this.searchableSelectElement.value = null;
         this.searchableSelectInputValue = null;
-        this.menu.options = this.options;
+        this.filteredOptions = this.options;
+        this.hiddenInputValue = null;
         this.searchableSelectElement.focus();
         if (!this.isMenuEnabled()) {
           this.setMenuChange(false);
@@ -184,7 +201,11 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     this.handleCharacterKeyDown = (key) => {
       // Only close menu when space is pressed if not being used alongside character keys to quickly select options
-      if (this.open && key === " " && this.pressedCharacters.length === 0) {
+      if (this.open &&
+        key === " " &&
+        this.pressedCharacters.length === 0 &&
+        !this.hasTimedOut &&
+        !this.loading) {
         this.setMenuChange(false);
       }
       if (key.length === 1 && !this.searchable) {
@@ -212,8 +233,10 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           this.menu.options = this.filteredOptions;
         }
         else {
-          this.noOptions = null;
-          this.menu.options = this.options;
+          if (!this.hasTimedOut) {
+            this.noOptions = null;
+            this.menu.options = this.options;
+          }
         }
       }
       if (this.open && event.key === "Enter") {
@@ -222,6 +245,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       else {
         if (!(isArrowKey && this.noOptions !== null) && this.isMenuEnabled()) {
           if (!(event.key === " " && this.pressedCharacters.length > 0)) {
+            // Keyboard events get passed onto ic-menu
             this.menu.handleKeyboardOpen(event);
           }
           this.handleCharacterKeyDown(event.key);
@@ -231,7 +255,15 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.handleClearButtonFocus = () => {
       this.clearButtonFocused = true;
     };
-    this.handleClearButtonBlur = () => {
+    this.handleClearButtonBlur = (ev) => {
+      var _a;
+      const retryButton = (_a = this.menu) === null || _a === void 0 ? void 0 : _a.querySelector("#retry-button");
+      if (!(this.searchableSelectElement &&
+        ev.relatedTarget === this.searchableSelectElement) &&
+        !(retryButton && ev.relatedTarget === retryButton)) {
+        this.setMenuChange(false);
+        this.handleFocusIndicatorDisplay();
+      }
       this.clearButtonFocused = false;
     };
     this.handleFilter = () => {
@@ -244,7 +276,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       });
       let menuOptionsFiltered;
       if (this.searchable) {
-        menuOptionsFiltered = getFilteredMenuOptions(options, this.includeDescriptionsInSearch, this.searchableSelectInputValue, this.searchMatchPosition);
+        menuOptionsFiltered = getFilteredMenuOptions(options, this.includeDescriptionsInSearch, this.inputValueToFilter, this.searchMatchPosition);
       }
       else {
         menuOptionsFiltered = getFilteredMenuOptions(options, false, this.pressedCharacters, "start");
@@ -286,15 +318,37 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         this.filteredOptions = this.noOptions;
       }
     };
+    this.triggerLoading = () => {
+      this.hasTimedOut = false;
+      this.noOptions = [{ label: this.loadingLabel, value: "", loading: true }];
+      if (this.filteredOptions !== this.noOptions && this.searchable)
+        this.filteredOptions = this.noOptions;
+      else if (!this.searchable && this.options !== this.noOptions)
+        this.options = this.noOptions;
+      if (this.timeout) {
+        this.timeoutTimer = window.setTimeout(() => {
+          this.loading = false;
+          this.hasTimedOut = true;
+          this.noOptions = [
+            { label: this.loadingErrorLabel, value: "", timedOut: true },
+          ];
+          this.filteredOptions = this.noOptions;
+          if (!this.searchable)
+            this.options = this.noOptions;
+        }, this.timeout);
+      }
+    };
+    this.getValueFromLabel = (label) => {
+      var _a;
+      const value = (_a = this.options.find((option) => option.label === label)) === null || _a === void 0 ? void 0 : _a.value;
+      return value;
+    };
     this.handleSearchableSelectInput = (event) => {
       this.searchableSelectInputValue = event.target.value;
       this.icInput.emit({ value: this.searchableSelectInputValue });
-      if (this.disableFilter) {
-        this.emitIcChange(this.searchableSelectInputValue);
-      }
-      else if (this.getValueFromLabel(this.searchableSelectInputValue) === undefined) {
-        this.emitIcChange(null);
-      }
+      this.emitIcChange(this.searchableSelectInputValue);
+      this.hiddenInputValue = this.searchableSelectInputValue;
+      this.inputValueToFilter = this.searchableSelectInputValue;
       if (this.isMenuEnabled()) {
         this.setMenuChange(true);
       }
@@ -322,20 +376,43 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.icFocus.emit();
     };
     this.onBlur = (event) => {
+      var _a;
+      const target = event.relatedTarget;
+      if (target !== null &&
+        target.tagName === "UL" &&
+        target.className.includes("menu")) {
+        return;
+      }
+      const retryButton = (_a = this.menu) === null || _a === void 0 ? void 0 : _a.querySelector("#retry-button");
       const isSearchableAndNoFocusedInternalElements = this.searchable &&
         event.relatedTarget !== this.menu &&
         !Array.from(this.menu.querySelectorAll("[role='option']")).includes(event.relatedTarget) &&
-        !(this.clearButton && event.relatedTarget === this.clearButton);
+        !(this.clearButton && event.relatedTarget === this.clearButton) &&
+        !(retryButton && event.relatedTarget === retryButton);
       if (isSearchableAndNoFocusedInternalElements) {
-        this.setMenuChange(false);
+        if (!this.retryButtonClick) {
+          this.setMenuChange(false);
+        }
         this.handleFocusIndicatorDisplay();
       }
+      this.retryButtonClick = false;
       this.icBlur.emit();
     };
+    this.onTimeoutBlur = (ev) => {
+      if (ev.detail.ev.relatedTarget !==
+        this.searchableSelectElement &&
+        !this.blurredBecauseButtonPressed) {
+        this.setMenuChange(false);
+        this.handleFocusIndicatorDisplay();
+        this.icBlur.emit();
+      }
+      this.blurredBecauseButtonPressed = false;
+    };
     this.handleFormReset = () => {
       this.value = this.initialValue;
       if (this.searchable) {
         this.searchableSelectInputValue = this.getDefaultValue(this.value);
+        this.hiddenInputValue = this.value;
       }
     };
     this.label = undefined;
@@ -361,6 +438,10 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.charactersUntilSuggestions = 0;
     this.emptyOptionListText = "No results found";
     this.disableFilter = false;
+    this.timeout = undefined;
+    this.loadingLabel = "Loading...";
+    this.loadingErrorLabel = "Loading Error";
+    this.loading = false;
     this.open = false;
     this.clearButtonFocused = false;
     this.searchableSelectInputValue = null;
@@ -372,28 +453,41 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.currValue = this.value;
     this.debounceIcChange = undefined;
     this.pressedCharacters = "";
+    this.hiddenInputValue = undefined;
+    this.inputValueToFilter = this.value;
+  }
+  loadingHandler(newValue) {
+    newValue && this.triggerLoading();
   }
   watchOptionsHandler() {
-    if (this.isExternalFiltering()) {
-      if (this.options.length > 0) {
+    if (!this.hasTimedOut) {
+      this.loading = false;
+      clearTimeout(this.timeoutTimer);
+      if (this.isExternalFiltering()) {
+        if (this.options.length > 0) {
+          this.setOptionsValuesFromLabels();
+          this.noOptions = null;
+          this.filteredOptions = this.options;
+        }
+        else if (this.isMenuEnabled()) {
+          this.noOptions = [{ label: this.emptyOptionListText, value: "" }];
+          this.filteredOptions = this.noOptions;
+        }
+        this.updateSearchableSelectResultAriaLive();
+        this.setDefaultValue();
+      }
+      else {
         this.setOptionsValuesFromLabels();
-        this.noOptions = null;
         this.filteredOptions = this.options;
+        if (this.initialOptionsEmpty) {
+          this.setDefaultValue();
+          this.initialOptionsEmpty = false;
+        }
       }
-      else if (this.isMenuEnabled()) {
-        this.noOptions = [{ label: this.emptyOptionListText, value: "" }];
-        this.filteredOptions = this.noOptions;
-      }
-      this.updateSearchableSelectResultAriaLive();
-      this.setDefaultValue();
     }
     else {
-      this.setOptionsValuesFromLabels();
-      this.filteredOptions = this.options;
-      if (this.initialOptionsEmpty) {
-        this.setDefaultValue();
-        this.initialOptionsEmpty = false;
-      }
+      if (!this.searchable)
+        this.options = this.noOptions;
     }
   }
   debounceChangedHandler(newValue) {
@@ -403,6 +497,10 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (this.value !== this.currValue) {
       this.currValue = this.value;
     }
+    if (this.searchable && !!this.currValue) {
+      this.searchableSelectInputValue =
+        this.getLabelFromValue(this.currValue) || this.currValue;
+    }
   }
   /**
    * Sets focus on the input box.
@@ -447,7 +545,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (!this.options.length) {
       this.initialOptionsEmpty = true;
     }
-    else if (!this.disableFilter) {
+    else {
       this.setDefaultValue();
     }
   }
@@ -458,13 +556,22 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   componentDidLoad() {
     onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Select");
+    if (this.loading)
+      this.triggerLoading();
+    this.hiddenInputValue = this.searchable && this.currValue;
   }
   disconnectedCallback() {
     removeFormResetListener(this.host, this.handleFormReset);
   }
   render() {
+    var _a, _b;
     const { small, disabled, fullWidth, helperText, hideLabel, label, menuId, name, options, placeholder, readonly, required, searchable, showClearButton, validationStatus, validationText, currValue, } = this;
-    renderHiddenInput(true, this.host, name, currValue, disabled);
+    const isOrHasLoaded = ((_a = (searchable ? this.filteredOptions : options)[0]) === null || _a === void 0 ? void 0 : _a.label) ===
+      this.loadingLabel ||
+      ((_b = (searchable ? this.filteredOptions : options)[0]) === null || _b === void 0 ? void 0 : _b.label) ===
+        this.loadingErrorLabel;
+    const inputValue = this.searchable ? this.hiddenInputValue : currValue;
+    renderHiddenInput(true, this.host, name, inputValue, disabled);
     const invalid = validationStatus === IcInformationStatus.Error ? "true" : "false";
     const describedBy = getInputDescribedByText(this.inputId, helperText !== "", hasValidationStatus(this.validationStatus, this.disabled)).trim();
     return (h(Host, { class: {
@@ -472,7 +579,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         searchable: searchable,
         small: small,
         "full-width": fullWidth,
-      } }, h("ic-input-container", { readonly: readonly }, !hideLabel && (h("ic-input-label", { for: this.inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly })), h("ic-input-component-container", { ref: (el) => (this.anchorEl = el), class: { "menu-open": this.open }, small: small, fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, readonly ? (h("ic-typography", null, h("p", null, this.getLabelFromValue(currValue)))) : isMobileOrTablet() ? (h("select", Object.assign({ ref: (el) => (this.nativeSelectElement = el), disabled: disabled, onChange: this.handleNativeSelectChange, required: required, id: this.inputId, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.handleNativeSelectKeyDown }, this.inheritedAttributes), h("option", { value: "", selected: true, disabled: !showClearButton }, placeholder), options.map((option) => {
+      }, onBlur: this.onBlur }, h("ic-input-container", { readonly: readonly }, !hideLabel && (h("ic-input-label", { for: this.inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly })), h("ic-input-component-container", { ref: (el) => (this.anchorEl = el), class: { "menu-open": this.open }, small: small, fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, readonly ? (h("ic-typography", null, h("p", null, this.getLabelFromValue(currValue)))) : isMobileOrTablet() ? (h("select", Object.assign({ ref: (el) => (this.nativeSelectElement = el), disabled: disabled, onChange: this.handleNativeSelectChange, required: required, id: this.inputId, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.handleNativeSelectKeyDown }, this.inheritedAttributes), h("option", { value: "", selected: true, disabled: !showClearButton }, placeholder), options.map((option) => {
       if (option.children) {
         return (h("optgroup", { label: option.label }, option.children.map((option) => (h("option", { value: option.value, disabled: option.disabled, selected: option.value === currValue }, option.label)))));
       }
@@ -498,14 +605,15 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }, innerHTML: Expand, "aria-hidden": "true" }))), currValue && showClearButton && (h("ic-button", { id: "clear-button", "aria-label": "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: small ? "small" : "default", variant: "icon", appearance: this.clearButtonFocused
         ? IcThemeForegroundEnum.Light
         : IcThemeForegroundEnum.Dark }))))), !isMobileOrTablet() && (h("ic-menu", { class: {
-        "no-results": this.noOptions !== null && this.searchable,
+        "no-results": this.noOptions !== null || isOrHasLoaded,
       }, ref: (el) => (this.menu = el), inputEl: searchable
         ? this.searchableSelectElement
-        : this.customSelectElement, inputLabel: label, anchorEl: this.anchorEl, small: small, menuId: menuId, open: this.open, options: searchable ? this.filteredOptions : options, value: currValue, fullWidth: fullWidth, onMenuStateChange: this.handleMenuChange, onMenuOptionSelect: this.handleCustomSelectChange, onMenuKeyPress: this.handleMenuKeyPress, onUngroupedOptionsSet: this.setUngroupedOptions, parentEl: this.host })), hasValidationStatus(this.validationStatus, this.disabled) && (h("ic-input-validation", { class: { "menu-open": this.open }, ariaLiveMode: "polite", status: validationStatus, message: validationText, for: this.inputId })))));
+        : this.customSelectElement, inputLabel: label, anchorEl: this.anchorEl, small: small, menuId: menuId, open: this.open, options: searchable ? this.filteredOptions : options, value: currValue, fullWidth: fullWidth, onMenuStateChange: this.handleMenuChange, onMenuOptionSelect: this.handleCustomSelectChange, onMenuKeyPress: this.handleMenuKeyPress, onUngroupedOptionsSet: this.setUngroupedOptions, onRetryButtonClicked: this.handleRetry, parentEl: this.host, onTimeoutBlur: this.onTimeoutBlur, activationType: this.searchable ? "manual" : "automatic" })), hasValidationStatus(this.validationStatus, this.disabled) && (h("ic-input-validation", { class: { "menu-open": this.open }, ariaLiveMode: "polite", status: validationStatus, message: validationText, for: this.inputId })))));
   }
   static get delegatesFocus() { return true; }
   get host() { return this; }
   static get watchers() { return {
+    "loading": ["loadingHandler"],
     "options": ["watchOptionsHandler"],
     "debounce": ["debounceChangedHandler"],
     "value": ["valueChangedHandler"]
@@ -535,6 +643,10 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "charactersUntilSuggestions": [2, "characters-until-suggestions"],
     "emptyOptionListText": [1, "empty-option-list-text"],
     "disableFilter": [4, "disable-filter"],
+    "timeout": [2],
+    "loadingLabel": [1, "loading-label"],
+    "loadingErrorLabel": [1, "loading-error-label"],
+    "loading": [1028],
     "open": [32],
     "clearButtonFocused": [32],
     "searchableSelectInputValue": [32],
@@ -546,6 +658,8 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "currValue": [32],
     "debounceIcChange": [32],
     "pressedCharacters": [32],
+    "hiddenInputValue": [32],
+    "inputValueToFilter": [32],
     "setFocus": [64]
   }]);
 function defineCustomElement$1() {