@limetech/lime-elements 36.0.0-next.9 → 36.1.0-dev.1

package/dist/collection/components/chip-set/chip-set.js

@@ -1,6 +1,6 @@
 import { MDCChipSet, } from '@material/chips/deprecated';
 import { MDCTextField } from '@material/textfield';
-import { Component, Element, Event, h, Method, Prop, State, Watch, } from '@stencil/core';
+import { h, } from '@stencil/core';
 import { handleKeyboardEvent } from './chip-set-input-helpers';
 import translate from '../../global/translations';
 import { getHref, getTarget } from '../../util/link-helper';
@@ -19,56 +19,6 @@ const INPUT_FIELD_TABINDEX = 1;
  */
 export class ChipSet {
   constructor() {
-    /**
-     * List of chips for the set
-     */
-    this.value = [];
-    /**
-     * True if the chip set should be disabled
-     */
-    this.disabled = false;
-    /**
-     * For chip-sets of type `input`, set to `true` to disable adding and
-     * removing chips, but allow interaction with existing chips in the set.
-     * For any other types, setting either `readonly` or `disabled` disables
-     * the chip-set.
-     */
-    this.readonly = false;
-    /**
-     * For chip-sets of type `input`. Value to use for the `type` attribute on the
-     * input field inside the chip-set.
-     */
-    this.inputType = 'text';
-    /**
-     * True if the control requires a value
-     */
-    this.required = false;
-    /**
-     * Whether the input field should be emptied when the chip-set loses focus.
-     */
-    this.emptyInputOnBlur = true;
-    /**
-     * Whether the "Clear all" buttons should be shown
-     */
-    this.clearAllButton = true;
-    /**
-     * For chip-sets of type `input`. When the value is null, no leading icon is used.
-     * Leading icon to show to the far left in the text field
-     */
-    this.leadingIcon = null;
-    /**
-     * For chip-set of type `input`. Sets delimiters between chips.
-     */
-    this.delimiter = null;
-    /**
-     * Defines the language for translations.
-     * Will translate the translatable strings on the components. For example, the clear all chips label.
-     */
-    this.language = 'en';
-    this.editMode = false;
-    this.textValue = '';
-    this.blurred = false;
-    this.inputChipIndexSelected = null;
     this.handleKeyDown = handleKeyboardEvent;
     this.dropZoneTip = () => {
       return translate.get('file.drag-and-drop-tips', this.language);
@@ -98,6 +48,25 @@ export class ChipSet {
     this.removeChipLabel = () => {
       return translate.get('chip-set.remove-chip', this.language);
     };
+    this.value = [];
+    this.type = undefined;
+    this.label = undefined;
+    this.helperText = undefined;
+    this.disabled = false;
+    this.readonly = false;
+    this.inputType = 'text';
+    this.maxItems = undefined;
+    this.required = false;
+    this.searchLabel = undefined;
+    this.emptyInputOnBlur = true;
+    this.clearAllButton = true;
+    this.leadingIcon = null;
+    this.delimiter = null;
+    this.language = 'en';
+    this.editMode = false;
+    this.textValue = '';
+    this.blurred = false;
+    this.inputChipIndexSelected = null;
     this.renderChip = this.renderChip.bind(this);
     this.renderInputChip = this.renderInputChip.bind(this);
     this.isFull = this.isFull.bind(this);
@@ -185,10 +154,7 @@ export class ChipSet {
     if (chipSetLabel) {
       classes['chip-set--with-label'] = true;
     }
-    return (h("div", { class: classes, role: "grid" },
-      chipSetLabel,
-      this.value.map(this.renderChip),
-      this.renderHelperLine()));
+    return (h("div", { class: classes, role: "grid" }, chipSetLabel, this.value.map(this.renderChip), this.renderHelperLine()));
   }
   handleChangeChips() {
     this.syncEmptyInput();
@@ -226,35 +192,34 @@ export class ChipSet {
           'has-chips mdc-text-field--label-floating': this.value.length !== 0,
           'has-leading-icon': this.leadingIcon !== null,
           'has-clear-all-button': this.clearAllButton,
-        }, onClick: this.handleTextFieldFocus },
-        this.value.map(this.renderInputChip),
-        h("input", { tabIndex: INPUT_FIELD_TABINDEX, type: this.inputType, id: "input-element", disabled: this.readonly || this.disabled, class: {
-            'mdc-text-field__input': true,
-            hidden: this.inputHidden(),
-          }, value: this.textValue, onBlur: this.handleInputBlur, onFocus: this.handleTextFieldFocus, onKeyDown: this.handleKeyDown, onInput: this.handleTextInput, 
-          // Some browsers emit a change event on input elements, we need to stop
-          // that event from propagating since we are emitting our own change event
-          onChange: this.inputFieldOnChange, placeholder: this.isFull() ? '' : this.searchLabel, readonly: this.isFull() }),
-        h("div", { class: {
-            'mdc-notched-outline': true,
-            'mdc-notched-outline--upgraded': true,
-            'mdc-text-field--required': this.required,
-            'lime-notched-outline--notched': !!(this.value.length || this.editMode),
-          }, "dropzone-tip": this.dropZoneTip() },
-          h("div", { class: "mdc-notched-outline__leading" }),
-          h("div", { class: "mdc-notched-outline__notch" },
-            h("label", { class: {
-                'mdc-floating-label': true,
-                'mdc-text-field--disabled': this.readonly || this.disabled,
-                'mdc-floating-label--required': this.required,
-                'lime-floating-label--float-above': !!(this.value.length || this.editMode),
-              }, htmlFor: "input-element" }, this.label)),
-          h("div", { class: "mdc-notched-outline__trailing" })),
-        this.renderLeadingIcon(),
-        this.renderClearAllChipsButton()),
+        }, onClick: this.handleTextFieldFocus }, this.value.map(this.renderInputChip), h("input", { tabIndex: INPUT_FIELD_TABINDEX, type: this.inputType, id: "input-element", disabled: this.readonly || this.disabled, class: {
+          'mdc-text-field__input': true,
+          hidden: this.inputHidden(),
+        }, value: this.textValue, onBlur: this.handleInputBlur, onFocus: this.handleTextFieldFocus, onKeyDown: this.handleKeyDown, onInput: this.handleTextInput,
+        // Some browsers emit a change event on input elements, we need to stop
+        // that event from propagating since we are emitting our own change event
+        onChange: this.inputFieldOnChange, placeholder: this.isFull() ? '' : this.searchLabel, readonly: this.isFull() }), h("div", { class: {
+          'mdc-notched-outline': true,
+          'mdc-notched-outline--upgraded': true,
+          'mdc-text-field--required': this.required,
+          'lime-notched-outline--notched': !!(this.value.length || this.editMode),
+        }, "dropzone-tip": this.dropZoneTip() }, h("div", { class: "mdc-notched-outline__leading" }), this.renderLabel(), h("div", { class: "mdc-notched-outline__trailing" })), this.renderLeadingIcon(), this.renderClearAllChipsButton()),
       this.renderHelperLine(),
     ];
   }
