wcs-core 4.2.0 → 5.0.0

package/dist/collection/components/select/select.js

@@ -1,12 +1,14 @@
 import { h, Host } from '@stencil/core';
 import { interpret, Machine } from 'xstate';
-import { isWcsSelectSize, WcsSelectSizeValue } from './select-interface';
+import { isWcsSelectSize, WcsDefaultSelectFilterFn, WcsSelectSizeValue } from './select-interface';
 import { SelectArrow } from './select-arrow';
-import { isDownArrowKey, isElement, isEnterKey, isEscapeKey, isHomeKey, isLeftArrowKey, isPageDownKey, isPageUpKey, isRightArrowKey, isTabKey, isUpArrowKey, generateUniqueId, findItemLabel, isSpaceKey, } from '../../utils/helpers';
+import { isElement, generateUniqueId, findItemLabel } from '../../utils/helpers';
 import { SelectChips } from './select-chips';
 import { MDCRipple } from '@material/ripple';
 import { createPopper } from '@popperjs/core';
 import { isEqual } from 'lodash-es';
+import { getActionForKeyboardEvent } from './select-keyboard-event';
+import { isFocusable } from '../../utils/accessibility';
 const SELECT_MACHINE_CONFIG = {
   key: 'select',
   initial: 'closed',
@@ -30,12 +32,11 @@ const SELECT_MACHINE_CONFIG = {
   }
 };
 /**
- * Select component, use in conjuction with wcs-select-option.
+ * The select component (also named combobox) is a form component that allows users to select one or more options
+ * from a list.
+ * Use it with several slotted `wcs-select-option` inside.
  *
- * @example ```hmtl
- *  <wcs-select>
- *      <wcs-select-option value="1">One</wcs-select-option>
- *  </wcs-select>```
+ * @slot filter-no-result Contains the customizable "No result found" div (autocomplete mode only).
  */
 export class Select {
   constructor() {
@@ -43,16 +44,19 @@ export class Select {
     this.optionsId = generateUniqueId("OPTIONS");
     this.expanded = false;
     this.size = 'm';
-    this.hasLoaded = false;
     this.displayText = undefined;
     this.focused = undefined;
     this.value = undefined;
     this.placeholder = undefined;
     this.disabled = false;
     this.multiple = false;
+    this.autocomplete = false;
+    this.filterFn = undefined;
     this.chips = false;
     this.name = undefined;
     this.compareWith = (optionValue, selectedValue) => isEqual(optionValue, selectedValue);
+    this.showNoResultFoundLabel = false;
+    this.autocompleteValue = undefined;
     this.overlayDirection = 'bottom';
   }
   /** Open the component. */
@@ -65,7 +69,6 @@ export class Select {
   }
   onValueChangeHandler(newValue) {
     this.updateSelectedValue(newValue);
-    this.emitChange(this.value);
   }
   updateSelectedValue(value) {
     // If no value is passed, the select is reset.
@@ -102,6 +105,9 @@ export class Select {
         const isSelected = this.compareWith(opt.value, value);
         if (isSelected) {
           this.displayText = opt.innerText;
+          if (this.autocomplete) {
+            this.autocompleteValue = opt.innerText;
+          }
         }
         opt.selected = isSelected;
       });
@@ -114,6 +120,9 @@ export class Select {
   reset() {
     this.values = [];
     this.displayText = undefined;
+    if (this.autocomplete) {
+      this.autocompleteValue = undefined;
+    }
     this.options.forEach((opt) => {
       opt.selected = false;
     });
@@ -144,8 +153,6 @@ export class Select {
     if (this.labelElement) {
       this.labelElement.id = this.selectId + "-lbl";
     }
-    // TODO: is this still usefull for anything ?
-    this.hasLoaded = true;
   }
   createPopperInstance() {
     return createPopper(this.controlEl, this.optionsEl, {
@@ -184,16 +191,24 @@ export class Select {
     });
     observer.observe(this.el, { childList: true });
   }
+  componentWillRender() {
+    if (this.multiple) {
+      this.options
+        .forEach((opt) => opt.multiple = true);
+    }
+  }
   componentWillLoad() {
     if (!isWcsSelectSize(this.size)) {
       console.error(`Invalid size value for wcs-select : "${this.size}". Must be one of "${WcsSelectSizeValue.join(', ')}"`);
       this.size = "m"; // Default fallback value
     }
   }
-  componentWillUpdate() {
-    if (this.multiple) {
-      this.options
-        .forEach((opt) => opt.multiple = true);
+  async setAriaAttribute(attr, value) {
+    if (this.autocomplete === false) {
+      this.el.setAttribute(attr, value);
+    }
+    else {
+      this.autocompleteInput.setAttribute(attr, value);
     }
   }
   get options() {
@@ -206,7 +221,7 @@ export class Select {
   }
   get notDisabledOptions() {
     var _a;
-    const opts = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('wcs-select-option:not([disabled])');
+    const opts = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('wcs-select-option:not([disabled]):not([aria-hidden])');
     if (opts && opts.length !== 0) {
       return opts;
     }
@@ -216,15 +231,25 @@ export class Select {
     return {
       actions: {
         open: () => {
-          var _a;
+          var _a, _b;
           if (!this.disabled) {
             this.expanded = true;
             this.focused = false;
+            if (this.multiple === false && this.autocomplete && this.hasValue === false) {
+              // If we open the select in single autocomplete mode, we update the autocomplete value at 
+              // the blur event so that the displayed value reflect the current select value. 
+              // Indeed, we have to tell the component to take the current filter state manually at the 
+              // opening (because the input event of the autocomplete field is not fired at this point).
+              this.handleAutocompleteValueChange((_a = this.autocompleteValue) !== null && _a !== void 0 ? _a : '');
+            }
+            this.clearHighlightOnLastHighlightedOption();
             if (this.notDisabledOptions.length > 0) {
-              this.lastFocusedOptionElement = (_a = this.lastSelectedOptionElement) !== null && _a !== void 0 ? _a : this.notDisabledOptions[0];
+              this.lastFocusedOptionElement = (_b = this.lastModifiedOptionElement) !== null && _b !== void 0 ? _b : this.notDisabledOptions[0];
               requestAnimationFrame(() => {
-                var _a;
-                (_a = this.lastFocusedOptionElement) === null || _a === void 0 ? void 0 : _a.focus();
+                var _a, _b;
+                this.autocomplete
+                  ? (_a = this.autocompleteInput) === null || _a === void 0 ? void 0 : _a.focus()
+                  : (_b = this.lastFocusedOptionElement) === null || _b === void 0 ? void 0 : _b.focus();
               });
             }
           }
@@ -232,12 +257,21 @@ export class Select {
         close: (_, event) => {
           var _a, _b;
           if (event.type === 'CLOSE') {
+            this.clearHighlightOnLastHighlightedOption();
             if ((_a = event.value) === null || _a === void 0 ? void 0 : _a.shouldBlur) {
-              (_b = this.el.closest("wcs-select")) === null || _b === void 0 ? void 0 : _b.focus();
               this.focused = false;
             }
             else {
-              this.el.focus();
+              if (this.autocomplete && ((_b = event.value) === null || _b === void 0 ? void 0 : _b.fromKeyboard)) {
+                // If we're in autocomplete mode, a keyboard event (e.g. escape) doesn't change the 
+                // focus (so this.el.focus() aren't called because the select was already focused)
+                // but you still have to go back to the autocomplete input.
+                this.focusAutocompleteInput();
+              }
+              else {
+                // Otherwise, we focus the select element
+                this.el.focus();
+              }
               this.focused = true;
             }
           }
@@ -245,7 +279,24 @@ export class Select {
         },
         selectOption: (_, event) => {
           if (event.type === 'OPTION_SELECTED') {
-            this.handleClickEvent(event.value);
+            if (this.multiple) {
+              this.handleOptionSelectedOnMultiple(event.value.option);
+            }
+            else {
+              this.handleOptionSelectedOnSingle(event.value.option);
+              this.stateService.send('CLOSE', { value: { fromKeyboard: event.value.fromKeyboard } });
+            }
+            if (this.autocomplete) {
+              if (this.multiple) {
+                requestAnimationFrame(() => {
+                  this.autocompleteInput.focus();
+                });
+              }
+              else {
+                this.autocompleteValue = event.value.option.displayText;
+              }
+            }
+            this.emitChange(this.value);
           }
         }
       },
@@ -254,28 +305,18 @@ export class Select {
       }
     };
   }
-  handleClickEvent(event) {
-    if (this.multiple) {
-      this.handleClickOnMultiple(event);
-    }
-    else {
-      this.handleNormalClick(event);
-    }
-  }
-  handleClickOnMultiple(event) {
+  handleOptionSelectedOnMultiple(event) {
     const index = this.values.findIndex(v => v.value === event.value);
     if (index === -1) {
       const { value, displayText, chipColor, chipBackgroundColor } = event;
       this.values.push({ value, displayText, chipColor, chipBackgroundColor });
       event.source.selected = true;
-      this.lastSelectedOptionElement = event.source;
     }
     else {
       event.source.selected = false;
       this.values.splice(index, 1);
-      if (this.lastSelectedOptionElement === event.source)
-        this.lastSelectedOptionElement = null;
     }
+    this.lastModifiedOptionElement = event.source;
     this.updateValueWithValues();
   }
   updateValueWithValues() {
@@ -284,7 +325,7 @@ export class Select {
       ? this.values.map(v => v.displayText).join(', ')
       : undefined;
   }
-  handleNormalClick(event) {
+  handleOptionSelectedOnSingle(event) {
     // Reset other options to false if they were selected.
     this.options
       .forEach(option => {
@@ -294,8 +335,7 @@ export class Select {
     event.source.selected = true;
     this.value = event.value;
     this.displayText = event.displayText;
-    this.lastSelectedOptionElement = event.source;
-    this.stateService.send('CLOSE');
+    this.lastModifiedOptionElement = event.source;
   }
   disconnectedCallback() {
     var _a;
@@ -331,107 +371,207 @@ export class Select {
     // TODO: Move this logic in the state machine
     // FIXME: Doesnt work with single + disabled option
     if (this.expanded && !clickOnCurrentSelect) {
-      this.stateService.send('CLOSE');
+      this.stateService.send({ type: 'CLOSE', value: { shouldBlur: true, fromKeyboard: false } });
     }
   }
   onKeyDown(_event) {
-    // close
-    if (this.stateService.getSnapshot().matches("closed")) {
-      if (isEnterKey(_event) || (_event.altKey && isDownArrowKey(_event)) || isSpaceKey(_event)) {
-        _event.preventDefault();
-        _event.stopPropagation();
+    const currentState = this.stateService.getSnapshot().matches("closed") ? 'closed' : 'opened';
+    let type;
+    if (this.autocomplete) {
+      type = this.multiple ? 'autocomplete_multiple' : 'autocomplete_unique';
+    }
+    else {
+      type = this.multiple ? 'multiple' : 'unique';
+    }
+    const actionsFromKeyboardEvents = getActionForKeyboardEvent(_event, currentState, type);
+    // If we have at least one associated actions, we prevent the default behavior of the event. 
+    // Except if the action is a focus move (we have to handle the preventDefault behavior ourselves in the action implementation)
+    if (actionsFromKeyboardEvents.length != 0 && actionsFromKeyboardEvents.filter(a => a.kind === 'MoveFocus').length === 0) {
+      _event.preventDefault();
+    }
+    for (const actionFromKeyboardEvent of actionsFromKeyboardEvents) {
+      this.doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent, _event);
+    }
+  }
+  doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent, event) {
+    var _a, _b;
+    switch (actionFromKeyboardEvent.kind) {
+      case "CloseSelect":
+        this.stateService.send({
+          type: 'CLOSE',
+          value: { shouldBlur: actionFromKeyboardEvent.shouldBlur, fromKeyboard: true }
+        });
+        break;
+      case "OpenSelect":
         this.stateService.send('OPEN');
-        return;
-      }
-      if (this.multiple) {
-        if (isDownArrowKey(_event)) {
-          this.stateService.send('OPEN');
-        }
-      }
-      else {
-        if (isDownArrowKey(_event) || isRightArrowKey(_event)) {
-          _event.preventDefault();
-          this.selectClosestOption("next");
+        break;
+      case "SelectOption":
+        switch (actionFromKeyboardEvent.target) {
+          case "next":
+            this.selectClosestOption('next');
+            break;
+          case "previous":
+            this.selectClosestOption('previous');
+            break;
+          case "first":
+            this.selectFirstOption();
+            break;
+          case "last":
+            this.selectLastOption();
+            break;
+          case "lastHighlighted": {
+            // We have to handle enterKey here because with autocomplete mode, a wcs-select-option
+            // is only highlighted, therefore the event is not fired
+            const indexToSelect = Array.from(this.notDisabledOptions).indexOf(this.lastHighlightedOptionElement);
+            if (indexToSelect !== -1) {
+              this.lastModifiedOptionElement = this.lastHighlightedOptionElement;
+              this.selectOption(indexToSelect, true);
+            }
+            break;
+          }
         }
-        if (isUpArrowKey(_event) || isLeftArrowKey(_event)) {
-          _event.preventDefault();
-          this.selectClosestOption("previous");
+        break;
+      case "ClearAutocompleteInput":
+        this.autocompleteValue = '';
+        break;
+      case "ClearHighlight":
+        this.clearHighlightOnLastHighlightedOption();
+        break;
+      case "HighlightOption":
+        switch (actionFromKeyboardEvent.target) {
+          case "next":
+            this.highlightClosestOption('next');
+            break;
+          case "previous":
+            this.highlightClosestOption('previous');
+            break;
+          case "first":
+            this.highlightFirstOption();
+            break;
+          case "last":
+            this.highlightLastOption();
+            break;
+          default:
+            break;
         }
-        else if (isPageDownKey(_event)) {
-          _event.preventDefault();
-          this.selectLastOption();
+        break;
+      case "FocusOption":
+        switch (actionFromKeyboardEvent.target) {
+          case "next":
+            this.focusClosestOption('next');
+            break;
+          case "previous":
+            this.focusClosestOption('previous');
+            break;
+          case "first":
+            this.focusFirstOption();
+            break;
+          case "last":
+            this.focusLastOption();
+            break;
+          case "lastFocused":
+            if (this.lastFocusedOptionElement != null) {
+              this.focusOption(Array.from(this.notDisabledOptions).indexOf(this.lastFocusedOptionElement));
+            }
+            break;
+          default:
+            break;
         }
-        else if (isPageUpKey(_event) || isHomeKey(_event)) {
-          _event.preventDefault();
-          this.selectFirstOption();
+        break;
+      case "MoveFocus":
+        switch (actionFromKeyboardEvent.target) {
+          case "previous": {
+            let elementToFocus = (_a = this.el.previousElementSibling) !== null && _a !== void 0 ? _a : this.el.parentElement;
+            while (elementToFocus) {
+              if (isFocusable(elementToFocus))
+                break;
+              elementToFocus = (_b = elementToFocus.previousElementSibling) !== null && _b !== void 0 ? _b : elementToFocus.parentElement;
+            }
+            if (elementToFocus) {
+              event.preventDefault();
+              elementToFocus.focus();
+            }
+            break;
+          }
+          default:
+            break;
         }
-      }
-    }
-    // open
-    else if (this.stateService.getSnapshot().matches("opened")) {
-      if (isEscapeKey(_event) || (_event.altKey && isUpArrowKey(_event))) {
-        this.stateService.send({ type: "CLOSE", value: { shouldBlur: false } });
-      }
-      else if (isTabKey(_event) || (_event.shiftKey && isTabKey(_event))) {
-        this.stateService.send({ type: "CLOSE", value: { shouldBlur: true } });
-      }
-      else if (isDownArrowKey(_event)) {
-        _event.preventDefault();
-        this.focusClosestOption("next");
-      }
-      else if (isUpArrowKey(_event)) {
-        _event.preventDefault();
-        this.focusClosestOption("previous");
-      }
-      else if (isPageUpKey(_event) || isHomeKey(_event)) {
-        _event.preventDefault();
-        this.focusFirstOption();
-      }
-      else if (isPageDownKey(_event)) {
-        _event.preventDefault();
-        this.focusLastOption();
-      }
+        break;
+      default:
+        throw new Error("Internal error");
     }
   }
   getClosestActiveOptionIndexForState(direction, state) {
-    let currentIndex = Array.from(this.notDisabledOptions).indexOf(state === 'focused' ? this.lastFocusedOptionElement : this.lastSelectedOptionElement);
-    if (direction === 'next' && currentIndex < this.notDisabledOptions.length - 1) {
+    let concernedOption;
+    switch (state) {
+      case 'focused':
+        concernedOption = this.lastFocusedOptionElement;
+        break;
+      case 'modified':
+        concernedOption = this.lastModifiedOptionElement;
+        break;
+      case 'highlighted':
+        concernedOption = this.lastHighlightedOptionElement;
+        break;
+      default:
+        concernedOption = null;
+    }
+    let currentIndex = Array.from(this.notDisabledOptions).indexOf(concernedOption);
+    const MIN_INDEX = 0;
+    const MAX_INDEX = this.notDisabledOptions.length - 1;
+    if (direction === 'next' && currentIndex < MAX_INDEX) {
       currentIndex++;
     }
-    else if (direction === 'previous' && currentIndex > 0) {
+    else if (direction === 'previous' && currentIndex > MIN_INDEX) {
       currentIndex--;
     }
     else {
-      return 'nothing';
+      if (!this.autocomplete)
+        return 'nothing';
+      // Used to scroll options infinitely with keyboard (autocomplete mode only)
+      if (direction === 'next' && currentIndex >= MAX_INDEX) {
+        currentIndex = 0;
+      }
+      if (direction === 'previous' && currentIndex === MIN_INDEX) {
+        currentIndex = MAX_INDEX;
+      }
     }
     return currentIndex;
   }
-  selectOption(indexToSelect) {
-    this.lastSelectedOptionElement = this.notDisabledOptions[indexToSelect];
-    this.lastSelectedOptionElement.selected = true;
+  /**
+   * Selects the non-disabled option with the index passed as a parameter.
+   * The method sends an event to the state machine (the same as when clicking on an option with the mouse)
+   * @param indexToSelect Option index within non-deactivated options list
+   * @param fromKeyboard
+   * @private
+   */
+  selectOption(indexToSelect, fromKeyboard = false) {
+    const optionToSelect = this.notDisabledOptions[indexToSelect];
+    if (!optionToSelect)
+      return;
     this.sendOptionSelectedToStateMachine({
-      source: this.lastSelectedOptionElement,
-      value: this.value,
-      displayText: this.lastSelectedOptionElement.innerText
-    });
+      source: optionToSelect,
+      value: optionToSelect.value,
+      displayText: optionToSelect.innerText
+    }, fromKeyboard);
   }
   selectClosestOption(direction) {
-    const indexToSelect = this.getClosestActiveOptionIndexForState(direction, 'selected');
+    const indexToSelect = this.getClosestActiveOptionIndexForState(direction, 'modified');
     if (indexToSelect === 'nothing')
       return;
-    this.selectOption(indexToSelect);
+    this.selectOption(indexToSelect, true);
   }
   selectFirstOption() {
     if (this.notDisabledOptions.length < 1) {
       return;
     }
-    this.selectOption(0);
+    this.selectOption(0, true);
   }
   selectLastOption() {
     if (this.notDisabledOptions.length < 1) {
       return;
     }
-    this.selectOption(this.notDisabledOptions.length - 1);
+    this.selectOption(this.notDisabledOptions.length - 1, true);
   }
   focusOption(indexToFocus) {
     var _a;
@@ -454,8 +594,8 @@ export class Select {
   selectedOptionChanged(event) {
     this.sendOptionSelectedToStateMachine(event.detail);
   }
-  sendOptionSelectedToStateMachine(event) {
-    this.stateService.send({ type: 'OPTION_SELECTED', value: event });
+  sendOptionSelectedToStateMachine(event, fromKeyboard = false) {
+    this.stateService.send({ type: 'OPTION_SELECTED', value: { option: event, fromKeyboard } });
   }
   onSlotchange() {
     this.updateSelectedValue(this.value);
@@ -468,22 +608,115 @@ export class Select {
       }
     });
   }
+  //region Autocomplete mode
+  highlightOption(indexToHighlight) {
+    this.clearHighlightOnLastHighlightedOption();
+    this.lastHighlightedOptionElement = this.notDisabledOptions[indexToHighlight];
+    if (this.lastHighlightedOptionElement) {
+      this.lastHighlightedOptionElement.highlighted = true;
+      this.autocompleteInput.setAttribute("aria-activedescendant", this.lastHighlightedOptionElement.id);
+      requestAnimationFrame(() => {
+        this.lastHighlightedOptionElement.scrollIntoView({ block: "nearest", inline: "nearest" });
+      });
+    }
+  }
+  highlightFirstOption() {
+    this.highlightOption(0);
+  }
+  highlightLastOption() {
+    this.highlightOption(this.notDisabledOptions.length - 1);
+  }
+  highlightClosestOption(direction) {
+    const indexToHighlight = this.getClosestActiveOptionIndexForState(direction, 'highlighted');
+    if (indexToHighlight === 'nothing')
+      return;
+    this.highlightOption(indexToHighlight);
+  }
+  /**
+   * This method removes the highlight that applies to the last highlighted option if any.
+   * This is used only for accessibility of autocomplete mode.
+   * @private
+   */
+  clearHighlightOnLastHighlightedOption() {
+    if (this.lastHighlightedOptionElement) {
+      this.lastHighlightedOptionElement.highlighted = false;
+      this.lastHighlightedOptionElement = null;
+    }
+  }
+  onAutocompleteInputEvent(e) {
+    var _a;
+    const filter = (_a = this.autocompleteInput.value) !== null && _a !== void 0 ? _a : '';
+    this.handleAutocompleteValueChange(filter);
+    // Avoid the inputEvent event to bubble and be emitted, we rather use wcsFilterChange in this case :
+    e.stopPropagation();
+  }
+  handleAutocompleteValueChange(filter) {
+    var _a, _b;
+    this.clearHighlightOnLastHighlightedOption();
+    const newValueIsDifferentFromLastModifiedOption = this.lastModifiedOptionElement == null || ((_a = this.lastModifiedOptionElement) === null || _a === void 0 ? void 0 : _a.textContent) !== this.autocompleteValue;
+    if (!this.expanded && newValueIsDifferentFromLastModifiedOption) {
+      this.open();
+    }
+    if (filter.length) {
+      const [matchingOptions, optionsToHide] = [[], []];
+      const filteringFunction = (_b = this.filterFn) !== null && _b !== void 0 ? _b : WcsDefaultSelectFilterFn;
+      this.options.forEach((optionEl) => (filteringFunction(optionEl, filter) ? matchingOptions : optionsToHide).push(optionEl));
+      this.showNoResultFoundLabel = matchingOptions.length === 0;
+      matchingOptions.forEach(o => {
+        o.hidden = false;
+        o.removeAttribute("aria-hidden");
+      });
+      optionsToHide.forEach(o => {
+        o.hidden = true;
+        o.setAttribute("aria-hidden", "true");
+      });
+    }
+    else {
+      this.showNoResultFoundLabel = false;
+      this.options.forEach(o => {
+        o.hidden = false;
+        o.removeAttribute("aria-hidden");
+      });
+    }
+    this.autocompleteValue = filter;
+    this.wcsFilterChange.emit({
+      value: filter,
+    });
+  }
+  onFocus() {
+    if (this.autocomplete) {
+      this.focusAutocompleteInput();
+    }
+  }
+  focusAutocompleteInput() {
+    var _a;
+    (_a = this.autocompleteInput) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  //endregion
   componentDidRender() {
     var _a;
     (_a = this.popper) === null || _a === void 0 ? void 0 : _a.update();
   }
   render() {
+    var _a;
     const ariaLabelValue = `${this.labelElement ? this.labelElement.innerText : ''} ${this.hasValue ? this.displayText : ''}`.trimEnd();
-    return (h(Host, Object.assign({ class: this.expanded ? 'expanded ' : '', overlayDirection: this.overlayDirection }, this.focusedAttributes(), { role: "combobox", "aria-haspopup": "listbox", "aria-disabled": this.disabled ? 'true' : null, "aria-expanded": this.expanded ? 'true' : 'false', "aria-controls": this.optionsId, "aria-owns": this.optionsId, "aria-multiselectable": this.multiple ? 'true' : 'false', "aria-label": ariaLabelValue }), h("div", { class: "wcs-select-control" }, h("div", { class: "wcs-select-value-container" }, this.hasValue
+    return (h(Host, Object.assign({ class: this.expanded ? 'expanded ' : '', overlayDirection: this.overlayDirection }, this.focusedAttributes(), { role: !this.autocomplete ? "combobox" : null, "aria-haspopup": !this.autocomplete ? "listbox" : null, "aria-owns": !this.autocomplete ? this.optionsId : null, "aria-controls": !this.autocomplete ? this.optionsId : null, "aria-disabled": this.disabled ? 'true' : null, "aria-expanded": this.expanded ? 'true' : 'false', "aria-multiselectable": this.multiple ? 'true' : 'false', "aria-label": ariaLabelValue }), h("div", { class: "wcs-select-control" }, h("div", { class: "wcs-select-value-container" }, this.hasValue
       ?
         (this.chips ?
           this.values.map((option) => h(SelectChips, { disabled: this.disabled, option: option, onRemove: this.removeChip.bind(this) }))
-          : h("label", { class: "wcs-select-value" }, this.displayText))
-      : h("label", { class: "wcs-select-placeholder" }, this.placeholder)), h(SelectArrow, { up: this.expanded })), h("div", { class: "wcs-select-options", id: this.optionsId, role: "listbox" }, h("slot", { name: "wcs-select-option", onSlotchange: this.onSlotchange.bind(this) }))));
+          : (!this.autocomplete || this.autocomplete && this.multiple) &&
+            h("label", { class: "wcs-select-value" }, this.displayText))
+      : !this.autocomplete && h("label", { class: "wcs-select-placeholder" }, this.placeholder), this.autocomplete && h("input", { class: "autocomplete-field", value: this.autocompleteValue, role: "combobox", "aria-haspopup": "listbox", "aria-label": ariaLabelValue, "aria-disabled": this.disabled ? 'true' : null, "aria-expanded": this.expanded ? 'true' : 'false', "aria-controls": this.optionsId, "aria-owns": this.optionsId, "aria-multiselectable": this.multiple ? 'true' : 'false', "aria-autocomplete": "list", onBlur: (e) => this.onAutocompleteFieldBlur(e), placeholder: ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) ? null : this.placeholder, onInput: (e) => this.onAutocompleteInputEvent(e), ref: el => this.autocompleteInput = el })), h(SelectArrow, { up: this.expanded })), h("div", { class: "wcs-select-options", id: this.optionsId, role: "listbox" }, h("slot", { name: "options", onSlotchange: this.onSlotchange.bind(this) }), (this.autocomplete && this.showNoResultFoundLabel) &&
+      h("div", { class: "noresult-container" }, h("slot", { name: "filter-no-result" }, h("span", null, "Aucun r\u00E9sultat"))))));
   }
   focusedAttributes() {
     return !this.disabled ? { tabIndex: 0 } : {};
   }
+  onAutocompleteFieldBlur(_e) {
+    if (this.multiple === false && this.autocomplete === true) {
+      this.autocompleteValue = this.displayText;
+    }
+  }
   static get is() { return "wcs-select"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
@@ -591,6 +824,44 @@ export class Select {
         "reflect": true,
         "defaultValue": "false"
       },
+      "autocomplete": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the select acts as an autocomplete field to filter your results."
+        },
+        "attribute": "autocomplete",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "filterFn": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "WcsSelectFilterFn",
+          "resolved": "(optionEl: HTMLWcsSelectOptionElement, filter: string) => boolean",
+          "references": {
+            "WcsSelectFilterFn": {
+              "location": "import",
+              "path": "./select-interface"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Customizable sort function to change the comparison of values. If not provided, uses the default behavior :\n`option.textContent.toLowerCase().startsWith(filter.toLowerCase())`"
+        }
+      },
       "chips": {
         "type": "boolean",
         "mutable": false,
@@ -647,9 +918,10 @@ export class Select {
   static get states() {
     return {
       "expanded": {},
-      "hasLoaded": {},
       "displayText": {},
       "focused": {},
+      "showNoResultFoundLabel": {},
+      "autocompleteValue": {},
       "overlayDirection": {}
     };
   }
@@ -704,6 +976,26 @@ export class Select {
           "resolved": "void",
           "references": {}
         }
+      }, {
+        "method": "wcsFilterChange",
+        "name": "wcsFilterChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the autocomplete filter has changed."
+        },
+        "complexType": {
+          "original": "SelectFilerChangeEventDetail",
+          "resolved": "SelectFilerChangeEventDetail",
+          "references": {
+            "SelectFilerChangeEventDetail": {
+              "location": "import",
+              "path": "./select-interface"
+            }
+          }
+        }
       }];
   }
   static get methods() {
@@ -739,6 +1031,32 @@ export class Select {
           "text": "Close the component.",
           "tags": []
         }
+      },
+      "setAriaAttribute": {
+        "complexType": {
+          "signature": "(attr: AriaAttributeName, value: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "AriaAttributeName": {
+              "location": "import",
+              "path": "../../utils/mutable-aria-attribute"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
     };
   }
@@ -774,6 +1092,12 @@ export class Select {
         "target": undefined,
         "capture": false,
         "passive": false
+      }, {
+        "name": "focus",
+        "method": "onFocus",
+        "target": undefined,
+        "capture": false,
+        "passive": false
       }];
   }
 }