import{a as C}from"./chunk-T7RLVMCF.js";import{a as O}from"./chunk-FH4KR5HL.js";import"./chunk-F6KLNSUK.js";import{lb as u,nb as E}from"./chunk-YSQLW2JA.js";import{pd as _}from"./chunk-NVJ2ZZFT.js";import{Ge as p,Nc as I,Qf as N,Rd as P,Te as y,_a as h,bb as b,dc as x,dd as g,ga as c,wa as f,xa as m,ya as v}from"./chunk-SKPDQO4E.js";var A=`<div class="row justify-content-center">
    <div class="col-xl-8 col-lg-12 col-md-12">
        <div class="row">
            <div class="col-12">
                <div class="section-title color-primary">
                    <cds-icon shape="user" class="me-2 color-primary" size="lg"></cds-icon>
                    {{'MYACCOUNT.SECTION_PERSONAL_INFO'|translate}}
                </div>
            </div>
        </div>
        <form #personalInfoForm="ngForm" *ngIf="visibleComponent">
            <div class="row">
                <div class="col-12">
                    <div class="row rounded-3 bg-white mx-0 pt-2">
                        <div class="col-xl-4 col-lg-4 avatar-container">
                            <armon-identity-photo [size]="'xxl'" [isBaseProfile]="true" #identityPhoto>
                            </armon-identity-photo>
                            <button class="btn btn-sm btn-primary"
                                (click)="onEditPhotoClicked($event)">{{'BUTTON.CHANGE'|translate}}</button>
                        </div>
                        <div class="col-xl-8 col-lg-8 p-4">
                            <div class="form-group">
                                <label class="required">{{'MYACCOUNT.PERSONAL_NAME' | translate}}</label>
                                <div class="input-group">
                                    <input type="text" id="nameInput" maxlength="255" name="nameInput"
                                        [(ngModel)]="profile.name" required class="form-control form-control-sm"
                                        #nameInput="ngModel"
                                        [ngClass]="{'is-invalid': nameInput.errors && nameInput.errors.required}">
                                    <div class="invalid-feedback" *ngIf="nameInput.errors && nameInput.errors.required">
                                        <span [translate]="'VALIDATION.REQUIRED'"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="required">{{'MYACCOUNT.PERSONAL_SURNAME' | translate}}</label>
                                <div class="input-group">
                                    <input type="text" id="surNameInput" maxlength="255" name="surNameInput"
                                        [(ngModel)]="profile.surname" required class="form-control form-control-sm"
                                        #surNameInput="ngModel"
                                        [ngClass]="{'is-invalid': surNameInput.errors && surNameInput.errors.required}">
                                    <div class="invalid-feedback"
                                        *ngIf="surNameInput.errors && surNameInput.errors.required">
                                        <span [translate]="'VALIDATION.REQUIRED'"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>{{'MYACCOUNT.PERSONAL_CELLPHONE' | translate}}</label>
                                <!-- TODO: Add phone mask -->
                                <div class="input-group">
                                    <input type="text" id="cellPhoneInput" phonevalidator [textMask]="{mask: phoneMask}"
                                        name="cellPhoneInput" [(ngModel)]="profile.phoneNumber"
                                        class="form-control form-control-sm" #cellPhoneInput="ngModel"
                                        [ngClass]="{'is-invalid': cellPhoneInput.errors && cellPhoneInput.errors.phonevalidator}">
                                    <div class="invalid-feedback"
                                        *ngIf="cellPhoneInput.errors && cellPhoneInput.errors.phonevalidator">
                                        <span [translate]="'VALIDATION.CELL_PHONE_PATTERN'"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>{{'MYACCOUNT.PERSONAL_EMAIL' | translate}}</label>
                                <div class="input-group">
                                    <input type="email" id="emailInput" maxlength="255" name="emailInput" emailvalidator
                                        [(ngModel)]="profile.email" #emailInput="ngModel"
                                        [ngClass]="{'is-invalid': emailInput.errors && emailInput.errors.emailvalidator}"
                                        class="form-control form-control-sm">
                                    <div class="invalid-feedback"
                                        *ngIf="emailInput.errors && emailInput.errors.emailvalidator">
                                        <span [translate]="'VALIDATION.EMAIL_PATTERN'"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-end">
                                <button class="btn btn-primary" (click)="onSaveClicked($event)"
                                    [disabled]="personalInfoForm.invalid">{{'BUTTON.SAVE'|translate}}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>`;var k=`.justify-content-center{-webkit-box-pack:center;-moz-box-pack:center;-webkit-flex-pack:center;-ms-flex-pack:center;-moz-justify-content:center;-webkit-justify-content:center;justify-content:center}.justify-content-flex-end{-webkit-box-pack:end;-moz-box-pack:end;-webkit-flex-pack:end;-ms-flex-pack:end;-moz-justify-content:flex-end;-webkit-justify-content:flex-end;justify-content:flex-end}.card-footer{padding:.28rem .7rem}.alert{font-size:.756rem}@media screen and (min-width: 992px){.modal-xxl{max-width:1640px}}@media screen and (min-width: 1200px){.modal-xxxl{max-width:1860px}}.modal-fs{max-width:none;position:absolute;margin:auto;inset:16px;height:100vh;display:flex}.btn-link{text-decoration:none}.btn-link:hover{text-decoration:underline}.invalid-feedback{margin-top:0!important;font-size:.672rem!important}:host .section-title{width:100%;padding:6px;border-bottom:solid 1px rgba(102,102,102,.2);color:#666;margin-bottom:12px}:host .avatar-container{padding:18px;display:-webkit-box;display:-moz-box;display:-webkit-flexbox;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-moz-box-pack:start;-webkit-flex-pack:start;-ms-flex-pack:start;-moz-justify-content:flex-start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;-moz-align-items:center;align-items:center}:host .avatar-container button{margin:12px 0 0}
`;var S=function(r,e,t,o){var n=arguments.length,i=n<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(r,e,t,o);else for(var a=r.length-1;a>=0;a--)(l=r[a])&&(i=(n<3?l(i):n>3?l(e,t,i):l(e,t))||i);return n>3&&i&&Object.defineProperty(e,t,i),i},s=class{validator;element;constructor(e){this.element=e,this.validator=this.phoneValidator()}validate(e){return this.validator(e)}phoneValidator(){return e=>{let t=!1;if(e.value=="")this.element.nativeElement.required||(t=!0);else{let o=e.value?e.value.replace(/\D+/g,""):"";t=/^[0][1-9]\d{9}$|^[1-9]\d{9}$/.test(o)}return t?null:{phonevalidator:{valid:!1}}}}static getNumericValue(e){return e?e.replace(/\D+/g,""):""}static ctorParameters=()=>[{type:c}]};s=S([m({selector:"[phonevalidator][ngModel]",providers:[{provide:p,useExisting:s,multi:!0}],standalone:!0})],s);var M=function(r,e,t,o){var n=arguments.length,i=n<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(r,e,t,o);else for(var a=r.length-1;a>=0;a--)(l=r[a])&&(i=(n<3?l(i):n>3?l(e,t,i):l(e,t))||i);return n>3&&i&&Object.defineProperty(e,t,i),i},d=class{validator;element;constructor(e){this.element=e,this.validator=this.emailValidator()}validate(e){return this.validator(e)}emailValidator(){return e=>{let t=!1;return e.value==""?this.element.nativeElement.required||(t=!0):t=/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/.test(e.value),t?null:{emailvalidator:{valid:!1}}}}static ctorParameters=()=>[{type:c}]};d=M([m({selector:"[emailvalidator][ngModel]",providers:[{provide:p,useExisting:d,multi:!0}],standalone:!0})],d);var V=function(r,e,t,o){var n=arguments.length,i=n<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(r,e,t,o);else for(var a=r.length-1;a>=0;a--)(l=r[a])&&(i=(n<3?l(i):n>3?l(e,t,i):l(e,t))||i);return n>3&&i&&Object.defineProperty(e,t,i),i},R=class{modalService;identityService;interactionService;profile=new _;phoneMask=["0"," ","(",/[1-9]/,/\d/,/\d/,")"," ",/\d/,/\d/,/\d/," ",/\d/,/\d/," ",/\d/,/\d/];visibleComponent=!1;identityPhoto;constructor(e,t,o){this.modalService=e,this.identityService=t,this.interactionService=o}ngOnInit(){this.getProfile()}onSaveClicked(e){this.profile.phoneNumber=s.getNumericValue(this.profile.phoneNumber);let t=x(this.profile);delete t.locale,delete t.username,t&&t.phoneNumber==""&&(t.phoneNumber=u),t&&t.email==""&&(t.email=u),this.identityService.upsertUserProfile(t).subscribe(o=>{this.interactionService.showMessage("MYACCOUNT.PERSONAL_INFO_UPDATED",null,I.Success)})}getProfile(){this.identityService.getUserProfile().subscribe(e=>{this.profile=e,this.visibleComponent=!0})}onEditPhotoClicked(e){this.modalService.open(C,{settings:{size:"lg"},props:{title:"MYACCOUNT.PERSONAL_PHOTO_EDIT_TITLE",isBaseProfile:!0}}).result.then(t=>{this.identityPhoto.refreshPhoto()}).catch(t=>{this.identityPhoto.refreshPhoto()})}static ctorParameters=()=>[{type:P},{type:E},{type:N}];static propDecorators={identityPhoto:[{type:f,args:["identityPhoto"]}]}};R=V([v({selector:"armon-account-personal",template:A,standalone:!0,imports:[b,y,O,h,g,s,d],styles:[k]})],R);export{R as AccountPersonalComponent};
