@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.0

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

@@ -1,18 +1,18 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { Build, Host, } from "@stencil/core";
 import { closestElement } from "../../utils/dom";
-import { createColorClasses } from "../../utils/theme";
-import { debounceEvent, debounce } from "../../utils/throttle";
+import { debounceEvent } from "../../utils/throttle";
 import { FormControl, FormControlWrap } from "../form-control/form-control";
 import { h, transformTag } from "../../utils/renderer";
 let inputIds = 0;
 /**
- * The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input).
+ * Inputs collect text data from the user.
+ *
+ * @status stable
+ * @version 1.0.0
  *
-It is meant for text type inputs only, such as "text", "password", "email", "number", "search", "tel", and "url". It supports all standard text input events including keyup, keydown, keypress, and more.
-The default styling reference comes from the [ONT styleguide](https://nanoporetech.zeroheight.com/styleguide/s/31282/p/230c74-text-input--textarea/b/942ee4)
  * @slot start - suitable for inline action buttons or icons that may add extra contextual information
  * @slot end - suitable for inline action buttons or icons that may add extra contextual information
  * @slot value-start - similar to 'start', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist
@@ -30,6 +30,9 @@ export class Input {
     mo;
     charCount = 0;
     hasRendered = false;
+    pickerDropdown;
+    picker;
+    pickerCloseBtn;
     // we don't want these rendered eles decorated with @State
     // because that will cause re-renders. User get/set to set datalist options
     _nativeInputWrap;
@@ -43,7 +46,6 @@ export class Input {
         this.setDataListOpts();
     }
     constructor() {
-        this.validate = debounce(this.validate, 50);
         this.handleBlur = this.handleBlur.bind(this);
     }
     hasFocus = false;
@@ -57,6 +59,7 @@ export class Input {
             return;
         const currDWConfig = this.datalist.dropDownConfig || {};
         this.datalist.dropDownConfig = {
+            distance: 10,
             ...currDWConfig,
             skidding: -1,
             tetherTo: this.nativeInputWrap,
@@ -70,7 +73,7 @@ export class Input {
     get invalid() {
         return this._invalid;
     }
-    _invalid = false;
+    _invalid = null;
     /**
      * Current validation message - if any. @readonly
      */
@@ -79,10 +82,6 @@ export class Input {
             return '';
         return this.nativeInput.validationMessage;
     }
-    /**
-     * The color to use from the application's color palette.
-     */
-    color;
     /**
      * If the value of the type attribute is `"file"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.
      */
