/*!
 * (C) Ionic http://ionicframework.com - MIT License
 */
import { r as registerInstance, f as printIonWarning, e as config, h, d as Host, g as getElement } from './index-gD7P82jx.js';
import { c as createColorClasses } from './theme-DaJxRxSQ.js';
import { x as eyeOff, y as eye } from './index-COG0_eom.js';
import { c as getIonTheme, b as getIonMode } from './ionic-global-KnoA5TnE.js';

const eyeSlashSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik01My45MiwzNC42MkE4LDgsMCwxLDAsNDIuMDgsNDUuMzhMNjEuMzIsNjYuNTVDMjUsODguODQsOS4zOCwxMjMuMiw4LjY5LDEyNC43NmE4LDgsMCwwLDAsMCw2LjVjLjM1Ljc5LDguODIsMTkuNTcsMjcuNjUsMzguNEM2MS40MywxOTQuNzQsOTMuMTIsMjA4LDEyOCwyMDhhMTI3LjExLDEyNy4xMSwwLDAsMCw1Mi4wNy0xMC44M2wyMiwyNC4yMWE4LDgsMCwxLDAsMTEuODQtMTAuNzZabTQ3LjMzLDc1Ljg0LDQxLjY3LDQ1Ljg1YTMyLDMyLDAsMCwxLTQxLjY3LTQ1Ljg1Wk0xMjgsMTkyYy0zMC43OCwwLTU3LjY3LTExLjE5LTc5LjkzLTMzLjI1QTEzMy4xNiwxMzMuMTYsMCwwLDEsMjUsMTI4YzQuNjktOC43OSwxOS42Ni0zMy4zOSw0Ny4zNS00OS4zOGwxOCwxOS43NWE0OCw0OCwwLDAsMCw2My42Niw3MGwxNC43MywxNi4yQTExMiwxMTIsMCwwLDEsMTI4LDE5MlptNi05NS40M2E4LDgsMCwwLDEsMy0xNS43Miw0OC4xNiw0OC4xNiwwLDAsMSwzOC43Nyw0Mi42NCw4LDgsMCwwLDEtNy4yMiw4LjcxLDYuMzksNi4zOSwwLDAsMS0uNzUsMCw4LDgsMCwwLDEtOC03LjI2QTMyLjA5LDMyLjA5LDAsMCwwLDEzNCw5Ni41N1ptMTEzLjI4LDM0LjY5Yy0uNDIuOTQtMTAuNTUsMjMuMzctMzMuMzYsNDMuOGE4LDgsMCwxLDEtMTAuNjctMTEuOTJBMTMyLjc3LDEzMi43NywwLDAsMCwyMzEuMDUsMTI4YTEzMy4xNSwxMzMuMTUsMCwwLDAtMjMuMTItMzAuNzdDMTg1LjY3LDc1LjE5LDE1OC43OCw2NCwxMjgsNjRhMTE4LjM3LDExOC4zNywwLDAsMC0xOS4zNiwxLjU3QTgsOCwwLDEsMSwxMDYsNDkuNzksMTM0LDEzNCwwLDAsMSwxMjgsNDhjMzQuODgsMCw2Ni41NywxMy4yNiw5MS42NiwzOC4zNSwxOC44MywxOC44MywyNy4zLDM3LjYyLDI3LjY1LDM4LjQxQTgsOCwwLDAsMSwyNDcuMzEsMTMxLjI2WiIvPjwvc3ZnPg==';

const eyeSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0yNDcuMzEsMTI0Ljc2Yy0uMzUtLjc5LTguODItMTkuNTgtMjcuNjUtMzguNDFDMTk0LjU3LDYxLjI2LDE2Mi44OCw0OCwxMjgsNDhTNjEuNDMsNjEuMjYsMzYuMzQsODYuMzVDMTcuNTEsMTA1LjE4LDksMTI0LDguNjksMTI0Ljc2YTgsOCwwLDAsMCwwLDYuNWMuMzUuNzksOC44MiwxOS41NywyNy42NSwzOC40QzYxLjQzLDE5NC43NCw5My4xMiwyMDgsMTI4LDIwOHM2Ni41Ny0xMy4yNiw5MS42Ni0zOC4zNGMxOC44My0xOC44MywyNy4zLTM3LjYxLDI3LjY1LTM4LjRBOCw4LDAsMCwwLDI0Ny4zMSwxMjQuNzZaTTEyOCwxOTJjLTMwLjc4LDAtNTcuNjctMTEuMTktNzkuOTMtMzMuMjVBMTMzLjQ3LDEzMy40NywwLDAsMSwyNSwxMjgsMTMzLjMzLDEzMy4zMywwLDAsMSw0OC4wNyw5Ny4yNUM3MC4zMyw3NS4xOSw5Ny4yMiw2NCwxMjgsNjRzNTcuNjcsMTEuMTksNzkuOTMsMzMuMjVBMTMzLjQ2LDEzMy40NiwwLDAsMSwyMzEuMDUsMTI4QzIyMy44NCwxNDEuNDYsMTkyLjQzLDE5MiwxMjgsMTkyWm0wLTExMmE0OCw0OCwwLDEsMCw0OCw0OEE0OC4wNSw0OC4wNSwwLDAsMCwxMjgsODBabTAsODBhMzIsMzIsMCwxLDEsMzItMzJBMzIsMzIsMCwwLDEsMTI4LDE2MFoiLz48L3N2Zz4=';

const inputPasswordToggleIonicCss = ":host ion-button{--color:var(--token-primitives-neutral-800, #626262);--margin-end:calc(-1 * var(--padding-end));--padding-end:inherit;--icon-size:var(--token-font-size-400, 16px);-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)}";

const iosInputPasswordToggleNativeCss = "";

const mdInputPasswordToggleNativeCss = "";

const InputPasswordToggle = class {
    constructor(hostRef) {
        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') {
            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;
    }
    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: eyeSlashSvg,
            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: eyeSvg,
            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() {
        const { color, inputPasswordHideIcon, inputPasswordShowIcon, type } = this;
        const mode = getIonMode(this);
        const isPasswordVisible = type === 'text';
        return (h(Host, { key: 'e3c21d5bedebeadb57c0c9b7f065d15ab0d49e4a', class: createColorClasses(color, {
                [mode]: true,
            }) }, h("ion-button", { key: '0a83d58e059bc3b7ef604270e92351d7fa5d129c', 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: 'af9a7e202fe0b3f75f10b3e13bf1e5fb653194d1', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
    }
    get el() { return getElement(this); }
    static get watchers() { return {
        "type": ["onTypeChange"]
    }; }
};
InputPasswordToggle.style = {
    ionic: inputPasswordToggleIonicCss,
    ios: iosInputPasswordToggleNativeCss,
    md: mdInputPasswordToggleNativeCss
};

export { InputPasswordToggle as ion_input_password_toggle };
