@ionic/core/dist/cjs/ion-input-password-toggle.cjs.entry.js

Base components for Ionic

/*!
 * (C) Ionic http://ionicframework.com - MIT License
 */
'use strict';

var index = require('./index-BiQyIvoc.js');
var theme = require('./theme-Bw0rpaNN.js');
var index$1 = require('./index-wOmugbdg.js');
var ionicGlobal = require('./ionic-global-48ceLiJ6.js');

const iosInputPasswordToggleCss = () => ``;

const mdInputPasswordToggleCss = () => ``;

const InputPasswordToggle = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        /**
         * @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') {
            index.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) {
            index.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() {
        const { color, type } = this;
        const mode = ionicGlobal.getIonMode(this);
        const showPasswordIcon = this.showIcon ?? index$1.eye;
        const hidePasswordIcon = this.hideIcon ?? index$1.eyeOff;
        const isPasswordVisible = type === 'text';
        return (index.h(index.Host, { key: '15a29e51abc236cc21943225ed377f5edca7d103', class: theme.createColorClasses(color, {
                [mode]: true,
            }) }, index.h("ion-button", { key: 'cc9c290e809db66c14aaf63eb496ccf94d3f6414', 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 }, index.h("ion-icon", { key: '8d1f5143bedabcff2a8792f35ef07fdac1236fd5', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? hidePasswordIcon : showPasswordIcon }))));
    }
    get el() { return index.getElement(this); }
    static get watchers() { return {
        "type": [{
                "onTypeChange": 0
            }]
    }; }
};
InputPasswordToggle.style = {
    ios: iosInputPasswordToggleCss(),
    md: mdInputPasswordToggleCss()
};

exports.ion_input_password_toggle = InputPasswordToggle;