import { MXInputBaseValueComponent, MXLookComponent, AXComponent, AXFocusableComponent, AXClearableComponent, AXValuableComponent } from '@acorex/cdk/common';
import * as i0 from '@angular/core';
import { forwardRef, HostBinding, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, signal, input, afterNextRender, NgModule } from '@angular/core';
import * as i1 from '@angular/forms';
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { classes } from 'polytype';
import { AXBadgeComponent, AXBadgeModule } from '@acorex/components/badge';
import { AXButtonModule } from '@acorex/components/button';
import { AXDecoratorModule } from '@acorex/components/decorators';
import { AXProgressBarComponent, AXProgressBarModule } from '@acorex/components/progress-bar';
import { AXTranslatorPipe, AXTranslationModule } from '@acorex/core/translation';
import { AsyncPipe, CommonModule } from '@angular/common';

/**
 * A specialized input field designed for securely capturing user passwords. It incorporates essential features to enhance usability, accessibility, and security while maintaining a user-friendly interface. The component extends MXInputBaseValueComponent and MXLookComponent to provide comprehensive input functionality with visual styling options.
 *
 * @category Components
 */
class AXPasswordBoxComponent extends classes((MXInputBaseValueComponent), MXLookComponent) {
    constructor() {
        super(...arguments);
        /** @ignore */
        this._type = 'password';
        /** @ignore */
        this._icon = 'ax-icon-visibility';
        /**
         * Sets the autocomplete behavior for the input field.
         */
        this.autoComplete = 'one-time-code';
        /**
         *  A flag for showing or hiding password button.
         */
        this.showToggleButton = true;
    }
    /** @ignore */
    _handleModelChange(value) {
        this.commitValue(value, true);
    }
    /**
     * Toggles the input type between 'password' and 'text' to show or hide the password.
     */
    toggleType() {
        if (this._type === 'password') {
            this._type = 'text';
            this._icon = 'ax-icon-visibility-off';
        }
        else {
            this._type = 'password';
            this._icon = 'ax-icon-visibility';
        }
    }
    get __hostName() {
        return this.name;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPasswordBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXPasswordBoxComponent, isStandalone: true, selector: "ax-password-box", inputs: { readonly: "readonly", disabled: "disabled", tabIndex: "tabIndex", placeholder: "placeholder", value: "value", state: "state", name: "name", id: "id", look: "look", autoComplete: "autoComplete", showToggleButton: "showToggleButton", classNames: ["class", "classNames"] }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange", onKeyDown: "onKeyDown", onKeyUp: "onKeyUp", onKeyPress: "onKeyPress" }, host: { properties: { "attr.name": "this.__hostName" } }, providers: [
            { provide: AXComponent, useExisting: AXPasswordBoxComponent },
            { provide: AXFocusableComponent, useExisting: AXPasswordBoxComponent },
            { provide: AXClearableComponent, useExisting: AXPasswordBoxComponent },
            { provide: AXValuableComponent, useExisting: AXPasswordBoxComponent },
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => AXPasswordBoxComponent),
                multi: true,
            },
        ], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ax-editor-container {{ classNames }} ax-{{ look }}\"\n  [class.ax-state-disabled]=\"disabled\"\n  [class.ax-state-readonly]=\"readonly\"\n>\n  <ng-content select=\"ax-prefix\"> </ng-content>\n\n  <input\n    #input\n    class=\"ax-input\"\n    [type]=\"_type\"\n    [id]=\"id\"\n    [attr.placeholder]=\"placeholder\"\n    [class.ax-state-disabled]=\"disabled\"\n    [class.ax-state-readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [tabindex]=\"tabIndex\"\n    [ngModel]=\"value\"\n    [attr.autocomplete]=\"autoComplete\"\n    (ngModelChange)=\"_handleModelChange($event)\"\n    (keydown)=\"emitOnKeydownEvent($event)\"\n    (keyup)=\"emitOnKeyupEvent($event)\"\n    (keypress)=\"emitOnKeypressEvent($event)\"\n    (focus)=\"emitOnFocusEvent($event)\"\n    (blur)=\"emitOnBlurEvent($event)\"\n  />\n\n  @if (value && !disabled && !readonly) {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n  }\n  @if (showToggleButton) {\n    <button\n      type=\"button\"\n      class=\"ax-general-button ax-button-icon\"\n      (click)=\"toggleType()\"\n      [tabIndex]=\"-1\"\n      [disabled]=\"disabled\"\n    >\n      <span class=\"ax-icon {{ _icon }}\"></span>\n    </button>\n  }\n  <ng-content select=\"ax-suffix\"> </ng-content>\n</div>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n<div class=\"ax-error-container\"></div>\n<ng-content select=\"ax-password-strength-validation\" [showHint]=\"showStrength()\"></ng-content>\n", styles: ["ax-password-box{display:flex;flex-direction:column;gap:.2rem}ax-password-box .ax-state-disabled{opacity:.55;cursor:not-allowed}ax-password-box .ax-state-readonly{opacity:.75}ax-password-box .ax-general-button{--ax-comp-general-button-padding-left: 0;--ax-comp-general-button-padding-right: 0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPasswordBoxComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-password-box', inputs: ['readonly', 'disabled', 'tabIndex', 'placeholder', 'value', 'state', 'name', 'id', 'look'], outputs: [
                        'valueChange',
                        'stateChange',
                        'onValueChanged',
                        'onBlur',
                        'onFocus',
                        'readonlyChange',
                        'disabledChange',
                        'onKeyDown',
                        'onKeyUp',
                        'onKeyPress',
                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                        { provide: AXComponent, useExisting: AXPasswordBoxComponent },
                        { provide: AXFocusableComponent, useExisting: AXPasswordBoxComponent },
                        { provide: AXClearableComponent, useExisting: AXPasswordBoxComponent },
                        { provide: AXValuableComponent, useExisting: AXPasswordBoxComponent },
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => AXPasswordBoxComponent),
                            multi: true,
                        },
                    ], imports: [FormsModule], template: "<div\n  class=\"ax-editor-container {{ classNames }} ax-{{ look }}\"\n  [class.ax-state-disabled]=\"disabled\"\n  [class.ax-state-readonly]=\"readonly\"\n>\n  <ng-content select=\"ax-prefix\"> </ng-content>\n\n  <input\n    #input\n    class=\"ax-input\"\n    [type]=\"_type\"\n    [id]=\"id\"\n    [attr.placeholder]=\"placeholder\"\n    [class.ax-state-disabled]=\"disabled\"\n    [class.ax-state-readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [tabindex]=\"tabIndex\"\n    [ngModel]=\"value\"\n    [attr.autocomplete]=\"autoComplete\"\n    (ngModelChange)=\"_handleModelChange($event)\"\n    (keydown)=\"emitOnKeydownEvent($event)\"\n    (keyup)=\"emitOnKeyupEvent($event)\"\n    (keypress)=\"emitOnKeypressEvent($event)\"\n    (focus)=\"emitOnFocusEvent($event)\"\n    (blur)=\"emitOnBlurEvent($event)\"\n  />\n\n  @if (value && !disabled && !readonly) {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n  }\n  @if (showToggleButton) {\n    <button\n      type=\"button\"\n      class=\"ax-general-button ax-button-icon\"\n      (click)=\"toggleType()\"\n      [tabIndex]=\"-1\"\n      [disabled]=\"disabled\"\n    >\n      <span class=\"ax-icon {{ _icon }}\"></span>\n    </button>\n  }\n  <ng-content select=\"ax-suffix\"> </ng-content>\n</div>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n<div class=\"ax-error-container\"></div>\n<ng-content select=\"ax-password-strength-validation\" [showHint]=\"showStrength()\"></ng-content>\n", styles: ["ax-password-box{display:flex;flex-direction:column;gap:.2rem}ax-password-box .ax-state-disabled{opacity:.55;cursor:not-allowed}ax-password-box .ax-state-readonly{opacity:.75}ax-password-box .ax-general-button{--ax-comp-general-button-padding-left: 0;--ax-comp-general-button-padding-right: 0}\n"] }]
        }], propDecorators: { autoComplete: [{
                type: Input
            }], showToggleButton: [{
                type: Input
            }], classNames: [{
                type: Input,
                args: ['class']
            }], __hostName: [{
                type: HostBinding,
                args: ['attr.name']
            }] } });

