{"version":3,"file":"CqdaS-T8.js","sources":["../../../../components/global/PasswordStrengthMeter.vue"],"sourcesContent":["<template>\r\n    <div class=\"Password\">\r\n        <div\r\n            v-if=\"!strengthMeterOnly\"\r\n            class=\"Password__group\">\r\n            <input\r\n                v-bind=\"$attrs\"\r\n                :ref=\"referenceValue\"\r\n                :type=\"inputType\"\r\n                :class=\"[defaultClass, $attrs.disabled ? disabledClass : '']\"\r\n                :value=\"modelValue\"\r\n                @input=\"evt => emitValue('input', evt.target.value)\"\r\n                @blur=\"evt => emitValue('blur', evt.target.value)\"\r\n                @focus=\"evt => emitValue('focus', evt.target.value)\">\r\n            <div class=\"Password__icons\">\r\n                <div\r\n                    v-if=\"badge\"\r\n                    v-cloak\r\n                    :class=\"[isSecure ? successClass : '', !isSecure && isActive ? errorClass : '' ]\"\r\n                    class=\"Password__badge\">\r\n                    {{ passwordCount }}\r\n                </div>\r\n                <div\r\n                    v-if=\"toggle\"\r\n                    class=\"Password__toggle\">\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"btn-clean\"\r\n                        :aria-label=\"showPasswordLabel\"\r\n                        tabindex=\"-1\"\r\n                        @click.prevent=\"togglePassword()\">\r\n                        <svg\r\n                            v-if=\"$data._showPassword\"\r\n                            version=\"1.1\"\r\n                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                            width=\"24\"\r\n                            height=\"24\"\r\n                            viewBox=\"0 0 24 24\">\r\n                            <title>{{ showPasswordLabel }}</title>\r\n                            <path\r\n                                d=\"M12 9c1.641 0 3 1.359 3 3s-1.359 3-3 3-3-1.359-3-3 1.359-3 3-3zM12 17.016c2.766 0 5.016-2.25 5.016-5.016s-2.25-5.016-5.016-5.016-5.016 2.25-5.016 5.016 2.25 5.016 5.016 5.016zM12 4.5c5.016 0 9.281 3.094 11.016 7.5-1.734 4.406-6 7.5-11.016 7.5s-9.281-3.094-11.016-7.5c1.734-4.406 6-7.5 11.016-7.5z\" />\r\n                        </svg>\r\n                        <svg\r\n                            v-else\r\n                            version=\"1.1\"\r\n                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                            width=\"24\"\r\n                            height=\"24\"\r\n                            viewBox=\"0 0 24 24\">\r\n                            <title>{{ showPasswordLabel }}</title>\r\n                            <path\r\n                                d=\"M11.859 9h0.141c1.641 0 3 1.359 3 3v0.188zM7.547 9.797c-0.328 0.656-0.563 1.406-0.563 2.203 0 2.766 2.25 5.016 5.016 5.016 0.797 0 1.547-0.234 2.203-0.563l-1.547-1.547c-0.188 0.047-0.422 0.094-0.656 0.094-1.641 0-3-1.359-3-3 0-0.234 0.047-0.469 0.094-0.656zM2.016 4.266l1.266-1.266 17.719 17.719-1.266 1.266c-1.124-1.11-2.256-2.213-3.375-3.328-1.359 0.563-2.813 0.844-4.359 0.844-5.016 0-9.281-3.094-11.016-7.5 0.797-1.969 2.109-3.656 3.75-4.969-0.914-0.914-1.812-1.844-2.719-2.766zM12 6.984c-0.656 0-1.266 0.141-1.828 0.375l-2.156-2.156c1.219-0.469 2.578-0.703 3.984-0.703 5.016 0 9.234 3.094 10.969 7.5-0.75 1.875-1.922 3.469-3.422 4.734l-2.906-2.906c0.234-0.563 0.375-1.172 0.375-1.828 0-2.766-2.25-5.016-5.016-5.016z\" />\r\n                        </svg>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div\r\n            v-if=\"showStrengthMeter\"\r\n            :class=\"[strengthMeterClass]\">\r\n            <div\r\n                :class=\"[strengthMeterFillClass]\"\r\n                :data-score=\"passwordStrength\" />\r\n        </div>\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nimport zxcvbn from 'zxcvbn'\r\n\r\nexport default {\r\n    name: 'PasswordStrengthMeter',\r\n    inheritAttrs: false,\r\n    props: {\r\n        /**\r\n         * Binded value\r\n         * @type {Object}\r\n         */\r\n        modelValue: {\r\n            type: String\r\n        },\r\n        /**\r\n         * Password min length.\r\n         * Right now only visual for the badge\r\n         * @type {Number}\r\n         */\r\n        secureLength: {\r\n            type: Number,\r\n            default: 7\r\n        },\r\n        /**\r\n         * Display badge:\r\n         * The badge shows your\r\n         * password character count\r\n         * up to the defined secureLength\r\n         * @type {Boolean}\r\n         */\r\n        badge: {\r\n            type: Boolean,\r\n            default: true\r\n        },\r\n        /**\r\n         * Show password toggle:\r\n         * Show icon to toggle\r\n         * the password visibility\r\n         */\r\n        toggle: {\r\n            type: Boolean,\r\n            default: false\r\n        },\r\n        /**\r\n         * Prop to toggle the\r\n         * cleartext password if\r\n         * toggle is disabled\r\n         */\r\n        showPassword: {\r\n            type: Boolean,\r\n            default: false\r\n        },\r\n        /**\r\n         * Prop to change the\r\n         * ref of the input\r\n         */\r\n        referenceValue: {\r\n            type: String,\r\n            default: 'input'\r\n        },\r\n        /**\r\n         * Prop to toggle the\r\n         * strength Meter if\r\n         * User wants to implement\r\n         * their own\r\n         */\r\n        showStrengthMeter: {\r\n            type: Boolean,\r\n            default: true\r\n        },\r\n        /**\r\n         * Prop to toggle the\r\n         * input element if\r\n         * User wants to implement\r\n         * their own input element\r\n         */\r\n        strengthMeterOnly: {\r\n            type: Boolean,\r\n            default: false\r\n        },\r\n        /**\r\n         * CSS Class for the Input field\r\n         * @type {String}\r\n         */\r\n        defaultClass: {\r\n            type: String,\r\n            default: 'Password__field'\r\n        },\r\n        /**\r\n         * CSS Class for the disabled Input field\r\n         * @type {String}\r\n         */\r\n        disabledClass: {\r\n            type: String,\r\n            default: 'Password__field--disabled'\r\n        },\r\n        /**\r\n         * CSS Class for the badge\r\n         * if a password does not match\r\n         * the secureLength. Later for errors\r\n         * @type {String}\r\n         */\r\n        errorClass: {\r\n            type: String,\r\n            default: 'Password__badge--error'\r\n        },\r\n        /**\r\n         * CSS Class for the badge\r\n         * if a password does match\r\n         * the secureLength. Later for\r\n         * success messages possible.\r\n         * @type {String}\r\n         */\r\n        successClass: {\r\n            type: String,\r\n            default: 'Password__badge--success'\r\n        },\r\n        /**\r\n         * CSS class for styling the\r\n         * strength meter bars.\r\n         * @type {String}\r\n         */\r\n        strengthMeterClass: {\r\n            type: String,\r\n            default: 'Password__strength-meter'\r\n        },\r\n        /**\r\n         * strengthMeterFillClass sets the\r\n         * individual strength width and fill\r\n         * color of the strength meter bars.\r\n         * @type {String}\r\n         */\r\n        strengthMeterFillClass: {\r\n            type: String,\r\n            default: 'Password__strength-meter--fill'\r\n        },\r\n        /**\r\n         * Label for the show password icon\r\n         */\r\n        labelShow: {\r\n            type: String,\r\n            default: 'Show Password'\r\n        },\r\n        /**\r\n         * Label for the hide password icon\r\n         */\r\n        labelHide: {\r\n            type: String,\r\n            default: 'Hide Password'\r\n        },\r\n        /**\r\n         * @type String\r\n         */\r\n        userInputs: {\r\n            type: Array,\r\n            default: () => []\r\n        }\r\n    },\r\n    emits: ['input', 'blur', 'focus', 'score', 'hide', 'show', 'update:modelValue', 'feedback'],\r\n    data() {\r\n        return {\r\n            password: null,\r\n            _showPassword: false\r\n        }\r\n    },\r\n\r\n    computed: {\r\n        /**\r\n         * passwordStrength is the score calculated by zxcvbn\r\n         * @return {Number} Password Strength Score\r\n         */\r\n        passwordStrength() {\r\n            return this.password ? zxcvbn(this.password, (this.userInputs.length >= 1 ? this.userInputs : null)).score : null\r\n        },\r\n\r\n        /**\r\n         * isSecure checks if the length of the password is longer then\r\n         * the defined `secureLength`\r\n         * @return {Boolean} Password length longer then minLength\r\n         */\r\n        isSecure() {\r\n            return this.password ? this.password.length >= this.secureLength : null\r\n        },\r\n\r\n        /**\r\n         * isActive checks if a password is entered.\r\n         * It's required for the password count badge.\r\n         * @return {Boolean} Password entered\r\n         */\r\n        isActive() {\r\n            return this.password && this.password.length > 0\r\n        },\r\n\r\n        /**\r\n         * passwordCount holds the character count of the\r\n         * current password. It shows the count up to the `secureLength`.\r\n         * @return {Number} Password Character Count\r\n         */\r\n        passwordCount() {\r\n            return this.password && (this.password.length > this.secureLength ? `${this.secureLength}+` : this.password.length)\r\n        },\r\n        /**\r\n         * Changing the input type from password to text\r\n         * based on the local _showPassword data or the showPassword prop\r\n         */\r\n        inputType() {\r\n            return this.$data._showPassword || this.showPassword ? 'text' : 'password'\r\n        },\r\n\r\n        showPasswordLabel() {\r\n            return this.$data._showPassword || this.showPassword ? this.labelHide : this.labelShow\r\n        }\r\n    },\r\n\r\n    watch: {\r\n        modelValue(newValue) {\r\n            if (this.strengthMeterOnly) {\r\n                this.emitValue('input', newValue)\r\n            }\r\n            this.$emit('feedback', zxcvbn(newValue).feedback)\r\n        },\r\n        passwordStrength(score) {\r\n            this.$emit('score', score)\r\n        }\r\n    },\r\n\r\n    methods: {\r\n        togglePassword() {\r\n            if (this.$data._showPassword) {\r\n                this.$emit('hide')\r\n                this.$data._showPassword = false\r\n            } else {\r\n                this.$emit('show')\r\n                this.$data._showPassword = true\r\n            }\r\n        },\r\n        emitValue(type, value) {\r\n            if (type == 'input') {\r\n                this.$emit('update:modelValue', value) // Changed in Vue 3\r\n            } else {\r\n                this.$emit(type, value)\r\n            }\r\n            this.password = value\r\n        }\r\n    }\r\n}\r\n</script>\r\n\r\n<style>\r\n[v-cloak] {\r\n    display: none;\r\n}\r\n\r\n.Password {\r\n    max-width: 400px;\r\n    margin: 0 auto;\r\n}\r\n\r\n.Password__group {\r\n    position: relative;\r\n}\r\n\r\n.Password__strength-meter {\r\n    position: relative;\r\n    height: 3px;\r\n    background: #DDD;\r\n    margin: 10px auto 20px;\r\n    border-radius: 3px;\r\n}\r\n\r\n.Password__strength-meter:before, .Password__strength-meter:after {\r\n    content: '';\r\n    height: inherit;\r\n    background: transparent;\r\n    display: block;\r\n    border-color: #FFF;\r\n    border-style: solid;\r\n    border-width: 0 5px 0 5px;\r\n    position: absolute;\r\n    width: 20%;\r\n    z-index: 10;\r\n}\r\n\r\n.Password__strength-meter:before {\r\n    left: 20%;\r\n}\r\n\r\n.Password__strength-meter:after {\r\n    right: 20%;\r\n}\r\n\r\n.Password__strength-meter--fill {\r\n    background: transparent;\r\n    height: inherit;\r\n    position: absolute;\r\n    width: 0;\r\n    border-radius: inherit;\r\n    transition: width 0.5s ease-in-out, background 0.25s;\r\n}\r\n\r\n.Password__strength-meter--fill[data-score='0'] {\r\n    background: darkred;\r\n    width: 20%;\r\n}\r\n\r\n.Password__strength-meter--fill[data-score='1'] {\r\n    background: orangered;\r\n    width: 40%;\r\n}\r\n\r\n.Password__strength-meter--fill[data-score='2'] {\r\n    background: orange;\r\n    width: 60%;\r\n}\r\n\r\n.Password__strength-meter--fill[data-score='3'] {\r\n    background: yellowgreen;\r\n    width: 80%;\r\n}\r\n\r\n.Password__strength-meter--fill[data-score='4'] {\r\n    background: green;\r\n    width: 100%;\r\n}\r\n\r\n.Password__field {\r\n    background-color: #f1f1f1;\r\n    border: 1px solid #f1f1f1;\r\n    border-radius: 2px;\r\n    box-sizing: border-box;\r\n    font-size: 14px;\r\n    padding: 13px;\r\n    width: 100%;\r\n}\r\n\r\n.Password__field--disabled {\r\n    background-color: #f6f6f6;\r\n    border: 1px solid #f6f6f6;\r\n}\r\n\r\n.Password__icons {\r\n    position: absolute;\r\n    top: 0;\r\n    right: 0;\r\n    height: 100%;\r\n    display: flex;\r\n    flex-direction: row;\r\n    justify-content: flex-end;\r\n    align-items: center;\r\n}\r\n\r\n.Password__toggle {\r\n    line-height: 1.1;\r\n    margin-right: 13px;\r\n}\r\n\r\n.Password__badge {\r\n    position: relative;\r\n    color: white;\r\n    border-radius: 6px;\r\n    padding: 3px;\r\n    width: 30px;\r\n    height: 15px;\r\n    font-size: 14px;\r\n    line-height: 1.1;\r\n    margin-right: 13px;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n}\r\n\r\n.Password__badge--error {\r\n    background: red;\r\n}\r\n\r\n.Password__badge--success {\r\n    background: #1bbf1b;\r\n}\r\n\r\n.btn-clean {\r\n    appearance: none;\r\n    background: none;\r\n    border: none;\r\n    cursor: pointer;\r\n    outline: none;\r\n    color: #777777;\r\n    padding: 0;\r\n}\r\n\r\n.btn-clean svg {\r\n    fill: currentColor;\r\n}\r\n\r\n.btn-clean:hover, .btn-clean:focus {\r\n    color: #404B69;\r\n}\r\n\r\n</style>"],"names":["_sfc_main","zxcvbn","newValue","score","type","value","_hoisted_1","_hoisted_3","_hoisted_4","_hoisted_6","_hoisted_9","_openBlock","_createElementBlock","$props","_createCommentVNode","_hoisted_2","_createElementVNode","_mergeProps","_ctx","$options","_cache","evt","_normalizeClass","_hoisted_5","_withModifiers","_hoisted_7","_hoisted_8"],"mappings":"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"}