@scania/tegel 0.0.2 → 0.0.5

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

@@ -1,339 +1,362 @@
-import { h, Host } from '@stencil/core';
-export class DropdownFilter {
-  constructor() {
-    this.dataOptions = [];
-    this.filteredContent = [];
-    this.searchTerm = '';
-    this.selectedOptionState = undefined;
-    this.dropdownRef = undefined;
-    this.placeholder = '';
-    this.label = undefined;
-    this.defaultOption = undefined;
-    this.selectedOption = undefined;
-    this.disabled = undefined;
-    this.size = 'lg';
-    this.inline = false;
-    this.labelPosition = 'no-label';
-    this.state = 'default';
-    this.helper = '';
-    this.data = undefined;
-    this.selectedLabel = 'no-selected';
-    this.selectedValue = 'no-selected';
-  }
-  componentWillLoad() {
-    this.parseData(this.data);
-    if (this.defaultOption) {
-      this.selectedOptionState = this.defaultOption;
-    }
-  }
-  parseData(newValue) {
-    if (newValue)
-      this.dataOptions = JSON.parse(newValue);
-    this.filteredContent = this.dataOptions;
-  }
-  updateOptionsContent(event) {
-    this.searchTerm = event.detail;
-    this.findData();
-  }
-  selectOptionHandler(event) {
-    this.selectedOptionState = event.detail.value;
-    this.selectedLabel = event.detail.label;
-    this.selectedValue = event.detail.value;
-    // Reset list when search is done and user have selected one option
-    // To match with animation time for option list to fadeout first
-    setTimeout(() => {
-      this.filteredContent = this.dataOptions;
-    }, 200);
-  }
-  findData() {
-    const searchAsRegEx = new RegExp(this.searchTerm, 'gmi');
-    this.filteredContent = this.dataOptions.filter(option => {
-      if (option.label) {
-        const listItem = option.label.toLowerCase();
-        const searchResultList = listItem.match(searchAsRegEx);
-        if (searchResultList) {
-          return searchResultList;
-        }
-        this.selectedOptionState = null;
-        this.selectedLabel = 'no-result';
-        this.selectedValue = 'no-result';
-      }
-    });
-  }
-  setOptionsContent() {
-    const newList = this.filteredContent.map(obj => (h("sdds-dropdown-option", { tabindex: "0", value: obj.value, class: `${this.selectedOptionState === obj.value ? 'selected' : ''}` }, obj.label)));
-    if (newList.length > 0) {
-      return newList;
-    }
-    return (h("sdds-dropdown-option", { tabindex: "-1", value: "no-result", class: "sdds-option--no-result" }, "No result"));
-  }
-  /** Use this method to reset the dropdown. Then it will go back to its initial state. */
-  async resetOption() {
-    var _a;
-    await ((_a = this.dropdownRef) === null || _a === void 0 ? void 0 : _a.resetOption());
-  }
-  render() {
-    return (h(Host, { "selected-value": this.selectedValue, "selected-text": this.selectedLabel }, h("sdds-dropdown", { ref: el => (this.dropdownRef = el), exportparts: "dropdown-filter-disabled", size: this.size, label: this.label, disabled: this.disabled, labelPosition: this.labelPosition, helper: this.helper, state: this.state, placeholder: this.placeholder, defaultOption: this.defaultOption, selectedOption: this.selectedOption, type: "filter", tabindex: this.disabled ? '-1' : null }, this.setOptionsContent())));
-  }
-  static get is() { return "sdds-dropdown-filter"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["./../dropdown.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["../dropdown.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Placeholder text for dropdown with no selected item"
-        },
-        "attribute": "placeholder",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Label for dropdown with no selected item"
-        },
-        "attribute": "label",
-        "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 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": "Add the value of the option to set it as default"
-        },
-        "attribute": "disabled",
-        "reflect": false
-      },
-      "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": "Position of label"
-        },
-        "attribute": "label-position",
-        "reflect": false,
-        "defaultValue": "'no-label'"
-      },
-      "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": "''"
-      },
-      "data": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Data is an array of objects that contains label and value\n`data = [{label:'Option 1', value:'opt-1'},{label:'Option 2', value:'opt-2'}]`"
-        },
-        "attribute": "data",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "dataOptions": {},
-      "filteredContent": {},
-      "searchTerm": {},
-      "selectedOptionState": {},
-      "dropdownRef": {},
-      "selectedLabel": {},
-      "selectedValue": {}
-    };
-  }
-  static get methods() {
-    return {
-      "resetOption": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Use this method to reset the dropdown. Then it will go back to its initial state.",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get watchers() {
-    return [{
-        "propName": "data",
-        "methodName": "parseData"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "inputSearch",
-        "method": "updateOptionsContent",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "selectOption",
-        "method": "selectOptionHandler",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
-}
+import { h, Host } from '@stencil/core';
+export class DropdownFilter {
+  constructor() {
+    this.dataOptions = [];
+    this.filteredContent = [];
+    this.searchTerm = '';
+    this.selectedOptionState = undefined;
+    this.dropdownRef = undefined;
+    this.modeVariant = null;
+    this.placeholder = '';
+    this.label = undefined;
+    this.defaultOption = undefined;
+    this.selectedOption = undefined;
+    this.disabled = false;
+    this.size = 'lg';
+    this.inline = false;
+    this.labelPosition = 'no-label';
+    this.state = false;
+    this.helper = '';
+    this.data = undefined;
+    this.selectedLabel = 'no-selected';
+    this.selectedValue = 'no-selected';
+  }
+  componentWillLoad() {
+    this.parseData(this.data);
+    if (this.defaultOption) {
+      this.selectedOptionState = this.defaultOption;
+    }
+  }
+  parseData(newValue) {
+    if (newValue)
+      this.dataOptions = JSON.parse(newValue);
+    this.filteredContent = this.dataOptions;
+  }
+  updateOptionsContent(event) {
+    this.searchTerm = event.detail;
+    this.findData();
+  }
+  selectOptionHandler(event) {
+    this.selectedOptionState = event.detail.value;
+    this.selectedLabel = event.detail.label;
+    this.selectedValue = event.detail.value;
+    // Reset list when search is done and user have selected one option
+    // To match with animation time for option list to fadeout first
+    setTimeout(() => {
+      this.filteredContent = this.dataOptions;
+    }, 200);
+  }
+  findData() {
+    const searchAsRegEx = new RegExp(this.searchTerm, 'gmi');
+    this.filteredContent = this.dataOptions.filter((option) => {
+      if (option.label) {
+        const listItem = option.label.toLowerCase();
+        const searchResultList = listItem.match(searchAsRegEx);
+        if (searchResultList) {
+          return searchResultList;
+        }
+        this.selectedOptionState = null;
+        this.selectedLabel = 'no-result';
+        this.selectedValue = 'no-result';
+      }
+    });
+  }
+  setOptionsContent() {
+    const newList = this.filteredContent.map((obj) => (h("sdds-dropdown-option", { tabindex: "0", value: obj.value, class: `${this.selectedOptionState === obj.value ? 'selected' : ''}` }, obj.label)));
+    if (newList.length > 0) {
+      return newList;
+    }
+    return (h("sdds-dropdown-option", { tabindex: "-1", value: "no-result", class: "sdds-option--no-result" }, "No result"));
+  }
+  /** Use this method to reset the dropdown. Then it will go back to its initial state. */
+  async resetOption() {
+    var _a;
+    await ((_a = this.dropdownRef) === null || _a === void 0 ? void 0 : _a.resetOption());
+  }
+  render() {
+    return (h(Host, { "selected-value": this.selectedValue, "selected-text": this.selectedLabel, class: `
+      ${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}
+     ` }, h("sdds-dropdown", { ref: (el) => (this.dropdownRef = el), exportparts: "dropdown-filter-disabled", size: this.size, label: this.label, disabled: this.disabled, labelPosition: this.labelPosition, helper: this.helper, state: this.state, placeholder: this.placeholder, defaultOption: this.defaultOption, selectedOption: this.selectedOption, type: "filter", tabindex: this.disabled ? '-1' : null }, this.setOptionsContent())));
+  }
+  static get is() { return "sdds-dropdown-filter"; }
+  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 dropdown."
+        },
+        "attribute": "mode-variant",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Placeholder text for dropdown with no selected item"
+        },
+        "attribute": "placeholder",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label for dropdown with no selected item"
+        },
+        "attribute": "label",
+        "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 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": "Add the value of the option to set it as default"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "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' | 'outside'",
+          "resolved": "\"no-label\" | \"outside\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Position of label"
+        },
+        "attribute": "label-position",
+        "reflect": false,
+        "defaultValue": "'no-label'"
+      },
+      "state": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Support `error` state"
+        },
+        "attribute": "state",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "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": "''"
+      },
+      "data": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Data is an array of objects that contains label and value\n`data = [{label:'Option 1', value:'opt-1'},{label:'Option 2', value:'opt-2'}]`"
+        },
+        "attribute": "data",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "dataOptions": {},
+      "filteredContent": {},
+      "searchTerm": {},
+      "selectedOptionState": {},
+      "dropdownRef": {},
+      "selectedLabel": {},
+      "selectedValue": {}
+    };
+  }
+  static get methods() {
+    return {
+      "resetOption": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Use this method to reset the dropdown. Then it will go back to its initial state.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "data",
+        "methodName": "parseData"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "inputSearch",
+        "method": "updateOptionsContent",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "internalSddsSelect",
+        "method": "selectOptionHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=dropdown-filter.js.map