+  renderLabel() {
+    const labelClassList = {
+      'mdc-floating-label': true,
+      'mdc-text-field--no-label': !this.label,
+      'mdc-text-field--disabled': this.readonly || this.disabled,
+      'mdc-floating-label--required': this.required,
+      'lime-floating-label--float-above': !!(this.value.length || this.editMode),
+    };
+    if (!this.label) {
+      return;
+    }
+    return (h("div", { class: "mdc-notched-outline__notch" }, h("label", { class: labelClassList, htmlFor: "input-element" }, this.label)));
+  }
   isFull() {
     return !!this.maxItems && this.value.length >= this.maxItems;
   }
@@ -350,27 +315,18 @@ export class ChipSet {
     return this.renderDefaultChip(chip);
   }
   renderDefaultChip(chip) {
-    return (h("div", { class: `mdc-chip ${chip.selected ? SELECTED_CHIP_CLASS : ''}`, role: "row", id: `${chip.id}` },
-      chip.icon ? this.renderIcon(chip) : null,
-      chip.text ? this.renderLabel(chip) : null));
+    return (h("div", { class: `mdc-chip ${chip.selected ? SELECTED_CHIP_CLASS : ''}`, role: "row", id: `${chip.id}` }, chip.icon ? this.renderChipIcon(chip) : null, chip.text ? this.renderChipLabel(chip) : null));
   }
