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

package/dist/collection/components/input-field/input-field.js

@@ -1,5 +1,5 @@
 import { MDCTextField } from '@material/textfield';
-import { Component, Element, Event, h, Prop, State, Watch, } from '@stencil/core';
+import { h, } from '@stencil/core';
 import { debounce } from 'lodash-es';
 import { ARROW_DOWN, ARROW_DOWN_KEY_CODE, ARROW_UP, ARROW_UP_KEY_CODE, ENTER, ENTER_KEY_CODE, ESCAPE, ESCAPE_KEY_CODE, SPACE, SPACE_KEY_CODE, TAB, TAB_KEY_CODE, } from '../../util/keycodes';
 import { getHref, getTarget } from '../../util/link-helper';
@@ -7,6 +7,7 @@ import { createRandomString } from '../../util/random-string';
 const helperTextId = 'tf-helper-text';
 /**
  * @exampleComponent limel-example-input-field-text
+ * @exampleComponent limel-example-input-field-placeholder
  * @exampleComponent limel-example-input-field-text-multiple
  * @exampleComponent limel-example-input-field-number
  * @exampleComponent limel-example-input-field-autocomplete
@@ -24,64 +25,6 @@ const helperTextId = 'tf-helper-text';
  */
 export class InputField {
   constructor() {
-    /**
-     * Set to `true` to disable the field.
-     * Use `disabled` to indicate that the field can normally be interacted
-     * with, but is currently disabled. This tells the user that if certain
-     * requirements are met, the field may become enabled again.
-     */
-    this.disabled = false;
-    /**
-     * Set to `true` to make the field read-only.
-     * Use `readonly` when the field is only there to present the data it holds,
-     * and will not become possible for the current user to edit.
-     */
-    this.readonly = false;
-    /**
-     * Set to `true` to indicate that the current value of the input field is
-     * invalid.
-     */
-    this.invalid = false;
-    /**
-     * Set to `true` to indicate that the field is required.
-     */
-    this.required = false;
-    /**
-     * Type of input.
-     *
-     * Note** regarding type `url`: `limel-input` uses the native validation
-     * built into the browser for many types of input fields. The native
-     * validation for `url` is very strict, and does not allow relative urls,
-     * nor any other formats that are not a "fully qualified" url. To allow
-     * such urls, use the type `urlAsText` instead. `urlAsText` works exactly
-     * like `text` in all regards, except that it enables use of the `showLink`
-     * property.
-     */
-    this.type = 'text';
-    /**
-     * Set to `true` to format the current value of the input field only
-     * if the field is of type number.
-     * The number format is determined by the current language of the browser.
-     */
-    this.formatNumber = true;
-    /**
-     * Incremental values that are valid if the field type is `number`.
-     */
-    this.step = 'any';
-    /**
-     * list of suggestions `value` can autocomplete to.
-     */
-    this.completions = [];
-    /**
-     * For inputs of type `email`, `tel`, `url`, and `urlAsText`, set this to
-     * `true` to show a trailing icon with a `mailto:`,`tel:`, or normal link,
-     * respectively. The default icon can be overridden using the `trailingIcon`
-     * property.
-     */
-    this.showLink = false;
-    this.isFocused = false;
-    this.isModified = false;
-    this.showCompletions = false;
     this.completionsList = [];
     this.initialize = () => {
       const element = this.limelInputField.shadowRoot.querySelector('.mdc-text-field');
@@ -101,6 +44,7 @@ export class InputField {
     this.getContainerClassList = () => {
       const classList = {
         'mdc-text-field': true,
+        'mdc-text-field--no-label': !this.label,
         'mdc-text-field--outlined': true,
         'mdc-text-field--invalid': this.isInvalid(),
         'mdc-text-field--disabled': this.disabled || this.readonly,
@@ -127,14 +71,13 @@ export class InputField {
         return;
       }
       const type = this.type === 'urlAsText' ? 'text' : this.type;
-      return (h("input", Object.assign({}, properties, { type: type, pattern: this.pattern, onWheel: this.handleWheel, onKeyDown: this.onKeyDown, value: this.value })));
+      return (h("input", Object.assign({}, properties, { type: type, pattern: this.pattern, onWheel: this.handleWheel, onKeyDown: this.onKeyDown, value: this.value, placeholder: this.placeholder })));
     };
     this.renderTextarea = (properties) => {
       if (this.type !== 'textarea') {
         return;
       }
-      return (h("span", { class: "mdc-text-field__resizer" },
-        h("textarea", Object.assign({}, properties), this.value)));
+      return (h("span", { class: "mdc-text-field__resizer" }, h("textarea", Object.assign({}, properties), this.value)));
     };
     this.layout = () => {
       var _a;
@@ -171,9 +114,7 @@ export class InputField {
       if (!this.maxlength && !this.hasHelperText()) {
         return;
       }
-      return (h("div", { tabIndex: -1, class: "mdc-text-field-helper-line" },
-        this.renderHelperText(),
-        this.renderCharacterCounter()));
+      return (h("div", { tabIndex: -1, class: "mdc-text-field-helper-line" }, this.renderHelperText(), this.renderCharacterCounter()));
     };
     this.renderEmptyValueForReadonly = () => {
       if (this.readonly && !this.value) {
@@ -252,13 +193,22 @@ export class InputField {
       }
       return this.limelInputField.shadowRoot.querySelector(elementName);
     };
+    this.renderLabel = (labelId) => {
+      const labelClassList = {
+        'mdc-floating-label': true,
+        'mdc-floating-label--float-above': !!this.value || this.isFocused || this.readonly,
+      };
+      if (!this.label) {
+        return;
+      }
+      return (h("span", { class: "mdc-notched-outline__notch" }, h("span", { class: labelClassList, id: labelId }, this.label)));
+    };
     this.renderLeadingIcon = () => {
       if (this.type === 'textarea') {
         return;
       }
       if (this.leadingIcon) {
-        return (h("i", { class: "material-icons mdc-text-field__icon mdc-text-field__icon--leading" },
-          h("limel-icon", { name: this.leadingIcon })));
+        return (h("i", { class: "material-icons mdc-text-field__icon mdc-text-field__icon--leading" }, h("limel-icon", { name: this.leadingIcon })));
       }
     };
     this.renderTrailingLinkOrButton = () => {
@@ -300,8 +250,7 @@ export class InputField {
       // `preventDefault()` on the event. For links, we don't want that,
       // so instead of `mdc-text-field__icon--trailing`, we use our own class
       // `lime-trailing-icon-for-link`, which uses all the same styling. /Ads
-      return (h("a", Object.assign({}, linkProps, { class: "material-icons mdc-text-field__icon lime-trailing-icon-for-link", tabindex: this.disabled || !this.value ? '-1' : '0', role: "button" }),
-        h("limel-icon", { name: icon })));
+      return (h("a", Object.assign({}, linkProps, { class: "material-icons mdc-text-field__icon lime-trailing-icon-for-link", tabindex: this.disabled || !this.value ? '-1' : '0', role: "button" }), h("limel-icon", { name: icon })));
     };
     this.renderTrailingIcon = (icon) => {
       const props = {
@@ -312,8 +261,7 @@ export class InputField {
         props.onClick = this.handleIconClick;
         props.role = 'button';
       }
-      return (h("i", Object.assign({ class: "material-icons mdc-text-field__icon mdc-text-field__icon--trailing" }, props),
-        h("limel-icon", { name: icon })));
+      return (h("i", Object.assign({ class: "material-icons mdc-text-field__icon mdc-text-field__icon--trailing" }, props), h("limel-icon", { name: icon })));
     };
     this.getTrailingIcon = () => {
       if (this.isInvalid()) {
@@ -401,12 +349,11 @@ export class InputField {
     };
     this.renderPortal = (content = null) => {
       const dropdownZIndex = getComputedStyle(this.limelInputField).getPropertyValue('--dropdown-z-index');
-      return (h("limel-portal", { visible: this.showCompletions, containerId: this.portalId, inheritParentWidth: true, containerStyle: { 'z-index': dropdownZIndex } },
-        h("limel-menu-surface", { open: this.showCompletions, allowClicksElement: this.limelInputField, style: {
-            '--mdc-menu-min-width': '100%',
-            'max-height': 'inherit',
-            display: 'flex',
-          }, onDismiss: this.handleCloseMenu }, content)));
+      return (h("limel-portal", { visible: this.showCompletions, containerId: this.portalId, inheritParentWidth: true, containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { open: this.showCompletions, allowClicksElement: this.limelInputField, style: {
+          '--mdc-menu-min-width': '100%',
+          'max-height': 'inherit',
+          display: 'flex',
+        }, onDismiss: this.handleCloseMenu }, content)));
     };
     this.renderDropdown = () => {
       const content = this.renderListResult();
@@ -479,6 +426,31 @@ export class InputField {
       // circumstances when the value is changed by the scrolling.
       // Please test THOROUGHLY if you remove this event handler 😄
     };
+    this.disabled = false;
+    this.readonly = false;
+    this.invalid = false;
+    this.label = undefined;
+    this.placeholder = undefined;
+    this.helperText = undefined;
+    this.prefix = undefined;
+    this.suffix = undefined;
+    this.required = false;
+    this.value = undefined;
+    this.trailingIcon = undefined;
+    this.leadingIcon = undefined;
+    this.pattern = undefined;
+    this.type = 'text';
+    this.formatNumber = true;
+    this.step = 'any';
+    this.max = undefined;
+    this.min = undefined;
+    this.maxlength = undefined;
+    this.minlength = undefined;
+    this.completions = [];
+    this.showLink = false;
+    this.isFocused = false;
+    this.isModified = false;
+    this.showCompletions = false;
     const debounceTimeout = 300;
     this.changeEmitter = debounce(this.changeEmitter, debounceTimeout);
     this.portalId = createRandomString();
@@ -516,25 +488,8 @@ export class InputField {
       properties['aria-controls'] = helperTextId;
       properties['aria-describedby'] = helperTextId;
     }
-    const labelClassList = {
-      'mdc-floating-label': true,
-      'mdc-floating-label--float-above': !!this.value || this.isFocused || this.readonly,
-    };
     return [
-      h("label", { class: this.getContainerClassList() },
-        h("span", { class: "mdc-notched-outline", tabindex: "-1" },
-          h("span", { class: "mdc-notched-outline__leading" }),
-          h("span", { class: "mdc-notched-outline__notch" },
-            h("span", { class: labelClassList, id: labelId }, this.label)),
-          h("span", { class: "mdc-notched-outline__trailing" })),
-        this.renderLeadingIcon(),
-        this.renderEmptyValueForReadonly(),
-        this.renderPrefix(),
-        this.renderInput(properties),
-        this.renderSuffix(),
-        this.renderTextarea(properties),
-        this.renderFormattedNumber(),
-        this.renderTrailingLinkOrButton()),
+      h("label", { class: this.getContainerClassList() }, h("span", { class: "mdc-notched-outline", tabindex: "-1" }, h("span", { class: "mdc-notched-outline__leading" }), this.renderLabel(labelId), h("span", { class: "mdc-notched-outline__trailing" })), this.renderLeadingIcon(), this.renderEmptyValueForReadonly(), this.renderPrefix(), this.renderFormattedNumber(), this.renderInput(properties), this.renderSuffix(), this.renderTextarea(properties), this.renderTrailingLinkOrButton()),
       this.renderHelperLine(),
       this.renderAutocompleteList(),
     ];
@@ -549,422 +504,451 @@ export class InputField {
   }
   static get is() { return "limel-input-field"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["input-field.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["input-field.css"]
-  }; }
-  static get properties() { return {
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to `true` to disable the field.\nUse `disabled` to indicate that the field can normally be interacted\nwith, but is currently disabled. This tells the user that if certain\nrequirements are met, the field may become enabled again."
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "readonly": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to `true` to make the field read-only.\nUse `readonly` when the field is only there to present the data it holds,\nand will not become possible for the current user to edit."
-      },
-      "attribute": "readonly",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "invalid": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to `true` to indicate that the current value of the input field is\ninvalid."
-      },
-      "attribute": "invalid",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The input label."
-      },
-      "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 input field when it has focus"
-      },
-      "attribute": "helper-text",
-      "reflect": true
-    },
-    "prefix": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "A short piece of text to display before the value inside the input field.\nDisplayed for all types except `textarea`."
-      },
-      "attribute": "prefix",
-      "reflect": true
-    },
-    "suffix": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "A short piece of text to display after the value inside the input field.\nDisplayed for all types except `textarea`."
-      },
-      "attribute": "suffix",
-      "reflect": true
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to `true` to indicate that the field is required."
-      },
-      "attribute": "required",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "value": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The value of the field."
-      },
-      "attribute": "value",
-      "reflect": true
-    },
-    "trailingIcon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Trailing icon to show to the far right in the field."
-      },
-      "attribute": "trailing-icon",
-      "reflect": true
-    },
-    "leadingIcon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Leading icon to show to the far left in the field."
-      },
-      "attribute": "leading-icon",
-      "reflect": true
-    },
-    "pattern": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Regular expression that the current value of the input field must match.\nNo forward slashes should be specified around the pattern.\nOnly used if type is `text`, `tel`, `email`, `url`, `urlAsText`,\n`password`, or `search`."
-      },
-      "attribute": "pattern",
-      "reflect": true
-    },
-    "type": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "InputType",
-        "resolved": "\"date\" | \"datetime-local\" | \"email\" | \"month\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"textarea\" | \"time\" | \"url\" | \"urlAsText\" | \"week\"",
-        "references": {
-          "InputType": {
-            "location": "import",
-            "path": "./input-field.types"
+  static get originalStyleUrls() {
+    return {
+      "$": ["input-field.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["input-field.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to disable the field.\nUse `disabled` to indicate that the field can normally be interacted\nwith, but is currently disabled. This tells the user that if certain\nrequirements are met, the field may become enabled again."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to make the field read-only.\nUse `readonly` when the field is only there to present the data it holds,\nand will not become possible for the current user to edit."
+        },
+        "attribute": "readonly",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "invalid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to indicate that the current value of the input field is\ninvalid."
+        },
+        "attribute": "invalid",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The input label."
+        },
+        "attribute": "label",
+        "reflect": true
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The placeholder text shown inside the input field, when the field is focused and empty."
+        },
+        "attribute": "placeholder",
+        "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 input field when it has focus"
+        },
+        "attribute": "helper-text",
+        "reflect": true
+      },
+      "prefix": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A short piece of text to display before the value inside the input field.\nDisplayed for all types except `textarea`."
+        },
+        "attribute": "prefix",
+        "reflect": true
+      },
+      "suffix": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A short piece of text to display after the value inside the input field.\nDisplayed for all types except `textarea`."
+        },
+        "attribute": "suffix",
+        "reflect": true
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to indicate that the field is required."
+        },
+        "attribute": "required",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The value of the field."
+        },
+        "attribute": "value",
+        "reflect": true
+      },
+      "trailingIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Trailing icon to show to the far right in the field."
+        },
+        "attribute": "trailing-icon",
+        "reflect": true
+      },
+      "leadingIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Leading icon to show to the far left in the field."
+        },
+        "attribute": "leading-icon",
+        "reflect": true
+      },
+      "pattern": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Regular expression that the current value of the input field must match.\nNo forward slashes should be specified around the pattern.\nOnly used if type is `text`, `tel`, `email`, `url`, `urlAsText`,\n`password`, or `search`."
+        },
+        "attribute": "pattern",
+        "reflect": true
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "InputType",
+          "resolved": "\"date\" | \"datetime-local\" | \"email\" | \"month\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"textarea\" | \"time\" | \"url\" | \"urlAsText\" | \"week\"",
+          "references": {
+            "InputType": {
+              "location": "import",
+              "path": "./input-field.types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Type of input.\n\nNote** regarding type `url`: `limel-input` uses the native validation\nbuilt into the browser for many types of input fields. The native\nvalidation for `url` is very strict, and does not allow relative urls,\nnor any other formats that are not a \"fully qualified\" url. To allow\nsuch urls, use the type `urlAsText` instead. `urlAsText` works exactly\nlike `text` in all regards, except that it enables use of the `showLink`\nproperty."
-      },
-      "attribute": "type",
-      "reflect": true,
-      "defaultValue": "'text'"
-    },
-    "formatNumber": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to `true` to format the current value of the input field only\nif the field is of type number.\nThe number format is determined by the current language of the browser."
-      },
-      "attribute": "format-number",
-      "reflect": true,
-      "defaultValue": "true"
-    },
-    "step": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "number | 'any'",
-        "resolved": "\"any\" | number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Incremental values that are valid if the field type is `number`."
-      },
-      "attribute": "step",
-      "reflect": true,
-      "defaultValue": "'any'"
-    },
-    "max": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Maximum allowed value if input type is `number`."
-      },
-      "attribute": "max",
-      "reflect": true
-    },
-    "min": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Minimum allowed value if input type is `number`."
-      },
-      "attribute": "min",
-      "reflect": true
-    },
-    "maxlength": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Maximum length of the value if type is `password`, `search`, `tel`,\n`text`, `url`, or `urlAsText`."
-      },
-      "attribute": "maxlength",
-      "reflect": true
-    },
-    "minlength": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Minimum length of the value if type is `password`, `search`, `tel`,\n`text`, `url`, or `urlAsText`."
-      },
-      "attribute": "minlength",
-      "reflect": true
-    },
-    "completions": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "list of suggestions `value` can autocomplete to."
-      },
-      "defaultValue": "[]"
-    },
-    "showLink": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "For inputs of type `email`, `tel`, `url`, and `urlAsText`, set this to\n`true` to show a trailing icon with a `mailto:`,`tel:`, or normal link,\nrespectively. The default icon can be overridden using the `trailingIcon`\nproperty."
-      },
-      "attribute": "show-link",
-      "reflect": true,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "isFocused": {},
-    "isModified": {},
-    "showCompletions": {}
-  }; }
-  static get events() { return [{
-      "method": "change",
-      "name": "change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the input value is changed."
-      },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      }
-    }, {
-      "method": "action",
-      "name": "action",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when `trailingIcon` or `leadingIcon` is set\nand the icon is interacted with."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Type of input.\n\nNote** regarding type `url`: `limel-input` uses the native validation\nbuilt into the browser for many types of input fields. The native\nvalidation for `url` is very strict, and does not allow relative urls,\nnor any other formats that are not a \"fully qualified\" url. To allow\nsuch urls, use the type `urlAsText` instead. `urlAsText` works exactly\nlike `text` in all regards, except that it enables use of the `showLink`\nproperty."
+        },
+        "attribute": "type",
+        "reflect": true,
+        "defaultValue": "'text'"
+      },
+      "formatNumber": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to format the current value of the input field only\nif the field is of type number.\nThe number format is determined by the current language of the browser."
+        },
+        "attribute": "format-number",
+        "reflect": true,
+        "defaultValue": "true"
+      },
+      "step": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "number | 'any'",
+          "resolved": "\"any\" | number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Incremental values that are valid if the field type is `number`."
+        },
+        "attribute": "step",
+        "reflect": true,
+        "defaultValue": "'any'"
+      },
+      "max": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Maximum allowed value if input type is `number`."
+        },
+        "attribute": "max",
+        "reflect": true
+      },
+      "min": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Minimum allowed value if input type is `number`."
+        },
+        "attribute": "min",
+        "reflect": true
+      },
+      "maxlength": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Maximum length of the value if type is `password`, `search`, `tel`,\n`text`, `url`, or `urlAsText`."
+        },
+        "attribute": "maxlength",
+        "reflect": true
+      },
+      "minlength": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Minimum length of the value if type is `password`, `search`, `tel`,\n`text`, `url`, or `urlAsText`."
+        },
+        "attribute": "minlength",
+        "reflect": true
+      },
+      "completions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "list of suggestions `value` can autocomplete to."
+        },
+        "defaultValue": "[]"
+      },
+      "showLink": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "For inputs of type `email`, `tel`, `url`, and `urlAsText`, set this to\n`true` to show a trailing icon with a `mailto:`,`tel:`, or normal link,\nrespectively. The default icon can be overridden using the `trailingIcon`\nproperty."
+        },
+        "attribute": "show-link",
+        "reflect": true,
+        "defaultValue": "false"
       }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "isFocused": {},
+      "isModified": {},
+      "showCompletions": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "change",
+        "name": "change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the input value is changed."
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
+        "method": "action",
+        "name": "action",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when `trailingIcon` or `leadingIcon` is set\nand the icon is interacted with."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "limelInputField"; }
-  static get watchers() { return [{
-      "propName": "value",
-      "methodName": "valueWatcher"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "valueWatcher"
+      }];
+  }
 }