import { __decorate, __metadata } from "tslib";
import { Component, Input } from '@angular/core';
import { EnvironmentService } from '@aztrix/helpers';
import { PropertyRepresentation } from '@aztrix/sdk';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { BehaviorSubject, map, startWith } from 'rxjs';
import { AbstractRegisterStep } from '../abstract-register-step';
import * as i0 from "@angular/core";
import * as i1 from "@aztrix/helpers";
import * as i2 from "@angular/common";
import * as i3 from "@aztrix/components/property-edit";
import * as i4 from "@aztrix/components/value-edit";
import * as i5 from "@aztrix/components/button";
import * as i6 from "@aztrix/icons";
let RegisterClaimStepComponent = class RegisterClaimStepComponent extends AbstractRegisterStep {
    constructor(_env) {
        super();
        this._env = _env;
        this.claim = 'username';
        this.pending$ = new BehaviorSubject(false);
        this.usernamePrefix$ = this._env.string$('PLATFORM_URI').pipe(map((uri) => uri + '/'));
        this.alistnamePrefix$ = this._env.string$('ALIST_VIEW_URI').pipe(map((uri) => uri + '/'));
    }
    ngOnInit() {
        this.alistNameForm.statusChanges
            .pipe(startWith('VALID'), map((status) => status === 'PENDING'), untilDestroyed(this))
            .subscribe((pending) => {
            this.pending$.next(pending);
        });
    }
    get alistNameForm() {
        return this.form.get('alistName');
    }
    get usernameForm() {
        return this.propertiesForm.get(PropertyRepresentation.TypeEnum.USERNAME);
    }
};
RegisterClaimStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: RegisterClaimStepComponent, deps: [{ token: i1.EnvironmentService }], target: i0.ɵɵFactoryTarget.Component });
RegisterClaimStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: RegisterClaimStepComponent, selector: "ax-register-claim-step", inputs: { claim: "claim" }, usesInheritance: true, ngImport: i0, template: "<ng-template #errorsTemplate>\n  <div class=\"c-property-edit__error\" *ngIf=\"alistNameForm.errors?.alistExists\">\n    <ax-icon class=\"icon\" name=\"alert-circle\"></ax-icon>\n    <span>{{\n      'register.error.alreadyExists' | translate: {name: alistNameForm.errors.alistExists}\n    }}</span>\n  </div>\n  <div class=\"c-property-edit__error\" *ngIf=\"alistNameForm.errors?.required\">\n    <ax-icon class=\"icon\" name=\"alert-circle\"></ax-icon>\n    <span>{{\n      'property.validation.required' | translate: {propertyType: 'label.name' | translate}\n    }}</span>\n  </div>\n  <div class=\"c-property-edit__error\" *ngIf=\"alistNameForm.errors?.propertyOnlyLowercase\">\n    <ax-icon class=\"icon\" name=\"alert-circle\"></ax-icon>\n    <span>{{\n      'property.validation.onlyLowercase' | translate: {propertyType: 'label.name' | translate}\n    }}</span>\n  </div>\n  <div class=\"c-property-edit__error\" *ngIf=\"alistNameForm.errors?.propertyNoSpace\">\n    <ax-icon class=\"icon\" name=\"alert-circle\"></ax-icon>\n    <span>{{\n      'property.validation.invalidCharacters.space'\n        | translate: {propertyType: 'label.name' | translate}\n    }}</span>\n  </div>\n</ng-template>\n\n<p class=\"explanation\">{{ 'register.claim.explanation' | translate }}</p>\n\n<ax-value-edit\n  class=\"input\"\n  *ngIf=\"claim === 'alistname'\"\n  type=\"TEXT\"\n  [form]=\"alistNameForm\"\n  name=\"register list-name\"\n  [required]=\"true\"\n  [prefix]=\"alistnamePrefix$ | async\"\n  postfix=\"*\"\n  [label]=\"'label.name' | translate\"\n  [errorsTemplate]=\"errorsTemplate\"\n></ax-value-edit>\n\n<ax-property-edit\n  class=\"input\"\n  *ngIf=\"claim === 'username'\"\n  [form]=\"usernameForm\"\n  name=\"register username\"\n  [required]=\"true\"\n  [prefix]=\"usernamePrefix$ | async\"\n  postfix=\"*\"\n></ax-property-edit>\n\n<ax-button\n  class=\"action\"\n  axButton\n  color=\"accent\"\n  filled\n  fullWidth\n  (click)=\"_continue()\"\n  [loading]=\"pending$ | async\"\n  >{{ 'login.create-account' | translate }}</ax-button\n>\n", styles: [".explanation{margin-top:0;font-weight:700}\n", ":host{display:flex;flex-direction:column;gap:.5rem}.form{margin-bottom:20px;background-color:#fff;border-radius:15px;padding:1.5rem 1.5rem 0}.value{display:flex;flex-direction:column;align-items:flex-end;margin-bottom:.5rem}.input{width:100%}.action{margin:1rem 1rem -20px}.action ::ng-deep .ax-button{font-size:1.2rem;text-transform:none;height:2.5rem}.back{margin:1rem auto -.5rem;width:auto}.back ::ng-deep .ax-button{font-size:small;height:2rem;width:auto;margin:0 auto}.back ::ng-deep .ax-button .icon{width:1rem;height:1rem}.verification ::ng-deep .verify{width:100%;display:block;position:relative;bottom:-20px}.verification ::ng-deep .verify .ax-button{font-size:1.2rem;text-transform:none;height:2.5rem;width:100%}.verification ::ng-deep .resend{height:0;position:relative;bottom:-30px}.verification ::ng-deep .error-message{height:0;position:relative;bottom:-30px;display:flex;text-align:center;flex-direction:column;gap:1rem}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PropertyEditComponent, selector: "ax-property-edit", inputs: ["isIndividual", "isProposalSubscribeForm"] }, { kind: "component", type: i4.ValueEditComponent, selector: "ax-value-edit", inputs: ["type", "numberConfig"] }, { kind: "directive", type: i5.ButtonDirective, selector: "[axButton]", inputs: ["color", "labelHideMobile", "smallButton", "bigButton", "fullWidth", "filled", "outline", "icon-button", "hoverLabel", "hover", "lowercase", "disabled"] }, { kind: "component", type: i5.ButtonComponent, selector: "ax-button" }, { kind: "component", type: i6.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
RegisterClaimStepComponent = __decorate([
    UntilDestroy(),
    __metadata("design:paramtypes", [EnvironmentService])
], RegisterClaimStepComponent);
export { RegisterClaimStepComponent };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: RegisterClaimStepComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-register-claim-step', template: "<ng-template #errorsTemplate>\n  <div class=\"c-property-edit__error\" *ngIf=\"alistNameForm.errors?.alistExists\">\n    <ax-icon class=\"icon\" name=\"alert-circle\"></ax-icon>\n    <span>{{\n      'register.error.alreadyExists' | translate: {name: alistNameForm.errors.alistExists}\n    }}</span>\n  </div>\n  <div class=\"c-property-edit__error\" *ngIf=\"alistNameForm.errors?.required\">\n    <ax-icon class=\"icon\" name=\"alert-circle\"></ax-icon>\n    <span>{{\n      'property.validation.required' | translate: {propertyType: 'label.name' | translate}\n    }}</span>\n  </div>\n  <div class=\"c-property-edit__error\" *ngIf=\"alistNameForm.errors?.propertyOnlyLowercase\">\n    <ax-icon class=\"icon\" name=\"alert-circle\"></ax-icon>\n    <span>{{\n      'property.validation.onlyLowercase' | translate: {propertyType: 'label.name' | translate}\n    }}</span>\n  </div>\n  <div class=\"c-property-edit__error\" *ngIf=\"alistNameForm.errors?.propertyNoSpace\">\n    <ax-icon class=\"icon\" name=\"alert-circle\"></ax-icon>\n    <span>{{\n      'property.validation.invalidCharacters.space'\n        | translate: {propertyType: 'label.name' | translate}\n    }}</span>\n  </div>\n</ng-template>\n\n<p class=\"explanation\">{{ 'register.claim.explanation' | translate }}</p>\n\n<ax-value-edit\n  class=\"input\"\n  *ngIf=\"claim === 'alistname'\"\n  type=\"TEXT\"\n  [form]=\"alistNameForm\"\n  name=\"register list-name\"\n  [required]=\"true\"\n  [prefix]=\"alistnamePrefix$ | async\"\n  postfix=\"*\"\n  [label]=\"'label.name' | translate\"\n  [errorsTemplate]=\"errorsTemplate\"\n></ax-value-edit>\n\n<ax-property-edit\n  class=\"input\"\n  *ngIf=\"claim === 'username'\"\n  [form]=\"usernameForm\"\n  name=\"register username\"\n  [required]=\"true\"\n  [prefix]=\"usernamePrefix$ | async\"\n  postfix=\"*\"\n></ax-property-edit>\n\n<ax-button\n  class=\"action\"\n  axButton\n  color=\"accent\"\n  filled\n  fullWidth\n  (click)=\"_continue()\"\n  [loading]=\"pending$ | async\"\n  >{{ 'login.create-account' | translate }}</ax-button\n>\n", styles: [".explanation{margin-top:0;font-weight:700}\n", ":host{display:flex;flex-direction:column;gap:.5rem}.form{margin-bottom:20px;background-color:#fff;border-radius:15px;padding:1.5rem 1.5rem 0}.value{display:flex;flex-direction:column;align-items:flex-end;margin-bottom:.5rem}.input{width:100%}.action{margin:1rem 1rem -20px}.action ::ng-deep .ax-button{font-size:1.2rem;text-transform:none;height:2.5rem}.back{margin:1rem auto -.5rem;width:auto}.back ::ng-deep .ax-button{font-size:small;height:2rem;width:auto;margin:0 auto}.back ::ng-deep .ax-button .icon{width:1rem;height:1rem}.verification ::ng-deep .verify{width:100%;display:block;position:relative;bottom:-20px}.verification ::ng-deep .verify .ax-button{font-size:1.2rem;text-transform:none;height:2.5rem;width:100%}.verification ::ng-deep .resend{height:0;position:relative;bottom:-30px}.verification ::ng-deep .error-message{height:0;position:relative;bottom:-30px;display:flex;text-align:center;flex-direction:column;gap:1rem}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.EnvironmentService }]; }, propDecorators: { claim: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 