simpo-component-library 3.6.834 → 3.6.835
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/ecommerce/sections/authentication-required/authentication-required.component.mjs +12 -4
- package/esm2022/lib/ecommerce/sections/authentication-required/authentication-required.model.mjs +1 -1
- package/esm2022/lib/sections/header-section/header-section.component.mjs +42 -3
- package/fesm2022/simpo-component-library.mjs +48 -5
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/ecommerce/sections/authentication-required/authentication-required.model.d.ts +10 -1
- package/lib/ecommerce/sections/product-desc/product-desc.component.d.ts +1 -1
- package/lib/ecommerce/sections/schemes/schemes.component.d.ts +1 -1
- package/lib/sections/banner-carousel/banner-carousel.component.d.ts +1 -1
- package/lib/sections/header-section/header-section.component.d.ts +2 -0
- package/lib/sections/pricing-section/pricing-section.component.d.ts +1 -1
- package/package.json +1 -1
- package/simpo-component-library-3.6.835.tgz +0 -0
- package/simpo-component-library-3.6.834.tgz +0 -0
|
@@ -10784,7 +10784,7 @@ class AuthenticationRequiredComponent extends BaseSection {
|
|
|
10784
10784
|
});
|
|
10785
10785
|
}
|
|
10786
10786
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthenticationRequiredComponent, deps: [{ token: RestService }, { token: i2$2.Router }, { token: i6.MessageService }, { token: StorageServiceService }, { token: i1$1.MatDialog }, { token: i2$2.ActivatedRoute }, { token: i0.ElementRef }, { token: i1$1.MatDialogRef, optional: true }, { token: i8$3.MatBottomSheetRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10787
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuthenticationRequiredComponent, isStandalone: true, selector: "simpo-authentication-required", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], viewQueries: [{ propertyName: "inputs", predicate: ["otpInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section [id]=\"data?.id\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"area w-100\">\r\n <ul class=\"circles\" [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\">\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n </ul>\r\n </div>\r\n\r\n <!-- ===== SCREEN 1: PHONE NUMBER ===== -->\r\n <div *ngIf=\"authScreen === 'PHONE'\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoCorner]=\"styles?.corners\">\r\n\r\n <div class=\"d-flex text-center flex-column align-items-center justify-content-center mb-2 login-main-section\"\r\n style=\"padding: 1.5rem 2rem 0.5rem;\">\r\n <p class=\"mb-0 clr-black login-text\">LOGIN OR SIGNUP</p>\r\n </div>\r\n <hr class=\"mx-0 my-0\" style=\"border-color: #e8e8e8;\">\r\n\r\n <div class=\"login-input-section mt-4\">\r\n <p class=\"text-center mb-3\" style=\"font-size:14px; color:#555;\">Unlock coupons, profile and much more</p>\r\n\r\n <div class=\"input-box\">\r\n <label for=\"auth-email-phone-input\">Email / Mobile Number</label>\r\n <input id=\"auth-email-phone-input\" type=\"text\" class=\"clr-black\" [(ngModel)]=\"emailOrNumber\"\r\n placeholder=\"janedoe@gmail.com / 9876543210\" (ngModelChange)=\"onEmailOrNumberChange()\"\r\n [style.borderColor]=\"!emailOrNumberCheck ? '' : 'red'\" (keyup.enter)=\"sendOTP()\" />\r\n <span class=\"f-12\" *ngIf=\"emailOrNumberCheck\" [style.color]=\"'red'\">Please enter a valid email or 10-digit\r\n mobile number*</span>\r\n </div>\r\n\r\n <button class=\"send-btn gap-2 w-100 py-2\" [buttonData]=\"data?.action?.buttons[2]?.content\"\r\n [buttonStyle]=\"data?.action?.buttons[2]?.styles\" simpoButtonDirective\r\n [id]=\"data?.id+(data?.action?.buttons[2]?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"data?.action?.buttons[2]?.id ?? ''\" (click)=\"sendOTP()\"\r\n [disabled]=\"buttonLoading\">\r\n <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"\r\n *ngIf=\"buttonLoading\"></span>\r\n {{ data?.action?.buttons[2]?.content?.label?.length > 0 ? data?.action?.buttons[2]?.content?.label : 'SEND\r\n OTP' }}\r\n </button>\r\n\r\n <div class=\"mt-3 text-center\">\r\n <span class=\"cursor-pointer clr-black fs-13\" style=\"font-weight:700; text-decoration:underline;\"\r\n (click)=\"authScreen = 'PASSWORD'\">\r\n Login with Password\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- ===== SCREEN 2: OTP VERIFICATION ===== -->\r\n <div *ngIf=\"authScreen === 'OTP'\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\" [simpoCorner]=\"styles?.corners\">\r\n <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoCorner]=\"styles?.corners\">\r\n\r\n <div class=\"d-flex text-center flex-column align-items-center justify-content-center mb-2 login-main-section\"\r\n style=\"padding: 1.5rem 2rem 0.5rem;\">\r\n <p class=\"mb-0 clr-black login-text\">LOGIN OR SIGNUP</p>\r\n </div>\r\n <hr class=\"mx-0 my-0\" style=\"border-color: #e8e8e8;\">\r\n\r\n <div class=\"login-input-section mt-4\">\r\n <p class=\"text-center mb-3 clr-black\" style=\"font-size:14px;\">\r\n Enter 6-digit OTP sent to {{emailOrNumber}}\r\n </p>\r\n\r\n <div class=\"d-flex align-items-center justify-content-between otp_input gap-1 mb-3\">\r\n <div class=\"d-flex gap-2 w-100 justify-content-between\">\r\n <input *ngFor=\"let control of otpControls.controls; let i = index\" #otpInput\r\n class=\"form-control text-center otp-box clr-black\" maxlength=\"1\" inputmode=\"numeric\"\r\n [formControl]=\"control\" (input)=\"onInput(i)\" (keydown)=\"onKeyDown($event, i)\" />\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-center mb-3\">\r\n <span *ngIf=\"resendCountdown > 0\" class=\"clr-black fs-13\" style=\"font-weight:700; letter-spacing:0.04em;\">\r\n RESEND IN {{formatCountdown(resendCountdown)}}\r\n </span>\r\n <span *ngIf=\"resendCountdown === 0\" class=\"cursor-pointer clr-black fs-13\"\r\n style=\"font-weight:700; letter-spacing:0.04em; text-decoration:underline;\" (click)=\"resendOTPNew()\">\r\n RESEND OTP\r\n </span>\r\n </div>\r\n\r\n <button class=\"send-btn gap-2 w-100 py-2\" [buttonData]=\"data?.action?.buttons[1]?.content\"\r\n [buttonStyle]=\"data?.action?.buttons[1]?.styles\" simpoButtonDirective\r\n [id]=\"data?.id+(data?.action?.buttons[1]?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"data?.action?.buttons[1]?.id ?? ''\" (click)=\"verifyOTPNew()\"\r\n [disabled]=\"buttonLoading\">\r\n <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"\r\n *ngIf=\"buttonLoading\"></span>\r\n {{ data?.action?.buttons[1]?.content?.label?.length > 0 ? data?.action?.buttons[1]?.content?.label :\r\n 'VERIFY OTP' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- ===== SCREEN 3: REGISTER ===== -->\r\n <div *ngIf=\"authScreen === 'REGISTER'\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoCorner]=\"styles?.corners\">\r\n\r\n <div class=\"d-flex flex-column align-items-center justify-content-center mb-3\"\r\n style=\"padding: 1.5rem 2rem 0.5rem;\">\r\n <p class=\"mb-0 fs-20-fw-600 clr-black\">REGISTER</p>\r\n </div>\r\n\r\n <div class=\"d-flex w-100 signup-input-container flex-column\">\r\n <div class=\"input-box\">\r\n <label for=\"auth-fullname-input\">Full Name</label>\r\n <input id=\"auth-fullname-input\" type=\"text\" class=\"clr-black\" [(ngModel)]=\"userName\"\r\n placeholder=\"Jane Doe\">\r\n </div>\r\n\r\n <div class=\"input-box\">\r\n <label for=\"auth-reg-phone-input\">Phone Number</label>\r\n <div class=\"d-flex align-items-center w-100 password-input-container\">\r\n <span class=\"clr-black\"\r\n style=\"font-size:14px; font-weight:500; padding: 0 8px 0 12px; white-space:nowrap;\">+91 |</span>\r\n <input id=\"auth-reg-phone-input\" type=\"tel\" class=\"b-none clr-black w-90\" [(ngModel)]=\"phoneNumber\"\r\n placeholder=\"9876543210\" maxlength=\"10\" inputmode=\"numeric\" style=\"outline:none; font-size:14px;\" />\r\n </div>\r\n </div>\r\n\r\n <div class=\"input-box\">\r\n <label for=\"auth-email-input\">Email</label>\r\n <input id=\"auth-email-input\" type=\"email\" class=\"clr-black\" [(ngModel)]=\"email\"\r\n placeholder=\"janedoe@gmail.com\" (ngModelChange)=\"onEmailChange()\"\r\n [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid email*</span>\r\n </div>\r\n\r\n <div class=\"input-box\">\r\n <label for=\"auth-reg-password-input\">Password</label>\r\n <div class=\"password-input-container d-flex align-items-center w-100\" style=\"padding-right: 12px;\">\r\n <input id=\"auth-reg-password-input\" [type]=\"passwordHidden ? 'password' : 'text'\"\r\n class=\"b-none clr-black w-100\" [(ngModel)]=\"password\" placeholder=\"Password\">\r\n <mat-icon style=\"cursor: pointer; color: black; font-size: 20px; text-align: center\"\r\n (click)=\"passwordHidden = !passwordHidden\">\r\n {{passwordHidden ? 'visibility' : 'visibility_off'}}\r\n </mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"input-box\">\r\n <label for=\"auth-reg-conf-password-input\">Confirm Password</label>\r\n <div class=\"password-input-container d-flex align-items-center w-100\" style=\"padding-right: 12px;\">\r\n <input id=\"auth-reg-conf-password-input\" [type]=\"passwordHidden ? 'password' : 'text'\"\r\n class=\"b-none clr-black w-100\" [(ngModel)]=\"confPassword\" placeholder=\"Confirm Password\">\r\n </div>\r\n </div>\r\n\r\n <button class=\"send-btn gap-2 w-100 py-2\" [buttonData]=\"data?.action?.buttons[0]?.content\"\r\n [buttonStyle]=\"data?.action?.buttons[0]?.styles\" simpoButtonDirective\r\n [id]=\"data?.id+(data?.action?.buttons[0]?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"data?.action?.buttons[0]?.id ?? ''\" (click)=\"registerUser()\"\r\n [disabled]=\"buttonLoading\">\r\n <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"\r\n *ngIf=\"buttonLoading\"></span>\r\n {{ data?.action?.buttons[0]?.content?.label?.length > 0 ? data?.action?.buttons[0]?.content?.label :\r\n 'CONTINUE' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- ===== SCREEN 4: LOGIN WITH PASSWORD ===== -->\r\n <div *ngIf=\"authScreen === 'PASSWORD'\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoCorner]=\"styles?.corners\">\r\n\r\n <div class=\"d-flex flex-column align-items-center justify-content-center mb-3\"\r\n style=\"padding: 1.5rem 2rem 0.5rem;\">\r\n <p class=\"mb-0 fs-20-fw-600 clr-black\">LOGIN</p>\r\n </div>\r\n\r\n <div class=\"d-flex w-100 signup-input-container flex-column\">\r\n\r\n <div class=\"input-box\">\r\n <label for=\"auth-pwd-email-input\">Email / Mobile Number</label>\r\n <input id=\"auth-pwd-email-input\" type=\"text\" class=\"clr-black\" [(ngModel)]=\"emailOrNumber\"\r\n placeholder=\"janedoe@gmail.com / 9876543210\" (ngModelChange)=\"onEmailOrNumberChange()\"\r\n [style.borderColor]=\"!emailOrNumberCheck ? '' : 'red'\">\r\n <span class=\"f-12\" *ngIf=\"emailOrNumberCheck\" [style.color]=\"'red'\">Please enter valid email or 10-digit\r\n mobile number*</span>\r\n </div>\r\n\r\n <div class=\"input-box\">\r\n <label for=\"auth-login-password-input\">Password</label>\r\n <div class=\"password-input-container d-flex align-items-center w-100\" style=\"padding-right: 12px;\">\r\n <input id=\"auth-login-password-input\" [type]=\"passwordHidden ? 'password' : 'text'\"\r\n class=\"b-none clr-black w-100\" [(ngModel)]=\"password\" placeholder=\"Password\"\r\n (keyup.enter)=\"loginWithPassword()\">\r\n <mat-icon style=\"cursor: pointer; color: black; font-size: 20px; text-align: center\"\r\n (click)=\"passwordHidden = !passwordHidden\">\r\n {{passwordHidden ? 'visibility' : 'visibility_off'}}\r\n </mat-icon>\r\n </div>\r\n </div>\r\n\r\n <button class=\"send-btn gap-2 w-100 py-2\" [buttonData]=\"data?.action?.buttons[0]?.content\"\r\n [buttonStyle]=\"data?.action?.buttons[0]?.styles\" simpoButtonDirective\r\n [id]=\"data?.id+(data?.action?.buttons[0]?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"data?.action?.buttons[0]?.id ?? ''\"\r\n (click)=\"loginWithPassword()\" [disabled]=\"buttonLoading\">\r\n <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"\r\n *ngIf=\"buttonLoading\"></span>\r\n {{ data?.action?.buttons[0]?.content?.label?.length > 0 ? data?.action?.buttons[0]?.content?.label :\r\n 'LOGIN' }}\r\n </button>\r\n\r\n <div class=\"mt-3 text-center\">\r\n <span class=\"cursor-pointer clr-black fs-13\" style=\"font-weight:700; text-decoration:underline;\"\r\n (click)=\"authScreen = 'PHONE'\">\r\n Login with OTP\r\n </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\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\r\n</section>", styles: [".total-container{position:relative;height:auto;perspective:1200px;overflow:hidden}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.fa{font-family:\"Font Awesome 6 Free\"}.otp_input span{font-size:11px}.otp_input span:hover{text-decoration:underline}label,.eye{color:#000}.sign-up span:hover{text-decoration:underline}.eye{padding:6px;font-size:16px}.w-90{width:90%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-panel{width:450px;margin:2rem auto;background:#ffffff26;box-shadow:0 25px 50px -12px #00000040;backface-visibility:hidden}.login-input-section{padding:0 2rem}.panel{background:#fffffff2;padding:0 0 2rem;position:relative;transition:all .4s ease;margin:unset!important}.input-box{display:flex;flex-direction:column;margin-bottom:.75rem;position:relative;transform-style:preserve-3d;gap:5px}.input-box label{transform:translateZ(20px);margin-left:5px}.input-box input{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;border:1px solid rgba(0,0,0,.08);padding:.75rem;border-radius:12px;appearance:none;outline:none}.button{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;overflow:hidden;border:none;padding:.5rem 2rem;font-weight:600}.button:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .7s ease}.button:hover{transform:translateY(-3px) translateZ(35px);box-shadow:0 15px 30px -5px var(--accent-shadow, rgba(102, 126, 234, .5))}.button:hover:before{left:100%}.button:active{transform:translateY(-1px) translateZ(25px)}.circles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:radial-gradient(circle at 30% 30%,rgba(var(--accent-rgb, 102, 126, 234),.22),rgba(var(--accent-rgb, 102, 126, 234),.06));box-shadow:0 0 20px 4px rgba(var(--accent-rgb, 102, 126, 234),.15),inset 0 0 12px #ffffff1f;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:50%;border:1px solid rgba(var(--accent-rgb, 102, 126, 234),.18);animation:floatUp 25s linear infinite,pulse 4s ease-in-out infinite alternate;bottom:-150px}.circles li:nth-child(1){left:10%;width:90px;height:90px;animation-delay:0s;animation-duration:22s}.circles li:nth-child(2){left:25%;width:30px;height:30px;animation-delay:3s;animation-duration:14s}.circles li:nth-child(3){left:45%;width:60px;height:60px;animation-delay:6s;animation-duration:18s}.circles li:nth-child(4){left:65%;width:110px;height:110px;animation-delay:1s;animation-duration:28s}.circles li:nth-child(5){left:80%;width:25px;height:25px;animation-delay:4s;animation-duration:12s}.circles li:nth-child(6){left:55%;width:70px;height:70px;animation-delay:9s;animation-duration:20s}.circles li:nth-child(7){left:35%;width:140px;height:140px;animation-delay:2s;animation-duration:32s}.circles li:nth-child(8){left:70%;width:40px;height:40px;animation-delay:12s;animation-duration:40s}.circles li:nth-child(9){left:5%;width:20px;height:20px;animation-delay:5s;animation-duration:30s}.circles li:nth-child(10){left:90%;width:55px;height:55px;animation-delay:7s;animation-duration:24s}@keyframes floatUp{0%{transform:translateY(0) rotate(0);opacity:.8}20%{opacity:1}80%{opacity:.7}to{transform:translateY(-110vh) rotate(540deg);opacity:0}}@keyframes pulse{0%{box-shadow:0 0 12px 2px rgba(var(--accent-rgb, 102, 126, 234),.1)}to{box-shadow:0 0 32px 10px rgba(var(--accent-rgb, 102, 126, 234),.28)}}.f-12{font-size:12px}@media screen and (max-width : 475px){.w-90{width:87%}}.no-arrows::-webkit-outer-spin-button,.no-arrows::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.clr-black{color:#000!important}.signup-input-container{padding:0 2rem}.fs-30-fw-600{font-size:30px;font-weight:600}.fs-20-fw-600{font-size:20px;font-weight:600}.fs-14-col-grey{font-size:14px;color:#979797}.fs-13{font-size:13px}.fs-14{font-size:14px}.password-input-container{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;border:1px solid rgba(0,0,0,.08);border-radius:12px;appearance:none;outline:none}.b-none{border:none!important}.password-text-container{padding-left:.5rem;font-size:13px;margin-bottom:.3rem;color:#000}.password-text-container img{width:15px}.password-text-container .password-config{font-size:13px;color:#686f78}.tabs{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border-radius:18px 15px 0 0;margin-bottom:2rem}.login-main-section .login-text{font-size:20px;font-weight:600}.tab{padding:1rem;font-size:clamp(13px,3.2vw,15px)!important;font-weight:600;text-align:center;cursor:pointer;background:#d9d9d9;border:none;letter-spacing:.01em;transition:background .2s,color .2s;-webkit-user-select:none;user-select:none;min-height:48px}.tab:hover{background:#cacaca}.tab.active{background:#1a1a1a;color:#fff}.otp-box{width:55px;height:55px;font-size:20px}h1{font-size:clamp(18px,4.5vw,22px);font-weight:600;color:#1a1a1a;text-align:center;margin-bottom:clamp(20px,5vw,28px);letter-spacing:-.01em}label{font-size:clamp(11px,2.8vw,13px);font-weight:500;color:#333}input[type=email],input[type=password],input[type=text]{width:100%;padding:clamp(10px,2.5vw,12px) clamp(10px,2.5vw,14px);border:1.5px solid #e0e0e0;border-radius:clamp(8px,2vw,12px);font-size:clamp(13px,3.2vw,14px);color:#1a1a1a;background:#fff;outline:none;transition:border-color .2s,box-shadow .2s;-webkit-text-size-adjust:100%}@media (max-width: 400px){input[type=email],input[type=password],input[type=text]{font-size:16px}}input[type=email]:focus,input[type=password]:focus,input[type=text]:focus{border-color:#888;box-shadow:0 0 0 3px #0000000f}input::placeholder{color:transparent}.forgot{display:block;text-align:right;font-size:clamp(11px,2.8vw,13px);font-weight:500;color:#1a1a1a;text-decoration:underline;text-underline-offset:2px;margin-top:clamp(6px,1.5vw,8px);cursor:pointer;touch-action:manipulation}.forgot:hover{color:#555}.submit-btn{display:block;width:100%;padding:clamp(13px,3.2vw,15px);margin-top:clamp(16px,4vw,24px);background:#c0bfbf;color:#fff;border:none;border-radius:50px;font-size:clamp(14px,3.5vw,15px);font-weight:600;cursor:pointer;letter-spacing:.01em;transition:background .2s;touch-action:manipulation;min-height:48px}.submit-btn:hover{background:#999}.submit-btn:active{background:#888}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8$4.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
|
|
10787
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuthenticationRequiredComponent, isStandalone: true, selector: "simpo-authentication-required", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], viewQueries: [{ propertyName: "inputs", predicate: ["otpInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section [id]=\"data?.id\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div class=\"login_card\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"area w-100\">\r\n <ul class=\"circles\" [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\">\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n </ul>\r\n </div>\r\n\r\n <!-- ===== AUTH CARD ===== -->\r\n <div [id]=\"data?.id\" class=\"main-panel d-flex gap-2\" [class.single-pane]=\"!data?.content?.image?.showImage\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoCorner]=\"styles?.corners\">\r\n <div class=\"auth-card\" [class.single-pane]=\"!data?.content?.image?.showImage\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\">\r\n <div class=\"auth-image\" *ngIf=\"data?.content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"data?.content?.image?.url\" [attr.alt]=\"data?.content?.image?.altText || ''\"\r\n class=\"auth-hero-image\" [simpoImageDirective]=\"styles?.image\" [appImageEditor]=\"edit ?? false\"\r\n [imageData]=\"data?.content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(data?.content?.image?.id || '')\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"data?.content?.image?.position\">\r\n </div>\r\n <div class=\"auth-form\">\r\n <ng-container [ngSwitch]=\"authScreen\">\r\n <ng-container *ngSwitchCase=\"'PHONE'\">\r\n <div\r\n class=\"d-flex text-center flex-column align-items-center justify-content-center mb-2 login-main-section\"\r\n style=\"padding: 1.5rem 2rem 0.5rem;\">\r\n <p class=\"mb-0 clr-black login-text\">LOGIN OR SIGNUP</p>\r\n </div>\r\n <hr class=\"mx-0 my-0\" style=\"border-color: #e8e8e8;\">\r\n\r\n <div class=\"login-input-section mt-4\">\r\n <p class=\"text-center mb-3\" style=\"font-size:14px; color:#555;\">Unlock coupons, profile and much more\r\n </p>\r\n\r\n <div class=\"input-box\">\r\n <label for=\"auth-email-phone-input\">Email / Mobile Number</label>\r\n <input id=\"auth-email-phone-input\" type=\"text\" class=\"clr-black\" [(ngModel)]=\"emailOrNumber\"\r\n placeholder=\"janedoe@gmail.com / 9876543210\" (ngModelChange)=\"onEmailOrNumberChange()\"\r\n [style.borderColor]=\"!emailOrNumberCheck ? '' : 'red'\" (keyup.enter)=\"sendOTP()\" />\r\n <span class=\"f-12\" *ngIf=\"emailOrNumberCheck\" [style.color]=\"'red'\">Please enter a valid email or\r\n 10-digit\r\n mobile number*</span>\r\n </div>\r\n\r\n <button class=\"send-btn gap-2 w-100 py-2\" [buttonData]=\"data?.action?.buttons[2]?.content\"\r\n [buttonStyle]=\"data?.action?.buttons[2]?.styles\" simpoButtonDirective\r\n [id]=\"data?.id+(data?.action?.buttons[2]?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"data?.action?.buttons[2]?.id ?? ''\"\r\n (click)=\"sendOTP()\" [disabled]=\"buttonLoading\">\r\n <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"\r\n *ngIf=\"buttonLoading\"></span>\r\n {{ data?.action?.buttons[2]?.content?.label?.length > 0 ? data?.action?.buttons[2]?.content?.label\r\n :\r\n 'SEND\r\n OTP' }}\r\n </button>\r\n\r\n <div class=\"mt-3 text-center\">\r\n <span class=\"cursor-pointer clr-black fs-13\" style=\"font-weight:700; text-decoration:underline;\"\r\n (click)=\"authScreen = 'PASSWORD'\">\r\n Login with Password\r\n </span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'OTP'\">\r\n <div\r\n class=\"d-flex text-center flex-column align-items-center justify-content-center mb-2 login-main-section\"\r\n style=\"padding: 1.5rem 2rem 0.5rem;\">\r\n <p class=\"mb-0 clr-black login-text\">LOGIN OR SIGNUP</p>\r\n </div>\r\n <hr class=\"mx-0 my-0\" style=\"border-color: #e8e8e8;\">\r\n\r\n <div class=\"login-input-section mt-4\">\r\n <p class=\"text-center mb-3 clr-black\" style=\"font-size:14px;\">\r\n Enter 6-digit OTP sent to {{emailOrNumber}}\r\n </p>\r\n\r\n <div class=\"d-flex align-items-center justify-content-between otp_input gap-1 mb-3\">\r\n <div class=\"d-flex gap-2 w-100 justify-content-between\">\r\n <input *ngFor=\"let control of otpControls.controls; let i = index\" #otpInput\r\n class=\"form-control text-center otp-box clr-black\" maxlength=\"1\" inputmode=\"numeric\"\r\n [formControl]=\"control\" (input)=\"onInput(i)\" (keydown)=\"onKeyDown($event, i)\" />\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-center mb-3\">\r\n <span *ngIf=\"resendCountdown > 0\" class=\"clr-black fs-13\"\r\n style=\"font-weight:700; letter-spacing:0.04em;\">\r\n RESEND IN {{formatCountdown(resendCountdown)}}\r\n </span>\r\n <span *ngIf=\"resendCountdown === 0\" class=\"cursor-pointer clr-black fs-13\"\r\n style=\"font-weight:700; letter-spacing:0.04em; text-decoration:underline;\"\r\n (click)=\"resendOTPNew()\">\r\n RESEND OTP\r\n </span>\r\n </div>\r\n\r\n <button class=\"send-btn gap-2 w-100 py-2\" [buttonData]=\"data?.action?.buttons[1]?.content\"\r\n [buttonStyle]=\"data?.action?.buttons[1]?.styles\" simpoButtonDirective\r\n [id]=\"data?.id+(data?.action?.buttons[1]?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"data?.action?.buttons[1]?.id ?? ''\"\r\n (click)=\"verifyOTPNew()\" [disabled]=\"buttonLoading\">\r\n <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"\r\n *ngIf=\"buttonLoading\"></span>\r\n {{ data?.action?.buttons[1]?.content?.label?.length > 0 ? data?.action?.buttons[1]?.content?.label\r\n :\r\n 'VERIFY OTP' }}\r\n </button>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'REGISTER'\">\r\n <div class=\"d-flex flex-column align-items-center justify-content-center mb-3\"\r\n style=\"padding: 1.5rem 2rem 0.5rem;\">\r\n <p class=\"mb-0 fs-20-fw-600 clr-black\">REGISTER</p>\r\n </div>\r\n\r\n <div class=\"d-flex w-100 signup-input-container flex-column\">\r\n <div class=\"input-box\">\r\n <label for=\"auth-fullname-input\">Full Name</label>\r\n <input id=\"auth-fullname-input\" type=\"text\" class=\"clr-black\" [(ngModel)]=\"userName\"\r\n placeholder=\"Jane Doe\">\r\n </div>\r\n\r\n <div class=\"input-box\">\r\n <label for=\"auth-reg-phone-input\">Phone Number</label>\r\n <div class=\"d-flex align-items-center w-100 password-input-container\">\r\n <span class=\"clr-black\"\r\n style=\"font-size:14px; font-weight:500; padding: 0 8px 0 12px; white-space:nowrap;\">+91 |</span>\r\n <input id=\"auth-reg-phone-input\" type=\"tel\" class=\"b-none clr-black w-90\"\r\n [(ngModel)]=\"phoneNumber\" placeholder=\"9876543210\" maxlength=\"10\" inputmode=\"numeric\"\r\n style=\"outline:none; font-size:14px;\" />\r\n </div>\r\n </div>\r\n\r\n <div class=\"input-box\">\r\n <label for=\"auth-email-input\">Email</label>\r\n <input id=\"auth-email-input\" type=\"email\" class=\"clr-black\" [(ngModel)]=\"email\"\r\n placeholder=\"janedoe@gmail.com\" (ngModelChange)=\"onEmailChange()\"\r\n [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid email*</span>\r\n </div>\r\n\r\n <div class=\"input-box\">\r\n <label for=\"auth-reg-password-input\">Password</label>\r\n <div class=\"password-input-container d-flex align-items-center w-100\" style=\"padding-right: 12px;\">\r\n <input id=\"auth-reg-password-input\" [type]=\"passwordHidden ? 'password' : 'text'\"\r\n class=\"b-none clr-black w-100\" [(ngModel)]=\"password\" placeholder=\"Password\">\r\n <mat-icon style=\"cursor: pointer; color: black; font-size: 20px; text-align: center\"\r\n (click)=\"passwordHidden = !passwordHidden\">\r\n {{passwordHidden ? 'visibility' : 'visibility_off'}}\r\n </mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"input-box\">\r\n <label for=\"auth-reg-conf-password-input\">Confirm Password</label>\r\n <div class=\"password-input-container d-flex align-items-center w-100\" style=\"padding-right: 12px;\">\r\n <input id=\"auth-reg-conf-password-input\" [type]=\"passwordHidden ? 'password' : 'text'\"\r\n class=\"b-none clr-black w-100\" [(ngModel)]=\"confPassword\" placeholder=\"Confirm Password\">\r\n </div>\r\n </div>\r\n\r\n <button class=\"send-btn gap-2 w-100 py-2\" [buttonData]=\"data?.action?.buttons[0]?.content\"\r\n [buttonStyle]=\"data?.action?.buttons[0]?.styles\" simpoButtonDirective\r\n [id]=\"data?.id+(data?.action?.buttons[0]?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"data?.action?.buttons[0]?.id ?? ''\"\r\n (click)=\"registerUser()\" [disabled]=\"buttonLoading\">\r\n <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"\r\n *ngIf=\"buttonLoading\"></span>\r\n {{ data?.action?.buttons[0]?.content?.label?.length > 0 ? data?.action?.buttons[0]?.content?.label\r\n :\r\n 'CONTINUE' }}\r\n </button>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'PASSWORD'\">\r\n <div class=\"d-flex flex-column align-items-center justify-content-center mb-3\"\r\n style=\"padding: 1.5rem 2rem 0.5rem;\">\r\n <p class=\"mb-0 fs-20-fw-600 clr-black\">LOGIN</p>\r\n </div>\r\n\r\n <div class=\"d-flex w-100 signup-input-container flex-column\">\r\n <div class=\"input-box\">\r\n <label for=\"auth-pwd-email-input\">Email / Mobile Number</label>\r\n <input id=\"auth-pwd-email-input\" type=\"text\" class=\"clr-black\" [(ngModel)]=\"emailOrNumber\"\r\n placeholder=\"janedoe@gmail.com / 9876543210\" (ngModelChange)=\"onEmailOrNumberChange()\"\r\n [style.borderColor]=\"!emailOrNumberCheck ? '' : 'red'\">\r\n <span class=\"f-12\" *ngIf=\"emailOrNumberCheck\" [style.color]=\"'red'\">Please enter valid email or\r\n 10-digit\r\n mobile number*</span>\r\n </div>\r\n\r\n <div class=\"input-box\">\r\n <label for=\"auth-login-password-input\">Password</label>\r\n <div class=\"password-input-container d-flex align-items-center w-100\" style=\"padding-right: 12px;\">\r\n <input id=\"auth-login-password-input\" [type]=\"passwordHidden ? 'password' : 'text'\"\r\n class=\"b-none clr-black w-100\" [(ngModel)]=\"password\" placeholder=\"Password\"\r\n (keyup.enter)=\"loginWithPassword()\">\r\n <mat-icon style=\"cursor: pointer; color: black; font-size: 20px; text-align: center\"\r\n (click)=\"passwordHidden = !passwordHidden\">\r\n {{passwordHidden ? 'visibility' : 'visibility_off'}}\r\n </mat-icon>\r\n </div>\r\n </div>\r\n\r\n <button class=\"send-btn gap-2 w-100 py-2\" [buttonData]=\"data?.action?.buttons[0]?.content\"\r\n [buttonStyle]=\"data?.action?.buttons[0]?.styles\" simpoButtonDirective\r\n [id]=\"data?.id+(data?.action?.buttons[0]?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"data?.action?.buttons[0]?.id ?? ''\"\r\n (click)=\"loginWithPassword()\" [disabled]=\"buttonLoading\">\r\n <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"\r\n *ngIf=\"buttonLoading\"></span>\r\n {{ data?.action?.buttons[0]?.content?.label?.length > 0 ? data?.action?.buttons[0]?.content?.label\r\n :\r\n 'LOGIN' }}\r\n </button>\r\n\r\n <div class=\"mt-3 text-center\">\r\n <span class=\"cursor-pointer clr-black fs-13\" style=\"font-weight:700; text-decoration:underline;\"\r\n (click)=\"authScreen = 'PHONE'\">\r\n Login with OTP\r\n </span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\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\r\n</section>", styles: [".total-container{position:relative;height:auto;perspective:1200px;overflow:hidden}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.fa{font-family:\"Font Awesome 6 Free\"}.otp_input span{font-size:11px}.otp_input span:hover{text-decoration:underline}label,.eye{color:#000}.sign-up span:hover{text-decoration:underline}.eye{padding:6px;font-size:16px}.w-90{width:90%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-panel{width:min(860px,92vw);margin:2rem auto;background:#ffffff26;box-shadow:0 25px 50px -12px #00000040;backface-visibility:hidden}.main-panel.single-pane{width:450px}.login-input-section{padding:0 2rem}.panel{background:#fffffff2;padding:0;position:relative;transition:all .4s ease;margin:unset!important;overflow:hidden}.auth-card{display:flex;align-items:stretch;min-height:420px}.auth-card.single-pane{min-height:unset}.auth-image{flex:0 0 48%;background:#f2f2f2}.auth-hero-image{width:100%;height:100%;display:block;object-fit:cover}.auth-form{flex:1;display:flex;flex-direction:column;justify-content:flex-start;padding-bottom:1.5rem}.input-box{display:flex;flex-direction:column;margin-bottom:.75rem;position:relative;transform-style:preserve-3d;gap:5px}.input-box label{transform:translateZ(20px);margin-left:5px}.input-box input{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;border:1px solid rgba(0,0,0,.08);padding:.75rem;border-radius:12px;appearance:none;outline:none}.button{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;overflow:hidden;border:none;padding:.5rem 2rem;font-weight:600}.button:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .7s ease}.button:hover{transform:translateY(-3px) translateZ(35px);box-shadow:0 15px 30px -5px var(--accent-shadow, rgba(102, 126, 234, .5))}.button:hover:before{left:100%}.button:active{transform:translateY(-1px) translateZ(25px)}.circles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:radial-gradient(circle at 30% 30%,rgba(var(--accent-rgb, 102, 126, 234),.22),rgba(var(--accent-rgb, 102, 126, 234),.06));box-shadow:0 0 20px 4px rgba(var(--accent-rgb, 102, 126, 234),.15),inset 0 0 12px #ffffff1f;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:50%;border:1px solid rgba(var(--accent-rgb, 102, 126, 234),.18);animation:floatUp 25s linear infinite,pulse 4s ease-in-out infinite alternate;bottom:-150px}.circles li:nth-child(1){left:10%;width:90px;height:90px;animation-delay:0s;animation-duration:22s}.circles li:nth-child(2){left:25%;width:30px;height:30px;animation-delay:3s;animation-duration:14s}.circles li:nth-child(3){left:45%;width:60px;height:60px;animation-delay:6s;animation-duration:18s}.circles li:nth-child(4){left:65%;width:110px;height:110px;animation-delay:1s;animation-duration:28s}.circles li:nth-child(5){left:80%;width:25px;height:25px;animation-delay:4s;animation-duration:12s}.circles li:nth-child(6){left:55%;width:70px;height:70px;animation-delay:9s;animation-duration:20s}.circles li:nth-child(7){left:35%;width:140px;height:140px;animation-delay:2s;animation-duration:32s}.circles li:nth-child(8){left:70%;width:40px;height:40px;animation-delay:12s;animation-duration:40s}.circles li:nth-child(9){left:5%;width:20px;height:20px;animation-delay:5s;animation-duration:30s}.circles li:nth-child(10){left:90%;width:55px;height:55px;animation-delay:7s;animation-duration:24s}@keyframes floatUp{0%{transform:translateY(0) rotate(0);opacity:.8}20%{opacity:1}80%{opacity:.7}to{transform:translateY(-110vh) rotate(540deg);opacity:0}}@keyframes pulse{0%{box-shadow:0 0 12px 2px rgba(var(--accent-rgb, 102, 126, 234),.1)}to{box-shadow:0 0 32px 10px rgba(var(--accent-rgb, 102, 126, 234),.28)}}.f-12{font-size:12px}@media screen and (max-width : 475px){.w-90{width:87%}.login_card{padding:10px}}@media screen and (max-width: 900px){.main-panel{width:min(760px,94vw)}}@media screen and (max-width: 768px){.main-panel,.main-panel.single-pane{width:100%;margin:1.25rem auto}.auth-card{flex-direction:column;min-height:unset}.auth-image{width:100%;min-height:220px}}.no-arrows::-webkit-outer-spin-button,.no-arrows::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.clr-black{color:#000!important}.signup-input-container{padding:0 2rem}.fs-30-fw-600{font-size:30px;font-weight:600}.fs-20-fw-600{font-size:20px;font-weight:600}.fs-14-col-grey{font-size:14px;color:#979797}.fs-13{font-size:13px}.fs-14{font-size:14px}.password-input-container{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;border:1px solid rgba(0,0,0,.08);border-radius:12px;appearance:none;outline:none}.b-none{border:none!important}.password-text-container{padding-left:.5rem;font-size:13px;margin-bottom:.3rem;color:#000}.password-text-container img{width:15px}.password-text-container .password-config{font-size:13px;color:#686f78}.tabs{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border-radius:18px 15px 0 0;margin-bottom:2rem}.login-main-section .login-text{font-size:20px;font-weight:600}.tab{padding:1rem;font-size:clamp(13px,3.2vw,15px)!important;font-weight:600;text-align:center;cursor:pointer;background:#d9d9d9;border:none;letter-spacing:.01em;transition:background .2s,color .2s;-webkit-user-select:none;user-select:none;min-height:48px}.tab:hover{background:#cacaca}.tab.active{background:#1a1a1a;color:#fff}.otp-box{width:55px;height:55px;font-size:20px}h1{font-size:clamp(18px,4.5vw,22px);font-weight:600;color:#1a1a1a;text-align:center;margin-bottom:clamp(20px,5vw,28px);letter-spacing:-.01em}label{font-size:clamp(11px,2.8vw,13px);font-weight:500;color:#333}input[type=email],input[type=password],input[type=text]{width:100%;padding:clamp(10px,2.5vw,12px) clamp(10px,2.5vw,14px);border:1.5px solid #e0e0e0;border-radius:clamp(8px,2vw,12px);font-size:clamp(13px,3.2vw,14px);color:#1a1a1a;background:#fff;outline:none;transition:border-color .2s,box-shadow .2s;-webkit-text-size-adjust:100%}@media (max-width: 400px){input[type=email],input[type=password],input[type=text]{font-size:16px}}input[type=email]:focus,input[type=password]:focus,input[type=text]:focus{border-color:#888;box-shadow:0 0 0 3px #0000000f}input::placeholder{color:transparent}.forgot{display:block;text-align:right;font-size:clamp(11px,2.8vw,13px);font-weight:500;color:#1a1a1a;text-decoration:underline;text-underline-offset:2px;margin-top:clamp(6px,1.5vw,8px);cursor:pointer;touch-action:manipulation}.forgot:hover{color:#555}.submit-btn{display:block;width:100%;padding:clamp(13px,3.2vw,15px);margin-top:clamp(16px,4vw,24px);background:#c0bfbf;color:#fff;border:none;border-radius:50px;font-size:clamp(14px,3.5vw,15px);font-weight:600;cursor:pointer;letter-spacing:.01em;transition:background .2s;touch-action:manipulation;min-height:48px}.submit-btn:hover{background:#999}.submit-btn:active{background:#888}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8$4.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }] }); }
|
|
10788
10788
|
}
|
|
10789
10789
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthenticationRequiredComponent, decorators: [{
|
|
10790
10790
|
type: Component,
|
|
@@ -10805,8 +10805,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
10805
10805
|
HoverDirective,
|
|
10806
10806
|
OverlayDirective,
|
|
10807
10807
|
SpacingAroundDirective,
|
|
10808
|
-
ButtonEditorDirective
|
|
10809
|
-
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section [id]=\"data?.id\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"area w-100\">\r\n <ul class=\"circles\" [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\">\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n </ul>\r\n </div>\r\n\r\n <!-- ===== SCREEN 1: PHONE NUMBER ===== -->\r\n <div *ngIf=\"authScreen === 'PHONE'\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoCorner]=\"styles?.corners\">\r\n\r\n <div class=\"d-flex text-center flex-column align-items-center justify-content-center mb-2 login-main-section\"\r\n style=\"padding: 1.5rem 2rem 0.5rem;\">\r\n <p class=\"mb-0 clr-black login-text\">LOGIN OR SIGNUP</p>\r\n </div>\r\n <hr class=\"mx-0 my-0\" style=\"border-color: #e8e8e8;\">\r\n\r\n <div class=\"login-input-section mt-4\">\r\n <p class=\"text-center mb-3\" style=\"font-size:14px; color:#555;\">Unlock coupons, profile and much more</p>\r\n\r\n <div class=\"input-box\">\r\n <label for=\"auth-email-phone-input\">Email / Mobile Number</label>\r\n <input id=\"auth-email-phone-input\" type=\"text\" class=\"clr-black\" [(ngModel)]=\"emailOrNumber\"\r\n placeholder=\"janedoe@gmail.com / 9876543210\" (ngModelChange)=\"onEmailOrNumberChange()\"\r\n [style.borderColor]=\"!emailOrNumberCheck ? '' : 'red'\" (keyup.enter)=\"sendOTP()\" />\r\n <span class=\"f-12\" *ngIf=\"emailOrNumberCheck\" [style.color]=\"'red'\">Please enter a valid email or 10-digit\r\n mobile number*</span>\r\n </div>\r\n\r\n <button class=\"send-btn gap-2 w-100 py-2\" [buttonData]=\"data?.action?.buttons[2]?.content\"\r\n [buttonStyle]=\"data?.action?.buttons[2]?.styles\" simpoButtonDirective\r\n [id]=\"data?.id+(data?.action?.buttons[2]?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"data?.action?.buttons[2]?.id ?? ''\" (click)=\"sendOTP()\"\r\n [disabled]=\"buttonLoading\">\r\n <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"\r\n *ngIf=\"buttonLoading\"></span>\r\n {{ data?.action?.buttons[2]?.content?.label?.length > 0 ? data?.action?.buttons[2]?.content?.label : 'SEND\r\n OTP' }}\r\n </button>\r\n\r\n <div class=\"mt-3 text-center\">\r\n <span class=\"cursor-pointer clr-black fs-13\" style=\"font-weight:700; text-decoration:underline;\"\r\n (click)=\"authScreen = 'PASSWORD'\">\r\n Login with Password\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- ===== SCREEN 2: OTP VERIFICATION ===== -->\r\n <div *ngIf=\"authScreen === 'OTP'\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\" [simpoCorner]=\"styles?.corners\">\r\n <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoCorner]=\"styles?.corners\">\r\n\r\n <div class=\"d-flex text-center flex-column align-items-center justify-content-center mb-2 login-main-section\"\r\n style=\"padding: 1.5rem 2rem 0.5rem;\">\r\n <p class=\"mb-0 clr-black login-text\">LOGIN OR SIGNUP</p>\r\n </div>\r\n <hr class=\"mx-0 my-0\" style=\"border-color: #e8e8e8;\">\r\n\r\n <div class=\"login-input-section mt-4\">\r\n <p class=\"text-center mb-3 clr-black\" style=\"font-size:14px;\">\r\n Enter 6-digit OTP sent to {{emailOrNumber}}\r\n </p>\r\n\r\n <div class=\"d-flex align-items-center justify-content-between otp_input gap-1 mb-3\">\r\n <div class=\"d-flex gap-2 w-100 justify-content-between\">\r\n <input *ngFor=\"let control of otpControls.controls; let i = index\" #otpInput\r\n class=\"form-control text-center otp-box clr-black\" maxlength=\"1\" inputmode=\"numeric\"\r\n [formControl]=\"control\" (input)=\"onInput(i)\" (keydown)=\"onKeyDown($event, i)\" />\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-center mb-3\">\r\n <span *ngIf=\"resendCountdown > 0\" class=\"clr-black fs-13\" style=\"font-weight:700; letter-spacing:0.04em;\">\r\n RESEND IN {{formatCountdown(resendCountdown)}}\r\n </span>\r\n <span *ngIf=\"resendCountdown === 0\" class=\"cursor-pointer clr-black fs-13\"\r\n style=\"font-weight:700; letter-spacing:0.04em; text-decoration:underline;\" (click)=\"resendOTPNew()\">\r\n RESEND OTP\r\n </span>\r\n </div>\r\n\r\n <button class=\"send-btn gap-2 w-100 py-2\" [buttonData]=\"data?.action?.buttons[1]?.content\"\r\n [buttonStyle]=\"data?.action?.buttons[1]?.styles\" simpoButtonDirective\r\n [id]=\"data?.id+(data?.action?.buttons[1]?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"data?.action?.buttons[1]?.id ?? ''\" (click)=\"verifyOTPNew()\"\r\n [disabled]=\"buttonLoading\">\r\n <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"\r\n *ngIf=\"buttonLoading\"></span>\r\n {{ data?.action?.buttons[1]?.content?.label?.length > 0 ? data?.action?.buttons[1]?.content?.label :\r\n 'VERIFY OTP' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- ===== SCREEN 3: REGISTER ===== -->\r\n <div *ngIf=\"authScreen === 'REGISTER'\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoCorner]=\"styles?.corners\">\r\n\r\n <div class=\"d-flex flex-column align-items-center justify-content-center mb-3\"\r\n style=\"padding: 1.5rem 2rem 0.5rem;\">\r\n <p class=\"mb-0 fs-20-fw-600 clr-black\">REGISTER</p>\r\n </div>\r\n\r\n <div class=\"d-flex w-100 signup-input-container flex-column\">\r\n <div class=\"input-box\">\r\n <label for=\"auth-fullname-input\">Full Name</label>\r\n <input id=\"auth-fullname-input\" type=\"text\" class=\"clr-black\" [(ngModel)]=\"userName\"\r\n placeholder=\"Jane Doe\">\r\n </div>\r\n\r\n <div class=\"input-box\">\r\n <label for=\"auth-reg-phone-input\">Phone Number</label>\r\n <div class=\"d-flex align-items-center w-100 password-input-container\">\r\n <span class=\"clr-black\"\r\n style=\"font-size:14px; font-weight:500; padding: 0 8px 0 12px; white-space:nowrap;\">+91 |</span>\r\n <input id=\"auth-reg-phone-input\" type=\"tel\" class=\"b-none clr-black w-90\" [(ngModel)]=\"phoneNumber\"\r\n placeholder=\"9876543210\" maxlength=\"10\" inputmode=\"numeric\" style=\"outline:none; font-size:14px;\" />\r\n </div>\r\n </div>\r\n\r\n <div class=\"input-box\">\r\n <label for=\"auth-email-input\">Email</label>\r\n <input id=\"auth-email-input\" type=\"email\" class=\"clr-black\" [(ngModel)]=\"email\"\r\n placeholder=\"janedoe@gmail.com\" (ngModelChange)=\"onEmailChange()\"\r\n [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid email*</span>\r\n </div>\r\n\r\n <div class=\"input-box\">\r\n <label for=\"auth-reg-password-input\">Password</label>\r\n <div class=\"password-input-container d-flex align-items-center w-100\" style=\"padding-right: 12px;\">\r\n <input id=\"auth-reg-password-input\" [type]=\"passwordHidden ? 'password' : 'text'\"\r\n class=\"b-none clr-black w-100\" [(ngModel)]=\"password\" placeholder=\"Password\">\r\n <mat-icon style=\"cursor: pointer; color: black; font-size: 20px; text-align: center\"\r\n (click)=\"passwordHidden = !passwordHidden\">\r\n {{passwordHidden ? 'visibility' : 'visibility_off'}}\r\n </mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"input-box\">\r\n <label for=\"auth-reg-conf-password-input\">Confirm Password</label>\r\n <div class=\"password-input-container d-flex align-items-center w-100\" style=\"padding-right: 12px;\">\r\n <input id=\"auth-reg-conf-password-input\" [type]=\"passwordHidden ? 'password' : 'text'\"\r\n class=\"b-none clr-black w-100\" [(ngModel)]=\"confPassword\" placeholder=\"Confirm Password\">\r\n </div>\r\n </div>\r\n\r\n <button class=\"send-btn gap-2 w-100 py-2\" [buttonData]=\"data?.action?.buttons[0]?.content\"\r\n [buttonStyle]=\"data?.action?.buttons[0]?.styles\" simpoButtonDirective\r\n [id]=\"data?.id+(data?.action?.buttons[0]?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"data?.action?.buttons[0]?.id ?? ''\" (click)=\"registerUser()\"\r\n [disabled]=\"buttonLoading\">\r\n <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"\r\n *ngIf=\"buttonLoading\"></span>\r\n {{ data?.action?.buttons[0]?.content?.label?.length > 0 ? data?.action?.buttons[0]?.content?.label :\r\n 'CONTINUE' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- ===== SCREEN 4: LOGIN WITH PASSWORD ===== -->\r\n <div *ngIf=\"authScreen === 'PASSWORD'\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoCorner]=\"styles?.corners\">\r\n\r\n <div class=\"d-flex flex-column align-items-center justify-content-center mb-3\"\r\n style=\"padding: 1.5rem 2rem 0.5rem;\">\r\n <p class=\"mb-0 fs-20-fw-600 clr-black\">LOGIN</p>\r\n </div>\r\n\r\n <div class=\"d-flex w-100 signup-input-container flex-column\">\r\n\r\n <div class=\"input-box\">\r\n <label for=\"auth-pwd-email-input\">Email / Mobile Number</label>\r\n <input id=\"auth-pwd-email-input\" type=\"text\" class=\"clr-black\" [(ngModel)]=\"emailOrNumber\"\r\n placeholder=\"janedoe@gmail.com / 9876543210\" (ngModelChange)=\"onEmailOrNumberChange()\"\r\n [style.borderColor]=\"!emailOrNumberCheck ? '' : 'red'\">\r\n <span class=\"f-12\" *ngIf=\"emailOrNumberCheck\" [style.color]=\"'red'\">Please enter valid email or 10-digit\r\n mobile number*</span>\r\n </div>\r\n\r\n <div class=\"input-box\">\r\n <label for=\"auth-login-password-input\">Password</label>\r\n <div class=\"password-input-container d-flex align-items-center w-100\" style=\"padding-right: 12px;\">\r\n <input id=\"auth-login-password-input\" [type]=\"passwordHidden ? 'password' : 'text'\"\r\n class=\"b-none clr-black w-100\" [(ngModel)]=\"password\" placeholder=\"Password\"\r\n (keyup.enter)=\"loginWithPassword()\">\r\n <mat-icon style=\"cursor: pointer; color: black; font-size: 20px; text-align: center\"\r\n (click)=\"passwordHidden = !passwordHidden\">\r\n {{passwordHidden ? 'visibility' : 'visibility_off'}}\r\n </mat-icon>\r\n </div>\r\n </div>\r\n\r\n <button class=\"send-btn gap-2 w-100 py-2\" [buttonData]=\"data?.action?.buttons[0]?.content\"\r\n [buttonStyle]=\"data?.action?.buttons[0]?.styles\" simpoButtonDirective\r\n [id]=\"data?.id+(data?.action?.buttons[0]?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"data?.action?.buttons[0]?.id ?? ''\"\r\n (click)=\"loginWithPassword()\" [disabled]=\"buttonLoading\">\r\n <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"\r\n *ngIf=\"buttonLoading\"></span>\r\n {{ data?.action?.buttons[0]?.content?.label?.length > 0 ? data?.action?.buttons[0]?.content?.label :\r\n 'LOGIN' }}\r\n </button>\r\n\r\n <div class=\"mt-3 text-center\">\r\n <span class=\"cursor-pointer clr-black fs-13\" style=\"font-weight:700; text-decoration:underline;\"\r\n (click)=\"authScreen = 'PHONE'\">\r\n Login with OTP\r\n </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\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\r\n</section>", styles: [".total-container{position:relative;height:auto;perspective:1200px;overflow:hidden}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.fa{font-family:\"Font Awesome 6 Free\"}.otp_input span{font-size:11px}.otp_input span:hover{text-decoration:underline}label,.eye{color:#000}.sign-up span:hover{text-decoration:underline}.eye{padding:6px;font-size:16px}.w-90{width:90%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-panel{width:450px;margin:2rem auto;background:#ffffff26;box-shadow:0 25px 50px -12px #00000040;backface-visibility:hidden}.login-input-section{padding:0 2rem}.panel{background:#fffffff2;padding:0 0 2rem;position:relative;transition:all .4s ease;margin:unset!important}.input-box{display:flex;flex-direction:column;margin-bottom:.75rem;position:relative;transform-style:preserve-3d;gap:5px}.input-box label{transform:translateZ(20px);margin-left:5px}.input-box input{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;border:1px solid rgba(0,0,0,.08);padding:.75rem;border-radius:12px;appearance:none;outline:none}.button{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;overflow:hidden;border:none;padding:.5rem 2rem;font-weight:600}.button:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .7s ease}.button:hover{transform:translateY(-3px) translateZ(35px);box-shadow:0 15px 30px -5px var(--accent-shadow, rgba(102, 126, 234, .5))}.button:hover:before{left:100%}.button:active{transform:translateY(-1px) translateZ(25px)}.circles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:radial-gradient(circle at 30% 30%,rgba(var(--accent-rgb, 102, 126, 234),.22),rgba(var(--accent-rgb, 102, 126, 234),.06));box-shadow:0 0 20px 4px rgba(var(--accent-rgb, 102, 126, 234),.15),inset 0 0 12px #ffffff1f;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:50%;border:1px solid rgba(var(--accent-rgb, 102, 126, 234),.18);animation:floatUp 25s linear infinite,pulse 4s ease-in-out infinite alternate;bottom:-150px}.circles li:nth-child(1){left:10%;width:90px;height:90px;animation-delay:0s;animation-duration:22s}.circles li:nth-child(2){left:25%;width:30px;height:30px;animation-delay:3s;animation-duration:14s}.circles li:nth-child(3){left:45%;width:60px;height:60px;animation-delay:6s;animation-duration:18s}.circles li:nth-child(4){left:65%;width:110px;height:110px;animation-delay:1s;animation-duration:28s}.circles li:nth-child(5){left:80%;width:25px;height:25px;animation-delay:4s;animation-duration:12s}.circles li:nth-child(6){left:55%;width:70px;height:70px;animation-delay:9s;animation-duration:20s}.circles li:nth-child(7){left:35%;width:140px;height:140px;animation-delay:2s;animation-duration:32s}.circles li:nth-child(8){left:70%;width:40px;height:40px;animation-delay:12s;animation-duration:40s}.circles li:nth-child(9){left:5%;width:20px;height:20px;animation-delay:5s;animation-duration:30s}.circles li:nth-child(10){left:90%;width:55px;height:55px;animation-delay:7s;animation-duration:24s}@keyframes floatUp{0%{transform:translateY(0) rotate(0);opacity:.8}20%{opacity:1}80%{opacity:.7}to{transform:translateY(-110vh) rotate(540deg);opacity:0}}@keyframes pulse{0%{box-shadow:0 0 12px 2px rgba(var(--accent-rgb, 102, 126, 234),.1)}to{box-shadow:0 0 32px 10px rgba(var(--accent-rgb, 102, 126, 234),.28)}}.f-12{font-size:12px}@media screen and (max-width : 475px){.w-90{width:87%}}.no-arrows::-webkit-outer-spin-button,.no-arrows::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.clr-black{color:#000!important}.signup-input-container{padding:0 2rem}.fs-30-fw-600{font-size:30px;font-weight:600}.fs-20-fw-600{font-size:20px;font-weight:600}.fs-14-col-grey{font-size:14px;color:#979797}.fs-13{font-size:13px}.fs-14{font-size:14px}.password-input-container{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;border:1px solid rgba(0,0,0,.08);border-radius:12px;appearance:none;outline:none}.b-none{border:none!important}.password-text-container{padding-left:.5rem;font-size:13px;margin-bottom:.3rem;color:#000}.password-text-container img{width:15px}.password-text-container .password-config{font-size:13px;color:#686f78}.tabs{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border-radius:18px 15px 0 0;margin-bottom:2rem}.login-main-section .login-text{font-size:20px;font-weight:600}.tab{padding:1rem;font-size:clamp(13px,3.2vw,15px)!important;font-weight:600;text-align:center;cursor:pointer;background:#d9d9d9;border:none;letter-spacing:.01em;transition:background .2s,color .2s;-webkit-user-select:none;user-select:none;min-height:48px}.tab:hover{background:#cacaca}.tab.active{background:#1a1a1a;color:#fff}.otp-box{width:55px;height:55px;font-size:20px}h1{font-size:clamp(18px,4.5vw,22px);font-weight:600;color:#1a1a1a;text-align:center;margin-bottom:clamp(20px,5vw,28px);letter-spacing:-.01em}label{font-size:clamp(11px,2.8vw,13px);font-weight:500;color:#333}input[type=email],input[type=password],input[type=text]{width:100%;padding:clamp(10px,2.5vw,12px) clamp(10px,2.5vw,14px);border:1.5px solid #e0e0e0;border-radius:clamp(8px,2vw,12px);font-size:clamp(13px,3.2vw,14px);color:#1a1a1a;background:#fff;outline:none;transition:border-color .2s,box-shadow .2s;-webkit-text-size-adjust:100%}@media (max-width: 400px){input[type=email],input[type=password],input[type=text]{font-size:16px}}input[type=email]:focus,input[type=password]:focus,input[type=text]:focus{border-color:#888;box-shadow:0 0 0 3px #0000000f}input::placeholder{color:transparent}.forgot{display:block;text-align:right;font-size:clamp(11px,2.8vw,13px);font-weight:500;color:#1a1a1a;text-decoration:underline;text-underline-offset:2px;margin-top:clamp(6px,1.5vw,8px);cursor:pointer;touch-action:manipulation}.forgot:hover{color:#555}.submit-btn{display:block;width:100%;padding:clamp(13px,3.2vw,15px);margin-top:clamp(16px,4vw,24px);background:#c0bfbf;color:#fff;border:none;border-radius:50px;font-size:clamp(14px,3.5vw,15px);font-weight:600;cursor:pointer;letter-spacing:.01em;transition:background .2s;touch-action:manipulation;min-height:48px}.submit-btn:hover{background:#999}.submit-btn:active{background:#888}\n"] }]
|
|
10808
|
+
ButtonEditorDirective,
|
|
10809
|
+
ImageEditorDirective,
|
|
10810
|
+
ImageDirectiveDirective,
|
|
10811
|
+
ObjectPositionDirective,
|
|
10812
|
+
PositionLayoutDirectiveDirective
|
|
10813
|
+
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section [id]=\"data?.id\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div class=\"login_card\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"area w-100\">\r\n <ul class=\"circles\" [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\">\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n </ul>\r\n </div>\r\n\r\n <!-- ===== AUTH CARD ===== -->\r\n <div [id]=\"data?.id\" class=\"main-panel d-flex gap-2\" [class.single-pane]=\"!data?.content?.image?.showImage\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoCorner]=\"styles?.corners\">\r\n <div class=\"auth-card\" [class.single-pane]=\"!data?.content?.image?.showImage\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\">\r\n <div class=\"auth-image\" *ngIf=\"data?.content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"data?.content?.image?.url\" [attr.alt]=\"data?.content?.image?.altText || ''\"\r\n class=\"auth-hero-image\" [simpoImageDirective]=\"styles?.image\" [appImageEditor]=\"edit ?? false\"\r\n [imageData]=\"data?.content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(data?.content?.image?.id || '')\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"data?.content?.image?.position\">\r\n </div>\r\n <div class=\"auth-form\">\r\n <ng-container [ngSwitch]=\"authScreen\">\r\n <ng-container *ngSwitchCase=\"'PHONE'\">\r\n <div\r\n class=\"d-flex text-center flex-column align-items-center justify-content-center mb-2 login-main-section\"\r\n style=\"padding: 1.5rem 2rem 0.5rem;\">\r\n <p class=\"mb-0 clr-black login-text\">LOGIN OR SIGNUP</p>\r\n </div>\r\n <hr class=\"mx-0 my-0\" style=\"border-color: #e8e8e8;\">\r\n\r\n <div class=\"login-input-section mt-4\">\r\n <p class=\"text-center mb-3\" style=\"font-size:14px; color:#555;\">Unlock coupons, profile and much more\r\n </p>\r\n\r\n <div class=\"input-box\">\r\n <label for=\"auth-email-phone-input\">Email / Mobile Number</label>\r\n <input id=\"auth-email-phone-input\" type=\"text\" class=\"clr-black\" [(ngModel)]=\"emailOrNumber\"\r\n placeholder=\"janedoe@gmail.com / 9876543210\" (ngModelChange)=\"onEmailOrNumberChange()\"\r\n [style.borderColor]=\"!emailOrNumberCheck ? '' : 'red'\" (keyup.enter)=\"sendOTP()\" />\r\n <span class=\"f-12\" *ngIf=\"emailOrNumberCheck\" [style.color]=\"'red'\">Please enter a valid email or\r\n 10-digit\r\n mobile number*</span>\r\n </div>\r\n\r\n <button class=\"send-btn gap-2 w-100 py-2\" [buttonData]=\"data?.action?.buttons[2]?.content\"\r\n [buttonStyle]=\"data?.action?.buttons[2]?.styles\" simpoButtonDirective\r\n [id]=\"data?.id+(data?.action?.buttons[2]?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"data?.action?.buttons[2]?.id ?? ''\"\r\n (click)=\"sendOTP()\" [disabled]=\"buttonLoading\">\r\n <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"\r\n *ngIf=\"buttonLoading\"></span>\r\n {{ data?.action?.buttons[2]?.content?.label?.length > 0 ? data?.action?.buttons[2]?.content?.label\r\n :\r\n 'SEND\r\n OTP' }}\r\n </button>\r\n\r\n <div class=\"mt-3 text-center\">\r\n <span class=\"cursor-pointer clr-black fs-13\" style=\"font-weight:700; text-decoration:underline;\"\r\n (click)=\"authScreen = 'PASSWORD'\">\r\n Login with Password\r\n </span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'OTP'\">\r\n <div\r\n class=\"d-flex text-center flex-column align-items-center justify-content-center mb-2 login-main-section\"\r\n style=\"padding: 1.5rem 2rem 0.5rem;\">\r\n <p class=\"mb-0 clr-black login-text\">LOGIN OR SIGNUP</p>\r\n </div>\r\n <hr class=\"mx-0 my-0\" style=\"border-color: #e8e8e8;\">\r\n\r\n <div class=\"login-input-section mt-4\">\r\n <p class=\"text-center mb-3 clr-black\" style=\"font-size:14px;\">\r\n Enter 6-digit OTP sent to {{emailOrNumber}}\r\n </p>\r\n\r\n <div class=\"d-flex align-items-center justify-content-between otp_input gap-1 mb-3\">\r\n <div class=\"d-flex gap-2 w-100 justify-content-between\">\r\n <input *ngFor=\"let control of otpControls.controls; let i = index\" #otpInput\r\n class=\"form-control text-center otp-box clr-black\" maxlength=\"1\" inputmode=\"numeric\"\r\n [formControl]=\"control\" (input)=\"onInput(i)\" (keydown)=\"onKeyDown($event, i)\" />\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-center mb-3\">\r\n <span *ngIf=\"resendCountdown > 0\" class=\"clr-black fs-13\"\r\n style=\"font-weight:700; letter-spacing:0.04em;\">\r\n RESEND IN {{formatCountdown(resendCountdown)}}\r\n </span>\r\n <span *ngIf=\"resendCountdown === 0\" class=\"cursor-pointer clr-black fs-13\"\r\n style=\"font-weight:700; letter-spacing:0.04em; text-decoration:underline;\"\r\n (click)=\"resendOTPNew()\">\r\n RESEND OTP\r\n </span>\r\n </div>\r\n\r\n <button class=\"send-btn gap-2 w-100 py-2\" [buttonData]=\"data?.action?.buttons[1]?.content\"\r\n [buttonStyle]=\"data?.action?.buttons[1]?.styles\" simpoButtonDirective\r\n [id]=\"data?.id+(data?.action?.buttons[1]?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"data?.action?.buttons[1]?.id ?? ''\"\r\n (click)=\"verifyOTPNew()\" [disabled]=\"buttonLoading\">\r\n <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"\r\n *ngIf=\"buttonLoading\"></span>\r\n {{ data?.action?.buttons[1]?.content?.label?.length > 0 ? data?.action?.buttons[1]?.content?.label\r\n :\r\n 'VERIFY OTP' }}\r\n </button>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'REGISTER'\">\r\n <div class=\"d-flex flex-column align-items-center justify-content-center mb-3\"\r\n style=\"padding: 1.5rem 2rem 0.5rem;\">\r\n <p class=\"mb-0 fs-20-fw-600 clr-black\">REGISTER</p>\r\n </div>\r\n\r\n <div class=\"d-flex w-100 signup-input-container flex-column\">\r\n <div class=\"input-box\">\r\n <label for=\"auth-fullname-input\">Full Name</label>\r\n <input id=\"auth-fullname-input\" type=\"text\" class=\"clr-black\" [(ngModel)]=\"userName\"\r\n placeholder=\"Jane Doe\">\r\n </div>\r\n\r\n <div class=\"input-box\">\r\n <label for=\"auth-reg-phone-input\">Phone Number</label>\r\n <div class=\"d-flex align-items-center w-100 password-input-container\">\r\n <span class=\"clr-black\"\r\n style=\"font-size:14px; font-weight:500; padding: 0 8px 0 12px; white-space:nowrap;\">+91 |</span>\r\n <input id=\"auth-reg-phone-input\" type=\"tel\" class=\"b-none clr-black w-90\"\r\n [(ngModel)]=\"phoneNumber\" placeholder=\"9876543210\" maxlength=\"10\" inputmode=\"numeric\"\r\n style=\"outline:none; font-size:14px;\" />\r\n </div>\r\n </div>\r\n\r\n <div class=\"input-box\">\r\n <label for=\"auth-email-input\">Email</label>\r\n <input id=\"auth-email-input\" type=\"email\" class=\"clr-black\" [(ngModel)]=\"email\"\r\n placeholder=\"janedoe@gmail.com\" (ngModelChange)=\"onEmailChange()\"\r\n [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid email*</span>\r\n </div>\r\n\r\n <div class=\"input-box\">\r\n <label for=\"auth-reg-password-input\">Password</label>\r\n <div class=\"password-input-container d-flex align-items-center w-100\" style=\"padding-right: 12px;\">\r\n <input id=\"auth-reg-password-input\" [type]=\"passwordHidden ? 'password' : 'text'\"\r\n class=\"b-none clr-black w-100\" [(ngModel)]=\"password\" placeholder=\"Password\">\r\n <mat-icon style=\"cursor: pointer; color: black; font-size: 20px; text-align: center\"\r\n (click)=\"passwordHidden = !passwordHidden\">\r\n {{passwordHidden ? 'visibility' : 'visibility_off'}}\r\n </mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"input-box\">\r\n <label for=\"auth-reg-conf-password-input\">Confirm Password</label>\r\n <div class=\"password-input-container d-flex align-items-center w-100\" style=\"padding-right: 12px;\">\r\n <input id=\"auth-reg-conf-password-input\" [type]=\"passwordHidden ? 'password' : 'text'\"\r\n class=\"b-none clr-black w-100\" [(ngModel)]=\"confPassword\" placeholder=\"Confirm Password\">\r\n </div>\r\n </div>\r\n\r\n <button class=\"send-btn gap-2 w-100 py-2\" [buttonData]=\"data?.action?.buttons[0]?.content\"\r\n [buttonStyle]=\"data?.action?.buttons[0]?.styles\" simpoButtonDirective\r\n [id]=\"data?.id+(data?.action?.buttons[0]?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"data?.action?.buttons[0]?.id ?? ''\"\r\n (click)=\"registerUser()\" [disabled]=\"buttonLoading\">\r\n <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"\r\n *ngIf=\"buttonLoading\"></span>\r\n {{ data?.action?.buttons[0]?.content?.label?.length > 0 ? data?.action?.buttons[0]?.content?.label\r\n :\r\n 'CONTINUE' }}\r\n </button>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'PASSWORD'\">\r\n <div class=\"d-flex flex-column align-items-center justify-content-center mb-3\"\r\n style=\"padding: 1.5rem 2rem 0.5rem;\">\r\n <p class=\"mb-0 fs-20-fw-600 clr-black\">LOGIN</p>\r\n </div>\r\n\r\n <div class=\"d-flex w-100 signup-input-container flex-column\">\r\n <div class=\"input-box\">\r\n <label for=\"auth-pwd-email-input\">Email / Mobile Number</label>\r\n <input id=\"auth-pwd-email-input\" type=\"text\" class=\"clr-black\" [(ngModel)]=\"emailOrNumber\"\r\n placeholder=\"janedoe@gmail.com / 9876543210\" (ngModelChange)=\"onEmailOrNumberChange()\"\r\n [style.borderColor]=\"!emailOrNumberCheck ? '' : 'red'\">\r\n <span class=\"f-12\" *ngIf=\"emailOrNumberCheck\" [style.color]=\"'red'\">Please enter valid email or\r\n 10-digit\r\n mobile number*</span>\r\n </div>\r\n\r\n <div class=\"input-box\">\r\n <label for=\"auth-login-password-input\">Password</label>\r\n <div class=\"password-input-container d-flex align-items-center w-100\" style=\"padding-right: 12px;\">\r\n <input id=\"auth-login-password-input\" [type]=\"passwordHidden ? 'password' : 'text'\"\r\n class=\"b-none clr-black w-100\" [(ngModel)]=\"password\" placeholder=\"Password\"\r\n (keyup.enter)=\"loginWithPassword()\">\r\n <mat-icon style=\"cursor: pointer; color: black; font-size: 20px; text-align: center\"\r\n (click)=\"passwordHidden = !passwordHidden\">\r\n {{passwordHidden ? 'visibility' : 'visibility_off'}}\r\n </mat-icon>\r\n </div>\r\n </div>\r\n\r\n <button class=\"send-btn gap-2 w-100 py-2\" [buttonData]=\"data?.action?.buttons[0]?.content\"\r\n [buttonStyle]=\"data?.action?.buttons[0]?.styles\" simpoButtonDirective\r\n [id]=\"data?.id+(data?.action?.buttons[0]?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"data?.action?.buttons[0]?.id ?? ''\"\r\n (click)=\"loginWithPassword()\" [disabled]=\"buttonLoading\">\r\n <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"\r\n *ngIf=\"buttonLoading\"></span>\r\n {{ data?.action?.buttons[0]?.content?.label?.length > 0 ? data?.action?.buttons[0]?.content?.label\r\n :\r\n 'LOGIN' }}\r\n </button>\r\n\r\n <div class=\"mt-3 text-center\">\r\n <span class=\"cursor-pointer clr-black fs-13\" style=\"font-weight:700; text-decoration:underline;\"\r\n (click)=\"authScreen = 'PHONE'\">\r\n Login with OTP\r\n </span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\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\r\n</section>", styles: [".total-container{position:relative;height:auto;perspective:1200px;overflow:hidden}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.fa{font-family:\"Font Awesome 6 Free\"}.otp_input span{font-size:11px}.otp_input span:hover{text-decoration:underline}label,.eye{color:#000}.sign-up span:hover{text-decoration:underline}.eye{padding:6px;font-size:16px}.w-90{width:90%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-panel{width:min(860px,92vw);margin:2rem auto;background:#ffffff26;box-shadow:0 25px 50px -12px #00000040;backface-visibility:hidden}.main-panel.single-pane{width:450px}.login-input-section{padding:0 2rem}.panel{background:#fffffff2;padding:0;position:relative;transition:all .4s ease;margin:unset!important;overflow:hidden}.auth-card{display:flex;align-items:stretch;min-height:420px}.auth-card.single-pane{min-height:unset}.auth-image{flex:0 0 48%;background:#f2f2f2}.auth-hero-image{width:100%;height:100%;display:block;object-fit:cover}.auth-form{flex:1;display:flex;flex-direction:column;justify-content:flex-start;padding-bottom:1.5rem}.input-box{display:flex;flex-direction:column;margin-bottom:.75rem;position:relative;transform-style:preserve-3d;gap:5px}.input-box label{transform:translateZ(20px);margin-left:5px}.input-box input{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;border:1px solid rgba(0,0,0,.08);padding:.75rem;border-radius:12px;appearance:none;outline:none}.button{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;overflow:hidden;border:none;padding:.5rem 2rem;font-weight:600}.button:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .7s ease}.button:hover{transform:translateY(-3px) translateZ(35px);box-shadow:0 15px 30px -5px var(--accent-shadow, rgba(102, 126, 234, .5))}.button:hover:before{left:100%}.button:active{transform:translateY(-1px) translateZ(25px)}.circles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:radial-gradient(circle at 30% 30%,rgba(var(--accent-rgb, 102, 126, 234),.22),rgba(var(--accent-rgb, 102, 126, 234),.06));box-shadow:0 0 20px 4px rgba(var(--accent-rgb, 102, 126, 234),.15),inset 0 0 12px #ffffff1f;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:50%;border:1px solid rgba(var(--accent-rgb, 102, 126, 234),.18);animation:floatUp 25s linear infinite,pulse 4s ease-in-out infinite alternate;bottom:-150px}.circles li:nth-child(1){left:10%;width:90px;height:90px;animation-delay:0s;animation-duration:22s}.circles li:nth-child(2){left:25%;width:30px;height:30px;animation-delay:3s;animation-duration:14s}.circles li:nth-child(3){left:45%;width:60px;height:60px;animation-delay:6s;animation-duration:18s}.circles li:nth-child(4){left:65%;width:110px;height:110px;animation-delay:1s;animation-duration:28s}.circles li:nth-child(5){left:80%;width:25px;height:25px;animation-delay:4s;animation-duration:12s}.circles li:nth-child(6){left:55%;width:70px;height:70px;animation-delay:9s;animation-duration:20s}.circles li:nth-child(7){left:35%;width:140px;height:140px;animation-delay:2s;animation-duration:32s}.circles li:nth-child(8){left:70%;width:40px;height:40px;animation-delay:12s;animation-duration:40s}.circles li:nth-child(9){left:5%;width:20px;height:20px;animation-delay:5s;animation-duration:30s}.circles li:nth-child(10){left:90%;width:55px;height:55px;animation-delay:7s;animation-duration:24s}@keyframes floatUp{0%{transform:translateY(0) rotate(0);opacity:.8}20%{opacity:1}80%{opacity:.7}to{transform:translateY(-110vh) rotate(540deg);opacity:0}}@keyframes pulse{0%{box-shadow:0 0 12px 2px rgba(var(--accent-rgb, 102, 126, 234),.1)}to{box-shadow:0 0 32px 10px rgba(var(--accent-rgb, 102, 126, 234),.28)}}.f-12{font-size:12px}@media screen and (max-width : 475px){.w-90{width:87%}.login_card{padding:10px}}@media screen and (max-width: 900px){.main-panel{width:min(760px,94vw)}}@media screen and (max-width: 768px){.main-panel,.main-panel.single-pane{width:100%;margin:1.25rem auto}.auth-card{flex-direction:column;min-height:unset}.auth-image{width:100%;min-height:220px}}.no-arrows::-webkit-outer-spin-button,.no-arrows::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.clr-black{color:#000!important}.signup-input-container{padding:0 2rem}.fs-30-fw-600{font-size:30px;font-weight:600}.fs-20-fw-600{font-size:20px;font-weight:600}.fs-14-col-grey{font-size:14px;color:#979797}.fs-13{font-size:13px}.fs-14{font-size:14px}.password-input-container{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;border:1px solid rgba(0,0,0,.08);border-radius:12px;appearance:none;outline:none}.b-none{border:none!important}.password-text-container{padding-left:.5rem;font-size:13px;margin-bottom:.3rem;color:#000}.password-text-container img{width:15px}.password-text-container .password-config{font-size:13px;color:#686f78}.tabs{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border-radius:18px 15px 0 0;margin-bottom:2rem}.login-main-section .login-text{font-size:20px;font-weight:600}.tab{padding:1rem;font-size:clamp(13px,3.2vw,15px)!important;font-weight:600;text-align:center;cursor:pointer;background:#d9d9d9;border:none;letter-spacing:.01em;transition:background .2s,color .2s;-webkit-user-select:none;user-select:none;min-height:48px}.tab:hover{background:#cacaca}.tab.active{background:#1a1a1a;color:#fff}.otp-box{width:55px;height:55px;font-size:20px}h1{font-size:clamp(18px,4.5vw,22px);font-weight:600;color:#1a1a1a;text-align:center;margin-bottom:clamp(20px,5vw,28px);letter-spacing:-.01em}label{font-size:clamp(11px,2.8vw,13px);font-weight:500;color:#333}input[type=email],input[type=password],input[type=text]{width:100%;padding:clamp(10px,2.5vw,12px) clamp(10px,2.5vw,14px);border:1.5px solid #e0e0e0;border-radius:clamp(8px,2vw,12px);font-size:clamp(13px,3.2vw,14px);color:#1a1a1a;background:#fff;outline:none;transition:border-color .2s,box-shadow .2s;-webkit-text-size-adjust:100%}@media (max-width: 400px){input[type=email],input[type=password],input[type=text]{font-size:16px}}input[type=email]:focus,input[type=password]:focus,input[type=text]:focus{border-color:#888;box-shadow:0 0 0 3px #0000000f}input::placeholder{color:transparent}.forgot{display:block;text-align:right;font-size:clamp(11px,2.8vw,13px);font-weight:500;color:#1a1a1a;text-decoration:underline;text-underline-offset:2px;margin-top:clamp(6px,1.5vw,8px);cursor:pointer;touch-action:manipulation}.forgot:hover{color:#555}.submit-btn{display:block;width:100%;padding:clamp(13px,3.2vw,15px);margin-top:clamp(16px,4vw,24px);background:#c0bfbf;color:#fff;border:none;border-radius:50px;font-size:clamp(14px,3.5vw,15px);font-weight:600;cursor:pointer;letter-spacing:.01em;transition:background .2s;touch-action:manipulation;min-height:48px}.submit-btn:hover{background:#999}.submit-btn:active{background:#888}\n"] }]
|
|
10810
10814
|
}], ctorParameters: () => [{ type: RestService }, { type: i2$2.Router }, { type: i6.MessageService }, { type: StorageServiceService }, { type: i1$1.MatDialog }, { type: i2$2.ActivatedRoute }, { type: i0.ElementRef }, { type: i1$1.MatDialogRef, decorators: [{
|
|
10811
10815
|
type: Optional
|
|
10812
10816
|
}] }, { type: i8$3.MatBottomSheetRef, decorators: [{
|
|
@@ -17178,6 +17182,45 @@ class HeaderSectionComponent {
|
|
|
17178
17182
|
}
|
|
17179
17183
|
}
|
|
17180
17184
|
}
|
|
17185
|
+
handleSearchInputClick(event) {
|
|
17186
|
+
if (!this.isBrowser || !this.isOffcanvasOpen || typeof bootstrap === 'undefined')
|
|
17187
|
+
return;
|
|
17188
|
+
const target = event.target;
|
|
17189
|
+
const offcanvasElement = this.mobileOffcanvas?.nativeElement;
|
|
17190
|
+
if (!target || !offcanvasElement)
|
|
17191
|
+
return;
|
|
17192
|
+
let didFocus = false;
|
|
17193
|
+
const focusInput = () => {
|
|
17194
|
+
if (didFocus)
|
|
17195
|
+
return;
|
|
17196
|
+
didFocus = true;
|
|
17197
|
+
target.focus();
|
|
17198
|
+
};
|
|
17199
|
+
const focusAfterClose = () => {
|
|
17200
|
+
offcanvasElement.removeEventListener('hidden.bs.offcanvas', focusAfterClose);
|
|
17201
|
+
focusInput();
|
|
17202
|
+
};
|
|
17203
|
+
offcanvasElement.addEventListener('hidden.bs.offcanvas', focusAfterClose);
|
|
17204
|
+
if (this.closeMobileOffcanvas()) {
|
|
17205
|
+
setTimeout(() => {
|
|
17206
|
+
offcanvasElement.removeEventListener('hidden.bs.offcanvas', focusAfterClose);
|
|
17207
|
+
focusInput();
|
|
17208
|
+
}, 300);
|
|
17209
|
+
}
|
|
17210
|
+
else {
|
|
17211
|
+
offcanvasElement.removeEventListener('hidden.bs.offcanvas', focusAfterClose);
|
|
17212
|
+
}
|
|
17213
|
+
}
|
|
17214
|
+
closeMobileOffcanvas() {
|
|
17215
|
+
if (!this.mobileOffcanvas?.nativeElement || typeof bootstrap === 'undefined')
|
|
17216
|
+
return false;
|
|
17217
|
+
const offcanvasElement = this.mobileOffcanvas.nativeElement;
|
|
17218
|
+
const instance = bootstrap.Offcanvas?.getOrCreateInstance?.(offcanvasElement);
|
|
17219
|
+
if (!instance?.hide)
|
|
17220
|
+
return false;
|
|
17221
|
+
instance.hide();
|
|
17222
|
+
return true;
|
|
17223
|
+
}
|
|
17181
17224
|
checkPassbookApp() {
|
|
17182
17225
|
const details = this.storage.getItem('bId');
|
|
17183
17226
|
const bId = details ?? '';
|
|
@@ -17474,7 +17517,7 @@ class HeaderSectionComponent {
|
|
|
17474
17517
|
}
|
|
17475
17518
|
}
|
|
17476
17519
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, deps: [{ token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i1$1.MatDialog }, { token: StorageServiceService }, { token: RestService }, { token: EventsService }, { token: LOCAL_STORAGE }, { token: PLATFORM_ID }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
17477
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderSectionComponent, isStandalone: true, selector: "simpo-header-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 }, { propertyName: "mobileOffcanvas", first: true, predicate: ["mobileOffcanvas"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\r\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n [class.margin-bottom]=\"shouldReserveMobileHeaderSpace\">\r\n <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\r\n simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\r\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\"\r\n [class.header--scrolled]=\"data?.styles?.shrinkOnScroll && isHeaderSticky && scrollValue > 0 && !edit\">\r\n <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\r\n <ng-container *ngIf=\"style?.headline?.display\">\r\n <div>\r\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n </div>\r\n </ng-container>\r\n\r\n <div *ngIf=\"style?.styling === 'Header1' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\r\n [class.p-2]=\"data?.styles?.shrinkOnScroll && isHeaderSticky && scrollValue > 0 && !edit\">\r\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header2' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\r\n [class.p-2]=\"data?.styles?.shrinkOnScroll && isHeaderSticky && scrollValue > 0 && !edit\">\r\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header3' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\r\n [class.p-2]=\"data?.styles?.shrinkOnScroll && isHeaderSticky && scrollValue > 0 && !edit\">\r\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header4' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\r\n [class.p-2]=\"data?.styles?.shrinkOnScroll && isHeaderSticky && scrollValue > 0 && !edit\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n\r\n <div [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" *ngIf=\"isEcommerceWebsite\"\r\n [simpoLayout]=\"screenWidth > 475 ? stylesLayout : undefined\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"ecommerce_header\"></ng-container>\r\n </div>\r\n\r\n <!-- <div class=\"input-group mx-2 mb-2 w-96\" *ngIf=\"isMobile && isEcommerceWebsite && !restrictCartBarInPages()\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search for items\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">search</mat-icon>\r\n </div> -->\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && !isMobile && data?.styles?.menuType === 'MEGA_MENU'\">\r\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n </ng-container>\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-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader() && data?.styles?.enableHeaderCarousel\">\r\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- <ng-container *ngIf=\"isEcommerceWebsite && isMobile && !restrictInPages()\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container> -->\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n <div class=\"header1\">\r\n <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\r\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 94 : ''\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n <div class=\"header1\">\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\r\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n <div class=\"header1\">\r\n <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\r\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n <div class=\"header1\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container> </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\r\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer mx-1\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? 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 + 80\" loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b>{{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 : \r\n ((content?.logo?.size >= 60 && content?.logo?.size <= 100) ? (20) : ((content?.logo?.size || 10) - 10))\"\r\n [class.w-75]=\"screenWidth < 475\" loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"\r\n (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n <div class=\"d-flex gap-3\"\r\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\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 category-btn\" type=\"button\"\r\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | lowercase | titlecase}}\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])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n\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\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\r\n (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\">\r\n <mat-icon>person_outline</mat-icon>\r\n Login\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn && !isMobile\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\" [style.color]=\"accentColor\"\r\n (click)=\"goToAccount('LOGIN')\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M12 13C14.7614 13 17 10.7614 17 8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8C7 10.7614 9.23858 13 12 13Z\"\r\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <path\r\n d=\"M20 21C20 18.8783 19.1571 16.8434 17.6569 15.3431C16.1566 13.8429 14.1217 13 12 13C9.87827 13 7.84344 13.8429 6.34315 15.3431C4.84285 16.8434 4 18.8783 4 21\"\r\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg>\r\n \r\n Login</button>\r\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && loggedIn\" [style.color]=\"accentColor\"\r\n (click)=\"goToAccount('PROFILE')\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M12 13C14.7614 13 17 10.7614 17 8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8C7 10.7614 9.23858 13 12 13Z\"\r\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <path\r\n d=\"M20 21C20 18.8783 19.1571 16.8434 17.6569 15.3431C16.1566 13.8429 14.1217 13 12 13C9.87827 13 7.84344 13.8429 6.34315 15.3431C4.84285 16.8434 4 18.8783 4 21\"\r\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg>\r\n Account</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n <div class=\"cart-footer\" [style.background]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n *ngIf=\"getCartItemsCount > 0 && !restrictCartBarInPages()\">\r\n <div class=\"d-flex justify-content-between px-3 py-2 h-100 align-items-center\">\r\n <div class=\"item-count fw-bold\">\r\n {{ getCartItemsCount ?? 3 }} {{ getCartItemsCount > 1 ? 'items' : 'item' }} in cart\r\n <!-- Total : \u20B9{{ getCartTotalAmount }} -->\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2 fw-bold\" (click)=\"goToCart()\">\r\n View Cart <mat-icon [simpoColor]=\"accentColor\">arrow_forward</mat-icon>\r\n </div>\r\n </div>\r\n\r\n </div>\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 class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</div>\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 #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n </div> -->\r\n <div class=\"w-75 d-flex align-items-center\" [ngClass]=\"{'justify-content-center' : !passbookAppStatus}\">\r\n <div class=\"input-group w-75 ml-2\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search For Items\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\r\n [style.color]=\"backgroundInfo?.accentColor\">\r\n <!-- <span class=\"animated-placeholder position-absolute\" \r\n [class.animate]=\"animatePlaceholder\"\r\n *ngIf=\"style?.searchBarPlaceholderList.length > 1 && style?.smartSearchBar\">\r\n {{ currentPlaceholder }}\r\n </span> -->\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType === 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n height=\"30\" version=\"1.1\">\r\n <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\n d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\n <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\n <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\n d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\r\n [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\n <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n </g>\r\n </svg>\r\n <div [style.color]=\"accentColor\">Schemes</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\">\r\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\r\n Pincode\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\r\n getPincode}}</div>\r\n\r\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your PIN Code unlocks\r\n </div>\r\n <div class=\"sub-text text-center f-14 pincode-text\">\r\n Fastest delivery date, Try-at-Home availability,\r\n Nearest store and In-store design!\r\n </div>\r\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n [class.error-border]=\"pinError\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n class=\"w-75 p-0\">\r\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n </div>\r\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n Please enter a valid pincode\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n {{getWishlistItemsCount}}</div>\r\n </div>\r\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n {{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\r\n stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n </div>\r\n <!-- (mouseleave)=\"showLogin = false\" -->\r\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your Account\r\n </div>\r\n <div class=\"sub-text text-center f-14\">\r\n Access account & manage your orders.\r\n </div>\r\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">Sign Up</div>\r\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n <!-- <div> -->\r\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\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;\"\r\n [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 [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [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\" id=\"link\"\r\n 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])\"\r\n (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<div #mobileOffcanvas class=\"offcanvas\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n data-bs-backdrop=\"false\"\r\n [ngClass]=\"{'offcanvas-end' : (style?.styling === 'Header1' || style?.styling === 'Header3') && !isEcommerceWebsite, 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4' || isEcommerceWebsite}\">\r\n <!-- <div class=\"offcanvas-header\" [simpoBackground]=\"style?.background\">\r\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container> -->\r\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\r\n <!-- <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n </div> -->\r\n <div class=\"offcanvas-body\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"mobileMenuListTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <div class=\"pages\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"offcanvas-footer\">\r\n <div class=\"canvas-button\">\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n <!-- <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-22 px-3 py-1\"\r\n (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon> -->\r\n\r\n\r\n <!-- <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"> -->\r\n\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b>{{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 [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n <div class=\"categories-wrapper\"\r\n *ngIf=\"(categoryList?.length > 0 || collectionList?.collections?.length > 0) && !isMobile\"\r\n (mouseleave)=\"showList = false; showCollections = false\">\r\n\r\n <div class=\"blur-overlay\" [class.active]=\"showList || showCollections\"></div>\r\n\r\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" [spacingHorizontal]=\"stylesLayout\"\r\n [style.background]=\"data?.styles?.headline?.color\">\r\n\r\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of megaMenu; let i = index\"\r\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n (mouseenter)=\"setChildMenu(ele)\" (click)=\"redirectionsOfMenu(ele)\">\r\n {{ele?.label}}\r\n </div>\r\n </div>\r\n\r\n <!-- [class.hide-dropdown]=\"!showList\" -->\r\n <div class=\"list-category\" [class.show-dropdown]=\"showList\" [class.hide-dropdown]=\"!showList\">\r\n <div class=\"row w-100 h-100 mega-menu-scroll-row\">\r\n <ng-container *ngFor=\"let ele of selectedCategory; let i = index; let last = last\">\r\n <div class=\"mega-menu-scroll-col\"\r\n [ngClass]=\"[\r\n ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES') ? 'col-3' : 'col-2',\r\n ele?.children?.length > 0 && !last ? 'has-right-border' : ''\r\n ]\">\r\n\r\n <ng-container *ngIf=\"ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES' )\">\r\n <div class=\"mobile-submenu-card mb-3\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"ele.imageUrl\">\r\n <img [src]=\"ele.imageUrl\" [alt]=\"ele?.label\" class=\"mobile-submenu-image collectionImage\" />\r\n <div class=\"mobile-submenu-caption\">{{ele?.label | uppercase}}</div>\r\n </div>\r\n <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"!ele.imageUrl\">\r\n {{ele?.label | titlecase}}\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\"\r\n *ngIf=\"ele?.children?.length > 0\">\r\n {{ele?.label | titlecase}}\r\n </div>\r\n <ng-container *ngIf=\"ele?.children && ele?.children.length > 0\">\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let child of ele?.children\">\r\n <div (click)=\"redirectionsOfMenu(child)\" class=\"cursor-pointer\">\r\n {{child?.label | titlecase}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileMenuListTemplate>\r\n <div class=\"mobile-menu-container\">\r\n\r\n <div class=\"mobile-menu-grid\" *ngIf=\"!selectedMobileMenu\">\r\n <div class=\"mobile-menu-item\" *ngFor=\"let ele of megaMenu\"\r\n (click)=\"ele?.children?.length ? selectMobileMenu(ele) : redirectionsOfMenu(ele)\"\r\n [attr.data-bs-dismiss]=\"ele?.children?.length ? null : 'offcanvas'\">\r\n <span class=\"mobile-menu-label\">{{ele?.label | uppercase}}</span>\r\n <mat-icon class=\"mobile-menu-arrow\" *ngIf=\"ele?.children?.length\">chevron_right</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mobile-menu-detail\" *ngIf=\"selectedMobileMenu\">\r\n <div class=\"mobile-menu-back\" (click)=\"goBackMobileMenu()\">\r\n <mat-icon>chevron_left</mat-icon>\r\n <span>{{selectedMobileMenu?.label | titlecase}}</span>\r\n </div>\r\n\r\n <div class=\"mobile-submenu-sections\">\r\n <ng-container *ngFor=\"let child of selectedMobileMenu?.children\">\r\n <div class=\"mobile-submenu-section\">\r\n <ng-container\r\n *ngIf=\"child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' )\">\r\n <div class=\"mobile-submenu-card\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\"\r\n *ngIf=\"child.imageUrl\">\r\n <img [src]=\"child.imageUrl\" [alt]=\"child?.label\" class=\"mobile-submenu-image collectionImage\" />\r\n <div class=\"mobile-submenu-caption\">{{child?.label | uppercase}}</div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container\r\n *ngIf=\"!(child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' ) && child.imageUrl)\">\r\n <div class=\"mobile-submenu-header\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\">\r\n {{child?.label | uppercase}}</div>\r\n\r\n <div class=\"mobile-submenu-grid\" *ngIf=\"child?.children?.length\">\r\n <div class=\"mobile-submenu-item\" *ngFor=\"let sub of child?.children\" (click)=\"redirectionsOfMenu(sub)\"\r\n data-bs-dismiss=\"offcanvas\">\r\n {{sub?.label | titlecase}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileCategoryHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\" [class.margin-top-mob]=\"isHeaderSticky\">\r\n <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n <div class=\"cat-img d-flex justify-content-center align-items-center w-100\">\r\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"br-12 mobile-category-image\">\r\n </div>\r\n <div class=\"text-center category-name\">{{ele?.categoryName}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerce_header>\r\n <header class=\"site-header\">\r\n <!-- Top Bar: Logo, Search, User Actions -->\r\n <div class=\"top-bar\">\r\n\r\n <!-- Mobile Menu Toggle (Checkbox Hack) -->\r\n <div [ngClass]=\"{'mobile-header-left-side': screenWidth <= 475}\">\r\n <label for=\"mobile-menu-checkbox\" class=\"mobile-menu-btn\" data-bs-toggle=\"offcanvas\"\r\n data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\" aria-label=\"Toggle menu\"\r\n (click)=\"goBackMobileMenu()\">\r\n <svg *ngIf=\"!isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\r\n <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\r\n <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\r\n </svg>\r\n <svg *ngIf=\"isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n <line x1=\"6\" y1=\"18\" x2=\"18\" y2=\"6\"></line>\r\n </svg>\r\n </label>\r\n\r\n <!-- Logo Section -->\r\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"Logo\" class=\"logo-img\" [width]=\"content?.logo?.size + 15\"\r\n [height]=\"content?.logo?.size\">\r\n </a>\r\n\r\n <a class=\"textPluslogo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n && content?.logo?.text?.isText \r\n && content?.logo?.text?.isIcon \r\n && content?.logo?.text?.url\">\r\n\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"Icon\" class=\"logo-icon\"\r\n [width]=\"content?.logo?.size + 15\" [height]=\"content?.logo?.size\">\r\n\r\n <span class=\"logo-text\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 475\">\r\n {{ content?.siteName?.value }}\r\n </span>\r\n </a>\r\n\r\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n && content?.logo?.text?.isText \r\n && !content?.logo?.text?.isIcon\">\r\n\r\n <span class=\"logo-main\" [simpoColor]=\"simpoColor\">\r\n {{ content?.siteName?.value }}\r\n </span>\r\n </a>\r\n </div>\r\n\r\n <!-- Search Bar -->\r\n <div class=\"search-wrapper\"\r\n *ngIf=\"screenWidth > 475 && content?.showSearchBar && data?.styles?.menuType !== 'DROPDOWN_MENU'\">\r\n <div class=\"search-bar\">\r\n <!-- Search Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n aria-label=\"Search\">\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown menu style -->\r\n <div class=\"dropdown_menu\" *ngIf=\"screenWidth > 475 && data?.styles?.menuType === 'DROPDOWN_MENU'\"\r\n (mouseleave)=\"showList = false; selectedCategory = null\">\r\n <div class=\"dd-nav\">\r\n <div class=\"dd-tab-wrap\" *ngFor=\"let ele of megaMenu\">\r\n <button type=\"button\" class=\"dd-tab\" [class.dd-tab-active]=\"showList && selectedCategory === ele?.children\"\r\n (click)=\"ele?.children?.length ? toggleChildMenu(ele) : redirectionsOfMenu(ele)\">\r\n <span class=\"text-nowrap\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n [simpoColor]=\"simpoColor\">{{ele?.label | titlecase}}</span>\r\n <svg *ngIf=\"ele?.children?.length\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" [simpoColor]=\"simpoColor\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289C6.68342 7.90237 7.31658 7.90237 7.70711 8.29289L12 12.5858L16.2929 8.29289C16.6834 7.90237 17.3166 7.90237 17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071Z\"\r\n fill=\"#000000\" />\r\n </svg>\r\n </button>\r\n\r\n <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory === ele?.children && ele?.children?.length\"\r\n (click)=\"$event.stopPropagation()\">\r\n <div class=\"dd-item\" *ngFor=\"let child of ele?.children\" [class.open-submenu]=\"openSubmenuChild === child\"\r\n (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : toggleSubMenu(child, $event)\">\r\n <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\r\n <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">›</span>\r\n\r\n <div class=\"dd-submenu\" *ngIf=\"child?.children?.length && openSubmenuChild === child\"\r\n style=\"display: block;\">\r\n <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\r\n (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\r\n <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <!-- Right Actions -->\r\n <div class=\"user-actions\">\r\n\r\n <ng-container *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar\">\r\n <a class=\"action-link icon-only dropdown-search-toggle\"\r\n (click)=\"showDropdownDesktopSearch = !showDropdownDesktopSearch\" aria-label=\"Toggle search\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n </a>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"storeAvaiable\">\r\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n *ngIf=\"!getPincode\">\r\n <!-- <svg width=\"20\" height=\"20\" viewBox=\"0 0 17 17\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\r\n stroke=\"currentColor\" fill=\"none\" [simpoColor]=\"simpoColor\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n <path\r\n d=\"M8.5 0.5c-3.032 0-5.5 2.467-5.5 5.5 0 4.373 4.913 10.086 5.122 10.328l0.378 0.435 0.378-0.436c0.209-0.241 5.122-5.954 5.122-10.327 0-3.033-2.468-5.5-5.5-5.5zM8.5 15.215c-1.146-1.424-4.5-5.879-4.5-9.215 0-2.481 2.019-4.5 4.5-4.5s4.5 2.019 4.5 4.5c0 3.333-3.354 7.791-4.5 9.215zM8.5 3.139c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zM8.5 8.139c-1.103 0-2-0.897-2-2s0.897-2 2-2 2 0.897 2 2-0.897 2-2 2z\"\r\n fill=\"#000000\" />\r\n </svg> -->\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 512 512\"\r\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"currentColor\">\r\n <g>\r\n <path\r\n d=\"M341.476 338.285c54.483-85.493 47.634-74.827 49.204-77.056C410.516 233.251 421 200.322 421 166 421 74.98 347.139 0 256 0 165.158 0 91 74.832 91 166c0 34.3 10.704 68.091 31.19 96.446l48.332 75.84C118.847 346.227 31 369.892 31 422c0 18.995 12.398 46.065 71.462 67.159C143.704 503.888 198.231 512 256 512c108.025 0 225-30.472 225-90 0-52.117-87.744-75.757-139.524-83.715zm-194.227-92.34a15.57 15.57 0 0 0-.517-.758C129.685 221.735 121 193.941 121 166c0-75.018 60.406-136 135-136 74.439 0 135 61.009 135 136 0 27.986-8.521 54.837-24.646 77.671-1.445 1.906 6.094-9.806-110.354 172.918L147.249 245.945zM256 482c-117.994 0-195-34.683-195-60 0-17.016 39.568-44.995 127.248-55.901l55.102 86.463a14.998 14.998 0 0 0 25.298 0l55.101-86.463C411.431 377.005 451 404.984 451 422c0 25.102-76.313 60-195 60z\">\r\n </path>\r\n <path\r\n d=\"M256 91c-41.355 0-75 33.645-75 75s33.645 75 75 75 75-33.645 75-75-33.645-75-75-75zm0 120c-24.813 0-45-20.187-45-45s20.187-45 45-45 45 20.187 45 45-20.187 45-45 45z\">\r\n </path>\r\n </g>\r\n </svg>\r\n\r\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">Enter Pincode</span>\r\n\r\n </a>\r\n\r\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7\"></path>\r\n <path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"></path>\r\n <path d=\"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4\"></path>\r\n <path d=\"M2 7h20\"></path>\r\n <path\r\n d=\"M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7\">\r\n </path>\r\n </svg>\r\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">{{\"Delivering to: \" +\r\n getPincode}}</span>\r\n\r\n </a>\r\n\r\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your PIN Code unlocks\r\n </div>\r\n <div class=\"sub-text text-center f-14 pincode-text\">\r\n Fastest delivery date, Try-at-Home availability,\r\n Nearest store and In-store design!\r\n </div>\r\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n [class.error-border]=\"pinError\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n class=\"w-75 p-0\">\r\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n </div>\r\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n Please enter a valid pincode\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <a class=\"action-link icon-only login-btn\" *ngIf=\"!loggedIn\"\r\n (mouseenter)=\"showLogin = true;showPincodeInput = false\" (click)=\"showLogin = !showLogin\">\r\n <!-- User Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n </svg>\r\n </a>\r\n\r\n <a class=\"action-link icon-only\" (click)=\"goToAccount('PROFILE')\" *ngIf=\"loggedIn\">\r\n <!-- User Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n </svg>\r\n </a>\r\n\r\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your Account\r\n </div>\r\n <div class=\"sub-text text-center f-14\">\r\n Access account & manage your orders.\r\n </div>\r\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">Sign Up</div>\r\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n </div>\r\n </div>\r\n\r\n <a class=\"action-link icon-only icon-container wishlist-icon\" (click)=\"goToWishlist()\">\r\n <!-- Heart Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path\r\n d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\">\r\n </path>\r\n </svg>\r\n <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</span>\r\n </a>\r\n\r\n <a class=\"action-link icon-only icon-container cart-icon\" (click)=\"goToCart()\">\r\n <!-- Shopping Bag Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z\"></path>\r\n <path d=\"M3 6h18\"></path>\r\n <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\r\n </svg>\r\n <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</span>\r\n </a>\r\n\r\n <div class=\"dropdown-search-expand\"\r\n *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar && showDropdownDesktopSearch\">\r\n <div class=\"dropdown-search-box\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"dropdown-search-icon\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n <input type=\"text\" placeholder=\"Search for...\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n aria-label=\"Search\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"dropdown-search-close\" (click)=\"showDropdownDesktopSearch = false\" aria-label=\"Close search\">\r\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"search-wrapper\" *ngIf=\"screenWidth <= 475 && content?.showSearchBar\">\r\n <div class=\"search-bar\">\r\n <!-- Search Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n aria-label=\"Search\">\r\n </div>\r\n </div>\r\n\r\n </header>\r\n</ng-template>", styles: [".total-container div[simpoSticky]:not(.header--scrolled){top:0!important;left:0!important;right:0!important;margin:0 auto!important;width:100%!important}.total-container div[simpoSticky].header--scrolled,.header--scrolled{top:10px!important;left:20%!important;right:20%!important;width:60%!important;overflow:hidden!important;border-radius:60px!important;box-shadow:0 10px 40px #0000001f!important;z-index:1000001!important;transition:width .4s cubic-bezier(.16,1,.3,1)}@media screen and (max-width: 475px){.total-container div[simpoSticky].header--scrolled,.header--scrolled{top:10px!important;left:5%!important;right:5%!important;width:90%!important}}.w-40{width:40%!important}*{font-family:var(--website-font-family)}.animated-placeholder{left:12%;transform:translateY(-50%);transition:all .4s ease;font-size:14px;top:49%;color:#6f6f6f;font-weight:300}.animated-placeholder.animate{transform:translateY(-150%);opacity:0}.w-5{width:5%}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem;flex:0 0 auto}.category-name{text-transform:uppercase;white-space:normal;word-break:break-word;line-height:1.2;font-size:11px;letter-spacing:.4px;text-align:center;max-width:90px}.margin-bottom{margin-bottom:var(--margin-top, 0px)}@media only screen and (max-width : 475px){.w-5{width:100%!important}.logo-main,.logo-text{font-size:17px!important}.left-logo-text{padding-top:10px}.mob-form-control{width:96%;border-radius:12px!important}.input-group mat-icon{width:10%!important}.categories-header{height:unset!important}.margin-top-mob{margin-top:var(--margin-top, 0px)}.w-98{width:98%}.w-96{width:96%}.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}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#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:-1px}.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}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;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}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.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}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:100%;z-index:1000000000}@media screen and (max-width: 475px){.offcanvas{top:var(--margin-top, 0px)!important;height:calc(100vh - var(--margin-top, 0px))!important;display:flex;flex-direction:column}.offcanvas-body{flex:1 1 auto;height:auto}.offcanvas-footer{height:auto}}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.mobileLoginButton{width:100%;height:40px;border-radius:8px;outline:none;background:transparent;border:none;display:flex;align-items:center;justify-content:center}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:88%}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:10%}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:auto;max-height:50vh;overflow-y:auto;position:absolute;width:100%;z-index:1001}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:6px;height:40px}.h-45{height:45vh}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:0;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}.cart-footer{position:fixed;width:96%;height:45px;bottom:65px;z-index:100;left:8px;border-radius:10px}.item-count{align-content:center}.fs-22{font-size:22px}.w-15{width:15%!important}.site-header{width:100%;border-bottom:1px solid transparent}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1440px;margin:0 auto}.dropdown_menu{position:relative;min-width:420px;max-width:55%;display:flex;justify-content:center}.dd-nav{display:flex;align-items:flex-start;gap:18px;width:100%;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;max-height:400px;height:500px;margin-bottom:-460px;padding-top:5px;scrollbar-width:none;pointer-events:none}.dd-nav::-webkit-scrollbar{display:none}.dd-tab-wrap{position:relative;display:inline-flex;pointer-events:auto}.dd-tab{border:none;background:transparent;padding:6px 2px;font-size:15px;font-weight:500;color:#30343b;line-height:1;border-bottom:3px solid transparent;display:inline-flex;align-items:center;gap:8px}.dd-tab:hover,.dd-tab.dd-tab-active{border-bottom-color:#2f3338}.dd-panel{position:absolute;top:100%;left:0;background:#fff;border:1px solid #ececef;box-shadow:0 12px 35px #1d212929;padding:14px 0;z-index:1006;min-width:220px}.dd-item{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;font-size:16px;color:#2c2f35;transition:background-color .2s ease;cursor:pointer}.dd-item:hover{background-color:#f5f6f8}.dd-item-arrow{font-size:20px;line-height:1;color:#5a5f66}.dd-submenu{position:absolute;top:-10px;left:calc(100% + 3px);background:#fff;border:1px solid #ececef;box-shadow:0 10px 26px #1d212926;padding:10px 0;display:none;z-index:1007}.dd-item:hover .dd-submenu{display:block}.dd-sub-item{padding:10px 16px;font-size:15px;color:#2c2f35;transition:background-color .2s ease}.dd-sub-item:hover{background-color:#f5f6f8}.dropdown-search-toggle{cursor:pointer}.dropdown-search-expand{position:absolute;top:calc(100% + 10px);right:0;min-width:320px;z-index:1010}.dropdown-search-box{width:100%;background:#f3f3f3;border:1px solid #e7e7e7;display:flex;align-items:center;gap:12px;padding:10px 14px}.dropdown-search-icon{color:#1f2328;flex:0 0 auto}.dropdown-search-box input{border:none;background:transparent;width:100%;font-size:14px;color:#2f3338;outline:none}.dropdown-search-close{color:#545861;cursor:pointer;flex:0 0 auto}.logo{display:flex;flex-direction:column;align-items:flex-start;color:#5e4042;line-height:1;text-decoration:auto}.logo-img{display:block}.logo-main{font-family:Playfair Display,serif;font-size:32px;font-weight:500;letter-spacing:.5px}.logo-sub{font-family:Montserrat,sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;margin-top:2px;margin-left:2px}.search-wrapper{flex:1;display:flex;justify-content:center;max-width:600px}.search-bar{width:100%;background-color:#f3f3f3;border-radius:8px;display:flex;align-items:center;padding:10px 16px;gap:12px}.search-icon{color:#333;width:18px;height:18px}.search-bar input{border:none;background:transparent;width:100%;font-family:Montserrat,sans-serif;font-size:14px;color:#1a1a1a;outline:none}.search-bar input::placeholder{color:#888;font-weight:400}.user-actions{display:flex;align-items:center;gap:24px}.action-link{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.action-link:hover{color:#5e4042}.store-text{white-space:nowrap}.icon-only svg{display:block;cursor:pointer}.main-nav{border-top:1px solid transparent;padding-bottom:15px}.nav-list{display:flex;justify-content:center;flex-wrap:wrap;gap:32px;padding:10px 40px}.nav-list li{position:relative}.nav-list a{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#333;padding:5px 0;display:inline-block}.nav-list a:hover{color:#5e4042}.has-badge{position:relative}.badge{position:absolute;top:-12px;right:-10px;background-color:#a87b7b;color:#fff;font-size:9px;font-weight:600;padding:2px 6px;border-radius:10px;line-height:1;white-space:nowrap}.mobile-menu-checkbox{display:none}.mobile-menu-btn{display:none;cursor:pointer;color:#333}.hero-placeholder{height:80vh;background-color:#f9f9f9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#5e4042}.hero-placeholder h1{font-family:Playfair Display,serif;font-size:3rem;margin-bottom:1rem}@media (max-width: 1024px){.nav-list{gap:20px}.store-text{display:none}.search-wrapper{margin:0 20px}}@media (max-width: 768px){.top-bar{padding:15px 20px;flex-wrap:wrap}.search-wrapper{order:3;padding:0 8px;width:100%;max-width:100%;margin:0 0 15px}.user-actions{gap:16px}.main-nav{display:none;width:100%;background:#fff;border-top:1px solid #eee}.nav-list{flex-direction:column;align-items:center;gap:15px;padding:20px}.badge{position:relative;top:-2px;right:auto;margin-left:8px;vertical-align:middle}.mobile-menu-btn{display:block}.mobile-menu-checkbox:checked~.main-nav{display:block}}@media screen and (max-width: 475px){.store-link{display:none}.info-container{width:100vw;top:62%}}.icon-container{position:relative}.count-badge{position:absolute;top:-8px;right:-8px;font-size:10px;font-weight:600;height:18px;width:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #ffffff}.textPluslogo{display:flex;align-items:center;gap:8px;flex-shrink:0;text-decoration:none}.logo-icon{color:#5e4042}.logo-text{font-size:28px;font-weight:600;color:#1a1a1a;letter-spacing:-.5px}.mobile-header-left-side{display:flex;align-items:center;gap:15px}.categories-wrapper{position:relative;width:100%;z-index:1000}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;position:relative}.categories-header::-webkit-scrollbar{display:none}.category{position:relative;border-bottom:3px solid transparent;transition:border-color .35s ease,color .35s ease}.category:hover{border-bottom-color:var(--border-color)}.blur-overlay{position:fixed;top:var(--margin-top, 0px);left:0;width:100vw;height:calc(100vh - var(--margin-top, 0px));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffff47;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s ease;z-index:1000}.blur-overlay.active{opacity:1;visibility:visible}.list-category{padding:20px 30px;color:#111;background:#fff!important;height:auto;max-height:50vh;position:absolute;top:100%;left:0;width:100%;z-index:1003;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,transform .35s ease,visibility .35s ease;will-change:opacity,transform;box-shadow:0 18px 40px #0000001a;overflow-x:hidden;overflow-y:auto}.mega-menu-scroll-row{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.mega-menu-scroll-col{flex-shrink:0}.mega-menu-scroll-col.has-right-border{border-right:1px solid #e9e7e7}.collectionImage{border-radius:10px;height:70%!important}@media screen and (min-width: 476px){.list-category .mobile-submenu-card{aspect-ratio:4 / 3;overflow:hidden}.list-category .mobile-submenu-image.collectionImage{width:100%;height:100%!important;object-fit:cover;display:block}}.list-item>div{color:#585858}.list-item>div:hover{color:#000}.show-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.hide-dropdown{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px)}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px;height:auto;max-height:36vh;overflow-y:auto}.each-price{transition:transform .25s ease,font-weight .25s ease,color .25s ease}.each-price:hover{font-weight:700;transform:translate(4px)}.image-container{cursor:pointer;overflow:hidden}.image-container img{border-radius:12px;transition:transform .35s ease}.image-container:hover img{transform:scale(1.04)}.collection{height:max-content;cursor:pointer;transition:transform .25s ease}.collection:hover{transform:translateY(-2px)}.mobile-menu-container{height:100%;overflow-y:auto}.mobile-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mobile-menu-item{display:flex;align-items:center;justify-content:space-between;background:#f5f5f5;border-radius:8px;padding:14px;cursor:pointer;transition:background-color .2s ease}.mobile-menu-item:active{background:#ebebeb}.mobile-menu-label{font-size:11px;letter-spacing:.5px;color:#1a1a1a;line-height:1.3}.mobile-menu-arrow{font-size:18px!important;width:18px!important;height:18px!important;color:#999;flex-shrink:0}.mobile-menu-detail{padding:0}.mobile-menu-back{display:flex;align-items:center;gap:4px;padding:14px 0;cursor:pointer;font-size:16px;color:#1a1a1a}.mobile-menu-back mat-icon{font-size:22px!important;width:22px!important;height:22px!important;color:#1a1a1a!important}.mobile-submenu-sections{overflow-y:auto}.mobile-submenu-section{margin-bottom:20px}.mobile-submenu-card{position:relative;border-radius:12px;overflow:hidden;cursor:pointer}.mobile-submenu-image{display:block;width:100%;height:auto!important}.mobile-submenu-caption{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;font-size:14px;font-weight:700;letter-spacing:.6px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.5);background:linear-gradient(180deg,#0000,#0009)}.mobile-submenu-header{font-size:14px;font-weight:700;letter-spacing:.5px;color:#1a1a1a;margin-bottom:12px;cursor:pointer}.mobile-submenu-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mobile-submenu-item{background:#f5f5f5;border-radius:8px;padding:10px 14px;font-size:12px;font-weight:400;color:#333;cursor:pointer;text-align:center;transition:background-color .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-submenu-item:active{background:#ebebeb}.mobile-category-image{border-radius:50%;height:11vh;width:11vh;object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { 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", "accentColor"] }, { 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: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky", "categoryHeader"] }, { 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"] }, { kind: "component", type: MovingTextComponent, selector: "simpo-moving-text", inputs: ["data", "edit", "delete", "customClass", "index"] }] }); }
|
|
17520
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderSectionComponent, isStandalone: true, selector: "simpo-header-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 }, { propertyName: "mobileOffcanvas", first: true, predicate: ["mobileOffcanvas"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\r\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n [class.margin-bottom]=\"shouldReserveMobileHeaderSpace\">\r\n <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\r\n simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\r\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\"\r\n [class.header--scrolled]=\"data?.styles?.shrinkOnScroll && isHeaderSticky && scrollValue > 0 && !edit\">\r\n <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\r\n <ng-container *ngIf=\"style?.headline?.display\">\r\n <div>\r\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n </div>\r\n </ng-container>\r\n\r\n <div *ngIf=\"style?.styling === 'Header1' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\r\n [class.p-2]=\"data?.styles?.shrinkOnScroll && isHeaderSticky && scrollValue > 0 && !edit\">\r\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header2' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\r\n [class.p-2]=\"data?.styles?.shrinkOnScroll && isHeaderSticky && scrollValue > 0 && !edit\">\r\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header3' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\r\n [class.p-2]=\"data?.styles?.shrinkOnScroll && isHeaderSticky && scrollValue > 0 && !edit\">\r\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header4' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\r\n [class.p-2]=\"data?.styles?.shrinkOnScroll && isHeaderSticky && scrollValue > 0 && !edit\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n\r\n <div [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" *ngIf=\"isEcommerceWebsite\"\r\n [simpoLayout]=\"screenWidth > 475 ? stylesLayout : undefined\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"ecommerce_header\"></ng-container>\r\n </div>\r\n\r\n <!-- <div class=\"input-group mx-2 mb-2 w-96\" *ngIf=\"isMobile && isEcommerceWebsite && !restrictCartBarInPages()\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search for items\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">search</mat-icon>\r\n </div> -->\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && !isMobile && data?.styles?.menuType === 'MEGA_MENU'\">\r\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n </ng-container>\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-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader() && data?.styles?.enableHeaderCarousel\">\r\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- <ng-container *ngIf=\"isEcommerceWebsite && isMobile && !restrictInPages()\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container> -->\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n <div class=\"header1\">\r\n <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\r\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 94 : ''\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n <div class=\"header1\">\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\r\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n <div class=\"header1\">\r\n <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\r\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n <div class=\"header1\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container> </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\r\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer mx-1\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? 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 + 80\" loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b>{{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 : \r\n ((content?.logo?.size >= 60 && content?.logo?.size <= 100) ? (20) : ((content?.logo?.size || 10) - 10))\"\r\n [class.w-75]=\"screenWidth < 475\" loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"\r\n (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n <div class=\"d-flex gap-3\"\r\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\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 category-btn\" type=\"button\"\r\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | lowercase | titlecase}}\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])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n\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\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\r\n (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\">\r\n <mat-icon>person_outline</mat-icon>\r\n Login\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn && !isMobile\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\" [style.color]=\"accentColor\"\r\n (click)=\"goToAccount('LOGIN')\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M12 13C14.7614 13 17 10.7614 17 8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8C7 10.7614 9.23858 13 12 13Z\"\r\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <path\r\n d=\"M20 21C20 18.8783 19.1571 16.8434 17.6569 15.3431C16.1566 13.8429 14.1217 13 12 13C9.87827 13 7.84344 13.8429 6.34315 15.3431C4.84285 16.8434 4 18.8783 4 21\"\r\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg>\r\n \r\n Login</button>\r\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && loggedIn\" [style.color]=\"accentColor\"\r\n (click)=\"goToAccount('PROFILE')\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M12 13C14.7614 13 17 10.7614 17 8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8C7 10.7614 9.23858 13 12 13Z\"\r\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <path\r\n d=\"M20 21C20 18.8783 19.1571 16.8434 17.6569 15.3431C16.1566 13.8429 14.1217 13 12 13C9.87827 13 7.84344 13.8429 6.34315 15.3431C4.84285 16.8434 4 18.8783 4 21\"\r\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg>\r\n Account</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n <div class=\"cart-footer\" [style.background]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n *ngIf=\"getCartItemsCount > 0 && !restrictCartBarInPages()\">\r\n <div class=\"d-flex justify-content-between px-3 py-2 h-100 align-items-center\">\r\n <div class=\"item-count fw-bold\">\r\n {{ getCartItemsCount ?? 3 }} {{ getCartItemsCount > 1 ? 'items' : 'item' }} in cart\r\n <!-- Total : \u20B9{{ getCartTotalAmount }} -->\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2 fw-bold\" (click)=\"goToCart()\">\r\n View Cart <mat-icon [simpoColor]=\"accentColor\">arrow_forward</mat-icon>\r\n </div>\r\n </div>\r\n\r\n </div>\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 class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</div>\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 #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n </div> -->\r\n <div class=\"w-75 d-flex align-items-center\" [ngClass]=\"{'justify-content-center' : !passbookAppStatus}\">\r\n <div class=\"input-group w-75 ml-2\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search For Items\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\" (click)=\"handleSearchInputClick($event)\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\r\n [style.color]=\"backgroundInfo?.accentColor\">\r\n <!-- <span class=\"animated-placeholder position-absolute\" \r\n [class.animate]=\"animatePlaceholder\"\r\n *ngIf=\"style?.searchBarPlaceholderList.length > 1 && style?.smartSearchBar\">\r\n {{ currentPlaceholder }}\r\n </span> -->\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType === 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n height=\"30\" version=\"1.1\">\r\n <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\n d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\n <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\n <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\n d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\r\n [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\n <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n </g>\r\n </svg>\r\n <div [style.color]=\"accentColor\">Schemes</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\">\r\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\r\n Pincode\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\r\n getPincode}}</div>\r\n\r\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your PIN Code unlocks\r\n </div>\r\n <div class=\"sub-text text-center f-14 pincode-text\">\r\n Fastest delivery date, Try-at-Home availability,\r\n Nearest store and In-store design!\r\n </div>\r\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n [class.error-border]=\"pinError\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n class=\"w-75 p-0\">\r\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n </div>\r\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n Please enter a valid pincode\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n {{getWishlistItemsCount}}</div>\r\n </div>\r\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n {{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\r\n stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n </div>\r\n <!-- (mouseleave)=\"showLogin = false\" -->\r\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your Account\r\n </div>\r\n <div class=\"sub-text text-center f-14\">\r\n Access account & manage your orders.\r\n </div>\r\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">Sign Up</div>\r\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n <!-- <div> -->\r\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\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;\"\r\n [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 [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [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\" id=\"link\"\r\n 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])\"\r\n (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<div #mobileOffcanvas class=\"offcanvas\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n data-bs-backdrop=\"false\"\r\n [ngClass]=\"{'offcanvas-end' : (style?.styling === 'Header1' || style?.styling === 'Header3') && !isEcommerceWebsite, 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4' || isEcommerceWebsite}\">\r\n <!-- <div class=\"offcanvas-header\" [simpoBackground]=\"style?.background\">\r\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container> -->\r\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\r\n <!-- <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n </div> -->\r\n <div class=\"offcanvas-body\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"mobileMenuListTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <div class=\"pages\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"offcanvas-footer\">\r\n <div class=\"canvas-button\">\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n <!-- <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-22 px-3 py-1\"\r\n (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon> -->\r\n\r\n\r\n <!-- <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"> -->\r\n\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b>{{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 [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n <div class=\"categories-wrapper\"\r\n *ngIf=\"(categoryList?.length > 0 || collectionList?.collections?.length > 0) && !isMobile\"\r\n (mouseleave)=\"showList = false; showCollections = false\">\r\n\r\n <div class=\"blur-overlay\" [class.active]=\"showList || showCollections\"></div>\r\n\r\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" [spacingHorizontal]=\"stylesLayout\"\r\n [style.background]=\"data?.styles?.headline?.color\">\r\n\r\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of megaMenu; let i = index\"\r\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n (mouseenter)=\"setChildMenu(ele)\" (click)=\"redirectionsOfMenu(ele)\">\r\n {{ele?.label}}\r\n </div>\r\n </div>\r\n\r\n <!-- [class.hide-dropdown]=\"!showList\" -->\r\n <div class=\"list-category\" [class.show-dropdown]=\"showList\" [class.hide-dropdown]=\"!showList\">\r\n <div class=\"row w-100 h-100 mega-menu-scroll-row\">\r\n <ng-container *ngFor=\"let ele of selectedCategory; let i = index; let last = last\">\r\n <div class=\"mega-menu-scroll-col\"\r\n [ngClass]=\"[\r\n ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES') ? 'col-3' : 'col-2',\r\n ele?.children?.length > 0 && !last ? 'has-right-border' : ''\r\n ]\">\r\n\r\n <ng-container *ngIf=\"ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES' )\">\r\n <div class=\"mobile-submenu-card mb-3\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"ele.imageUrl\">\r\n <img [src]=\"ele.imageUrl\" [alt]=\"ele?.label\" class=\"mobile-submenu-image collectionImage\" />\r\n <div class=\"mobile-submenu-caption\">{{ele?.label | uppercase}}</div>\r\n </div>\r\n <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"!ele.imageUrl\">\r\n {{ele?.label | titlecase}}\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\"\r\n *ngIf=\"ele?.children?.length > 0\">\r\n {{ele?.label | titlecase}}\r\n </div>\r\n <ng-container *ngIf=\"ele?.children && ele?.children.length > 0\">\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let child of ele?.children\">\r\n <div (click)=\"redirectionsOfMenu(child)\" class=\"cursor-pointer\">\r\n {{child?.label | titlecase}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileMenuListTemplate>\r\n <div class=\"mobile-menu-container\">\r\n\r\n <div class=\"mobile-menu-grid\" *ngIf=\"!selectedMobileMenu\">\r\n <div class=\"mobile-menu-item\" *ngFor=\"let ele of megaMenu\"\r\n (click)=\"ele?.children?.length ? selectMobileMenu(ele) : redirectionsOfMenu(ele)\"\r\n [attr.data-bs-dismiss]=\"ele?.children?.length ? null : 'offcanvas'\">\r\n <span class=\"mobile-menu-label\">{{ele?.label | uppercase}}</span>\r\n <mat-icon class=\"mobile-menu-arrow\" *ngIf=\"ele?.children?.length\">chevron_right</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mobile-menu-detail\" *ngIf=\"selectedMobileMenu\">\r\n <div class=\"mobile-menu-back\" (click)=\"goBackMobileMenu()\">\r\n <mat-icon>chevron_left</mat-icon>\r\n <span>{{selectedMobileMenu?.label | titlecase}}</span>\r\n </div>\r\n\r\n <div class=\"mobile-submenu-sections\">\r\n <ng-container *ngFor=\"let child of selectedMobileMenu?.children\">\r\n <div class=\"mobile-submenu-section\">\r\n <ng-container\r\n *ngIf=\"child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' )\">\r\n <div class=\"mobile-submenu-card\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\"\r\n *ngIf=\"child.imageUrl\">\r\n <img [src]=\"child.imageUrl\" [alt]=\"child?.label\" class=\"mobile-submenu-image collectionImage\" />\r\n <div class=\"mobile-submenu-caption\">{{child?.label | uppercase}}</div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container\r\n *ngIf=\"!(child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' ) && child.imageUrl)\">\r\n <div class=\"mobile-submenu-header\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\">\r\n {{child?.label | uppercase}}</div>\r\n\r\n <div class=\"mobile-submenu-grid\" *ngIf=\"child?.children?.length\">\r\n <div class=\"mobile-submenu-item\" *ngFor=\"let sub of child?.children\" (click)=\"redirectionsOfMenu(sub)\"\r\n data-bs-dismiss=\"offcanvas\">\r\n {{sub?.label | titlecase}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileCategoryHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\" [class.margin-top-mob]=\"isHeaderSticky\">\r\n <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n <div class=\"cat-img d-flex justify-content-center align-items-center w-100\">\r\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"br-12 mobile-category-image\">\r\n </div>\r\n <div class=\"text-center category-name\">{{ele?.categoryName}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerce_header>\r\n <header class=\"site-header\">\r\n <!-- Top Bar: Logo, Search, User Actions -->\r\n <div class=\"top-bar\">\r\n\r\n <!-- Mobile Menu Toggle (Checkbox Hack) -->\r\n <div [ngClass]=\"{'mobile-header-left-side': screenWidth <= 475}\">\r\n <label for=\"mobile-menu-checkbox\" class=\"mobile-menu-btn\" data-bs-toggle=\"offcanvas\"\r\n data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\" aria-label=\"Toggle menu\"\r\n (click)=\"goBackMobileMenu()\">\r\n <svg *ngIf=\"!isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\r\n <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\r\n <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\r\n </svg>\r\n <svg *ngIf=\"isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n <line x1=\"6\" y1=\"18\" x2=\"18\" y2=\"6\"></line>\r\n </svg>\r\n </label>\r\n\r\n <!-- Logo Section -->\r\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"Logo\" class=\"logo-img\" [width]=\"content?.logo?.size + 15\"\r\n [height]=\"content?.logo?.size\">\r\n </a>\r\n\r\n <a class=\"textPluslogo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n && content?.logo?.text?.isText \r\n && content?.logo?.text?.isIcon \r\n && content?.logo?.text?.url\">\r\n\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"Icon\" class=\"logo-icon\"\r\n [width]=\"content?.logo?.size + 15\" [height]=\"content?.logo?.size\">\r\n\r\n <span class=\"logo-text\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 475\">\r\n {{ content?.siteName?.value }}\r\n </span>\r\n </a>\r\n\r\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n && content?.logo?.text?.isText \r\n && !content?.logo?.text?.isIcon\">\r\n\r\n <span class=\"logo-main\" [simpoColor]=\"simpoColor\">\r\n {{ content?.siteName?.value }}\r\n </span>\r\n </a>\r\n </div>\r\n\r\n <!-- Search Bar -->\r\n <div class=\"search-wrapper\"\r\n *ngIf=\"screenWidth > 475 && content?.showSearchBar && data?.styles?.menuType !== 'DROPDOWN_MENU'\">\r\n <div class=\"search-bar\">\r\n <!-- Search Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n (click)=\"handleSearchInputClick($event)\" aria-label=\"Search\">\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown menu style -->\r\n <div class=\"dropdown_menu\" *ngIf=\"screenWidth > 475 && data?.styles?.menuType === 'DROPDOWN_MENU'\"\r\n (mouseleave)=\"showList = false; selectedCategory = null\">\r\n <div class=\"dd-nav\">\r\n <div class=\"dd-tab-wrap\" *ngFor=\"let ele of megaMenu\">\r\n <button type=\"button\" class=\"dd-tab\" [class.dd-tab-active]=\"showList && selectedCategory === ele?.children\"\r\n (click)=\"ele?.children?.length ? toggleChildMenu(ele) : redirectionsOfMenu(ele)\">\r\n <span class=\"text-nowrap\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n [simpoColor]=\"simpoColor\">{{ele?.label | titlecase}}</span>\r\n <svg *ngIf=\"ele?.children?.length\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" [simpoColor]=\"simpoColor\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289C6.68342 7.90237 7.31658 7.90237 7.70711 8.29289L12 12.5858L16.2929 8.29289C16.6834 7.90237 17.3166 7.90237 17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071Z\"\r\n fill=\"#000000\" />\r\n </svg>\r\n </button>\r\n\r\n <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory === ele?.children && ele?.children?.length\"\r\n (click)=\"$event.stopPropagation()\">\r\n <div class=\"dd-item\" *ngFor=\"let child of ele?.children\" [class.open-submenu]=\"openSubmenuChild === child\"\r\n (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : toggleSubMenu(child, $event)\">\r\n <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\r\n <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">›</span>\r\n\r\n <div class=\"dd-submenu\" *ngIf=\"child?.children?.length && openSubmenuChild === child\"\r\n style=\"display: block;\">\r\n <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\r\n (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\r\n <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <!-- Right Actions -->\r\n <div class=\"user-actions\">\r\n\r\n <ng-container *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar\">\r\n <a class=\"action-link icon-only dropdown-search-toggle\"\r\n (click)=\"showDropdownDesktopSearch = !showDropdownDesktopSearch\" aria-label=\"Toggle search\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n </a>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"storeAvaiable\">\r\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n *ngIf=\"!getPincode\">\r\n <!-- <svg width=\"20\" height=\"20\" viewBox=\"0 0 17 17\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\r\n stroke=\"currentColor\" fill=\"none\" [simpoColor]=\"simpoColor\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n <path\r\n d=\"M8.5 0.5c-3.032 0-5.5 2.467-5.5 5.5 0 4.373 4.913 10.086 5.122 10.328l0.378 0.435 0.378-0.436c0.209-0.241 5.122-5.954 5.122-10.327 0-3.033-2.468-5.5-5.5-5.5zM8.5 15.215c-1.146-1.424-4.5-5.879-4.5-9.215 0-2.481 2.019-4.5 4.5-4.5s4.5 2.019 4.5 4.5c0 3.333-3.354 7.791-4.5 9.215zM8.5 3.139c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zM8.5 8.139c-1.103 0-2-0.897-2-2s0.897-2 2-2 2 0.897 2 2-0.897 2-2 2z\"\r\n fill=\"#000000\" />\r\n </svg> -->\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 512 512\"\r\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"currentColor\">\r\n <g>\r\n <path\r\n d=\"M341.476 338.285c54.483-85.493 47.634-74.827 49.204-77.056C410.516 233.251 421 200.322 421 166 421 74.98 347.139 0 256 0 165.158 0 91 74.832 91 166c0 34.3 10.704 68.091 31.19 96.446l48.332 75.84C118.847 346.227 31 369.892 31 422c0 18.995 12.398 46.065 71.462 67.159C143.704 503.888 198.231 512 256 512c108.025 0 225-30.472 225-90 0-52.117-87.744-75.757-139.524-83.715zm-194.227-92.34a15.57 15.57 0 0 0-.517-.758C129.685 221.735 121 193.941 121 166c0-75.018 60.406-136 135-136 74.439 0 135 61.009 135 136 0 27.986-8.521 54.837-24.646 77.671-1.445 1.906 6.094-9.806-110.354 172.918L147.249 245.945zM256 482c-117.994 0-195-34.683-195-60 0-17.016 39.568-44.995 127.248-55.901l55.102 86.463a14.998 14.998 0 0 0 25.298 0l55.101-86.463C411.431 377.005 451 404.984 451 422c0 25.102-76.313 60-195 60z\">\r\n </path>\r\n <path\r\n d=\"M256 91c-41.355 0-75 33.645-75 75s33.645 75 75 75 75-33.645 75-75-33.645-75-75-75zm0 120c-24.813 0-45-20.187-45-45s20.187-45 45-45 45 20.187 45 45-20.187 45-45 45z\">\r\n </path>\r\n </g>\r\n </svg>\r\n\r\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">Enter Pincode</span>\r\n\r\n </a>\r\n\r\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7\"></path>\r\n <path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"></path>\r\n <path d=\"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4\"></path>\r\n <path d=\"M2 7h20\"></path>\r\n <path\r\n d=\"M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7\">\r\n </path>\r\n </svg>\r\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">{{\"Delivering to: \" +\r\n getPincode}}</span>\r\n\r\n </a>\r\n\r\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your PIN Code unlocks\r\n </div>\r\n <div class=\"sub-text text-center f-14 pincode-text\">\r\n Fastest delivery date, Try-at-Home availability,\r\n Nearest store and In-store design!\r\n </div>\r\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n [class.error-border]=\"pinError\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n class=\"w-75 p-0\">\r\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n </div>\r\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n Please enter a valid pincode\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <a class=\"action-link icon-only login-btn\" *ngIf=\"!loggedIn\"\r\n (mouseenter)=\"showLogin = true;showPincodeInput = false\" (click)=\"showLogin = !showLogin\">\r\n <!-- User Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n </svg>\r\n </a>\r\n\r\n <a class=\"action-link icon-only\" (click)=\"goToAccount('PROFILE')\" *ngIf=\"loggedIn\">\r\n <!-- User Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n </svg>\r\n </a>\r\n\r\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your Account\r\n </div>\r\n <div class=\"sub-text text-center f-14\">\r\n Access account & manage your orders.\r\n </div>\r\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">Sign Up</div>\r\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n </div>\r\n </div>\r\n\r\n <a class=\"action-link icon-only icon-container wishlist-icon\" (click)=\"goToWishlist()\">\r\n <!-- Heart Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path\r\n d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\">\r\n </path>\r\n </svg>\r\n <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</span>\r\n </a>\r\n\r\n <a class=\"action-link icon-only icon-container cart-icon\" (click)=\"goToCart()\">\r\n <!-- Shopping Bag Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z\"></path>\r\n <path d=\"M3 6h18\"></path>\r\n <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\r\n </svg>\r\n <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</span>\r\n </a>\r\n\r\n <div class=\"dropdown-search-expand\"\r\n *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar && showDropdownDesktopSearch\">\r\n <div class=\"dropdown-search-box\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"dropdown-search-icon\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n <input type=\"text\" placeholder=\"Search for...\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n (click)=\"handleSearchInputClick($event)\" aria-label=\"Search\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"dropdown-search-close\" (click)=\"showDropdownDesktopSearch = false\" aria-label=\"Close search\">\r\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"search-wrapper\" *ngIf=\"screenWidth <= 475 && content?.showSearchBar\">\r\n <div class=\"search-bar\">\r\n <!-- Search Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n (click)=\"handleSearchInputClick($event)\" aria-label=\"Search\">\r\n </div>\r\n </div>\r\n\r\n </header>\r\n</ng-template>", styles: [".total-container div[simpoSticky]:not(.header--scrolled){top:0!important;left:0!important;right:0!important;margin:0 auto!important;width:100%!important}.total-container div[simpoSticky].header--scrolled,.header--scrolled{top:10px!important;left:20%!important;right:20%!important;width:60%!important;overflow:hidden!important;border-radius:60px!important;box-shadow:0 10px 40px #0000001f!important;z-index:1000001!important;transition:width .4s cubic-bezier(.16,1,.3,1)}@media screen and (max-width: 475px){.total-container div[simpoSticky].header--scrolled,.header--scrolled{top:10px!important;left:5%!important;right:5%!important;width:90%!important}}.w-40{width:40%!important}*{font-family:var(--website-font-family)}.animated-placeholder{left:12%;transform:translateY(-50%);transition:all .4s ease;font-size:14px;top:49%;color:#6f6f6f;font-weight:300}.animated-placeholder.animate{transform:translateY(-150%);opacity:0}.w-5{width:5%}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem;flex:0 0 auto}.category-name{text-transform:uppercase;white-space:normal;word-break:break-word;line-height:1.2;font-size:11px;letter-spacing:.4px;text-align:center;max-width:90px}.margin-bottom{margin-bottom:var(--margin-top, 0px)}@media only screen and (max-width : 475px){.w-5{width:100%!important}.logo-main,.logo-text{font-size:17px!important}.left-logo-text{padding-top:10px}.mob-form-control{width:96%;border-radius:12px!important}.input-group mat-icon{width:10%!important}.categories-header{height:unset!important}.margin-top-mob{margin-top:var(--margin-top, 0px)}.w-98{width:98%}.w-96{width:96%}.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}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#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:-1px}.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}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;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}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.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}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:100%;z-index:1000000000}@media screen and (max-width: 475px){.offcanvas{top:var(--margin-top, 0px)!important;height:calc(100vh - var(--margin-top, 0px))!important;display:flex;flex-direction:column}.offcanvas-body{flex:1 1 auto;height:auto}.offcanvas-footer{height:auto}}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.mobileLoginButton{width:100%;height:40px;border-radius:8px;outline:none;background:transparent;border:none;display:flex;align-items:center;justify-content:center}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:88%}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:10%}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:auto;max-height:50vh;overflow-y:auto;position:absolute;width:100%;z-index:1001}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:6px;height:40px}.h-45{height:45vh}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:0;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}.cart-footer{position:fixed;width:96%;height:45px;bottom:65px;z-index:100;left:8px;border-radius:10px}.item-count{align-content:center}.fs-22{font-size:22px}.w-15{width:15%!important}.site-header{width:100%;border-bottom:1px solid transparent}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1440px;margin:0 auto}.dropdown_menu{position:relative;min-width:420px;max-width:55%;display:flex;justify-content:center}.dd-nav{display:flex;align-items:flex-start;gap:18px;width:100%;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;max-height:400px;height:500px;margin-bottom:-460px;padding-top:5px;scrollbar-width:none;pointer-events:none}.dd-nav::-webkit-scrollbar{display:none}.dd-tab-wrap{position:relative;display:inline-flex;pointer-events:auto}.dd-tab{border:none;background:transparent;padding:6px 2px;font-size:15px;font-weight:500;color:#30343b;line-height:1;border-bottom:3px solid transparent;display:inline-flex;align-items:center;gap:8px}.dd-tab:hover,.dd-tab.dd-tab-active{border-bottom-color:#2f3338}.dd-panel{position:absolute;top:100%;left:0;background:#fff;border:1px solid #ececef;box-shadow:0 12px 35px #1d212929;padding:14px 0;z-index:1006;min-width:220px}.dd-item{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;font-size:16px;color:#2c2f35;transition:background-color .2s ease;cursor:pointer}.dd-item:hover{background-color:#f5f6f8}.dd-item-arrow{font-size:20px;line-height:1;color:#5a5f66}.dd-submenu{position:absolute;top:-10px;left:calc(100% + 3px);background:#fff;border:1px solid #ececef;box-shadow:0 10px 26px #1d212926;padding:10px 0;display:none;z-index:1007}.dd-item:hover .dd-submenu{display:block}.dd-sub-item{padding:10px 16px;font-size:15px;color:#2c2f35;transition:background-color .2s ease}.dd-sub-item:hover{background-color:#f5f6f8}.dropdown-search-toggle{cursor:pointer}.dropdown-search-expand{position:absolute;top:calc(100% + 10px);right:0;min-width:320px;z-index:1010}.dropdown-search-box{width:100%;background:#f3f3f3;border:1px solid #e7e7e7;display:flex;align-items:center;gap:12px;padding:10px 14px}.dropdown-search-icon{color:#1f2328;flex:0 0 auto}.dropdown-search-box input{border:none;background:transparent;width:100%;font-size:14px;color:#2f3338;outline:none}.dropdown-search-close{color:#545861;cursor:pointer;flex:0 0 auto}.logo{display:flex;flex-direction:column;align-items:flex-start;color:#5e4042;line-height:1;text-decoration:auto}.logo-img{display:block}.logo-main{font-family:Playfair Display,serif;font-size:32px;font-weight:500;letter-spacing:.5px}.logo-sub{font-family:Montserrat,sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;margin-top:2px;margin-left:2px}.search-wrapper{flex:1;display:flex;justify-content:center;max-width:600px}.search-bar{width:100%;background-color:#f3f3f3;border-radius:8px;display:flex;align-items:center;padding:10px 16px;gap:12px}.search-icon{color:#333;width:18px;height:18px}.search-bar input{border:none;background:transparent;width:100%;font-family:Montserrat,sans-serif;font-size:14px;color:#1a1a1a;outline:none}.search-bar input::placeholder{color:#888;font-weight:400}.user-actions{display:flex;align-items:center;gap:24px}.action-link{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.action-link:hover{color:#5e4042}.store-text{white-space:nowrap}.icon-only svg{display:block;cursor:pointer}.main-nav{border-top:1px solid transparent;padding-bottom:15px}.nav-list{display:flex;justify-content:center;flex-wrap:wrap;gap:32px;padding:10px 40px}.nav-list li{position:relative}.nav-list a{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#333;padding:5px 0;display:inline-block}.nav-list a:hover{color:#5e4042}.has-badge{position:relative}.badge{position:absolute;top:-12px;right:-10px;background-color:#a87b7b;color:#fff;font-size:9px;font-weight:600;padding:2px 6px;border-radius:10px;line-height:1;white-space:nowrap}.mobile-menu-checkbox{display:none}.mobile-menu-btn{display:none;cursor:pointer;color:#333}.hero-placeholder{height:80vh;background-color:#f9f9f9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#5e4042}.hero-placeholder h1{font-family:Playfair Display,serif;font-size:3rem;margin-bottom:1rem}@media (max-width: 1024px){.nav-list{gap:20px}.store-text{display:none}.search-wrapper{margin:0 20px}}@media (max-width: 768px){.top-bar{padding:15px 20px;flex-wrap:wrap}.search-wrapper{order:3;padding:0 8px;width:100%;max-width:100%;margin:0 0 15px}.user-actions{gap:16px}.main-nav{display:none;width:100%;background:#fff;border-top:1px solid #eee}.nav-list{flex-direction:column;align-items:center;gap:15px;padding:20px}.badge{position:relative;top:-2px;right:auto;margin-left:8px;vertical-align:middle}.mobile-menu-btn{display:block}.mobile-menu-checkbox:checked~.main-nav{display:block}}@media screen and (max-width: 475px){.store-link{display:none}.info-container{width:100vw;top:62%}}.icon-container{position:relative}.count-badge{position:absolute;top:-8px;right:-8px;font-size:10px;font-weight:600;height:18px;width:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #ffffff}.textPluslogo{display:flex;align-items:center;gap:8px;flex-shrink:0;text-decoration:none}.logo-icon{color:#5e4042}.logo-text{font-size:28px;font-weight:600;color:#1a1a1a;letter-spacing:-.5px}.mobile-header-left-side{display:flex;align-items:center;gap:15px}.categories-wrapper{position:relative;width:100%;z-index:1000}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;position:relative}.categories-header::-webkit-scrollbar{display:none}.category{position:relative;border-bottom:3px solid transparent;transition:border-color .35s ease,color .35s ease}.category:hover{border-bottom-color:var(--border-color)}.blur-overlay{position:fixed;top:var(--margin-top, 0px);left:0;width:100vw;height:calc(100vh - var(--margin-top, 0px));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffff47;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s ease;z-index:1000}.blur-overlay.active{opacity:1;visibility:visible}.list-category{padding:20px 30px;color:#111;background:#fff!important;height:auto;max-height:50vh;position:absolute;top:100%;left:0;width:100%;z-index:1003;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,transform .35s ease,visibility .35s ease;will-change:opacity,transform;box-shadow:0 18px 40px #0000001a;overflow-x:hidden;overflow-y:auto}.mega-menu-scroll-row{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.mega-menu-scroll-col{flex-shrink:0}.mega-menu-scroll-col.has-right-border{border-right:1px solid #e9e7e7}.collectionImage{border-radius:10px;height:70%!important}@media screen and (min-width: 476px){.list-category .mobile-submenu-card{aspect-ratio:4 / 3;overflow:hidden}.list-category .mobile-submenu-image.collectionImage{width:100%;height:100%!important;object-fit:cover;display:block}}.list-item>div{color:#585858}.list-item>div:hover{color:#000}.show-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.hide-dropdown{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px)}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px;height:auto;max-height:36vh;overflow-y:auto}.each-price{transition:transform .25s ease,font-weight .25s ease,color .25s ease}.each-price:hover{font-weight:700;transform:translate(4px)}.image-container{cursor:pointer;overflow:hidden}.image-container img{border-radius:12px;transition:transform .35s ease}.image-container:hover img{transform:scale(1.04)}.collection{height:max-content;cursor:pointer;transition:transform .25s ease}.collection:hover{transform:translateY(-2px)}.mobile-menu-container{height:100%;overflow-y:auto}.mobile-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mobile-menu-item{display:flex;align-items:center;justify-content:space-between;background:#f5f5f5;border-radius:8px;padding:14px;cursor:pointer;transition:background-color .2s ease}.mobile-menu-item:active{background:#ebebeb}.mobile-menu-label{font-size:11px;letter-spacing:.5px;color:#1a1a1a;line-height:1.3}.mobile-menu-arrow{font-size:18px!important;width:18px!important;height:18px!important;color:#999;flex-shrink:0}.mobile-menu-detail{padding:0}.mobile-menu-back{display:flex;align-items:center;gap:4px;padding:14px 0;cursor:pointer;font-size:16px;color:#1a1a1a}.mobile-menu-back mat-icon{font-size:22px!important;width:22px!important;height:22px!important;color:#1a1a1a!important}.mobile-submenu-sections{overflow-y:auto}.mobile-submenu-section{margin-bottom:20px}.mobile-submenu-card{position:relative;border-radius:12px;overflow:hidden;cursor:pointer}.mobile-submenu-image{display:block;width:100%;height:auto!important}.mobile-submenu-caption{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;font-size:14px;font-weight:700;letter-spacing:.6px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.5);background:linear-gradient(180deg,#0000,#0009)}.mobile-submenu-header{font-size:14px;font-weight:700;letter-spacing:.5px;color:#1a1a1a;margin-bottom:12px;cursor:pointer}.mobile-submenu-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mobile-submenu-item{background:#f5f5f5;border-radius:8px;padding:10px 14px;font-size:12px;font-weight:400;color:#333;cursor:pointer;text-align:center;transition:background-color .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-submenu-item:active{background:#ebebeb}.mobile-category-image{border-radius:50%;height:11vh;width:11vh;object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { 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", "accentColor"] }, { 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: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky", "categoryHeader"] }, { 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"] }, { kind: "component", type: MovingTextComponent, selector: "simpo-moving-text", inputs: ["data", "edit", "delete", "customClass", "index"] }] }); }
|
|
17478
17521
|
}
|
|
17479
17522
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, decorators: [{
|
|
17480
17523
|
type: Component,
|
|
@@ -17498,7 +17541,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
17498
17541
|
SpacingHorizontalDirective,
|
|
17499
17542
|
MovingTextComponent,
|
|
17500
17543
|
ContentFitDirective,
|
|
17501
|
-
], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\r\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n [class.margin-bottom]=\"shouldReserveMobileHeaderSpace\">\r\n <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\r\n simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\r\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\"\r\n [class.header--scrolled]=\"data?.styles?.shrinkOnScroll && isHeaderSticky && scrollValue > 0 && !edit\">\r\n <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\r\n <ng-container *ngIf=\"style?.headline?.display\">\r\n <div>\r\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n </div>\r\n </ng-container>\r\n\r\n <div *ngIf=\"style?.styling === 'Header1' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\r\n [class.p-2]=\"data?.styles?.shrinkOnScroll && isHeaderSticky && scrollValue > 0 && !edit\">\r\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header2' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\r\n [class.p-2]=\"data?.styles?.shrinkOnScroll && isHeaderSticky && scrollValue > 0 && !edit\">\r\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header3' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\r\n [class.p-2]=\"data?.styles?.shrinkOnScroll && isHeaderSticky && scrollValue > 0 && !edit\">\r\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header4' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\r\n [class.p-2]=\"data?.styles?.shrinkOnScroll && isHeaderSticky && scrollValue > 0 && !edit\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n\r\n <div [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" *ngIf=\"isEcommerceWebsite\"\r\n [simpoLayout]=\"screenWidth > 475 ? stylesLayout : undefined\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"ecommerce_header\"></ng-container>\r\n </div>\r\n\r\n <!-- <div class=\"input-group mx-2 mb-2 w-96\" *ngIf=\"isMobile && isEcommerceWebsite && !restrictCartBarInPages()\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search for items\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">search</mat-icon>\r\n </div> -->\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && !isMobile && data?.styles?.menuType === 'MEGA_MENU'\">\r\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n </ng-container>\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-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader() && data?.styles?.enableHeaderCarousel\">\r\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- <ng-container *ngIf=\"isEcommerceWebsite && isMobile && !restrictInPages()\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container> -->\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n <div class=\"header1\">\r\n <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\r\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 94 : ''\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n <div class=\"header1\">\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\r\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n <div class=\"header1\">\r\n <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\r\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n <div class=\"header1\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container> </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\r\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer mx-1\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? 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 + 80\" loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b>{{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 : \r\n ((content?.logo?.size >= 60 && content?.logo?.size <= 100) ? (20) : ((content?.logo?.size || 10) - 10))\"\r\n [class.w-75]=\"screenWidth < 475\" loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"\r\n (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n <div class=\"d-flex gap-3\"\r\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\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 category-btn\" type=\"button\"\r\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | lowercase | titlecase}}\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])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n\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\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\r\n (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\">\r\n <mat-icon>person_outline</mat-icon>\r\n Login\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn && !isMobile\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\" [style.color]=\"accentColor\"\r\n (click)=\"goToAccount('LOGIN')\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M12 13C14.7614 13 17 10.7614 17 8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8C7 10.7614 9.23858 13 12 13Z\"\r\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <path\r\n d=\"M20 21C20 18.8783 19.1571 16.8434 17.6569 15.3431C16.1566 13.8429 14.1217 13 12 13C9.87827 13 7.84344 13.8429 6.34315 15.3431C4.84285 16.8434 4 18.8783 4 21\"\r\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg>\r\n \r\n Login</button>\r\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && loggedIn\" [style.color]=\"accentColor\"\r\n (click)=\"goToAccount('PROFILE')\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M12 13C14.7614 13 17 10.7614 17 8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8C7 10.7614 9.23858 13 12 13Z\"\r\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <path\r\n d=\"M20 21C20 18.8783 19.1571 16.8434 17.6569 15.3431C16.1566 13.8429 14.1217 13 12 13C9.87827 13 7.84344 13.8429 6.34315 15.3431C4.84285 16.8434 4 18.8783 4 21\"\r\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg>\r\n Account</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n <div class=\"cart-footer\" [style.background]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n *ngIf=\"getCartItemsCount > 0 && !restrictCartBarInPages()\">\r\n <div class=\"d-flex justify-content-between px-3 py-2 h-100 align-items-center\">\r\n <div class=\"item-count fw-bold\">\r\n {{ getCartItemsCount ?? 3 }} {{ getCartItemsCount > 1 ? 'items' : 'item' }} in cart\r\n <!-- Total : \u20B9{{ getCartTotalAmount }} -->\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2 fw-bold\" (click)=\"goToCart()\">\r\n View Cart <mat-icon [simpoColor]=\"accentColor\">arrow_forward</mat-icon>\r\n </div>\r\n </div>\r\n\r\n </div>\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 class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</div>\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 #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n </div> -->\r\n <div class=\"w-75 d-flex align-items-center\" [ngClass]=\"{'justify-content-center' : !passbookAppStatus}\">\r\n <div class=\"input-group w-75 ml-2\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search For Items\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\r\n [style.color]=\"backgroundInfo?.accentColor\">\r\n <!-- <span class=\"animated-placeholder position-absolute\" \r\n [class.animate]=\"animatePlaceholder\"\r\n *ngIf=\"style?.searchBarPlaceholderList.length > 1 && style?.smartSearchBar\">\r\n {{ currentPlaceholder }}\r\n </span> -->\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType === 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n height=\"30\" version=\"1.1\">\r\n <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\n d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\n <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\n <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\n d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\r\n [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\n <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n </g>\r\n </svg>\r\n <div [style.color]=\"accentColor\">Schemes</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\">\r\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\r\n Pincode\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\r\n getPincode}}</div>\r\n\r\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your PIN Code unlocks\r\n </div>\r\n <div class=\"sub-text text-center f-14 pincode-text\">\r\n Fastest delivery date, Try-at-Home availability,\r\n Nearest store and In-store design!\r\n </div>\r\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n [class.error-border]=\"pinError\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n class=\"w-75 p-0\">\r\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n </div>\r\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n Please enter a valid pincode\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n {{getWishlistItemsCount}}</div>\r\n </div>\r\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n {{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\r\n stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n </div>\r\n <!-- (mouseleave)=\"showLogin = false\" -->\r\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your Account\r\n </div>\r\n <div class=\"sub-text text-center f-14\">\r\n Access account & manage your orders.\r\n </div>\r\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">Sign Up</div>\r\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n <!-- <div> -->\r\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\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;\"\r\n [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 [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [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\" id=\"link\"\r\n 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])\"\r\n (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<div #mobileOffcanvas class=\"offcanvas\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n data-bs-backdrop=\"false\"\r\n [ngClass]=\"{'offcanvas-end' : (style?.styling === 'Header1' || style?.styling === 'Header3') && !isEcommerceWebsite, 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4' || isEcommerceWebsite}\">\r\n <!-- <div class=\"offcanvas-header\" [simpoBackground]=\"style?.background\">\r\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container> -->\r\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\r\n <!-- <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n </div> -->\r\n <div class=\"offcanvas-body\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"mobileMenuListTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <div class=\"pages\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"offcanvas-footer\">\r\n <div class=\"canvas-button\">\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n <!-- <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-22 px-3 py-1\"\r\n (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon> -->\r\n\r\n\r\n <!-- <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"> -->\r\n\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b>{{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 [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n <div class=\"categories-wrapper\"\r\n *ngIf=\"(categoryList?.length > 0 || collectionList?.collections?.length > 0) && !isMobile\"\r\n (mouseleave)=\"showList = false; showCollections = false\">\r\n\r\n <div class=\"blur-overlay\" [class.active]=\"showList || showCollections\"></div>\r\n\r\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" [spacingHorizontal]=\"stylesLayout\"\r\n [style.background]=\"data?.styles?.headline?.color\">\r\n\r\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of megaMenu; let i = index\"\r\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n (mouseenter)=\"setChildMenu(ele)\" (click)=\"redirectionsOfMenu(ele)\">\r\n {{ele?.label}}\r\n </div>\r\n </div>\r\n\r\n <!-- [class.hide-dropdown]=\"!showList\" -->\r\n <div class=\"list-category\" [class.show-dropdown]=\"showList\" [class.hide-dropdown]=\"!showList\">\r\n <div class=\"row w-100 h-100 mega-menu-scroll-row\">\r\n <ng-container *ngFor=\"let ele of selectedCategory; let i = index; let last = last\">\r\n <div class=\"mega-menu-scroll-col\"\r\n [ngClass]=\"[\r\n ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES') ? 'col-3' : 'col-2',\r\n ele?.children?.length > 0 && !last ? 'has-right-border' : ''\r\n ]\">\r\n\r\n <ng-container *ngIf=\"ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES' )\">\r\n <div class=\"mobile-submenu-card mb-3\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"ele.imageUrl\">\r\n <img [src]=\"ele.imageUrl\" [alt]=\"ele?.label\" class=\"mobile-submenu-image collectionImage\" />\r\n <div class=\"mobile-submenu-caption\">{{ele?.label | uppercase}}</div>\r\n </div>\r\n <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"!ele.imageUrl\">\r\n {{ele?.label | titlecase}}\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\"\r\n *ngIf=\"ele?.children?.length > 0\">\r\n {{ele?.label | titlecase}}\r\n </div>\r\n <ng-container *ngIf=\"ele?.children && ele?.children.length > 0\">\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let child of ele?.children\">\r\n <div (click)=\"redirectionsOfMenu(child)\" class=\"cursor-pointer\">\r\n {{child?.label | titlecase}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileMenuListTemplate>\r\n <div class=\"mobile-menu-container\">\r\n\r\n <div class=\"mobile-menu-grid\" *ngIf=\"!selectedMobileMenu\">\r\n <div class=\"mobile-menu-item\" *ngFor=\"let ele of megaMenu\"\r\n (click)=\"ele?.children?.length ? selectMobileMenu(ele) : redirectionsOfMenu(ele)\"\r\n [attr.data-bs-dismiss]=\"ele?.children?.length ? null : 'offcanvas'\">\r\n <span class=\"mobile-menu-label\">{{ele?.label | uppercase}}</span>\r\n <mat-icon class=\"mobile-menu-arrow\" *ngIf=\"ele?.children?.length\">chevron_right</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mobile-menu-detail\" *ngIf=\"selectedMobileMenu\">\r\n <div class=\"mobile-menu-back\" (click)=\"goBackMobileMenu()\">\r\n <mat-icon>chevron_left</mat-icon>\r\n <span>{{selectedMobileMenu?.label | titlecase}}</span>\r\n </div>\r\n\r\n <div class=\"mobile-submenu-sections\">\r\n <ng-container *ngFor=\"let child of selectedMobileMenu?.children\">\r\n <div class=\"mobile-submenu-section\">\r\n <ng-container\r\n *ngIf=\"child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' )\">\r\n <div class=\"mobile-submenu-card\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\"\r\n *ngIf=\"child.imageUrl\">\r\n <img [src]=\"child.imageUrl\" [alt]=\"child?.label\" class=\"mobile-submenu-image collectionImage\" />\r\n <div class=\"mobile-submenu-caption\">{{child?.label | uppercase}}</div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container\r\n *ngIf=\"!(child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' ) && child.imageUrl)\">\r\n <div class=\"mobile-submenu-header\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\">\r\n {{child?.label | uppercase}}</div>\r\n\r\n <div class=\"mobile-submenu-grid\" *ngIf=\"child?.children?.length\">\r\n <div class=\"mobile-submenu-item\" *ngFor=\"let sub of child?.children\" (click)=\"redirectionsOfMenu(sub)\"\r\n data-bs-dismiss=\"offcanvas\">\r\n {{sub?.label | titlecase}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileCategoryHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\" [class.margin-top-mob]=\"isHeaderSticky\">\r\n <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n <div class=\"cat-img d-flex justify-content-center align-items-center w-100\">\r\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"br-12 mobile-category-image\">\r\n </div>\r\n <div class=\"text-center category-name\">{{ele?.categoryName}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerce_header>\r\n <header class=\"site-header\">\r\n <!-- Top Bar: Logo, Search, User Actions -->\r\n <div class=\"top-bar\">\r\n\r\n <!-- Mobile Menu Toggle (Checkbox Hack) -->\r\n <div [ngClass]=\"{'mobile-header-left-side': screenWidth <= 475}\">\r\n <label for=\"mobile-menu-checkbox\" class=\"mobile-menu-btn\" data-bs-toggle=\"offcanvas\"\r\n data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\" aria-label=\"Toggle menu\"\r\n (click)=\"goBackMobileMenu()\">\r\n <svg *ngIf=\"!isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\r\n <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\r\n <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\r\n </svg>\r\n <svg *ngIf=\"isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n <line x1=\"6\" y1=\"18\" x2=\"18\" y2=\"6\"></line>\r\n </svg>\r\n </label>\r\n\r\n <!-- Logo Section -->\r\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"Logo\" class=\"logo-img\" [width]=\"content?.logo?.size + 15\"\r\n [height]=\"content?.logo?.size\">\r\n </a>\r\n\r\n <a class=\"textPluslogo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n && content?.logo?.text?.isText \r\n && content?.logo?.text?.isIcon \r\n && content?.logo?.text?.url\">\r\n\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"Icon\" class=\"logo-icon\"\r\n [width]=\"content?.logo?.size + 15\" [height]=\"content?.logo?.size\">\r\n\r\n <span class=\"logo-text\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 475\">\r\n {{ content?.siteName?.value }}\r\n </span>\r\n </a>\r\n\r\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n && content?.logo?.text?.isText \r\n && !content?.logo?.text?.isIcon\">\r\n\r\n <span class=\"logo-main\" [simpoColor]=\"simpoColor\">\r\n {{ content?.siteName?.value }}\r\n </span>\r\n </a>\r\n </div>\r\n\r\n <!-- Search Bar -->\r\n <div class=\"search-wrapper\"\r\n *ngIf=\"screenWidth > 475 && content?.showSearchBar && data?.styles?.menuType !== 'DROPDOWN_MENU'\">\r\n <div class=\"search-bar\">\r\n <!-- Search Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n aria-label=\"Search\">\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown menu style -->\r\n <div class=\"dropdown_menu\" *ngIf=\"screenWidth > 475 && data?.styles?.menuType === 'DROPDOWN_MENU'\"\r\n (mouseleave)=\"showList = false; selectedCategory = null\">\r\n <div class=\"dd-nav\">\r\n <div class=\"dd-tab-wrap\" *ngFor=\"let ele of megaMenu\">\r\n <button type=\"button\" class=\"dd-tab\" [class.dd-tab-active]=\"showList && selectedCategory === ele?.children\"\r\n (click)=\"ele?.children?.length ? toggleChildMenu(ele) : redirectionsOfMenu(ele)\">\r\n <span class=\"text-nowrap\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n [simpoColor]=\"simpoColor\">{{ele?.label | titlecase}}</span>\r\n <svg *ngIf=\"ele?.children?.length\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" [simpoColor]=\"simpoColor\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289C6.68342 7.90237 7.31658 7.90237 7.70711 8.29289L12 12.5858L16.2929 8.29289C16.6834 7.90237 17.3166 7.90237 17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071Z\"\r\n fill=\"#000000\" />\r\n </svg>\r\n </button>\r\n\r\n <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory === ele?.children && ele?.children?.length\"\r\n (click)=\"$event.stopPropagation()\">\r\n <div class=\"dd-item\" *ngFor=\"let child of ele?.children\" [class.open-submenu]=\"openSubmenuChild === child\"\r\n (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : toggleSubMenu(child, $event)\">\r\n <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\r\n <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">›</span>\r\n\r\n <div class=\"dd-submenu\" *ngIf=\"child?.children?.length && openSubmenuChild === child\"\r\n style=\"display: block;\">\r\n <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\r\n (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\r\n <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <!-- Right Actions -->\r\n <div class=\"user-actions\">\r\n\r\n <ng-container *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar\">\r\n <a class=\"action-link icon-only dropdown-search-toggle\"\r\n (click)=\"showDropdownDesktopSearch = !showDropdownDesktopSearch\" aria-label=\"Toggle search\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n </a>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"storeAvaiable\">\r\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n *ngIf=\"!getPincode\">\r\n <!-- <svg width=\"20\" height=\"20\" viewBox=\"0 0 17 17\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\r\n stroke=\"currentColor\" fill=\"none\" [simpoColor]=\"simpoColor\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n <path\r\n d=\"M8.5 0.5c-3.032 0-5.5 2.467-5.5 5.5 0 4.373 4.913 10.086 5.122 10.328l0.378 0.435 0.378-0.436c0.209-0.241 5.122-5.954 5.122-10.327 0-3.033-2.468-5.5-5.5-5.5zM8.5 15.215c-1.146-1.424-4.5-5.879-4.5-9.215 0-2.481 2.019-4.5 4.5-4.5s4.5 2.019 4.5 4.5c0 3.333-3.354 7.791-4.5 9.215zM8.5 3.139c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zM8.5 8.139c-1.103 0-2-0.897-2-2s0.897-2 2-2 2 0.897 2 2-0.897 2-2 2z\"\r\n fill=\"#000000\" />\r\n </svg> -->\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 512 512\"\r\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"currentColor\">\r\n <g>\r\n <path\r\n d=\"M341.476 338.285c54.483-85.493 47.634-74.827 49.204-77.056C410.516 233.251 421 200.322 421 166 421 74.98 347.139 0 256 0 165.158 0 91 74.832 91 166c0 34.3 10.704 68.091 31.19 96.446l48.332 75.84C118.847 346.227 31 369.892 31 422c0 18.995 12.398 46.065 71.462 67.159C143.704 503.888 198.231 512 256 512c108.025 0 225-30.472 225-90 0-52.117-87.744-75.757-139.524-83.715zm-194.227-92.34a15.57 15.57 0 0 0-.517-.758C129.685 221.735 121 193.941 121 166c0-75.018 60.406-136 135-136 74.439 0 135 61.009 135 136 0 27.986-8.521 54.837-24.646 77.671-1.445 1.906 6.094-9.806-110.354 172.918L147.249 245.945zM256 482c-117.994 0-195-34.683-195-60 0-17.016 39.568-44.995 127.248-55.901l55.102 86.463a14.998 14.998 0 0 0 25.298 0l55.101-86.463C411.431 377.005 451 404.984 451 422c0 25.102-76.313 60-195 60z\">\r\n </path>\r\n <path\r\n d=\"M256 91c-41.355 0-75 33.645-75 75s33.645 75 75 75 75-33.645 75-75-33.645-75-75-75zm0 120c-24.813 0-45-20.187-45-45s20.187-45 45-45 45 20.187 45 45-20.187 45-45 45z\">\r\n </path>\r\n </g>\r\n </svg>\r\n\r\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">Enter Pincode</span>\r\n\r\n </a>\r\n\r\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7\"></path>\r\n <path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"></path>\r\n <path d=\"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4\"></path>\r\n <path d=\"M2 7h20\"></path>\r\n <path\r\n d=\"M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7\">\r\n </path>\r\n </svg>\r\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">{{\"Delivering to: \" +\r\n getPincode}}</span>\r\n\r\n </a>\r\n\r\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your PIN Code unlocks\r\n </div>\r\n <div class=\"sub-text text-center f-14 pincode-text\">\r\n Fastest delivery date, Try-at-Home availability,\r\n Nearest store and In-store design!\r\n </div>\r\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n [class.error-border]=\"pinError\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n class=\"w-75 p-0\">\r\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n </div>\r\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n Please enter a valid pincode\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <a class=\"action-link icon-only login-btn\" *ngIf=\"!loggedIn\"\r\n (mouseenter)=\"showLogin = true;showPincodeInput = false\" (click)=\"showLogin = !showLogin\">\r\n <!-- User Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n </svg>\r\n </a>\r\n\r\n <a class=\"action-link icon-only\" (click)=\"goToAccount('PROFILE')\" *ngIf=\"loggedIn\">\r\n <!-- User Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n </svg>\r\n </a>\r\n\r\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your Account\r\n </div>\r\n <div class=\"sub-text text-center f-14\">\r\n Access account & manage your orders.\r\n </div>\r\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">Sign Up</div>\r\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n </div>\r\n </div>\r\n\r\n <a class=\"action-link icon-only icon-container wishlist-icon\" (click)=\"goToWishlist()\">\r\n <!-- Heart Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path\r\n d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\">\r\n </path>\r\n </svg>\r\n <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</span>\r\n </a>\r\n\r\n <a class=\"action-link icon-only icon-container cart-icon\" (click)=\"goToCart()\">\r\n <!-- Shopping Bag Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z\"></path>\r\n <path d=\"M3 6h18\"></path>\r\n <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\r\n </svg>\r\n <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</span>\r\n </a>\r\n\r\n <div class=\"dropdown-search-expand\"\r\n *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar && showDropdownDesktopSearch\">\r\n <div class=\"dropdown-search-box\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"dropdown-search-icon\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n <input type=\"text\" placeholder=\"Search for...\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n aria-label=\"Search\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"dropdown-search-close\" (click)=\"showDropdownDesktopSearch = false\" aria-label=\"Close search\">\r\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"search-wrapper\" *ngIf=\"screenWidth <= 475 && content?.showSearchBar\">\r\n <div class=\"search-bar\">\r\n <!-- Search Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n aria-label=\"Search\">\r\n </div>\r\n </div>\r\n\r\n </header>\r\n</ng-template>", styles: [".total-container div[simpoSticky]:not(.header--scrolled){top:0!important;left:0!important;right:0!important;margin:0 auto!important;width:100%!important}.total-container div[simpoSticky].header--scrolled,.header--scrolled{top:10px!important;left:20%!important;right:20%!important;width:60%!important;overflow:hidden!important;border-radius:60px!important;box-shadow:0 10px 40px #0000001f!important;z-index:1000001!important;transition:width .4s cubic-bezier(.16,1,.3,1)}@media screen and (max-width: 475px){.total-container div[simpoSticky].header--scrolled,.header--scrolled{top:10px!important;left:5%!important;right:5%!important;width:90%!important}}.w-40{width:40%!important}*{font-family:var(--website-font-family)}.animated-placeholder{left:12%;transform:translateY(-50%);transition:all .4s ease;font-size:14px;top:49%;color:#6f6f6f;font-weight:300}.animated-placeholder.animate{transform:translateY(-150%);opacity:0}.w-5{width:5%}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem;flex:0 0 auto}.category-name{text-transform:uppercase;white-space:normal;word-break:break-word;line-height:1.2;font-size:11px;letter-spacing:.4px;text-align:center;max-width:90px}.margin-bottom{margin-bottom:var(--margin-top, 0px)}@media only screen and (max-width : 475px){.w-5{width:100%!important}.logo-main,.logo-text{font-size:17px!important}.left-logo-text{padding-top:10px}.mob-form-control{width:96%;border-radius:12px!important}.input-group mat-icon{width:10%!important}.categories-header{height:unset!important}.margin-top-mob{margin-top:var(--margin-top, 0px)}.w-98{width:98%}.w-96{width:96%}.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}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#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:-1px}.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}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;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}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.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}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:100%;z-index:1000000000}@media screen and (max-width: 475px){.offcanvas{top:var(--margin-top, 0px)!important;height:calc(100vh - var(--margin-top, 0px))!important;display:flex;flex-direction:column}.offcanvas-body{flex:1 1 auto;height:auto}.offcanvas-footer{height:auto}}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.mobileLoginButton{width:100%;height:40px;border-radius:8px;outline:none;background:transparent;border:none;display:flex;align-items:center;justify-content:center}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:88%}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:10%}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:auto;max-height:50vh;overflow-y:auto;position:absolute;width:100%;z-index:1001}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:6px;height:40px}.h-45{height:45vh}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:0;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}.cart-footer{position:fixed;width:96%;height:45px;bottom:65px;z-index:100;left:8px;border-radius:10px}.item-count{align-content:center}.fs-22{font-size:22px}.w-15{width:15%!important}.site-header{width:100%;border-bottom:1px solid transparent}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1440px;margin:0 auto}.dropdown_menu{position:relative;min-width:420px;max-width:55%;display:flex;justify-content:center}.dd-nav{display:flex;align-items:flex-start;gap:18px;width:100%;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;max-height:400px;height:500px;margin-bottom:-460px;padding-top:5px;scrollbar-width:none;pointer-events:none}.dd-nav::-webkit-scrollbar{display:none}.dd-tab-wrap{position:relative;display:inline-flex;pointer-events:auto}.dd-tab{border:none;background:transparent;padding:6px 2px;font-size:15px;font-weight:500;color:#30343b;line-height:1;border-bottom:3px solid transparent;display:inline-flex;align-items:center;gap:8px}.dd-tab:hover,.dd-tab.dd-tab-active{border-bottom-color:#2f3338}.dd-panel{position:absolute;top:100%;left:0;background:#fff;border:1px solid #ececef;box-shadow:0 12px 35px #1d212929;padding:14px 0;z-index:1006;min-width:220px}.dd-item{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;font-size:16px;color:#2c2f35;transition:background-color .2s ease;cursor:pointer}.dd-item:hover{background-color:#f5f6f8}.dd-item-arrow{font-size:20px;line-height:1;color:#5a5f66}.dd-submenu{position:absolute;top:-10px;left:calc(100% + 3px);background:#fff;border:1px solid #ececef;box-shadow:0 10px 26px #1d212926;padding:10px 0;display:none;z-index:1007}.dd-item:hover .dd-submenu{display:block}.dd-sub-item{padding:10px 16px;font-size:15px;color:#2c2f35;transition:background-color .2s ease}.dd-sub-item:hover{background-color:#f5f6f8}.dropdown-search-toggle{cursor:pointer}.dropdown-search-expand{position:absolute;top:calc(100% + 10px);right:0;min-width:320px;z-index:1010}.dropdown-search-box{width:100%;background:#f3f3f3;border:1px solid #e7e7e7;display:flex;align-items:center;gap:12px;padding:10px 14px}.dropdown-search-icon{color:#1f2328;flex:0 0 auto}.dropdown-search-box input{border:none;background:transparent;width:100%;font-size:14px;color:#2f3338;outline:none}.dropdown-search-close{color:#545861;cursor:pointer;flex:0 0 auto}.logo{display:flex;flex-direction:column;align-items:flex-start;color:#5e4042;line-height:1;text-decoration:auto}.logo-img{display:block}.logo-main{font-family:Playfair Display,serif;font-size:32px;font-weight:500;letter-spacing:.5px}.logo-sub{font-family:Montserrat,sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;margin-top:2px;margin-left:2px}.search-wrapper{flex:1;display:flex;justify-content:center;max-width:600px}.search-bar{width:100%;background-color:#f3f3f3;border-radius:8px;display:flex;align-items:center;padding:10px 16px;gap:12px}.search-icon{color:#333;width:18px;height:18px}.search-bar input{border:none;background:transparent;width:100%;font-family:Montserrat,sans-serif;font-size:14px;color:#1a1a1a;outline:none}.search-bar input::placeholder{color:#888;font-weight:400}.user-actions{display:flex;align-items:center;gap:24px}.action-link{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.action-link:hover{color:#5e4042}.store-text{white-space:nowrap}.icon-only svg{display:block;cursor:pointer}.main-nav{border-top:1px solid transparent;padding-bottom:15px}.nav-list{display:flex;justify-content:center;flex-wrap:wrap;gap:32px;padding:10px 40px}.nav-list li{position:relative}.nav-list a{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#333;padding:5px 0;display:inline-block}.nav-list a:hover{color:#5e4042}.has-badge{position:relative}.badge{position:absolute;top:-12px;right:-10px;background-color:#a87b7b;color:#fff;font-size:9px;font-weight:600;padding:2px 6px;border-radius:10px;line-height:1;white-space:nowrap}.mobile-menu-checkbox{display:none}.mobile-menu-btn{display:none;cursor:pointer;color:#333}.hero-placeholder{height:80vh;background-color:#f9f9f9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#5e4042}.hero-placeholder h1{font-family:Playfair Display,serif;font-size:3rem;margin-bottom:1rem}@media (max-width: 1024px){.nav-list{gap:20px}.store-text{display:none}.search-wrapper{margin:0 20px}}@media (max-width: 768px){.top-bar{padding:15px 20px;flex-wrap:wrap}.search-wrapper{order:3;padding:0 8px;width:100%;max-width:100%;margin:0 0 15px}.user-actions{gap:16px}.main-nav{display:none;width:100%;background:#fff;border-top:1px solid #eee}.nav-list{flex-direction:column;align-items:center;gap:15px;padding:20px}.badge{position:relative;top:-2px;right:auto;margin-left:8px;vertical-align:middle}.mobile-menu-btn{display:block}.mobile-menu-checkbox:checked~.main-nav{display:block}}@media screen and (max-width: 475px){.store-link{display:none}.info-container{width:100vw;top:62%}}.icon-container{position:relative}.count-badge{position:absolute;top:-8px;right:-8px;font-size:10px;font-weight:600;height:18px;width:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #ffffff}.textPluslogo{display:flex;align-items:center;gap:8px;flex-shrink:0;text-decoration:none}.logo-icon{color:#5e4042}.logo-text{font-size:28px;font-weight:600;color:#1a1a1a;letter-spacing:-.5px}.mobile-header-left-side{display:flex;align-items:center;gap:15px}.categories-wrapper{position:relative;width:100%;z-index:1000}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;position:relative}.categories-header::-webkit-scrollbar{display:none}.category{position:relative;border-bottom:3px solid transparent;transition:border-color .35s ease,color .35s ease}.category:hover{border-bottom-color:var(--border-color)}.blur-overlay{position:fixed;top:var(--margin-top, 0px);left:0;width:100vw;height:calc(100vh - var(--margin-top, 0px));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffff47;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s ease;z-index:1000}.blur-overlay.active{opacity:1;visibility:visible}.list-category{padding:20px 30px;color:#111;background:#fff!important;height:auto;max-height:50vh;position:absolute;top:100%;left:0;width:100%;z-index:1003;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,transform .35s ease,visibility .35s ease;will-change:opacity,transform;box-shadow:0 18px 40px #0000001a;overflow-x:hidden;overflow-y:auto}.mega-menu-scroll-row{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.mega-menu-scroll-col{flex-shrink:0}.mega-menu-scroll-col.has-right-border{border-right:1px solid #e9e7e7}.collectionImage{border-radius:10px;height:70%!important}@media screen and (min-width: 476px){.list-category .mobile-submenu-card{aspect-ratio:4 / 3;overflow:hidden}.list-category .mobile-submenu-image.collectionImage{width:100%;height:100%!important;object-fit:cover;display:block}}.list-item>div{color:#585858}.list-item>div:hover{color:#000}.show-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.hide-dropdown{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px)}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px;height:auto;max-height:36vh;overflow-y:auto}.each-price{transition:transform .25s ease,font-weight .25s ease,color .25s ease}.each-price:hover{font-weight:700;transform:translate(4px)}.image-container{cursor:pointer;overflow:hidden}.image-container img{border-radius:12px;transition:transform .35s ease}.image-container:hover img{transform:scale(1.04)}.collection{height:max-content;cursor:pointer;transition:transform .25s ease}.collection:hover{transform:translateY(-2px)}.mobile-menu-container{height:100%;overflow-y:auto}.mobile-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mobile-menu-item{display:flex;align-items:center;justify-content:space-between;background:#f5f5f5;border-radius:8px;padding:14px;cursor:pointer;transition:background-color .2s ease}.mobile-menu-item:active{background:#ebebeb}.mobile-menu-label{font-size:11px;letter-spacing:.5px;color:#1a1a1a;line-height:1.3}.mobile-menu-arrow{font-size:18px!important;width:18px!important;height:18px!important;color:#999;flex-shrink:0}.mobile-menu-detail{padding:0}.mobile-menu-back{display:flex;align-items:center;gap:4px;padding:14px 0;cursor:pointer;font-size:16px;color:#1a1a1a}.mobile-menu-back mat-icon{font-size:22px!important;width:22px!important;height:22px!important;color:#1a1a1a!important}.mobile-submenu-sections{overflow-y:auto}.mobile-submenu-section{margin-bottom:20px}.mobile-submenu-card{position:relative;border-radius:12px;overflow:hidden;cursor:pointer}.mobile-submenu-image{display:block;width:100%;height:auto!important}.mobile-submenu-caption{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;font-size:14px;font-weight:700;letter-spacing:.6px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.5);background:linear-gradient(180deg,#0000,#0009)}.mobile-submenu-header{font-size:14px;font-weight:700;letter-spacing:.5px;color:#1a1a1a;margin-bottom:12px;cursor:pointer}.mobile-submenu-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mobile-submenu-item{background:#f5f5f5;border-radius:8px;padding:10px 14px;font-size:12px;font-weight:400;color:#333;cursor:pointer;text-align:center;transition:background-color .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-submenu-item:active{background:#ebebeb}.mobile-category-image{border-radius:50%;height:11vh;width:11vh;object-fit:cover}\n"] }]
|
|
17544
|
+
], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\r\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n [class.margin-bottom]=\"shouldReserveMobileHeaderSpace\">\r\n <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\r\n simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\r\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\"\r\n [class.header--scrolled]=\"data?.styles?.shrinkOnScroll && isHeaderSticky && scrollValue > 0 && !edit\">\r\n <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\r\n <ng-container *ngIf=\"style?.headline?.display\">\r\n <div>\r\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n </div>\r\n </ng-container>\r\n\r\n <div *ngIf=\"style?.styling === 'Header1' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\r\n [class.p-2]=\"data?.styles?.shrinkOnScroll && isHeaderSticky && scrollValue > 0 && !edit\">\r\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header2' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\r\n [class.p-2]=\"data?.styles?.shrinkOnScroll && isHeaderSticky && scrollValue > 0 && !edit\">\r\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header3' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\r\n [class.p-2]=\"data?.styles?.shrinkOnScroll && isHeaderSticky && scrollValue > 0 && !edit\">\r\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header4' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\r\n [class.p-2]=\"data?.styles?.shrinkOnScroll && isHeaderSticky && scrollValue > 0 && !edit\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n\r\n <div [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" *ngIf=\"isEcommerceWebsite\"\r\n [simpoLayout]=\"screenWidth > 475 ? stylesLayout : undefined\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"ecommerce_header\"></ng-container>\r\n </div>\r\n\r\n <!-- <div class=\"input-group mx-2 mb-2 w-96\" *ngIf=\"isMobile && isEcommerceWebsite && !restrictCartBarInPages()\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search for items\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">search</mat-icon>\r\n </div> -->\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && !isMobile && data?.styles?.menuType === 'MEGA_MENU'\">\r\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n </ng-container>\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-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader() && data?.styles?.enableHeaderCarousel\">\r\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- <ng-container *ngIf=\"isEcommerceWebsite && isMobile && !restrictInPages()\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container> -->\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n <div class=\"header1\">\r\n <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\r\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 94 : ''\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n <div class=\"header1\">\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\r\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n <div class=\"header1\">\r\n <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\r\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n <div class=\"header1\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container> </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\r\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer mx-1\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? 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 + 80\" loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b>{{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 : \r\n ((content?.logo?.size >= 60 && content?.logo?.size <= 100) ? (20) : ((content?.logo?.size || 10) - 10))\"\r\n [class.w-75]=\"screenWidth < 475\" loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"\r\n (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n <div class=\"d-flex gap-3\"\r\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\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 category-btn\" type=\"button\"\r\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | lowercase | titlecase}}\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])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n\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\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\r\n (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\">\r\n <mat-icon>person_outline</mat-icon>\r\n Login\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn && !isMobile\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\" [style.color]=\"accentColor\"\r\n (click)=\"goToAccount('LOGIN')\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M12 13C14.7614 13 17 10.7614 17 8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8C7 10.7614 9.23858 13 12 13Z\"\r\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <path\r\n d=\"M20 21C20 18.8783 19.1571 16.8434 17.6569 15.3431C16.1566 13.8429 14.1217 13 12 13C9.87827 13 7.84344 13.8429 6.34315 15.3431C4.84285 16.8434 4 18.8783 4 21\"\r\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg>\r\n \r\n Login</button>\r\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && loggedIn\" [style.color]=\"accentColor\"\r\n (click)=\"goToAccount('PROFILE')\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M12 13C14.7614 13 17 10.7614 17 8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8C7 10.7614 9.23858 13 12 13Z\"\r\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <path\r\n d=\"M20 21C20 18.8783 19.1571 16.8434 17.6569 15.3431C16.1566 13.8429 14.1217 13 12 13C9.87827 13 7.84344 13.8429 6.34315 15.3431C4.84285 16.8434 4 18.8783 4 21\"\r\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg>\r\n Account</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n <div class=\"cart-footer\" [style.background]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n *ngIf=\"getCartItemsCount > 0 && !restrictCartBarInPages()\">\r\n <div class=\"d-flex justify-content-between px-3 py-2 h-100 align-items-center\">\r\n <div class=\"item-count fw-bold\">\r\n {{ getCartItemsCount ?? 3 }} {{ getCartItemsCount > 1 ? 'items' : 'item' }} in cart\r\n <!-- Total : \u20B9{{ getCartTotalAmount }} -->\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2 fw-bold\" (click)=\"goToCart()\">\r\n View Cart <mat-icon [simpoColor]=\"accentColor\">arrow_forward</mat-icon>\r\n </div>\r\n </div>\r\n\r\n </div>\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 class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</div>\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 #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n </div> -->\r\n <div class=\"w-75 d-flex align-items-center\" [ngClass]=\"{'justify-content-center' : !passbookAppStatus}\">\r\n <div class=\"input-group w-75 ml-2\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search For Items\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\" (click)=\"handleSearchInputClick($event)\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\r\n [style.color]=\"backgroundInfo?.accentColor\">\r\n <!-- <span class=\"animated-placeholder position-absolute\" \r\n [class.animate]=\"animatePlaceholder\"\r\n *ngIf=\"style?.searchBarPlaceholderList.length > 1 && style?.smartSearchBar\">\r\n {{ currentPlaceholder }}\r\n </span> -->\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType === 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n height=\"30\" version=\"1.1\">\r\n <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\n d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\n <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\n <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\n d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\r\n [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\n <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n </g>\r\n </svg>\r\n <div [style.color]=\"accentColor\">Schemes</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\">\r\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\r\n Pincode\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\r\n getPincode}}</div>\r\n\r\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your PIN Code unlocks\r\n </div>\r\n <div class=\"sub-text text-center f-14 pincode-text\">\r\n Fastest delivery date, Try-at-Home availability,\r\n Nearest store and In-store design!\r\n </div>\r\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n [class.error-border]=\"pinError\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n class=\"w-75 p-0\">\r\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n </div>\r\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n Please enter a valid pincode\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n {{getWishlistItemsCount}}</div>\r\n </div>\r\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n {{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\r\n stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n </div>\r\n <!-- (mouseleave)=\"showLogin = false\" -->\r\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your Account\r\n </div>\r\n <div class=\"sub-text text-center f-14\">\r\n Access account & manage your orders.\r\n </div>\r\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">Sign Up</div>\r\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n <!-- <div> -->\r\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\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;\"\r\n [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 [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [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\" id=\"link\"\r\n 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])\"\r\n (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<div #mobileOffcanvas class=\"offcanvas\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n data-bs-backdrop=\"false\"\r\n [ngClass]=\"{'offcanvas-end' : (style?.styling === 'Header1' || style?.styling === 'Header3') && !isEcommerceWebsite, 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4' || isEcommerceWebsite}\">\r\n <!-- <div class=\"offcanvas-header\" [simpoBackground]=\"style?.background\">\r\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container> -->\r\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\r\n <!-- <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n </div> -->\r\n <div class=\"offcanvas-body\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"mobileMenuListTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <div class=\"pages\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"offcanvas-footer\">\r\n <div class=\"canvas-button\">\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n <!-- <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-22 px-3 py-1\"\r\n (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon> -->\r\n\r\n\r\n <!-- <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"> -->\r\n\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b>{{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 [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n <div class=\"categories-wrapper\"\r\n *ngIf=\"(categoryList?.length > 0 || collectionList?.collections?.length > 0) && !isMobile\"\r\n (mouseleave)=\"showList = false; showCollections = false\">\r\n\r\n <div class=\"blur-overlay\" [class.active]=\"showList || showCollections\"></div>\r\n\r\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" [spacingHorizontal]=\"stylesLayout\"\r\n [style.background]=\"data?.styles?.headline?.color\">\r\n\r\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of megaMenu; let i = index\"\r\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n (mouseenter)=\"setChildMenu(ele)\" (click)=\"redirectionsOfMenu(ele)\">\r\n {{ele?.label}}\r\n </div>\r\n </div>\r\n\r\n <!-- [class.hide-dropdown]=\"!showList\" -->\r\n <div class=\"list-category\" [class.show-dropdown]=\"showList\" [class.hide-dropdown]=\"!showList\">\r\n <div class=\"row w-100 h-100 mega-menu-scroll-row\">\r\n <ng-container *ngFor=\"let ele of selectedCategory; let i = index; let last = last\">\r\n <div class=\"mega-menu-scroll-col\"\r\n [ngClass]=\"[\r\n ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES') ? 'col-3' : 'col-2',\r\n ele?.children?.length > 0 && !last ? 'has-right-border' : ''\r\n ]\">\r\n\r\n <ng-container *ngIf=\"ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES' )\">\r\n <div class=\"mobile-submenu-card mb-3\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"ele.imageUrl\">\r\n <img [src]=\"ele.imageUrl\" [alt]=\"ele?.label\" class=\"mobile-submenu-image collectionImage\" />\r\n <div class=\"mobile-submenu-caption\">{{ele?.label | uppercase}}</div>\r\n </div>\r\n <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"!ele.imageUrl\">\r\n {{ele?.label | titlecase}}\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\"\r\n *ngIf=\"ele?.children?.length > 0\">\r\n {{ele?.label | titlecase}}\r\n </div>\r\n <ng-container *ngIf=\"ele?.children && ele?.children.length > 0\">\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let child of ele?.children\">\r\n <div (click)=\"redirectionsOfMenu(child)\" class=\"cursor-pointer\">\r\n {{child?.label | titlecase}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileMenuListTemplate>\r\n <div class=\"mobile-menu-container\">\r\n\r\n <div class=\"mobile-menu-grid\" *ngIf=\"!selectedMobileMenu\">\r\n <div class=\"mobile-menu-item\" *ngFor=\"let ele of megaMenu\"\r\n (click)=\"ele?.children?.length ? selectMobileMenu(ele) : redirectionsOfMenu(ele)\"\r\n [attr.data-bs-dismiss]=\"ele?.children?.length ? null : 'offcanvas'\">\r\n <span class=\"mobile-menu-label\">{{ele?.label | uppercase}}</span>\r\n <mat-icon class=\"mobile-menu-arrow\" *ngIf=\"ele?.children?.length\">chevron_right</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mobile-menu-detail\" *ngIf=\"selectedMobileMenu\">\r\n <div class=\"mobile-menu-back\" (click)=\"goBackMobileMenu()\">\r\n <mat-icon>chevron_left</mat-icon>\r\n <span>{{selectedMobileMenu?.label | titlecase}}</span>\r\n </div>\r\n\r\n <div class=\"mobile-submenu-sections\">\r\n <ng-container *ngFor=\"let child of selectedMobileMenu?.children\">\r\n <div class=\"mobile-submenu-section\">\r\n <ng-container\r\n *ngIf=\"child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' )\">\r\n <div class=\"mobile-submenu-card\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\"\r\n *ngIf=\"child.imageUrl\">\r\n <img [src]=\"child.imageUrl\" [alt]=\"child?.label\" class=\"mobile-submenu-image collectionImage\" />\r\n <div class=\"mobile-submenu-caption\">{{child?.label | uppercase}}</div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container\r\n *ngIf=\"!(child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' ) && child.imageUrl)\">\r\n <div class=\"mobile-submenu-header\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\">\r\n {{child?.label | uppercase}}</div>\r\n\r\n <div class=\"mobile-submenu-grid\" *ngIf=\"child?.children?.length\">\r\n <div class=\"mobile-submenu-item\" *ngFor=\"let sub of child?.children\" (click)=\"redirectionsOfMenu(sub)\"\r\n data-bs-dismiss=\"offcanvas\">\r\n {{sub?.label | titlecase}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileCategoryHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\" [class.margin-top-mob]=\"isHeaderSticky\">\r\n <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n <div class=\"cat-img d-flex justify-content-center align-items-center w-100\">\r\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"br-12 mobile-category-image\">\r\n </div>\r\n <div class=\"text-center category-name\">{{ele?.categoryName}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerce_header>\r\n <header class=\"site-header\">\r\n <!-- Top Bar: Logo, Search, User Actions -->\r\n <div class=\"top-bar\">\r\n\r\n <!-- Mobile Menu Toggle (Checkbox Hack) -->\r\n <div [ngClass]=\"{'mobile-header-left-side': screenWidth <= 475}\">\r\n <label for=\"mobile-menu-checkbox\" class=\"mobile-menu-btn\" data-bs-toggle=\"offcanvas\"\r\n data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\" aria-label=\"Toggle menu\"\r\n (click)=\"goBackMobileMenu()\">\r\n <svg *ngIf=\"!isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\r\n <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\r\n <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\r\n </svg>\r\n <svg *ngIf=\"isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n <line x1=\"6\" y1=\"18\" x2=\"18\" y2=\"6\"></line>\r\n </svg>\r\n </label>\r\n\r\n <!-- Logo Section -->\r\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"Logo\" class=\"logo-img\" [width]=\"content?.logo?.size + 15\"\r\n [height]=\"content?.logo?.size\">\r\n </a>\r\n\r\n <a class=\"textPluslogo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n && content?.logo?.text?.isText \r\n && content?.logo?.text?.isIcon \r\n && content?.logo?.text?.url\">\r\n\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"Icon\" class=\"logo-icon\"\r\n [width]=\"content?.logo?.size + 15\" [height]=\"content?.logo?.size\">\r\n\r\n <span class=\"logo-text\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 475\">\r\n {{ content?.siteName?.value }}\r\n </span>\r\n </a>\r\n\r\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n && content?.logo?.text?.isText \r\n && !content?.logo?.text?.isIcon\">\r\n\r\n <span class=\"logo-main\" [simpoColor]=\"simpoColor\">\r\n {{ content?.siteName?.value }}\r\n </span>\r\n </a>\r\n </div>\r\n\r\n <!-- Search Bar -->\r\n <div class=\"search-wrapper\"\r\n *ngIf=\"screenWidth > 475 && content?.showSearchBar && data?.styles?.menuType !== 'DROPDOWN_MENU'\">\r\n <div class=\"search-bar\">\r\n <!-- Search Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n (click)=\"handleSearchInputClick($event)\" aria-label=\"Search\">\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown menu style -->\r\n <div class=\"dropdown_menu\" *ngIf=\"screenWidth > 475 && data?.styles?.menuType === 'DROPDOWN_MENU'\"\r\n (mouseleave)=\"showList = false; selectedCategory = null\">\r\n <div class=\"dd-nav\">\r\n <div class=\"dd-tab-wrap\" *ngFor=\"let ele of megaMenu\">\r\n <button type=\"button\" class=\"dd-tab\" [class.dd-tab-active]=\"showList && selectedCategory === ele?.children\"\r\n (click)=\"ele?.children?.length ? toggleChildMenu(ele) : redirectionsOfMenu(ele)\">\r\n <span class=\"text-nowrap\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n [simpoColor]=\"simpoColor\">{{ele?.label | titlecase}}</span>\r\n <svg *ngIf=\"ele?.children?.length\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" [simpoColor]=\"simpoColor\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289C6.68342 7.90237 7.31658 7.90237 7.70711 8.29289L12 12.5858L16.2929 8.29289C16.6834 7.90237 17.3166 7.90237 17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071Z\"\r\n fill=\"#000000\" />\r\n </svg>\r\n </button>\r\n\r\n <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory === ele?.children && ele?.children?.length\"\r\n (click)=\"$event.stopPropagation()\">\r\n <div class=\"dd-item\" *ngFor=\"let child of ele?.children\" [class.open-submenu]=\"openSubmenuChild === child\"\r\n (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : toggleSubMenu(child, $event)\">\r\n <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\r\n <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">›</span>\r\n\r\n <div class=\"dd-submenu\" *ngIf=\"child?.children?.length && openSubmenuChild === child\"\r\n style=\"display: block;\">\r\n <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\r\n (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\r\n <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <!-- Right Actions -->\r\n <div class=\"user-actions\">\r\n\r\n <ng-container *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar\">\r\n <a class=\"action-link icon-only dropdown-search-toggle\"\r\n (click)=\"showDropdownDesktopSearch = !showDropdownDesktopSearch\" aria-label=\"Toggle search\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n </a>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"storeAvaiable\">\r\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n *ngIf=\"!getPincode\">\r\n <!-- <svg width=\"20\" height=\"20\" viewBox=\"0 0 17 17\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\r\n stroke=\"currentColor\" fill=\"none\" [simpoColor]=\"simpoColor\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n <path\r\n d=\"M8.5 0.5c-3.032 0-5.5 2.467-5.5 5.5 0 4.373 4.913 10.086 5.122 10.328l0.378 0.435 0.378-0.436c0.209-0.241 5.122-5.954 5.122-10.327 0-3.033-2.468-5.5-5.5-5.5zM8.5 15.215c-1.146-1.424-4.5-5.879-4.5-9.215 0-2.481 2.019-4.5 4.5-4.5s4.5 2.019 4.5 4.5c0 3.333-3.354 7.791-4.5 9.215zM8.5 3.139c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zM8.5 8.139c-1.103 0-2-0.897-2-2s0.897-2 2-2 2 0.897 2 2-0.897 2-2 2z\"\r\n fill=\"#000000\" />\r\n </svg> -->\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 512 512\"\r\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"currentColor\">\r\n <g>\r\n <path\r\n d=\"M341.476 338.285c54.483-85.493 47.634-74.827 49.204-77.056C410.516 233.251 421 200.322 421 166 421 74.98 347.139 0 256 0 165.158 0 91 74.832 91 166c0 34.3 10.704 68.091 31.19 96.446l48.332 75.84C118.847 346.227 31 369.892 31 422c0 18.995 12.398 46.065 71.462 67.159C143.704 503.888 198.231 512 256 512c108.025 0 225-30.472 225-90 0-52.117-87.744-75.757-139.524-83.715zm-194.227-92.34a15.57 15.57 0 0 0-.517-.758C129.685 221.735 121 193.941 121 166c0-75.018 60.406-136 135-136 74.439 0 135 61.009 135 136 0 27.986-8.521 54.837-24.646 77.671-1.445 1.906 6.094-9.806-110.354 172.918L147.249 245.945zM256 482c-117.994 0-195-34.683-195-60 0-17.016 39.568-44.995 127.248-55.901l55.102 86.463a14.998 14.998 0 0 0 25.298 0l55.101-86.463C411.431 377.005 451 404.984 451 422c0 25.102-76.313 60-195 60z\">\r\n </path>\r\n <path\r\n d=\"M256 91c-41.355 0-75 33.645-75 75s33.645 75 75 75 75-33.645 75-75-33.645-75-75-75zm0 120c-24.813 0-45-20.187-45-45s20.187-45 45-45 45 20.187 45 45-20.187 45-45 45z\">\r\n </path>\r\n </g>\r\n </svg>\r\n\r\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">Enter Pincode</span>\r\n\r\n </a>\r\n\r\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7\"></path>\r\n <path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"></path>\r\n <path d=\"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4\"></path>\r\n <path d=\"M2 7h20\"></path>\r\n <path\r\n d=\"M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7\">\r\n </path>\r\n </svg>\r\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">{{\"Delivering to: \" +\r\n getPincode}}</span>\r\n\r\n </a>\r\n\r\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your PIN Code unlocks\r\n </div>\r\n <div class=\"sub-text text-center f-14 pincode-text\">\r\n Fastest delivery date, Try-at-Home availability,\r\n Nearest store and In-store design!\r\n </div>\r\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n [class.error-border]=\"pinError\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n class=\"w-75 p-0\">\r\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n </div>\r\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n Please enter a valid pincode\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <a class=\"action-link icon-only login-btn\" *ngIf=\"!loggedIn\"\r\n (mouseenter)=\"showLogin = true;showPincodeInput = false\" (click)=\"showLogin = !showLogin\">\r\n <!-- User Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n </svg>\r\n </a>\r\n\r\n <a class=\"action-link icon-only\" (click)=\"goToAccount('PROFILE')\" *ngIf=\"loggedIn\">\r\n <!-- User Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n </svg>\r\n </a>\r\n\r\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your Account\r\n </div>\r\n <div class=\"sub-text text-center f-14\">\r\n Access account & manage your orders.\r\n </div>\r\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">Sign Up</div>\r\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n </div>\r\n </div>\r\n\r\n <a class=\"action-link icon-only icon-container wishlist-icon\" (click)=\"goToWishlist()\">\r\n <!-- Heart Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path\r\n d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\">\r\n </path>\r\n </svg>\r\n <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</span>\r\n </a>\r\n\r\n <a class=\"action-link icon-only icon-container cart-icon\" (click)=\"goToCart()\">\r\n <!-- Shopping Bag Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z\"></path>\r\n <path d=\"M3 6h18\"></path>\r\n <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\r\n </svg>\r\n <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</span>\r\n </a>\r\n\r\n <div class=\"dropdown-search-expand\"\r\n *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar && showDropdownDesktopSearch\">\r\n <div class=\"dropdown-search-box\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"dropdown-search-icon\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n <input type=\"text\" placeholder=\"Search for...\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n (click)=\"handleSearchInputClick($event)\" aria-label=\"Search\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"dropdown-search-close\" (click)=\"showDropdownDesktopSearch = false\" aria-label=\"Close search\">\r\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"search-wrapper\" *ngIf=\"screenWidth <= 475 && content?.showSearchBar\">\r\n <div class=\"search-bar\">\r\n <!-- Search Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n (click)=\"handleSearchInputClick($event)\" aria-label=\"Search\">\r\n </div>\r\n </div>\r\n\r\n </header>\r\n</ng-template>", styles: [".total-container div[simpoSticky]:not(.header--scrolled){top:0!important;left:0!important;right:0!important;margin:0 auto!important;width:100%!important}.total-container div[simpoSticky].header--scrolled,.header--scrolled{top:10px!important;left:20%!important;right:20%!important;width:60%!important;overflow:hidden!important;border-radius:60px!important;box-shadow:0 10px 40px #0000001f!important;z-index:1000001!important;transition:width .4s cubic-bezier(.16,1,.3,1)}@media screen and (max-width: 475px){.total-container div[simpoSticky].header--scrolled,.header--scrolled{top:10px!important;left:5%!important;right:5%!important;width:90%!important}}.w-40{width:40%!important}*{font-family:var(--website-font-family)}.animated-placeholder{left:12%;transform:translateY(-50%);transition:all .4s ease;font-size:14px;top:49%;color:#6f6f6f;font-weight:300}.animated-placeholder.animate{transform:translateY(-150%);opacity:0}.w-5{width:5%}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem;flex:0 0 auto}.category-name{text-transform:uppercase;white-space:normal;word-break:break-word;line-height:1.2;font-size:11px;letter-spacing:.4px;text-align:center;max-width:90px}.margin-bottom{margin-bottom:var(--margin-top, 0px)}@media only screen and (max-width : 475px){.w-5{width:100%!important}.logo-main,.logo-text{font-size:17px!important}.left-logo-text{padding-top:10px}.mob-form-control{width:96%;border-radius:12px!important}.input-group mat-icon{width:10%!important}.categories-header{height:unset!important}.margin-top-mob{margin-top:var(--margin-top, 0px)}.w-98{width:98%}.w-96{width:96%}.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}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#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:-1px}.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}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;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}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.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}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:100%;z-index:1000000000}@media screen and (max-width: 475px){.offcanvas{top:var(--margin-top, 0px)!important;height:calc(100vh - var(--margin-top, 0px))!important;display:flex;flex-direction:column}.offcanvas-body{flex:1 1 auto;height:auto}.offcanvas-footer{height:auto}}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.mobileLoginButton{width:100%;height:40px;border-radius:8px;outline:none;background:transparent;border:none;display:flex;align-items:center;justify-content:center}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:88%}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:10%}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:auto;max-height:50vh;overflow-y:auto;position:absolute;width:100%;z-index:1001}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:6px;height:40px}.h-45{height:45vh}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:0;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}.cart-footer{position:fixed;width:96%;height:45px;bottom:65px;z-index:100;left:8px;border-radius:10px}.item-count{align-content:center}.fs-22{font-size:22px}.w-15{width:15%!important}.site-header{width:100%;border-bottom:1px solid transparent}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1440px;margin:0 auto}.dropdown_menu{position:relative;min-width:420px;max-width:55%;display:flex;justify-content:center}.dd-nav{display:flex;align-items:flex-start;gap:18px;width:100%;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;max-height:400px;height:500px;margin-bottom:-460px;padding-top:5px;scrollbar-width:none;pointer-events:none}.dd-nav::-webkit-scrollbar{display:none}.dd-tab-wrap{position:relative;display:inline-flex;pointer-events:auto}.dd-tab{border:none;background:transparent;padding:6px 2px;font-size:15px;font-weight:500;color:#30343b;line-height:1;border-bottom:3px solid transparent;display:inline-flex;align-items:center;gap:8px}.dd-tab:hover,.dd-tab.dd-tab-active{border-bottom-color:#2f3338}.dd-panel{position:absolute;top:100%;left:0;background:#fff;border:1px solid #ececef;box-shadow:0 12px 35px #1d212929;padding:14px 0;z-index:1006;min-width:220px}.dd-item{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;font-size:16px;color:#2c2f35;transition:background-color .2s ease;cursor:pointer}.dd-item:hover{background-color:#f5f6f8}.dd-item-arrow{font-size:20px;line-height:1;color:#5a5f66}.dd-submenu{position:absolute;top:-10px;left:calc(100% + 3px);background:#fff;border:1px solid #ececef;box-shadow:0 10px 26px #1d212926;padding:10px 0;display:none;z-index:1007}.dd-item:hover .dd-submenu{display:block}.dd-sub-item{padding:10px 16px;font-size:15px;color:#2c2f35;transition:background-color .2s ease}.dd-sub-item:hover{background-color:#f5f6f8}.dropdown-search-toggle{cursor:pointer}.dropdown-search-expand{position:absolute;top:calc(100% + 10px);right:0;min-width:320px;z-index:1010}.dropdown-search-box{width:100%;background:#f3f3f3;border:1px solid #e7e7e7;display:flex;align-items:center;gap:12px;padding:10px 14px}.dropdown-search-icon{color:#1f2328;flex:0 0 auto}.dropdown-search-box input{border:none;background:transparent;width:100%;font-size:14px;color:#2f3338;outline:none}.dropdown-search-close{color:#545861;cursor:pointer;flex:0 0 auto}.logo{display:flex;flex-direction:column;align-items:flex-start;color:#5e4042;line-height:1;text-decoration:auto}.logo-img{display:block}.logo-main{font-family:Playfair Display,serif;font-size:32px;font-weight:500;letter-spacing:.5px}.logo-sub{font-family:Montserrat,sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;margin-top:2px;margin-left:2px}.search-wrapper{flex:1;display:flex;justify-content:center;max-width:600px}.search-bar{width:100%;background-color:#f3f3f3;border-radius:8px;display:flex;align-items:center;padding:10px 16px;gap:12px}.search-icon{color:#333;width:18px;height:18px}.search-bar input{border:none;background:transparent;width:100%;font-family:Montserrat,sans-serif;font-size:14px;color:#1a1a1a;outline:none}.search-bar input::placeholder{color:#888;font-weight:400}.user-actions{display:flex;align-items:center;gap:24px}.action-link{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.action-link:hover{color:#5e4042}.store-text{white-space:nowrap}.icon-only svg{display:block;cursor:pointer}.main-nav{border-top:1px solid transparent;padding-bottom:15px}.nav-list{display:flex;justify-content:center;flex-wrap:wrap;gap:32px;padding:10px 40px}.nav-list li{position:relative}.nav-list a{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#333;padding:5px 0;display:inline-block}.nav-list a:hover{color:#5e4042}.has-badge{position:relative}.badge{position:absolute;top:-12px;right:-10px;background-color:#a87b7b;color:#fff;font-size:9px;font-weight:600;padding:2px 6px;border-radius:10px;line-height:1;white-space:nowrap}.mobile-menu-checkbox{display:none}.mobile-menu-btn{display:none;cursor:pointer;color:#333}.hero-placeholder{height:80vh;background-color:#f9f9f9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#5e4042}.hero-placeholder h1{font-family:Playfair Display,serif;font-size:3rem;margin-bottom:1rem}@media (max-width: 1024px){.nav-list{gap:20px}.store-text{display:none}.search-wrapper{margin:0 20px}}@media (max-width: 768px){.top-bar{padding:15px 20px;flex-wrap:wrap}.search-wrapper{order:3;padding:0 8px;width:100%;max-width:100%;margin:0 0 15px}.user-actions{gap:16px}.main-nav{display:none;width:100%;background:#fff;border-top:1px solid #eee}.nav-list{flex-direction:column;align-items:center;gap:15px;padding:20px}.badge{position:relative;top:-2px;right:auto;margin-left:8px;vertical-align:middle}.mobile-menu-btn{display:block}.mobile-menu-checkbox:checked~.main-nav{display:block}}@media screen and (max-width: 475px){.store-link{display:none}.info-container{width:100vw;top:62%}}.icon-container{position:relative}.count-badge{position:absolute;top:-8px;right:-8px;font-size:10px;font-weight:600;height:18px;width:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #ffffff}.textPluslogo{display:flex;align-items:center;gap:8px;flex-shrink:0;text-decoration:none}.logo-icon{color:#5e4042}.logo-text{font-size:28px;font-weight:600;color:#1a1a1a;letter-spacing:-.5px}.mobile-header-left-side{display:flex;align-items:center;gap:15px}.categories-wrapper{position:relative;width:100%;z-index:1000}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;position:relative}.categories-header::-webkit-scrollbar{display:none}.category{position:relative;border-bottom:3px solid transparent;transition:border-color .35s ease,color .35s ease}.category:hover{border-bottom-color:var(--border-color)}.blur-overlay{position:fixed;top:var(--margin-top, 0px);left:0;width:100vw;height:calc(100vh - var(--margin-top, 0px));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffff47;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s ease;z-index:1000}.blur-overlay.active{opacity:1;visibility:visible}.list-category{padding:20px 30px;color:#111;background:#fff!important;height:auto;max-height:50vh;position:absolute;top:100%;left:0;width:100%;z-index:1003;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,transform .35s ease,visibility .35s ease;will-change:opacity,transform;box-shadow:0 18px 40px #0000001a;overflow-x:hidden;overflow-y:auto}.mega-menu-scroll-row{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.mega-menu-scroll-col{flex-shrink:0}.mega-menu-scroll-col.has-right-border{border-right:1px solid #e9e7e7}.collectionImage{border-radius:10px;height:70%!important}@media screen and (min-width: 476px){.list-category .mobile-submenu-card{aspect-ratio:4 / 3;overflow:hidden}.list-category .mobile-submenu-image.collectionImage{width:100%;height:100%!important;object-fit:cover;display:block}}.list-item>div{color:#585858}.list-item>div:hover{color:#000}.show-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.hide-dropdown{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px)}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px;height:auto;max-height:36vh;overflow-y:auto}.each-price{transition:transform .25s ease,font-weight .25s ease,color .25s ease}.each-price:hover{font-weight:700;transform:translate(4px)}.image-container{cursor:pointer;overflow:hidden}.image-container img{border-radius:12px;transition:transform .35s ease}.image-container:hover img{transform:scale(1.04)}.collection{height:max-content;cursor:pointer;transition:transform .25s ease}.collection:hover{transform:translateY(-2px)}.mobile-menu-container{height:100%;overflow-y:auto}.mobile-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mobile-menu-item{display:flex;align-items:center;justify-content:space-between;background:#f5f5f5;border-radius:8px;padding:14px;cursor:pointer;transition:background-color .2s ease}.mobile-menu-item:active{background:#ebebeb}.mobile-menu-label{font-size:11px;letter-spacing:.5px;color:#1a1a1a;line-height:1.3}.mobile-menu-arrow{font-size:18px!important;width:18px!important;height:18px!important;color:#999;flex-shrink:0}.mobile-menu-detail{padding:0}.mobile-menu-back{display:flex;align-items:center;gap:4px;padding:14px 0;cursor:pointer;font-size:16px;color:#1a1a1a}.mobile-menu-back mat-icon{font-size:22px!important;width:22px!important;height:22px!important;color:#1a1a1a!important}.mobile-submenu-sections{overflow-y:auto}.mobile-submenu-section{margin-bottom:20px}.mobile-submenu-card{position:relative;border-radius:12px;overflow:hidden;cursor:pointer}.mobile-submenu-image{display:block;width:100%;height:auto!important}.mobile-submenu-caption{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;font-size:14px;font-weight:700;letter-spacing:.6px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.5);background:linear-gradient(180deg,#0000,#0009)}.mobile-submenu-header{font-size:14px;font-weight:700;letter-spacing:.5px;color:#1a1a1a;margin-bottom:12px;cursor:pointer}.mobile-submenu-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mobile-submenu-item{background:#f5f5f5;border-radius:8px;padding:10px 14px;font-size:12px;font-weight:400;color:#333;cursor:pointer;text-align:center;transition:background-color .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-submenu-item:active{background:#ebebeb}.mobile-category-image{border-radius:50%;height:11vh;width:11vh;object-fit:cover}\n"] }]
|
|
17502
17545
|
}], ctorParameters: () => [{ type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i1$1.MatDialog }, { type: StorageServiceService }, { type: RestService }, { type: EventsService }, { type: undefined, decorators: [{
|
|
17503
17546
|
type: Inject,
|
|
17504
17547
|
args: [LOCAL_STORAGE]
|