-  renderLabel(chip) {
+  renderChipLabel(chip) {
     const attributes = {};
     if (chip.href) {
       attributes.href = getHref(chip.href);
       attributes.target = getTarget(chip.href);
     }
-    return (h("span", { role: "gridcell" },
-      h("a", Object.assign({ role: "button", tabindex: this.disabled ? '-1' : '0', class: "mdc-chip__text" }, attributes), chip.text)));
+    return (h("span", { role: "gridcell" }, h("a", Object.assign({ role: "button", tabindex: this.disabled ? '-1' : '0', class: "mdc-chip__text" }, attributes), chip.text)));
   }
   renderFilterChip(chip) {
-    return (h("div", { class: `mdc-chip ${chip.selected ? SELECTED_CHIP_CLASS : ''}`, role: "row", id: `${chip.id}` },
-      h("span", { class: "mdc-chip__checkmark" },
-        h("svg", { class: "mdc-chip__checkmark-svg", viewBox: "-2 -3 30 30" },
-          h("path", { class: "mdc-chip__checkmark-path", fill: "none", stroke: "black", d: "M1.73,12.91 8.1,19.28 22.79,4.59" }))),
-      h("span", { role: "gridcell" },
-        h("span", { role: "checkbox", tabindex: this.disabled ? '-1' : '0', "aria-checked": "false", class: "mdc-chip__text" }, chip.text)),
-      this.renderBadge(chip)));
+    return (h("div", { class: `mdc-chip ${chip.selected ? SELECTED_CHIP_CLASS : ''}`, role: "row", id: `${chip.id}` }, h("span", { class: "mdc-chip__checkmark" }, h("svg", { class: "mdc-chip__checkmark-svg", viewBox: "-2 -3 30 30" }, h("path", { class: "mdc-chip__checkmark-path", fill: "none", stroke: "black", d: "M1.73,12.91 8.1,19.28 22.79,4.59" }))), h("span", { role: "gridcell" }, h("span", { role: "checkbox", tabindex: this.disabled ? '-1' : '0', "aria-checked": "false", class: "mdc-chip__text" }, chip.text)), this.renderBadge(chip)));
   }
   renderInputChip(chip, index) {
     return [
@@ -378,17 +334,14 @@ export class ChipSet {
           'mdc-chip': true,
           'mdc-chip--selected': this.inputChipIndexSelected === index,
           disabled: this.disabled,
-        }, role: "row", id: `${chip.id}`, onClick: this.catchInputChipClicks },
-        chip.icon ? this.renderIcon(chip) : null,
-        this.renderLabel(chip),
-        this.renderChipRemoveButton(chip)),
+        }, role: "row", id: `${chip.id}`, onClick: this.catchInputChipClicks }, chip.icon ? this.renderChipIcon(chip) : null, this.renderChipLabel(chip), this.renderChipRemoveButton(chip)),
       this.renderDelimiter(),
     ];
   }
   catchInputChipClicks(event) {
     event.stopPropagation();
   }
