@ionic/core 8.4.2-dev.11736797843.16cc5058 → 8.4.2-dev.11739377372.17be7c08

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

@@ -1,3 +1,9 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -73,6 +79,7 @@
    * @prop --highlight-color-focused: The color of the highlight on the input when focused
    * @prop --highlight-color-valid: The color of the highlight on the input when valid
    * @prop --highlight-color-invalid: The color of the highlight on the input when invalid
+   * @prop --text-color-invalid: The color of the error text on the input when invalid. Only applies to ionic theme.
    *
    * @prop --border-color: Color of the border below the input when using helper text, error text, or counter
    * @prop --border-radius: Radius of the input. A large radius may display unevenly when using fill="outline"; if needed, use shape="round" instead or increase --padding-start.
@@ -135,18 +142,18 @@
   padding-right: 0;
   padding-top: 0;
   padding-bottom: 0;
+  color: inherit;
   font-family: inherit;
   font-size: inherit;
   font-style: inherit;
   font-weight: inherit;
   letter-spacing: inherit;
+  text-align: inherit;
   text-decoration: inherit;
   text-indent: inherit;
   text-overflow: inherit;
   text-transform: inherit;
-  text-align: inherit;
   white-space: inherit;
-  color: inherit;
   display: inline-block;
   position: relative;
   flex: 1;
@@ -606,6 +613,12 @@
   display: none;
 }
 
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -661,6 +674,12 @@
  *   }
  * }
  */
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -716,6 +735,12 @@
  *   }
  * }
  */
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -841,6 +866,12 @@
   max-width: calc(100% / 0.75);
 }
 
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -997,7 +1028,9 @@
    * Label text should not extend
    * beyond the bounds of the input.
    */
-  max-width: calc((100% - var(--padding-start) - var(--padding-end) - 8px) / 0.75);
+  max-width: calc(
+    (100% - var(--padding-start) - var(--padding-end) - 8px) / 0.75
+  );
 }
 
 /**
@@ -1014,8 +1047,8 @@
 }
 
 :host(.input-fill-outline) .input-outline-container {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   display: flex;
@@ -1122,6 +1155,12 @@
   border-top: none;
 }
 
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/input-password-toggle/input-password-toggle.common.css

@@ -0,0 +1,61 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */

package/dist/collection/components/input-password-toggle/input-password-toggle.ionic.css

