import { createICacheMiddleware } from '@dojo/framework/core/middleware/icache';
import { create, tsx } from '@dojo/framework/core/vdom';
import Icon from '../icon';
import ConstrainedInput from '../constrained-input';
import theme from '../middleware/theme';
import * as css from '../theme/default/password-input.m.css';
import * as textInputCss from '../theme/default/text-input.m.css';
import TextInput from '../text-input';
const factory = create({
    icache: createICacheMiddleware(),
    theme
})
    .properties()
    .children();
export const PasswordInput = factory(function PasswordInput({ middleware: { theme, icache }, properties, children }) {
    const props = properties();
    const showPassword = icache.getOrSet('showPassword', false);
    const classes = theme.classes(css);
    const trailing = (tsx("button", { onclick: (e) => {
            e.stopPropagation();
            icache.set('showPassword', !showPassword);
        }, classes: classes.toggleButton, type: "button" },
        tsx(Icon, { type: showPassword ? 'eyeSlashIcon' : 'eyeIcon' })));
    const handleValidation = (valid, message) => {
        icache.set('valid', { valid, message });
        props.onValidate && props.onValidate(valid);
    };
    return props.rules ? (tsx(ConstrainedInput, Object.assign({}, props, { rules: props.rules, key: "root", type: showPassword ? 'text' : 'password', theme: theme.compose(textInputCss, css) }), Object.assign({}, children()[0], { trailing }))) : (tsx(TextInput, Object.assign({}, props, { key: "root", type: showPassword ? 'text' : 'password', theme: theme.compose(textInputCss, css), onValidate: handleValidation, valid: icache.get('valid') }), Object.assign({}, children()[0], { trailing })));
});
export default PasswordInput;

/*# sourceMappingURL=index.mjs.map*/