@scania/tegel 0.0.71-beta → 1.0.0

package/dist/collection/components/dropdown/dropdown.js

@@ -1,254 +1,262 @@
-import { h, Host, } from '@stencil/core';
-export class Dropdown {
+import { Host, h } from "@stencil/core";
+import { appendHiddenInput, findNextFocusableItem, findPreviousFocusableItem, } from "../../utils/utils";
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For dropdown option elements.
+ */
+export class TdsDropdown {
   constructor() {
-    this.modeVariant = null;
-    this.placeholder = undefined;
-    this.defaultOption = undefined;
-    this.selectedOption = undefined;
+    this.setDefaultOption = () => {
+      this.children = Array.from(this.host.children)
+        .filter((element) => element.tagName === 'TDS-DROPDOWN-OPTION')
+        .map((element) => {
+        if (this.multiselect) {
+          this.defaultValue.split(',').forEach((value) => {
+            if (value === element.value) {
+              element.setSelected(true);
+              this.selection = this.selection
+                ? [...this.selection, { value: element.value, label: element.textContent }]
+                : [{ value: element.value, label: element.textContent }];
+            }
+          });
+        }
+        else {
+          if (this.defaultValue === element.value) {
+            element.setSelected(true);
+            this.selection = [{ value: element.value, label: element.textContent }];
+          }
+          else {
+            element.setSelected(false);
+          }
+        }
+        return element;
+      });
+    };
+    /* Returns a list of all children that are are tds-dropdown-option elements */
+    this.getChildren = () => Array.from(this.host.children).filter((element) => element.tagName === 'TDS-DROPDOWN-OPTION');
+    this.getOpenDirection = () => {
+      var _a, _b, _c, _d, _e;
+      if (this.openDirection === 'auto' || !this.openDirection) {
+        const dropdownMenuHeight = (_b = (_a = this.dropdownList) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0;
+        const distanceToBottom = (_e = (_d = (_c = this.host).getBoundingClientRect) === null || _d === void 0 ? void 0 : _d.call(_c).top) !== null && _e !== void 0 ? _e : 0;
+        const viewportHeight = window.innerHeight;
+        if (distanceToBottom + dropdownMenuHeight + 57 > viewportHeight) {
+          return 'up';
+        }
+        return 'down';
+      }
+      return this.openDirection;
+    };
+    this.getValue = () => {
+      var _a, _b;
+      if (this.filter) {
+        return (_a = this.selection) === null || _a === void 0 ? void 0 : _a.map((item) => item.label).toString();
+      }
+      return (_b = this.selection) === null || _b === void 0 ? void 0 : _b.map((item) => item.label).join(', ');
+    };
+    this.handleFilter = (event) => {
+      this.tdsInput.emit(event);
+      const query = event.target.value.toLowerCase();
+      /* Check if the query is empty, and if so, show all options */
+      if (query === '') {
+        this.children = this.children.map((element) => {
+          element.removeAttribute('hidden');
+          return element;
+        });
+        this.filterResult = null;
+        /* Hide the options that do not match the query */
+      }
+      else {
+        this.filterResult = this.children.filter((element) => {
+          if (!element.textContent.toLowerCase().includes(query.toLowerCase())) {
+            element.setAttribute('hidden', '');
+          }
+          else {
+            element.removeAttribute('hidden');
+          }
+          return !element.hasAttribute('hidden');
+        }).length;
+      }
+    };
+    this.handleFocus = (event) => {
+      this.tdsFocus.emit(event);
+    };
+    this.handleBlur = (event) => {
+      this.tdsBlur.emit(event);
+    };
+    this.handleChange = () => {
+      var _a, _b;
+      this.tdsChange.emit({
+        name: this.name,
+        value: (_b = (_a = this.selection) === null || _a === void 0 ? void 0 : _a.map((item) => item.value).toString()) !== null && _b !== void 0 ? _b : null,
+      });
+    };
+    this.name = undefined;
     this.disabled = false;
-    this.type = 'default';
-    this.size = 'lg';
-    this.inline = false;
-    this.labelPosition = 'no-label';
+    this.helper = undefined;
     this.label = undefined;
-    this.state = false;
-    this.helper = '';
+    this.labelPosition = undefined;
+    this.modeVariant = null;
     this.openDirection = 'auto';
-    this.optionValues = [];
-    this.optionLabels = [];
+    this.placeholder = undefined;
+    this.size = 'lg';
+    this.error = false;
+    this.multiselect = false;
+    this.filter = false;
+    this.noResultText = 'No result';
+    this.defaultValue = undefined;
     this.open = false;
-    this.node = undefined;
-    this.selectedLabel = '';
-    this.selectedValue = '';
-    this.selectedValuesArray = [];
-    this.selectedLabelsArray = [];
-    this.dropdownUniqueClass = '';
-    this.openUpwards = false;
-    this.dropdownMenuHeight = 0;
-    this.dropdownMenuSelector = undefined;
-    this.listItemIndex = -1;
-    this.listItemArray = undefined;
-    this.listItemObject = undefined;
+    this.selection = undefined;
+    this.filterResult = undefined;
+    this.filterFocus = undefined;
   }
-  componentWillLoad() {
-    // If default option is set, update the default selectedLabel value
-    // this.host.children is a HTMLCollection type, cannot use forEach
-    this.listItemObject = this.host.children;
-    this.listItemArray = Array.from(this.listItemObject);
-    this.listItemArray.map((listItem) => {
-      this.optionValues.push(listItem.value);
-      this.optionLabels.push(listItem.innerText.trim());
+  /** Method that resets the Dropdown, marks all children as non-selected and resets the value to null. */
+  async reset() {
+    this.children = this.getChildren().map((element) => {
+      element.setSelected(false);
+      return element;
     });
-    this.setOptionFromOutside(this.defaultOption);
-    if (this.size === 'small') {
-      this.size = 'sm';
-      console.warn('size="small" is deprecated, use size="sm" instead');
-    }
-    if (this.size === 'medium') {
-      this.size = 'md';
-      console.warn('size="medium" is deprecated, use size="md" instead');
-    }
-    if (this.size === 'large') {
-      this.size = 'lg';
-      console.warn('size="large" is deprecated, use size="lg" instead');
-    }
+    this.selection = null;
+    this.host.setAttribute('value', null);
+    this.handleChange();
   }
-  setOptionFromOutside(optionValue) {
-    if (optionValue) {
-      this.deselectAll();
-      // TODO
-      // eslint-disable-next-line no-param-reassign
-      optionValue = optionValue.split(',');
-      for (let i = 0; i < this.host.children.length; i++) {
-        // Todo - specify type
-        const el = this.host.children[i];
-        if (optionValue.includes(el.value.trim())) {
-          this.selectedLabelsArray = [...this.selectedLabelsArray, el.textContent.trim()];
-          this.selectedValuesArray = [...this.selectedValuesArray, el.value];
-          this.selectedLabel = el.textContent;
-          this.selectedValue = el.value;
-          el.setAttribute('selectedLabel', 'true');
-          el.setAttribute('selected', 'true');
-        }
-        else {
-          el.setAttribute('selectedLabel', 'false');
-          el.setAttribute('selected', 'false');
-        }
-      }
+  /** Method for setting the value of the Dropdown. */
+  async setValue(newValue, newValueLabel) {
+    if (this.multiselect) {
+      this.selection = this.selection
+        ? [...this.selection, { value: newValue, label: newValueLabel }]
+        : [{ value: newValue, label: newValueLabel }];
     }
-  }
-  changeSelectedOption() {
-    if (this.selectedValuesArray.includes(this.selectedOption)) {
-      this.resetOption();
+    else {
+      this.selection = [{ value: newValue, label: newValueLabel }];
+      this.children = this.getChildren().map((element) => {
+        if (element.value !== newValue) {
+          element.setSelected(false);
+        }
+        return element;
+      });
     }
-    this.setOptionFromOutside(this.selectedOption);
-    this.host.setAttribute('selected-option', '');
+    this.handleChange();
+    this.host.setAttribute('value', this.selection.map((selection) => selection.value).toString());
+    return this.selection;
   }
-  handleDocClick(ev) {
-    // To stop bubble click
-    ev.stopPropagation();
-    const target = ev ? ev.composedPath()[0] : window.event.target[0];
-    if (this.node !== undefined && this.node.contains(target)) {
-      if (typeof this.textInput !== 'undefined' || this.textInput === null) {
-        this.textInput.focus();
-      }
+  /** Method for removing a selected value in the Dropdown. */
+  async removeValue(oldValue) {
+    if (this.multiselect) {
+      this.children = this.getChildren().map((element) => {
+        if (element.value === oldValue) {
+          this.selection = this.selection.filter((item) => item.value !== element.value);
+          element.setSelected(false);
+        }
+        return element;
+      });
     }
     else {
-      this.tabbingLabelReset();
-      this.open = false;
+      this.reset();
     }
+    this.handleChange();
+    return this.selection;
   }
-  keyListener(ev) {
-    if (!this.disabled) {
-      switch (ev.key) {
-        case 'ArrowDown':
-          if (this.open) {
-            ev.preventDefault();
-            if (this.listItemIndex < this.listItemArray.length - 1) {
-              this.listItemIndex++;
-            }
-            else {
-              this.listItemIndex = 0;
-            }
-            this.listItemObject[this.listItemIndex].focus();
-          }
-          break;
-        case 'ArrowUp':
-          if (this.open) {
-            ev.preventDefault();
-            if (this.listItemIndex > 0) {
-              this.listItemIndex--;
-            }
-            else {
-              this.listItemIndex = this.listItemArray.length - 1;
-            }
-            this.listItemObject[this.listItemIndex].focus();
-          }
-          break;
-        case 'Tab':
-          this.open = false;
-          break;
-        case 'Escape':
-          this.open = false;
-          this.node.focus();
-          break;
-        default:
-          break;
+  /** Method for closing the Dropdown. */
+  async close() {
+    this.open = false;
+  }
+  onAnyClick(event) {
+    if (this.open) {
+      // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
+      const isClickOutside = !event.composedPath().includes(this.host);
+      if (isClickOutside) {
+        this.open = false;
       }
     }
   }
-  handleClick() {
-    this.open = this.open === false;
-    if (this.openDirection === 'auto') {
-      this.dropdownMenuHeight = this.dropdownMenuSelector.offsetHeight;
-      const distanceToBottom = this.host.getBoundingClientRect().top;
-      const viewportHeight = window.innerHeight;
-      this.openUpwards = distanceToBottom + this.dropdownMenuHeight + 57 > viewportHeight;
-      // If summary of dropdown menu height and its distance to the bottom is more than viewport height, open menu upwards
-      // Additional 57px is added as compensation for dropdown element own input/button height
-      // It is added on handleClick due to possible dynamic injection of data when component is already rendered
+  async onKeyDown(event) {
+    // Get the active element
+    const { activeElement } = document;
+    if (!activeElement) {
+      return;
     }
-    else {
-      this.openUpwards = this.openDirection === 'up';
+    if (event.key === 'ArrowDown') {
+      /* Get the index of the current focus index, if there is no
+      nextElementSibling return the index for the first child in our Dropdown.  */
+      const startingIndex = activeElement.nextElementSibling
+        ? this.children.findIndex((element) => element === activeElement.nextElementSibling)
+        : 0;
+      const elementIndex = findNextFocusableItem(this.children, startingIndex);
+      this.children[elementIndex].focus();
     }
-  }
-  tabbingLabelReset() {
-    if (typeof this.textInput !== 'undefined' || this.textInput === null) {
-      if (!this.selectedLabel && this.selectedLabel.length <= 0) {
-        this.textInput.value = '';
-        this.internalSddsSearch.emit('');
-      }
-      if (this.selectedLabel !== this.textInput.value) {
-        this.textInput.value = this.selectedLabel;
-      }
+    else if (event.key === 'ArrowUp') {
+      /* Get the index of the current focus index, if there is no
+      previousElementSibling return the index for the first last in our Dropdown.  */
+      const startingIndex = activeElement.nextElementSibling
+        ? this.children.findIndex((element) => element === activeElement.previousElementSibling)
+        : 0;
+      const elementIndex = findPreviousFocusableItem(this.children, startingIndex);
+      this.children[elementIndex].focus();
     }
-  }
-  selectOptionHandler(event) {
-    this.open = this.type === 'multiselect';
-    if (this.type !== 'multiselect') {
-      this.selectedLabel = event.detail.label;
-      this.selectedValue = event.detail.value;
-      this.tabbingLabelReset();
+    else if (event.key === 'Escape') {
+      this.open = false;
     }
-    else {
-      if (this.selectedValuesArray.includes(event.detail.value)) {
-        const itemIndex = this.selectedValuesArray.indexOf(event.detail.value);
-        this.selectedValuesArray = this.selectedValuesArray.filter((_value, index) => index !== itemIndex);
-        this.selectedLabelsArray = this.selectedLabelsArray.filter((_value, index) => index !== itemIndex);
-      }
-      else {
-        this.selectedValuesArray = [...this.selectedValuesArray, event.detail.value];
-        this.selectedLabelsArray = [...this.selectedLabelsArray, event.detail.label.trim()];
+  }
+  // If the Dropdown gets closed,
+  // this sets the value of the dropdown to the current selection labels or null if no selection is made.
+  handleOpenState() {
+    var _a, _b;
+    if (this.filter && this.multiselect) {
+      if (!this.open) {
+        this.inputElement.value = (_b = (_a = this.selection) === null || _a === void 0 ? void 0 : _a.map((item) => item.label).toString()) !== null && _b !== void 0 ? _b : null;
       }
     }
   }
-  handleSearch(ev) {
-    const searchTerm = ev.target.value;
-    this.internalSddsSearch.emit(searchTerm);
-    this.open = true;
-  }
-  deselectAll() {
-    this.selectedLabel = '';
-    this.selectedValue = '';
-    this.selectedLabelsArray = [];
-    this.selectedValuesArray = [];
-    this.listItemArray = this.listItemArray.map((optionItem) => (Object.assign(Object.assign({}, optionItem), { selected: false })));
-  }
-  async resetOption() {
-    this.deselectAll();
-    this.open = false;
-    if (this.defaultOption) {
-      this.setOptionFromOutside(this.defaultOption);
+  componentDidLoad() {
+    if (this.defaultValue) {
+      this.setDefaultOption();
     }
   }
   render() {
-    return (h(Host, { class: `
-        ${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}
-        ${this.open && !this.disabled ? 'sdds-dropdown--open' : ''}
-        ${this.type === 'multiselect' ? 'sdds-dropdown-multiselect' : ''}
-        ${this.inline ? 'sdds-dropdown-inline' : ''}
-        ${this.selectedLabel.length > 0 || this.selectedLabel === ''
-        ? 'sdds-dropdown--selected'
-        : ''}
-        ${this.state ? 'sdds-dropdown--error' : ''}
-        ${this.openUpwards ? 'sdds-dropdown--open-upwards' : ''}
-        ${this.labelPosition === 'inside' && this.selectedLabelsArray.length > 0
-        ? 'sdds-dropdown--label-inside-position'
-        : ''}
-       `, "selected-value": this.selectedValue, "selected-text": this.selectedLabel, "multi-selected-values": JSON.stringify(this.selectedValuesArray), "multi-selected-labels": JSON.stringify(this.selectedLabelsArray) }, h("span", { class: `sdds-dropdown sdds-dropdown-${this.size}` }, this.labelPosition === 'outside' && this.label.length > 0 ? (h("span", { class: "sdds-dropdown-label-outside" }, this.label)) : (''), h("button", { part: this.disabled ? 'dropdown-filter-disabled' : '', disabled: this.disabled, tabindex: this.disabled ? '-1' : null, class: `sdds-dropdown-toggle ${this.selectedValue === 'filter' ? 'is-filter' : ''} ${this.selectedValue !== '' || this.selectedLabelsArray.length > 0
-        ? 'sdds-dropdown-toggle--selected'
-        : ''}
-                ${this.labelPosition === 'inside' && this.selectedValue !== '' && this.size !== 'sm'
-        ? `sdds-dropdown-toggle-label-inside-${this.size}`
-        : `sdds-dropdown-toggle-${this.size}`}`, type: "button", onClick: () => this.handleClick(), ref: (node) => (this.node = node) }, h("span", { class: "sdds-dropdown-label" }, this.type === 'filter' ? (h("input", { part: this.disabled ? 'dropdown-filter-disabled' : '', disabled: this.disabled, tabindex: "-1", ref: (inputEl) => (this.textInput = inputEl), class: "sdds-dropdown-filter", type: "text", placeholder: this.placeholder, value: this.selectedLabel, autoComplete: "off" })) : (h("span", { class: {
-        'sdds-dropdown-label-container': true,
-        'sdds-dropdown-label-container--label-inside': this.labelPosition === 'inside' &&
-          this.size !== 'sm' &&
-          (this.selectedLabel.length > 0 || this.selectedLabelsArray.length > 0),
-      } }, this.size !== 'sm' &&
-      (this.selectedLabel.length > 0 || this.selectedLabelsArray.length > 0) &&
-      this.labelPosition === 'inside' &&
-      this.label.length > 0 && (h("span", { class: "sdds-dropdown-label-inside" }, this.label)), h("span", { class: `sdds-dropdown-label-main ${(this.selectedLabel.length === 0 ||
-        (this.labelPosition === 'inside' && this.label.length < 0)) &&
-        'sdds-dropdown-placeholder'}` }, this.selectedLabel.length > 0 &&
-      this.type !== 'multiselect' &&
-      this.selectedLabel, this.type === 'multiselect' && (h("span", { class: "sdds-dropdown-multiselect-result" }, this.labelPosition !== 'inside' &&
-      this.selectedLabelsArray.toString().length < 1 &&
-      this.placeholder, this.selectedLabelsArray.toString().length > 0 &&
-      this.selectedLabelsArray.toString().split(',').join(', '))), !this.selectedLabel &&
-      this.labelPosition === 'inside' &&
-      this.size !== 'sm' &&
-      this.label, !this.selectedLabel &&
-      this.type !== 'multiselect' &&
-      this.labelPosition !== 'inside' &&
-      this.placeholder, !this.selectedLabel &&
-      this.size === 'sm' &&
-      this.labelPosition === 'inside' &&
-      this.placeholder)))), h("svg", { class: "sdds-dropdown-arrow", width: "12", height: "7", viewBox: "0 0 12 7", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1 1L6 6L11 1", stroke: "currentColor", "stroke-width": "1.25", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("span", { class: "sdds-dropdown-menu",
-      // Need to have reference in order to calc height and distance from bottom
-      ref: (dropdownMenu) => (this.dropdownMenuSelector = dropdownMenu) }, h("slot", null))), h("p", { class: "sdds-dropdown-helper" }, h("svg", { class: "sdds-dropdown-error-icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 4C9.37 4 3.996 9.374 3.996 16.004S9.371 28.007 16 28.007c6.63 0 12.004-5.374 12.004-12.003C28.004 9.374 22.629 4 16 4ZM2 16.004c0-7.732 6.268-14 14-14s14 6.268 14 14-6.268 14-14 14-14-6.268-14-14Z", fill: "currentColor" }), h("path", { d: "M14.803 14.47V10h2.376v4.47l-.352 4.295h-1.672l-.352-4.295Zm-.053 5.632h2.5v2.394h-2.5v-2.394Z", fill: "currentColor" })), h("span", null, this.helper))));
+    var _a, _b, _c, _d;
+    appendHiddenInput(this.host, this.name, (_a = this.selection) === null || _a === void 0 ? void 0 : _a.map((item) => item.value).toString(), this.disabled);
+    return (h(Host, { role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: `filter ${this.filterFocus ? 'focus' : ''}
+            ${this.disabled ? 'disabled' : ''}` }, h("div", { class: "value-wrapper" }, this.label && this.labelPosition === 'inside' && this.placeholder && (h("div", { class: `label-inside ${this.size}` }, this.label)), this.label && this.labelPosition === 'inside' && !this.placeholder && (h("div", { class: `
+                    label-inside-as-placeholder
+                    ${this.size}
+                    ${((_b = this.selection) === null || _b === void 0 ? void 0 : _b.length) ? 'selected' : ''}
+                    ` }, this.label)), h("input", {
+      // eslint-disable-next-line no-return-assign
+      ref: (element) => (this.inputElement = element), class: `${this.labelPosition === 'inside' ? 'placeholder' : ''}`, type: "text", placeholder: this.placeholder, value: this.getValue(), disabled: this.disabled, onInput: (event) => this.handleFilter(event), onBlur: (event) => {
+        this.filterFocus = false;
+        this.handleBlur(event);
+      }, onFocus: (event) => {
+        this.open = true;
+        this.filterFocus = true;
+        this.handleFocus(event);
+      }, onKeyDown: (event) => {
+        if (event.key === 'Escape') {
+          this.open = false;
+        }
+      }
+    })), h("tds-icon", { onClick: () => {
+        this.open = !this.open;
+      }, class: `${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))) : (h("button", { onClick: () => {
+        this.open = !this.open;
+      }, onKeyDown: (event) => {
+        if (event.key === 'Escape') {
+          this.open = false;
+        }
+      }, class: `
+                ${this.selection ? 'value' : 'placeholder'}
+                ${this.open ? 'open' : 'closed'}
+                ${this.error ? 'error' : ''}
+                `, disabled: this.disabled }, h("div", { class: `value-wrapper ${this.size}` }, this.label && this.labelPosition === 'inside' && this.placeholder && (h("div", { class: `label-inside ${this.size}` }, this.label)), this.label && this.labelPosition === 'inside' && !this.placeholder && (h("div", { class: `
+                    label-inside-as-placeholder
+                    ${this.size}
+                    ${((_c = this.selection) === null || _c === void 0 ? void 0 : _c.length) ? 'selected' : ''}
+                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, ((_d = this.selection) === null || _d === void 0 ? void 0 : _d.length) ? this.getValue() : this.placeholder), h("tds-icon", { class: `${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { ref: (element) => (this.dropdownList = element), class: `dropdown-list
+            ${this.size}
+            ${this.open ? 'open' : 'closed'}
+            ${this.getOpenDirection()}
+            ${this.label && this.labelPosition === 'outside' ? 'label-outside' : ''}` }, h("slot", null), this.filterResult === 0 && (h("div", { class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { name: "error", size: "16px" }), this.helper))));
   }
-  static get is() { return "sdds-dropdown"; }
+  static get is() { return "tds-dropdown"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
@@ -262,25 +270,42 @@ export class Dropdown {
   }
   static get properties() {
     return {
-      "modeVariant": {
+      "name": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'primary' | 'secondary'",
-          "resolved": "\"primary\" | \"secondary\"",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Set the variant of the dropdown."
+          "text": "Name for the Dropdowns input element."
         },
-        "attribute": "mode-variant",
+        "attribute": "name",
+        "reflect": false
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the Dropdown in a disabled state"
+        },
+        "attribute": "disabled",
         "reflect": false,
-        "defaultValue": "null"
+        "defaultValue": "false"
       },
-      "placeholder": {
+      "helper": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -292,12 +317,12 @@ export class Dropdown {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Placeholder text for dropdown with no selectedLabel item"
+          "text": "Helper text for the Dropdown."
         },
-        "attribute": "placeholder",
+        "attribute": "helper",
         "reflect": false
       },
-      "defaultOption": {
+      "label": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -309,136 +334,136 @@ export class Dropdown {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Add the value of the option as string to set it as default"
+          "text": "Label text for the Dropdown."
         },
-        "attribute": "default-option",
+        "attribute": "label",
         "reflect": false
       },
-      "selectedOption": {
+      "labelPosition": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "'inside' | 'outside'",
+          "resolved": "\"inside\" | \"outside\"",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Add the value of the option as string to set it as new selected value"
+          "text": "Label text position"
         },
-        "attribute": "selected-option",
+        "attribute": "label-position",
         "reflect": false
       },
-      "disabled": {
-        "type": "boolean",
+      "modeVariant": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "'primary' | 'secondary'",
+          "resolved": "\"primary\" | \"secondary\"",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Set to true for disabled states"
+          "text": "Mode variant of the component, based on current mode."
         },
-        "attribute": "disabled",
+        "attribute": "mode-variant",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "null"
       },
-      "type": {
+      "openDirection": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'default' | 'multiselect' | 'filter'",
-          "resolved": "\"default\" | \"filter\" | \"multiselect\"",
+          "original": "'up' | 'down' | 'auto'",
+          "resolved": "\"auto\" | \"down\" | \"up\"",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "`Controls type of dropdown."
+          "text": "The direction the Dropdown should open, auto if not specified."
         },
-        "attribute": "type",
+        "attribute": "open-direction",
         "reflect": false,
-        "defaultValue": "'default'"
+        "defaultValue": "'auto'"
       },
-      "size": {
+      "placeholder": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large'",
-          "resolved": "\"large\" | \"lg\" | \"md\" | \"medium\" | \"sm\" | \"small\"",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Controls the size of dropdown. 'sm', 'md' and 'lg' correct values and 'small', 'medium' and 'large' are deprecated"
+          "text": "Placeholder text for the Dropdown."
         },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'lg'"
+        "attribute": "placeholder",
+        "reflect": false
       },
-      "inline": {
-        "type": "boolean",
+      "size": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "'sm' | 'md' | 'lg'",
+          "resolved": "\"lg\" | \"md\" | \"sm\"",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Set to true to make the width following the label text length"
+          "text": "The size of the Dropdown."
         },
-        "attribute": "inline",
+        "attribute": "size",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "'lg'"
       },
-      "labelPosition": {
-        "type": "string",
+      "error": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "'no-label' | 'inside' | 'outside'",
-          "resolved": "\"inside\" | \"no-label\" | \"outside\"",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Controls position of label"
+          "text": "Sets the Dropdown in an error state"
         },
-        "attribute": "label-position",
+        "attribute": "error",
         "reflect": false,
-        "defaultValue": "'no-label'"
+        "defaultValue": "false"
       },
-      "label": {
-        "type": "string",
+      "multiselect": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Label text for label inside & outside"
+          "text": "Enables multiselect in the Dropdown."
         },
-        "attribute": "label",
-        "reflect": false
+        "attribute": "multiselect",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "state": {
+      "filter": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -450,13 +475,13 @@ export class Dropdown {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Support `error` state"
+          "text": "Enables filtration in the Dropdown."
         },
-        "attribute": "state",
+        "attribute": "filter",
         "reflect": false,
         "defaultValue": "false"
       },
-      "helper": {
+      "noResultText": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -468,87 +493,205 @@ export class Dropdown {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Add helper text in the bottom of dropdown"
+          "text": "Text that is displayed if filter is used and there are no options that matches the search."
         },
-        "attribute": "helper",
+        "attribute": "no-result-text",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "'No result'"
       },
-      "openDirection": {
+      "defaultValue": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'down' | 'up' | 'auto'",
-          "resolved": "\"auto\" | \"down\" | \"up\"",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Direction that the dropdown will open. Default is auto."
+          "text": "Default value selected in the Dropdown."
         },
-        "attribute": "open-direction",
-        "reflect": false,
-        "defaultValue": "'auto'"
+        "attribute": "default-value",
+        "reflect": false
       }
     };
   }
   static get states() {
     return {
-      "optionValues": {},
-      "optionLabels": {},
       "open": {},
-      "node": {},
-      "selectedLabel": {},
-      "selectedValue": {},
-      "selectedValuesArray": {},
-      "selectedLabelsArray": {},
-      "dropdownUniqueClass": {},
-      "openUpwards": {},
-      "dropdownMenuHeight": {},
-      "dropdownMenuSelector": {},
-      "listItemIndex": {},
-      "listItemArray": {},
-      "listItemObject": {}
+      "selection": {},
+      "filterResult": {},
+      "filterFocus": {}
     };
   }
   static get events() {
     return [{
-        "method": "internalSddsSearch",
-        "name": "internalSddsSearch",
+        "method": "tdsChange",
+        "name": "tdsChange",
         "bubbles": true,
         "cancelable": false,
         "composed": true,
         "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": "Search event that is emitted to the sdds-dropdown-filter"
-            }],
-          "text": ""
+          "tags": [],
+          "text": "Change event for the Dropdown."
         },
         "complexType": {
-          "original": "any",
-          "resolved": "any",
+          "original": "{\r\n    name: string;\r\n    value: string;\r\n  }",
+          "resolved": "{ name: string; value: string; }",
           "references": {}
         }
+      }, {
+        "method": "tdsFocus",
+        "name": "tdsFocus",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Focus event for the Dropdown."
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global",
+              "id": "global::FocusEvent"
+            }
+          }
+        }
+      }, {
+        "method": "tdsBlur",
+        "name": "tdsBlur",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Blur event for the Dropdown."
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global",
+              "id": "global::FocusEvent"
+            }
+          }
+        }
+      }, {
+        "method": "tdsInput",
+        "name": "tdsInput",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Input event for the Dropdown."
+        },
+        "complexType": {
+          "original": "InputEvent",
+          "resolved": "InputEvent",
+          "references": {
+            "InputEvent": {
+              "location": "global",
+              "id": "global::InputEvent"
+            }
+          }
+        }
       }];
   }
   static get methods() {
     return {
-      "resetOption": {
+      "reset": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            },
+            "HTMLTdsDropdownOptionElement": {
+              "location": "global",
+              "id": "global::HTMLTdsDropdownOptionElement"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Method that resets the Dropdown, marks all children as non-selected and resets the value to null.",
+          "tags": []
+        }
+      },
+      "setValue": {
+        "complexType": {
+          "signature": "(newValue: string, newValueLabel: string) => Promise<{ value: string; label: string; }[]>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            },
+            "HTMLTdsDropdownOptionElement": {
+              "location": "global",
+              "id": "global::HTMLTdsDropdownOptionElement"
+            }
+          },
+          "return": "Promise<{ value: string; label: string; }[]>"
+        },
+        "docs": {
+          "text": "Method for setting the value of the Dropdown.",
+          "tags": []
+        }
+      },
+      "removeValue": {
+        "complexType": {
+          "signature": "(oldValue: string) => Promise<{ value: string; label: string; }[]>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            },
+            "HTMLTdsDropdownOptionElement": {
+              "location": "global",
+              "id": "global::HTMLTdsDropdownOptionElement"
+            }
+          },
+          "return": "Promise<{ value: string; label: string; }[]>"
+        },
+        "docs": {
+          "text": "Method for removing a selected value in the Dropdown.",
+          "tags": []
+        }
+      },
+      "close": {
         "complexType": {
           "signature": "() => Promise<void>",
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "",
+          "text": "Method for closing the Dropdown.",
           "tags": []
         }
       }
@@ -557,26 +700,20 @@ export class Dropdown {
   static get elementRef() { return "host"; }
   static get watchers() {
     return [{
-        "propName": "selectedOption",
-        "methodName": "changeSelectedOption"
+        "propName": "open",
+        "methodName": "handleOpenState"
       }];
   }
   static get listeners() {
     return [{
-        "name": "click",
-        "method": "handleDocClick",
-        "target": "document",
+        "name": "mousedown",
+        "method": "onAnyClick",
+        "target": "window",
         "capture": false,
-        "passive": false
+        "passive": true
       }, {
         "name": "keydown",
-        "method": "keyListener",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "internalSddsSelect",
-        "method": "selectOptionHandler",
+        "method": "onKeyDown",
         "target": undefined,
         "capture": false,
         "passive": false