-  renderIcon(chip) {
+  renderChipIcon(chip) {
     const style = {};
     if (chip.iconFillColor) {
       style['--icon-color'] = chip.iconFillColor;
@@ -402,8 +355,7 @@ export class ChipSet {
     if (!this.leadingIcon) {
       return;
     }
-    return (h("i", { class: "mdc-text-field__icon search-icon" },
-      h("limel-icon", { name: this.leadingIcon })));
+    return (h("i", { class: "mdc-text-field__icon search-icon" }, h("limel-icon", { name: this.leadingIcon })));
   }
   renderChipRemoveButton(chip) {
     if (!chip.removable || this.readonly || this.disabled) {
@@ -443,450 +395,464 @@ export class ChipSet {
   }
   static get is() { return "limel-chip-set"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["chip-set.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["chip-set.css"]
-  }; }
-  static get properties() { return {
-    "value": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Chip[]",
-        "resolved": "Chip<any>[]",
-        "references": {
-          "Chip": {
-            "location": "import",
-            "path": "@limetech/lime-elements"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "List of chips for the set"
-      },
-      "defaultValue": "[]"
-    },
-    "type": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'choice' | 'filter' | 'input'",
-        "resolved": "\"choice\" | \"filter\" | \"input\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Type of chip set\n\n- `choice` renders a set of selectable chips where only one is selectable. The `removable` property is ignored\n- `filter` renders a set of selectable chips where all are selectable. The `icon` property is ignored\n- `input` renders a set of chips that can be used in conjunction with an input field\n\nIf no type is set, a basic set of chips without additional functionality will be rendered"
-      },
-      "attribute": "type",
-      "reflect": true
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label for the chip-set"
-      },
-      "attribute": "label",
-      "reflect": true
-    },
-    "helperText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Optional helper text to display below the chipset.\nWhen type is `input`, the helper text is displayed below the\ninput field when it has focus.\nWhen type is not `input`, the helper text is always displayed\nif the device is touch screen; otherwise it is shown when chip-set\nis hovered or focused using keyboard navigation."
-      },
-      "attribute": "helper-text",
-      "reflect": true
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "True if the chip set should be disabled"
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "readonly": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "For chip-sets of type `input`, set to `true` to disable adding and\nremoving chips, but allow interaction with existing chips in the set.\nFor any other types, setting either `readonly` or `disabled` disables\nthe chip-set."
-      },
-      "attribute": "readonly",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "inputType": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'search' | 'text'",
-        "resolved": "\"search\" | \"text\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "For chip-sets of type `input`. Value to use for the `type` attribute on the\ninput field inside the chip-set."
-      },
-      "attribute": "input-type",
-      "reflect": true,
-      "defaultValue": "'text'"
-    },
-    "maxItems": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "For chip-sets of type `input`. Limits the maximum number of chips.\nWhen the value is `0` or not set, no limit is applied."
-      },
-      "attribute": "max-items",
-      "reflect": true
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "True if the control requires a value"
-      },
-      "attribute": "required",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "searchLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Search label to display when type is `input` and component is in search mode"
-      },
-      "attribute": "search-label",
-      "reflect": true
-    },
-    "emptyInputOnBlur": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Whether the input field should be emptied when the chip-set loses focus."
-      },
-      "attribute": "empty-input-on-blur",
-      "reflect": true,
-      "defaultValue": "true"
-    },
-    "clearAllButton": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Whether the \"Clear all\" buttons should be shown"
-      },
-      "attribute": "clear-all-button",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "leadingIcon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "For chip-sets of type `input`. When the value is null, no leading icon is used.\nLeading icon to show to the far left in the text field"
-      },
-      "attribute": "leading-icon",
-      "reflect": true,
-      "defaultValue": "null"
-    },
-    "delimiter": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "For chip-set of type `input`. Sets delimiters between chips."
-      },
-      "attribute": "delimiter",
-      "reflect": true,
-      "defaultValue": "null"
-    },
-    "language": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Languages",
-        "resolved": "\"da\" | \"en\" | \"fi\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
-        "references": {
-          "Languages": {
-            "location": "import",
-            "path": "@limetech/lime-elements"
+  static get originalStyleUrls() {
+    return {
+      "$": ["chip-set.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["chip-set.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Chip[]",
+          "resolved": "Chip<any>[]",
+          "references": {
+            "Chip": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines the language for translations.\nWill translate the translatable strings on the components. For example, the clear all chips label."
-      },
-      "attribute": "language",
-      "reflect": false,
-      "defaultValue": "'en'"
-    }
-  }; }
-  static get states() { return {
-    "editMode": {},
-    "textValue": {},
-    "blurred": {},
-    "inputChipIndexSelected": {}
-  }; }
-  static get events() { return [{
-      "method": "interact",
-      "name": "interact",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Dispatched when a chip is interacted with"
-      },
-      "complexType": {
-        "original": "Chip",
-        "resolved": "Chip<any>",
-        "references": {
-          "Chip": {
-            "location": "import",
-            "path": "@limetech/lime-elements"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "List of chips for the set"
+        },
+        "defaultValue": "[]"
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'choice' | 'filter' | 'input'",
+          "resolved": "\"choice\" | \"filter\" | \"input\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Type of chip set\n\n- `choice` renders a set of selectable chips where only one is selectable. The `removable` property is ignored\n- `filter` renders a set of selectable chips where all are selectable. The `icon` property is ignored\n- `input` renders a set of chips that can be used in conjunction with an input field\n\nIf no type is set, a basic set of chips without additional functionality will be rendered"
+        },
+        "attribute": "type",
+        "reflect": true
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label for the chip-set"
+        },
+        "attribute": "label",
+        "reflect": true
+      },
+      "helperText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Optional helper text to display below the chipset.\nWhen type is `input`, the helper text is displayed below the\ninput field when it has focus.\nWhen type is not `input`, the helper text is always displayed\nif the device is touch screen; otherwise it is shown when chip-set\nis hovered or focused using keyboard navigation."
+        },
+        "attribute": "helper-text",
+        "reflect": true
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "True if the chip set should be disabled"
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "For chip-sets of type `input`, set to `true` to disable adding and\nremoving chips, but allow interaction with existing chips in the set.\nFor any other types, setting either `readonly` or `disabled` disables\nthe chip-set."
+        },
+        "attribute": "readonly",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "inputType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'search' | 'text'",
+          "resolved": "\"search\" | \"text\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "For chip-sets of type `input`. Value to use for the `type` attribute on the\ninput field inside the chip-set."
+        },
+        "attribute": "input-type",
+        "reflect": true,
+        "defaultValue": "'text'"
+      },
+      "maxItems": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "For chip-sets of type `input`. Limits the maximum number of chips.\nWhen the value is `0` or not set, no limit is applied."
+        },
+        "attribute": "max-items",
+        "reflect": true
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "True if the control requires a value"
+        },
+        "attribute": "required",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "searchLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Search label to display when type is `input` and component is in search mode"
+        },
+        "attribute": "search-label",
+        "reflect": true
+      },
+      "emptyInputOnBlur": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the input field should be emptied when the chip-set loses focus."
+        },
+        "attribute": "empty-input-on-blur",
+        "reflect": true,
+        "defaultValue": "true"
+      },
+      "clearAllButton": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the \"Clear all\" buttons should be shown"
+        },
+        "attribute": "clear-all-button",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "leadingIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "For chip-sets of type `input`. When the value is null, no leading icon is used.\nLeading icon to show to the far left in the text field"
+        },
+        "attribute": "leading-icon",
+        "reflect": true,
+        "defaultValue": "null"
+      },
+      "delimiter": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "For chip-set of type `input`. Sets delimiters between chips."
+        },
+        "attribute": "delimiter",
+        "reflect": true,
+        "defaultValue": "null"
+      },
+      "language": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Languages",
+          "resolved": "\"da\" | \"en\" | \"fi\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
+          "references": {
+            "Languages": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
           }
