@ionic/core 8.7.17-dev.11771959013.18adabe2 → 8.7.17-dev.11772030258.1ee4f499

package/components/ion-input-password-toggle.js

@@ -1,4 +1,132 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import{proxyCustomElement as t,HTMLElement as o,h as e,Host as s,transformTag as n}from"@stencil/core/internal/client";import{p as i}from"./index4.js";import{c as r}from"./theme.js";import{l as c,m as a}from"./index6.js";import{b as p}from"./ionic-global.js";import{d}from"./button.js";import{d as l}from"./icon.js";import{d as u}from"./ripple-effect.js";const m=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.type="password",this.togglePasswordVisibility=()=>{const{inputElRef:t}=this;t&&(t.type="text"===t.type?"password":"text")}}onTypeChange(t){"text"===t||"password"===t||i(`[ion-input-password-toggle] - Only inputs of type "text" or "password" are supported. Input of type "${t}" is not compatible.`,this.el)}connectedCallback(){const{el:t}=this,o=this.inputElRef=t.closest("ion-input");o?this.type=o.type:i("[ion-input-password-toggle] - No ancestor ion-input found. This component must be slotted inside of an ion-input.",t)}disconnectedCallback(){this.inputElRef=null}render(){var t,o;const{color:n,type:i}=this,d=p(this),l=null!==(t=this.showIcon)&&void 0!==t?t:a,u=null!==(o=this.hideIcon)&&void 0!==o?o:c,m="text"===i;return e(s,{key:"91bc55664d496fe457518bd112865dd7811d0c17",class:r(n,{[d]:!0})},e("ion-button",{key:"6344d6838f5cdcba54c6bf4b592f036092044de0",mode:d,color:n,fill:"clear",shape:"round","aria-label":m?"Hide password":"Show password","aria-pressed":m?"true":"false",type:"button",onPointerDown:t=>{t.preventDefault()},onClick:this.togglePasswordVisibility},e("ion-icon",{key:"a2bd9197c2635bf8cb155ff25ce022e7d7dc6d00",slot:"icon-only","aria-hidden":"true",icon:m?u:l})))}get el(){return this}static get watchers(){return{type:[{onTypeChange:0}]}}static get style(){return{ios:"",md:""}}},[33,"ion-input-password-toggle",{color:[513],showIcon:[1,"show-icon"],hideIcon:[1,"hide-icon"],type:[1025]},void 0,{type:[{onTypeChange:0}]}]),f=m,h=function(){"undefined"!=typeof customElements&&["ion-input-password-toggle","ion-button","ion-icon","ion-ripple-effect"].forEach((t=>{switch(t){case"ion-input-password-toggle":customElements.get(n(t))||customElements.define(n(t),m);break;case"ion-button":customElements.get(n(t))||d();break;case"ion-icon":customElements.get(n(t))||l();break;case"ion-ripple-effect":customElements.get(n(t))||u()}}))};export{f as IonInputPasswordToggle,h as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { p as printIonWarning } from './index4.js';
+import { c as createColorClasses } from './theme.js';
+import { l as eyeOff, m as eye } from './index6.js';
+import { b as getIonMode } from './ionic-global.js';
+import { d as defineCustomElement$4 } from './button.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './ripple-effect.js';
+
+const iosInputPasswordToggleCss = "";
+
+const mdInputPasswordToggleCss = "";
+
+const InputPasswordToggle = /*@__PURE__*/ proxyCustomElement(class InputPasswordToggle extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /**
+         * @internal
+         */
+        this.type = 'password';
+        this.togglePasswordVisibility = () => {
+            const { inputElRef } = this;
+            if (!inputElRef) {
+                return;
+            }
+            inputElRef.type = inputElRef.type === 'text' ? 'password' : 'text';
+        };
+    }
+    /**
+     * Whenever the input type changes we need to re-run validation to ensure the password
+     * toggle is being used with the correct input type. If the application changes the type
+     * outside of this component we also need to re-render so the correct icon is shown.
+     */
+    onTypeChange(newValue) {
+        if (newValue !== 'text' && newValue !== 'password') {
+            printIonWarning(`[ion-input-password-toggle] - Only inputs of type "text" or "password" are supported. Input of type "${newValue}" is not compatible.`, this.el);
+            return;
+        }
+    }
+    connectedCallback() {
+        const { el } = this;
+        const inputElRef = (this.inputElRef = el.closest('ion-input'));
+        if (!inputElRef) {
+            printIonWarning('[ion-input-password-toggle] - No ancestor ion-input found. This component must be slotted inside of an ion-input.', el);
+            return;
+        }
+        /**
+         * Important: Set the type in connectedCallback because the default value
+         * of this.type may not always be accurate. Usually inputs have the "password" type
+         * but it is possible to have the input to initially have the "text" type. In that scenario
+         * the wrong icon will show briefly before switching to the correct icon. Setting the
+         * type here allows us to avoid that flicker.
+         */
+        this.type = inputElRef.type;
+    }
+    disconnectedCallback() {
+        this.inputElRef = null;
+    }
+    render() {
+        var _a, _b;
+        const { color, 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: '91bc55664d496fe457518bd112865dd7811d0c17', class: createColorClasses(color, {
+                [mode]: true,
+            }) }, h("ion-button", { key: '6344d6838f5cdcba54c6bf4b592f036092044de0', mode: mode, color: color, fill: "clear", shape: "round", "aria-label": isPasswordVisible ? 'Hide password' : 'Show password', "aria-pressed": isPasswordVisible ? 'true' : 'false', 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: 'a2bd9197c2635bf8cb155ff25ce022e7d7dc6d00', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? hidePasswordIcon : showPasswordIcon }))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "type": ["onTypeChange"]
+    }; }
+    static get style() { return {
+        ios: iosInputPasswordToggleCss,
+        md: mdInputPasswordToggleCss
+    }; }
+}, [289, "ion-input-password-toggle", {
+        "color": [513],
+        "showIcon": [1, "show-icon"],
+        "hideIcon": [1, "hide-icon"],
+        "type": [1025]
+    }, undefined, {
+        "type": ["onTypeChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ion-input-password-toggle", "ion-button", "ion-icon", "ion-ripple-effect"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ion-input-password-toggle":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, InputPasswordToggle);
+            }
+            break;
+        case "ion-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ion-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ion-ripple-effect":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const IonInputPasswordToggle = InputPasswordToggle;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonInputPasswordToggle, defineCustomElement };