@ionic/core 7.7.2-dev.11707932366.16baf005 → 7.7.2-dev.11707941206.120570b8

package/dist/collection/components/input/input.ios.css

@@ -81,7 +81,7 @@
   --placeholder-color: initial;
   --placeholder-font-style: initial;
   --placeholder-font-weight: initial;
-  --placeholder-opacity: var(--ion-placeholder-opacity, 0.6);
+  --placeholder-opacity: 0.6;
   --padding-top: 0px;
   --padding-end: 0px;
   --padding-bottom: 0px;
@@ -89,9 +89,9 @@
   --background: transparent;
   --color: initial;
   --border-style: solid;
-  --highlight-color-focused: var(--ion-color-primary, #0054e9);
-  --highlight-color-valid: var(--ion-color-success, #2dd55b);
-  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
+  --highlight-color-focused: var(--ion-color-primary, #3880ff);
+  --highlight-color-valid: var(--ion-color-success, #2dd36f);
+  --highlight-color-invalid: var(--ion-color-danger, #eb445a);
   /**
    * This is a private API that is used to switch
    * out the highlight color based on the state
@@ -102,7 +102,6 @@
   display: block;
   position: relative;
   width: 100%;
-  min-height: 44px;
   /* stylelint-disable-next-line all */
   padding: 0 !important;
   color: var(--color);
@@ -110,15 +109,44 @@
   z-index: 2;
 }
 
+:host(.legacy-input) {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  background: var(--background);
+}
+
+:host(.legacy-input) .native-input {
+  -webkit-padding-start: var(--padding-start);
+  padding-inline-start: var(--padding-start);
+  -webkit-padding-end: var(--padding-end);
+  padding-inline-end: var(--padding-end);
+  padding-top: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
+  border-radius: var(--border-radius);
+}
+
+:host-context(ion-item:not(.item-label):not(.item-has-modern-input)) {
+  --padding-start: 0;
+}
+
 :host-context(ion-item)[slot=start],
 :host-context(ion-item)[slot=end] {
   width: auto;
 }
 
+:host(.legacy-input.ion-color) {
+  color: var(--ion-color-base);
+}
+
 :host(.ion-color) {
   --highlight-color-focused: var(--ion-color-base);
 }
 
+:host(:not(.legacy-input)) {
+  min-height: 44px;
+}
+
 /**
  * Since the label sits on top of the element,
  * the component needs to be taller otherwise the
@@ -191,8 +219,32 @@
   position: absolute;
   pointer-events: none;
 }
-.cloned-input {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  .cloned-input {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .cloned-input {
+    left: 0;
+  }
+  :host-context([dir=rtl]) .cloned-input {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  [dir=rtl] .cloned-input {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    .cloned-input:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 /**
@@ -204,6 +256,13 @@
   opacity: 1;
 }
 
+:host(.legacy-input) .input-clear-icon {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
 .input-clear-icon {
   -webkit-margin-start: auto;
   margin-inline-start: auto;
@@ -225,7 +284,7 @@
   outline: none;
   background-color: transparent;
   background-repeat: no-repeat;
-  color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
+  color: var(--ion-color-step-600, #666666);
   visibility: hidden;
   appearance: none;
 }
@@ -249,6 +308,25 @@
   visibility: visible;
 }
 
+:host(.has-focus.legacy-input) {
+  pointer-events: none;
+}
+
+:host(.has-focus.legacy-input) input,
+:host(.has-focus.legacy-input) a,
+:host(.has-focus.legacy-input) button {
+  pointer-events: auto;
+}
+
+:host-context(.item-label-floating.item-has-placeholder:not(.item-has-value)) {
+  opacity: 0;
+}
+
+:host-context(.item-label-floating.item-has-placeholder:not(.item-has-value).item-has-focus) {
+  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  opacity: 1;
+}
+
 .input-wrapper {
   -webkit-padding-start: var(--padding-start);
   padding-inline-start: var(--padding-start);
@@ -339,7 +417,7 @@
 
 .input-bottom .helper-text {
   display: block;
-  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
+  color: var(--ion-color-step-550, #737373);
 }
 
 :host(.ion-touched.ion-invalid) .input-bottom .error-text {
@@ -358,7 +436,7 @@
    */
   -webkit-margin-start: auto;
   margin-inline-start: auto;
-  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
+  color: var(--ion-color-step-550, #737373);
   white-space: nowrap;
   padding-inline-start: 16px;
 }
@@ -708,15 +786,30 @@
  */
 :host {
   --border-width: 0.55px;
-  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));
+  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));
   font-size: inherit;
 }
 