class AXPasswordStrengthValidationComponent {
    constructor() {
        this.parent = inject(AXPasswordBoxComponent);
        this.passwordStrength = signal(0, ...(ngDevMode ? [{ debugName: "passwordStrength" }] : []));
        this.updatedPassword = signal('', ...(ngDevMode ? [{ debugName: "updatedPassword" }] : []));
        this.strengthLabel = signal('fragile', ...(ngDevMode ? [{ debugName: "strengthLabel" }] : []));
        this.strengthLabelColor = signal('danger', ...(ngDevMode ? [{ debugName: "strengthLabelColor" }] : []));
        this.showProgress = input(true, ...(ngDevMode ? [{ debugName: "showProgress" }] : []));
        this.showLengthGraterThan8 = input(true, ...(ngDevMode ? [{ debugName: "showLengthGraterThan8" }] : []));
        this.showUseUpperCase = input(true, ...(ngDevMode ? [{ debugName: "showUseUpperCase" }] : []));
        this.showUseLowerCase = input(true, ...(ngDevMode ? [{ debugName: "showUseLowerCase" }] : []));
        this.showUseNumber = input(true, ...(ngDevMode ? [{ debugName: "showUseNumber" }] : []));
        this.showUseSpecialCharacter = input(true, ...(ngDevMode ? [{ debugName: "showUseSpecialCharacter" }] : []));
        this.isLengthGraterThan8 = signal({ regex: /.{8,}/, state: false }, ...(ngDevMode ? [{ debugName: "isLengthGraterThan8" }] : []));
        this.isUseUpperCase = signal({ regex: /[A-Z]/, state: false }, ...(ngDevMode ? [{ debugName: "isUseUpperCase" }] : []));
        this.isUseLowerCase = signal({ regex: /[a-z]/, state: false }, ...(ngDevMode ? [{ debugName: "isUseLowerCase" }] : []));
        this.isUseNumber = signal({ regex: /\d/, state: false }, ...(ngDevMode ? [{ debugName: "isUseNumber" }] : []));
        this.isUseSpecialCharacter = signal({
            regex: /[!@#$%^&*(),.?":{}|<>]/,
            state: false,
        }, ...(ngDevMode ? [{ debugName: "isUseSpecialCharacter" }] : []));
        this.#onComponentInit = afterNextRender(() => {
            this.parent.onValueChanged.subscribe((v) => {
                if (v.value) {
                    this.updatedPassword.set(v.value);
                }
                else {
                    this.updatedPassword.set('');
                }
                this.checkPasswordStrength();
            });
        });
    }
    #onComponentInit;
    checkRegexHandler(inter) {
        if (inter().regex.test(this.updatedPassword())) {
            inter.update((prev) => ({ ...prev, state: true }));
            return true;
        }
        inter.update((prev) => ({ ...prev, state: false }));
        return false;
    }
    checkPasswordStrength() {
        let strength = 0;
        if (this.isLengthGraterThan8()) {
            this.checkRegexHandler(this.isLengthGraterThan8) && strength++;
        }
        if (this.showUseUpperCase()) {
            this.checkRegexHandler(this.isUseUpperCase) && strength++;
        }
        if (this.showUseLowerCase()) {
            this.checkRegexHandler(this.isUseLowerCase) && strength++;
        }
        if (this.showUseNumber()) {
            this.checkRegexHandler(this.isUseNumber) && strength++;
        }
        if (this.showUseSpecialCharacter()) {
            this.checkRegexHandler(this.isUseSpecialCharacter) && strength++;
        }
        const strengthLabels = ['fragile', 'fragile', 'weak', 'good', 'strong', 'unbreakable'];
        this.strengthLabel.set(strengthLabels[strength]);
        this.strengthLabelColor.set(strength <= 2 ? 'danger' : strength <= 3 ? 'warning' : 'success');
        this.passwordStrength.set((strength * 100) / 5);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPasswordStrengthValidationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXPasswordStrengthValidationComponent, isStandalone: true, selector: "ax-password-strength-validation", inputs: { showProgress: { classPropertyName: "showProgress", publicName: "showProgress", isSignal: true, isRequired: false, transformFunction: null }, showLengthGraterThan8: { classPropertyName: "showLengthGraterThan8", publicName: "showLengthGraterThan8", isSignal: true, isRequired: false, transformFunction: null }, showUseUpperCase: { classPropertyName: "showUseUpperCase", publicName: "showUseUpperCase", isSignal: true, isRequired: false, transformFunction: null }, showUseLowerCase: { classPropertyName: "showUseLowerCase", publicName: "showUseLowerCase", isSignal: true, isRequired: false, transformFunction: null }, showUseNumber: { classPropertyName: "showUseNumber", publicName: "showUseNumber", isSignal: true, isRequired: false, transformFunction: null }, showUseSpecialCharacter: { classPropertyName: "showUseSpecialCharacter", publicName: "showUseSpecialCharacter", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXPasswordStrengthValidationComponent }], ngImport: i0, template: "@if (showProgress()) {\n  <small\n    class=\"ax-state-password\"\n    [class.ax-text-red]=\"strengthLabelColor() === 'danger'\"\n    [class.ax-text-orange]=\"strengthLabelColor() === 'warning'\"\n    [class.ax-text-green]=\"strengthLabelColor() === 'success'\"\n  >\n    {{ '@acorex:password-strength.levels.' + strengthLabel() | translate | async }}\n  </small>\n\n  <ax-progress-bar [color]=\"strengthLabelColor()\" [progress]=\"passwordStrength()\" [height]=\"4\"></ax-progress-bar>\n}\n\n<div class=\"ax-hint-container\">\n  @if (showLengthGraterThan8()) {\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isLengthGraterThan8().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ '@acorex:password-strength.rules.at-least-8-characters' | translate | async }}\n      </span>\n    </small>\n  }\n  @if (showUseUpperCase()) {\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseUpperCase().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ '@acorex:password-strength.rules.english-upper-case-letter' | translate | async }}\n      </span>\n    </small>\n  }\n  @if (showUseLowerCase()) {\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseLowerCase().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ '@acorex:password-strength.rules.english-lower-case-letter' | translate | async }}\n      </span>\n    </small>\n  }\n  @if (showUseNumber()) {\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseNumber().state ? 'success' : 'danger'\"></ax-badge\n      ><span> {{ '@acorex:password-strength.rules.digits' | translate | async }} </span>\n    </small>\n  }\n  @if (showUseSpecialCharacter()) {\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseSpecialCharacter().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ '@acorex:password-strength.rules.special-character' | translate | async }}\n      </span>\n    </small>\n  }\n</div>\n", styles: [".ax-state-password{display:block;margin-bottom:.375rem}.ax-state-password.ax-text-red{color:rgb(var(--ax-sys-color-danger-surface))}.ax-state-password.ax-text-orange{color:rgb(var(--ax-sys-color-warning-surface))}.ax-state-password.ax-text-green{color:rgb(var(--ax-sys-color-success-surface))}.ax-hint-container{display:flex;flex-direction:column;gap:.5rem;padding-top:.5rem}.ax-hint-container ax-badge{margin-inline-end:.25rem}\n"], dependencies: [{ kind: "component", type: AXProgressBarComponent, selector: "ax-progress-bar", inputs: ["color", "mode", "progress", "height"], outputs: ["ValueChange", "sizeChange"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPasswordStrengthValidationComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-password-strength-validation', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXProgressBarComponent, AXBadgeComponent, AsyncPipe, AXTranslatorPipe], providers: [{ provide: AXComponent, useExisting: AXPasswordStrengthValidationComponent }], template: "@if (showProgress()) {\n  <small\n    class=\"ax-state-password\"\n    [class.ax-text-red]=\"strengthLabelColor() === 'danger'\"\n    [class.ax-text-orange]=\"strengthLabelColor() === 'warning'\"\n    [class.ax-text-green]=\"strengthLabelColor() === 'success'\"\n  >\n    {{ '@acorex:password-strength.levels.' + strengthLabel() | translate | async }}\n  </small>\n\n  <ax-progress-bar [color]=\"strengthLabelColor()\" [progress]=\"passwordStrength()\" [height]=\"4\"></ax-progress-bar>\n}\n\n<div class=\"ax-hint-container\">\n  @if (showLengthGraterThan8()) {\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isLengthGraterThan8().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ '@acorex:password-strength.rules.at-least-8-characters' | translate | async }}\n      </span>\n    </small>\n  }\n  @if (showUseUpperCase()) {\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseUpperCase().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ '@acorex:password-strength.rules.english-upper-case-letter' | translate | async }}\n      </span>\n    </small>\n  }\n  @if (showUseLowerCase()) {\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseLowerCase().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ '@acorex:password-strength.rules.english-lower-case-letter' | translate | async }}\n      </span>\n    </small>\n  }\n  @if (showUseNumber()) {\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseNumber().state ? 'success' : 'danger'\"></ax-badge\n      ><span> {{ '@acorex:password-strength.rules.digits' | translate | async }} </span>\n    </small>\n  }\n  @if (showUseSpecialCharacter()) {\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseSpecialCharacter().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ '@acorex:password-strength.rules.special-character' | translate | async }}\n      </span>\n    </small>\n  }\n</div>\n", styles: [".ax-state-password{display:block;margin-bottom:.375rem}.ax-state-password.ax-text-red{color:rgb(var(--ax-sys-color-danger-surface))}.ax-state-password.ax-text-orange{color:rgb(var(--ax-sys-color-warning-surface))}.ax-state-password.ax-text-green{color:rgb(var(--ax-sys-color-success-surface))}.ax-hint-container{display:flex;flex-direction:column;gap:.5rem;padding-top:.5rem}.ax-hint-container ax-badge{margin-inline-end:.25rem}\n"] }]
        }] });

const COMPONENT = [AXPasswordBoxComponent, AXPasswordStrengthValidationComponent];
const MODULES = [
    CommonModule,
    FormsModule,
    AXButtonModule,
    AXDecoratorModule,
    AXProgressBarModule,
    AXBadgeModule,
    AXTranslationModule,
];
class AXPasswordBoxModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPasswordBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: AXPasswordBoxModule, imports: [CommonModule,
            FormsModule,
            AXButtonModule,
            AXDecoratorModule,
            AXProgressBarModule,
            AXBadgeModule,
            AXTranslationModule, AXPasswordBoxComponent, AXPasswordStrengthValidationComponent], exports: [AXPasswordBoxComponent, AXPasswordStrengthValidationComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPasswordBoxModule, imports: [MODULES, COMPONENT] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPasswordBoxModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [...MODULES, ...COMPONENT],
                    exports: [...COMPONENT],
                    providers: [],
                }]
        }] });

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

export { AXPasswordBoxComponent, AXPasswordBoxModule, AXPasswordStrengthValidationComponent };
//# sourceMappingURL=acorex-components-password-box.mjs.map
