mirror of https://github.com/docusealco/docuseal
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
29 lines
852 B
29 lines
852 B
export default class extends HTMLElement {
|
|
connectedCallback () {
|
|
const maskedToken = this.input.value
|
|
|
|
const hintId = `masked-input-hint-${Math.random().toString(36).slice(2, 8)}`
|
|
const hint = document.createElement('span')
|
|
hint.id = hintId
|
|
hint.className = 'sr-only'
|
|
hint.textContent = this.dataset.maskHint || 'Value is masked. Focus to reveal.'
|
|
this.appendChild(hint)
|
|
|
|
const existing = this.input.getAttribute('aria-describedby')
|
|
this.input.setAttribute('aria-describedby', existing ? `${existing} ${hintId}` : hintId)
|
|
|
|
this.input.addEventListener('focus', () => {
|
|
this.input.value = this.dataset.token
|
|
this.input.select()
|
|
})
|
|
|
|
this.input.addEventListener('focusout', () => {
|
|
this.input.value = maskedToken
|
|
})
|
|
}
|
|
|
|
get input () {
|
|
return this.querySelector('input')
|
|
}
|
|
}
|