-        }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines the language for translations.\nWill translate the translatable strings on the components. For example, the clear all chips label."
+        },
+        "attribute": "language",
+        "reflect": false,
+        "defaultValue": "'en'"
       }
-    }, {
-      "method": "change",
-      "name": "change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Dispatched when a chip is selected/deselected"
-      },
-      "complexType": {
-        "original": "Chip | Chip[]",
-        "resolved": "Chip<any> | Chip<any>[]",
-        "references": {
-          "Chip": {
-            "location": "import",
-            "path": "@limetech/lime-elements"
+    };
+  }
+  static get states() {
+    return {
+      "editMode": {},
+      "textValue": {},
+      "blurred": {},
+      "inputChipIndexSelected": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "interact",
+        "name": "interact",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Dispatched when a chip is interacted with"
+        },
+        "complexType": {
+          "original": "Chip",
+          "resolved": "Chip<any>",
+          "references": {
+            "Chip": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
           }
         }
-      }
-    }, {
-      "method": "startEdit",
-      "name": "startEdit",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when an input chip set has received focus and editing in the text field has started"
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "stopEdit",
-      "name": "stopEdit",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when an input chip set has lost focus and editing in the text field has ended"
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "input",
-      "name": "input",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Dispatched when the input is changed for type `input`"
-      },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "getEditMode": {
-      "complexType": {
-        "signature": "() => Promise<boolean>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      }, {
+        "method": "change",
+        "name": "change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Dispatched when a chip is selected/deselected"
         },
-        "return": "Promise<boolean>"
-      },
-      "docs": {
-        "text": "Used to find out whether the chip-set is in edit mode.",
-        "tags": [{
-            "name": "returns",
-            "text": "`true` if the chip-set is in edit mode, `false` otherwise."
-          }]
-      }
-    },
-    "setFocus": {
-      "complexType": {
-        "signature": "(emptyInput?: boolean) => Promise<void>",
-        "parameters": [{
-            "tags": [{
-                "name": "param",
-                "text": "emptyInput if `true`, any text in the input is discarded"
-              }],
-            "text": "if `true`, any text in the input is discarded"
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+        "complexType": {
+          "original": "Chip | Chip[]",
+          "resolved": "Chip<any> | Chip<any>[]",
+          "references": {
+            "Chip": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
           }
+        }
+      }, {
+        "method": "startEdit",
+        "name": "startEdit",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when an input chip set has received focus and editing in the text field has started"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "stopEdit",
+        "name": "stopEdit",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when an input chip set has lost focus and editing in the text field has ended"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "input",
+        "name": "input",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Dispatched when the input is changed for type `input`"
         },
-        "return": "Promise<void>"
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "getEditMode": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<boolean>"
+        },
+        "docs": {
+          "text": "Used to find out whether the chip-set is in edit mode.",
+          "tags": [{
+              "name": "returns",
+              "text": "`true` if the chip-set is in edit mode, `false` otherwise."
+            }]
+        }
       },
-      "docs": {
-        "text": "Used to set focus to the chip-set input field.",
-        "tags": [{
-            "name": "param",
-            "text": "emptyInput if `true`, any text in the input is discarded"
-          }, {
-            "name": "returns",
-            "text": "does not return anything, but methods have to be async"
-          }]
-      }
-    },
-    "emptyInput": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "setFocus": {
+        "complexType": {
+          "signature": "(emptyInput?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "emptyInput if `true`, any text in the input is discarded"
+                }],
+              "text": "if `true`, any text in the input is discarded"
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Used to set focus to the chip-set input field.",
+          "tags": [{
+              "name": "param",
+              "text": "emptyInput if `true`, any text in the input is discarded"
+            }, {
+              "name": "returns",
+              "text": "does not return anything, but methods have to be async"
+            }]
+        }
       },
-      "docs": {
-        "text": "Used to empty the input field. Used in conjunction with `emptyInputOnBlur` to let the\nconsumer control when the input is emptied.",
-        "tags": [{
-            "name": "returns",
-            "text": "does not return anything, but methods have to be async"
-          }]
+      "emptyInput": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Used to empty the input field. Used in conjunction with `emptyInputOnBlur` to let the\nconsumer control when the input is emptied.",
+          "tags": [{
+              "name": "returns",
+              "text": "does not return anything, but methods have to be async"
+            }]
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "value",
-      "methodName": "handleChangeChips"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "handleChangeChips"
+      }];
+  }
 }