@@ -0,0 +1,141 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/*
+Do not edit directly, this file was auto-generated.
+*/ /**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+:host ion-button {
+  --color: var(--ion-primitives-neutral-800, #626262);
+  --margin-end: calc(-1 * var(--padding-end));
+  --padding-end: inherit;
+  --icon-size: 1rem;
+  -webkit-margin-start: 0;
+  margin-inline-start: 0;
+  -webkit-margin-end: var(--margin-end);
+  margin-inline-end: var(--margin-end);
+  margin-top: 0;
+  margin-bottom: 0;
+  width: var(--size);
+  height: var(--size);
+}
+:host ion-button ion-icon {
+  font-size: var(--icon-size);
+}

package/dist/collection/components/input-password-toggle/input-password-toggle.js

@@ -1,20 +1,19 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import eyeSlashRegular from "@phosphor-icons/core/assets/regular/eye-slash.svg";
+import eyeRegular from "@phosphor-icons/core/assets/regular/eye.svg";
 import { Host, h } from "@stencil/core";
 import { printIonWarning } from "../../utils/logging/index";
 import { createColorClasses } from "../../utils/theme";
 import { eyeOff, eye } from "ionicons/icons";
-import { getIonMode } from "../../global/ionic-global";
+import { config } from "../../global/config";
+import { getIonMode, getIonTheme } from "../../global/ionic-global";
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class InputPasswordToggle {
     constructor() {
-        /**
-         * @internal
-         */
-        this.type = 'password';
         this.togglePasswordVisibility = () => {
             const { inputElRef } = this;
             if (!inputElRef) {
@@ -22,6 +21,10 @@ export class InputPasswordToggle {
             }
             inputElRef.type = inputElRef.type === 'text' ? 'password' : 'text';
         };
+        this.color = undefined;
+        this.showIcon = undefined;
+        this.hideIcon = undefined;
+        this.type = 'password';
     }
     /**
      * Whenever the input type changes we need to re-run validation to ensure the password
@@ -53,36 +56,69 @@ export class InputPasswordToggle {
     disconnectedCallback() {
         this.inputElRef = null;
     }
+    get inputPasswordHideIcon() {
+        // Return the icon if it is explicitly set
+        if (this.hideIcon != null) {
+            return this.hideIcon;
+        }
+        // Determine the theme and map to default icons
+        const theme = getIonTheme(this);
+        const defaultIcons = {
+            ios: eyeOff,
+            ionic: eyeSlashRegular,
+            md: eyeOff,
+        };
+        // Get the default icon based on the theme, falling back to 'md' icon if necessary
+        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+        // Return the configured input password hide icon or the default icon
+        return config.get('inputPasswordHideIcon', defaultIcon);
+    }
+    get inputPasswordShowIcon() {
+        // Return the icon if it is explicitly set
+        if (this.showIcon != null) {
+            return this.showIcon;
+        }
+        // Determine the theme and map to default icons
+        const theme = getIonTheme(this);
+        const defaultIcons = {
+            ios: eye,
+            ionic: eyeRegular,
+            md: eye,
+        };
+        // Get the default icon based on the theme, falling back to 'md' icon if necessary
+        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+        // Return the configured input password show icon or the default icon
+        return config.get('inputPasswordShowIcon', defaultIcon);
+    }
     render() {
-        var _a, _b;
-        const { color, type } = this;
+        const { color, inputPasswordHideIcon, inputPasswordShowIcon, type } = this;
         const mode = getIonMode(this);
-        const showPasswordIcon = (_a = this.showIcon) !== null && _a !== void 0 ? _a : eye;
-        const hidePasswordIcon = (_b = this.hideIcon) !== null && _b !== void 0 ? _b : eyeOff;
         const isPasswordVisible = type === 'text';
-        return (h(Host, { key: 'd9811e25bfeb2aa197352bb9be852e9e420739d5', class: createColorClasses(color, {
+        return (h(Host, { key: 'ed4e9f2c1d1e9f8f3b76106ccd2567219bf20f33', class: createColorClasses(color, {
                 [mode]: true,
-            }) }, h("ion-button", { key: '1eaea1442b248fb2b8d61538b27274e647a07804', mode: mode, color: color, fill: "clear", shape: "round", "aria-checked": isPasswordVisible ? 'true' : 'false', "aria-label": "show password", role: "switch", type: "button", onPointerDown: (ev) => {
+            }) }, h("ion-button", { key: 'ca57bbcd8cce49410a59c027404569507b451bdc', mode: mode, color: color, fill: "clear", shape: "round", "aria-checked": isPasswordVisible ? 'true' : 'false', "aria-label": "show password", role: "switch", type: "button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the password toggle
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: '9c88de8f4631d9bde222ce2edf6950d639e04773', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? hidePasswordIcon : showPasswordIcon }))));
+            }, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: '8140a516c740191a959b0aa419763a88713fae5f', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
     }
     static get is() { return "ion-input-password-toggle"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "ios": ["input-password-toggle.scss"],
-            "md": ["input-password-toggle.scss"]
+            "ios": ["input-password-toggle.common.scss"],
+            "md": ["input-password-toggle.common.scss"],
+            "ionic": ["input-password-toggle.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "ios": ["input-password-toggle.css"],
-            "md": ["input-password-toggle.css"]
+            "ios": ["input-password-toggle.common.css"],
+            "md": ["input-password-toggle.common.css"],
+            "ionic": ["input-password-toggle.ionic.css"]
         };
     }
     static get properties() {
@@ -107,8 +143,6 @@ export class InputPasswordToggle {
                     "tags": [],
                     "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "color",
                 "reflect": true
             },
@@ -126,8 +160,6 @@ export class InputPasswordToggle {
                     "tags": [],
                     "text": "The icon that can be used to represent showing a password. If not set, the \"eye\" Ionicon will be used."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "show-icon",
                 "reflect": false
             },
@@ -145,8 +177,6 @@ export class InputPasswordToggle {
                     "tags": [],
                     "text": "The icon that can be used to represent hiding a password. If not set, the \"eyeOff\" Ionicon will be used."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "hide-icon",
                 "reflect": false
             },
@@ -173,8 +203,6 @@ export class InputPasswordToggle {
                         }],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "type",
                 "reflect": false,
                 "defaultValue": "'password'"