import * as i0 from '@angular/core';
import { Pipe, EventEmitter, Component, Input, Output, Optional, Inject, Self, ViewChild, NgModule } from '@angular/core';
import * as i2$1 from '@angular/forms';
import { FormControl as FormControl$1, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as i1 from '@aztrix/components/overlay';
import { ModalSize } from '@aztrix/components/overlay';
import { first, Subject, BehaviorSubject } from 'rxjs';
import * as i6 from '@aztrix/helpers';
import { CustomValidators, HelperPipesModule } from '@aztrix/helpers';
import { FormControl } from '@ngneat/reactive-forms';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i4 from '@aztrix/components/button';
import { ButtonModule } from '@aztrix/components/button';
import * as i4$1 from '@aztrix/components/value-edit';
import { ValueEditModule } from '@aztrix/components/value-edit';
import * as i5 from '@aztrix/components/login-value-form-error';
import { LoginValueFormErrorModule } from '@aztrix/components/login-value-form-error';
import { differenceInSeconds } from 'date-fns';
import * as i5$1 from '@angular/material/form-field';
import { MAT_FORM_FIELD, MatFormFieldControl, MatFormFieldModule } from '@angular/material/form-field';
import * as i1$1 from '@angular/cdk/a11y';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import * as i3 from '@angular/material/input';
import { MatInputModule } from '@angular/material/input';

/**
 * counts the seconds between the given time and now
 **/
class SecondsFromNowPipe {
    transform(value) {
        return differenceInSeconds(value, Date.now());
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SecondsFromNowPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: SecondsFromNowPipe, name: "secondsFromNow", pure: false }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SecondsFromNowPipe, decorators: [{
            type: Pipe,
            args: [{ name: 'secondsFromNow', pure: false }]
        }] });

