{"version":3,"sources":["webpack:///./assets/javascripts/modules/utils/InputUtil.js","webpack:///./assets/javascripts/modules/components/InputComponent.js"],"names":["disabledEvent","event","preventDefault","console","log","type","validatePostalCodeJp","key","length","target","value","includes","InputComponent","elem","_classCallCheck","this","_this","_possibleConstructorReturn","__proto__","Object","getPrototypeOf","call","setError","bind","resetState","showPassword","hidePassword","Component","input","label","error","togglePassword","postalCodeJp","edited","success","$component","querySelector","SELECTORS","Array","from","querySelectorAll","_this2","dom","readDOM","setTimeout","matches","classList","add","CSS","addEventListener","toggle","forEach","e","contains","document","dataset","id","detail","required","setLabel","bindEvents","postalCodeJpEvents","msg","undefined","innerText","remove","innerHTML"],"mappings":"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","file":"component-InputComponent.chunks.js","sourcesContent":["export const disabledEvent = (event) => {\n  event.preventDefault();\n  console.log(\"The \" + event.type + \" event is disabled\");\n}\n\nexport const validatePostalCodeJp = (event) => {\n  const key = event.key;\n  const length = event.target.value.length;\n  if(key >= '0' && key <= '9') {\n    if(length === 3) {\n      event.target.value += \"-\";\n    }\n    console.log(\"The key typed \" + key + \" is allowed\");\n  }\n  else if((key == '-' && length === 3) || ['Delete','Backspace'].includes(key)) {\n    console.log(\"The key typed \" + key + \" is allowed\");\n  }\n  else {\n    disabledEvent(event);\n  }\n}\n","import Component from '../abstracts/Component';\nimport {disabledEvent, validatePostalCodeJp} from '../utils/InputUtil';\n\nexport default class InputComponent extends Component {\n  get COMPONENTNAME() {\n    return 'InputComponent';\n  }\n\n  get SELECTORS() {\n    return {\n      input: '[data-input]',\n      label: '[data-label]',\n      error: '[data-error]',\n      togglePassword: '[data-toggle-password]',\n      postalCodeJp: '[data-postal-code-jp]',\n    }\n  }\n\n  get CSS() {\n    return {\n      edited: '--edited',\n      error: '--error',\n      showPassword: '--show-password',\n      success: '--success',\n    }\n  }\n\n  constructor(elem) {\n    super(elem);\n    this.setError = this.setError.bind(this);\n    this.resetState = this.resetState.bind(this);\n    this.showPassword = this.showPassword.bind(this);\n    this.hidePassword = this.hidePassword.bind(this);\n  }\n\n  readDOM() {\n    return {\n      input: this.$component.querySelector(this.SELECTORS.input),\n      label: this.$component.querySelector(this.SELECTORS.label),\n      error: this.$component.querySelector(this.SELECTORS.error),\n      postalCodeJp: this.$component.querySelector(this.SELECTORS.postalCodeJp),\n      togglePassword: Array.from(this.$component.querySelectorAll(this.SELECTORS.togglePassword)),\n    }\n  }\n\n  bindEvents() {\n    this.dom = this.readDOM();\n    setTimeout(() => {\n      if (this.dom.input.matches(':-internal-autofill-selected')) {\n          this.$component.classList.add(this.CSS.edited);\n      }\n    }, 1000);\n    this.dom.input.addEventListener('change', () => {\n      this.$component.classList.toggle(this.CSS.edited, this.dom.input.value.length>0);\n    });\n    this.dom.input.addEventListener('input', () => {\n      this.$component.classList.toggle(this.CSS.edited, this.dom.input.value.length>0);\n    });\n    this.dom.input.addEventListener('focus', () => {\n      this.$component.classList.add(this.CSS.edited);\n    });\n    this.dom.input.addEventListener('blur', () => {\n      this.$component.classList.toggle(this.CSS.edited, this.dom.input.value.length>0);\n    });\n    this.dom.togglePassword.forEach(e => {\n      e.addEventListener('click', () => {\n        const isShown = this.$component.classList.contains(this.CSS.showPassword);\n        const toggle = isShown ? this.hidePassword : this.showPassword;\n        const input = this.$component.querySelector(this.SELECTORS.input);\n        if(input.value) {\n          toggle();\n        } else {\n          return;\n        }\n      });\n    });\n    document.addEventListener('changeLabel', (e) => {\n      if(this.$component.dataset.id == e.detail.id) {\n        e.detail.required ? this.setLabel(e.detail.label+\"*\") : this.setLabel(e.detail.label);\n      }\n    });\n  }\n\n  postalCodeJpEvents() {\n    this.dom.postalCodeJp.addEventListener('keydown', validatePostalCodeJp);\n    this.dom.postalCodeJp.addEventListener('paste', disabledEvent);\n  }\n\n  render() {\n    this.dom = this.readDOM();\n    if (this.dom.input && this.dom.input.value.length > 0) {\n      this.$component.classList.add(this.CSS.edited);\n    }\n    this.bindEvents();\n    if(this.dom.postalCodeJp !== null) {\n      this.postalCodeJpEvents();\n    }\n  }\n\n  // EXTERNAL API\n  setError(msg) {\n    this.dom = this.readDOM();\n    if (msg !== undefined) {\n      this.dom.error.innerText = msg;\n    }\n    this.$component.classList.add(this.CSS.error);\n  }\n\n  setSuccess() {\n    this.dom = this.readDOM();\n    this.$component.classList.add(this.CSS.success);\n  }\n\n  resetState() {\n    this.dom = this.readDOM();\n    this.dom.error.innerText = '';\n    this.$component.classList.remove(this.CSS.error);\n  }\n\n  get value() {\n    this.dom = this.readDOM();\n    return this.dom.input.value;\n  }\n\n  resetInput() {\n    this.dom = this.readDOM();\n    this.dom.input.value=\"\";\n    this.$component.classList.remove(this.CSS.error);\n    this.$component.classList.remove(this.CSS.success);\n    this.$component.classList.remove(this.CSS.edited);\n  }\n\n  showPassword() {\n    this.dom = this.readDOM();\n    this.$component.classList.add(this.CSS.showPassword);\n    this.dom.input.type = 'text';\n  }\n\n  hidePassword() {\n    this.dom = this.readDOM();\n    this.$component.classList.remove(this.CSS.showPassword);\n    this.dom.input.type = 'password';\n  }\n\n  setLabel(label) {\n    this.dom = this.readDOM();\n    label = this.dom.input.required ? label+=\"*\" : label;\n    this.dom.label.innerHTML = label;\n  }\n}\n"],"sourceRoot":""}