simpo-component-library 2.1.993 → 2.1.995

package/fesm2022/simpo-component-library.mjs

@@ -20,6 +20,7 @@ import * as i11 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i5$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
+import * as i12 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i8$1 from '@angular/material/bottom-sheet';
 import { MatBottomSheetModule, MAT_BOTTOM_SHEET_DATA } from '@angular/material/bottom-sheet';
@@ -46,6 +47,7 @@ import { MatInputModule } from '@angular/material/input';
 import * as i14 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import moment from 'moment';
+import { StorageKeys as StorageKeys$1 } from '@simpo-ui/styles';
 import { isBlurhashValid, decode } from 'blurhash';
 import * as i14$1 from 'ngx-image-zoom';
 import { NgxImageZoomModule } from 'ngx-image-zoom';
@@ -486,6 +488,10 @@ const svgData = {
     [DeviderType.WAVE]: { svg: 'M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z', rotate: true, rotateY: false },
     [DeviderType.INVERT_WAVE]: { svg: 'M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z', rotate: false, rotateY: false }
 };
+var StorageKeys;
+(function (StorageKeys) {
+    StorageKeys["INVESTOR_ID"] = "investorId";
+})(StorageKeys || (StorageKeys = {}));
 
 class ImageDirectiveDirective {
     constructor(el, eventService) {
@@ -4078,12 +4084,16 @@ class RestService {
     sendOtp(email) {
         return this.http.post(this.BASE_URL + `investor/sendOtp?email=${email}`, '');
     }
-    login(email, password, logInType = 'PASSWORD') {
-        return this.http.get(this.BASE_URL + `investor/login?loginType=${logInType}&email=${email}&password=${password || ''}`);
+    login(payload) {
+        return this.http.post(this.BASE_URL + `investor/login`, payload);
     }
     verifyOtp(email, otp) {
         return this.http.get(this.BASE_URL + `investor/verifyOtp?email=${email}&otp=${otp}`);
     }
+    logout() {
+        const investerId = localStorage.getItem(StorageKeys.INVESTOR_ID);
+        return this.http.get(this.BASE_URL + `investor/logout?investorId=${investerId}`);
+    }
     getFieldsToDisplay(fieldsList) {
         let map = {};
         for (let field of fieldsList) {
@@ -5796,7 +5806,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
 
 class NavbarSectionComponent {
     // matDialog = inject(MatDialog);
-    constructor(_eventService, router, activatedRoute, matDialog, bottomSheet, cookieService, storageService, restService) {
+    constructor(_eventService, router, activatedRoute, matDialog, bottomSheet, cookieService, storageService, restService, messageService) {
         this._eventService = _eventService;
         this.router = router;
         this.activatedRoute = activatedRoute;
@@ -5805,6 +5815,7 @@ class NavbarSectionComponent {
         this.cookieService = cookieService;
         this.storageService = storageService;
         this.restService = restService;
+        this.messageService = messageService;
         this.edit = false;
         this.scrollValue = 0;
         this.color = '#000000';
@@ -5955,7 +5966,7 @@ class NavbarSectionComponent {
         return Object.keys(object);
     }
     get isLoggedIn() {
-        return localStorage.getItem('investorId') ? true : false;
+        return localStorage.getItem(StorageKeys.INVESTOR_ID) ? true : false;
     }
     getValues(object) {
         const keys = [];
@@ -5979,8 +5990,17 @@ class NavbarSectionComponent {
         }
         return page;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: NavbarSectionComponent, deps: [{ token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i5.MatDialog }, { token: i8$1.MatBottomSheet }, { token: i2$1.CookieService }, { token: StorageServiceService }, { token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: NavbarSectionComponent, isStandalone: true, selector: "simpo-navbar-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\"  [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n  <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\" [isHeader]=\"true\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n    <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\" [ngClass]=\"{'adjustePadding': !isEcommerceWebsite, 'paddingEcom': isEcommerceWebsite, 'no-shadow': isComponentMerged}\">\r\n     <ng-container  *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite && !isRealEstateWebsite\">\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_LEFT__MENU_RIGHT\">\r\n          <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n          <div class=\"d-flex align-item-center\">\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n           <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_RIGHT__MENU_LEFT\">\r\n        <div class=\"d-flex align-items-center gap-15\">\r\n          <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n        </div>\r\n        <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n\r\n        </div>\r\n\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_CENTER__MENU_LEFT\">\r\n          <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n          <div class=\"d-flex flex-column align-item-center\">\r\n            <div class=\"d-flex justify-content-center\">\r\n              <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n            </div>\r\n\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n\r\n        </div>\r\n      </ng-container>\r\n     </ng-container>\r\n\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <div class=\"d-flex justify-content-between align-items-center px-2\">\r\n          <div class=\"d-flex\">\r\n            <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"navbarLinksTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"ecommerceButtonsTemplate\"></ng-container>\r\n        </div>\r\n        <ng-container *ngIf=\"canShowMobileFooter\">\r\n          <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"isRealEstateWebsite\">\r\n        <div class=\"d-flex justify-content-between align-items-center px-2\">\r\n          <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n          <div class=\"d-flex align-item-center\">\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n            <ng-container *ngIf=\"!isLoggedIn\">\r\n              <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"realEstateButtontemplate\"></ng-container>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n\r\n      <ng-container *ngIf=\"!isEcommerceWebsite && !isRealEstateWebsite\">\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <ng-container *ngTemplateOutlet=\"mobileButtonsTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n\r\n    </nav>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\" left-logo-text d-flex\">\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n      <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n        <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n      </div>\r\n      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\" loading=\"lazy\">\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element\r\n          [buttonData]=\"item\"\r\n          [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\"\r\n          [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\"\r\n            id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n              <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\" (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #socialIconsTemplate>\r\n  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n       [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n    <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n        <div style=\"position: relative; margin-right: 10px;\">\r\n          <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav align-items-center\">\r\n    <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n      <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element\r\n            [buttonData]=\"item\"\r\n            [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\"\r\n            [bgColor]=\"simpoColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element\r\n          [buttonContent]=\"button.content\"\r\n          [buttonStyle]=\"button.styles\"\r\n          [sectionId]=\"data?.id\"\r\n          [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative\" style=\"max-width: 50vw;\">\r\n    <div class=\"search-icon\" *ngIf=\"!isMobile\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">search</mat-icon>\r\n    </div>\r\n    <div class=\"input-group\" *ngIf=\"!isMobile && showSearchBar\">\r\n      <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n      <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\" *ngIf=\"!isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\" *ngIf=\"!isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n      <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 30px;\">\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\" *ngIf=\"!isMobile\">Account</span>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #realEstateButtontemplate>\r\n  <div class=\"investorProfile\">\r\n    <p class=\"investorName\">Hv</p>\r\n    <mat-icon>keyboard_arrow_down</mat-icon>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileButtonsTemplate>\r\n  <div class=\"inner-height \">\r\n    <div class=\"nab-bar-mobile d-flex justify-content-between align-items-center\">\r\n\r\n      <div class=\"title-row\">\r\n        <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n      </div>\r\n\r\n\r\n      <button class=\"navbar-toggler\" (click)=\"isNavbarOpen = !isNavbarOpen\" *ngIf=\"!isNavbarOpen\">\r\n        <mat-icon [simpoColor]=\"style?.background?.color\">menu</mat-icon> <!-- Use \"menu\" for a hamburger icon -->\r\n    </button>\r\n\r\n\r\n      <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\" *ngIf=\"isNavbarOpen\">\r\n        <mat-icon>close</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"isNavbarOpen\" class=\"navbar-content mt-3\">\r\n      <div class=\"d-flex flex-column gap-2\">\r\n\r\n        <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n          <ng-container *ngIf=\"item.showHeader\">\r\n            <simpo-navbar-button-element\r\n            [buttonData]=\"item\"\r\n            [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n          </ng-container>\r\n        </ng-container>\r\n      </div>\r\n\r\n\r\n      <div class=\"d-flex align-items-start flex-column flex-lg-row gap-lg-0 gap-3 mt-2\">\r\n        <div class=\"d-flex\" *ngIf=\"content?.socialLinks?.display\">\r\n          <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n            <div style=\"position: relative; margin-right: 10px;\">\r\n              <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <div class=\"d-flex flex-column mt-2 align-items-center\">\r\n        <div *ngIf=\"action?.display\" class=\"button-display\">\r\n          <div *ngFor=\"let button of action?.buttons\">\r\n            <app-button-element\r\n              [buttonContent]=\"button.content\"\r\n              [buttonStyle]=\"button.styles\"\r\n              [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}.no-shadow{box-shadow:none!important}.container-fluid{display:flex;align-items:center}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;right:25px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:2px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:38px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px;position:absolute;right:0%;top:130%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.gap-15{gap:15px}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.investorProfile{display:flex;align-items:center;margin-left:15px}.investorProfile p{color:#000;height:32px;background:#e6f0ff;width:32px;display:flex;align-items:center;justify-content:center;border-radius:100%;margin-bottom:0;font-weight:600}.investorProfile mat-icon{color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.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: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SimpoFooterLayoutDirective, selector: "[simpoFooterLayout]", inputs: ["simpoFooterLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
+    redirectToProfile() {
+        this.router.navigate(['profile']);
+    }
+    logout() {
+        this.restService.logout().subscribe((res) => {
+            localStorage.removeItem(StorageKeys.INVESTOR_ID);
+            this.messageService.add({ severity: 'success', summary: 'Log out', detail: 'Logged out Successfully' });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: NavbarSectionComponent, deps: [{ token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i5.MatDialog }, { token: i8$1.MatBottomSheet }, { token: i2$1.CookieService }, { token: StorageServiceService }, { token: RestService }, { token: i5$2.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: NavbarSectionComponent, isStandalone: true, selector: "simpo-navbar-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\"  [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n  <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\" [isHeader]=\"true\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n    <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\" [ngClass]=\"{'adjustePadding': !isEcommerceWebsite, 'paddingEcom': isEcommerceWebsite, 'no-shadow': isComponentMerged}\">\r\n     <ng-container  *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite && !isRealEstateWebsite\">\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_LEFT__MENU_RIGHT\">\r\n          <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n          <div class=\"d-flex align-item-center\">\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n           <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_RIGHT__MENU_LEFT\">\r\n        <div class=\"d-flex align-items-center gap-15\">\r\n          <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n        </div>\r\n        <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n\r\n        </div>\r\n\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_CENTER__MENU_LEFT\">\r\n          <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n          <div class=\"d-flex flex-column align-item-center\">\r\n            <div class=\"d-flex justify-content-center\">\r\n              <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n            </div>\r\n\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n\r\n        </div>\r\n      </ng-container>\r\n     </ng-container>\r\n\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <div class=\"d-flex justify-content-between align-items-center px-2\">\r\n          <div class=\"d-flex\">\r\n            <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"navbarLinksTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"ecommerceButtonsTemplate\"></ng-container>\r\n        </div>\r\n        <ng-container *ngIf=\"canShowMobileFooter\">\r\n          <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"isRealEstateWebsite\">\r\n        <div class=\"d-flex justify-content-between align-items-center px-2\">\r\n          <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n          <div class=\"d-flex align-item-center\">\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n            <ng-container *ngIf=\"!isLoggedIn\">\r\n              <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"isLoggedIn\">\r\n              <ng-container *ngTemplateOutlet=\"realEstateButtontemplate\"></ng-container>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n\r\n      <ng-container *ngIf=\"!isEcommerceWebsite && !isRealEstateWebsite\">\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <ng-container *ngTemplateOutlet=\"mobileButtonsTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n\r\n    </nav>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\" left-logo-text d-flex\">\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n      <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n        <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n      </div>\r\n      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\" loading=\"lazy\">\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element\r\n          [buttonData]=\"item\"\r\n          [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\"\r\n          [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\"\r\n            id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n              <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\" (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #socialIconsTemplate>\r\n  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n       [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n    <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n        <div style=\"position: relative; margin-right: 10px;\">\r\n          <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav align-items-center\">\r\n    <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n      <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element\r\n            [buttonData]=\"item\"\r\n            [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\"\r\n            [bgColor]=\"simpoColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element\r\n          [buttonContent]=\"button.content\"\r\n          [buttonStyle]=\"button.styles\"\r\n          [sectionId]=\"data?.id\"\r\n          [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative\" style=\"max-width: 50vw;\">\r\n    <div class=\"search-icon\" *ngIf=\"!isMobile\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">search</mat-icon>\r\n    </div>\r\n    <div class=\"input-group\" *ngIf=\"!isMobile && showSearchBar\">\r\n      <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n      <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\" *ngIf=\"!isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\" *ngIf=\"!isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n      <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 30px;\">\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\" *ngIf=\"!isMobile\">Account</span>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #realEstateButtontemplate>\r\n  <div class=\"investorProfile\" [matMenuTriggerFor]=\"menu\">\r\n    <p class=\"investorName\">Hv</p>\r\n    <mat-icon>keyboard_arrow_down</mat-icon>\r\n  </div>\r\n  <mat-menu #menu=\"matMenu\">\r\n    <button mat-menu-item (click)=\"redirectToProfile()\">Profile</button>\r\n    <button mat-menu-item (click)=\"logout()\">Logout</button>\r\n  </mat-menu>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileButtonsTemplate>\r\n  <div class=\"inner-height \">\r\n    <div class=\"nab-bar-mobile d-flex justify-content-between align-items-center\">\r\n\r\n      <div class=\"title-row\">\r\n        <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n      </div>\r\n\r\n\r\n      <button class=\"navbar-toggler\" (click)=\"isNavbarOpen = !isNavbarOpen\" *ngIf=\"!isNavbarOpen\">\r\n        <mat-icon [simpoColor]=\"style?.background?.color\">menu</mat-icon> <!-- Use \"menu\" for a hamburger icon -->\r\n    </button>\r\n\r\n\r\n      <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\" *ngIf=\"isNavbarOpen\">\r\n        <mat-icon>close</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"isNavbarOpen\" class=\"navbar-content mt-3\">\r\n      <div class=\"d-flex flex-column gap-2\">\r\n\r\n        <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n          <ng-container *ngIf=\"item.showHeader\">\r\n            <simpo-navbar-button-element\r\n            [buttonData]=\"item\"\r\n            [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n          </ng-container>\r\n        </ng-container>\r\n      </div>\r\n\r\n\r\n      <div class=\"d-flex align-items-start flex-column flex-lg-row gap-lg-0 gap-3 mt-2\">\r\n        <div class=\"d-flex\" *ngIf=\"content?.socialLinks?.display\">\r\n          <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n            <div style=\"position: relative; margin-right: 10px;\">\r\n              <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <div class=\"d-flex flex-column mt-2 align-items-center\">\r\n        <div *ngIf=\"action?.display\" class=\"button-display\">\r\n          <div *ngFor=\"let button of action?.buttons\">\r\n            <app-button-element\r\n              [buttonContent]=\"button.content\"\r\n              [buttonStyle]=\"button.styles\"\r\n              [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}.no-shadow{box-shadow:none!important}.container-fluid{display:flex;align-items:center}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;right:25px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:2px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:38px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px;position:absolute;right:0%;top:130%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.gap-15{gap:15px}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.investorProfile{display:flex;align-items:center;margin-left:15px;cursor:pointer}.investorProfile p{color:#000;height:32px;background:#e6f0ff;width:32px;display:flex;align-items:center;justify-content:center;border-radius:100%;margin-bottom:0;font-weight:600}.investorProfile mat-icon{color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.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: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SimpoFooterLayoutDirective, selector: "[simpoFooterLayout]", inputs: ["simpoFooterLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i12.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: NavbarSectionComponent, decorators: [{
             type: Component,
@@ -6016,8 +6036,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         MatButtonModule,
                         MatMenuModule,
                         SpacingHorizontalDirective
-                    ], template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\"  [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n  <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\" [isHeader]=\"true\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n    <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\" [ngClass]=\"{'adjustePadding': !isEcommerceWebsite, 'paddingEcom': isEcommerceWebsite, 'no-shadow': isComponentMerged}\">\r\n     <ng-container  *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite && !isRealEstateWebsite\">\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_LEFT__MENU_RIGHT\">\r\n          <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n          <div class=\"d-flex align-item-center\">\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n           <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_RIGHT__MENU_LEFT\">\r\n        <div class=\"d-flex align-items-center gap-15\">\r\n          <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n        </div>\r\n        <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n\r\n        </div>\r\n\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_CENTER__MENU_LEFT\">\r\n          <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n          <div class=\"d-flex flex-column align-item-center\">\r\n            <div class=\"d-flex justify-content-center\">\r\n              <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n            </div>\r\n\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n\r\n        </div>\r\n      </ng-container>\r\n     </ng-container>\r\n\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <div class=\"d-flex justify-content-between align-items-center px-2\">\r\n          <div class=\"d-flex\">\r\n            <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"navbarLinksTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"ecommerceButtonsTemplate\"></ng-container>\r\n        </div>\r\n        <ng-container *ngIf=\"canShowMobileFooter\">\r\n          <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"isRealEstateWebsite\">\r\n        <div class=\"d-flex justify-content-between align-items-center px-2\">\r\n          <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n          <div class=\"d-flex align-item-center\">\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n            <ng-container *ngIf=\"!isLoggedIn\">\r\n              <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"realEstateButtontemplate\"></ng-container>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n\r\n      <ng-container *ngIf=\"!isEcommerceWebsite && !isRealEstateWebsite\">\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <ng-container *ngTemplateOutlet=\"mobileButtonsTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n\r\n    </nav>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\" left-logo-text d-flex\">\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n      <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n        <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n      </div>\r\n      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\" loading=\"lazy\">\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element\r\n          [buttonData]=\"item\"\r\n          [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\"\r\n          [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\"\r\n            id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n              <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\" (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #socialIconsTemplate>\r\n  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n       [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n    <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n        <div style=\"position: relative; margin-right: 10px;\">\r\n          <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav align-items-center\">\r\n    <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n      <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element\r\n            [buttonData]=\"item\"\r\n            [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\"\r\n            [bgColor]=\"simpoColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element\r\n          [buttonContent]=\"button.content\"\r\n          [buttonStyle]=\"button.styles\"\r\n          [sectionId]=\"data?.id\"\r\n          [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative\" style=\"max-width: 50vw;\">\r\n    <div class=\"search-icon\" *ngIf=\"!isMobile\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">search</mat-icon>\r\n    </div>\r\n    <div class=\"input-group\" *ngIf=\"!isMobile && showSearchBar\">\r\n      <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n      <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\" *ngIf=\"!isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\" *ngIf=\"!isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n      <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 30px;\">\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\" *ngIf=\"!isMobile\">Account</span>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #realEstateButtontemplate>\r\n  <div class=\"investorProfile\">\r\n    <p class=\"investorName\">Hv</p>\r\n    <mat-icon>keyboard_arrow_down</mat-icon>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileButtonsTemplate>\r\n  <div class=\"inner-height \">\r\n    <div class=\"nab-bar-mobile d-flex justify-content-between align-items-center\">\r\n\r\n      <div class=\"title-row\">\r\n        <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n      </div>\r\n\r\n\r\n      <button class=\"navbar-toggler\" (click)=\"isNavbarOpen = !isNavbarOpen\" *ngIf=\"!isNavbarOpen\">\r\n        <mat-icon [simpoColor]=\"style?.background?.color\">menu</mat-icon> <!-- Use \"menu\" for a hamburger icon -->\r\n    </button>\r\n\r\n\r\n      <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\" *ngIf=\"isNavbarOpen\">\r\n        <mat-icon>close</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"isNavbarOpen\" class=\"navbar-content mt-3\">\r\n      <div class=\"d-flex flex-column gap-2\">\r\n\r\n        <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n          <ng-container *ngIf=\"item.showHeader\">\r\n            <simpo-navbar-button-element\r\n            [buttonData]=\"item\"\r\n            [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n          </ng-container>\r\n        </ng-container>\r\n      </div>\r\n\r\n\r\n      <div class=\"d-flex align-items-start flex-column flex-lg-row gap-lg-0 gap-3 mt-2\">\r\n        <div class=\"d-flex\" *ngIf=\"content?.socialLinks?.display\">\r\n          <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n            <div style=\"position: relative; margin-right: 10px;\">\r\n              <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <div class=\"d-flex flex-column mt-2 align-items-center\">\r\n        <div *ngIf=\"action?.display\" class=\"button-display\">\r\n          <div *ngFor=\"let button of action?.buttons\">\r\n            <app-button-element\r\n              [buttonContent]=\"button.content\"\r\n              [buttonStyle]=\"button.styles\"\r\n              [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}.no-shadow{box-shadow:none!important}.container-fluid{display:flex;align-items:center}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;right:25px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:2px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:38px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px;position:absolute;right:0%;top:130%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.gap-15{gap:15px}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.investorProfile{display:flex;align-items:center;margin-left:15px}.investorProfile p{color:#000;height:32px;background:#e6f0ff;width:32px;display:flex;align-items:center;justify-content:center;border-radius:100%;margin-bottom:0;font-weight:600}.investorProfile mat-icon{color:#000}\n"] }]
-        }], ctorParameters: () => [{ type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i5.MatDialog }, { type: i8$1.MatBottomSheet }, { type: i2$1.CookieService }, { type: StorageServiceService }, { type: RestService }], propDecorators: { data: [{
+                    ], providers: [MessageService], template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\"  [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n  <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\" [isHeader]=\"true\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n    <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\" [ngClass]=\"{'adjustePadding': !isEcommerceWebsite, 'paddingEcom': isEcommerceWebsite, 'no-shadow': isComponentMerged}\">\r\n     <ng-container  *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite && !isRealEstateWebsite\">\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_LEFT__MENU_RIGHT\">\r\n          <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n          <div class=\"d-flex align-item-center\">\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n           <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_RIGHT__MENU_LEFT\">\r\n        <div class=\"d-flex align-items-center gap-15\">\r\n          <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n        </div>\r\n        <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n\r\n        </div>\r\n\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_CENTER__MENU_LEFT\">\r\n          <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n          <div class=\"d-flex flex-column align-item-center\">\r\n            <div class=\"d-flex justify-content-center\">\r\n              <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n            </div>\r\n\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n\r\n        </div>\r\n      </ng-container>\r\n     </ng-container>\r\n\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <div class=\"d-flex justify-content-between align-items-center px-2\">\r\n          <div class=\"d-flex\">\r\n            <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"navbarLinksTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"ecommerceButtonsTemplate\"></ng-container>\r\n        </div>\r\n        <ng-container *ngIf=\"canShowMobileFooter\">\r\n          <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"isRealEstateWebsite\">\r\n        <div class=\"d-flex justify-content-between align-items-center px-2\">\r\n          <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n          <div class=\"d-flex align-item-center\">\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n            <ng-container *ngIf=\"!isLoggedIn\">\r\n              <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"isLoggedIn\">\r\n              <ng-container *ngTemplateOutlet=\"realEstateButtontemplate\"></ng-container>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n\r\n      <ng-container *ngIf=\"!isEcommerceWebsite && !isRealEstateWebsite\">\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <ng-container *ngTemplateOutlet=\"mobileButtonsTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n\r\n    </nav>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\" left-logo-text d-flex\">\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n      <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n        <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n      </div>\r\n      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\" loading=\"lazy\">\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element\r\n          [buttonData]=\"item\"\r\n          [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\"\r\n          [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\"\r\n            id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n              <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\" (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #socialIconsTemplate>\r\n  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n       [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n    <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n        <div style=\"position: relative; margin-right: 10px;\">\r\n          <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav align-items-center\">\r\n    <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n      <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element\r\n            [buttonData]=\"item\"\r\n            [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\"\r\n            [bgColor]=\"simpoColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element\r\n          [buttonContent]=\"button.content\"\r\n          [buttonStyle]=\"button.styles\"\r\n          [sectionId]=\"data?.id\"\r\n          [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative\" style=\"max-width: 50vw;\">\r\n    <div class=\"search-icon\" *ngIf=\"!isMobile\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">search</mat-icon>\r\n    </div>\r\n    <div class=\"input-group\" *ngIf=\"!isMobile && showSearchBar\">\r\n      <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n      <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\" *ngIf=\"!isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\" *ngIf=\"!isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n      <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 30px;\">\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\" *ngIf=\"!isMobile\">Account</span>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #realEstateButtontemplate>\r\n  <div class=\"investorProfile\" [matMenuTriggerFor]=\"menu\">\r\n    <p class=\"investorName\">Hv</p>\r\n    <mat-icon>keyboard_arrow_down</mat-icon>\r\n  </div>\r\n  <mat-menu #menu=\"matMenu\">\r\n    <button mat-menu-item (click)=\"redirectToProfile()\">Profile</button>\r\n    <button mat-menu-item (click)=\"logout()\">Logout</button>\r\n  </mat-menu>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileButtonsTemplate>\r\n  <div class=\"inner-height \">\r\n    <div class=\"nab-bar-mobile d-flex justify-content-between align-items-center\">\r\n\r\n      <div class=\"title-row\">\r\n        <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n      </div>\r\n\r\n\r\n      <button class=\"navbar-toggler\" (click)=\"isNavbarOpen = !isNavbarOpen\" *ngIf=\"!isNavbarOpen\">\r\n        <mat-icon [simpoColor]=\"style?.background?.color\">menu</mat-icon> <!-- Use \"menu\" for a hamburger icon -->\r\n    </button>\r\n\r\n\r\n      <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\" *ngIf=\"isNavbarOpen\">\r\n        <mat-icon>close</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"isNavbarOpen\" class=\"navbar-content mt-3\">\r\n      <div class=\"d-flex flex-column gap-2\">\r\n\r\n        <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n          <ng-container *ngIf=\"item.showHeader\">\r\n            <simpo-navbar-button-element\r\n            [buttonData]=\"item\"\r\n            [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n          </ng-container>\r\n        </ng-container>\r\n      </div>\r\n\r\n\r\n      <div class=\"d-flex align-items-start flex-column flex-lg-row gap-lg-0 gap-3 mt-2\">\r\n        <div class=\"d-flex\" *ngIf=\"content?.socialLinks?.display\">\r\n          <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n            <div style=\"position: relative; margin-right: 10px;\">\r\n              <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <div class=\"d-flex flex-column mt-2 align-items-center\">\r\n        <div *ngIf=\"action?.display\" class=\"button-display\">\r\n          <div *ngFor=\"let button of action?.buttons\">\r\n            <app-button-element\r\n              [buttonContent]=\"button.content\"\r\n              [buttonStyle]=\"button.styles\"\r\n              [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}.no-shadow{box-shadow:none!important}.container-fluid{display:flex;align-items:center}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;right:25px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:2px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:38px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px;position:absolute;right:0%;top:130%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.gap-15{gap:15px}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.investorProfile{display:flex;align-items:center;margin-left:15px;cursor:pointer}.investorProfile p{color:#000;height:32px;background:#e6f0ff;width:32px;display:flex;align-items:center;justify-content:center;border-radius:100%;margin-bottom:0;font-weight:600}.investorProfile mat-icon{color:#000}\n"] }]
+        }], ctorParameters: () => [{ type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i5.MatDialog }, { type: i8$1.MatBottomSheet }, { type: i2$1.CookieService }, { type: StorageServiceService }, { type: RestService }, { type: i5$2.MessageService }], propDecorators: { data: [{
                 type: Input
             }], nextComponent: [{
                 type: Input
@@ -9887,14 +9907,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                 type: Input
             }] } });
 
+class KycDetailsComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: KycDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: KycDetailsComponent, isStandalone: true, selector: "simpo-kyc-details", ngImport: i0, template: "<section class=\"main-section\">\r\n  <img class=\"img\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/970332c1740030187726kyc.png\" alt=\"\">\r\n  <div class=\"text-group\">\r\n    <p class=\"heading\">Complete Your KYC to start Investing</p>\r\n    <p class=\"desc\">Before you can invest, we need to verify your identity, simply upload your documents,\r\n      <br> submit your KYC, and let us handle the rest\r\n    </p>\r\n  </div>\r\n  <button class=\"submit-btn\" type=\"button\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n    aria-controls=\"offcanvasRight\">Submit KYC Now</button>\r\n</section>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\">\r\n  <div class=\"header\">\r\n    <p>KYC Details</p>\r\n  </div>\r\n  <div class=\"middle-section\">\r\n    <div class=\"body\">\r\n      <div class=\"secured\">\r\n        <mat-icon>security</mat-icon>\r\n        <p>Your Data is Safe & Secure</p>\r\n      </div>\r\n\r\n      <div class=\"mt-2\">\r\n        <label for=\"\">PAN Number</label>\r\n        <div class=\"input-box\">\r\n          <input type=\"text\">\r\n          <mat-icon class=\"verified\" title=\"OTP Verified\">check_circle</mat-icon>\r\n        </div>\r\n      </div>\r\n      <div class=\"mt-1\">\r\n        <label for=\"\">Name on PAN</label>\r\n        <div class=\"input-box\">\r\n          <input type=\"text\">\r\n          <mat-icon class=\"verified\" title=\"OTP Verified\">check_circle</mat-icon>\r\n        </div>\r\n      </div>\r\n      <div class=\"mt-1\">\r\n        <label for=\"\">Aadhar Number</label>\r\n        <div class=\"input-box\">\r\n          <input type=\"text\">\r\n          <mat-icon class=\"verified\" title=\"OTP Verified\">check_circle</mat-icon>\r\n        </div>\r\n      </div>\r\n      <div class=\"mt-1\">\r\n        <label for=\"\">Enter OTP</label>\r\n\r\n        <div id=\"otp\" class=\"otp-input\">\r\n          <ng-container *ngFor=\"let otp of [1,2,3,4,5,6]; let idx = index\">\r\n            <input type=\"number\" max=\"9\" class=\"otp-input\" mat-suffix/>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"footer\">\r\n    <button class=\"cancel-btn\" data-bs-dismiss=\"offcanvas\">Cancel</button>\r\n    <button class=\"submit-btn\">Verify</button>\r\n  </div>\r\n</div>\r\n", styles: [".main-section{height:100%;background:#fff;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center}.img{width:35%}.text-group{text-align:center;margin-top:3rem;margin-bottom:2rem}.heading{font-size:14px;font-family:DM SANS;font-weight:700;color:#000}.desc{font-size:14px;color:#0009;font-family:DM SANS;font-weight:500}.submit-btn{width:max-content!important;outline:none;border:1px solid rgba(248,169,56,1);background:#f8a938;color:#fff;border-radius:5px;font-size:16px!important;font-family:DM SANS;padding:7px 20px}.cancel-btn{width:max-content!important;outline:none;border:1px solid rgba(248,169,56,1);background:transparent;color:#f8a938;border-radius:5px;font-size:16px!important;font-family:DM SANS;padding:7px 20px}.header{padding:20px;border:1px solid rgba(14,35,60,.16);height:60px}.header p{font-size:17px;margin-bottom:0;font-weight:600;font-family:Inter}.middle-section{height:calc(100vh - 120px);overflow:scroll;background:#fcfcfc}.footer{position:absolute;bottom:0;height:60px;display:flex;align-items:center;justify-content:flex-end;border-top:1px solid rgba(14,35,60,.16);width:100%;padding:20px;gap:14px}.offcanvas{width:40%;z-index:100000000}.body{background:#fff;margin:2.5rem;padding:2rem;border-radius:10px}.body label{font-size:14px;font-family:DM SANS;color:#434443;font-weight:400}.secured{display:flex;justify-content:center;gap:10px}.secured p{font-size:15px;font-family:DM SANS;font-weight:400;color:#0009}.secured mat-icon{display:flex;font-size:18px;color:#00dd80;align-items:center;justify-content:center}.input-box{width:100%;display:flex;justify-content:space-between;padding:10px;border:1px solid rgba(208,213,221,1);border-radius:7px;margin-top:8px}.input-box input{width:90%;border:none;outline:none;font-size:16px;font-family:DM SANS}.verified{color:#1ac100}p{margin-bottom:0}.mt-2{margin-top:2rem!important}.mt-1{margin-top:1rem!important}.otp-input{display:flex;gap:20px;margin-top:8px}.otp-input input{width:59px;border:1px solid rgba(208,213,221,1);height:54px;border-radius:8px;outline:none;justify-content:center;text-align:center}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}@media screen and (max-width: 475px){.offcanvas{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: KycDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-kyc-details', standalone: true, imports: [MatIconModule, CommonModule, FormsModule], template: "<section class=\"main-section\">\r\n  <img class=\"img\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/970332c1740030187726kyc.png\" alt=\"\">\r\n  <div class=\"text-group\">\r\n    <p class=\"heading\">Complete Your KYC to start Investing</p>\r\n    <p class=\"desc\">Before you can invest, we need to verify your identity, simply upload your documents,\r\n      <br> submit your KYC, and let us handle the rest\r\n    </p>\r\n  </div>\r\n  <button class=\"submit-btn\" type=\"button\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n    aria-controls=\"offcanvasRight\">Submit KYC Now</button>\r\n</section>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\">\r\n  <div class=\"header\">\r\n    <p>KYC Details</p>\r\n  </div>\r\n  <div class=\"middle-section\">\r\n    <div class=\"body\">\r\n      <div class=\"secured\">\r\n        <mat-icon>security</mat-icon>\r\n        <p>Your Data is Safe & Secure</p>\r\n      </div>\r\n\r\n      <div class=\"mt-2\">\r\n        <label for=\"\">PAN Number</label>\r\n        <div class=\"input-box\">\r\n          <input type=\"text\">\r\n          <mat-icon class=\"verified\" title=\"OTP Verified\">check_circle</mat-icon>\r\n        </div>\r\n      </div>\r\n      <div class=\"mt-1\">\r\n        <label for=\"\">Name on PAN</label>\r\n        <div class=\"input-box\">\r\n          <input type=\"text\">\r\n          <mat-icon class=\"verified\" title=\"OTP Verified\">check_circle</mat-icon>\r\n        </div>\r\n      </div>\r\n      <div class=\"mt-1\">\r\n        <label for=\"\">Aadhar Number</label>\r\n        <div class=\"input-box\">\r\n          <input type=\"text\">\r\n          <mat-icon class=\"verified\" title=\"OTP Verified\">check_circle</mat-icon>\r\n        </div>\r\n      </div>\r\n      <div class=\"mt-1\">\r\n        <label for=\"\">Enter OTP</label>\r\n\r\n        <div id=\"otp\" class=\"otp-input\">\r\n          <ng-container *ngFor=\"let otp of [1,2,3,4,5,6]; let idx = index\">\r\n            <input type=\"number\" max=\"9\" class=\"otp-input\" mat-suffix/>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"footer\">\r\n    <button class=\"cancel-btn\" data-bs-dismiss=\"offcanvas\">Cancel</button>\r\n    <button class=\"submit-btn\">Verify</button>\r\n  </div>\r\n</div>\r\n", styles: [".main-section{height:100%;background:#fff;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center}.img{width:35%}.text-group{text-align:center;margin-top:3rem;margin-bottom:2rem}.heading{font-size:14px;font-family:DM SANS;font-weight:700;color:#000}.desc{font-size:14px;color:#0009;font-family:DM SANS;font-weight:500}.submit-btn{width:max-content!important;outline:none;border:1px solid rgba(248,169,56,1);background:#f8a938;color:#fff;border-radius:5px;font-size:16px!important;font-family:DM SANS;padding:7px 20px}.cancel-btn{width:max-content!important;outline:none;border:1px solid rgba(248,169,56,1);background:transparent;color:#f8a938;border-radius:5px;font-size:16px!important;font-family:DM SANS;padding:7px 20px}.header{padding:20px;border:1px solid rgba(14,35,60,.16);height:60px}.header p{font-size:17px;margin-bottom:0;font-weight:600;font-family:Inter}.middle-section{height:calc(100vh - 120px);overflow:scroll;background:#fcfcfc}.footer{position:absolute;bottom:0;height:60px;display:flex;align-items:center;justify-content:flex-end;border-top:1px solid rgba(14,35,60,.16);width:100%;padding:20px;gap:14px}.offcanvas{width:40%;z-index:100000000}.body{background:#fff;margin:2.5rem;padding:2rem;border-radius:10px}.body label{font-size:14px;font-family:DM SANS;color:#434443;font-weight:400}.secured{display:flex;justify-content:center;gap:10px}.secured p{font-size:15px;font-family:DM SANS;font-weight:400;color:#0009}.secured mat-icon{display:flex;font-size:18px;color:#00dd80;align-items:center;justify-content:center}.input-box{width:100%;display:flex;justify-content:space-between;padding:10px;border:1px solid rgba(208,213,221,1);border-radius:7px;margin-top:8px}.input-box input{width:90%;border:none;outline:none;font-size:16px;font-family:DM SANS}.verified{color:#1ac100}p{margin-bottom:0}.mt-2{margin-top:2rem!important}.mt-1{margin-top:1rem!important}.otp-input{display:flex;gap:20px;margin-top:8px}.otp-input input{width:59px;border:1px solid rgba(208,213,221,1);height:54px;border-radius:8px;outline:none;justify-content:center;text-align:center}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}@media screen and (max-width: 475px){.offcanvas{width:100%}}\n"] }]
+        }] });
+
 class SignupSigninComponent extends BaseSection {
-    constructor(_eventService, restService, router, activatedRoute, messageService) {
+    constructor(_eventService, restService, router, activatedRoute, messageService, matDialog) {
         super();
         this._eventService = _eventService;
         this.restService = restService;
         this.router = router;
         this.activatedRoute = activatedRoute;
         this.messageService = messageService;
+        this.matDialog = matDialog;
         this.currentPage = 'LOGIN';
         this.backgroundImage = "https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/500415c1739434186310image%2016.png";
         this.otpArray = new Array(4).fill('');
@@ -9974,10 +10004,13 @@ class SignupSigninComponent extends BaseSection {
         });
     }
     loginWithPassword() {
-        this.restService.login(this.loginEmail, this.investor.password).subscribe((res) => {
+        this.restService.login({ email: this.loginEmail, password: this.investor.password }).subscribe((res) => {
             this.messageService.add({ severity: 'success', summary: 'Log In', detail: 'Logged in successfully' });
-            localStorage.setItem('investerId', res.investorId);
-            this.router.navigate(['']);
+            localStorage.setItem(StorageKeys$1.INVESTOR_ID, res.investorId);
+            if (!res.kycVerified) {
+                this.matDialog.open(KycDetailsComponent, { panelClass: "login-signup" });
+            }
+            this.router.navigate(['property-list']);
         });
     }
     sendOtpForLogin() {
@@ -9994,14 +10027,19 @@ class SignupSigninComponent extends BaseSection {
         });
         this.restService.verifyOtp(this.loginEmail, logInOtp).subscribe((res) => {
             this.messageService.add({ severity: 'success', summary: 'Log In', detail: 'Logged in successfully' });
+            localStorage.setItem(StorageKeys$1.INVESTOR_ID, res.investorId);
+            if (!res.kycVerified) {
+                this.matDialog.open(KycDetailsComponent, { panelClass: "login-signup" });
+            }
+            this.router.navigate(['property-list']);
         });
     }
     isValidEmail(email) {
         const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
         return emailRegex.test(email);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SignupSigninComponent, deps: [{ token: EventsService }, { token: RestService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i5$2.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: SignupSigninComponent, isStandalone: true, selector: "simpo-signup-signin", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" class=\"main-container h-85 d-flex align-items-center justify-content-center\"\r\n  [ngStyle]=\"{'background-image': 'url(' + backgroundImage + ')'}\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"middle-container w-40-85\" [id]=\"data?.id\" [simpoBackground]=\"data?.styles?.background\"\r\n    [simpoAnimation]=\"data?.styles?.animation\" [simpoCorner]=\"data?.styles?.corners\">\r\n    <div class=\"head\">{{ currentPage == 'LOGIN' || currentPage == 'OTP' ? \"Sign In\" : currentPage ==\r\n      'FORGOT_PASSWORD' ? \"Forgot Password\" : currentPage == 'OTP_VERIFY' ? \"OTP Verfication\" : \"Sign Up\"}}</div>\r\n    <div class=\"field-container\">\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'LOGIN' || currentPage == 'OTP'\">\r\n        <div class=\"field-head\">Email or Phone Number</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"text\" placeholder=\"Please Enter Your Registered Email or Phone number\" [(ngModel)]=\"loginEmail\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'OTP' && otpSent\">\r\n        <div class=\"field-head\">OTP</div>\r\n        <div class=\"field-text-1\">\r\n          <div id=\"otp\" class=\"inputs d-flex flex-row justify-content-center mt-2\">\r\n            <ng-container *ngFor=\"let _ of [].constructor(4); let idx = index\">\r\n              <input class=\"m-2 text-center form-control rounded additional-styles\" type=\"number\" max=\"1\"\r\n                [(ngModel)]=\"loginOtpArray[idx]\" (keyup)=\"moveLoginOtpCursor($event, idx)\" [id]=\"'loginOtp_'+idx\" #otpInput />\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'OTP_VERIFY'\">\r\n        <!-- <div class=\"field-head\" *ngIf=\"currentPage == 'OTP' \">OTP</div> -->\r\n        <div class=\"field-text-1\">\r\n          <div id=\"otp\" class=\"inputs d-flex flex-row justify-content-center mt-2\">\r\n            <ng-container *ngFor=\"let _ of [].constructor(4); let idx = index\">\r\n              <input class=\"m-2 text-center form-control rounded additional-styles\" type=\"number\" max=\"1\"\r\n                [(ngModel)]=\"otpArray[idx]\" (keyup)=\"move($event, idx)\" [id]=\"'otp_'+idx\" #otpInput />\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n        <div class=\"field-head\">Name</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"text\" placeholder=\"Please Enter Your Name\" [(ngModel)]=\"investor.fullName\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n        <div class=\"field-head\">Email</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"text\" placeholder=\"Please Enter Your Email\" [(ngModel)]=\"investor.emailId\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n        <div class=\"field-head\">Phone Number</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"text\" placeholder=\"Please Enter Your Phone Number\" [(ngModel)]=\"investor.phoneNumber\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'FORGOT_PASSWORD'\">\r\n        <div class=\"field-head\">Old Password</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"password\" placeholder=\"Please Enter Your Password\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'FORGOT_PASSWORD'\">\r\n        <div class=\"field-head\">New Password</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"password\" placeholder=\"Please Enter Your Password\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'FORGOT_PASSWORD'\">\r\n        <div class=\"field-head\">Re-Enter Password</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"password\" placeholder=\"Please Re-Enter Your Password\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'LOGIN' || currentPage == 'SIGN_UP' \">\r\n        <div class=\"field-head\">Password</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"password\" placeholder=\"Please Enter Your Password\" [(ngModel)]=\"investor.password\">\r\n        </div>\r\n      </div>\r\n      <div class=\"forgot-password cursor-pointer\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n        *ngIf=\"currentPage == 'LOGIN'\" (click)=\"currentPage = 'FORGOT_PASSWORD'\">Forgot Password?</div>\r\n      <div class=\"forgot-password cursor-pointer\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n        *ngIf=\"currentPage == 'OTP_VERIFY'\">Resend OTP?</div>\r\n      <div class=\"btn-container d-flex align-items-center justify-content-center\">\r\n        <button class=\"login-btn cursor-pointer\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage != 'OTP'\"\r\n          [class.btn-size]=\"currentPage == 'FORGOT_PASSWORD' || currentPage == 'SIGN_UP' || currentPage == 'OTP_VERIFY'\"\r\n          (click)=\"buttonClickedEvent()\">{{ currentPage ==\r\n          'LOGIN' ? \"Login\" : currentPage == 'FORGOT_PASSWORD' ? \"Reset Password\" :\r\n          currentPage == 'OTP_VERIFY' ? 'Verify OTP' : \"Create Account\"}}</button>\r\n\r\n        <button class=\"login-btn cursor-pointer\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'OTP' && !otpSent\"\r\n         (click)=\"sendOtpForLogin()\">Send Otp</button>\r\n\r\n        <button class=\"login-btn cursor-pointer\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'OTP' && otpSent\"\r\n         (click)=\"verifyOtp()\">Login</button>\r\n      </div>\r\n      <div class=\"another-page\" *ngIf=\"currentPage == 'LOGIN' || currentPage == 'OTP'\">\r\n        <div class=\"signup-text\">Don\u2019t have an account? <span class=\"span-text cursor-pointer\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"currentPage = 'SIGN_UP'\">Sign\r\n            Up</span></div>\r\n        <div class=\"signup-text m-5\">or</div>\r\n        <div class=\"signup-text\">Login with <span class=\"span-text cursor-pointer\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'LOGIN' \"\r\n            (click)=\"currentPage = 'OTP'\">OTP</span><span class=\"span-text cursor-pointer\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'OTP'\"\r\n            (click)=\"currentPage = 'LOGIN'\">Password</span></div>\r\n      </div>\r\n      <div class=\"another-page\" *ngIf=\"currentPage == 'SIGN_UP' || currentPage == 'FORGOT_PASSWORD'\">\r\n        <div class=\"signup-text\">Already have an account? <span class=\"span-text cursor-pointer\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"currentPage = 'LOGIN'\">Sign\r\n            In</span></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: ["*{font-family:DM Sans!important}.h-85{height:85vh;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.w-40-85{width:40%}.btn-size{width:40%!important}.head{font-size:36px;font-weight:600;line-height:52px;color:#112133;text-align:center;padding:15px;padding-bottom:unset}.field-container{padding:15px}.field-head{margin-bottom:10px;font-size:17px;font-weight:600;line-height:24px;color:#2c2c2c}.field-text{padding:10px;border-radius:20px;font-size:15px;font-weight:400;color:#ababab;background:#fff}.field-text input{width:100%;border:none;appearance:none;outline:unset;background:#fff}.forgot-password{text-align:end;font-size:16px;font-weight:600;line-height:24px;margin-bottom:15px}.another-page{margin-top:15px;text-align:center}.signup-text{color:#6b6b6b;font-size:14px;font-weight:400;line-height:24px;margin-bottom:5px}.m-5{margin:5px 0!important}.mb-30{margin-bottom:30px!important}.mb-15{margin-bottom:15px!important}.login-btn{border:unset;padding:12px 18px;border-radius:6px;font-size:18px!important;font-weight:600;line-height:20px}.span-text{font-weight:700!important}.cursor-pointer{cursor:pointer}.additional-styles{padding:15px 5px!important;width:9%!important;border:unset!important;border-radius:20px!important}@media screen and (max-width : 475px){.w-40-85{width:85%}.h-86{height:90vh!important}.btn-size{width:100%!important;white-space:nowrap}.additional-styles{width:15%!important;border-radius:10px!important}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.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: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SignupSigninComponent, deps: [{ token: EventsService }, { token: RestService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i5$2.MessageService }, { token: i5.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: SignupSigninComponent, isStandalone: true, selector: "simpo-signup-signin", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" class=\"main-container h-85 d-flex align-items-center justify-content-center\"\r\n  [ngStyle]=\"{'background-image': 'url(' + backgroundImage + ')'}\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"middle-container w-40-85\" [id]=\"data?.id\" [simpoBackground]=\"data?.styles?.background\"\r\n    [simpoAnimation]=\"data?.styles?.animation\" [simpoCorner]=\"data?.styles?.corners\">\r\n    <div class=\"head\">{{ currentPage == 'LOGIN' || currentPage == 'OTP' ? \"Sign In\" : currentPage ==\r\n      'FORGOT_PASSWORD' ? \"Forgot Password\" : currentPage == 'OTP_VERIFY' ? \"OTP Verfication\" : \"Sign Up\"}}</div>\r\n    <div class=\"field-container\">\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'LOGIN' || currentPage == 'OTP'\">\r\n        <div class=\"field-head\">Email or Phone Number</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"text\" placeholder=\"Please Enter Your Registered Email or Phone number\" [(ngModel)]=\"loginEmail\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'OTP' && otpSent\">\r\n        <div class=\"field-head\">OTP</div>\r\n        <div class=\"field-text-1\">\r\n          <div id=\"otp\" class=\"inputs d-flex flex-row justify-content-center mt-2\">\r\n            <ng-container *ngFor=\"let _ of [].constructor(4); let idx = index\">\r\n              <input class=\"m-2 text-center form-control rounded additional-styles\" type=\"number\" max=\"1\"\r\n                [(ngModel)]=\"loginOtpArray[idx]\" (keyup)=\"moveLoginOtpCursor($event, idx)\" [id]=\"'loginOtp_'+idx\" #otpInput />\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'OTP_VERIFY'\">\r\n        <!-- <div class=\"field-head\" *ngIf=\"currentPage == 'OTP' \">OTP</div> -->\r\n        <div class=\"field-text-1\">\r\n          <div id=\"otp\" class=\"inputs d-flex flex-row justify-content-center mt-2\">\r\n            <ng-container *ngFor=\"let _ of [].constructor(4); let idx = index\">\r\n              <input class=\"m-2 text-center form-control rounded additional-styles\" type=\"number\" max=\"1\"\r\n                [(ngModel)]=\"otpArray[idx]\" (keyup)=\"move($event, idx)\" [id]=\"'otp_'+idx\" #otpInput />\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n        <div class=\"field-head\">Name</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"text\" placeholder=\"Please Enter Your Name\" [(ngModel)]=\"investor.fullName\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n        <div class=\"field-head\">Email</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"text\" placeholder=\"Please Enter Your Email\" [(ngModel)]=\"investor.emailId\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n        <div class=\"field-head\">Phone Number</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"text\" placeholder=\"Please Enter Your Phone Number\" [(ngModel)]=\"investor.phoneNumber\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'FORGOT_PASSWORD'\">\r\n        <div class=\"field-head\">Old Password</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"password\" placeholder=\"Please Enter Your Password\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'FORGOT_PASSWORD'\">\r\n        <div class=\"field-head\">New Password</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"password\" placeholder=\"Please Enter Your Password\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'FORGOT_PASSWORD'\">\r\n        <div class=\"field-head\">Re-Enter Password</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"password\" placeholder=\"Please Re-Enter Your Password\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'LOGIN' || currentPage == 'SIGN_UP' \">\r\n        <div class=\"field-head\">Password</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"text\" placeholder=\"Please Enter Your Password\" [(ngModel)]=\"investor.password\">\r\n        </div>\r\n      </div>\r\n      <div class=\"forgot-password cursor-pointer\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n        *ngIf=\"currentPage == 'LOGIN'\" (click)=\"currentPage = 'FORGOT_PASSWORD'\">Forgot Password?</div>\r\n      <div class=\"forgot-password cursor-pointer\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n        *ngIf=\"currentPage == 'OTP_VERIFY'\">Resend OTP?</div>\r\n      <div class=\"btn-container d-flex align-items-center justify-content-center\">\r\n        <button class=\"login-btn cursor-pointer\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage != 'OTP'\"\r\n          [class.btn-size]=\"currentPage == 'FORGOT_PASSWORD' || currentPage == 'SIGN_UP' || currentPage == 'OTP_VERIFY'\"\r\n          (click)=\"buttonClickedEvent()\">{{ currentPage ==\r\n          'LOGIN' ? \"Login\" : currentPage == 'FORGOT_PASSWORD' ? \"Reset Password\" :\r\n          currentPage == 'OTP_VERIFY' ? 'Verify OTP' : \"Create Account\"}}</button>\r\n\r\n        <button class=\"login-btn cursor-pointer\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'OTP' && !otpSent\"\r\n         (click)=\"sendOtpForLogin()\">Send Otp</button>\r\n\r\n        <button class=\"login-btn cursor-pointer\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'OTP' && otpSent\"\r\n         (click)=\"verifyOtp()\">Login</button>\r\n      </div>\r\n      <div class=\"another-page\" *ngIf=\"currentPage == 'LOGIN' || currentPage == 'OTP'\">\r\n        <div class=\"signup-text\">Don\u2019t have an account? <span class=\"span-text cursor-pointer\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"currentPage = 'SIGN_UP'\">Sign\r\n            Up</span></div>\r\n        <div class=\"signup-text m-5\">or</div>\r\n        <div class=\"signup-text\">Login with <span class=\"span-text cursor-pointer\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'LOGIN' \"\r\n            (click)=\"currentPage = 'OTP'\">OTP</span><span class=\"span-text cursor-pointer\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'OTP'\"\r\n            (click)=\"currentPage = 'LOGIN'\">Password</span></div>\r\n      </div>\r\n      <div class=\"another-page\" *ngIf=\"currentPage == 'SIGN_UP' || currentPage == 'FORGOT_PASSWORD'\">\r\n        <div class=\"signup-text\">Already have an account? <span class=\"span-text cursor-pointer\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"currentPage = 'LOGIN'\">Sign\r\n            In</span></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: ["*{font-family:DM Sans!important}.h-85{height:85vh;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.w-40-85{width:40%}.btn-size{width:40%!important}.head{font-size:36px;font-weight:600;line-height:52px;color:#112133;text-align:center;padding:15px;padding-bottom:unset}.field-container{padding:15px}.field-head{margin-bottom:10px;font-size:17px;font-weight:600;line-height:24px;color:#2c2c2c}.field-text{padding:10px;border-radius:20px;font-size:15px;font-weight:400;color:#ababab;background:#fff}.field-text input{width:100%;border:none;appearance:none;outline:unset;background:#fff;color:#000}.forgot-password{text-align:end;font-size:16px;font-weight:600;line-height:24px;margin-bottom:15px}.another-page{margin-top:15px;text-align:center}.signup-text{color:#6b6b6b;font-size:14px;font-weight:400;line-height:24px;margin-bottom:5px}.m-5{margin:5px 0!important}.mb-30{margin-bottom:30px!important}.mb-15{margin-bottom:15px!important}.login-btn{border:unset;padding:12px 18px;border-radius:6px;font-size:18px!important;font-weight:600;line-height:20px}.span-text{font-weight:700!important}.cursor-pointer{cursor:pointer}.additional-styles{padding:15px 5px!important;width:9%!important;border:unset!important;border-radius:20px!important}@media screen and (max-width : 475px){.w-40-85{width:85%}.h-86{height:90vh!important}.btn-size{width:100%!important;white-space:nowrap}.additional-styles{width:15%!important;border-radius:10px!important}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.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: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: 
                 //Directives
                 BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }] }); }
 }
@@ -10018,8 +10056,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         BackgroundDirective,
                         AnimationDirective,
                         CornerDirective
-                    ], providers: [MessageService], template: "<section [id]=\"data?.id\" class=\"main-container h-85 d-flex align-items-center justify-content-center\"\r\n  [ngStyle]=\"{'background-image': 'url(' + backgroundImage + ')'}\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"middle-container w-40-85\" [id]=\"data?.id\" [simpoBackground]=\"data?.styles?.background\"\r\n    [simpoAnimation]=\"data?.styles?.animation\" [simpoCorner]=\"data?.styles?.corners\">\r\n    <div class=\"head\">{{ currentPage == 'LOGIN' || currentPage == 'OTP' ? \"Sign In\" : currentPage ==\r\n      'FORGOT_PASSWORD' ? \"Forgot Password\" : currentPage == 'OTP_VERIFY' ? \"OTP Verfication\" : \"Sign Up\"}}</div>\r\n    <div class=\"field-container\">\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'LOGIN' || currentPage == 'OTP'\">\r\n        <div class=\"field-head\">Email or Phone Number</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"text\" placeholder=\"Please Enter Your Registered Email or Phone number\" [(ngModel)]=\"loginEmail\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'OTP' && otpSent\">\r\n        <div class=\"field-head\">OTP</div>\r\n        <div class=\"field-text-1\">\r\n          <div id=\"otp\" class=\"inputs d-flex flex-row justify-content-center mt-2\">\r\n            <ng-container *ngFor=\"let _ of [].constructor(4); let idx = index\">\r\n              <input class=\"m-2 text-center form-control rounded additional-styles\" type=\"number\" max=\"1\"\r\n                [(ngModel)]=\"loginOtpArray[idx]\" (keyup)=\"moveLoginOtpCursor($event, idx)\" [id]=\"'loginOtp_'+idx\" #otpInput />\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'OTP_VERIFY'\">\r\n        <!-- <div class=\"field-head\" *ngIf=\"currentPage == 'OTP' \">OTP</div> -->\r\n        <div class=\"field-text-1\">\r\n          <div id=\"otp\" class=\"inputs d-flex flex-row justify-content-center mt-2\">\r\n            <ng-container *ngFor=\"let _ of [].constructor(4); let idx = index\">\r\n              <input class=\"m-2 text-center form-control rounded additional-styles\" type=\"number\" max=\"1\"\r\n                [(ngModel)]=\"otpArray[idx]\" (keyup)=\"move($event, idx)\" [id]=\"'otp_'+idx\" #otpInput />\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n        <div class=\"field-head\">Name</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"text\" placeholder=\"Please Enter Your Name\" [(ngModel)]=\"investor.fullName\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n        <div class=\"field-head\">Email</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"text\" placeholder=\"Please Enter Your Email\" [(ngModel)]=\"investor.emailId\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n        <div class=\"field-head\">Phone Number</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"text\" placeholder=\"Please Enter Your Phone Number\" [(ngModel)]=\"investor.phoneNumber\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'FORGOT_PASSWORD'\">\r\n        <div class=\"field-head\">Old Password</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"password\" placeholder=\"Please Enter Your Password\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'FORGOT_PASSWORD'\">\r\n        <div class=\"field-head\">New Password</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"password\" placeholder=\"Please Enter Your Password\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'FORGOT_PASSWORD'\">\r\n        <div class=\"field-head\">Re-Enter Password</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"password\" placeholder=\"Please Re-Enter Your Password\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'LOGIN' || currentPage == 'SIGN_UP' \">\r\n        <div class=\"field-head\">Password</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"password\" placeholder=\"Please Enter Your Password\" [(ngModel)]=\"investor.password\">\r\n        </div>\r\n      </div>\r\n      <div class=\"forgot-password cursor-pointer\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n        *ngIf=\"currentPage == 'LOGIN'\" (click)=\"currentPage = 'FORGOT_PASSWORD'\">Forgot Password?</div>\r\n      <div class=\"forgot-password cursor-pointer\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n        *ngIf=\"currentPage == 'OTP_VERIFY'\">Resend OTP?</div>\r\n      <div class=\"btn-container d-flex align-items-center justify-content-center\">\r\n        <button class=\"login-btn cursor-pointer\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage != 'OTP'\"\r\n          [class.btn-size]=\"currentPage == 'FORGOT_PASSWORD' || currentPage == 'SIGN_UP' || currentPage == 'OTP_VERIFY'\"\r\n          (click)=\"buttonClickedEvent()\">{{ currentPage ==\r\n          'LOGIN' ? \"Login\" : currentPage == 'FORGOT_PASSWORD' ? \"Reset Password\" :\r\n          currentPage == 'OTP_VERIFY' ? 'Verify OTP' : \"Create Account\"}}</button>\r\n\r\n        <button class=\"login-btn cursor-pointer\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'OTP' && !otpSent\"\r\n         (click)=\"sendOtpForLogin()\">Send Otp</button>\r\n\r\n        <button class=\"login-btn cursor-pointer\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'OTP' && otpSent\"\r\n         (click)=\"verifyOtp()\">Login</button>\r\n      </div>\r\n      <div class=\"another-page\" *ngIf=\"currentPage == 'LOGIN' || currentPage == 'OTP'\">\r\n        <div class=\"signup-text\">Don\u2019t have an account? <span class=\"span-text cursor-pointer\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"currentPage = 'SIGN_UP'\">Sign\r\n            Up</span></div>\r\n        <div class=\"signup-text m-5\">or</div>\r\n        <div class=\"signup-text\">Login with <span class=\"span-text cursor-pointer\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'LOGIN' \"\r\n            (click)=\"currentPage = 'OTP'\">OTP</span><span class=\"span-text cursor-pointer\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'OTP'\"\r\n            (click)=\"currentPage = 'LOGIN'\">Password</span></div>\r\n      </div>\r\n      <div class=\"another-page\" *ngIf=\"currentPage == 'SIGN_UP' || currentPage == 'FORGOT_PASSWORD'\">\r\n        <div class=\"signup-text\">Already have an account? <span class=\"span-text cursor-pointer\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"currentPage = 'LOGIN'\">Sign\r\n            In</span></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: ["*{font-family:DM Sans!important}.h-85{height:85vh;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.w-40-85{width:40%}.btn-size{width:40%!important}.head{font-size:36px;font-weight:600;line-height:52px;color:#112133;text-align:center;padding:15px;padding-bottom:unset}.field-container{padding:15px}.field-head{margin-bottom:10px;font-size:17px;font-weight:600;line-height:24px;color:#2c2c2c}.field-text{padding:10px;border-radius:20px;font-size:15px;font-weight:400;color:#ababab;background:#fff}.field-text input{width:100%;border:none;appearance:none;outline:unset;background:#fff}.forgot-password{text-align:end;font-size:16px;font-weight:600;line-height:24px;margin-bottom:15px}.another-page{margin-top:15px;text-align:center}.signup-text{color:#6b6b6b;font-size:14px;font-weight:400;line-height:24px;margin-bottom:5px}.m-5{margin:5px 0!important}.mb-30{margin-bottom:30px!important}.mb-15{margin-bottom:15px!important}.login-btn{border:unset;padding:12px 18px;border-radius:6px;font-size:18px!important;font-weight:600;line-height:20px}.span-text{font-weight:700!important}.cursor-pointer{cursor:pointer}.additional-styles{padding:15px 5px!important;width:9%!important;border:unset!important;border-radius:20px!important}@media screen and (max-width : 475px){.w-40-85{width:85%}.h-86{height:90vh!important}.btn-size{width:100%!important;white-space:nowrap}.additional-styles{width:15%!important;border-radius:10px!important}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] }]
-        }], ctorParameters: () => [{ type: EventsService }, { type: RestService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i5$2.MessageService }], propDecorators: { data: [{
+                    ], providers: [MessageService], template: "<section [id]=\"data?.id\" class=\"main-container h-85 d-flex align-items-center justify-content-center\"\r\n  [ngStyle]=\"{'background-image': 'url(' + backgroundImage + ')'}\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"middle-container w-40-85\" [id]=\"data?.id\" [simpoBackground]=\"data?.styles?.background\"\r\n    [simpoAnimation]=\"data?.styles?.animation\" [simpoCorner]=\"data?.styles?.corners\">\r\n    <div class=\"head\">{{ currentPage == 'LOGIN' || currentPage == 'OTP' ? \"Sign In\" : currentPage ==\r\n      'FORGOT_PASSWORD' ? \"Forgot Password\" : currentPage == 'OTP_VERIFY' ? \"OTP Verfication\" : \"Sign Up\"}}</div>\r\n    <div class=\"field-container\">\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'LOGIN' || currentPage == 'OTP'\">\r\n        <div class=\"field-head\">Email or Phone Number</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"text\" placeholder=\"Please Enter Your Registered Email or Phone number\" [(ngModel)]=\"loginEmail\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'OTP' && otpSent\">\r\n        <div class=\"field-head\">OTP</div>\r\n        <div class=\"field-text-1\">\r\n          <div id=\"otp\" class=\"inputs d-flex flex-row justify-content-center mt-2\">\r\n            <ng-container *ngFor=\"let _ of [].constructor(4); let idx = index\">\r\n              <input class=\"m-2 text-center form-control rounded additional-styles\" type=\"number\" max=\"1\"\r\n                [(ngModel)]=\"loginOtpArray[idx]\" (keyup)=\"moveLoginOtpCursor($event, idx)\" [id]=\"'loginOtp_'+idx\" #otpInput />\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'OTP_VERIFY'\">\r\n        <!-- <div class=\"field-head\" *ngIf=\"currentPage == 'OTP' \">OTP</div> -->\r\n        <div class=\"field-text-1\">\r\n          <div id=\"otp\" class=\"inputs d-flex flex-row justify-content-center mt-2\">\r\n            <ng-container *ngFor=\"let _ of [].constructor(4); let idx = index\">\r\n              <input class=\"m-2 text-center form-control rounded additional-styles\" type=\"number\" max=\"1\"\r\n                [(ngModel)]=\"otpArray[idx]\" (keyup)=\"move($event, idx)\" [id]=\"'otp_'+idx\" #otpInput />\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n        <div class=\"field-head\">Name</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"text\" placeholder=\"Please Enter Your Name\" [(ngModel)]=\"investor.fullName\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n        <div class=\"field-head\">Email</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"text\" placeholder=\"Please Enter Your Email\" [(ngModel)]=\"investor.emailId\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n        <div class=\"field-head\">Phone Number</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"text\" placeholder=\"Please Enter Your Phone Number\" [(ngModel)]=\"investor.phoneNumber\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'FORGOT_PASSWORD'\">\r\n        <div class=\"field-head\">Old Password</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"password\" placeholder=\"Please Enter Your Password\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'FORGOT_PASSWORD'\">\r\n        <div class=\"field-head\">New Password</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"password\" placeholder=\"Please Enter Your Password\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'FORGOT_PASSWORD'\">\r\n        <div class=\"field-head\">Re-Enter Password</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"password\" placeholder=\"Please Re-Enter Your Password\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'LOGIN' || currentPage == 'SIGN_UP' \">\r\n        <div class=\"field-head\">Password</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"text\" placeholder=\"Please Enter Your Password\" [(ngModel)]=\"investor.password\">\r\n        </div>\r\n      </div>\r\n      <div class=\"forgot-password cursor-pointer\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n        *ngIf=\"currentPage == 'LOGIN'\" (click)=\"currentPage = 'FORGOT_PASSWORD'\">Forgot Password?</div>\r\n      <div class=\"forgot-password cursor-pointer\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n        *ngIf=\"currentPage == 'OTP_VERIFY'\">Resend OTP?</div>\r\n      <div class=\"btn-container d-flex align-items-center justify-content-center\">\r\n        <button class=\"login-btn cursor-pointer\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage != 'OTP'\"\r\n          [class.btn-size]=\"currentPage == 'FORGOT_PASSWORD' || currentPage == 'SIGN_UP' || currentPage == 'OTP_VERIFY'\"\r\n          (click)=\"buttonClickedEvent()\">{{ currentPage ==\r\n          'LOGIN' ? \"Login\" : currentPage == 'FORGOT_PASSWORD' ? \"Reset Password\" :\r\n          currentPage == 'OTP_VERIFY' ? 'Verify OTP' : \"Create Account\"}}</button>\r\n\r\n        <button class=\"login-btn cursor-pointer\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'OTP' && !otpSent\"\r\n         (click)=\"sendOtpForLogin()\">Send Otp</button>\r\n\r\n        <button class=\"login-btn cursor-pointer\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'OTP' && otpSent\"\r\n         (click)=\"verifyOtp()\">Login</button>\r\n      </div>\r\n      <div class=\"another-page\" *ngIf=\"currentPage == 'LOGIN' || currentPage == 'OTP'\">\r\n        <div class=\"signup-text\">Don\u2019t have an account? <span class=\"span-text cursor-pointer\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"currentPage = 'SIGN_UP'\">Sign\r\n            Up</span></div>\r\n        <div class=\"signup-text m-5\">or</div>\r\n        <div class=\"signup-text\">Login with <span class=\"span-text cursor-pointer\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'LOGIN' \"\r\n            (click)=\"currentPage = 'OTP'\">OTP</span><span class=\"span-text cursor-pointer\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'OTP'\"\r\n            (click)=\"currentPage = 'LOGIN'\">Password</span></div>\r\n      </div>\r\n      <div class=\"another-page\" *ngIf=\"currentPage == 'SIGN_UP' || currentPage == 'FORGOT_PASSWORD'\">\r\n        <div class=\"signup-text\">Already have an account? <span class=\"span-text cursor-pointer\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"currentPage = 'LOGIN'\">Sign\r\n            In</span></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: ["*{font-family:DM Sans!important}.h-85{height:85vh;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.w-40-85{width:40%}.btn-size{width:40%!important}.head{font-size:36px;font-weight:600;line-height:52px;color:#112133;text-align:center;padding:15px;padding-bottom:unset}.field-container{padding:15px}.field-head{margin-bottom:10px;font-size:17px;font-weight:600;line-height:24px;color:#2c2c2c}.field-text{padding:10px;border-radius:20px;font-size:15px;font-weight:400;color:#ababab;background:#fff}.field-text input{width:100%;border:none;appearance:none;outline:unset;background:#fff;color:#000}.forgot-password{text-align:end;font-size:16px;font-weight:600;line-height:24px;margin-bottom:15px}.another-page{margin-top:15px;text-align:center}.signup-text{color:#6b6b6b;font-size:14px;font-weight:400;line-height:24px;margin-bottom:5px}.m-5{margin:5px 0!important}.mb-30{margin-bottom:30px!important}.mb-15{margin-bottom:15px!important}.login-btn{border:unset;padding:12px 18px;border-radius:6px;font-size:18px!important;font-weight:600;line-height:20px}.span-text{font-weight:700!important}.cursor-pointer{cursor:pointer}.additional-styles{padding:15px 5px!important;width:9%!important;border:unset!important;border-radius:20px!important}@media screen and (max-width : 475px){.w-40-85{width:85%}.h-86{height:90vh!important}.btn-size{width:100%!important;white-space:nowrap}.additional-styles{width:15%!important;border-radius:10px!important}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] }]
+        }], ctorParameters: () => [{ type: EventsService }, { type: RestService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i5$2.MessageService }, { type: i5.MatDialog }], propDecorators: { data: [{
                 type: Input
             }], index: [{
                 type: Input
@@ -10029,6 +10067,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                 type: Input
             }] } });
 
+class PropertiesComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertiesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PropertiesComponent, isStandalone: true, selector: "simpo-properties", ngImport: i0, template: "<p>properties works!</p>\r\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertiesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-properties', standalone: true, imports: [], template: "<p>properties works!</p>\r\n" }]
+        }] });
+
+class MyDocumentsComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: MyDocumentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: MyDocumentsComponent, isStandalone: true, selector: "simpo-my-documents", ngImport: i0, template: "<p>my-documents works!</p>\r\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: MyDocumentsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-my-documents', standalone: true, imports: [], template: "<p>my-documents works!</p>\r\n" }]
+        }] });
+
+class MyOrdersComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: MyOrdersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: MyOrdersComponent, isStandalone: true, selector: "simpo-my-orders", ngImport: i0, template: "<p>my-orders works!</p>\r\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: MyOrdersComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-my-orders', standalone: true, imports: [], template: "<p>my-orders works!</p>\r\n" }]
+        }] });
+
+class MyStatementComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: MyStatementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: MyStatementComponent, isStandalone: true, selector: "simpo-my-statement", ngImport: i0, template: "<p>my-statement works!</p>\r\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: MyStatementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-my-statement', standalone: true, imports: [], template: "<p>my-statement works!</p>\r\n" }]
+        }] });
+
+class NeedHelpComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: NeedHelpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: NeedHelpComponent, isStandalone: true, selector: "simpo-need-help", ngImport: i0, template: "<p>need-help works!</p>\r\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: NeedHelpComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-need-help', standalone: true, imports: [], template: "<p>need-help works!</p>\r\n" }]
+        }] });
+
+class ProfileSectionComponent {
+    constructor() {
+        this.selectedPanel = "PORTFOLIO";
+        this.sidePanelTabs = [
+            { value: "PORTFOLIO", viewValue: "My Portfolio" },
+            { value: "PROPERTIES", viewValue: "My Properties" },
+            { value: "ORDERS", viewValue: "My Orders" },
+            { value: "DOCUMENTS", viewValue: "My Documents" },
+            { value: "STATEMENT", viewValue: "My Statements" },
+            { value: "KYC", viewValue: "KYC" },
+            { value: "HELP", viewValue: "Need Help" },
+        ];
+    }
+    ngOnInit() {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProfileSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProfileSectionComponent, isStandalone: true, selector: "simpo-profile-section", inputs: { data: "data" }, ngImport: i0, template: "<section class=\"main-container d-flex justify-content-center\">\r\n    <div class=\"side-panel\">\r\n        <div class=\"details\">\r\n            <div class=\"left-right d-flex align-items-center gap-10\">\r\n                <div class=\"logo left w-15\">AP</div><div class=\"right name w-85\">Akhil Palukuri</div>\r\n            </div>\r\n            <div class=\"left-right d-flex align-items-center gap-10\">\r\n                <div class=\"left w-15\"><mat-icon class=\"d-flex align-items-center justify-content-center f-18\"> phone</mat-icon>\r\n                </div><div class=\"right w-80\">7207810097</div>\r\n            </div>\r\n            <div class=\"left-right d-flex align-items-center gap-10\">\r\n                <div class=\"left w-15\"><mat-icon class=\" d-flex align-items-center justify-content-center f-18\"> email</mat-icon>\r\n                </div><div class=\"right w-80\">palukuriakhil1&#64;gmail.com</div>\r\n            </div>\r\n        </div>\r\n        <div class=\"tab-section\">\r\n            <div class=\"tabs cursor-pointer\" *ngFor=\"let ele of sidePanelTabs\" (click)=\"selectedPanel = ele.value\" [class.activeTab]=\"selectedPanel == ele.value\">\r\n              {{ele.viewValue}}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"display-section\">\r\n      <ng-container *ngIf=\"selectedPanel == 'KYC'\">\r\n        <simpo-kyc-details></simpo-kyc-details>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"selectedPanel == 'PORTFOLIO'\">\r\n        <simpo-portfolio></simpo-portfolio>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"selectedPanel == 'PROPERTIES'\">\r\n        <simpo-properties></simpo-properties>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"selectedPanel == 'ORDERS'\">\r\n        <simpo-my-orders></simpo-my-orders>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"selectedPanel == 'DOCUMENTS'\">\r\n        <simpo-my-documents></simpo-my-documents>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"selectedPanel == 'STATEMENT'\">\r\n        <simpo-my-statement></simpo-my-statement>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"selectedPanel == 'HELP'\">\r\n        <simpo-need-help></simpo-need-help>\r\n      </ng-container>\r\n    </div>\r\n</section>\r\n", styles: ["*{font-family:DM Sans}mat-icon{font-family:Material Icons!important}.main-container{height:85vh;width:100%;padding:10px 0;gap:15px;background:#f1f6ff}.side-panel{width:18%;background:#fff;border:2px solid rgba(241,246,255,1);border-radius:10px}.display-section{width:60%}.w-15{width:15%}.w-85{width:85%}.cursor-pointer{cursor:pointer}.details{background:#19a6c6;border-radius:10px;padding:10px;margin:15px}.left-right{gap:10px;margin-bottom:10px}.logo{background:#e6f0ff;border-radius:50%;font-size:14px;text-align:center;font-weight:600;line-height:24px;padding:3px;color:#405071!important}.name{font-size:14px;font-weight:600;line-height:24px;color:#fff!important}.f-18{font-size:18px}.gap-10{gap:10px}.left{color:#fffc}.right{font-weight:500;font-size:14px;line-height:24px;color:#fffc}.tab-section{margin-top:15px}.tabs{margin-bottom:25px;font-weight:500;font-size:16px;line-height:24px;color:#01161e;margin-left:8px}.activeTab{border-left:8px solid rgba(248,169,56,1);font-weight:700!important;color:#219ebc;margin-right:15px;background:#f1f3f7;padding:10px;border-radius:0 6px 6px 0;margin-left:unset}\n"], dependencies: [{ kind: "component", type: PortfolioComponent, selector: "simpo-portfolio" }, { kind: "component", type: PropertiesComponent, selector: "simpo-properties" }, { kind: "component", type: MyDocumentsComponent, selector: "simpo-my-documents" }, { kind: "component", type: MyOrdersComponent, selector: "simpo-my-orders" }, { kind: "component", type: MyStatementComponent, selector: "simpo-my-statement" }, { kind: "component", type: NeedHelpComponent, selector: "simpo-need-help" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KycDetailsComponent, selector: "simpo-kyc-details" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProfileSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-profile-section', standalone: true, imports: [PortfolioComponent, PropertiesComponent, MyDocumentsComponent, MyOrdersComponent, MyStatementComponent, NeedHelpComponent, MatIcon, CommonModule,
+                        KycDetailsComponent
+                    ], template: "<section class=\"main-container d-flex justify-content-center\">\r\n    <div class=\"side-panel\">\r\n        <div class=\"details\">\r\n            <div class=\"left-right d-flex align-items-center gap-10\">\r\n                <div class=\"logo left w-15\">AP</div><div class=\"right name w-85\">Akhil Palukuri</div>\r\n            </div>\r\n            <div class=\"left-right d-flex align-items-center gap-10\">\r\n                <div class=\"left w-15\"><mat-icon class=\"d-flex align-items-center justify-content-center f-18\"> phone</mat-icon>\r\n                </div><div class=\"right w-80\">7207810097</div>\r\n            </div>\r\n            <div class=\"left-right d-flex align-items-center gap-10\">\r\n                <div class=\"left w-15\"><mat-icon class=\" d-flex align-items-center justify-content-center f-18\"> email</mat-icon>\r\n                </div><div class=\"right w-80\">palukuriakhil1&#64;gmail.com</div>\r\n            </div>\r\n        </div>\r\n        <div class=\"tab-section\">\r\n            <div class=\"tabs cursor-pointer\" *ngFor=\"let ele of sidePanelTabs\" (click)=\"selectedPanel = ele.value\" [class.activeTab]=\"selectedPanel == ele.value\">\r\n              {{ele.viewValue}}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"display-section\">\r\n      <ng-container *ngIf=\"selectedPanel == 'KYC'\">\r\n        <simpo-kyc-details></simpo-kyc-details>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"selectedPanel == 'PORTFOLIO'\">\r\n        <simpo-portfolio></simpo-portfolio>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"selectedPanel == 'PROPERTIES'\">\r\n        <simpo-properties></simpo-properties>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"selectedPanel == 'ORDERS'\">\r\n        <simpo-my-orders></simpo-my-orders>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"selectedPanel == 'DOCUMENTS'\">\r\n        <simpo-my-documents></simpo-my-documents>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"selectedPanel == 'STATEMENT'\">\r\n        <simpo-my-statement></simpo-my-statement>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"selectedPanel == 'HELP'\">\r\n        <simpo-need-help></simpo-need-help>\r\n      </ng-container>\r\n    </div>\r\n</section>\r\n", styles: ["*{font-family:DM Sans}mat-icon{font-family:Material Icons!important}.main-container{height:85vh;width:100%;padding:10px 0;gap:15px;background:#f1f6ff}.side-panel{width:18%;background:#fff;border:2px solid rgba(241,246,255,1);border-radius:10px}.display-section{width:60%}.w-15{width:15%}.w-85{width:85%}.cursor-pointer{cursor:pointer}.details{background:#19a6c6;border-radius:10px;padding:10px;margin:15px}.left-right{gap:10px;margin-bottom:10px}.logo{background:#e6f0ff;border-radius:50%;font-size:14px;text-align:center;font-weight:600;line-height:24px;padding:3px;color:#405071!important}.name{font-size:14px;font-weight:600;line-height:24px;color:#fff!important}.f-18{font-size:18px}.gap-10{gap:10px}.left{color:#fffc}.right{font-weight:500;font-size:14px;line-height:24px;color:#fffc}.tab-section{margin-top:15px}.tabs{margin-bottom:25px;font-weight:500;font-size:16px;line-height:24px;color:#01161e;margin-left:8px}.activeTab{border-left:8px solid rgba(248,169,56,1);font-weight:700!important;color:#219ebc;margin-right:15px;background:#f1f3f7;padding:10px;border-radius:0 6px 6px 0;margin-left:unset}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{
+                type: Input
+            }] } });
+
 class SimpoWrapComntainer {
     constructor(eventService, el) {
         this.eventService = eventService;
@@ -13482,5 +13592,5 @@ class Product {
  * Generated bundle index. Do not edit.
  */
 
-export { AddNewSectionComponent, AlignContent, AnimationDirective, AppointmentFormComponent, AuthenticateUserComponent, AuthenticationRequiredComponent, BANNERALIGNMENT, BANNERHALIGN, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BorderDirective, ButtonDirectiveDirective, CarouselBannerComponent, Cart, CartComponent, Category, CategoryProductComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, CustomerReviewComponent, DeviderType, EndUserService, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedCollectionComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterSectionComponent, FooterTypes, HALIGN, HEADER_STYLING, HeaderButtonStyle, HeaderTextComponent, HoverDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LocationSectionComponent, LogoGalleryComponent, LogoShowcaseComponent, MapType, NavbarSectionComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCardTheme, ProductCategoryListComponent, ProductDescComponent, ProductListComponent, PropertyComponentComponent, PropertyDetailComponent, PropertyListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, RegistrationFormComponent, RemoveCarouselDirective, SPACING$1 as SPACING, SPACINGALIGN, SanitizeHtmlPipe, ServiceSectionComponent, SignupSigninComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, SpacingAroundDirective, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TestimonialVideoComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, UserProfileComponent, UspVideoSectionComponent, VALIGN, VerifyComponent, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, cartType, contentAlignment, fitContent, fitScreen, fontSize, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective, svgData };
+export { AddNewSectionComponent, AlignContent, AnimationDirective, AppointmentFormComponent, AuthenticateUserComponent, AuthenticationRequiredComponent, BANNERALIGNMENT, BANNERHALIGN, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BorderDirective, ButtonDirectiveDirective, CarouselBannerComponent, Cart, CartComponent, Category, CategoryProductComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, CustomerReviewComponent, DeviderType, EndUserService, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedCollectionComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterSectionComponent, FooterTypes, HALIGN, HEADER_STYLING, HeaderButtonStyle, HeaderTextComponent, HoverDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LocationSectionComponent, LogoGalleryComponent, LogoShowcaseComponent, MapType, NavbarSectionComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCardTheme, ProductCategoryListComponent, ProductDescComponent, ProductListComponent, ProfileSectionComponent, PropertyComponentComponent, PropertyDetailComponent, PropertyListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, RegistrationFormComponent, RemoveCarouselDirective, SPACING$1 as SPACING, SPACINGALIGN, SanitizeHtmlPipe, ServiceSectionComponent, SignupSigninComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, SpacingAroundDirective, StorageKeys, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TestimonialVideoComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, UserProfileComponent, UspVideoSectionComponent, VALIGN, VerifyComponent, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, cartType, contentAlignment, fitContent, fitScreen, fontSize, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective, svgData };
 //# sourceMappingURL=simpo-component-library.mjs.map