import { Data } from '@angular/router'; import { Validators } from '@angular/forms'; import { Component, Input, OnInit, ViewContainerRef } from '@angular/core'; import { Sizes } from '../../../shared/enums'; import { passwordValidator } from '../validators'; import { Field } from '../../../core/field/abstract'; import { confirmValidator } from '../../../shared/validators'; import { passwordIconEnum, passwordTypeEnum } from '../enums'; @Component({ selector: 'cmn-password', templateUrl: './password.component.html', }) export class PasswordComponent extends Field implements OnInit { @Input() public labels: Data; @Input() public names: string[]; @Input() public readonly size: Sizes; @Input() public readonly placeholder: string; @Input() public readonly forceError: boolean; @Input() public readonly hasIcon: boolean = true; @Input() public readonly confirm: { control?: string, formName?: string } = {}; public isLoaded: boolean; public type = passwordTypeEnum.password; public icon = passwordIconEnum.password; @Input() private readonly name: string; @Input() private readonly label: string; constructor(private readonly viewRef: ViewContainerRef) { super(viewRef); } public ngOnInit(): void { super.ngOnInit(); if (this.name) { this.names = [ this.name ]; this.labels = { [this.name]: this.label }; } if (this.names) { this.setValidatorsForms(); } } public toggleTypeAndIcon() { if (this.type === passwordTypeEnum.password) { this.type = passwordTypeEnum.text; this.icon = passwordIconEnum.text; } else { this.type = passwordTypeEnum.password; this.icon = passwordIconEnum.password; } } private setValidatorsForms() { for (const name of this.names) { const validators = name !== this.confirm.control ? [ Validators.required, passwordValidator ] : [ Validators.required, passwordValidator, confirmValidator(this.confirm.formName) ]; this.addFormValidator(name, validators); } this.isLoaded = true; } }