@scania/tegel 0.0.1-beta.9 → 0.0.4

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

@@ -0,0 +1,578 @@
+import { h, Host, } from '@stencil/core';
+export class Dropdown {
+  constructor() {
+    this.modeVariant = undefined;
+    this.placeholder = undefined;
+    this.defaultOption = undefined;
+    this.selectedOption = undefined;
+    this.disabled = undefined;
+    this.type = 'default';
+    this.size = 'lg';
+    this.inline = false;
+    this.labelPosition = 'no-label';
+    this.label = undefined;
+    this.state = 'default';
+    this.helper = '';
+    this.openDirection = 'auto';
+    this.optionValues = [];
+    this.optionLabels = [];
+    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;
+  }
+  componentWillLoad() {
+    // If default option is set, update the default selectedLabel value
+    // this.host.children is a HTMLCollection type, cannot use forEach
+    this.listItemArray = Array.from(this.host.children);
+    this.listItemArray.map((listItem) => {
+      this.optionValues.push(listItem.value);
+      this.optionLabels.push(listItem.innerText.trim());
+    });
+    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');
+    }
+  }
+  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');
+        }
+      }
+    }
+  }
+  changeSelectedOption() {
+    if (this.selectedValuesArray.includes(this.selectedOption)) {
+      this.resetOption();
+    }
+    this.setOptionFromOutside(this.selectedOption);
+    this.host.setAttribute('selected-option', '');
+  }
+  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();
+      }
+    }
+    else {
+      this.tabbingLabelReset();
+      this.open = false;
+    }
+  }
+  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.listItemArray[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.listItemArray[this.listItemIndex].focus();
+          }
+          break;
+        case 'Tab':
+          this.open = false;
+          break;
+        case 'Escape':
+          this.open = false;
+          this.node.focus();
+          break;
+        default:
+          break;
+      }
+    }
+  }
+  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
+    }
+    else {
+      this.openUpwards = this.openDirection === 'up';
+    }
+  }
+  tabbingLabelReset() {
+    if (typeof this.textInput !== 'undefined' || this.textInput === null) {
+      if (!this.selectedLabel && this.selectedLabel.length <= 0) {
+        this.textInput.value = '';
+        this.inputSearch.emit('');
+      }
+      if (this.selectedLabel !== this.textInput.value) {
+        this.textInput.value = this.selectedLabel;
+      }
+    }
+  }
+  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 (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()];
+      }
+    }
+  }
+  handleSearch(ev) {
+    const searchTerm = ev.target.value;
+    this.inputSearch.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);
+    }
+  }
+  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 === 'error' ? '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, onInput: (event) => this.handleSearch(event), 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))));
+  }
+  static get is() { return "sdds-dropdown"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["dropdown.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["dropdown.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "modeVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary'",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set the variant of the the dropdown."
+        },
+        "attribute": "mode-variant",
+        "reflect": false
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Placeholder text for dropdown with no selectedLabel item"
+        },
+        "attribute": "placeholder",
+        "reflect": false
+      },
+      "defaultOption": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Add the value of the option as string to set it as default"
+        },
+        "attribute": "default-option",
+        "reflect": false
+      },
+      "selectedOption": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Add the value of the option as string to set it as new selected value"
+        },
+        "attribute": "selected-option",
+        "reflect": false
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to true for disabled states"
+        },
+        "attribute": "disabled",
+        "reflect": false
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'default' | 'multiselect' | 'filter'",
+          "resolved": "\"default\" | \"filter\" | \"multiselect\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "`Controls type of dropdown."
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'default'"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large'",
+          "resolved": "\"large\" | \"lg\" | \"md\" | \"medium\" | \"sm\" | \"small\"",
+          "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"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'lg'"
+      },
+      "inline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to true to make the width following the label text length"
+        },
+        "attribute": "inline",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "labelPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'no-label' | 'inside' | 'outside'",
+          "resolved": "\"inside\" | \"no-label\" | \"outside\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Controls position of label"
+        },
+        "attribute": "label-position",
+        "reflect": false,
+        "defaultValue": "'no-label'"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label text for label inside & outside"
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "state": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Support `error` state"
+        },
+        "attribute": "state",
+        "reflect": false,
+        "defaultValue": "'default'"
+      },
+      "helper": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Add helper text in the bottom of dropdown"
+        },
+        "attribute": "helper",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "openDirection": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'down' | 'up' | 'auto'",
+          "resolved": "\"auto\" | \"down\" | \"up\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Direction that the dropdown will open. By default set to auto."
+        },
+        "attribute": "open-direction",
+        "reflect": false,
+        "defaultValue": "'auto'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "optionValues": {},
+      "optionLabels": {},
+      "open": {},
+      "node": {},
+      "selectedLabel": {},
+      "selectedValue": {},
+      "selectedValuesArray": {},
+      "selectedLabelsArray": {},
+      "dropdownUniqueClass": {},
+      "openUpwards": {},
+      "dropdownMenuHeight": {},
+      "dropdownMenuSelector": {},
+      "listItemIndex": {},
+      "listItemArray": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "inputSearch",
+        "name": "inputSearch",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "resetOption": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "selectedOption",
+        "methodName": "changeSelectedOption"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "handleDocClick",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "keydown",
+        "method": "keyListener",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "selectOption",
+        "method": "selectOptionHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=dropdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  State,\n  Element,\n  Listen,\n  Host,\n  Event,\n  EventEmitter,\n  Watch,\n  Method,\n} from '@stencil/core';\n\n@Component({\n  tag: 'sdds-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true,\n})\nexport class Dropdown {\n  textInput?: HTMLInputElement;\n\n  /** Set the variant of the the dropdown. */\n  @Prop() modeVariant: 'primary' | 'secondary';\n\n  /** Placeholder text for dropdown with no selectedLabel item */\n  @Prop() placeholder: string;\n\n  /** Add the value of the option as string to set it as default */\n  @Prop() defaultOption: string;\n\n  /** Add the value of the option as string to set it as new selected value */\n  @Prop() selectedOption: string;\n\n  /** Set to true for disabled states */\n  @Prop() disabled: boolean;\n\n  /** `Controls type of dropdown. */\n  @Prop() type: 'default' | 'multiselect' | 'filter' = 'default';\n\n  /** Controls the size of dropdown. 'sm', 'md' and 'lg' correct values and 'small', 'medium' and 'large' are deprecated */\n  @Prop() size: 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large' = 'lg';\n\n  /** Set to true to make the width following the label text length */\n  @Prop() inline: boolean = false;\n\n  /** Controls position of label */\n  @Prop() labelPosition: 'no-label' | 'inside' | 'outside' = 'no-label';\n\n  /** Label text for label inside & outside */\n  @Prop() label: string;\n\n  /** Support `error` state */\n  @Prop() state: string = 'default';\n\n  /** Add helper text in the bottom of dropdown */\n  @Prop() helper: string = '';\n\n  /** Direction that the dropdown will open. By default set to auto. */\n  @Prop() openDirection: 'down' | 'up' | 'auto' = 'auto';\n\n  @State() optionValues: Array<any> = [];\n\n  @State() optionLabels: Array<any> = [];\n\n  @State() open: boolean = false;\n\n  @State() node: HTMLElement;\n\n  @State() selectedLabel: string = '';\n\n  @State() selectedValue: string = '';\n\n  @State() selectedValuesArray: Array<any> = [];\n\n  @State() selectedLabelsArray: Array<any> = [];\n\n  @State() dropdownUniqueClass: string = '';\n\n  @State() openUpwards: boolean = false;\n\n  @State() dropdownMenuHeight: number = 0;\n\n  @State() dropdownMenuSelector: HTMLElement;\n\n  @State() listItemIndex: any = -1;\n\n  @State() listItemArray: any;\n\n  @Element() host: HTMLElement;\n\n  componentWillLoad() {\n    // If default option is set, update the default selectedLabel value\n    // this.host.children is a HTMLCollection type, cannot use forEach\n    this.listItemArray = Array.from(this.host.children);\n    this.listItemArray.map((listItem) => {\n      this.optionValues.push(listItem.value);\n      this.optionLabels.push(listItem.innerText.trim());\n    });\n    this.setOptionFromOutside(this.defaultOption);\n\n    if (this.size === 'small') {\n      this.size = 'sm';\n      console.warn('size=\"small\" is deprecated, use size=\"sm\" instead');\n    }\n    if (this.size === 'medium') {\n      this.size = 'md';\n      console.warn('size=\"medium\" is deprecated, use size=\"md\" instead');\n    }\n    if (this.size === 'large') {\n      this.size = 'lg';\n      console.warn('size=\"large\" is deprecated, use size=\"lg\" instead');\n    }\n  }\n\n  setOptionFromOutside(optionValue) {\n    if (optionValue) {\n      this.deselectAll();\n      // TODO\n      // eslint-disable-next-line no-param-reassign\n      optionValue = optionValue.split(',');\n      for (let i = 0; i < this.host.children.length; i++) {\n        // Todo - specify type\n        const el: any = this.host.children[i];\n        if (optionValue.includes(el.value.trim())) {\n          this.selectedLabelsArray = [...this.selectedLabelsArray, el.textContent.trim()];\n          this.selectedValuesArray = [...this.selectedValuesArray, el.value];\n          this.selectedLabel = el.textContent;\n          this.selectedValue = el.value;\n          el.setAttribute('selectedLabel', 'true');\n          el.setAttribute('selected', 'true');\n        } else {\n          el.setAttribute('selectedLabel', 'false');\n          el.setAttribute('selected', 'false');\n        }\n      }\n    }\n  }\n\n  @Watch('selectedOption')\n  changeSelectedOption() {\n    if (this.selectedValuesArray.includes(this.selectedOption)) {\n      this.resetOption();\n    }\n    this.setOptionFromOutside(this.selectedOption);\n    this.host.setAttribute('selected-option', '');\n  }\n\n  @Listen('click', { target: 'document' })\n  handleDocClick(ev) {\n    // To stop bubble click\n    ev.stopPropagation();\n    const target = ev ? ev.composedPath()[0] : window.event.target[0];\n    if (this.node !== undefined && this.node.contains(target)) {\n      if (typeof this.textInput !== 'undefined' || this.textInput === null) {\n        this.textInput.focus();\n      }\n    } else {\n      this.tabbingLabelReset();\n      this.open = false;\n    }\n  }\n\n  @Listen('keydown')\n  keyListener(ev: KeyboardEvent) {\n    if (!this.disabled) {\n      switch (ev.key) {\n        case 'ArrowDown':\n          if (this.open) {\n            ev.preventDefault();\n            if (this.listItemIndex < this.listItemArray.length - 1) {\n              this.listItemIndex++;\n            } else {\n              this.listItemIndex = 0;\n            }\n            this.listItemArray[this.listItemIndex].focus();\n          }\n          break;\n        case 'ArrowUp':\n          if (this.open) {\n            ev.preventDefault();\n            if (this.listItemIndex > 0) {\n              this.listItemIndex--;\n            } else {\n              this.listItemIndex = this.listItemArray.length - 1;\n            }\n            this.listItemArray[this.listItemIndex].focus();\n          }\n          break;\n\n        case 'Tab':\n          this.open = false;\n          break;\n\n        case 'Escape':\n          this.open = false;\n          this.node.focus();\n          break;\n\n        default:\n          break;\n      }\n    }\n  }\n\n  handleClick() {\n    this.open = this.open === false;\n    if (this.openDirection === 'auto') {\n      this.dropdownMenuHeight = this.dropdownMenuSelector.offsetHeight;\n      const distanceToBottom = this.host.getBoundingClientRect().top;\n      const viewportHeight = window.innerHeight;\n      this.openUpwards = distanceToBottom + this.dropdownMenuHeight + 57 > viewportHeight;\n      // If summary of dropdown menu height and its distance to the bottom is more than viewport height, open menu upwards\n      // Additional 57px is added as compensation for dropdown element own input/button height\n      // It is added on handleClick due to possible dynamic injection of data when component is already rendered\n    } else {\n      this.openUpwards = this.openDirection === 'up';\n    }\n  }\n\n  tabbingLabelReset() {\n    if (typeof this.textInput !== 'undefined' || this.textInput === null) {\n      if (!this.selectedLabel && this.selectedLabel.length <= 0) {\n        this.textInput.value = '';\n        this.inputSearch.emit('');\n      }\n      if (this.selectedLabel !== this.textInput.value) {\n        this.textInput.value = this.selectedLabel;\n      }\n    }\n  }\n\n  @Listen('selectOption')\n  selectOptionHandler(event: CustomEvent<any>) {\n    this.open = this.type === 'multiselect';\n    if (this.type !== 'multiselect') {\n      this.selectedLabel = event.detail.label;\n      this.selectedValue = event.detail.value;\n      this.tabbingLabelReset();\n    } else {\n      if (this.selectedValuesArray.includes(event.detail.value)) {\n        const itemIndex = this.selectedValuesArray.indexOf(event.detail.value);\n        this.selectedValuesArray = this.selectedValuesArray.filter(\n          (_value, index) => index !== itemIndex,\n        );\n        this.selectedLabelsArray = this.selectedLabelsArray.filter(\n          (_value, index) => index !== itemIndex,\n        );\n      } else {\n        this.selectedValuesArray = [...this.selectedValuesArray, event.detail.value];\n        this.selectedLabelsArray = [...this.selectedLabelsArray, event.detail.label.trim()];\n      }\n    }\n  }\n\n  @Event({\n    eventName: 'inputSearch',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  inputSearch: EventEmitter<any>;\n\n  handleSearch(ev) {\n    const searchTerm = ev.target.value;\n    this.inputSearch.emit(searchTerm);\n    this.open = true;\n  }\n\n  deselectAll() {\n    this.selectedLabel = '';\n    this.selectedValue = '';\n    this.selectedLabelsArray = [];\n    this.selectedValuesArray = [];\n    this.listItemArray = this.listItemArray.map((optionItem) => ({\n      ...optionItem,\n      selected: false,\n    }));\n  }\n\n  @Method() async resetOption() {\n    this.deselectAll();\n    this.open = false;\n\n    if (this.defaultOption) {\n      this.setOptionFromOutside(this.defaultOption);\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={`\n        ${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}\n        ${this.open && !this.disabled ? 'sdds-dropdown--open' : ''}\n        ${this.type === 'multiselect' ? 'sdds-dropdown-multiselect' : ''}\n        ${this.inline ? 'sdds-dropdown-inline' : ''}\n        ${\n          this.selectedLabel.length > 0 || this.selectedLabel === ''\n            ? 'sdds-dropdown--selected'\n            : ''\n        }\n        ${this.state === 'error' ? 'sdds-dropdown--error' : ''}\n        ${this.openUpwards ? 'sdds-dropdown--open-upwards' : ''}\n        ${\n          this.labelPosition === 'inside' && this.selectedLabelsArray.length > 0\n            ? 'sdds-dropdown--label-inside-position'\n            : ''\n        }\n       `}\n        selected-value={this.selectedValue}\n        selected-text={this.selectedLabel}\n        multi-selected-values={JSON.stringify(this.selectedValuesArray)}\n        multi-selected-labels={JSON.stringify(this.selectedLabelsArray)}\n      >\n        <span class={`sdds-dropdown sdds-dropdown-${this.size}`}>\n          {this.labelPosition === 'outside' && this.label.length > 0 ? (\n            <span class=\"sdds-dropdown-label-outside\">{this.label}</span>\n          ) : (\n            ''\n          )}\n          <button\n            part={this.disabled ? 'dropdown-filter-disabled' : ''}\n            disabled={this.disabled}\n            tabindex={this.disabled ? '-1' : null}\n            class={`sdds-dropdown-toggle ${this.selectedValue === 'filter' ? 'is-filter' : ''} ${\n              this.selectedValue !== '' || this.selectedLabelsArray.length > 0\n                ? 'sdds-dropdown-toggle--selected'\n                : ''\n            }\n                ${\n                  this.labelPosition === 'inside' && this.selectedValue !== '' && this.size !== 'sm'\n                    ? `sdds-dropdown-toggle-label-inside-${this.size}`\n                    : `sdds-dropdown-toggle-${this.size}`\n                }`}\n            type=\"button\"\n            onClick={() => this.handleClick()}\n            ref={(node) => (this.node = node)}\n          >\n            <span class=\"sdds-dropdown-label\">\n              {this.type === 'filter' ? (\n                <input\n                  part={this.disabled ? 'dropdown-filter-disabled' : ''}\n                  disabled={this.disabled}\n                  tabindex=\"-1\"\n                  ref={(inputEl) => (this.textInput = inputEl as HTMLInputElement)}\n                  class=\"sdds-dropdown-filter\"\n                  type=\"text\"\n                  placeholder={this.placeholder}\n                  value={this.selectedLabel}\n                  onInput={(event) => this.handleSearch(event)}\n                  autoComplete=\"off\"\n                />\n              ) : (\n                <span\n                  class={{\n                    'sdds-dropdown-label-container': true,\n                    'sdds-dropdown-label-container--label-inside':\n                      this.labelPosition === 'inside' &&\n                      this.size !== 'sm' &&\n                      (this.selectedLabel.length > 0 || this.selectedLabelsArray.length > 0),\n                  }}\n                >\n                  {this.size !== 'sm' &&\n                    (this.selectedLabel.length > 0 || this.selectedLabelsArray.length > 0) &&\n                    this.labelPosition === 'inside' &&\n                    this.label.length > 0 && (\n                      <span class=\"sdds-dropdown-label-inside\">{this.label}</span>\n                    )}\n                  <span\n                    class={`sdds-dropdown-label-main ${\n                      (this.selectedLabel.length === 0 ||\n                        (this.labelPosition === 'inside' && this.label.length < 0)) &&\n                      'sdds-dropdown-placeholder'\n                    }`}\n                  >\n                    {this.selectedLabel.length > 0 &&\n                      this.type !== 'multiselect' &&\n                      this.selectedLabel}\n\n                    {this.type === 'multiselect' && (\n                      <span class=\"sdds-dropdown-multiselect-result\">\n                        {this.labelPosition !== 'inside' &&\n                          this.selectedLabelsArray.toString().length < 1 &&\n                          this.placeholder}\n                        {this.selectedLabelsArray.toString().length > 0 &&\n                          this.selectedLabelsArray.toString().split(',').join(', ')}\n                      </span>\n                    )}\n                    {!this.selectedLabel &&\n                      this.labelPosition === 'inside' &&\n                      this.size !== 'sm' &&\n                      this.label}\n\n                    {!this.selectedLabel &&\n                      this.type !== 'multiselect' &&\n                      this.labelPosition !== 'inside' &&\n                      this.placeholder}\n\n                    {!this.selectedLabel &&\n                      this.size === 'sm' &&\n                      this.labelPosition === 'inside' &&\n                      this.placeholder}\n                  </span>\n                </span>\n              )}\n            </span>\n            <svg\n              class=\"sdds-dropdown-arrow\"\n              width=\"12\"\n              height=\"7\"\n              viewBox=\"0 0 12 7\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M1 1L6 6L11 1\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.25\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </button>\n          <span\n            class=\"sdds-dropdown-menu\"\n            // Need to have reference in order to calc height and distance from bottom\n            ref={(dropdownMenu) => (this.dropdownMenuSelector = dropdownMenu)}\n          >\n            <slot />\n          </span>\n        </span>\n        <p class=\"sdds-dropdown-helper\">\n          <svg\n            class=\"sdds-dropdown-error-icon\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 32 32\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              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\"\n              fill=\"currentColor\"\n            />\n            <path\n              d=\"M14.803 14.47V10h2.376v4.47l-.352 4.295h-1.672l-.352-4.295Zm-.053 5.632h2.5v2.394h-2.5v-2.394Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n          <span>{this.helper}</span>\n        </p>\n      </Host>\n    );\n  }\n}\n"]}