@koalarx/ui/fesm2022/koalarx-ui-shared-components-input-field-input-password.mjs

Koala UI is a modern and accessible component library designed to speed up interface development in Angular projects. With simple integration and clear documentation, you can easily build robust and visually appealing applications.

import * as i0 from '@angular/core';
import { inject, signal, input, booleanAttribute, ChangeDetectionStrategy, Component } from '@angular/core';
import * as i1 from '@angular/forms';
import { Validators, ReactiveFormsModule } from '@angular/forms';
import { AppConfig } from '@koalarx/ui/core/config';
import { FieldErrors } from '@koalarx/ui/shared/components/field-errors';
import { InputFieldBase } from '@koalarx/ui/shared/components/input-field';

function HasLowercaseValidator(control) {
    if (!/[a-z]/.test(control.value)) {
        return { hasLowercase: true };
    }
    return null;
}

function HasNumberValidator(control) {
    if (!/\d/.test(control.value)) {
        return { hasNumber: true };
    }
    return null;
}

function HasSpecialCharactersValidator(control) {
    if (!/[ `!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?~]/.test(control.value)) {
        return { hasSpecialCharacters: true };
    }
    return null;
}

function HasUppercaseValidator(control) {
    if (!/[A-Z]/.test(control.value)) {
        return { hasUppercase: true };
    }
    return null;
}

class InputPassword extends InputFieldBase {
    translations = inject(AppConfig).translation.form;
    type = signal('password', ...(ngDevMode ? [{ debugName: "type" }] : []));
    enableStrongPasswordCheck = input(false, { ...(ngDevMode ? { debugName: "enableStrongPasswordCheck" } : {}), transform: booleanAttribute });
    togglePasswordVisibility() {
        this.type.set(this.type() === 'password' ? 'text' : 'password');
    }
    ngOnInit() {
        if (this.enableStrongPasswordCheck()) {
            this.control().addValidators([
                HasSpecialCharactersValidator,
                HasLowercaseValidator,
                HasUppercaseValidator,
                HasNumberValidator,
                Validators.minLength(8),
            ]);
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputPassword, deps: null, target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputPassword, isStandalone: true, selector: "kl-input-password", inputs: { enableStrongPasswordCheck: { classPropertyName: "enableStrongPasswordCheck", publicName: "enableStrongPasswordCheck", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<label [attr.for]=\"fieldId\" class=\"floating-label input validator w-full\">\n  @if (label(); as label) {\n    <span class=\"label\">\n      <ng-content select=\"[icon]\" />\n      {{ label }} {{ isRequired() ? '*' : '' }}\n    </span>\n  }\n\n  <input\n    [id]=\"fieldId\"\n    [formControl]=\"control()\"\n    [placeholder]=\"label()\n      ? label() + (isRequired() ? '*' : '')\n      : placeholder()\"\n    [required]=\"isRequired()\"\n    [type]=\"type()\"\n  />\n\n  <button class=\"cursor-pointer\" type=\"button\" (click)=\"togglePasswordVisibility()\">\n    @if (type() === 'password') {\n      <i class=\"fa-regular fa-eye-slash\"></i>\n    } @else {\n      <i class=\"fa-regular fa-eye\"></i>\n    }\n  </button>\n</label>\n\n@if (hint()) {\n  <span class=\"hint-content\">\n    <i class=\"fa-regular fa-circle-question\"></i> {{hint()}}\n  </span>\n}\n\n<kl-field-errors [field]=\"control()\">\n  <ng-container errors>\n    @if (control().errors?.['hasSpecialCharacters']) {\n      {{translations.invalidPasswordHasSpecialCharacters}}<br/>\n    }\n\n    @if (control().errors?.['hasUppercase']) {\n      {{translations.invalidPasswordHasUppercase}}<br/>\n    }\n\n    @if (control().errors?.['hasLowercase']) {\n      {{translations.invalidPasswordHasLowercase}}<br/>\n    }\n\n    @if (control().errors?.['hasNumber']) {\n      {{translations.invalidPasswordHasNumber}}<br/>\n    }\n\n    @if (control().errors?.['minlength']) {\n      {{translations.invalidMinLength(control().errors?.['minlength'].requiredLength)}}<br/>\n    }\n\n    @if (control().errors?.['confirmPassword']) {\n      {{translations.invalidConfirmPassword}}<br/>\n    }\n\n    <ng-content select=\"[errors]\" />\n  </ng-container>\n</kl-field-errors>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FieldErrors, selector: "kl-field-errors", inputs: ["field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputPassword, decorators: [{
            type: Component,
            args: [{ selector: 'kl-input-password', imports: [ReactiveFormsModule, FieldErrors], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"fieldId\" class=\"floating-label input validator w-full\">\n  @if (label(); as label) {\n    <span class=\"label\">\n      <ng-content select=\"[icon]\" />\n      {{ label }} {{ isRequired() ? '*' : '' }}\n    </span>\n  }\n\n  <input\n    [id]=\"fieldId\"\n    [formControl]=\"control()\"\n    [placeholder]=\"label()\n      ? label() + (isRequired() ? '*' : '')\n      : placeholder()\"\n    [required]=\"isRequired()\"\n    [type]=\"type()\"\n  />\n\n  <button class=\"cursor-pointer\" type=\"button\" (click)=\"togglePasswordVisibility()\">\n    @if (type() === 'password') {\n      <i class=\"fa-regular fa-eye-slash\"></i>\n    } @else {\n      <i class=\"fa-regular fa-eye\"></i>\n    }\n  </button>\n</label>\n\n@if (hint()) {\n  <span class=\"hint-content\">\n    <i class=\"fa-regular fa-circle-question\"></i> {{hint()}}\n  </span>\n}\n\n<kl-field-errors [field]=\"control()\">\n  <ng-container errors>\n    @if (control().errors?.['hasSpecialCharacters']) {\n      {{translations.invalidPasswordHasSpecialCharacters}}<br/>\n    }\n\n    @if (control().errors?.['hasUppercase']) {\n      {{translations.invalidPasswordHasUppercase}}<br/>\n    }\n\n    @if (control().errors?.['hasLowercase']) {\n      {{translations.invalidPasswordHasLowercase}}<br/>\n    }\n\n    @if (control().errors?.['hasNumber']) {\n      {{translations.invalidPasswordHasNumber}}<br/>\n    }\n\n    @if (control().errors?.['minlength']) {\n      {{translations.invalidMinLength(control().errors?.['minlength'].requiredLength)}}<br/>\n    }\n\n    @if (control().errors?.['confirmPassword']) {\n      {{translations.invalidConfirmPassword}}<br/>\n    }\n\n    <ng-content select=\"[errors]\" />\n  </ng-container>\n</kl-field-errors>\n" }]
        }], propDecorators: { enableStrongPasswordCheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableStrongPasswordCheck", required: false }] }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { HasLowercaseValidator, HasNumberValidator, HasSpecialCharactersValidator, HasUppercaseValidator, InputPassword };
//# sourceMappingURL=koalarx-ui-shared-components-input-field-input-password.mjs.map