+:host(.legacy-input) {
+  --padding-top: 10px;
+  --padding-end: 8px;
+  --padding-bottom: 10px;
+  --padding-start: 0;
+}
+
+:host-context(.item-label-stacked),
+:host-context(.item-label-floating) {
+  --padding-top: 8px;
+  --padding-bottom: 8px;
+  --padding-start: 0px;
+}
+
 .input-clear-icon ion-icon {
   width: 18px;
   height: 18px;
 }
 
+:host(.legacy-input) .native-input[disabled],
 :host(.input-disabled) {
   opacity: 0.3;
 }

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

@@ -2,8 +2,9 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Build, Host, forceUpdate, h } from "@stencil/core";
-import { createNotchController } from "../../utils/forms/index";
-import { inheritAriaAttributes, debounceEvent, inheritAttributes, componentOnReady } from "../../utils/helpers";
+import { createLegacyFormController, createNotchController } from "../../utils/forms/index";
+import { inheritAriaAttributes, debounceEvent, findItemLabel, inheritAttributes, componentOnReady, } from "../../utils/helpers";
+import { printIonWarning } from "../../utils/logging/index";
 import { createSlotMutationController } from "../../utils/slot-mutation-controller";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { closeCircle, closeSharp } from "ionicons/icons";
@@ -21,6 +22,8 @@ export class Input {
         this.inputId = `ion-input-${inputIds++}`;
         this.inheritedAttributes = {};
         this.isComposing = false;
+        // This flag ensures we log the deprecation warning at most once.
+        this.hasLoggedDeprecationWarning = false;
         /**
          * `true` if the input was cleared as a result of the user typing
          * with `clearOnEdit` enabled.
@@ -40,6 +43,7 @@ export class Input {
         };
         this.onBlur = (ev) => {
             this.hasFocus = false;
+            this.emitStyle();
             if (this.focusedValue !== this.value) {
                 /**
                  * Emits the `ionChange` event when the input value
@@ -53,6 +57,7 @@ export class Input {
         this.onFocus = (ev) => {
             this.hasFocus = true;
             this.focusedValue = this.value;
+            this.emitStyle();
             this.ionFocus.emit(ev);
         };
         this.onKeydown = (ev) => {
@@ -76,6 +81,7 @@ export class Input {
         };
         this.hasFocus = false;
         this.color = undefined;
+        this.accept = undefined;
         this.autocapitalize = 'off';
         this.autocomplete = 'off';
         this.autocorrect = 'off';
@@ -93,6 +99,7 @@ export class Input {
         this.helperText = undefined;
         this.label = undefined;
         this.labelPlacement = 'start';
+        this.legacy = undefined;
         this.max = undefined;
         this.maxlength = undefined;
         this.min = undefined;
@@ -106,6 +113,7 @@ export class Input {
         this.shape = undefined;
         this.spellcheck = false;
         this.step = undefined;
+        this.size = undefined;
         this.type = 'text';
         this.value = '';
     }
@@ -117,6 +125,15 @@ export class Input {
          */
         this.ionInput = debounce === undefined ? originalIonInput !== null && originalIonInput !== void 0 ? originalIonInput : ionInput : debounceEvent(ionInput, debounce);
     }
+    disabledChanged() {
+        this.emitStyle();
+    }
+    /**
+     * Update the item classes when the placeholder changes
+     */
+    placeholderChanged() {
+        this.emitStyle();
+    }
     /**
      * Update the native input element when the value changes
      */
@@ -134,14 +151,17 @@ export class Input {
              */
             nativeInput.value = value;
         }
+        this.emitStyle();
     }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, ['tabindex', 'title', 'data-form-type']));
     }
     connectedCallback() {
         const { el } = this;
+        this.legacyFormController = createLegacyFormController(el);
         this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate(this));
         this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
