hologram-web-library
Version:
Hologram Web Library components
135 lines (111 loc) • 6.88 kB
JavaScript
import HTMLParsedElement from "./hw-common";
export const hsInputCustomAttributes = ["type", "errors", "container-styles", "auto-complete"];
export default class HWPasswordInput extends HTMLParsedElement {
input;
errorsContainer;
eyeButton;
eyeIcon;
eyeOffIcon;
static get observedAttributes() {
return hsInputCustomAttributes;
}
constructor() {
super();
this.input = document.createElement("input");
this.errorsContainer = document.createElement("div");
this.eyeButton = document.createElement("button");
this.eyeIcon = this.getEyeIcon();
this.eyeOffIcon = this.getEyeOffIcon();
}
parsedCallback() {
this.getAttributeNames().forEach((attr) => {
if (hsInputCustomAttributes.indexOf(attr) < 0) {
this.input?.setAttribute(attr, this.getAttribute(attr) || "");
this.removeAttribute(attr);
} else if (attr === "container-styles") {
this.getAttribute("container-styles")
?.split(" ")
.forEach((className) => {
this.classList.add(className);
});
}
});
this.classList.add("hw-input-wrapper");
this.input.classList.add("hw-input");
this.errorsContainer.classList.add("hidden");
this.input.classList.add("auto-complete");
// Create eye button
this.input.type = "password";
this.eyeButton.className = "absolute top-1/2 right-3 transform -translate-y-1/2 cursor-pointer";
this.eyeButton.appendChild(this.eyeIcon);
this.eyeButton.addEventListener("click", (event) => {
event.preventDefault();
this.showPassword();
});
this.appendChild(this.input);
this.appendChild(this.eyeButton);
this.appendChild(this.errorsContainer);
}
showPassword() {
const { type } = this.input;
if (type === "password") {
this.input.setAttribute("type", "text");
this.eyeButton.replaceChild(this.eyeOffIcon, this.eyeIcon);
// this.eyeButton.replaceChild()
} else {
this.input.setAttribute("type", "password");
this.eyeButton.replaceChild(this.eyeIcon, this.eyeOffIcon);
}
}
getEyeIcon() {
const svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svgElement.setAttribute("width", "12");
svgElement.setAttribute("height", "12");
svgElement.setAttribute("viewBox", "0 0 12 12");
svgElement.setAttribute("fill", "none");
svgElement.setAttribute("xmlns", "http://www.w3.org/2000/svg");
svgElement.innerHTML = `<path d="M6.49576 6.99496L6.84931 7.34852L6.49576 6.99496C6.36448 7.12624 6.18643 7.19999 6.00078 7.19999C5.81513 7.19999 5.63708 7.12624 5.50581 6.99496C5.37453 6.86369 5.30078 6.68564 5.30078 6.49999C5.30078 6.31434 5.37453 6.13629 5.50581 6.00501C5.63708 5.87374 5.81513 5.79999 6.00078 5.79999C6.18643 5.79999 6.36448 5.87374 6.49576 6.00501C6.62703 6.13629 6.70078 6.31434 6.70078 6.49999C6.70078 6.68564 6.62703 6.86369 6.49576 6.99496Z" fill="#1A241F" stroke="#1A241F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.275391 6.49999C1.03979 4.06579 3.31379 2.29999 6.00059 2.29999C8.68739 2.29999 10.9614 4.06579 11.7258 6.49999C10.9614 8.93419 8.68739 10.7 6.00059 10.7C3.31379 10.7 1.03979 8.93419 0.275391 6.49999ZM8.40059 6.49999C8.40059 7.13651 8.14773 7.74696 7.69765 8.19704C7.24756 8.64713 6.63711 8.89999 6.00059 8.89999C5.36407 8.89999 4.75362 8.64713 4.30353 8.19704C3.85345 7.74696 3.60059 7.13651 3.60059 6.49999C3.60059 5.86347 3.85345 5.25302 4.30353 4.80293C4.75362 4.35284 5.36407 4.09999 6.00059 4.09999C6.63711 4.09999 7.24756 4.35284 7.69765 4.80293C8.14773 5.25302 8.40059 5.86347 8.40059 6.49999Z" fill="#1A241F"/>`;
return svgElement;
}
getEyeOffIcon() {
const eyeSvgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
eyeSvgElement.setAttribute("width", "12");
eyeSvgElement.setAttribute("height", "12");
eyeSvgElement.setAttribute("viewBox", "0 0 12 12");
eyeSvgElement.setAttribute("fill", "none");
eyeSvgElement.setAttribute("xmlns", "http://www.w3.org/2000/svg");
eyeSvgElement.innerHTML = `<path d="M1.87675 2.2351L1.89086 2.24873L2.93905 3.29751L3.19525 3.55385L3.51858 3.39013C4.28746 3.0008 5.13739 2.79849 5.99922 2.79966H5.9999C8.40654 2.79966 10.453 4.34553 11.1986 6.49943C10.8574 7.48278 10.2441 8.35047 9.42859 9.00072L8.99109 9.34955L9.38675 9.74521L10.2662 10.6246C10.2833 10.6433 10.2927 10.6678 10.2925 10.6932C10.2923 10.7194 10.2818 10.7445 10.2632 10.763L10.6168 11.1165L10.2632 10.763C10.2447 10.7815 10.2196 10.7921 10.1934 10.7923C10.168 10.7925 10.1435 10.7831 10.1249 10.766L4.52347 5.16452L4.70143 5.05947L5.33543 5.69389L5.53904 5.89764L5.81744 5.82371C5.93624 5.79216 6.06125 5.79237 6.17996 5.82431C6.29866 5.85626 6.40689 5.91883 6.49381 6.00575C6.58073 6.09267 6.6433 6.2009 6.67525 6.3196C6.70719 6.43831 6.7074 6.56332 6.67585 6.68213L6.60195 6.96041L6.80555 7.16401L7.71395 8.07241L8.17013 8.52859L8.49808 7.97303C8.82504 7.41915 8.9586 6.77228 8.87773 6.1342C8.79686 5.49611 8.50615 4.90302 8.05135 4.44821C7.59655 3.99341 7.00345 3.70271 6.36536 3.62184C5.85897 3.55766 5.34705 3.62852 4.88046 3.82394L4.2807 3.22379V4.43146V4.43206V4.92175L1.73362 2.37467C1.71649 2.35602 1.70706 2.33154 1.70728 2.30616C1.70751 2.27994 1.71802 2.25486 1.73656 2.23632C1.75511 2.21778 1.78019 2.20726 1.80641 2.20704C1.83263 2.20681 1.85789 2.21689 1.87675 2.2351Z" fill="#111928" stroke="#111928"/>
<path d="M7.4725 10.5187L5.8501 8.89567C5.26671 8.85912 4.71672 8.61092 4.30334 8.19764C3.88996 7.78437 3.64161 7.23444 3.6049 6.65107L1.4011 4.44727C0.894229 5.05087 0.511512 5.74861 0.274902 6.50047C1.0393 8.93467 3.3139 10.7005 6.0001 10.7005C6.5083 10.7005 7.0015 10.6375 7.4725 10.5187Z" fill="#111928"/>`;
return eyeSvgElement;
}
attributeChangedCallback(attrName, oldValue, newValue) {
if (attrName === "errors") {
// Clear old error messages
this.handleError(oldValue, newValue);
}
if (attrName === "type") {
this.input.setAttribute(attrName, newValue);
}
if (attrName === "auto-complete") {
this.input.setAttribute(attrName, newValue);
}
}
handleError(oldValue, newValue) {
this.errorsContainer.innerHTML = "";
if (!newValue || oldValue === newValue) {
this.errorsContainer.classList.add("hidden");
this.input.classList.remove("has-error");
return;
}
this.input.classList.add("has-error");
this.errorsContainer.classList.remove("hidden");
this.eyeButton.classList.remove("top-1/2");
this.eyeButton.classList.add("top-5");
const errorMessage = document.createElement("p");
errorMessage.classList.add("hw-input-error-message");
errorMessage.textContent = newValue;
this.errorsContainer.appendChild(errorMessage);
}
}
customElements.define("hw-password-input", HWPasswordInput);