class RetryVerificationComponent {
    set endTime(time) {
        localStorage.setItem('endTime', time.toString());
    }
    get endTime() {
        return +(localStorage.getItem('endTime') || '');
    }
    constructor(_overlay, _changeDetector) {
        this._overlay = _overlay;
        this._changeDetector = _changeDetector;
        this.form = new FormControl('', [CustomValidators.validateLoginValue()]);
        this.verificationValueChanges = new EventEmitter();
        this._mobileForm = new FormControl();
        this._emailForm = new FormControl();
    }
    ngOnInit() {
        this._mobileForm.valueChanges.subscribe((value) => {
            this.form.setValue(value);
        });
        this._emailForm.valueChanges.subscribe((value) => {
            this.form.setValue(value);
        });
        const currentEndTime = +(localStorage.getItem('endTime') || '');
        if (currentEndTime && currentEndTime <= 0) {
            this.endTime = this.startDate + 120 * 1000;
        }
        this.startTimer();
    }
    ngOnDestroy() {
        clearInterval(this._interval);
    }
    startTimer() {
        this._interval = setInterval(() => {
            this._changeDetector.detectChanges();
        }, 1000);
    }
    resendVerification() {
        this.endTime = Date.now() + 120 * 1000;
        this.retryVerification(this.form.value)
            .pipe(first())
            .subscribe(() => {
            this.verificationValueChanges.next(this.form.value);
            this._overlay.closeModal();
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RetryVerificationComponent, deps: [{ token: i1.OverlayService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: RetryVerificationComponent, selector: "ax-retry-verification", inputs: { form: "form", startDate: "startDate", canChangeValue: "canChangeValue", verificationType: "verificationType", retryVerification: "retryVerification" }, outputs: { verificationValueChanges: "verificationValueChanges" }, ngImport: i0, template: "@if ((endTime | secondsFromNow) > 0) {\n  <p>\n    {{ 'agreement.verification.retry.message' | translate }}\n  </p>\n  <p>\n    {{\n      'agreement.verification.retry.message.time' | translate: {seconds: endTime | secondsFromNow}\n    }}\n  </p>\n} @else if (canChangeValue) {\n  <p>{{ 'agreement.verification.retry.message.1' | translate }}</p>\n  <ul>\n    <li>{{ 'agreement.verification.retry.message.1.option1' | translate }}</li>\n    <li>{{ 'agreement.verification.retry.message.1.option2' | translate }}</li>\n  </ul>\n\n  <div class=\"retry\">\n    <ax-value-edit\n      [form]=\"form\"\n      [autofocus]=\"false\"\n      [required]=\"true\"\n      [hint]=\"\n        'proposal.agreement.verification.property'\n          | translate: {propertyType: verificationType | propertyTypeLabel | lowercase}\n      \"\n      [type]=\"\n        verificationType.includes('MOBILE')\n          ? 'PHONE'\n          : verificationType === 'EMAIL'\n            ? 'EMAIL'\n            : 'PHONE'\n      \"\n      [label]=\"verificationType | propertyTypeLabel\"\n      [errorsTemplate]=\"errorsTemplate\"\n    ></ax-value-edit>\n    <button\n      [disabled]=\"form.invalid\"\n      axButton\n      filled\n      fullWidth\n      (click)=\"resendVerification()\"\n      color=\"primary\"\n    >\n      {{ 'agreement.verification.retry' | translate }}\n    </button>\n  </div>\n\n  <ng-template #errorsTemplate>\n    <ax-login-value-form-error\n      *ngIf=\"form.touched\"\n      [form]=\"form\"\n      [propertyType]=\"verificationType\"\n    ></ax-login-value-form-error>\n  </ng-template>\n\n  <p>{{ 'agreement.verification.retry.message.2' | translate }}</p>\n} @else {\n  <p>{{ 'agreement.verification.retry.message.1' | translate }}</p>\n  <ul>\n    <li>{{ 'agreement.verification.retry.message.1.option1' | translate }}</li>\n    <li>{{ 'agreement.verification.retry.message.1.option2' | translate }}</li>\n  </ul>\n  <div class=\"retry\">\n    <button\n      axButton\n      filled\n      fullWidth\n      color=\"primary\"\n      [disabled]=\"(endTime | secondsFromNow) > 0\"\n      (click)=\"resendVerification()\"\n    >\n      {{ 'agreement.verification.retry' | translate }}\n    </button>\n  </div>\n\n  <p>{{ 'agreement.verification.retry.message.2' | translate }}</p>\n}\n", styles: [":host{padding:1rem;display:block}:host p{margin:0}.retry{padding:0 0 1rem}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[axButton]", inputs: ["color", "labelHideMobile", "smallButton", "bigButton", "fullWidth", "filled", "outline", "icon-button", "hoverLabel", "hover", "lowercase", "disabled"] }, { kind: "component", type: i4$1.ValueEditComponent, selector: "ax-value-edit", inputs: ["type", "numberConfig"] }, { kind: "component", type: i5.LoginValueFormErrorComponent, selector: "ax-login-value-form-error", inputs: ["form", "propertyType"] }, { kind: "pipe", type: i2.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i6.PropertyTypeLabelPipe, name: "propertyTypeLabel" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: SecondsFromNowPipe, name: "secondsFromNow" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RetryVerificationComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-retry-verification', template: "@if ((endTime | secondsFromNow) > 0) {\n  <p>\n    {{ 'agreement.verification.retry.message' | translate }}\n  </p>\n  <p>\n    {{\n      'agreement.verification.retry.message.time' | translate: {seconds: endTime | secondsFromNow}\n    }}\n  </p>\n} @else if (canChangeValue) {\n  <p>{{ 'agreement.verification.retry.message.1' | translate }}</p>\n  <ul>\n    <li>{{ 'agreement.verification.retry.message.1.option1' | translate }}</li>\n    <li>{{ 'agreement.verification.retry.message.1.option2' | translate }}</li>\n  </ul>\n\n  <div class=\"retry\">\n    <ax-value-edit\n      [form]=\"form\"\n      [autofocus]=\"false\"\n      [required]=\"true\"\n      [hint]=\"\n        'proposal.agreement.verification.property'\n          | translate: {propertyType: verificationType | propertyTypeLabel | lowercase}\n      \"\n      [type]=\"\n        verificationType.includes('MOBILE')\n          ? 'PHONE'\n          : verificationType === 'EMAIL'\n            ? 'EMAIL'\n            : 'PHONE'\n      \"\n      [label]=\"verificationType | propertyTypeLabel\"\n      [errorsTemplate]=\"errorsTemplate\"\n    ></ax-value-edit>\n    <button\n      [disabled]=\"form.invalid\"\n      axButton\n      filled\n      fullWidth\n      (click)=\"resendVerification()\"\n      color=\"primary\"\n    >\n      {{ 'agreement.verification.retry' | translate }}\n    </button>\n  </div>\n\n  <ng-template #errorsTemplate>\n    <ax-login-value-form-error\n      *ngIf=\"form.touched\"\n      [form]=\"form\"\n      [propertyType]=\"verificationType\"\n    ></ax-login-value-form-error>\n  </ng-template>\n\n  <p>{{ 'agreement.verification.retry.message.2' | translate }}</p>\n} @else {\n  <p>{{ 'agreement.verification.retry.message.1' | translate }}</p>\n  <ul>\n    <li>{{ 'agreement.verification.retry.message.1.option1' | translate }}</li>\n    <li>{{ 'agreement.verification.retry.message.1.option2' | translate }}</li>\n  </ul>\n  <div class=\"retry\">\n    <button\n      axButton\n      filled\n      fullWidth\n      color=\"primary\"\n      [disabled]=\"(endTime | secondsFromNow) > 0\"\n      (click)=\"resendVerification()\"\n    >\n      {{ 'agreement.verification.retry' | translate }}\n    </button>\n  </div>\n\n  <p>{{ 'agreement.verification.retry.message.2' | translate }}</p>\n}\n", styles: [":host{padding:1rem;display:block}:host p{margin:0}.retry{padding:0 0 1rem}\n"] }]
        }], ctorParameters: () => [{ type: i1.OverlayService }, { type: i0.ChangeDetectorRef }], propDecorators: { form: [{
                type: Input
            }], startDate: [{
                type: Input
            }], canChangeValue: [{
                type: Input
            }], verificationType: [{
                type: Input
            }], retryVerification: [{
                type: Input
            }], verificationValueChanges: [{
                type: Output
            }] } });

class OtpInputComponent {
    static { this.nextId = 0; }
    get empty() {
        return !this.form.value?.length;
    }
    get shouldLabelFloat() {
        return this.focused || !this.empty;
    }
    get placeholder() {
        return this._placeholder;
    }
    set placeholder(value) {
        this._placeholder = value;
        this.stateChanges.next();
    }
    get required() {
        return this._required;
    }
    set required(value) {
        this._required = coerceBooleanProperty(value);
        this.stateChanges.next();
    }
    get disabled() {
        return this._disabled;
    }
    set disabled(value) {
        this._disabled = coerceBooleanProperty(value);
        this._disabled ? this.form.disable() : this.form.enable();
        this.stateChanges.next();
    }
    get value() {
        return this.form.value;
    }
    set value(value) {
        if (!value) {
            value = '';
        }
        const chars = [...value.toUpperCase()]
            .filter((char) => {
            const code = char.charCodeAt(0);
            return code > 47 && code < 91;
        })
            .slice(0, 6);
        this.form.setValue(chars.join(''));
        this.stateChanges.next();
    }
    get errorState() {
        return this.form.invalid && this.touched;
    }
    constructor(_focusMonitor, _elementRef, _formField, ngControl) {
        this._focusMonitor = _focusMonitor;
        this._elementRef = _elementRef;
        this._formField = _formField;
        this.ngControl = ngControl;
        this._required = false;
        this._disabled = false;
        this.form = new FormControl$1({ value: null, disabled: false }, [
            Validators.required,
            Validators.minLength(5),
            Validators.maxLength(6),
        ]);
        this.stateChanges = new Subject();
        this.focused = false;
        this.touched = false;
        this.controlType = 'otp-input';
        this.id = `otp-input-${OtpInputComponent.nextId++}`;
        // eslint-disable-next-line @typescript-eslint/no-empty-function
        this.onChange = (_) => { };
        // eslint-disable-next-line @typescript-eslint/no-empty-function
        this.onTouched = () => { };
        if (this.ngControl != null) {
            this.ngControl.valueAccessor = this;
        }
    }
    ngOnDestroy() {
        this.stateChanges.complete();
        this._focusMonitor.stopMonitoring(this._elementRef);
    }
    onFocusIn() {
        if (!this.focused) {
            this.focused = true;
            this.stateChanges.next();
        }
    }
    onFocusOut(event) {
        if (!this._elementRef.nativeElement.contains(event.relatedTarget)) {
            this.touched = true;
            this.focused = false;
            this.onTouched();
            this.stateChanges.next();
        }
    }
    setDescribedByIds(ids) {
        this._elementRef.nativeElement.setAttribute('aria-describedby', ids.join(' '));
    }
    onContainerClick() {
        this._focusMonitor.focusVia(this.input, 'program');
    }
    writeValue(value) {
        this.value = value;
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
    _handleInput(control) {
        const caretPosition = this.input.nativeElement.selectionStart;
        control.setValue(control.value.toUpperCase());
        this.writeValue(this.value);
        this.onChange(this.value);
        this.input.nativeElement.setSelectionRange(caretPosition, caretPosition);
    }
    paste(event) {
        event.preventDefault();
        if (event.clipboardData) {
            this.value = event.clipboardData.getData('text')?.toUpperCase();
        }
        else {
            navigator.clipboard.readText().then((text) => (this.value = text.toUpperCase()));
        }
        this.onChange(this.value);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OtpInputComponent, deps: [{ token: i1$1.FocusMonitor }, { token: i0.ElementRef }, { token: MAT_FORM_FIELD, optional: true }, { token: i2$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OtpInputComponent, selector: "ax-otp-input", inputs: { userAriaDescribedBy: ["aria-describedby", "userAriaDescribedBy"], placeholder: "placeholder", required: "required", disabled: "disabled", value: "value" }, providers: [{ provide: MatFormFieldControl, useExisting: OtpInputComponent }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<input\n  class=\"otp-input\"\n  size=\"6\"\n  maxLength=\"6\"\n  matInput\n  [formControl]=\"form\"\n  (input)=\"_handleInput(form)\"\n  (focusin)=\"onFocusIn()\"\n  (focusout)=\"onFocusOut($event)\"\n  (paste)=\"paste($event)\"\n  #input\n/>\n", styles: [":host{--letter-spacing: 1.2rem}.otp-input{font-size:2rem;letter-spacing:var(--letter-spacing);text-align:center;width:calc(100% - .6rem);min-width:280px;text-indent:var(--letter-spacing)}\n"], dependencies: [{ kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OtpInputComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-otp-input', providers: [{ provide: MatFormFieldControl, useExisting: OtpInputComponent }], template: "<input\n  class=\"otp-input\"\n  size=\"6\"\n  maxLength=\"6\"\n  matInput\n  [formControl]=\"form\"\n  (input)=\"_handleInput(form)\"\n  (focusin)=\"onFocusIn()\"\n  (focusout)=\"onFocusOut($event)\"\n  (paste)=\"paste($event)\"\n  #input\n/>\n", styles: [":host{--letter-spacing: 1.2rem}.otp-input{font-size:2rem;letter-spacing:var(--letter-spacing);text-align:center;width:calc(100% - .6rem);min-width:280px;text-indent:var(--letter-spacing)}\n"] }]
        }], ctorParameters: () => [{ type: i1$1.FocusMonitor }, { type: i0.ElementRef }, { type: i5$1.MatFormField, decorators: [{
                    type: Optional
                }, {
                    type: Inject,
                    args: [MAT_FORM_FIELD]
                }] }, { type: i2$1.NgControl, decorators: [{
                    type: Optional
                }, {
                    type: Self
                }] }], propDecorators: { userAriaDescribedBy: [{
                type: Input,
                args: ['aria-describedby']
            }], input: [{
                type: ViewChild,
                args: ['input']
            }], placeholder: [{
                type: Input
            }], required: [{
                type: Input
            }], disabled: [{
                type: Input
            }], value: [{
                type: Input
            }] } });

class OtpVerificationComponent {
    constructor(_overlay, _elementRef) {
        this._overlay = _overlay;
        this._elementRef = _elementRef;
        this.verified = false;
        this.verificationValue = '';
        this.canChangeValue = true;
        this.verificationButtonColor = 'accent';
        this.verificationValueChanges = new EventEmitter();
        this.verificationComplete = new EventEmitter();
        this.codeForm = new FormControl$1({ value: null, disabled: false }, [Validators.required]);
        this.loading$ = new BehaviorSubject(false);
        this.error$ = new BehaviorSubject(null);
        this.startDate = Date.now();
    }
    ngOnInit() {
        if (this.verificationCode && !this.verified && this.verificationValue !== '') {
            this.codeForm.setValue(this.verificationCode);
            this.verifyOTP();
        }
    }
    verifyOTP() {
        if (this.codeForm?.errors) {
            return;
        }
        this.loading$.next(true);
        this.error$.next(null);
        this.verification(this.codeForm.value, this.verificationValue || '')
            .pipe(first())
            .subscribe({
            next: (response) => {
                localStorage.removeItem('endTime');
                this.verified = true;
                this.loading$.next(false);
                this.verificationComplete.next(response);
            },
            error: (response) => {
                this.codeForm.reset();
                if (response.error === 'TOO_MANY_VERIFICATION_ATTEMPTS' ||
                    response.error === 'VERIFICATION_CODE_EXPIRED') {
                    localStorage.setItem('endTime', Date.now().toString());
                }
                this.error$.next(typeof response.error === 'string' ? response.error : true);
                this.loading$.next(false);
            },
        });
    }
    retryOTP() {
        this._overlay.createModal(this._elementRef, RetryVerificationComponent, {
            title: 'agreement.verification.send',
            modalSize: ModalSize.COMPACT_EXTRA_SMALL,
            init: (modal) => {
                modal.startDate = this.startDate;
                modal.canChangeValue = this.canChangeValue;
                modal.verificationType = this.verificationType;
                modal.retryVerification = this.retryVerification;
                modal.form.setValue(this.verificationValue || '');
                modal.verificationValueChanges.pipe(first()).subscribe((verificationValue) => {
                    this.verificationValue = verificationValue;
                    this.verificationValueChanges.next(this.verificationValue);
                    this.error$.next(null);
                });
            },
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OtpVerificationComponent, deps: [{ token: i1.OverlayService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OtpVerificationComponent, selector: "ax-otp-verification", inputs: { verified: "verified", verificationValue: "verificationValue", verificationType: "verificationType", canChangeValue: "canChangeValue", verificationCode: "verificationCode", verificationButtonColor: "verificationButtonColor", verification: "verification", retryVerification: "retryVerification" }, outputs: { verificationValueChanges: "verificationValueChanges", verificationComplete: "verificationComplete" }, ngImport: i0, template: "<ng-container *ngIf=\"!verified && verificationValue !== ''\">\n  <ng-container\n    *ngIf=\"\n      (error$ | async) === null ||\n      (error$ | async) === 'INVALID_VERIFICATION_CODE' ||\n      (error$ | async) === 'INVALID_TOKEN' ||\n      (error$ | async) === true\n    \"\n  >\n    <mat-form-field class=\"otp-form-field c-input remove-subtext\" appearance=\"outline\">\n      <mat-label>{{ 'label.enter.code' | translate }}</mat-label>\n      <ax-otp-input matInput [formControl]=\"codeForm\"></ax-otp-input>\n    </mat-form-field>\n\n    <ng-content></ng-content>\n\n    <ax-button\n      class=\"verify\"\n      filled\n      [color]=\"verificationButtonColor\"\n      [loading]=\"loading$ | async\"\n      (click)=\"verifyOTP(); $event.preventDefault()\"\n    >\n      {{ 'label.verify' | translate }}\n    </ax-button>\n\n    <div class=\"resend\">\n      <a axButton class=\"resend-link\" (click)=\"retryOTP()\">\n        <span>{{ 'agreement.verification.code.resend' | translate }}</span>\n      </a>\n    </div>\n  </ng-container>\n\n  <div class=\"error-message\" *ngIf=\"(error$ | async) !== null\">\n    <ng-container [ngSwitch]=\"error$ | async\">\n      <span class=\"error\" *ngSwitchCase=\"'INVALID_VERIFICATION_CODE'\">{{\n        'agreement.verification.code.error.incorrect' | translate\n      }}</span>\n      <span class=\"error\" *ngSwitchCase=\"'INVALID_TOKEN'\">{{\n        'agreement.verification.code.error.incorrect' | translate\n      }}</span>\n      <span class=\"error\" *ngSwitchCase=\"'TOO_MANY_VERIFICATION_ATTEMPTS'\">{{\n        'agreement.verification.code.error.too-many-attempts' | translate\n      }}</span>\n      <span class=\"error\" *ngSwitchCase=\"'VERIFICATION_CODE_EXPIRED'\">{{\n        'agreement.verification.code.error.expired' | translate\n      }}</span>\n      <span class=\"error\" *ngSwitchCase=\"'LOGIN_NOT_REGISTERED'\">{{\n        'error.login.invalid.login' | translate\n      }}</span>\n      <span class=\"error\" *ngSwitchDefault>{{\n        'error.SOMETHING_WENT_WRONG.message' | translate\n      }}</span>\n    </ng-container>\n    <button\n      axButton\n      filled\n      class=\"resend-button\"\n      *ngIf=\"\n        (error$ | async) === 'TOO_MANY_VERIFICATION_ATTEMPTS' ||\n        (error$ | async) === 'VERIFICATION_CODE_EXPIRED'\n      \"\n      (click)=\"retryOTP(); $event.preventDefault()\"\n    >\n      {{ 'property.verification.modal.mobile.resend' | translate }}\n    </button>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch;padding-top:1rem}.error-message{padding:0 1rem 1rem;display:flex;flex-flow:column;align-items:center;justify-content:center;gap:1rem}.error{color:var(--warn-color-500);padding:0 .75rem}.resend-button{margin:0 .75rem}.verify ::ng-deep .ax-button{width:100%}.resend{display:flex;align-items:center;flex-direction:column;text-align:center;padding:.25rem 1rem;max-width:300px;margin:0 auto}a.ax-button.resend-link{text-transform:none;background-color:transparent;text-decoration:underline}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[axButton]", inputs: ["color", "labelHideMobile", "smallButton", "bigButton", "fullWidth", "filled", "outline", "icon-button", "hoverLabel", "hover", "lowercase", "disabled"] }, { kind: "component", type: i4.ButtonComponent, selector: "ax-button", inputs: ["url", "ariaLabel", "target"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "component", type: OtpInputComponent, selector: "ax-otp-input", inputs: ["aria-describedby", "placeholder", "required", "disabled", "value"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OtpVerificationComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-otp-verification', template: "<ng-container *ngIf=\"!verified && verificationValue !== ''\">\n  <ng-container\n    *ngIf=\"\n      (error$ | async) === null ||\n      (error$ | async) === 'INVALID_VERIFICATION_CODE' ||\n      (error$ | async) === 'INVALID_TOKEN' ||\n      (error$ | async) === true\n    \"\n  >\n    <mat-form-field class=\"otp-form-field c-input remove-subtext\" appearance=\"outline\">\n      <mat-label>{{ 'label.enter.code' | translate }}</mat-label>\n      <ax-otp-input matInput [formControl]=\"codeForm\"></ax-otp-input>\n    </mat-form-field>\n\n    <ng-content></ng-content>\n\n    <ax-button\n      class=\"verify\"\n      filled\n      [color]=\"verificationButtonColor\"\n      [loading]=\"loading$ | async\"\n      (click)=\"verifyOTP(); $event.preventDefault()\"\n    >\n      {{ 'label.verify' | translate }}\n    </ax-button>\n\n    <div class=\"resend\">\n      <a axButton class=\"resend-link\" (click)=\"retryOTP()\">\n        <span>{{ 'agreement.verification.code.resend' | translate }}</span>\n      </a>\n    </div>\n  </ng-container>\n\n  <div class=\"error-message\" *ngIf=\"(error$ | async) !== null\">\n    <ng-container [ngSwitch]=\"error$ | async\">\n      <span class=\"error\" *ngSwitchCase=\"'INVALID_VERIFICATION_CODE'\">{{\n        'agreement.verification.code.error.incorrect' | translate\n      }}</span>\n      <span class=\"error\" *ngSwitchCase=\"'INVALID_TOKEN'\">{{\n        'agreement.verification.code.error.incorrect' | translate\n      }}</span>\n      <span class=\"error\" *ngSwitchCase=\"'TOO_MANY_VERIFICATION_ATTEMPTS'\">{{\n        'agreement.verification.code.error.too-many-attempts' | translate\n      }}</span>\n      <span class=\"error\" *ngSwitchCase=\"'VERIFICATION_CODE_EXPIRED'\">{{\n        'agreement.verification.code.error.expired' | translate\n      }}</span>\n      <span class=\"error\" *ngSwitchCase=\"'LOGIN_NOT_REGISTERED'\">{{\n        'error.login.invalid.login' | translate\n      }}</span>\n      <span class=\"error\" *ngSwitchDefault>{{\n        'error.SOMETHING_WENT_WRONG.message' | translate\n      }}</span>\n    </ng-container>\n    <button\n      axButton\n      filled\n      class=\"resend-button\"\n      *ngIf=\"\n        (error$ | async) === 'TOO_MANY_VERIFICATION_ATTEMPTS' ||\n        (error$ | async) === 'VERIFICATION_CODE_EXPIRED'\n      \"\n      (click)=\"retryOTP(); $event.preventDefault()\"\n    >\n      {{ 'property.verification.modal.mobile.resend' | translate }}\n    </button>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch;padding-top:1rem}.error-message{padding:0 1rem 1rem;display:flex;flex-flow:column;align-items:center;justify-content:center;gap:1rem}.error{color:var(--warn-color-500);padding:0 .75rem}.resend-button{margin:0 .75rem}.verify ::ng-deep .ax-button{width:100%}.resend{display:flex;align-items:center;flex-direction:column;text-align:center;padding:.25rem 1rem;max-width:300px;margin:0 auto}a.ax-button.resend-link{text-transform:none;background-color:transparent;text-decoration:underline}\n"] }]
        }], ctorParameters: () => [{ type: i1.OverlayService }, { type: i0.ElementRef }], propDecorators: { verified: [{
                type: Input
            }], verificationValue: [{
                type: Input
            }], verificationType: [{
                type: Input
            }], canChangeValue: [{
                type: Input
            }], verificationCode: [{
                type: Input
            }], verificationButtonColor: [{
                type: Input
            }], verification: [{
                type: Input
            }], retryVerification: [{
                type: Input
            }], verificationValueChanges: [{
                type: Output
            }], verificationComplete: [{
                type: Output
            }] } });

class OtpVerificationModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OtpVerificationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: OtpVerificationModule, declarations: [OtpVerificationComponent,
            RetryVerificationComponent,
            OtpInputComponent,
            SecondsFromNowPipe], imports: [CommonModule,
            FormsModule,
            ReactiveFormsModule,
            HelperPipesModule,
            ButtonModule,
            ValueEditModule,
            MatFormFieldModule,
            MatInputModule,
            LoginValueFormErrorModule], exports: [OtpVerificationComponent, RetryVerificationComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OtpVerificationModule, imports: [CommonModule,
            FormsModule,
            ReactiveFormsModule,
            HelperPipesModule,
            ButtonModule,
            ValueEditModule,
            MatFormFieldModule,
            MatInputModule,
            LoginValueFormErrorModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OtpVerificationModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        OtpVerificationComponent,
                        RetryVerificationComponent,
                        OtpInputComponent,
                        SecondsFromNowPipe,
                    ],
                    imports: [
                        CommonModule,
                        FormsModule,
                        ReactiveFormsModule,
                        HelperPipesModule,
                        ButtonModule,
                        ValueEditModule,
                        MatFormFieldModule,
                        MatInputModule,
                        LoginValueFormErrorModule,
                    ],
                    exports: [OtpVerificationComponent, RetryVerificationComponent],
                }]
        }] });

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

export { OtpVerificationComponent, OtpVerificationModule, RetryVerificationComponent };
//# sourceMappingURL=aztrix-components-otp-verification.mjs.map