+        this.emitStyle();
         this.debounceChanged();
         if (Build.isBrowser) {
             document.dispatchEvent(new CustomEvent('ionInputDidLoad', {
@@ -231,6 +251,20 @@ export class Input {
     getValue() {
         return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();
     }
+    emitStyle() {
+        if (this.legacyFormController.hasLegacyControl()) {
+            this.ionStyle.emit({
+                interactive: true,
+                input: true,
+                'has-placeholder': this.placeholder !== undefined,
+                'has-value': this.hasValue(),
+                'has-focus': this.hasFocus,
+                'interactive-disabled': this.disabled,
+                // TODO(FW-2764): remove this
+                legacy: !!this.legacy,
+            });
+        }
+    }
     checkClearOnEdit(ev) {
         if (!this.shouldClearOnEdit()) {
             return;
@@ -351,7 +385,7 @@ export class Input {
          */
         return this.renderLabel();
     }
-    render() {
+    renderInput() {
         const { disabled, fill, readonly, shape, inputId, labelPlacement, el, hasFocus } = this;
         const mode = getIonMode(this);
         const value = this.getValue();
@@ -377,7 +411,7 @@ export class Input {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '40fe183aac83458bbd0cb356d539b56303b3a30f', class: createColorClasses(this.color, {
+        return (h(Host, { class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -388,14 +422,58 @@ export class Input {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, h("label", { key: 'faeb8ffc71552fdf438861819acebb8b77e424d0', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '335a71f75bf3a66501ae9112fe9142429c43a5e2', class: "native-wrapper" }, h("slot", { key: '15b2affe724d6d94a47c7181b136aea8f7e66780', name: "start" }), h("input", Object.assign({ key: 'd6eb3b380a5849552d102161f3ea80d5eaf5fdac', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, 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, 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", htmlFor: inputId }, this.renderLabelContainer(), h("div", { class: "native-wrapper" }, h("slot", { name: "start" }), 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) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.clearTextInput }, h("ion-icon", { "aria-hidden": "true", icon: mode === 'ios' ? closeCircle : closeSharp }))), h("slot", { key: 'd7141ff9c868aa96a7f03e21c99e73871dcd52c1', name: "end" })), shouldRenderHighlight && h("div", { class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, h("ion-icon", { "aria-hidden": "true", icon: mode === 'ios' ? closeCircle : closeSharp }))), h("slot", { name: "end" })), shouldRenderHighlight && h("div", { class: "input-highlight" })), this.renderBottomContent()));
+    }
+    // TODO FW-2764 Remove this
+    renderLegacyInput() {
+        if (!this.hasLoggedDeprecationWarning) {
+            printIonWarning(`ion-input now requires providing a label with either the "label" property or the "aria-label" attribute. To migrate, remove any usage of "ion-label" and pass the label text to either the "label" property or the "aria-label" attribute.
+
+Example: <ion-input label="Email"></ion-input>
+Example with aria-label: <ion-input aria-label="Email"></ion-input>
+
+For inputs that do not render the label immediately next to the input, developers may continue to use "ion-label" but must manually associate the label with the input by using "aria-labelledby".
+
+Developers can use the "legacy" property to continue using the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.`, this.el);
+            if (this.legacy) {
+                printIonWarning(`ion-input is being used with the "legacy" property enabled which will forcibly enable the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.
+
+Developers can dismiss this warning by removing their usage of the "legacy" property and using the new input syntax.`, this.el);
+            }
+            this.hasLoggedDeprecationWarning = true;
+        }
+        const mode = getIonMode(this);
+        const value = this.getValue();
+        const labelId = this.inputId + '-lbl';
+        const label = findItemLabel(this.el);
+        if (label) {
+            label.id = labelId;
+        }
+        return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+                [mode]: true,
+                'has-value': this.hasValue(),
+                '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) => {
+                /**
+                 * This prevents mobile browsers from
+                 * blurring the input when the clear
+                 * button is activated.
+                 */
+                ev.preventDefault();
+            }, onClick: this.clearTextInput }, h("ion-icon", { "aria-hidden": "true", icon: mode === 'ios' ? closeCircle : closeSharp })))));
+    }
+    render() {
+        const { legacyFormController } = this;
+        return legacyFormController.hasLegacyControl() ? this.renderLegacyInput() : this.renderInput();
     }
     static get is() { return "ion-input"; }
     static get encapsulation() { return "scoped"; }
@@ -436,6 +514,26 @@ export class Input {
                 "attribute": "color",
                 "reflect": true
             },
+            "accept": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": undefined
+                        }],
+                    "text": "This attribute is ignored."
+                },
+                "attribute": "accept",
+                "reflect": false
+            },
             "autocapitalize": {
                 "type": "string",
                 "mutable": false,
@@ -737,6 +835,23 @@ export class Input {
                 "reflect": false,
                 "defaultValue": "'start'"
             },
+            "legacy": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the `label` property. As a result,\nthe `legacy` property should only be used as an escape hatch when you want to\navoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup."
+                },
+                "attribute": "legacy",
+                "reflect": false
+            },
             "max": {
                 "type": "any",
                 "mutable": false,
@@ -962,6 +1077,23 @@ export class Input {
                 "attribute": "step",
                 "reflect": false
             },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "size",
+                "reflect": false
+            },
             "type": {
                 "type": "string",
                 "mutable": false,
@@ -1167,6 +1299,12 @@ export class Input {
         return [{
                 "propName": "debounce",
                 "methodName": "debounceChanged"
+            }, {
+                "propName": "disabled",
+                "methodName": "disabledChanged"
+            }, {
+                "propName": "placeholder",
+                "methodName": "placeholderChanged"
             }, {
                 "propName": "value",
                 "methodName": "valueChanged"