@scania/tegel 0.0.8 → 0.0.10

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

@@ -1,726 +0,0 @@
-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
-      }];
-  }
-}