simpo-component-library 1.4.144 → 1.5.0

package/esm2022/lib/ecommerce/sections/user-basic-info/user-basic-info.component.mjs

@@ -2,51 +2,39 @@ import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatDialogModule } from '@angular/material/dialog';
-import { ToastModule } from 'primeng/toast';
-import { MessageService } from 'primeng/api';
+import UserInfo from "../../json/user-details.json";
 import * as i0 from "@angular/core";
 import * as i1 from "../../../services/rest.service";
 import * as i2 from "@angular/router";
 import * as i3 from "@angular/material/dialog";
-import * as i4 from "../../../services/storage.service";
-import * as i5 from "primeng/api";
-import * as i6 from "@angular/common";
-import * as i7 from "@angular/forms";
-import * as i8 from "primeng/toast";
+import * as i4 from "@angular/common";
+import * as i5 from "@angular/forms";
 export class UserBasicInfoComponent {
-    constructor(restService, router, dialogRef, storageService, messageService) {
+    constructor(restService, router, dialogRef) {
         this.restService = restService;
         this.router = router;
         this.dialogRef = dialogRef;
-        this.storageService = storageService;
-        this.messageService = messageService;
         this.gender = null;
         this.firstName = "";
         this.middleName = "";
         this.lastName = "";
-        this.mobile = "";
         this.email = "";
         this.profilePic = "";
-        this.userDetails = null;
-        this.isEdit = false;
     }
     ngOnInit() {
-        this.userDetails = this.storageService.getUser();
-        this.isEdit = !!this.userDetails;
-        this.firstName = this.userDetails?.contact?.name?.split(" ")?.[0] ?? "";
-        // this.middleName = this.userDetails?.contact?.name?.split(" ")?.[1] ?? "";
-        this.lastName = this.userDetails?.contact?.name?.split(" ")?.[1] ?? "";
-        this.email = this.userDetails?.contact?.email ?? "";
-        this.mobile = this.userDetails?.contact.mobile ?? "";
-        this.gender = this.userDetails?.gender;
-        this.profilePic = this.userDetails?.profilePic ?? "";
+        this.firstName = UserInfo.user?.contact?.name?.split(" ")?.[0];
+        this.middleName = UserInfo.user?.contact?.name?.split(" ")?.[1];
+        this.lastName = UserInfo.user?.contact?.name?.split(" ")?.[2];
+        this.email = UserInfo.user?.contact?.email;
+        this.gender = UserInfo.user?.gender;
+        this.profilePic = UserInfo.user?.profilePic;
     }
     close() {
         this.dialogRef.close();
     }
     saveProfile() {
         const payload = {
-            userId: this.userDetails?.userId,
+            userId: UserInfo.user?.userId,
             gender: this.gender,
             profilePic: this.profilePic,
             contact: {
@@ -56,35 +44,21 @@ export class UserBasicInfoComponent {
             }
         };
         this.restService.updateProfile(payload).subscribe((response) => {
-            this.storageService.setUser(response.data);
-            this.messageService.add({ severity: 'success', summary: 'Updated Successfully', detail: 'User detail updated' });
             if (this.dialogRef)
                 this.dialogRef.close();
             else
                 this.router.navigate(['/']);
-        }, (error) => {
-            this.messageService.add({ severity: 'error', summary: 'Error', detail: 'Failed to update your details try agin.' });
         });
     }
-    validateName(event) {
-        if ((event.keyCode >= 65 && event.keyCode <= 90) || event.keyCode == 16 || event.keyCode == 8 || event.keyCode == 32 || event.keyCode == 46) {
-            return;
-        }
-        event.preventDefault();
-    }
-    get isEmailValid() {
-        return this.email?.includes("@") && this.email.includes(".com") || (this.email?.length == 0);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserBasicInfoComponent, deps: [{ token: i1.RestService }, { token: i2.Router }, { token: i3.MatDialogRef }, { token: i4.StorageServiceService }, { token: i5.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: UserBasicInfoComponent, isStandalone: true, selector: "simpo-user-basic-info", providers: [MessageService], ngImport: i0, template: "<section style=\"padding: 20px\" class=\"position-relative\">\r\n    <div class=\"d-flex flex-wrap justify-content-between\">\r\n        <div class=\"form-control-group\">\r\n            <div class=\"label\">First Name</div>\r\n            <input type=\"text\" placeholder=\"Enter first name\" [(ngModel)]=\"firstName\" (keydown)=\"validateName($event)\">\r\n        </div>\r\n        <!-- <div class=\"form-control-group-3\">\r\n            <div class=\"label\">Middle Name</div>\r\n            <input type=\"text\" placeholder=\"Enter middle name\" [(ngModel)]=\"middleName\">\r\n        </div> -->\r\n        <div class=\"form-control-group\">\r\n            <div class=\"label\">Last Name</div>\r\n            <input type=\"text\" placeholder=\"Enter last name\" [(ngModel)]=\"lastName\" (keydown)=\"validateName($event)\">\r\n        </div>\r\n\r\n        <div class=\"form-control-group\" *ngIf=\"isEdit\">\r\n            <div class=\"label required\">Mobile</div>\r\n            <input type=\"number\" placeholder=\"Enter mobile\" [(ngModel)]=\"mobile\" disabled>\r\n        </div>\r\n        <div class=\"form-control-group\">\r\n            <div class=\"label\">Email</div>\r\n            <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"email\">\r\n            <span class=\"error-msg\" [style.visibility]=\"isEmailValid ? 'hidden' : 'visible'\">Please enter valid email</span>\r\n        </div>\r\n        \r\n        <div class=\"form-control-group-full\">\r\n            <div class=\"label\">Select Gender</div>\r\n            <div class=\"d-flex align-items-center\">\r\n                <img src=\"https://img.icons8.com/?size=100&id=108296&format=png&color=000000\" alt=\"\"\r\n                    (click)=\"gender = 'MALE'\" [ngClass]=\"{'active': gender == 'MALE' }\">\r\n                <img src=\"https://img.icons8.com/?size=100&id=108295&format=png&color=000000\" alt=\"\"\r\n                    (click)=\"gender = 'FEMALE'\" [ngClass]=\"{'active': gender == 'FEMALE'}\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"action-btn\">\r\n        <span class=\"skip-btn\" (click)=\"close()\">{{!isEdit ? 'Skip' : 'Close'}}</span>\r\n        <button (click)=\"saveProfile()\">Save Profile</button>\r\n    </div>\r\n</section>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>", styles: [".form-control-group,.form-control-group-3,.form-control-group-full{width:48%}:is(.form-control-group,.form-control-group-3,.form-control-group-full)>input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.label{color:#000}.form-control-group-3{width:32%!important}.form-control-group-full{width:100%}img{height:60px;width:60px;object-fit:cover;margin:0 5px;border:2px solid transparent;cursor:pointer;border-radius:50%}.active{border:2px solid #0267C1}.form-control-group{margin:10px 0}.action-btn{position:absolute;bottom:-35px;right:10px;display:flex;align-items:center;gap:20px}.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}.required:after{content:\"*\";color:tomato}.error-msg{color:tomato}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i7.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: i7.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserBasicInfoComponent, deps: [{ token: i1.RestService }, { token: i2.Router }, { token: i3.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: UserBasicInfoComponent, isStandalone: true, selector: "simpo-user-basic-info", ngImport: i0, template: "<section style=\"padding: 20px\" class=\"position-relative\">\r\n    <div class=\"d-flex flex-wrap justify-content-between\">\r\n        <div class=\"form-control-group-3\">\r\n            <div class=\"label\">First Name</div>\r\n            <input type=\"text\" placeholder=\"Enter first name\" [(ngModel)]=\"firstName\">\r\n        </div>\r\n        <div class=\"form-control-group-3\">\r\n            <div class=\"label\">Middle Name</div>\r\n            <input type=\"text\" placeholder=\"Enter middle name\" [(ngModel)]=\"middleName\">\r\n        </div>\r\n        <div class=\"form-control-group-3\">\r\n            <div class=\"label\">Last Name</div>\r\n            <input type=\"text\" placeholder=\"Enter last name\" [(ngModel)]=\"lastName\">\r\n        </div>\r\n        <div class=\"form-control-group-full\">\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Email</div>\r\n                <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"email\">\r\n            </div>\r\n        </div>    \r\n        <div class=\"form-control-group\">\r\n            <div class=\"label\">Select Gender</div>\r\n            <div class=\"d-flex align-items-center\">\r\n                <img src=\"https://img.icons8.com/?size=100&id=108296&format=png&color=000000\" alt=\"\" (click)=\"gender = 'MALE'\" [ngClass]=\"{'active': gender == 'MALE' }\">\r\n                <img src=\"https://img.icons8.com/?size=100&id=108295&format=png&color=000000\" alt=\"\" (click)=\"gender = 'FEMALE'\" [ngClass]=\"{'active': gender == 'FEMALE'}\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"action-btn\">\r\n        <span class=\"skip-btn\" (click)=\"close()\">Skip</span>\r\n        <button (click)=\"saveProfile()\">Save Profile</button>\r\n    </div>\r\n</section>", styles: [".form-control-group,.form-control-group-3,.form-control-group-full{width:48%}:is(.form-control-group,.form-control-group-3,.form-control-group-full)>input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.label{color:#000}.form-control-group-3{width:32%!important}.form-control-group-full{width:100%}.form-control-group{margin:15px 0}.form-control-group img{height:50px;width:50px;object-fit:cover;margin:0 5px;border:2px solid transparent;cursor:pointer;border-radius:50%}.form-control-group .active{border:2px solid #0267C1}.action-btn{position:absolute;bottom:-35px;right:10px;display:flex;align-items:center;gap:20px}.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserBasicInfoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'simpo-user-basic-info', standalone: true, imports: [
                         CommonModule,
                         MatDialogModule,
-                        FormsModule,
-                        ToastModule
-                    ], providers: [MessageService], template: "<section style=\"padding: 20px\" class=\"position-relative\">\r\n    <div class=\"d-flex flex-wrap justify-content-between\">\r\n        <div class=\"form-control-group\">\r\n            <div class=\"label\">First Name</div>\r\n            <input type=\"text\" placeholder=\"Enter first name\" [(ngModel)]=\"firstName\" (keydown)=\"validateName($event)\">\r\n        </div>\r\n        <!-- <div class=\"form-control-group-3\">\r\n            <div class=\"label\">Middle Name</div>\r\n            <input type=\"text\" placeholder=\"Enter middle name\" [(ngModel)]=\"middleName\">\r\n        </div> -->\r\n        <div class=\"form-control-group\">\r\n            <div class=\"label\">Last Name</div>\r\n            <input type=\"text\" placeholder=\"Enter last name\" [(ngModel)]=\"lastName\" (keydown)=\"validateName($event)\">\r\n        </div>\r\n\r\n        <div class=\"form-control-group\" *ngIf=\"isEdit\">\r\n            <div class=\"label required\">Mobile</div>\r\n            <input type=\"number\" placeholder=\"Enter mobile\" [(ngModel)]=\"mobile\" disabled>\r\n        </div>\r\n        <div class=\"form-control-group\">\r\n            <div class=\"label\">Email</div>\r\n            <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"email\">\r\n            <span class=\"error-msg\" [style.visibility]=\"isEmailValid ? 'hidden' : 'visible'\">Please enter valid email</span>\r\n        </div>\r\n        \r\n        <div class=\"form-control-group-full\">\r\n            <div class=\"label\">Select Gender</div>\r\n            <div class=\"d-flex align-items-center\">\r\n                <img src=\"https://img.icons8.com/?size=100&id=108296&format=png&color=000000\" alt=\"\"\r\n                    (click)=\"gender = 'MALE'\" [ngClass]=\"{'active': gender == 'MALE' }\">\r\n                <img src=\"https://img.icons8.com/?size=100&id=108295&format=png&color=000000\" alt=\"\"\r\n                    (click)=\"gender = 'FEMALE'\" [ngClass]=\"{'active': gender == 'FEMALE'}\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"action-btn\">\r\n        <span class=\"skip-btn\" (click)=\"close()\">{{!isEdit ? 'Skip' : 'Close'}}</span>\r\n        <button (click)=\"saveProfile()\">Save Profile</button>\r\n    </div>\r\n</section>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>", styles: [".form-control-group,.form-control-group-3,.form-control-group-full{width:48%}:is(.form-control-group,.form-control-group-3,.form-control-group-full)>input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.label{color:#000}.form-control-group-3{width:32%!important}.form-control-group-full{width:100%}img{height:60px;width:60px;object-fit:cover;margin:0 5px;border:2px solid transparent;cursor:pointer;border-radius:50%}.active{border:2px solid #0267C1}.form-control-group{margin:10px 0}.action-btn{position:absolute;bottom:-35px;right:10px;display:flex;align-items:center;gap:20px}.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}.required:after{content:\"*\";color:tomato}.error-msg{color:tomato}\n"] }]
-        }], ctorParameters: () => [{ type: i1.RestService }, { type: i2.Router }, { type: i3.MatDialogRef }, { type: i4.StorageServiceService }, { type: i5.MessageService }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlci1iYXNpYy1pbmZvLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NpbXBvLXVpL3NyYy9saWIvZWNvbW1lcmNlL3NlY3Rpb25zL3VzZXItYmFzaWMtaW5mby91c2VyLWJhc2ljLWluZm8uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc2ltcG8tdWkvc3JjL2xpYi9lY29tbWVyY2Uvc2VjdGlvbnMvdXNlci1iYXNpYy1pbmZvL3VzZXItYmFzaWMtaW5mby5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFNBQVMsRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUNsRCxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDN0MsT0FBTyxFQUFFLGVBQWUsRUFBZ0IsTUFBTSwwQkFBMEIsQ0FBQztBQUt6RSxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzVDLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxhQUFhLENBQUM7Ozs7Ozs7Ozs7QUFlN0MsTUFBTSxPQUFPLHNCQUFzQjtJQVlqQyxZQUNtQixXQUF3QixFQUN4QixNQUFjLEVBQ2QsU0FBK0MsRUFDL0MsY0FBcUMsRUFDckMsY0FBOEI7UUFKOUIsZ0JBQVcsR0FBWCxXQUFXLENBQWE7UUFDeEIsV0FBTSxHQUFOLE1BQU0sQ0FBUTtRQUNkLGNBQVMsR0FBVCxTQUFTLENBQXNDO1FBQy9DLG1CQUFjLEdBQWQsY0FBYyxDQUF1QjtRQUNyQyxtQkFBYyxHQUFkLGNBQWMsQ0FBZ0I7UUFmMUMsV0FBTSxHQUE2QixJQUFJLENBQUM7UUFDeEMsY0FBUyxHQUFXLEVBQUUsQ0FBQztRQUN2QixlQUFVLEdBQVcsRUFBRSxDQUFDO1FBQ3hCLGFB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QUUsQ0FBQyxDQUFDO1FBQ3RILENBQUMsQ0FBQyxDQUFBO0lBQ0osQ0FBQztJQUNELFlBQVksQ0FBQyxLQUFvQjtRQUMvQixJQUFJLENBQUMsS0FBSyxDQUFDLE9BQU8sSUFBSSxFQUFFLElBQUksS0FBSyxDQUFDLE9BQU8sSUFBSSxFQUFFLENBQUMsSUFBSSxLQUFLLENBQUMsT0FBTyxJQUFJLEVBQUUsSUFBSSxLQUFLLENBQUMsT0FBTyxJQUFJLENBQUMsSUFBSSxLQUFLLENBQUMsT0FBTyxJQUFJLEVBQUUsSUFBSSxLQUFLLENBQUMsT0FBTyxJQUFJLEVBQUUsRUFBRSxDQUFDO1lBQzVJLE9BQU87UUFDVCxDQUFDO1FBQ0QsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO0lBQ3pCLENBQUM7SUFFRCxJQUFJLFlBQVk7UUFDZCxPQUFPLElBQUksQ0FBQyxLQUFLLEVBQUUsUUFBUSxDQUFDLEdBQUcsQ0FBQyxJQUFJLElBQUksQ0FBQyxLQUFLLENBQUMsUUFBUSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxNQUFNLElBQUksQ0FBQyxDQUFDLENBQUM7SUFDL0YsQ0FBQzs4R0FsRVUsc0JBQXNCO2tHQUF0QixzQkFBc0Isb0VBSnRCLENBQUMsY0FBYyxDQUFDLDBCQ3BCN0IsaTFFQXdDMEYsdThCRHpCdEYsWUFBWSxnT0FDWixlQUFlLDhCQUNmLFdBQVcsZ3hCQUNYLFdBQVc7OzJGQU1GLHNCQUFzQjtrQkFibEMsU0FBUzsrQkFDRSx1QkFBdUIsY0FDckIsSUFBSSxXQUNQO3dCQUNQLFlBQVk7d0JBQ1osZUFBZTt3QkFDZixXQUFXO3dCQUNYLFdBQVc7cUJBQ1osYUFDVSxDQUFDLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcbmltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IEZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5pbXBvcnQgeyBNYXREaWFsb2dNb2R1bGUsIE1hdERpYWxvZ1JlZiB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2RpYWxvZyc7XHJcbmltcG9ydCB7IFJlc3RTZXJ2aWNlIH0gZnJvbSBcIi4uLy4uLy4uL3NlcnZpY2VzL3Jlc3Quc2VydmljZVwiO1xyXG5pbXBvcnQgeyBSb3V0ZXIgfSBmcm9tICdAYW5ndWxhci9yb3V0ZXInO1xyXG5pbXBvcnQgeyBTdG9yYWdlU2VydmljZVNlcnZpY2UgfSBmcm9tICcuLi8uLi8uLi9zZXJ2aWNlcy9zdG9yYWdlLnNlcnZpY2UnO1xyXG5pbXBvcnQgeyBVc2VyIH0gZnJvbSAnLi4vLi4vc3R5bGVzL3VzZXIubW9kYWwnO1xyXG5pbXBvcnQgeyBUb2FzdE1vZHVsZSB9IGZyb20gJ3ByaW1lbmcvdG9hc3QnO1xyXG5pbXBvcnQgeyBNZXNzYWdlU2VydmljZSB9IGZyb20gJ3ByaW1lbmcvYXBpJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnc2ltcG8tdXNlci1iYXNpYy1pbmZvJyxcclxuICBzdGFuZGFsb25lOiB0cnVlLFxyXG4gIGltcG9ydHM6IFtcclxuICAgIENvbW1vbk1vZHVsZSxcclxuICAgIE1hdERpYWxvZ01vZHVsZSxcclxuICAgIEZvcm1zTW9kdWxlLFxyXG4gICAgVG9hc3RNb2R1bGVcclxuICBdLFxyXG4gIHByb3ZpZGVyczogW01lc3NhZ2VTZXJ2aWNlXSxcclxuICB0ZW1wbGF0ZVVybDogJy4vdXNlci1iYXNpYy1pbmZvLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybDogJy4vdXNlci1iYXNpYy1pbmZvLmNvbXBvbmVudC5jc3MnXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBVc2VyQmFzaWNJbmZvQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuXHJcbiAgcHVibGljIGdlbmRlcjogJ01BTEUnIHwgJ0ZFTUFMRScgfCBudWxsID0gbnVsbDtcclxuICBwdWJsaWMgZmlyc3ROYW1lOiBzdHJpbmcgPSBcIlwiO1xyXG4gIHB1YmxpYyBtaWRkbGVOYW1lOiBzdHJpbmcgPSBcIlwiO1xyXG4gIHB1YmxpYyBsYXN0TmFtZTogc3RyaW5nID0gXCJcIjtcclxuICBwdWJsaWMgbW9iaWxlOiBzdHJpbmcgPSBcIlwiO1xyXG4gIHB1YmxpYyBlbWFpbDogc3RyaW5nID0gXCJcIjtcclxuICBwdWJsaWMgcHJvZmlsZVBpYzogc3RyaW5nID0gXCJcIjtcclxuICBwdWJsaWMgdXNlckRldGFpbHM6IFVzZXIgfCBudWxsID0gbnVsbDtcclxuICBwdWJsaWMgaXNFZGl0OiBib29sZWFuID0gZmFsc2U7XHJcblxyXG4gIGNvbnN0cnVjdG9yKFxyXG4gICAgcHJpdmF0ZSByZWFkb25seSByZXN0U2VydmljZTogUmVzdFNlcnZpY2UsXHJcbiAgICBwcml2YXRlIHJlYWRvbmx5IHJvdXRlcjogUm91dGVyLFxyXG4gICAgcHJpdmF0ZSByZWFkb25seSBkaWFsb2dSZWY6IE1hdERpYWxvZ1JlZjxVc2VyQmFzaWNJbmZvQ29tcG9uZW50PixcclxuICAgIHByaXZhdGUgcmVhZG9ubHkgc3RvcmFnZVNlcnZpY2U6IFN0b3JhZ2VTZXJ2aWNlU2VydmljZSxcclxuICAgIHByaXZhdGUgcmVhZG9ubHkgbWVzc2FnZVNlcnZpY2U6IE1lc3NhZ2VTZXJ2aWNlXHJcbiAgKSB7fVxyXG4gIG5nT25Jbml0KCk6IHZvaWQge1xyXG4gICAgICB0aGlzLnVzZXJEZXRhaWxzID0gdGhpcy5zdG9yYWdlU2VydmljZS5nZXRVc2VyKCk7XHJcbiAgICAgIHRoaXMuaXNFZGl0ID0gISF0aGlzLnVzZXJEZXRhaWxzO1xyXG5cclxuICAgICAgdGhpcy5maXJzdE5hbWUgPSB0aGlzLnVzZXJEZXRhaWxzPy5jb250YWN0Py5uYW1lPy5zcGxpdChcIiBcIik/LlswXSA/PyBcIlwiO1xyXG4gICAgICAvLyB0aGlzLm1pZGRsZU5hbWUgPSB0aGlzLnVzZXJEZXRhaWxzPy5jb250YWN0Py5uYW1lPy5zcGxpdChcIiBcIik/LlsxXSA/PyBcIlwiO1xyXG4gICAgICB0aGlzLmxhc3ROYW1lID0gdGhpcy51c2VyRGV0YWlscz8uY29udGFjdD8ubmFtZT8uc3BsaXQoXCIgXCIpPy5bMV0gPz8gXCJcIjtcclxuICAgICAgdGhpcy5lbWFpbCA9IHRoaXMudXNlckRldGFpbHM/LmNvbnRhY3Q/LmVtYWlsID8/IFwiXCI7XHJcbiAgICAgIHRoaXMubW9iaWxlID0gdGhpcy51c2VyRGV0YWlscz8uY29udGFjdC5tb2JpbGUgPz8gXCJcIjtcclxuICAgICAgdGhpcy5nZW5kZXIgPSB0aGlzLnVzZXJEZXRhaWxzPy5nZW5kZXIgYXMgKFwiTUFMRVwiIHwgXCJGRU1BTEVcIik7XHJcbiAgICAgIHRoaXMucHJvZmlsZVBpYyA9IHRoaXMudXNlckRldGFpbHM/LnByb2ZpbGVQaWMgPz8gXCJcIjtcclxuICB9XHJcblxyXG4gIGNsb3NlKCkge1xyXG4gICAgdGhpcy5kaWFsb2dSZWYuY2xvc2UoKTtcclxuICB9XHJcbiAgc2F2ZVByb2ZpbGUoKSB7XHJcbiAgICBjb25zdCBwYXlsb2FkID0ge1xyXG4gICAgICB1c2VySWQ6IHRoaXMudXNlckRldGFpbHM/LnVzZXJJZCxcclxuICAgICAgZ2VuZGVyOiB0aGlzLmdlbmRlcixcclxuICAgICAgcHJvZmlsZVBpYzogdGhpcy5wcm9maWxlUGljLFxyXG4gICAgICBjb250YWN0OiB7XHJcbiAgICAgICAgY291bnRyeUNvZGU6IFwiOTFcIixcclxuICAgICAgICBlbWFpbDogdGhpcy5lbWFpbCxcclxuICAgICAgICBuYW1lOiB0aGlzLmZpcnN0TmFtZSArIFwiIFwiICsgKHRoaXMubWlkZGxlTmFtZT8ubGVuZ3RoID4gMCA/IHRoaXMubWlkZGxlTmFtZSArIFwiIFwiIDogXCJcIikgKyB0aGlzLmxhc3ROYW1lXHJcbiAgICAgIH1cclxuICAgIH1cclxuICAgIHRoaXMucmVzdFNlcnZpY2UudXBkYXRlUHJvZmlsZShwYXlsb2FkKS5zdWJzY3JpYmUoKHJlc3BvbnNlOiBhbnkpPT4ge1xyXG4gICAgICB0aGlzLnN0b3JhZ2VTZXJ2aWNlLnNldFVzZXIocmVzcG9uc2UuZGF0YSk7XHJcbiAgICAgIHRoaXMubWVzc2FnZVNlcnZpY2UuYWRkKHsgc2V2ZXJpdHk6ICdzdWNjZXNzJywgc3VtbWFyeTogJ1VwZGF0ZWQgU3VjY2Vzc2Z1bGx5JywgZGV0YWlsOiAnVXNlciBkZXRhaWwgdXBkYXRlZCcgfSk7XHJcbiAgICAgIGlmICh0aGlzLmRpYWxvZ1JlZilcclxuICAgICAgICB0aGlzLmRpYWxvZ1JlZi5jbG9zZSgpO1xyXG4gICAgICBlbHNlXHJcbiAgICAgICAgdGhpcy5yb3V0ZXIubmF2aWdhdGUoWycvJ10pO1xyXG4gICAgfSwgKGVycm9yKT0+IHtcclxuICAgICAgdGhpcy5tZXNzYWdlU2VydmljZS5hZGQoeyBzZXZlcml0eTogJ2Vycm9yJywgc3VtbWFyeTogJ0Vycm9yJywgZGV0YWlsOiAnRmFpbGVkIHRvIHVwZGF0ZSB5b3VyIGRldGFpbHMgdHJ5IGFnaW4uJyB9KTtcclxuICAgIH0pXHJcbiAgfVxyXG4gIHZhbGlkYXRlTmFtZShldmVudDogS2V5Ym9hcmRFdmVudCkge1xyXG4gICAgaWYgKChldmVudC5rZXlDb2RlID49IDY1ICYmIGV2ZW50LmtleUNvZGUgPD0gOTApIHx8IGV2ZW50LmtleUNvZGUgPT0gMTYgfHwgZXZlbnQua2V5Q29kZSA9PSA4IHx8IGV2ZW50LmtleUNvZGUgPT0gMzIgfHwgZXZlbnQua2V5Q29kZSA9PSA0Nikge1xyXG4gICAgICByZXR1cm47XHJcbiAgICB9XHJcbiAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xyXG4gIH1cclxuXHJcbiAgZ2V0IGlzRW1haWxWYWxpZCgpOiBib29sZWFuIHtcclxuICAgIHJldHVybiB0aGlzLmVtYWlsPy5pbmNsdWRlcyhcIkBcIikgJiYgdGhpcy5lbWFpbC5pbmNsdWRlcyhcIi5jb21cIikgfHwgKHRoaXMuZW1haWw/Lmxlbmd0aCA9PSAwKTtcclxuICB9XHJcbn1cclxuIiwiPHNlY3Rpb24gc3R5bGU9XCJwYWRkaW5nOiAyMHB4XCIgY2xhc3M9XCJwb3NpdGlvbi1yZWxhdGl2ZVwiPlxyXG4gICAgPGRpdiBjbGFzcz1cImQtZmxleCBmbGV4LXdyYXAganVzdGlmeS1jb250ZW50LWJldHdlZW5cIj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiZm9ybS1jb250cm9sLWdyb3VwXCI+XHJcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJsYWJlbFwiPkZpcnN0IE5hbWU8L2Rpdj5cclxuICAgICAgICAgICAgPGlucHV0IHR5cGU9XCJ0ZXh0XCIgcGxhY2Vob2xkZXI9XCJFbnRlciBmaXJzdCBuYW1lXCIgWyhuZ01vZGVsKV09XCJmaXJzdE5hbWVcIiAoa2V5ZG93bik9XCJ2YWxpZGF0ZU5hbWUoJGV2ZW50KVwiPlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICAgIDwhLS0gPGRpdiBjbGFzcz1cImZvcm0tY29udHJvbC1ncm91cC0zXCI+XHJcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJsYWJlbFwiPk1pZGRsZSBOYW1lPC9kaXY+XHJcbiAgICAgICAgICAgIDxpbnB1dCB0eXBlPVwidGV4dFwiIHBsYWNlaG9sZGVyPVwiRW50ZXIgbWlkZGxlIG5hbWVcIiBbKG5nTW9kZWwpXT1cIm1pZGRsZU5hbWVcIj5cclxuICAgICAgICA8L2Rpdj4gLS0+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cImZvcm0tY29udHJvbC1ncm91cFwiPlxyXG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwibGFiZWxcIj5MYXN0IE5hbWU8L2Rpdj5cclxuICAgICAgICAgICAgPGlucHV0IHR5cGU9XCJ0ZXh0XCIgcGxhY2Vob2xkZXI9XCJFbnRlciBsYXN0IG5hbWVcIiBbKG5nTW9kZWwpXT1cImxhc3ROYW1lXCIgKGtleWRvd24pPVwidmFsaWRhdGVOYW1lKCRldmVudClcIj5cclxuICAgICAgICA8L2Rpdj5cclxuXHJcbiAgICAgICAgPGRpdiBjbGFzcz1cImZvcm0tY29udHJvbC1ncm91cFwiICpuZ0lmPVwiaXNFZGl0XCI+XHJcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJsYWJlbCByZXF1aXJlZFwiPk1vYmlsZTwvZGl2PlxyXG4gICAgICAgICAgICA8aW5wdXQgdHlwZT1cIm51bWJlclwiIHBsYWNlaG9sZGVyPVwiRW50ZXIgbW9iaWxlXCIgWyhuZ01vZGVsKV09XCJtb2JpbGVcIiBkaXNhYmxlZD5cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiZm9ybS1jb250cm9sLWdyb3VwXCI+XHJcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJsYWJlbFwiPkVtYWlsPC9kaXY+XHJcbiAgICAgICAgICAgIDxpbnB1dCB0eXBlPVwidGV4dFwiIHBsYWNlaG9sZGVyPVwiRW50ZXIgZW1haWxcIiBbKG5nTW9kZWwpXT1cImVtYWlsXCI+XHJcbiAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwiZXJyb3ItbXNnXCIgW3N0eWxlLnZpc2liaWxpdHldPVwiaXNFbWFpbFZhbGlkID8gJ2hpZGRlbicgOiAndmlzaWJsZSdcIj5QbGVhc2UgZW50ZXIgdmFsaWQgZW1haWw8L3NwYW4+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgXHJcbiAgICAgICAgPGRpdiBjbGFzcz1cImZvcm0tY29udHJvbC1ncm91cC1mdWxsXCI+XHJcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJsYWJlbFwiPlNlbGVjdCBHZW5kZXI8L2Rpdj5cclxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImQtZmxleCBhbGlnbi1pdGVtcy1jZW50ZXJcIj5cclxuICAgICAgICAgICAgICAgIDxpbWcgc3JjPVwiaHR0cHM6Ly9pbWcuaWNvbnM4LmNvbS8/c2l6ZT0xMDAmaWQ9MTA4Mjk2JmZvcm1hdD1wbmcmY29sb3I9MDAwMDAwXCIgYWx0PVwiXCJcclxuICAgICAgICAgICAgICAgICAgICAoY2xpY2spPVwiZ2VuZGVyID0gJ01BTEUnXCIgW25nQ2xhc3NdPVwieydhY3RpdmUnOiBnZW5kZXIgPT0gJ01BTEUnIH1cIj5cclxuICAgICAgICAgICAgICAgIDxpbWcgc3JjPVwiaHR0cHM6Ly9pbWcuaWNvbnM4LmNvbS8/c2l6ZT0xMDAmaWQ9MTA4Mjk1JmZvcm1hdD1wbmcmY29sb3I9MDAwMDAwXCIgYWx0PVwiXCJcclxuICAgICAgICAgICAgICAgICAgICAoY2xpY2spPVwiZ2VuZGVyID0gJ0ZFTUFMRSdcIiBbbmdDbGFzc109XCJ7J2FjdGl2ZSc6IGdlbmRlciA9PSAnRkVNQUxFJ31cIj5cclxuICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICA8L2Rpdj5cclxuICAgIDxkaXYgY2xhc3M9XCJhY3Rpb24tYnRuXCI+XHJcbiAgICAgICAgPHNwYW4gY2xhc3M9XCJza2lwLWJ0blwiIChjbGljayk9XCJjbG9zZSgpXCI+e3shaXNFZGl0ID8gJ1NraXAnIDogJ0Nsb3NlJ319PC9zcGFuPlxyXG4gICAgICAgIDxidXR0b24gKGNsaWNrKT1cInNhdmVQcm9maWxlKClcIj5TYXZlIFByb2ZpbGU8L2J1dHRvbj5cclxuICAgIDwvZGl2PlxyXG48L3NlY3Rpb24+XHJcbjxwLXRvYXN0IHBvc2l0aW9uPVwiYm90dG9tLXJpZ2h0XCIgW2Jhc2VaSW5kZXhdPVwiMTAwMDAwMDAwMDBcIiBbYXV0b1pJbmRleF09XCJ0cnVlXCI+PC9wLXRvYXN0PiJdfQ==
+                        FormsModule
+                    ], template: "<section style=\"padding: 20px\" class=\"position-relative\">\r\n    <div class=\"d-flex flex-wrap justify-content-between\">\r\n        <div class=\"form-control-group-3\">\r\n            <div class=\"label\">First Name</div>\r\n            <input type=\"text\" placeholder=\"Enter first name\" [(ngModel)]=\"firstName\">\r\n        </div>\r\n        <div class=\"form-control-group-3\">\r\n            <div class=\"label\">Middle Name</div>\r\n            <input type=\"text\" placeholder=\"Enter middle name\" [(ngModel)]=\"middleName\">\r\n        </div>\r\n        <div class=\"form-control-group-3\">\r\n            <div class=\"label\">Last Name</div>\r\n            <input type=\"text\" placeholder=\"Enter last name\" [(ngModel)]=\"lastName\">\r\n        </div>\r\n        <div class=\"form-control-group-full\">\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Email</div>\r\n                <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"email\">\r\n            </div>\r\n        </div>    \r\n        <div class=\"form-control-group\">\r\n            <div class=\"label\">Select Gender</div>\r\n            <div class=\"d-flex align-items-center\">\r\n                <img src=\"https://img.icons8.com/?size=100&id=108296&format=png&color=000000\" alt=\"\" (click)=\"gender = 'MALE'\" [ngClass]=\"{'active': gender == 'MALE' }\">\r\n                <img src=\"https://img.icons8.com/?size=100&id=108295&format=png&color=000000\" alt=\"\" (click)=\"gender = 'FEMALE'\" [ngClass]=\"{'active': gender == 'FEMALE'}\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"action-btn\">\r\n        <span class=\"skip-btn\" (click)=\"close()\">Skip</span>\r\n        <button (click)=\"saveProfile()\">Save Profile</button>\r\n    </div>\r\n</section>", styles: [".form-control-group,.form-control-group-3,.form-control-group-full{width:48%}:is(.form-control-group,.form-control-group-3,.form-control-group-full)>input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.label{color:#000}.form-control-group-3{width:32%!important}.form-control-group-full{width:100%}.form-control-group{margin:15px 0}.form-control-group img{height:50px;width:50px;object-fit:cover;margin:0 5px;border:2px solid transparent;cursor:pointer;border-radius:50%}.form-control-group .active{border:2px solid #0267C1}.action-btn{position:absolute;bottom:-35px;right:10px;display:flex;align-items:center;gap:20px}.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}\n"] }]
+        }], ctorParameters: () => [{ type: i1.RestService }, { type: i2.Router }, { type: i3.MatDialogRef }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlci1iYXNpYy1pbmZvLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NpbXBvLXVpL3NyYy9saWIvZWNvbW1lcmNlL3NlY3Rpb25zL3VzZXItYmFzaWMtaW5mby91c2VyLWJhc2ljLWluZm8uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc2ltcG8tdWkvc3JjL2xpYi9lY29tbWVyY2Uvc2VjdGlvbnMvdXNlci1iYXNpYy1pbmZvL3VzZXItYmFzaWMtaW5mby5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFNBQVMsRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUNsRCxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDN0MsT0FBTyxFQUFFLGVBQWUsRUFBZ0IsTUFBTSwwQkFBMEIsQ0FBQztBQUV6RSxPQUFPLFFBQVEsTUFBTSw4QkFBOEIsQ0FBQzs7Ozs7OztBQWNwRCxNQUFNLE9BQU8sc0JBQXNCO0lBU2pDLFlBQ21CLFdBQXdCLEVBQ3hCLE1BQWMsRUFDZCxTQUErQztRQUYvQyxnQkFBVyxHQUFYLFdBQVcsQ0FBYTtRQUN4QixXQUFNLEdBQU4sTUFBTSxDQUFRO1FBQ2QsY0FBUyxHQUFULFNBQVMsQ0FBc0M7UUFWM0QsV0FBTSxHQUE2QixJQUFJLENBQUM7UUFDeEMsY0FBUyxHQUFXLEVBQUUsQ0FBQztRQUN2QixlQUFVLEdBQVcsRUFBRSxDQUFDO1FBQ3hCLGFBQVEsR0FBVyxFQUFFLENBQUM7UUFDdEIsVUFBSyxHQUFXLEVBQUUsQ0FBQztRQUNuQixlQUFVLEdBQVcsRUFBRSxDQUFDO0lBTTVCLENBQUM7SUFDSixRQUFRO1FBQ0osSUFBSSxDQUFDLFNBQVMsR0FBRyxRQUFRLENBQUMsSUFBSSxFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQUUsS0FBSyxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDL0QsSUFBSSxDQUFDLFVBQVUsR0FBRyxRQUFRLENBQUMsSUFBSSxFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQUUsS0FBSyxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDaEUsSUFBSSxDQUFDLFFBQVEsR0FBRyxRQUFRLENBQUMsSUFBSSxFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQUUsS0FBSyxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDOUQsSUFBSSxDQUFDLEtBQUssR0FBRyxRQUFRLENBQUMsSUFBSSxFQUFFLE9BQU8sRUFBRSxLQUFLLENBQUM7UUFDM0MsSUFBSSxDQUFDLE1BQU0sR0FBRyxRQUFRLENBQUMsSUFBSSxFQUFFLE1BQTZCLENBQUM7UUFDM0QsSUFBSSxDQUFDLFVBQVUsR0FBRyxRQUFRLENBQUMsSUFBSSxFQUFFLFVBQVUsQ0FBQztJQUNoRCxDQUFDO0lBRUQsS0FBSztRQUNILElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxFQUFFLENBQUM7SUFDekIsQ0FBQztJQUNELFdBQVc7UUFDVCxNQUFNLE9BQU8sR0FBRztZQUNkLE1BQU0sRUFBRSxRQUFRLENBQUMsSUFBSSxFQUFFLE1BQU07WUFDN0IsTUFBTSxFQUFFLElBQUksQ0FBQyxNQUFNO1lBQ25CLFVBQVUsRUFBRSxJQUFJLENBQUMsVUFBVTtZQUMzQixPQUFPLEVBQUU7Z0JBQ1AsV0FBVyxFQUFFLElBQUk7Z0JBQ2pCLEtBQUssRUFBRSxJQUFJLENBQUMsS0FBSztnQkFDakIsSUFBSSxFQUFFLElBQUksQ0FBQyxTQUFTLEdBQUcsR0FBRyxHQUFHLENBQUMsSUFBSSxDQUFDLFVBQVUsRUFBRSxNQUFNLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsVUFBVSxHQUFHLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLEdBQUcsSUFBSSxDQUFDLFFBQVE7YUFDeEc7U0FDRixDQUFBO1FBQ0QsSUFBSSxDQUFDLFdBQVcsQ0FBQyxhQUFhLENBQUMsT0FBTyxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsUUFBUSxFQUFDLEVBQUU7WUFDNUQsSUFBSSxJQUFJLENBQUMsU0FBUztnQkFDaEIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxLQUFLLEVBQUUsQ0FBQzs7Z0JBRXZCLElBQUksQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQztRQUNoQyxDQUFDLENBQUMsQ0FBQTtJQUNKLENBQUM7OEdBM0NVLHNCQUFzQjtrR0FBdEIsc0JBQXNCLGlGQ25CbkMsMnlEQWdDVSw0NkJEcEJOLFlBQVksNEhBQ1osZUFBZSw4QkFDZixXQUFXOzsyRkFLRixzQkFBc0I7a0JBWGxDLFNBQVM7K0JBQ0UsdUJBQXVCLGNBQ3JCLElBQUksV0FDUDt3QkFDUCxZQUFZO3dCQUNaLGVBQWU7d0JBQ2YsV0FBVztxQkFDWiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcbmltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IEZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5pbXBvcnQgeyBNYXREaWFsb2dNb2R1bGUsIE1hdERpYWxvZ1JlZiB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2RpYWxvZyc7XHJcbmltcG9ydCB7IFJlc3RTZXJ2aWNlIH0gZnJvbSBcIi4uLy4uLy4uL3NlcnZpY2VzL3Jlc3Quc2VydmljZVwiO1xyXG5pbXBvcnQgVXNlckluZm8gZnJvbSBcIi4uLy4uL2pzb24vdXNlci1kZXRhaWxzLmpzb25cIjtcclxuaW1wb3J0IHsgUm91dGVyIH0gZnJvbSAnQGFuZ3VsYXIvcm91dGVyJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnc2ltcG8tdXNlci1iYXNpYy1pbmZvJyxcclxuICBzdGFuZGFsb25lOiB0cnVlLFxyXG4gIGltcG9ydHM6IFtcclxuICAgIENvbW1vbk1vZHVsZSxcclxuICAgIE1hdERpYWxvZ01vZHVsZSxcclxuICAgIEZvcm1zTW9kdWxlXHJcbiAgXSxcclxuICB0ZW1wbGF0ZVVybDogJy4vdXNlci1iYXNpYy1pbmZvLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybDogJy4vdXNlci1iYXNpYy1pbmZvLmNvbXBvbmVudC5jc3MnXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBVc2VyQmFzaWNJbmZvQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuXHJcbiAgcHVibGljIGdlbmRlcjogJ01BTEUnIHwgJ0ZFTUFMRScgfCBudWxsID0gbnVsbDtcclxuICBwdWJsaWMgZmlyc3ROYW1lOiBzdHJpbmcgPSBcIlwiO1xyXG4gIHB1YmxpYyBtaWRkbGVOYW1lOiBzdHJpbmcgPSBcIlwiO1xyXG4gIHB1YmxpYyBsYXN0TmFtZTogc3RyaW5nID0gXCJcIjtcclxuICBwdWJsaWMgZW1haWw6IHN0cmluZyA9IFwiXCI7XHJcbiAgcHVibGljIHByb2ZpbGVQaWM6IHN0cmluZyA9IFwiXCI7XHJcblxyXG4gIGNvbnN0cnVjdG9yKFxyXG4gICAgcHJpdmF0ZSByZWFkb25seSByZXN0U2VydmljZTogUmVzdFNlcnZpY2UsXHJcbiAgICBwcml2YXRlIHJlYWRvbmx5IHJvdXRlcjogUm91dGVyLFxyXG4gICAgcHJpdmF0ZSByZWFkb25seSBkaWFsb2dSZWY6IE1hdERpYWxvZ1JlZjxVc2VyQmFzaWNJbmZvQ29tcG9uZW50PlxyXG4gICkge31cclxuICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICAgICAgdGhpcy5maXJzdE5hbWUgPSBVc2VySW5mby51c2VyPy5jb250YWN0Py5uYW1lPy5zcGxpdChcIiBcIik/LlswXTtcclxuICAgICAgdGhpcy5taWRkbGVOYW1lID0gVXNlckluZm8udXNlcj8uY29udGFjdD8ubmFtZT8uc3BsaXQoXCIgXCIpPy5bMV07XHJcbiAgICAgIHRoaXMubGFzdE5hbWUgPSBVc2VySW5mby51c2VyPy5jb250YWN0Py5uYW1lPy5zcGxpdChcIiBcIik/LlsyXTtcclxuICAgICAgdGhpcy5lbWFpbCA9IFVzZXJJbmZvLnVzZXI/LmNvbnRhY3Q/LmVtYWlsO1xyXG4gICAgICB0aGlzLmdlbmRlciA9IFVzZXJJbmZvLnVzZXI/LmdlbmRlciBhcyAoXCJNQUxFXCIgfCBcIkZFTUFMRVwiKTtcclxuICAgICAgdGhpcy5wcm9maWxlUGljID0gVXNlckluZm8udXNlcj8ucHJvZmlsZVBpYztcclxuICB9XHJcblxyXG4gIGNsb3NlKCkge1xyXG4gICAgdGhpcy5kaWFsb2dSZWYuY2xvc2UoKTtcclxuICB9XHJcbiAgc2F2ZVByb2ZpbGUoKSB7XHJcbiAgICBjb25zdCBwYXlsb2FkID0ge1xyXG4gICAgICB1c2VySWQ6IFVzZXJJbmZvLnVzZXI/LnVzZXJJZCxcclxuICAgICAgZ2VuZGVyOiB0aGlzLmdlbmRlcixcclxuICAgICAgcHJvZmlsZVBpYzogdGhpcy5wcm9maWxlUGljLFxyXG4gICAgICBjb250YWN0OiB7XHJcbiAgICAgICAgY291bnRyeUNvZGU6IFwiOTFcIixcclxuICAgICAgICBlbWFpbDogdGhpcy5lbWFpbCxcclxuICAgICAgICBuYW1lOiB0aGlzLmZpcnN0TmFtZSArIFwiIFwiICsgKHRoaXMubWlkZGxlTmFtZT8ubGVuZ3RoID4gMCA/IHRoaXMubWlkZGxlTmFtZSArIFwiIFwiIDogXCJcIikgKyB0aGlzLmxhc3ROYW1lXHJcbiAgICAgIH1cclxuICAgIH1cclxuICAgIHRoaXMucmVzdFNlcnZpY2UudXBkYXRlUHJvZmlsZShwYXlsb2FkKS5zdWJzY3JpYmUoKHJlc3BvbnNlKT0+IHtcclxuICAgICAgaWYgKHRoaXMuZGlhbG9nUmVmKVxyXG4gICAgICAgIHRoaXMuZGlhbG9nUmVmLmNsb3NlKCk7XHJcbiAgICAgIGVsc2VcclxuICAgICAgICB0aGlzLnJvdXRlci5uYXZpZ2F0ZShbJy8nXSk7XHJcbiAgICB9KVxyXG4gIH1cclxufVxyXG4iLCI8c2VjdGlvbiBzdHlsZT1cInBhZGRpbmc6IDIwcHhcIiBjbGFzcz1cInBvc2l0aW9uLXJlbGF0aXZlXCI+XHJcbiAgICA8ZGl2IGNsYXNzPVwiZC1mbGV4IGZsZXgtd3JhcCBqdXN0aWZ5LWNvbnRlbnQtYmV0d2VlblwiPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJmb3JtLWNvbnRyb2wtZ3JvdXAtM1wiPlxyXG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwibGFiZWxcIj5GaXJzdCBOYW1lPC9kaXY+XHJcbiAgICAgICAgICAgIDxpbnB1dCB0eXBlPVwidGV4dFwiIHBsYWNlaG9sZGVyPVwiRW50ZXIgZmlyc3QgbmFtZVwiIFsobmdNb2RlbCldPVwiZmlyc3ROYW1lXCI+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cImZvcm0tY29udHJvbC1ncm91cC0zXCI+XHJcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJsYWJlbFwiPk1pZGRsZSBOYW1lPC9kaXY+XHJcbiAgICAgICAgICAgIDxpbnB1dCB0eXBlPVwidGV4dFwiIHBsYWNlaG9sZGVyPVwiRW50ZXIgbWlkZGxlIG5hbWVcIiBbKG5nTW9kZWwpXT1cIm1pZGRsZU5hbWVcIj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiZm9ybS1jb250cm9sLWdyb3VwLTNcIj5cclxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImxhYmVsXCI+TGFzdCBOYW1lPC9kaXY+XHJcbiAgICAgICAgICAgIDxpbnB1dCB0eXBlPVwidGV4dFwiIHBsYWNlaG9sZGVyPVwiRW50ZXIgbGFzdCBuYW1lXCIgWyhuZ01vZGVsKV09XCJsYXN0TmFtZVwiPlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJmb3JtLWNvbnRyb2wtZ3JvdXAtZnVsbFwiPlxyXG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZm9ybS1jb250cm9sLWdyb3VwXCI+XHJcbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwibGFiZWxcIj5FbWFpbDwvZGl2PlxyXG4gICAgICAgICAgICAgICAgPGlucHV0IHR5cGU9XCJ0ZXh0XCIgcGxhY2Vob2xkZXI9XCJFbnRlciBlbWFpbFwiIFsobmdNb2RlbCldPVwiZW1haWxcIj5cclxuICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPC9kaXY+ICAgIFxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJmb3JtLWNvbnRyb2wtZ3JvdXBcIj5cclxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImxhYmVsXCI+U2VsZWN0IEdlbmRlcjwvZGl2PlxyXG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZC1mbGV4IGFsaWduLWl0ZW1zLWNlbnRlclwiPlxyXG4gICAgICAgICAgICAgICAgPGltZyBzcmM9XCJodHRwczovL2ltZy5pY29uczguY29tLz9zaXplPTEwMCZpZD0xMDgyOTYmZm9ybWF0PXBuZyZjb2xvcj0wMDAwMDBcIiBhbHQ9XCJcIiAoY2xpY2spPVwiZ2VuZGVyID0gJ01BTEUnXCIgW25nQ2xhc3NdPVwieydhY3RpdmUnOiBnZW5kZXIgPT0gJ01BTEUnIH1cIj5cclxuICAgICAgICAgICAgICAgIDxpbWcgc3JjPVwiaHR0cHM6Ly9pbWcuaWNvbnM4LmNvbS8/c2l6ZT0xMDAmaWQ9MTA4Mjk1JmZvcm1hdD1wbmcmY29sb3I9MDAwMDAwXCIgYWx0PVwiXCIgKGNsaWNrKT1cImdlbmRlciA9ICdGRU1BTEUnXCIgW25nQ2xhc3NdPVwieydhY3RpdmUnOiBnZW5kZXIgPT0gJ0ZFTUFMRSd9XCI+XHJcbiAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgPC9kaXY+XHJcbiAgICA8ZGl2IGNsYXNzPVwiYWN0aW9uLWJ0blwiPlxyXG4gICAgICAgIDxzcGFuIGNsYXNzPVwic2tpcC1idG5cIiAoY2xpY2spPVwiY2xvc2UoKVwiPlNraXA8L3NwYW4+XHJcbiAgICAgICAgPGJ1dHRvbiAoY2xpY2spPVwic2F2ZVByb2ZpbGUoKVwiPlNhdmUgUHJvZmlsZTwvYnV0dG9uPlxyXG4gICAgPC9kaXY+XHJcbjwvc2VjdGlvbj4iXX0=