@@ -106,7 +105,7 @@ export class Input {
     /**
      * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.
      */
-    clearInput = false;
+    clearable = false;
     /**
      * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.
      */
@@ -115,6 +114,9 @@ export class Input {
      * Set the amount of time, in milliseconds, to wait to trigger the `nanoChange` event after each keystroke.
      */
     debounce = 0;
+    debounceChanged() {
+        this.nanoChange = debounceEvent(this.nanoChange, this.debounce);
+    }
     /**
      * If `true`, the user cannot interact with the input.
      */
@@ -133,10 +135,21 @@ export class Input {
      * Whether to show validation errors underneath input
      */
     showInlineError = true;
+    _label = '';
     /**
      * String to place within a label element. Alternatively you may use a label slot.
      */
-    label;
+    get label() {
+        return this.required && !this._label.endsWith('*') ? this._label + ' *' : this._label;
+    }
+    set label(value) {
+        this._label = value;
+    }
+    /**
+     * Sometimes it can be helpful to always show the placeholder, even when the input has a value.
+     * For example a postcode field could have a placeholder `e.g. LD1 1AA` which is helpful to show.
+     */
+    alwaysShowPlaceholder = false;
     /**
      * Visually hide the label - but make it accessible.
      */
@@ -183,6 +196,8 @@ export class Input {
     readonly = false;
     /**
      * If `true`, the user must fill in a value before submitting a form.
+     * By default, setting this will also add an asterisk to the label.
+     * You can disable this by using the `label` slot instead.
      */
     required = false;
     /**
@@ -210,26 +225,6 @@ export class Input {
      * The value of the input.
      */
     value = '';
-    /**
-     * relevant to type="textarea". Vertical resizing - enable / disable or make automatic.
-     */
-    resize = 'auto';
-    /**
-     * relevant to type="textarea". Default number of rows to show
-     */
-    rows = 2;
-    /**
-     * relevant to type="textarea".
-     */
-    showCharCount = false;
-    shouldValidate() {
-        if (!this.hasRendered)
-            return;
-        requestAnimationFrame(() => {
-            if (this.validateOn === 'dirty')
-                this.validate();
-        });
-    }
     /**
      * Update the native input element when the value changes
      */
@@ -241,14 +236,75 @@ export class Input {
             if (this.value?.length)
                 this.nativeInput.style.height = this.nativeInput.scrollHeight + 'px';
         }
+        if (this.type === 'date') {
+            if (this.isDateDisabled(this.valueAsDate)) {
+                this.nativeInput.setCustomValidity('Date selected is not available.');
+            }
+            else if (this.nativeInput.validationMessage === 'Date selected is not available.') {
+                this.nativeInput.setCustomValidity('');
+            }
+        }
         requestAnimationFrame(() => {
             if (this.validateOn === 'dirty')
                 this.validate();
         });
     }
-    debounceChanged() {
-        this.nanoChange = debounceEvent(this.nanoChange, this.debounce);
+    /** Represents the value of the input or NaN if numeric conversion is impossible */
+    get valueAsNumber() {
+        if (this.type === 'textarea')
+            return NaN;
+        return this.nativeInput?.valueAsNumber || NaN;
+    }
+    /** Represents the current value of the input as a Date, or null if conversion is not possible */
+    get valueAsDate() {
+        if (this.type === 'textarea')
+            return null;
+        return new Date(this.value) || null;
     }
+    /**
+     * Whether to show a character count / remaining count when using the `maxlength` attribute.
+     */
+    showCharCount = false;
+    shouldValidate() {
+        if (!this.hasRendered)
+            return;
+        requestAnimationFrame(() => {
+            if (this.validateOn === 'dirty')
+                this.validate();
+        });
+    }
+    ///// TYPE SPECIFIC PROPS /////
+    /**
+     * relevant to `type="textarea"`. Vertical resizing - enable / disable or make automatic.
+     */
+    resize = 'auto';
+    /**
+     * relevant to `type="textarea"`. Default number of rows to show
+     */
+    rows = 2;
+    /**
+     * relevant to `type="date"`. Whether to show a date picker.
+     * Date pickers are not very useful if the potential input is too far in the distance or past e.g. Birthdays
+     */
+    showPicker = true;
+    /** relevant to `type="date"`. Controls which days are disabled and therefore disallowed.
+     * For example, this can be used to disallow selection of weekends.
+     * @returns `false` for not disabled and `true` for disabled */
+    isDateDisabled = () => false;
+    /**
+     * relevant to `type="date"`. Initial picker date. Defaults to `value` if set and today's date if not.
+     * Must be in IS0-8601 format: YYYY-MM-DD.
+     */
+    initialPickerDate;
+    /**
+     * relevant to `type="date"`. If `true`, the input will close after a date is picked.
+     */
+    closeAfterPicked = true;
+    /**
+     * relevant to `type="date"`. Other options to pass to the date picker.
+     * See the `nano-date-picker` docs for more information.
+     */
+    pickerOptions = {};
     /**
      * Emitted when a keyboard input occurred.
      */
@@ -398,12 +454,23 @@ export class Input {
             this.validate();
         this.nanoBlur.emit();
     };
-    onFocus = () => {
+    onFocus = (e) => {
+        if (this.type === 'date') {
+            // fix to stop native date picker from showing
+            e.preventDefault();
+        }
         this.hasFocus = true;
         this.focusChanged();
         this.nanoFocus.emit();
     };
-    onKeydown = () => {
+    onKeydown = (e) => {
+        if (this.type === 'date' && [' '].includes(e.key)) {
+            // fix to stop native date picker from showing
+            e.preventDefault();
+            if (this.showPicker) {
+                this.pickerDropdown?.show();
+            }
+        }
         if (this.shouldClearOnEdit()) {
             // Did the input value change after it was blurred and edited?
             if (this.didBlurAfterEdit && this.hasValue()) {
@@ -415,7 +482,7 @@ export class Input {
         }
     };
     clearTextInput = (ev) => {
-        if (this.clearInput && !this.readonly && !this.disabled && ev) {
+        if (this.clearable && !this.readonly && !this.disabled && ev) {
             ev.preventDefault();
             ev.stopPropagation();
         }
@@ -447,10 +514,6 @@ export class Input {
         this.hasHelperSlot = !!this.el.querySelector('[slot="helper"]');
         this.hasHelperEndSlot = !!this.el.querySelector('[slot="helper-end"]');
         this.datalist = this.el.querySelector(`${transformTag('nano-datalist')}:not([slot])`);
-        // breaking change introduced in v2. Rm in v3
-        if (this.el.querySelector('[slot="inline-button"]')) {
-            console.warn('The `inline-button` slot was renamed to `end` in v2 - please update your code', this.el);
-        }
     }
     connectedCallback() {
         this.debounceChanged();
@@ -484,10 +547,11 @@ export class Input {
         const moreId = this.showInlineError || this.hasHelperSlot ? this.inputId + '-more' : '';
         const helperEndId = this.hasHelperEndSlot ? this.inputId + '-helper' : '';
         this.rtl = this.el.ownerDocument.dir === 'rtl';
-        const compWrapOptions = (({ el, floatLabel, label, errorMessage, type, showInlineError, hasHelperSlot, hasLabelSlot, hideLabel, placeholder, maxlength, charCount, showCharCount, rtl, hasHelperEndSlot, }) => ({
+        const compWrapOptions = (({ el, floatLabel, label, alwaysShowPlaceholder, errorMessage, type, showInlineError, hasHelperSlot, hasLabelSlot, hideLabel, placeholder, maxlength, charCount, showCharCount, rtl, hasHelperEndSlot, }) => ({
             el,
             floatLabel,
             label,
+            alwaysShowPlaceholder,
             errorMessage,
             type,
             showInlineError,
@@ -509,22 +573,42 @@ export class Input {
             hasValue: this.hasValue(),
             controlId: this.inputId,
         };
-        const controlOptions = (({ clearInput, readonly, disabled }) => ({
-            clearInput,
+        const controlOptions = (({ clearable, readonly, disabled }) => ({
+            clearable,
             readonly,
             disabled,
-            clearControl: this.clearInput,
+            clearControl: this.clearable,
         }))(this);
-        return (h(Host, { key: 'dfed5ae52b51a714f2aa0218b9cee8081251a2c9', "aria-disabled": this.disabled ? 'true' : null, dir: this.rtl ? 'rtl' : null, class: {
-                ...createColorClasses(this.color),
+        return (h(Host, { key: '1601bf765681a833b22c05294a1c8d9b5c6be5ee', "aria-disabled": this.disabled ? 'true' : null, class: {
                 'has-value': this.hasValue(),
                 'has-focus': this.hasFocus,
-                'is-invalid': this._invalid,
+                'is-invalid': this._invalid === true,
+                'is-valid': this._invalid === false,
                 'nano-input': true,
-            } }, h("div", { key: '94d4634ca2fe48cce7f761fb4e6a3d640121baf9', style: { width: '100%' } }, h(FormControlWrap, { key: 'aa8bc2042e5f21fd351acabb4b515fba4cda0dba', ...wrapOptions }, h(FormControl, { key: 'ab008f2dd670122ed5998fdb9dcf004a14e5e274', ...controlOptions, onClearText: this.clearTextInput, control: this.el, ref: (el) => (this.nativeInputWrap = el) }, this.type !== 'textarea' && (h("input", { key: '2d23e3f0fe71c5d0b5cf56f849b0166dac2d6419', id: this.inputId, class: "input__native-ctrl", ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalise, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onBlur: this.handleBlur, onKeyDown: this.onKeydown, onInvalid: this.validate })), this.type === 'textarea' && (h("textarea", { key: '09639dab83617d2153981e04fe61088294b336cc', rows: this.floatLabel ? 1 : this.rows, id: this.inputId, class: {
+            } }, h("div", { key: '3db99291d328de9684137597706b79e4f24b65e2', style: { width: '100%' } }, h(FormControlWrap, { key: 'df525275b5c35b9ae3fdc793766a9af759740076', ...wrapOptions, class: {
+                'has-helper': this.hasHelperSlot,
+                'has-error': !!this.errorMessage &&
+                    this.showInlineError &&
+                    this._invalid === true,
+            } }, h(FormControl, { key: '8f25ff2340431b2ea29d5063877ad376ec229758', ...controlOptions, onClearText: this.clearTextInput, control: this.el, ref: (el) => (this.nativeInputWrap = el), showInlineError: this.showInlineError, endSlot: this.showPicker &&
+                this.type === 'date' &&
+                !this.readonly &&
+                !this.disabled && [
+                h("nano-dropdown", { slot: "end", dialogTitle: "Choose a date", class: "input__date-dropdown", part: "date__dropdown", placement: "bottom-end", skidding: 10, distance: 12, ref: (dd) => (this.pickerDropdown = dd), onNanoAfterShow: () => this.picker.setFocus(true) }, h("nano-icon-button", { label: "Open date picker", iconName: "light/calendar-days", slot: "trigger", class: "input__date-trigger" }), h("div", null, h("div", { class: "date-field__close-bar" }, h("nano-icon-button", { label: "Close date picker", iconName: "light/xmark", class: "input__date-close", onClick: (e) => {
+                        e.target
+                            .closest('nano-dropdown')
+                            ?.hide();
+                    }, ref: (btn) => (this.pickerCloseBtn = btn) })), h("nano-date-picker", { part: "date__picker", ref: (dp) => {
+                        this.picker = dp;
+                        this.picker.firstFocusEle = this.pickerCloseBtn;
+                    }, ...this.pickerOptions, isDateDisabled: this.isDateDisabled, onNanoDatePicked: (e) => {
+                        this.value = e.detail.value;
+                        this.pickerDropdown?.hide();
+                    }, min: this.min, max: this.max, "is-modal": true, selectedDate: this.value || this.initialPickerDate || undefined }))),
+            ] }, this.type !== 'textarea' && (h("input", { key: '97734d0168a049af1b22e4517db5e58d25a75b13', id: this.inputId, class: "input__native-ctrl", ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalise, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onClick: (e) => e.preventDefault(), onChange: this.onInput, onFocus: this.onFocus, onBlur: this.handleBlur, onKeyDown: this.onKeydown, onInvalid: this.validate })), this.type === 'textarea' && (h("textarea", { key: 'b1780aa8cf51d8b7440825d461d89e8746fcd96d', rows: this.floatLabel ? 1 : this.rows, id: this.inputId, class: {
                 'input__native-ctrl': true,
                 input__resizable: this.resize === 'true',
-            }, ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, autoCapitalize: this.autocapitalise, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onKeyDown: this.onKeydown, onInvalid: this.validate, onBlur: this.handleBlur })))), h("slot", { key: '42e80b566fe4ee06b4a65777d37fd77975f619a0' }))));
+            }, ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, autoCapitalize: this.autocapitalise, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onKeyDown: this.onKeydown, onInvalid: this.validate, onBlur: this.handleBlur })))), h("slot", { key: 'fa333ee624b824af60a8a79d09720e231e8d455c' }))));
     }
     static get is() { return "nano-input"; }
     static get encapsulation() { return "scoped"; }
@@ -541,11 +625,12 @@ export class Input {
     static get properties() {
         return {
             "invalid": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "any",
+                    "resolved": "any",
                     "references": {}
                 },
                 "required": false,
@@ -559,12 +644,12 @@ export class Input {
                 },
                 "getter": true,
                 "setter": false,
-                "attribute": "invalid",
                 "reflect": true,
-                "defaultValue": "false"
+                "defaultValue": "null"
             },
             "validityMessage": {
                 "type": "string",
+                "attribute": "validity-message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -582,36 +667,11 @@ export class Input {
                 },
                 "getter": true,
                 "setter": false,
-                "attribute": "validity-message",
-                "reflect": false
-            },
-            "color": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "Color",
-                    "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\"",
-                    "references": {
-                        "Color": {
-                            "location": "import",
-                            "path": "../../types/shared",
-                            "id": "src/types/shared.ts::Color"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The color to use from the application's color palette."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "color",
                 "reflect": false
             },
             "accept": {
                 "type": "string",
+                "attribute": "accept",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -626,11 +686,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accept",
                 "reflect": false
             },
             "autocapitalise": {
                 "type": "string",
+                "attribute": "autocapitalise",
                 "mutable": false,
                 "complexType": {
                     "original": "'none' | 'sentences' | 'words' | 'characters'",
@@ -645,12 +705,12 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "autocapitalise",
                 "reflect": false,
                 "defaultValue": "'none'"
             },
             "autocomplete": {
                 "type": "string",
+                "attribute": "autocomplete",
                 "mutable": false,
                 "complexType": {
                     "original": "'on' | 'off'",
@@ -665,12 +725,12 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "autocomplete",
                 "reflect": false,
                 "defaultValue": "'off'"
             },
             "autocorrect": {
                 "type": "string",
+                "attribute": "autocorrect",
                 "mutable": false,
                 "complexType": {
                     "original": "'on' | 'off'",
@@ -685,12 +745,12 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "autocorrect",
                 "reflect": false,
                 "defaultValue": "'off'"
             },
             "autofocus": {
                 "type": "boolean",
+                "attribute": "autofocus",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -705,12 +765,12 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "autofocus",
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "clearInput": {
+            "clearable": {
                 "type": "boolean",
+                "attribute": "clearable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -725,12 +785,12 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "clear-input",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "clearOnEdit": {
                 "type": "boolean",
+                "attribute": "clear-on-edit",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -745,11 +805,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "clear-on-edit",
                 "reflect": false
             },
             "debounce": {
                 "type": "number",
+                "attribute": "debounce",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -764,12 +824,12 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "debounce",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -784,12 +844,12 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "inputmode": {
                 "type": "string",
+                "attribute": "inputmode",
                 "mutable": false,
                 "complexType": {
                     "original": "| 'none'\n    | 'text'\n    | 'tel'\n    | 'url'\n    | 'email'\n    | 'numeric'\n    | 'decimal'\n    | 'search'",
@@ -804,11 +864,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "inputmode",
                 "reflect": false
             },
             "validateOn": {
                 "type": "string",
+                "attribute": "validate-on",
                 "mutable": true,
                 "complexType": {
                     "original": "'dirty' | 'submit' | 'submitThenDirty'",
@@ -823,12 +883,12 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "validate-on",
                 "reflect": false,
                 "defaultValue": "'submitThenDirty'"
             },
             "showInlineError": {
                 "type": "boolean",
+                "attribute": "show-inline-error",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -843,31 +903,51 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-inline-error",
                 "reflect": true,
                 "defaultValue": "true"
             },
             "label": {
                 "type": "string",
-                "mutable": false,
+                "attribute": "label",
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
                     "references": {}
                 },
-                "required": true,
+                "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "String to place within a label element. Alternatively you may use a label slot."
                 },
+                "getter": true,
+                "setter": true,
+                "reflect": false
+            },
+            "alwaysShowPlaceholder": {
+                "type": "boolean",
+                "attribute": "always-show-placeholder",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sometimes it can be helpful to always show the placeholder, even when the input has a value.\nFor example a postcode field could have a placeholder `e.g. LD1 1AA` which is helpful to show."
+                },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "false"
             },
             "hideLabel": {
                 "type": "boolean",
+                "attribute": "hide-label",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -882,12 +962,12 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hide-label",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "floatLabel": {
                 "type": "boolean",
+                "attribute": "float-label",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -902,12 +982,12 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "float-label",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "max": {
                 "type": "string",
+                "attribute": "max",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -922,11 +1002,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max",
                 "reflect": false
             },
             "maxlength": {
                 "type": "number",
+                "attribute": "maxlength",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -941,11 +1021,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "maxlength",
                 "reflect": false
             },
             "min": {
                 "type": "string",
+                "attribute": "min",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -960,11 +1040,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "min",
                 "reflect": false
             },
             "minlength": {
                 "type": "number",
+                "attribute": "minlength",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -979,11 +1059,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "minlength",
                 "reflect": false
             },
             "multiple": {
                 "type": "boolean",
+                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -998,11 +1078,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "multiple",
                 "reflect": false
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1017,12 +1097,12 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false,
                 "defaultValue": "this.inputId"
             },
             "pattern": {
                 "type": "string",
+                "attribute": "pattern",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1037,11 +1117,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "pattern",
                 "reflect": false
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string | null",
@@ -1056,11 +1136,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
                 "reflect": false
             },
             "readonly": {
                 "type": "boolean",
+                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1075,12 +1155,12 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "readonly",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1091,16 +1171,16 @@ export class Input {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the user must fill in a value before submitting a form."
+                    "text": "If `true`, the user must fill in a value before submitting a form.\nBy default, setting this will also add an asterisk to the label.\nYou can disable this by using the `label` slot instead."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "spellcheck": {
                 "type": "boolean",
+                "attribute": "spellcheck",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1115,12 +1195,12 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "spellcheck",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "step": {
                 "type": "string",
+                "attribute": "step",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1135,11 +1215,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "step",
                 "reflect": false
             },
             "size": {
                 "type": "number",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -1154,11 +1234,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false
             },
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "TextFieldTypes",
@@ -1179,12 +1259,12 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
                 "reflect": true,
                 "defaultValue": "'text'"
             },
             "form": {
                 "type": "string",
+                "attribute": "form",
                 "mutable": false,
                 "complexType": {
                     "original": "string | null",
@@ -1199,11 +1279,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "form",
                 "reflect": false
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string | null",
@@ -1218,12 +1298,74 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false,
                 "defaultValue": "''"
             },
+            "valueAsNumber": {
+                "type": "number",
+                "attribute": "value-as-number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Represents the value of the input or NaN if numeric conversion is impossible"
+                },
+                "getter": true,
+                "setter": false,
+                "reflect": false
+            },
+            "valueAsDate": {
+                "type": "unknown",
+                "attribute": "value-as-date",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date",
+                    "resolved": "Date",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Represents the current value of the input as a Date, or null if conversion is not possible"
+                },
+                "getter": true,
+                "setter": false
+            },
+            "showCharCount": {
+                "type": "boolean",
+                "attribute": "show-char-count",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show a character count / remaining count when using the `maxlength` attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "resize": {
                 "type": "string",
+                "attribute": "resize",
                 "mutable": false,
                 "complexType": {
                     "original": "'true' | 'false' | 'auto'",
@@ -1234,16 +1376,16 @@ export class Input {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "relevant to type=\"textarea\". Vertical resizing - enable / disable or make automatic."
+                    "text": "relevant to `type=\"textarea\"`. Vertical resizing - enable / disable or make automatic."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "resize",
                 "reflect": false,
                 "defaultValue": "'auto'"
             },
             "rows": {
                 "type": "number",
+                "attribute": "rows",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -1254,16 +1396,16 @@ export class Input {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "relevant to type=\"textarea\". Default number of rows to show"
+                    "text": "relevant to `type=\"textarea\"`. Default number of rows to show"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "rows",
                 "reflect": false,
                 "defaultValue": "2"
             },
-            "showCharCount": {
+            "showPicker": {
                 "type": "boolean",
+                "attribute": "show-picker",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1274,13 +1416,108 @@ export class Input {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "relevant to type=\"textarea\"."
+                    "text": "relevant to `type=\"date\"`. Whether to show a date picker.\nDate pickers are not very useful if the potential input is too far in the distance or past e.g. Birthdays"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-char-count",
                 "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "true"
+            },
+            "isDateDisabled": {
+                "type": "unknown",
+                "attribute": "is-date-disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "DateDisabledPredicate",
+                    "resolved": "(date: Date) => boolean",
+                    "references": {
+                        "DateDisabledPredicate": {
+                            "location": "import",
+                            "path": "../date-picker/date-picker-interface",
+                            "id": "src/components/date-picker/date-picker-interface.d.ts::DateDisabledPredicate"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "returns",
+                            "text": "`false` for not disabled and `true` for disabled"
+                        }],
+                    "text": "relevant to `type=\"date\"`. Controls which days are disabled and therefore disallowed.\nFor example, this can be used to disallow selection of weekends."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "() => false"
+            },
+            "initialPickerDate": {
+                "type": "string",
+                "attribute": "initial-picker-date",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "relevant to `type=\"date\"`. Initial picker date. Defaults to `value` if set and today's date if not.\nMust be in IS0-8601 format: YYYY-MM-DD."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "closeAfterPicked": {
+                "type": "boolean",
+                "attribute": "close-after-picked",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "relevant to `type=\"date\"`. If `true`, the input will close after a date is picked."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "pickerOptions": {
+                "type": "unknown",
+                "attribute": "picker-options",
+                "mutable": false,
+                "complexType": {
+                    "original": "Partial<NanoDatePicker>",
+                    "resolved": "{ host?: HTMLNanoDatePickerElement; activeFocus?: boolean; focusedDay?: Date; selectedDate?: string; min?: string; max?: string; firstDayOfWeek?: DaysOfWeek; localization?: DuetLocalizedText; isDateDisabled?: DateDisabledPredicate; isModal?: boolean; firstFocusEle?: HTMLElement; nanoDatePicked?: EventEmitter<PickerChangeEvent>; setFocus?: (day?: boolean) => Promise<void>; handleSelectedDateChange?: () => void; componentWillLoad?: () => void; render?: () => any; }",
+                    "references": {
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "NanoDatePicker": {
+                            "location": "import",
+                            "path": "../date-picker/date-picker",
+                            "id": "src/components/date-picker/date-picker.tsx::NanoDatePicker"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "relevant to `type=\"date\"`. Other options to pass to the date picker.\nSee the `nano-date-picker` docs for more information."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
             }
         };
     }
@@ -1553,6 +1790,12 @@ export class Input {
         return [{
                 "propName": "datalist",
                 "methodName": "setDataListOpts"
+            }, {
+                "propName": "debounce",
+                "methodName": "debounceChanged"
+            }, {
+                "propName": "value",
+                "methodName": "valueChanged"
             }, {
                 "propName": "minlength",
                 "methodName": "shouldValidate"
@@ -1581,11 +1824,8 @@ export class Input {
                 "propName": "inputmode",
                 "methodName": "shouldValidate"
             }, {
-                "propName": "value",
-                "methodName": "valueChanged"
-            }, {
-                "propName": "debounce",
-                "methodName": "debounceChanged"
+                "propName": "type",
+                "methodName": "shouldValidate"
             }];
     }
     static get listeners() {
@@ -1610,4 +1850,3 @@ export class Input {
             }];
     }
 }
-//# sourceMappingURL=input.js.map