{"version":3,"names":["scPasswordCss","ScPasswordStyle0","showHintTimer","showVerificationTimer","wp","i18n","__","this","hintText","help","confirmationHelp","placeholder","confirmationPlaceholder","size","type","value","onScInput","handleVerification","required","disabled","verifyText","h","key","class"],"sources":["src/components/ui/sc-password/sc-password.scss?tag=sc-password&encapsulation=shadow","src/components/ui/sc-password/sc-password.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.password {\n  display: grid;\n  gap: var(--sc-form-row-spacing, 0.75em);\n  &__hint {\n    padding-top: 0.36rem;\n    color: red;\n  }\n}\n","import { Component, Prop, h, Method, State, Watch } from '@stencil/core';\nimport { __ } from '@wordpress/i18n';\nimport { speak } from '@wordpress/a11y';\n\nlet showHintTimer, showVerificationTimer;\n\n@Component({\n  tag: 'sc-password',\n  styleUrl: 'sc-password.scss',\n  shadow: true,\n})\nexport class ScPassword {\n  private input: HTMLScInputElement;\n  private confirmInput: HTMLScInputElement;\n\n  /** The input's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The input's value attribute. */\n  @Prop({ mutable: true }) value = '';\n\n  /** Draws a pill-style input with rounded edges. */\n  @Prop({ reflect: true }) pill = false;\n\n  /** The input's label. */\n  @Prop() label: string;\n\n  /** Should we show the label */\n  @Prop() showLabel: boolean = true;\n\n  /** The input's help text. */\n  @Prop() help: string = '';\n\n  /** The input's placeholder text. */\n  @Prop() placeholder: string;\n\n  /** Disables the input. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Makes the input readonly. */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /** Makes the input a required field. */\n  @Prop({ reflect: true }) required = false;\n\n  /** The input's autofocus attribute. */\n  @Prop() autofocus: boolean;\n\n  /** The input's password confirmation attribute. */\n  @Prop({ reflect: true }) confirmation = false;\n\n  /** The name for the input. */\n  @Prop() name: string = 'password';\n\n  /** The input's confirmation label text. */\n  @Prop() confirmationLabel: string;\n\n  /** The input's confirmation placeholder text. */\n  @Prop() confirmationPlaceholder: string;\n\n  /** The input's confirmation help text. */\n  @Prop() confirmationHelp: string;\n\n  /** Ensures strong password validation. */\n  @Prop({ reflect: true }) enableValidation = true;\n\n  /** Hint Text. */\n  @State() hintText: string;\n\n  /** Verify Text. */\n  @State() verifyText: string;\n\n  /** Sets focus on the input. */\n  @Method()\n  async triggerFocus(options?: FocusOptions) {\n    return this.input.triggerFocus(options);\n  }\n\n  @Method()\n  async reportValidity() {\n    this.input?.setCustomValidity?.('');\n    this.confirmInput?.setCustomValidity?.('');\n\n    // confirmation is enabled.\n    if (this.confirmation) {\n      if (this.confirmInput?.value && this.input?.value !== this.confirmInput?.value) {\n        this.confirmInput.setCustomValidity(__('Password does not match.', 'surecart'));\n        speak(__('Password does not match.', 'surecart'), 'assertive');\n      }\n    }\n\n    // hint text is not empty.\n    if (!!this.hintText) {\n      this.input.setCustomValidity(__(this.hintText, 'surecart'));\n    }\n\n    const valid = await this.input.reportValidity();\n    if (!valid) {\n      return false;\n    }\n\n    if (this.confirmInput) {\n      return this.confirmInput.reportValidity();\n    }\n\n    return valid;\n  }\n\n  /** Handle password verification. */\n  handleVerification() {\n    clearTimeout(showVerificationTimer);\n    // show hint text after some delay\n    showVerificationTimer = setTimeout(() => {\n      this.verifyPassword();\n    }, 500);\n  }\n\n  /** Handle password validation. */\n  handleValidate() {\n    this.handleVerification();\n    // clear existing timeout\n    clearTimeout(showHintTimer);\n\n    // show hint text after some delay\n    showHintTimer = setTimeout(() => {\n      this.validatePassword();\n    }, 500);\n  }\n\n  /** Validate the password input. */\n  validatePassword() {\n    if (!this.enableValidation) return;\n\n    // nothing entered.\n    if (this.input?.value.trim().length === 0) {\n      this.hintText = '';\n      return;\n    }\n\n    // must be at least 6 characters.\n    if (this.input?.value.trim().length < 6) {\n      return (this.hintText = __('The password must be at least 6 characters in length.', 'surecart'));\n    }\n\n    // must contain a special charater.\n    const regex = /[-'`~!#*$@_%+=.,^&(){}[\\]|;:”<>?\\\\]/;\n    if (!regex.test(this.input?.value)) {\n      return (this.hintText = __('Passwords must contain a special character.', 'surecart'));\n    }\n\n    this.hintText = '';\n  }\n\n  /** Verify the password confirmation. */\n  verifyPassword() {\n    if (this.confirmInput?.value && this.input?.value !== this.confirmInput?.value) {\n      this.verifyText = __('Password does not match.', 'surecart');\n      speak(this.verifyText, 'assertive');\n      return;\n    }\n\n    if (!!this.input?.value && !!this.confirmInput?.value && this.input?.value === this.confirmInput?.value) {\n      speak(__('Password is matched.', 'surecart'), 'assertive');\n    }\n\n    this.verifyText = '';\n  }\n\n  @Watch('hintText')\n  handleHintTextChange() {\n    speak(this.hintText, 'assertive');\n  }\n\n  render() {\n    return (\n      <div class=\"password\">\n        <div>\n          <sc-input\n            ref={el => (this.input = el as HTMLScInputElement)}\n            label={this.label}\n            help={this.help}\n            autofocus={this.autofocus}\n            placeholder={this.placeholder}\n            showLabel={this.showLabel}\n            size={this.size ? this.size : 'medium'}\n            type=\"password\"\n            name=\"password\"\n            value={this.value}\n            required={this.required}\n            disabled={this.disabled}\n            onScInput={() => this.handleValidate()}\n          />\n          {!!this.hintText && <small class=\"password__hint\">{this.hintText}</small>}\n        </div>\n\n        {this.confirmation && (\n          <div>\n            <sc-input\n              ref={el => (this.confirmInput = el as HTMLScInputElement)}\n              label={this.confirmationLabel ?? __('Confirm Password', 'surecart')}\n              help={this.confirmationHelp}\n              placeholder={this.confirmationPlaceholder}\n              size={this.size ? this.size : 'medium'}\n              type=\"password\"\n              value={this.value}\n              onScInput={() => this.handleVerification()}\n              required={this.required}\n              disabled={this.disabled}\n            />\n            {!!this.verifyText && <small class=\"password__hint\">{this.verifyText}</small>}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"mappings":"+EAAA,MAAMA,EAAgB,mIACtB,MAAAC,EAAeD,ECGf,IAAAE,EAAAC,E,ggCAkF4CC,GAAAC,KAAAC,GAAE,wC,EAChCF,GAAAC,KAAAC,GAAE,mD,mDAMmBF,GAAAC,KAAAC,GAAEC,KAAAC,SAAA,Y,qkBAgDPJ,GAAAC,KAAAC,GAAE,mE,kIAMFF,GAAAC,KAAAC,GAAE,yD,mPASRF,GAAAC,KAAAC,GAAE,uC,8QAMdF,GAAAC,KAAAC,GAAE,+C,q5BAqCiCF,GAAAC,KAAAC,GAAE,+BAAAG,KAAAF,KAAAG,iBAAAC,YAAAJ,KAAAK,wBAAAC,KAAAN,KAAAM,KAAAN,KAAAM,KAAA,SAAAC,KAAA,WAAAC,MAAAR,KAAAQ,MAAAC,UAAA,IAAAT,KAAAU,qBAAAC,SAAAX,KAAAW,SAAAC,SAAAZ,KAAAY,aAAAZ,KAAAa,YAAAC,EAAA,SAAAC,IAAA,2CAAAC,MAAA,kBAAAhB,KAAAa,a","ignoreList":[]}