@salla.sa/twilight-components 2.13.48 → 2.13.50

package/dist/collection/components/salla-tel-input/salla-tel-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"salla-tel-input.js","sourceRoot":"","sources":["../../../src/components/salla-tel-input/salla-tel-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Element, Component, Host, h, Prop, Method, Event, EventEmitter, State } from '@stencil/core';\nimport TelInput from \"intl-tel-input\";\nimport { Phone } from './interfaces';\n\n@Component({ tag: 'salla-tel-input', styleUrl: 'salla-tel-input.scss' })\n\nexport class SallaTelInput {\n  constructor() {\n    salla.lang.onLoaded(() => {\n      this.mobileLabel = salla.lang.get('common.elements.mobile');\n      this.countryCodeLabel = salla.lang.get('common.elements.country_code');\n      this.invalidNumber = salla.lang.get('common.errors.invalid_value', { attribute: this.mobileLabel });\n      this.invalidCountryCode = salla.lang.get('common.errors.invalid_value', { attribute: this.countryCodeLabel });\n      this.tooShort = salla.lang.get('common.errors.too_short', { attribute: this.mobileLabel });\n      this.tooLong = salla.lang.get('common.errors.too_long', { attribute: this.mobileLabel });\n      this.mobileRequired = salla.lang.get('common.errors.field_required', { attribute: this.mobileLabel });\n      this.errorMap = [this.invalidNumber, this.invalidCountryCode, this.tooShort, this.tooLong, this.invalidNumber];\n    });\n  }\n\n  /**\n   * Current mobile number\n   */\n  @Prop({ mutable: true }) phone: string;\n    /**\n   * Automatically focus telephone input\n   */\n    @Prop({ reflect:true }) autofocus: boolean;\n  /**\n   * input name\n   */\n  @Prop() name: string = 'phone';\n  /**\n   * Current country_code\n   */\n  @Prop({ mutable: true }) countryCode: string = salla.config.get('user.country_code', 'SA') || 'SA';\n\n  /**\n   * Event emmitted when user enters a phone number.\n   */\n  @Event() phoneEntered: EventEmitter<Phone>;\n\n\n  @Element() host: HTMLElement;\n  @State() mobileRequired: string;\n  @State() countryCodeLabel: string = salla.lang.get('common.country_code');\n  @State() mobileLabel: string = salla.lang.get('common.elements.mobile');\n  @State() tooShort: string = salla.lang.get('common.errors.too_short', { attribute: this.mobileLabel });\n  @State() tooLong: string = salla.lang.get('common.errors.too_long', { attribute: this.mobileLabel });\n  @State() invalidCountryCode: string = salla.lang.get('common.errors.invalid_value', { attribute: this.countryCodeLabel });\n  @State() invalidNumber: string = salla.lang.get('common.errors.invalid_value', { attribute: this.mobileLabel });\n  @State() errorMap: string[] = [this.invalidNumber, this.invalidCountryCode, this.tooShort, this.tooLong, this.invalidNumber];\n\n  private phoneInput: HTMLInputElement;\n  private countryCodeInput: HTMLInputElement;\n  private errorMsg: any;\n  private iti: any;\n\n\n  /**\n   * Get current values\n   * @return {{mobile:number,countryCode:'SA'|string}}\n   */\n  @Method()\n  async getValues() {\n    return {\n      [this.name]: this.phone = this.phoneInput.value,\n      countryCode: this.countryCode = this.countryCodeInput.value,\n      countryKey: (this.host.querySelector('.iti__selected-dial-code') as any).innerText\n    }\n  }\n\n  /**\n   * Is current data valid or not\n   * @return {boolean}\n   */\n  @Method()\n  async isValid() {\n    this.reset();\n    if (this.iti.isValidNumber()) return true;\n\n    if (!this.phoneInput.value.trim()) {\n      this.phoneInput.classList.add(\"s-has-error\");\n      this.errorMsg.innerText = this.mobileRequired || 'The mobile is required';\n      return;\n    }\n\n    this.phoneInput.classList.add(\"s-has-error\");\n    let errorCode = this.iti.getValidationError();\n    this.errorMsg.innerText = this.errorMap[errorCode] || '';\n\n    salla.logger.info('Phone number (' + this.countryCode + ' - ' + this.phone + ') is not valid, error code ' + errorCode);\n    return false;\n  }\n\n  private initTelInput() {\n    salla.helpers.inputDigitsOnly(this.phoneInput);\n    this.iti = TelInput(this.phoneInput, {\n      initialCountry: this.countryCode || 'sa',\n      preferredCountries: ['sa', 'ae', 'kw', 'bh', 'qa', 'iq', 'om', 'ye', 'eg', 'jo', 'ps', 'sd', 'lb', 'dz', 'tn', 'ma', 'ly'],\n      excludeCountries: ['sy', 'ir', 'cu', 'kp'],\n      formatOnDisplay: false,\n      separateDialCode: true,\n      autoPlaceholder: 'aggressive',\n      utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.2.1/js/utils.min.js',\n    });\n\n    this.autofocus && this.phoneInput.focus()\n\n    this.phoneInput.addEventListener(\"countrychange\", () => {\n      let data = this.iti.getSelectedCountryData();\n      let value = data.iso2.toUpperCase();\n      this.countryCodeInput.value = value\n      this.countryCode = value;\n      this.phoneEntered.emit({ number: this.phone, country_code: value })\n    });\n\n    // on blur: validate\n    // this.phoneInput.addEventListener('blur', () => this.isValid());\n\n    // on keyup / change flag: reset\n    this.phoneInput.addEventListener('input', (e: Event) => {\n      salla.helpers.inputDigitsOnly(e.target);\n      this.reset();\n      this.phoneEntered.emit({ number: (e.target as HTMLInputElement).value, country_code: this.countryCode })\n    });\n\n  }\n\n  private reset() {\n    this.phoneInput.classList.remove(\"s-has-error\");\n    this.errorMsg.innerHTML = \"\";\n  };\n\n  private handleCountryInput(event) {\n    if (!!this.phone) {\n      this.phoneEntered.emit({ number: event.target.value, country_code: this.countryCode })\n    }\n  }\n\n\n  render() {\n    return (\n      <Host class=\"s-tel-input\">\n        <input type=\"tel\" name={this.name} value={this.phone} onChange={(event) => this.handleCountryInput(event)} ref={el => this.phoneInput = el}\n          enterkeyhint=\"next\"\n          autocomplete=\"tel\"\n          class=\"s-tel-input-control tel-input s-ltr\" />\n         <span class=\"s-tel-input-error-msg\" ref={el => this.errorMsg = el}/>\n        <input type=\"hidden\" name=\"country_code\" value={this.countryCode} ref={el => this.countryCodeInput = el}\n          class=\"country_code\" />\n      </Host>\n    );\n  }\n\n  componentDidLoad() {\n    this.initTelInput();\n  }\n}\n"]}
+{"version":3,"file":"salla-tel-input.js","sourceRoot":"","sources":["../../../src/components/salla-tel-input/salla-tel-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Element, Component, Host, h, Prop, Method, Event, EventEmitter, State } from '@stencil/core';\nimport TelInput from \"intl-tel-input\";\nimport { Phone } from './interfaces';\n\n@Component({ tag: 'salla-tel-input', styleUrl: 'salla-tel-input.scss' })\n\nexport class SallaTelInput {\n  constructor() {\n    salla.lang.onLoaded(() => {\n      this.mobileLabel = salla.lang.get('common.elements.mobile');\n      this.countryCodeLabel = salla.lang.get('common.elements.country_code');\n      this.invalidNumber = salla.lang.get('common.errors.invalid_value', { attribute: this.mobileLabel });\n      this.invalidCountryCode = salla.lang.get('common.errors.invalid_value', { attribute: this.countryCodeLabel });\n      this.tooShort = salla.lang.get('common.errors.too_short', { attribute: this.mobileLabel });\n      this.tooLong = salla.lang.get('common.errors.too_long', { attribute: this.mobileLabel });\n      this.mobileRequired = salla.lang.get('common.errors.field_required', { attribute: this.mobileLabel });\n      this.errorMap = [this.invalidNumber, this.invalidCountryCode, this.tooShort, this.tooLong, this.invalidNumber];\n    });\n  }\n\n  /**\n   * Current mobile number\n   */\n  @Prop({ mutable: true }) phone: string;\n    /**\n   * Automatically focus telephone input\n   */\n    @Prop({ reflect:true }) autofocus: boolean;\n  /**\n   * input name\n   */\n  @Prop() name: string = 'phone';\n  /**\n   * Current country_code\n   */\n  @Prop({ mutable: true }) countryCode: string = salla.config.get('user.country_code', 'SA') || 'SA';\n\n  /**\n   * Event emmitted when user enters a phone number.\n   */\n  @Event() phoneEntered: EventEmitter<Phone>;\n\n\n  @Element() host: HTMLElement;\n  @State() mobileRequired: string;\n  @State() countryCodeLabel: string = salla.lang.get('common.country_code');\n  @State() mobileLabel: string = salla.lang.get('common.elements.mobile');\n  @State() tooShort: string = salla.lang.get('common.errors.too_short', { attribute: this.mobileLabel });\n  @State() tooLong: string = salla.lang.get('common.errors.too_long', { attribute: this.mobileLabel });\n  @State() invalidCountryCode: string = salla.lang.get('common.errors.invalid_value', { attribute: this.countryCodeLabel });\n  @State() invalidNumber: string = salla.lang.get('common.errors.invalid_value', { attribute: this.mobileLabel });\n  @State() errorMap: string[] = [this.invalidNumber, this.invalidCountryCode, this.tooShort, this.tooLong, this.invalidNumber];\n\n  private phoneInput: HTMLInputElement;\n  private countryCodeInput: HTMLInputElement;\n  private errorMsg: any;\n  private iti: any;\n\n\n  /**\n   * Get current values\n   * @return {{mobile:number,countryCode:'SA'|string}}\n   */\n  @Method()\n  async getValues() {\n    return {\n      [this.name]: this.phone = this.phoneInput.value,\n      countryCode: this.countryCode = this.countryCodeInput.value,\n      countryKey: (this.host.querySelector('.iti__selected-dial-code') as any).innerText\n    }\n  }\n\n  /**\n   * Is current data valid or not\n   * @return {boolean}\n   */\n  @Method()\n  async isValid() {\n    this.reset();\n    if (this.iti.isValidNumber()) return true;\n\n    if (!this.phoneInput.value.trim()) {\n      this.phoneInput.classList.add(\"s-has-error\");\n      this.errorMsg.innerText = this.mobileRequired || 'The mobile is required';\n      return;\n    }\n\n    this.phoneInput.classList.add(\"s-has-error\");\n    let errorCode = this.iti.getValidationError();\n    this.errorMsg.innerText = this.errorMap[errorCode] || '';\n\n    salla.logger.info('Phone number (' + this.countryCode + ' - ' + this.phone + ') is not valid, error code ' + errorCode);\n    return false;\n  }\n\n  private initTelInput() {\n    salla.helpers.inputDigitsOnly(this.phoneInput);\n    this.iti = TelInput(this.phoneInput, {\n      initialCountry: this.countryCode || 'sa',\n      preferredCountries: ['sa', 'ae', 'kw', 'bh', 'qa', 'iq', 'om', 'ye', 'eg', 'jo', 'ps', 'sd', 'lb', 'dz', 'tn', 'ma', 'ly'],\n      excludeCountries: ['sy', 'ir', 'cu', 'kp'],\n      formatOnDisplay: false,\n      separateDialCode: true,\n      autoPlaceholder: 'aggressive',\n      utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/21.2.7/js/utils.min.js',\n    });\n\n    this.autofocus && this.phoneInput.focus()\n\n    this.phoneInput.addEventListener(\"countrychange\", () => {\n      let data = this.iti.getSelectedCountryData();\n      let value = data.iso2.toUpperCase();\n      this.countryCodeInput.value = value\n      this.countryCode = value;\n      this.phoneEntered.emit({ number: this.phone, country_code: value })\n    });\n\n    // on blur: validate\n    // this.phoneInput.addEventListener('blur', () => this.isValid());\n\n    // on keyup / change flag: reset\n    this.phoneInput.addEventListener('input', (e: Event) => {\n      salla.helpers.inputDigitsOnly(e.target);\n      this.reset();\n      this.phoneEntered.emit({ number: (e.target as HTMLInputElement).value, country_code: this.countryCode })\n    });\n\n  }\n\n  private reset() {\n    this.phoneInput.classList.remove(\"s-has-error\");\n    this.errorMsg.innerHTML = \"\";\n  };\n\n  private handleCountryInput(event) {\n    if (!!this.phone) {\n      this.phoneEntered.emit({ number: event.target.value, country_code: this.countryCode })\n    }\n  }\n\n\n  render() {\n    return (\n      <Host class=\"s-tel-input\">\n        <input type=\"tel\" name={this.name} value={this.phone} onChange={(event) => this.handleCountryInput(event)} ref={el => this.phoneInput = el}\n          enterkeyhint=\"next\"\n          autocomplete=\"tel\"\n          class=\"s-tel-input-control tel-input s-ltr\" />\n         <span class=\"s-tel-input-error-msg\" ref={el => this.errorMsg = el}/>\n        <input type=\"hidden\" name=\"country_code\" value={this.countryCode} ref={el => this.countryCodeInput = el}\n          class=\"country_code\" />\n      </Host>\n    );\n  }\n\n  componentDidLoad() {\n    this.initTelInput();\n  }\n}\n"]}