@ionic/core 7.4.1 → 7.4.2-dev.11695324357.11675a9b

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

@@ -114,6 +114,7 @@ export class Input {
     this.size = undefined;
     this.type = 'text';
     this.value = '';
+    this.defaultValue = this.getValue();
   }
   debounceChanged() {
     const { ionInput, debounce, originalIonInput } = this;
@@ -151,6 +152,9 @@ export class Input {
     }
     this.emitStyle();
   }
+  defaultValueChanged(newValue) {
+    this.value = this.defaultValue = this.getValue(newValue);
+  }
   componentWillLoad() {
     this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, ['tabindex', 'title', 'data-form-type']));
   }
@@ -169,6 +173,11 @@ export class Input {
   }
   componentDidLoad() {
     this.originalIonInput = this.ionInput;
+    if (this.value === '' || this.value == null) {
+      if (this.defaultValue !== '') {
+        this.value = this.getValue(this.defaultValue);
+      }
+    }
   }
   componentDidRender() {
     var _a;
@@ -237,8 +246,8 @@ export class Input {
     const { type, clearOnEdit } = this;
     return clearOnEdit === undefined ? type === 'password' : clearOnEdit;
   }
-  getValue() {
-    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();
+  getValue(value = this.value) {
+    return typeof value === 'number' ? value.toString() : (value || '').toString();
   }
   emitStyle() {
     if (this.legacyFormController.hasLegacyControl()) {
@@ -357,6 +366,7 @@ export class Input {
     const { disabled, fill, readonly, shape, inputId, labelPlacement } = this;
     const mode = getIonMode(this);
     const value = this.getValue();
+    const defaultValue = this.getValue(this.defaultValue);
     const inItem = hostContext('ion-item', this.el);
     const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
     return (h(Host, { class: createColorClasses(this.color, {
@@ -369,7 +379,7 @@ export class Input {
         'in-item': inItem,
         'in-item-color': hostContext('ion-item.ion-color', this.el),
         'input-disabled': disabled,
-      }) }, h("label", { class: "input-wrapper" }, this.renderLabelContainer(), h("div", { class: "native-wrapper" }, h("input", Object.assign({ class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, accept: this.accept, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, 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: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+      }) }, h("label", { class: "input-wrapper" }, this.renderLabelContainer(), h("div", { class: "native-wrapper" }, h("input", Object.assign({ class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, accept: this.accept, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, 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: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, defaultValue: defaultValue, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
         /**
          * This prevents mobile browsers from
          * blurring the input when the clear
@@ -398,6 +408,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
     }
     const mode = getIonMode(this);
     const value = this.getValue();
+    const defaultValue = this.getValue(this.defaultValue);
     const labelId = this.inputId + '-lbl';
     const label = findItemLabel(this.el);
     if (label) {
@@ -409,7 +420,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
         'has-focus': this.hasFocus,
         'legacy-input': true,
         'in-item-color': hostContext('ion-item.ion-color', this.el),
-      }) }, h("input", Object.assign({ class: "native-input", ref: (input) => (this.nativeInput = input), "aria-labelledby": label ? label.id : null, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, 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.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown }, this.inheritedAttributes)), this.clearInput && !this.readonly && !this.disabled && (h("button", { "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+      }) }, h("input", Object.assign({ class: "native-input", ref: (input) => (this.nativeInput = input), "aria-labelledby": label ? label.id : null, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, 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, defaultValue: defaultValue, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown }, this.inheritedAttributes)), this.clearInput && !this.readonly && !this.disabled && (h("button", { "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
         /**
          * This prevents mobile browsers from
          * blurring the input when the clear
@@ -1069,9 +1080,15 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
         "type": "any",
         "mutable": true,
         "complexType": {
-          "original": "string | number | null",
+          "original": "InputValue",
           "resolved": "null | number | string | undefined",
-          "references": {}
+          "references": {
+            "InputValue": {
+              "location": "import",
+              "path": "./input-interface",
+              "id": "src/components/input/input-interface.ts::InputValue"
+            }
+          }
         },
         "required": false,
         "optional": true,
@@ -1082,6 +1099,30 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
         "attribute": "value",
         "reflect": false,
         "defaultValue": "''"
+      },
+      "defaultValue": {
+        "type": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "InputValue",
+          "resolved": "null | number | string | undefined",
+          "references": {
+            "InputValue": {
+              "location": "import",
+              "path": "./input-interface",
+              "id": "src/components/input/input-interface.ts::InputValue"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "default-value",
+        "reflect": false,
+        "defaultValue": "this.getValue()"
       }
     };
   }
@@ -1255,6 +1296,9 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
       }, {
         "propName": "value",
         "methodName": "valueChanged"
+      }, {
+        "propName": "defaultValue",
+        "methodName": "defaultValueChanged"
       }];
   }
 }

package/dist/collection/components/item-sliding/test/basic/item-sliding.e2e.js

@@ -3,16 +3,46 @@
  */
 import { expect } from "@playwright/test";
 import { configs, dragElementBy, test } from "../../../../utils/test/playwright/index";
-import { testSlidingItem } from "../test.utils";
 /**
- * item-sliding doesn't have mode-specific styling
+ * item-sliding doesn't have mode-specific styling,
+ * but the child components, item-options and item-option, do.
+ *
+ * It is important to test all modes to ensure that the
+ * child components are being rendered correctly.
  */
-configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('item-sliding: basic'), () => {
-    test.fixme('should not have visual regressions', async ({ page }) => {
+    test.beforeEach(async ({ page }) => {
       await page.goto(`/src/components/item-sliding/test/basic`, config);
-      await testSlidingItem(page, 'item2', 'start', screenshot, true);
-      await testSlidingItem(page, 'item2', 'end', screenshot);
+    });
+    test.describe('start options', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        const item = page.locator('#item2');
+        /**
+         * Negative dragByX value to drag element from the right to the left
+         * to reveal the options on the right side.
+         * Positive dragByX value to drag element from the left to the right
+         * to reveal the options on the left side.
+         */
+        const dragByX = config.direction === 'rtl' ? -150 : 150;
+        await dragElementBy(item, page, dragByX);
+        await page.waitForChanges();
+        await expect(item).toHaveScreenshot(screenshot('item-sliding-start'));
+      });
+    });
+    test.describe('end options', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        const item = page.locator('#item2');
+        /**
+         * Negative dragByX value to drag element from the right to the left
+         * to reveal the options on the right side.
+         * Positive dragByX value to drag element from the left to the right
+         * to reveal the options on the left side.
+         */
+        const dragByX = config.direction === 'rtl' ? 150 : -150;
+        await dragElementBy(item, page, dragByX);
+        await expect(item).toHaveScreenshot(screenshot('item-sliding-end'));
+      });
     });
   });
 });

package/dist/collection/components/item-sliding/test/icons/item-sliding.e2e.js

@@ -1,19 +1,34 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { configs, test } from "../../../../utils/test/playwright/index";
-import { testSlidingItem } from "../test.utils";
-// TODO FW-3006
+import { expect } from "@playwright/test";
+import { configs, test, dragElementBy } from "../../../../utils/test/playwright/index";
 /**
- * item-sliding doesn't have mode-specific styling
+ * item-sliding doesn't have mode-specific styling,
+ * but the child components, item-options and item-option, do.
+ *
+ * It is important to test all modes to ensure that the
+ * child components are being rendered correctly.
  */
-configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
-  test.describe.skip(title('item-sliding: icons'), () => {
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('item-sliding: icons'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto(`/src/components/item-sliding/test/icons`, config);
       const itemIDs = ['iconsOnly', 'iconsStart', 'iconsEnd', 'iconsTop', 'iconsBottom'];
       for (const itemID of itemIDs) {
-        await testSlidingItem(page, itemID, itemID, screenshot);
+        const item = page.locator(`#${itemID}`);
+        /**
+         * Negative dragByX value to drag element from the right to the left
+         * to reveal the options on the right side.
+         * Positive dragByX value to drag element from the left to the right
+         * to reveal the options on the left side.
+         */
+        const dragByX = config.direction === 'rtl' ? 150 : -150;
+        await dragElementBy(item, page, dragByX);
+        await page.waitForChanges();
+        // Convert camelCase ids to kebab-case for screenshot file names
+        const itemIDKebab = itemID.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+        await expect(item).toHaveScreenshot(screenshot(`item-sliding-${itemIDKebab}`));
       }
     });
   });

package/dist/collection/components/item-sliding/test/scroll-target/item-sliding.e2e.js

@@ -2,25 +2,19 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { expect } from "@playwright/test";
-import { configs, test } from "../../../../utils/test/playwright/index";
+import { configs, test, dragElementBy } from "../../../../utils/test/playwright/index";
 /**
  * This behavior does not vary across modes/directions
  */
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('item-sliding: scroll-target'), () => {
-    // TODO FW-3006
-    test.skip('should not scroll when the item-sliding is swiped in custom scroll target', async ({ page, skip }) => {
+    test('should not scroll when the item-sliding is swiped in custom scroll target', async ({ page, skip }) => {
       skip.browser('webkit', 'mouse.wheel is not available in WebKit');
       await page.goto(`/src/components/item-sliding/test/scroll-target`, config);
       const itemSlidingEl = page.locator('ion-item-sliding');
       const scrollEl = page.locator('.ion-content-scroll-host');
       expect(await scrollEl.evaluate((el) => el.scrollTop)).toEqual(0);
-      const box = (await itemSlidingEl.boundingBox());
-      const centerX = box.x + box.width / 2;
-      const centerY = box.y + box.height / 2;
-      await page.mouse.move(centerX, centerY);
-      await page.mouse.down();
-      await page.mouse.move(centerX - 30, centerY);
+      await dragElementBy(itemSlidingEl, page, -150, 0, undefined, undefined, false);
       /**
        * Do not use scrollToBottom() or other scrolling methods
        * on ion-content as those will update the scroll position.

package/dist/collection/components/item-sliding/test/test.utils.js

@@ -2,6 +2,11 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { expect } from "@playwright/test";
+/**
+ * Warning: This function will fail when in RTL mode.
+ * TODO(FW-3711): Remove the `directions` config when this issue preventing
+ * tests from passing in RTL mode is resolved.
+ */
 export const testSlidingItem = async (page, itemID, screenshotNameSuffix, screenshot, openStart = false) => {
   const item = page.locator(`#${itemID}`);
   // passing a param into the eval callback is tricky due to execution context
@@ -17,6 +22,9 @@ export const testSlidingItem = async (page, itemID, screenshotNameSuffix, screen
     });
   }
   // opening animation takes longer than waitForChanges accounts for
+  // especially if another item sliding is already open,
+  // so we wait to ensure the opened item is closed before
+  // opening another
   await page.waitForTimeout(500);
   await expect(item).toHaveScreenshot(screenshot(`item-sliding-${screenshotNameSuffix}`));
   await item.evaluate(async (el) => {

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-09-20T13:15:45",
+  "timestamp": "2023-09-21T19:28:39",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.3.0",
@@ -10175,6 +10175,43 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "defaultValue",
+          "type": "null | number | string | undefined",
+          "complexType": {
+            "original": "InputValue",
+            "resolved": "null | number | string | undefined",
+            "references": {
+              "InputValue": {
+                "location": "import",
+                "path": "./input-interface",
+                "id": "src/components/input/input-interface.ts::InputValue"
+              }
+            }
+          },
+          "mutable": true,
+          "attr": "default-value",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "default": "this.getValue()",
+          "values": [
+            {
+              "type": "null"
+            },
+            {
+              "type": "number"
+            },
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "disabled",
           "type": "boolean",
@@ -10896,9 +10933,15 @@
           "name": "value",
           "type": "null | number | string | undefined",
           "complexType": {
-            "original": "string | number | null",
+            "original": "InputValue",
             "resolved": "null | number | string | undefined",
-            "references": {}
+            "references": {
+              "InputValue": {
+                "location": "import",
+                "path": "./input-interface",
+                "id": "src/components/input/input-interface.ts::InputValue"
+              }
+            }
           },
           "mutable": true,
           "attr": "value",
@@ -29015,6 +29058,11 @@
       "docstring": "",
       "path": "src/interface.d.ts"
     },
+    "src/components/input/input-interface.ts::InputValue": {
+      "declaration": "export type InputValue = string | number | null | undefined;",
+      "docstring": "",
+      "path": "src/components/input/input-interface.ts"
+    },
     "src/components/input/input-interface.ts::InputInputEventDetail": {
       "declaration": "export interface InputInputEventDetail {\n  value?: string | null;\n  event?: Event;\n}",
       "docstring": "",

package/dist/esm/ion-input.entry.js

@@ -121,6 +121,7 @@ const Input = class {
     this.size = undefined;
     this.type = 'text';
     this.value = '';
+    this.defaultValue = this.getValue();
   }
   debounceChanged() {
     const { ionInput, debounce, originalIonInput } = this;
@@ -158,6 +159,9 @@ const Input = class {
     }
     this.emitStyle();
   }
+  defaultValueChanged(newValue) {
+    this.value = this.defaultValue = this.getValue(newValue);
+  }
   componentWillLoad() {
     this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, ['tabindex', 'title', 'data-form-type']));
   }
@@ -176,6 +180,11 @@ const Input = class {
   }
   componentDidLoad() {
     this.originalIonInput = this.ionInput;
+    if (this.value === '' || this.value == null) {
+      if (this.defaultValue !== '') {
+        this.value = this.getValue(this.defaultValue);
+      }
+    }
   }
   componentDidRender() {
     var _a;
@@ -244,8 +253,8 @@ const Input = class {
     const { type, clearOnEdit } = this;
     return clearOnEdit === undefined ? type === 'password' : clearOnEdit;
   }
-  getValue() {
-    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();
+  getValue(value = this.value) {
+    return typeof value === 'number' ? value.toString() : (value || '').toString();
   }
   emitStyle() {
     if (this.legacyFormController.hasLegacyControl()) {
@@ -364,6 +373,7 @@ const Input = class {
     const { disabled, fill, readonly, shape, inputId, labelPlacement } = this;
     const mode = getIonMode(this);
     const value = this.getValue();
+    const defaultValue = this.getValue(this.defaultValue);
     const inItem = hostContext('ion-item', this.el);
     const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
     return (h(Host, { class: createColorClasses(this.color, {
@@ -376,7 +386,7 @@ const Input = class {
         'in-item': inItem,
         'in-item-color': hostContext('ion-item.ion-color', this.el),
         'input-disabled': disabled,
-      }) }, h("label", { class: "input-wrapper" }, this.renderLabelContainer(), h("div", { class: "native-wrapper" }, h("input", Object.assign({ class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, accept: this.accept, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, 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: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+      }) }, h("label", { class: "input-wrapper" }, this.renderLabelContainer(), h("div", { class: "native-wrapper" }, h("input", Object.assign({ class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, accept: this.accept, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, 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: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, defaultValue: defaultValue, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
         /**
          * This prevents mobile browsers from
          * blurring the input when the clear
@@ -405,6 +415,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
     }
     const mode = getIonMode(this);
     const value = this.getValue();
+    const defaultValue = this.getValue(this.defaultValue);
     const labelId = this.inputId + '-lbl';
     const label = findItemLabel(this.el);
     if (label) {
@@ -416,7 +427,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
         'has-focus': this.hasFocus,
         'legacy-input': true,
         'in-item-color': hostContext('ion-item.ion-color', this.el),
-      }) }, h("input", Object.assign({ class: "native-input", ref: (input) => (this.nativeInput = input), "aria-labelledby": label ? label.id : null, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, 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.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown }, this.inheritedAttributes)), this.clearInput && !this.readonly && !this.disabled && (h("button", { "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+      }) }, h("input", Object.assign({ class: "native-input", ref: (input) => (this.nativeInput = input), "aria-labelledby": label ? label.id : null, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, 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, defaultValue: defaultValue, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown }, this.inheritedAttributes)), this.clearInput && !this.readonly && !this.disabled && (h("button", { "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
         /**
          * This prevents mobile browsers from
          * blurring the input when the clear
@@ -434,7 +445,8 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
     "debounce": ["debounceChanged"],
     "disabled": ["disabledChanged"],
     "placeholder": ["placeholderChanged"],
-    "value": ["valueChanged"]
+    "value": ["valueChanged"],
+    "defaultValue": ["defaultValueChanged"]
   }; }
 };
 let inputIds = 0;