@scania/tegel 0.0.52 → 0.0.71-beta

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

@@ -0,0 +1,726 @@
+import { Host, h } from '@stencil/core';
+import { appendChildElement, appendHiddenInput, findNextFocusableItem, findPreviousFocusableItem, } from '../../utils/utils';
+export class SddsDropdownV2 {
+  constructor() {
+    this.connectedCallback = () => {
+      if (!this.options) {
+        this.children = Array.from(this.host.children);
+      }
+    };
+    this.setDefaultOption = () => {
+      this.children = this.children.map((element) => {
+        if (this.multiselect) {
+          this.defaultValue.split(',').forEach((defaultValue) => {
+            if (defaultValue === 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) {
+            this.reset();
+            element.setSelected(true);
+            this.selection = [{ value: element.value, label: element.textContent }];
+          }
+        }
+        return element;
+      });
+      this.handleChange();
+    };
+    this.getOpenDirection = () => {
+      const dropdownMenuHeight = this.dropdownList.offsetHeight;
+      const distanceToBottom = this.host.getBoundingClientRect().top;
+      const viewportHeight = window.innerHeight;
+      if (distanceToBottom + dropdownMenuHeight + 57 > viewportHeight) {
+        this.openDirection = 'up';
+      }
+      else {
+        this.openDirection = 'down';
+      }
+    };
+    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.sddsInput.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 does 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.sddsFocus.emit(event);
+    };
+    this.handleBlur = (event) => {
+      this.sddsBlur.emit(event);
+    };
+    this.handleChange = () => {
+      var _a, _b;
+      this.sddsChange.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.helper = undefined;
+    this.label = undefined;
+    this.labelPosition = undefined;
+    this.modeVariant = null;
+    this.openDirection = 'auto';
+    this.placeholder = undefined;
+    this.size = 'lg';
+    this.error = false;
+    this.multiselect = false;
+    this.filter = false;
+    this.noResultText = 'No result';
+    this.defaultValue = undefined;
+    this.options = undefined;
+    this.open = false;
+    this.selection = undefined;
+    this.filterResult = undefined;
+    this.filterFocus = undefined;
+  }
+  /** Method that resets the dropdown. */
+  async reset() {
+    this.children.forEach((element) => element.setSelected(false));
+    this.selection = null;
+    this.handleChange();
+  }
+  /** 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 }];
+    }
+    else {
+      this.selection = [{ value: newValue, label: newValueLabel }];
+      this.children = this.children.map((element) => {
+        if (element.value !== newValue) {
+          element.setSelected(false);
+        }
+        return element;
+      });
+    }
+    this.handleChange();
+    return this.selection;
+  }
+  /** Method for removing a selected value in the dropdown. */
+  async removeValue(oldValue) {
+    if (this.multiselect) {
+      this.children.forEach((element) => {
+        if (element.value === oldValue) {
+          this.selection = this.selection.filter((item) => item.value !== element.value);
+          element.setSelected(false);
+        }
+      });
+    }
+    else {
+      this.reset();
+    }
+    this.handleChange();
+    return this.selection;
+  }
+  /** 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;
+      }
+    }
+  }
+  async onKeyDown(event) {
+    // Get the active element
+    const { activeElement } = document;
+    if (!activeElement) {
+      return;
+    }
+    if (event.key === 'ArrowDown') {
+      /* Get the index of the currently 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();
+    }
+    else if (event.key === 'ArrowUp') {
+      /* Get the index of the currently 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();
+    }
+    else if (event.key === 'Escape') {
+      this.open = false;
+    }
+  }
+  // If the dropdown gets closed this sets the value of the drodpown 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;
+      }
+    }
+  }
+  componentDidLoad() {
+    if (this.defaultValue) {
+      this.setDefaultOption();
+    }
+    if (this.openDirection === 'auto') {
+      this.getOpenDirection();
+    }
+  }
+  render() {
+    var _a, _b, _c, _d;
+    if (this.options) {
+      let id = 0;
+      this.options.forEach((option) => {
+        appendChildElement(this.host, 'sdds-dropdown-option-v2', [
+          { key: 'value', value: option.value },
+          { key: 'disabled', value: option.disabled.toString() },
+        ], option.label, `id${id++}`);
+      });
+      this.children = Array.from(this.host.children).filter((element) => element.tagName === 'SDDS-DROPDOWN-OPTION-V2');
+    }
+    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 ? `sdds-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("sdds-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'}
+                `, 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("sdds-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.openDirection}
+            ${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("sdds-icon", { name: "error", size: "16px" }), this.helper))));
+  }
+  static get is() { return "sdds-dropdown-v2"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["dropdown-v2.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["dropdown-v2.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name for the dropdowns input element."
+        },
+        "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": "false"
+      },
+      "helper": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Helper text for the dropdown."
+        },
+        "attribute": "helper",
+        "reflect": false
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label text for the dropdown."
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "labelPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'inside' | 'outside'",
+          "resolved": "\"inside\" | \"outside\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label text position"
+        },
+        "attribute": "label-position",
+        "reflect": false
+      },
+      "modeVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary'",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Mode variant of the component, based on current mode."
+        },
+        "attribute": "mode-variant",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "openDirection": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'up' | 'down' | 'auto'",
+          "resolved": "\"auto\" | \"down\" | \"up\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The direction the dropdown should open, auto if not specified."
+        },
+        "attribute": "open-direction",
+        "reflect": false,
+        "defaultValue": "'auto'"
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Placeholder text for the dropdown."
+        },
+        "attribute": "placeholder",
+        "reflect": false
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'sm' | 'md' | 'lg'",
+          "resolved": "\"lg\" | \"md\" | \"sm\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The size of the dropdown."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'lg'"
+      },
+      "error": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the dropdown in an error state"
+        },
+        "attribute": "error",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "multiselect": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enables multiselect in the dropdown."
+        },
+        "attribute": "multiselect",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "filter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enables filtration in the dropdown."
+        },
+        "attribute": "filter",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "noResultText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Text that is displayed if filter is used and there are no options that matches the search."
+        },
+        "attribute": "no-result-text",
+        "reflect": false,
+        "defaultValue": "'No result'"
+      },
+      "defaultValue": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Default value selected in the dropdown."
+        },
+        "attribute": "default-value",
+        "reflect": false
+      },
+      "options": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Array<{ value: string; label: string; disabled: boolean }>",
+          "resolved": "{ value: string; label: string; disabled: boolean; }[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Populate the dropdown via a JSON array"
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "open": {},
+      "selection": {},
+      "filterResult": {},
+      "filterFocus": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sddsChange",
+        "name": "sddsChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Change event for the dropdown."
+        },
+        "complexType": {
+          "original": "{\n    name: string;\n    value: string;\n  }",
+          "resolved": "{ name: string; value: string; }",
+          "references": {}
+        }
+      }, {
+        "method": "sddsFocus",
+        "name": "sddsFocus",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Focus event for the dropdown."
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "sddsBlur",
+        "name": "sddsBlur",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Blur event for the dropdown."
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "sddsInput",
+        "name": "sddsInput",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Input event for the dropdown."
+        },
+        "complexType": {
+          "original": "InputEvent",
+          "resolved": "InputEvent",
+          "references": {
+            "InputEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "reset": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Method that resets the dropdown.",
+          "tags": []
+        }
+      },
+      "setValue": {
+        "complexType": {
+          "signature": "(newValue: string, newValueLabel: string) => Promise<{ value: string; label: string; }[]>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLSddsDropdownOptionV2Element": {
+              "location": "global"
+            }
+          },
+          "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"
+            }
+          },
+          "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"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Method for closing the dropdown.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "open",
+        "methodName": "handleOpenState"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "mousedown",
+        "method": "onAnyClick",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "keydown",
+        "method": "onKeyDown",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}