{"version":3,"sources":["../src/elements/password.ts","../src/styles/elements/password.ts"],"sourcesContent":["import { html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { emitEvent } from '../utilities/events';\nimport KemetField from './field';\nimport KemetInput from './input';\nimport { EnumStatuses, TypeStatus } from '../utilities/constants';\nimport KemetTextarea from './textarea';\nimport { stylesBase } from '../styles/elements/password';\nimport './icon-bootstrap';\n\n\n/**\n * @since 1.2.0\n * @status stable\n *\n * @tagname kemet-password\n * @summary Gauges the strength of a password entered by the user.\n *\n * @prop {array} rules - An array of objects containing the rules the password must meet.\n * @prop {boolean} show - Controls the display of the component.\n * @prop {string} value - The value of the input component.\n * @prop {string} message - A message that is above the rules.\n * @prop {string} strength - The strength of the password. Weak | Better | Strong.\n * @prop {string} icon\n * @prop {number} iconSize\n *\n * @event kemet-status-change - Fires when there's a change in status.\n *\n * @csspart status - The status message.\n * @csspart indicator - The strength indicator bars.\n * @csspart message - A message to display to the user.\n * @csspart rules - A description of rules to follow.\n *\n */\n\ninterface InterfaceOptions {\n pattern: string;\n message: string;\n meetsCriteria?: boolean;\n}\n\nexport interface InterfacePasswordStatusChangeDetails {\n status: TypeStatus;\n meetsPasswordCriteria: boolean;\n element: KemetPassword;\n}\n\n@customElement('kemet-password')\nexport default class KemetPassword extends LitElement {\n static styles = [stylesBase];\n\n @property({ type: Array })\n rules: InterfaceOptions[] = [\n { pattern: '(?=.{8,}$)', message: 'At least 8 characters long' },\n { pattern: '(?=.*[a-z])(?=.*[A-Z])', message: 'Uppercase and lowercase' },\n { pattern: '(?=.*[0-9])', message: 'At least one number (0-9)' },\n ];\n\n @property({ type: Boolean, reflect: true })\n show: boolean;\n\n @property({ type: String })\n value: string;\n\n @property({ type: String })\n message: string = 'Please make sure you meet all the requirements.';\n\n @property({ type: String })\n strength: string;\n\n @property({ type: String })\n icon: string = 'check2';\n\n @property({ type: Number })\n iconSize: number = 18;\n\n @state()\n status: TypeStatus;\n\n @state()\n field: KemetField;\n\n @state()\n input: KemetInput | KemetTextarea;\n\n firstUpdated() {\n // elements\n this.field = this.closest('kemet-field');\n this.input = this.field.querySelector('[slot=\"input\"]');\n\n // events listeners\n this.input.addEventListener('kemet-input', this.handleInput.bind(this));\n }\n\n render() {\n return html`\n \n
\n
${this.message}
\n
\n