simpo-component-library 1.4.272 → 1.4.273

package/fesm2022/simpo-component-library.mjs

@@ -3448,7 +3448,7 @@ class UserBasicInfoComponent {
     saveProfile() {
         const payload = {
             userId: this.userDetails?.userId,
-            businessId: this.userDetails?.businessId,
+            businessId: localStorage.getItem("bId") ?? localStorage.getItem("businessId"),
             gender: this.gender,
             profilePic: this.profilePic,
             contact: {
@@ -3577,6 +3577,7 @@ class AuthenticateUserComponent extends BaseSection {
                     this.matDialog.open(UserBasicInfoComponent, {
                         height: '50vh',
                         width: window.innerWidth > 475 ? '40vw' : '95vw',
+                        maxWidth: window.innerWidth > 475 ? '100vw' : '80vw',
                         data: {}
                     });
                 }
@@ -3597,7 +3598,7 @@ class AuthenticateUserComponent extends BaseSection {
         return window.innerWidth <= 475;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AuthenticateUserComponent, deps: [{ token: MAT_DIALOG_DATA, optional: true }, { token: MAT_BOTTOM_SHEET_DATA, optional: true }, { token: RestService }, { token: i2$4.Router }, { token: i3.MatDialog }, { token: StorageServiceService }, { token: i3.MatDialogRef, optional: true }, { token: i5.MatBottomSheetRef, optional: true }, { token: EventsService }, { token: i7$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AuthenticateUserComponent, isStandalone: true, selector: "simpo-authenticate-user", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n    <div [style.height.vh]=\"isMobile ? '40' : ''\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n        <ng-container [ngSwitch]=\"screen\">\r\n            <section style=\"padding: 15px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n                *ngSwitchCase=\"'LOGIN'\"[ngClass]=\"{'fullSection': isMobile}\">\r\n                <h5 class=\"text-center onlyDesktop\" [style.color]=\"data?.styles?.background?.accentColor\">{{data?.content?.siteName?.value}}</h5>\r\n                <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Welcome</h2>\r\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Log or Signup in to your account</p>\r\n                <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\">\r\n                <p class=\"text-center\"[style.color]=\"data?.styles?.background?.accentColor\">You will receive an OTP in WhatsApp</p>\r\n\r\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"generateOTP()\" [disabled]=\"!isMobileValid\">Send OTP</button>\r\n                    <!-- <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Use email\r\n                    instead</div> -->\r\n                </div>\r\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                </div>\r\n            </section>\r\n            <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\" [ngClass]=\"{'fullSection': isMobile}\">\r\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n                <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\r\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we have sent via the phone number +{{ countryCode }}{{ mobile\r\n                    }}</p>\r\n                <div class=\"otpContainer\">\r\n                    <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\r\n                        <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\" (keyup)=\"move($event, idx)\">\r\n                    </ng-container>\r\n                </div>\r\n\r\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifyOTP()\">Verify</button>\r\n                    <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"resendOTP()\">Resend code</div>\r\n                </div>\r\n\r\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                </div>\r\n                <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\r\n                    <mat-icon>keyboard_backspace</mat-icon>\r\n                </div>\r\n            </section>\r\n        </ng-container>\r\n    </div>\r\n</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n</ngx-skeleton-loader>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\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>", styles: ["input,button{width:80%!important;margin:10px auto}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}button:disabled{background-color:#d3d3d3!important}.btn{border:1.5px solid transparent}.btn:hover{background-color:#000;color:#fff!important}.close-btn{position:absolute;top:10px;right:10px;cursor:pointer}.otpContainer{display:flex;gap:4px;margin:auto}.otpContainer .otp{border-radius:50%;padding:5px;height:50px;width:50px!important;margin:5px!important;text-align:center}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.back-btn{position:absolute;top:10px;left:10px;cursor:pointer}@media only screen and (max-width: 475px){.onlyDesktop{display:none}.text-center{text-align:left!important}.verify-otp{text-align:left!important;margin-top:8%}.otpContainer .otp{height:48px!important;width:48px!important}button,input{width:100%!important}.fullSection{justify-content:start!important}.action-btn{position:absolute;bottom:0;width:95%}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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: i2$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i12.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AuthenticateUserComponent, isStandalone: true, selector: "simpo-authenticate-user", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n    <div [style.height.vh]=\"isMobile ? '40' : ''\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n        <ng-container [ngSwitch]=\"screen\">\r\n            <section style=\"padding: 15px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n                *ngSwitchCase=\"'LOGIN'\"[ngClass]=\"{'fullSection': isMobile}\">\r\n                <h5 class=\"text-center onlyDesktop\" [style.color]=\"data?.styles?.background?.accentColor\">{{data?.content?.siteName?.value}}</h5>\r\n                <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Welcome</h2>\r\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Log or Signup in to your account</p>\r\n                <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\">\r\n                <p class=\"text-center\"[style.color]=\"data?.styles?.background?.accentColor\">You will receive an OTP in WhatsApp</p>\r\n\r\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"generateOTP()\" [disabled]=\"!isMobileValid\">Send OTP</button>\r\n                    <!-- <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Use email\r\n                    instead</div> -->\r\n                </div>\r\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                </div>\r\n            </section>\r\n            <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\" [ngClass]=\"{'fullSection': isMobile}\">\r\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n                <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\r\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we have sent via the phone number +{{ countryCode }}{{ mobile\r\n                    }}</p>\r\n                <div class=\"otpContainer\">\r\n                    <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\r\n                        <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\" (keyup)=\"move($event, idx)\">\r\n                    </ng-container>\r\n                </div>\r\n\r\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifyOTP()\">Verify</button>\r\n                    <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"resendOTP()\">Resend code</div>\r\n                </div>\r\n\r\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                </div>\r\n                <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\r\n                    <mat-icon>keyboard_backspace</mat-icon>\r\n                </div>\r\n            </section>\r\n        </ng-container>\r\n    </div>\r\n</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n</ngx-skeleton-loader>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\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>", styles: ["input,button{width:80%!important;margin:10px auto}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}button:disabled{background-color:#d3d3d3!important}.btn{border:1.5px solid transparent}.btn:hover{background-color:#000;color:#fff!important}.close-btn{position:absolute;top:10px;right:10px;cursor:pointer}.otpContainer{display:flex;gap:4px;margin:auto}.otpContainer .otp{border-radius:50%;padding:5px;height:50px;width:50px!important;margin:5px!important;text-align:center}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.back-btn{position:absolute;top:10px;left:10px;cursor:pointer}@media only screen and (max-width: 475px){.onlyDesktop{display:none}.text-center{text-align:left!important}.verify-otp{text-align:left!important;margin-top:8%}.otpContainer{width:100vw;margin-left:-20px;right:10px;justify-content:space-between}.otpContainer .otp{height:45px!important;width:45px!important;margin:0!important}button,input{width:100%!important}.fullSection{justify-content:start!important}.action-btn{position:absolute;bottom:0;width:95%}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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: i2$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i12.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AuthenticateUserComponent, decorators: [{
             type: Component,
@@ -3609,7 +3610,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         SimpoComponentModule,
                         ButtonDirectiveDirective,
                         ToastModule
-                    ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n    <div [style.height.vh]=\"isMobile ? '40' : ''\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n        <ng-container [ngSwitch]=\"screen\">\r\n            <section style=\"padding: 15px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n                *ngSwitchCase=\"'LOGIN'\"[ngClass]=\"{'fullSection': isMobile}\">\r\n                <h5 class=\"text-center onlyDesktop\" [style.color]=\"data?.styles?.background?.accentColor\">{{data?.content?.siteName?.value}}</h5>\r\n                <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Welcome</h2>\r\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Log or Signup in to your account</p>\r\n                <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\">\r\n                <p class=\"text-center\"[style.color]=\"data?.styles?.background?.accentColor\">You will receive an OTP in WhatsApp</p>\r\n\r\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"generateOTP()\" [disabled]=\"!isMobileValid\">Send OTP</button>\r\n                    <!-- <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Use email\r\n                    instead</div> -->\r\n                </div>\r\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                </div>\r\n            </section>\r\n            <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\" [ngClass]=\"{'fullSection': isMobile}\">\r\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n                <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\r\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we have sent via the phone number +{{ countryCode }}{{ mobile\r\n                    }}</p>\r\n                <div class=\"otpContainer\">\r\n                    <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\r\n                        <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\" (keyup)=\"move($event, idx)\">\r\n                    </ng-container>\r\n                </div>\r\n\r\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifyOTP()\">Verify</button>\r\n                    <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"resendOTP()\">Resend code</div>\r\n                </div>\r\n\r\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                </div>\r\n                <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\r\n                    <mat-icon>keyboard_backspace</mat-icon>\r\n                </div>\r\n            </section>\r\n        </ng-container>\r\n    </div>\r\n</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n</ngx-skeleton-loader>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\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>", styles: ["input,button{width:80%!important;margin:10px auto}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}button:disabled{background-color:#d3d3d3!important}.btn{border:1.5px solid transparent}.btn:hover{background-color:#000;color:#fff!important}.close-btn{position:absolute;top:10px;right:10px;cursor:pointer}.otpContainer{display:flex;gap:4px;margin:auto}.otpContainer .otp{border-radius:50%;padding:5px;height:50px;width:50px!important;margin:5px!important;text-align:center}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.back-btn{position:absolute;top:10px;left:10px;cursor:pointer}@media only screen and (max-width: 475px){.onlyDesktop{display:none}.text-center{text-align:left!important}.verify-otp{text-align:left!important;margin-top:8%}.otpContainer .otp{height:48px!important;width:48px!important}button,input{width:100%!important}.fullSection{justify-content:start!important}.action-btn{position:absolute;bottom:0;width:95%}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}\n"] }]
+                    ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n    <div [style.height.vh]=\"isMobile ? '40' : ''\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n        <ng-container [ngSwitch]=\"screen\">\r\n            <section style=\"padding: 15px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n                *ngSwitchCase=\"'LOGIN'\"[ngClass]=\"{'fullSection': isMobile}\">\r\n                <h5 class=\"text-center onlyDesktop\" [style.color]=\"data?.styles?.background?.accentColor\">{{data?.content?.siteName?.value}}</h5>\r\n                <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Welcome</h2>\r\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Log or Signup in to your account</p>\r\n                <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\">\r\n                <p class=\"text-center\"[style.color]=\"data?.styles?.background?.accentColor\">You will receive an OTP in WhatsApp</p>\r\n\r\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"generateOTP()\" [disabled]=\"!isMobileValid\">Send OTP</button>\r\n                    <!-- <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Use email\r\n                    instead</div> -->\r\n                </div>\r\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                </div>\r\n            </section>\r\n            <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\" [ngClass]=\"{'fullSection': isMobile}\">\r\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n                <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\r\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we have sent via the phone number +{{ countryCode }}{{ mobile\r\n                    }}</p>\r\n                <div class=\"otpContainer\">\r\n                    <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\r\n                        <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\" (keyup)=\"move($event, idx)\">\r\n                    </ng-container>\r\n                </div>\r\n\r\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifyOTP()\">Verify</button>\r\n                    <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"resendOTP()\">Resend code</div>\r\n                </div>\r\n\r\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                </div>\r\n                <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\r\n                    <mat-icon>keyboard_backspace</mat-icon>\r\n                </div>\r\n            </section>\r\n        </ng-container>\r\n    </div>\r\n</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n</ngx-skeleton-loader>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\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>", styles: ["input,button{width:80%!important;margin:10px auto}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}button:disabled{background-color:#d3d3d3!important}.btn{border:1.5px solid transparent}.btn:hover{background-color:#000;color:#fff!important}.close-btn{position:absolute;top:10px;right:10px;cursor:pointer}.otpContainer{display:flex;gap:4px;margin:auto}.otpContainer .otp{border-radius:50%;padding:5px;height:50px;width:50px!important;margin:5px!important;text-align:center}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.back-btn{position:absolute;top:10px;left:10px;cursor:pointer}@media only screen and (max-width: 475px){.onlyDesktop{display:none}.text-center{text-align:left!important}.verify-otp{text-align:left!important;margin-top:8%}.otpContainer{width:100vw;margin-left:-20px;right:10px;justify-content:space-between}.otpContainer .otp{height:45px!important;width:45px!important;margin:0!important}button,input{width:100%!important}.fullSection{justify-content:start!important}.action-btn{position:absolute;bottom:0;width:95%}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -3818,7 +3819,7 @@ class NavbarSectionComponent {
         return null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: NavbarSectionComponent, deps: [{ token: EventsService }, { token: i2$4.Router }, { token: i2$4.ActivatedRoute }, { token: i3.MatDialog }, { token: i5.MatBottomSheet }, { token: i2$3.CookieService }, { token: StorageServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: NavbarSectionComponent, isStandalone: true, selector: "simpo-navbar-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n    <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n    <div class=\"container-fluid position-relative \">\r\n      <div class=\"w-50 left-logo-text d-flex\">\r\n        <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n          <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n            <img loading=\"lazy\"  [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n            loading=\"lazy\">\r\n          </div>\r\n          <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n            <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n          *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"(click)=\"goToHome()\">\r\n          <img loading=\"lazy\"  [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n          loading=\"lazy\">\r\n        </div>\r\n\r\n        <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"isEcommerceWebsite && screenWidth > 768\">\r\n          <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n            <a class=\"nav-link dropdown-toggle mx-2\" href=\"#\" [id]=\"'navbarDropdownMenuLink_' + idx\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\" *ngIf=\"getValues(content?.ecomlinks?.[link])?.length\">{{ link | uppercase }}</a>\r\n            <ul class=\"dropdown-menu fs-6 position-absolute\" [attr.aria-labelledby]=\"'navbarDropdownMenuLink_'+idx\">\r\n              <li *ngFor=\"let value of getValues(content?.ecomlinks?.[link])\"><a class=\"dropdown-item\" (click)=\"applyFilter(value, link)\">{{value}}</a></li>\r\n            </ul>\r\n            <!-- <button mat-button class=\"dropdown-button d-flex\" [matMenuTriggerFor]=\"menu\" href=\"javascript:void(0)\" [id]=\"'dropdownLink_' + idx\" role=\"button\" [simpoColor]=\"simpoColor\">\r\n              {{ link | uppercase }}\r\n              <mat-icon>expand_more</mat-icon>\r\n            </button>\r\n            <mat-menu #menu=\"matMenu\" [attr.aria-labelledby]=\"'dropdownLink_'+idx\">\r\n              <button mat-menu-item *ngFor=\"let value of getValues(content?.ecomlinks?.[link])\" (click)=\"applyFilter(value, link)\">{{value}}</button>\r\n            </mat-menu> -->\r\n          </ng-container>\r\n      </div>\r\n\r\n      </div>\r\n      <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n        <div *ngIf=\"screenWidth <= 768 && isEcommerceWebsite\" class=\"d-flex align-items-center justify-content-around\">\r\n          <i class=\"fa fa-search mx-2\" aria-hidden=\"true\" (click)=\"searchProducts()\"></i>\r\n          <mat-icon class=\"mx-2\" [simpoColor]=\"simpoColor\" (click)=\"goToWishlist()\">favorite_border</mat-icon>\r\n          <mat-icon class=\"mx-2\" [simpoColor]=\"simpoColor\" (click)=\"goToCart()\">add_shopping_cart</mat-icon>\r\n          <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 35px;\" (click)=\"goToAccount()\">\r\n        </div>\r\n        <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"simpoColor\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769 && !isEcommerceWebsite\"\r\n          aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n          <hr>\r\n          <hr>\r\n          <hr>\r\n        </button>\r\n      </div>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n          <div class=\"navbar-nav align-items-center\">\r\n            <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n              <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                <ng-container *ngIf=\"item.showHeader\">\r\n                  <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n                  [bgColor]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n                </ng-container>\r\n              </ng-container>\r\n            </div>\r\n            <div class=\"d-flex\">\r\n              <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                  <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                    <div style=\"position: relative;margin-right: 10px;\">\r\n                      <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex\">\r\n              <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n                <div *ngFor=\"let button of action?.buttons\">\r\n                  <button class=\"button\" (click)=\"redirectTo(button?.content)\" simpoButtonDirective [scrollValue]=\"scrollValue\" [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button.styles\" [color]=\"accentColor\">{{button?.content?.label}}</button>\r\n                  <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                    [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth <= 768\">\r\n          <div class=\"inner-height p-4\">\r\n            <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n              <div class=\"d-flex flex-column w-100\">\r\n                <div class=\"d-flex justify-content-between align-items-center\">\r\n                  <div class=\"title-row\">\r\n                    <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\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\"\r\n                        loading=\"lazy\">\r\n                      </div>\r\n                      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n                        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"d-flex gap-3 align-items-center\"\r\n                      *ngIf=\"content?.logo?.isImage\">\r\n                      <img loading=\"lazy\"  [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                      loading=\"lazy\">\r\n                    </div>\r\n\r\n                  </div>\r\n                  <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n                  <div class=\"d-flex flex-column gap-4 w-100\">\r\n                    <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                      <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"d-flex flex-column\">\r\n                <div class=\"d-flex\">\r\n                  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                    [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                    <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                        <div style=\"position: relative;margin-right: 10px;\">\r\n                          <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                        </div>\r\n                      </ng-container>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex mt-4\">\r\n                  <div *ngIf=\"action?.display\" class=\"button-display\">\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                        [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <div class=\"collapse navbar-collapse position-absolute pr-0\" style=\"right: 0px;\" *ngIf=\"screenWidth > 768\">\r\n          <div class=\"container-fluid justify-content-between pr-0 d-flex\" style=\"max-width: 50vw;\">\r\n            <div class=\"input-group\">\r\n              <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n              <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToFav()\">\r\n              <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n              <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span>\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center mx-3 position-relative\" style=\"width: 60px; cursor: pointer;\" (click)=\"goToCart()\">\r\n              <mat-icon [simpoColor]=\"simpoColor\">add_shopping_cart</mat-icon>\r\n              <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span>\r\n              <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n              <img loading=\"lazy\"  [src]=\"userGender | genderIcon\" style=\"height: 30px; margin-top: -5px\">\r\n              <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Account</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </nav>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n</div>\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important;padding-top:10px}.right-btn{width:15%!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:-10px;right:10px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.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:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: SimpoFooterLayoutDirective, selector: "[simpoFooterLayout]", inputs: ["simpoFooterLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatMenuModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: NavbarSectionComponent, isStandalone: true, selector: "simpo-navbar-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n    <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n    <div class=\"container-fluid position-relative \">\r\n      <div class=\"w-50 left-logo-text d-flex\">\r\n        <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n          <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n            <img loading=\"lazy\"  [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n            loading=\"lazy\">\r\n          </div>\r\n          <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n            <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n          *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"(click)=\"goToHome()\">\r\n          <img loading=\"lazy\"  [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n          loading=\"lazy\">\r\n        </div>\r\n\r\n        <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"isEcommerceWebsite && screenWidth > 768\">\r\n          <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n            <a class=\"nav-link dropdown-toggle mx-2\" href=\"#\" [id]=\"'navbarDropdownMenuLink_' + idx\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\" *ngIf=\"getValues(content?.ecomlinks?.[link])?.length\">{{ link | uppercase }}</a>\r\n            <ul class=\"dropdown-menu fs-6 position-absolute\" [attr.aria-labelledby]=\"'navbarDropdownMenuLink_'+idx\">\r\n              <li *ngFor=\"let value of getValues(content?.ecomlinks?.[link])\"><a class=\"dropdown-item\" (click)=\"applyFilter(value, link)\">{{value}}</a></li>\r\n            </ul>\r\n            <!-- <button mat-button class=\"dropdown-button d-flex\" [matMenuTriggerFor]=\"menu\" href=\"javascript:void(0)\" [id]=\"'dropdownLink_' + idx\" role=\"button\" [simpoColor]=\"simpoColor\">\r\n              {{ link | uppercase }}\r\n              <mat-icon>expand_more</mat-icon>\r\n            </button>\r\n            <mat-menu #menu=\"matMenu\" [attr.aria-labelledby]=\"'dropdownLink_'+idx\">\r\n              <button mat-menu-item *ngFor=\"let value of getValues(content?.ecomlinks?.[link])\" (click)=\"applyFilter(value, link)\">{{value}}</button>\r\n            </mat-menu> -->\r\n          </ng-container>\r\n      </div>\r\n\r\n      </div>\r\n      <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n        <div *ngIf=\"screenWidth <= 768 && isEcommerceWebsite\" class=\"d-flex align-items-center justify-content-around\">\r\n          <i class=\"fa fa-search mx-2\" aria-hidden=\"true\" (click)=\"searchProducts()\"></i>\r\n          <mat-icon class=\"mx-2\" [simpoColor]=\"simpoColor\" (click)=\"goToWishlist()\">favorite_border</mat-icon>\r\n          <div class=\"mx-2 position-relative\" style=\"margin-top: 10px;\">\r\n            <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goToCart()\">add_shopping_cart</mat-icon>\r\n            <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n          </div>\r\n          <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 35px;\" (click)=\"goToAccount()\">\r\n        </div>\r\n        <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"simpoColor\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769 && !isEcommerceWebsite\"\r\n          aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n          <hr>\r\n          <hr>\r\n          <hr>\r\n        </button>\r\n      </div>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n          <div class=\"navbar-nav align-items-center\">\r\n            <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n              <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                <ng-container *ngIf=\"item.showHeader\">\r\n                  <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n                  [bgColor]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n                </ng-container>\r\n              </ng-container>\r\n            </div>\r\n            <div class=\"d-flex\">\r\n              <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                  <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                    <div style=\"position: relative;margin-right: 10px;\">\r\n                      <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex\">\r\n              <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n                <div *ngFor=\"let button of action?.buttons\">\r\n                  <button class=\"button\" (click)=\"redirectTo(button?.content)\" simpoButtonDirective [scrollValue]=\"scrollValue\" [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button.styles\" [color]=\"accentColor\">{{button?.content?.label}}</button>\r\n                  <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                    [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth <= 768\">\r\n          <div class=\"inner-height p-4\">\r\n            <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n              <div class=\"d-flex flex-column w-100\">\r\n                <div class=\"d-flex justify-content-between align-items-center\">\r\n                  <div class=\"title-row\">\r\n                    <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\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\"\r\n                        loading=\"lazy\">\r\n                      </div>\r\n                      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n                        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"d-flex gap-3 align-items-center\"\r\n                      *ngIf=\"content?.logo?.isImage\">\r\n                      <img loading=\"lazy\"  [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                      loading=\"lazy\">\r\n                    </div>\r\n\r\n                  </div>\r\n                  <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n                  <div class=\"d-flex flex-column gap-4 w-100\">\r\n                    <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                      <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"d-flex flex-column\">\r\n                <div class=\"d-flex\">\r\n                  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                    [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                    <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                        <div style=\"position: relative;margin-right: 10px;\">\r\n                          <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                        </div>\r\n                      </ng-container>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex mt-4\">\r\n                  <div *ngIf=\"action?.display\" class=\"button-display\">\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                        [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <div class=\"collapse navbar-collapse position-absolute pr-0\" style=\"right: 0px;\" *ngIf=\"screenWidth > 768\">\r\n          <div class=\"container-fluid justify-content-between pr-0 d-flex\" style=\"max-width: 50vw;\">\r\n            <div class=\"input-group\">\r\n              <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n              <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToFav()\">\r\n              <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n              <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span>\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center mx-3 position-relative\" style=\"width: 60px; cursor: pointer;\" (click)=\"goToCart()\">\r\n              <mat-icon [simpoColor]=\"simpoColor\">add_shopping_cart</mat-icon>\r\n              <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span>\r\n              <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n              <img loading=\"lazy\"  [src]=\"userGender | genderIcon\" style=\"height: 30px; margin-top: -5px\">\r\n              <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Account</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </nav>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n</div>\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important;padding-top:10px}.right-btn{width:15%!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:-10px;right:-10px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.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:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: SimpoFooterLayoutDirective, selector: "[simpoFooterLayout]", inputs: ["simpoFooterLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatMenuModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: NavbarSectionComponent, decorators: [{
             type: Component,
@@ -3852,7 +3853,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         MatBottomSheetModule,
                         MatButtonModule,
                         MatMenuModule
-                    ], template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n    <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n    <div class=\"container-fluid position-relative \">\r\n      <div class=\"w-50 left-logo-text d-flex\">\r\n        <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n          <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n            <img loading=\"lazy\"  [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n            loading=\"lazy\">\r\n          </div>\r\n          <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n            <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n          *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"(click)=\"goToHome()\">\r\n          <img loading=\"lazy\"  [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n          loading=\"lazy\">\r\n        </div>\r\n\r\n        <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"isEcommerceWebsite && screenWidth > 768\">\r\n          <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n            <a class=\"nav-link dropdown-toggle mx-2\" href=\"#\" [id]=\"'navbarDropdownMenuLink_' + idx\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\" *ngIf=\"getValues(content?.ecomlinks?.[link])?.length\">{{ link | uppercase }}</a>\r\n            <ul class=\"dropdown-menu fs-6 position-absolute\" [attr.aria-labelledby]=\"'navbarDropdownMenuLink_'+idx\">\r\n              <li *ngFor=\"let value of getValues(content?.ecomlinks?.[link])\"><a class=\"dropdown-item\" (click)=\"applyFilter(value, link)\">{{value}}</a></li>\r\n            </ul>\r\n            <!-- <button mat-button class=\"dropdown-button d-flex\" [matMenuTriggerFor]=\"menu\" href=\"javascript:void(0)\" [id]=\"'dropdownLink_' + idx\" role=\"button\" [simpoColor]=\"simpoColor\">\r\n              {{ link | uppercase }}\r\n              <mat-icon>expand_more</mat-icon>\r\n            </button>\r\n            <mat-menu #menu=\"matMenu\" [attr.aria-labelledby]=\"'dropdownLink_'+idx\">\r\n              <button mat-menu-item *ngFor=\"let value of getValues(content?.ecomlinks?.[link])\" (click)=\"applyFilter(value, link)\">{{value}}</button>\r\n            </mat-menu> -->\r\n          </ng-container>\r\n      </div>\r\n\r\n      </div>\r\n      <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n        <div *ngIf=\"screenWidth <= 768 && isEcommerceWebsite\" class=\"d-flex align-items-center justify-content-around\">\r\n          <i class=\"fa fa-search mx-2\" aria-hidden=\"true\" (click)=\"searchProducts()\"></i>\r\n          <mat-icon class=\"mx-2\" [simpoColor]=\"simpoColor\" (click)=\"goToWishlist()\">favorite_border</mat-icon>\r\n          <mat-icon class=\"mx-2\" [simpoColor]=\"simpoColor\" (click)=\"goToCart()\">add_shopping_cart</mat-icon>\r\n          <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 35px;\" (click)=\"goToAccount()\">\r\n        </div>\r\n        <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"simpoColor\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769 && !isEcommerceWebsite\"\r\n          aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n          <hr>\r\n          <hr>\r\n          <hr>\r\n        </button>\r\n      </div>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n          <div class=\"navbar-nav align-items-center\">\r\n            <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n              <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                <ng-container *ngIf=\"item.showHeader\">\r\n                  <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n                  [bgColor]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n                </ng-container>\r\n              </ng-container>\r\n            </div>\r\n            <div class=\"d-flex\">\r\n              <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                  <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                    <div style=\"position: relative;margin-right: 10px;\">\r\n                      <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex\">\r\n              <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n                <div *ngFor=\"let button of action?.buttons\">\r\n                  <button class=\"button\" (click)=\"redirectTo(button?.content)\" simpoButtonDirective [scrollValue]=\"scrollValue\" [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button.styles\" [color]=\"accentColor\">{{button?.content?.label}}</button>\r\n                  <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                    [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth <= 768\">\r\n          <div class=\"inner-height p-4\">\r\n            <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n              <div class=\"d-flex flex-column w-100\">\r\n                <div class=\"d-flex justify-content-between align-items-center\">\r\n                  <div class=\"title-row\">\r\n                    <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\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\"\r\n                        loading=\"lazy\">\r\n                      </div>\r\n                      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n                        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"d-flex gap-3 align-items-center\"\r\n                      *ngIf=\"content?.logo?.isImage\">\r\n                      <img loading=\"lazy\"  [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                      loading=\"lazy\">\r\n                    </div>\r\n\r\n                  </div>\r\n                  <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n                  <div class=\"d-flex flex-column gap-4 w-100\">\r\n                    <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                      <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"d-flex flex-column\">\r\n                <div class=\"d-flex\">\r\n                  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                    [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                    <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                        <div style=\"position: relative;margin-right: 10px;\">\r\n                          <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                        </div>\r\n                      </ng-container>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex mt-4\">\r\n                  <div *ngIf=\"action?.display\" class=\"button-display\">\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                        [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <div class=\"collapse navbar-collapse position-absolute pr-0\" style=\"right: 0px;\" *ngIf=\"screenWidth > 768\">\r\n          <div class=\"container-fluid justify-content-between pr-0 d-flex\" style=\"max-width: 50vw;\">\r\n            <div class=\"input-group\">\r\n              <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n              <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToFav()\">\r\n              <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n              <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span>\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center mx-3 position-relative\" style=\"width: 60px; cursor: pointer;\" (click)=\"goToCart()\">\r\n              <mat-icon [simpoColor]=\"simpoColor\">add_shopping_cart</mat-icon>\r\n              <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span>\r\n              <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n              <img loading=\"lazy\"  [src]=\"userGender | genderIcon\" style=\"height: 30px; margin-top: -5px\">\r\n              <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Account</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </nav>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n</div>\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important;padding-top:10px}.right-btn{width:15%!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:-10px;right:10px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.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:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}\n"] }]
+                    ], template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n    <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n    <div class=\"container-fluid position-relative \">\r\n      <div class=\"w-50 left-logo-text d-flex\">\r\n        <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n          <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n            <img loading=\"lazy\"  [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n            loading=\"lazy\">\r\n          </div>\r\n          <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n            <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n          *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"(click)=\"goToHome()\">\r\n          <img loading=\"lazy\"  [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n          loading=\"lazy\">\r\n        </div>\r\n\r\n        <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"isEcommerceWebsite && screenWidth > 768\">\r\n          <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n            <a class=\"nav-link dropdown-toggle mx-2\" href=\"#\" [id]=\"'navbarDropdownMenuLink_' + idx\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\" *ngIf=\"getValues(content?.ecomlinks?.[link])?.length\">{{ link | uppercase }}</a>\r\n            <ul class=\"dropdown-menu fs-6 position-absolute\" [attr.aria-labelledby]=\"'navbarDropdownMenuLink_'+idx\">\r\n              <li *ngFor=\"let value of getValues(content?.ecomlinks?.[link])\"><a class=\"dropdown-item\" (click)=\"applyFilter(value, link)\">{{value}}</a></li>\r\n            </ul>\r\n            <!-- <button mat-button class=\"dropdown-button d-flex\" [matMenuTriggerFor]=\"menu\" href=\"javascript:void(0)\" [id]=\"'dropdownLink_' + idx\" role=\"button\" [simpoColor]=\"simpoColor\">\r\n              {{ link | uppercase }}\r\n              <mat-icon>expand_more</mat-icon>\r\n            </button>\r\n            <mat-menu #menu=\"matMenu\" [attr.aria-labelledby]=\"'dropdownLink_'+idx\">\r\n              <button mat-menu-item *ngFor=\"let value of getValues(content?.ecomlinks?.[link])\" (click)=\"applyFilter(value, link)\">{{value}}</button>\r\n            </mat-menu> -->\r\n          </ng-container>\r\n      </div>\r\n\r\n      </div>\r\n      <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n        <div *ngIf=\"screenWidth <= 768 && isEcommerceWebsite\" class=\"d-flex align-items-center justify-content-around\">\r\n          <i class=\"fa fa-search mx-2\" aria-hidden=\"true\" (click)=\"searchProducts()\"></i>\r\n          <mat-icon class=\"mx-2\" [simpoColor]=\"simpoColor\" (click)=\"goToWishlist()\">favorite_border</mat-icon>\r\n          <div class=\"mx-2 position-relative\" style=\"margin-top: 10px;\">\r\n            <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goToCart()\">add_shopping_cart</mat-icon>\r\n            <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n          </div>\r\n          <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 35px;\" (click)=\"goToAccount()\">\r\n        </div>\r\n        <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"simpoColor\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769 && !isEcommerceWebsite\"\r\n          aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n          <hr>\r\n          <hr>\r\n          <hr>\r\n        </button>\r\n      </div>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n          <div class=\"navbar-nav align-items-center\">\r\n            <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n              <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                <ng-container *ngIf=\"item.showHeader\">\r\n                  <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n                  [bgColor]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n                </ng-container>\r\n              </ng-container>\r\n            </div>\r\n            <div class=\"d-flex\">\r\n              <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                  <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                    <div style=\"position: relative;margin-right: 10px;\">\r\n                      <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex\">\r\n              <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n                <div *ngFor=\"let button of action?.buttons\">\r\n                  <button class=\"button\" (click)=\"redirectTo(button?.content)\" simpoButtonDirective [scrollValue]=\"scrollValue\" [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button.styles\" [color]=\"accentColor\">{{button?.content?.label}}</button>\r\n                  <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                    [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth <= 768\">\r\n          <div class=\"inner-height p-4\">\r\n            <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n              <div class=\"d-flex flex-column w-100\">\r\n                <div class=\"d-flex justify-content-between align-items-center\">\r\n                  <div class=\"title-row\">\r\n                    <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\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\"\r\n                        loading=\"lazy\">\r\n                      </div>\r\n                      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n                        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"d-flex gap-3 align-items-center\"\r\n                      *ngIf=\"content?.logo?.isImage\">\r\n                      <img loading=\"lazy\"  [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                      loading=\"lazy\">\r\n                    </div>\r\n\r\n                  </div>\r\n                  <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n                  <div class=\"d-flex flex-column gap-4 w-100\">\r\n                    <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                      <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"d-flex flex-column\">\r\n                <div class=\"d-flex\">\r\n                  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                    [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                    <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                        <div style=\"position: relative;margin-right: 10px;\">\r\n                          <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                        </div>\r\n                      </ng-container>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex mt-4\">\r\n                  <div *ngIf=\"action?.display\" class=\"button-display\">\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                        [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <div class=\"collapse navbar-collapse position-absolute pr-0\" style=\"right: 0px;\" *ngIf=\"screenWidth > 768\">\r\n          <div class=\"container-fluid justify-content-between pr-0 d-flex\" style=\"max-width: 50vw;\">\r\n            <div class=\"input-group\">\r\n              <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n              <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToFav()\">\r\n              <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n              <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span>\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center mx-3 position-relative\" style=\"width: 60px; cursor: pointer;\" (click)=\"goToCart()\">\r\n              <mat-icon [simpoColor]=\"simpoColor\">add_shopping_cart</mat-icon>\r\n              <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span>\r\n              <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n              <img loading=\"lazy\"  [src]=\"userGender | genderIcon\" style=\"height: 30px; margin-top: -5px\">\r\n              <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Account</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </nav>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n</div>\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important;padding-top:10px}.right-btn{width:15%!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:-10px;right:-10px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.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:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: i2$4.Router }, { type: i2$4.ActivatedRoute }, { type: i3.MatDialog }, { type: i5.MatBottomSheet }, { type: i2$3.CookieService }, { type: StorageServiceService }], propDecorators: { data: [{
                 type: Input
             }], nextComponent: [{
@@ -6419,7 +6420,7 @@ class ProductListComponent extends BaseSection {
         return Math.min(this.totalCount, (((this.pageNo - 1) * this.size + 1) + this.size));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductListComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$4.Router }, { token: i2$4.ActivatedRoute }, { token: StorageServiceService }, { token: i5.MatBottomSheet }, { token: i3.MatDialog }, { token: CartService }, { token: i7$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n\r\n<div class=\"input-group\" *ngIf=\"isMobile\">\r\n  <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n  <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div>\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n  <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [style.paddingTop.px]=\"isMobile ? 0 : ''\">\r\n\r\n    <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\r\n      <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 20%;\">\r\n        <div class=\"filter body-large\" [style.color]=\"styles?.background?.accentColor\">\r\n          Filters\r\n        </div>\r\n        <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\r\n          Clear all\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center justify-content-between\" style=\"width: 80%;margin-left: 10px;\">\r\n      <div class=\"fs-6 fw-normal\" [style.color]=\"styles?.background?.accentColor\">Showing {{(pageNo -1)*size +1}}-{{minSize}} of {{ totalCount }} Results</div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 10px;\" [style.color]=\"styles?.background?.accentColor\">\r\n          <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n          <select (change)=\"applyFilter($event, 'SORT')\">\r\n              <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{filter.name}}</option>\r\n          </select>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex w-100 onlyMobile\" style=\"gap: 5px; overflow-x: auto;\" [style.color]=\"styles?.background?.accentColor\">\r\n      <ng-container *ngFor=\"let filter of filterList\">\r\n        <div class=\"d-flex justify-content-between w-100 chip\" [style.color]=\"styles?.background?.accentColor\">\r\n          <span>{{filter.name}}</span>\r\n          <span style=\"cursor: pointer; margin-left: 5px;\" (click)=\"removeFilter(filter)\">X</span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex justify-content-between\">\r\n      <div class=\"filter-side onlyDesktop\">\r\n        <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n      </div>\r\n      <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n        <ng-container *ngIf=\"!filterLoading\">\r\n            <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n              <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"getProductWidth()\" style=\"cursor: pointer;\">\r\n                <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image position-relative\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n                  <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n                  <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n                </div>\r\n                <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\" class=\"position-relative\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n                  <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"product?.itemImages?.[0]?.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"product-img\">\r\n                  <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n                </div>\r\n                <div class=\"mt-2 w-100\">\r\n                  <div class=\"product-name heading-large w-100 text-left trim-text\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n                  <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n                    <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n                      <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"varient.variantImages?.[0]?.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\" [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\" (click)=\"selectVarient(product, varient)\">\r\n                    </ng-container>\r\n                  </div>\r\n                  <div class=\"d-flex align-item-center justify-content-between\">\r\n                    <div class=\"price body-large text-left d-flex align-items-center\">\r\n                      <!-- <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n                        <span [innerHTML]='currency'></span>\r\n                        {{product.price.value}}\r\n                      </div> -->\r\n                      <div class=\"discounted-price\"[style.color]=\"styles?.background?.accentColor\">\r\n                        <span [innerHTML]='currency'></span>\r\n                        {{product.price.discountedPrice}}\r\n                      </div>\r\n                    </div>\r\n                    <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n                      <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n                        [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart($event, product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n                      <div class=\"quantity\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\">\r\n                        <span (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n                        <span>{{product.quantity}}</span>\r\n                        <span (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n                      </div>\r\n                      <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <simpo-pagnination style=\"width: 100%;\" class=\"mt-15\" [totalPages]=\"totalPages\" [currentPage]=\"pageNo\" (paginationChange)=\"paginationChange($event)\"></simpo-pagnination>\r\n            </div>\r\n\r\n            <section class=\"empty-cart\" *ngIf=\"responseData?.length == 0\">\r\n              <div>\r\n                <div class=\"cart-image\">\r\n                  <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   style=\"height: 150px; width: 150px;\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n                </div>\r\n                <div class=\"cart-text\">\r\n                  <div class=\"heading-medium d-flex justify-content-center\" [style.color]=\"styles?.background?.accentColor\">\r\n                    Product list is empty\r\n                  </div>\r\n                  <div class=\"description d-flex justify-content-center mt-4\" [style.color]=\"styles?.background?.accentColor\">\r\n                    Looks like no item is present with filter. Go ahead & explore top categories.\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </section>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div class=\"bottom-filter\"[style.color]=\"styles?.background?.accentColor\">\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n          <mat-icon>sort</mat-icon>\r\n          <span>Sort by</span>\r\n        </div>\r\n        <div class=\"divider\"></div>\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n          <mat-icon>filter_list</mat-icon>\r\n          <span>Filter</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading || filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #FilterSection>\r\n  <section>\r\n    <div class=\"d-flex flex-column m-auto\" style=\"width: 95%;\">\r\n      <ng-container *ngFor=\"let filter of filterList\">\r\n        <div class=\"d-flex justify-content-between w-100 chip\" [style.color]=\"styles?.background?.accentColor\">\r\n          <span>{{filter.name}}</span>\r\n          <span style=\"cursor: pointer;\" (click)=\"removeFilter(filter)\">X</span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"categories-section\" *ngIf=\"categories?.length\">\r\n      <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\r\n        Shop by categories\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let category of categories\" (click)=\"applyFilter(category, 'FILTER')\" [style.color]=\"styles?.background?.accentColor\">\r\n        <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"category.status\" />\r\n        <div class=\"trim-text\">{{category.option | uppercase}}</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"categories-section\" *ngIf=\"collections?.length\" [style.color]=\"styles?.background?.accentColor\">\r\n      <div class=\"categories heading-small\">\r\n        Shop by collections\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let collection of collections\" (click)=\"applyFilter(collection, 'FILTER')\">\r\n        <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"collection.status\" />\r\n        <div class=\"trim-text\">{{collection.option | uppercase}}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"price-section\">\r\n      <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\r\n        Shop by price\r\n      </div>\r\n      <div>\r\n        <mat-slider class=\"mat-slider\" [min]=\"minProductPrice\" [max]=\"maxProductPrice\" style=\"width: 250px;\">\r\n          <input matSliderStartThumb [(ngModel)]=\"pricingMin\">\r\n          <input matSliderEndThumb [(ngModel)]=\"pricingMax\">\r\n        </mat-slider>\r\n      </div>\r\n      <div class=\"price-button-section\">\r\n        <div class=\"button-section\">\r\n          <button (click)=\"applyFilter()\">Filter</button>\r\n        </div>\r\n        <div class=\"price-range\">\r\n          Price: <span [innerHtml]='currency'></span>{{ pricingMin }} - <span [innerHtml]='currency'></span>{{ pricingMax | formateAmount }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n<ng-template #SortingSection>\r\n  <section style=\"padding: 10px\">\r\n    <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n      <span>Sort by</span>\r\n      <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n    </div>\r\n    <mat-radio-group class=\"d-flex flex-column\">\r\n        <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"applyFilter($event, 'SORT')\">{{sortingType.name}}</mat-radio-button>\r\n    </mat-radio-group>\r\n  </section>\r\n</ng-template>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.trim-text{text-align:left!important;display:inline-block!important;white-space:nowrap!important;overflow:hidden!important;-webkit-line-clamp:1!important;text-overflow:ellipsis!important}.price{color:#222;font-size:16px;font-weight:600;line-height:normal;text-align:left}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;text-align:left!important;width:220px}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.add-to-cart-btn button{height:35px;font-size:16px!important}.fav-icon{position:absolute;z-index:1000;padding:5px;right:3px;top:3px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.discounted-price{margin-top:-3px}.filter-side{width:19%;position:sticky;top:0;height:fit-content}.filter-top-section{padding:0 2rem}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.categories{display:flex;padding:1rem 2rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;background:#0267c1;color:#fff;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{background:#0267c1;padding:8px 15px;border-radius:3px;margin:3px 0;color:#fff;transition:.3s opacity ease}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;justify-content:space-between}.price-range{padding-right:22px;color:#93959e;font-size:15px}.right-side{width:80%;margin-left:10px}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:30px;width:30px;border-radius:50%;cursor:pointer;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:block!important}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:1000;width:100%;margin-left:-12px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:220px}.default-image img{height:220px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group{position:relative;width:95%;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i12.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i14.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i14.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "component", type: PagninationComponent, selector: "simpo-pagnination", inputs: ["totalPages", "currentPage"], outputs: ["paginationChange"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n\r\n<div class=\"input-group\" *ngIf=\"isMobile\">\r\n  <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n  <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div>\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n  <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\">\r\n\r\n    <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\r\n      <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 20%;\">\r\n        <div class=\"filter body-large\" [style.color]=\"styles?.background?.accentColor\">\r\n          Filters\r\n        </div>\r\n        <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\r\n          Clear all\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center justify-content-between\" style=\"width: 80%;margin-left: 10px;\">\r\n      <div class=\"fs-6 fw-normal\" [style.color]=\"styles?.background?.accentColor\">Showing {{(pageNo -1)*size +1}}-{{minSize}} of {{ totalCount }} Results</div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 10px;\" [style.color]=\"styles?.background?.accentColor\">\r\n          <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n          <select (change)=\"applyFilter($event, 'SORT')\">\r\n              <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{filter.name}}</option>\r\n          </select>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex w-100 onlyMobile\" style=\"gap: 5px; overflow-x: auto;\" [style.color]=\"styles?.background?.accentColor\">\r\n      <ng-container *ngFor=\"let filter of filterList\">\r\n        <div class=\"d-flex justify-content-between w-100 chip\" [style.color]=\"styles?.background?.accentColor\">\r\n          <span>{{filter.name}}</span>\r\n          <span style=\"cursor: pointer; margin-left: 5px;\" (click)=\"removeFilter(filter)\">X</span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex justify-content-between\">\r\n      <div class=\"filter-side onlyDesktop\">\r\n        <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n      </div>\r\n      <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n        <ng-container *ngIf=\"!filterLoading\">\r\n            <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n              <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"getProductWidth()\" style=\"cursor: pointer;\">\r\n                <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image position-relative\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n                  <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n                  <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n                </div>\r\n                <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\" class=\"position-relative\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n                  <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"product?.itemImages?.[0]?.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"product-img\">\r\n                  <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n                </div>\r\n                <div class=\"mt-2 w-100\">\r\n                  <div class=\"product-name heading-large w-100 text-left trim-text\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n                  <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n                    <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n                      <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"varient.variantImages?.[0]?.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\" [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\" (click)=\"selectVarient(product, varient)\">\r\n                    </ng-container>\r\n                  </div>\r\n                  <div class=\"d-flex align-item-center justify-content-between\">\r\n                    <div class=\"price body-large text-left d-flex align-items-center\">\r\n                      <!-- <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n                        <span [innerHTML]='currency'></span>\r\n                        {{product.price.value}}\r\n                      </div> -->\r\n                      <div class=\"discounted-price\"[style.color]=\"styles?.background?.accentColor\">\r\n                        <span [innerHTML]='currency'></span>\r\n                        {{product.price.discountedPrice}}\r\n                      </div>\r\n                    </div>\r\n                    <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n                      <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n                        [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart($event, product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n                      <div class=\"quantity\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\">\r\n                        <span (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n                        <span>{{product.quantity}}</span>\r\n                        <span (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n                      </div>\r\n                      <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <simpo-pagnination style=\"width: 100%;\" class=\"mt-15\" [totalPages]=\"totalPages\" [currentPage]=\"pageNo\" (paginationChange)=\"paginationChange($event)\"></simpo-pagnination>\r\n            </div>\r\n\r\n            <section class=\"empty-cart\" *ngIf=\"responseData?.length == 0\">\r\n              <div>\r\n                <div class=\"cart-image\">\r\n                  <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   style=\"height: 150px; width: 150px;\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n                </div>\r\n                <div class=\"cart-text\">\r\n                  <div class=\"heading-medium d-flex justify-content-center\" [style.color]=\"styles?.background?.accentColor\">\r\n                    Product list is empty\r\n                  </div>\r\n                  <div class=\"description d-flex justify-content-center mt-4\" [style.color]=\"styles?.background?.accentColor\">\r\n                    Looks like no item is present with filter. Go ahead & explore top categories.\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </section>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div class=\"bottom-filter\"[style.color]=\"styles?.background?.accentColor\">\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n          <mat-icon>sort</mat-icon>\r\n          <span>Sort by</span>\r\n        </div>\r\n        <div class=\"divider\"></div>\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n          <mat-icon>filter_list</mat-icon>\r\n          <span>Filter</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading || filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #FilterSection>\r\n  <section>\r\n    <div class=\"d-flex flex-column m-auto\" style=\"width: 95%;\">\r\n      <ng-container *ngFor=\"let filter of filterList\">\r\n        <div class=\"d-flex justify-content-between w-100 chip\" [style.color]=\"styles?.background?.accentColor\">\r\n          <span>{{filter.name}}</span>\r\n          <span style=\"cursor: pointer;\" (click)=\"removeFilter(filter)\">X</span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"categories-section\" *ngIf=\"categories?.length\">\r\n      <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\r\n        Shop by categories\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let category of categories\" (click)=\"applyFilter(category, 'FILTER')\" [style.color]=\"styles?.background?.accentColor\">\r\n        <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"category.status\" />\r\n        <div class=\"trim-text\">{{category.option | uppercase}}</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"categories-section\" *ngIf=\"collections?.length\" [style.color]=\"styles?.background?.accentColor\">\r\n      <div class=\"categories heading-small\">\r\n        Shop by collections\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let collection of collections\" (click)=\"applyFilter(collection, 'FILTER')\">\r\n        <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"collection.status\" />\r\n        <div class=\"trim-text\">{{collection.option | uppercase}}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"price-section\">\r\n      <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\r\n        Shop by price\r\n      </div>\r\n      <div>\r\n        <mat-slider class=\"mat-slider\" [min]=\"minProductPrice\" [max]=\"maxProductPrice\" style=\"width: 250px;\">\r\n          <input matSliderStartThumb [(ngModel)]=\"pricingMin\">\r\n          <input matSliderEndThumb [(ngModel)]=\"pricingMax\">\r\n        </mat-slider>\r\n      </div>\r\n      <div class=\"price-button-section\">\r\n        <div class=\"button-section\">\r\n          <button (click)=\"applyFilter()\">Filter</button>\r\n        </div>\r\n        <div class=\"price-range\">\r\n          Price: <span [innerHtml]='currency'></span>{{ pricingMin }} - <span [innerHtml]='currency'></span>{{ pricingMax | formateAmount }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n<ng-template #SortingSection>\r\n  <section style=\"padding: 10px\">\r\n    <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n      <span>Sort by</span>\r\n      <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n    </div>\r\n    <mat-radio-group class=\"d-flex flex-column\">\r\n        <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"applyFilter($event, 'SORT')\">{{sortingType.name}}</mat-radio-button>\r\n    </mat-radio-group>\r\n  </section>\r\n</ng-template>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.trim-text{text-align:left!important;display:inline-block!important;white-space:nowrap!important;overflow:hidden!important;-webkit-line-clamp:1!important;text-overflow:ellipsis!important}.price{color:#222;font-size:16px;font-weight:600;line-height:normal;text-align:left}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;text-align:left!important;width:220px}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.add-to-cart-btn button{height:35px;font-size:16px!important}.fav-icon{position:absolute;z-index:1000;padding:5px;right:3px;top:3px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.discounted-price{margin-top:-3px}.filter-side{width:19%;position:sticky;top:0;height:fit-content}.filter-top-section{padding:0 2rem}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.categories{display:flex;padding:1rem 2rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;background:#0267c1;color:#fff;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{background:#0267c1;padding:8px 15px;border-radius:3px;margin:3px 0;color:#fff;transition:.3s opacity ease}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;justify-content:space-between}.price-range{padding-right:22px;color:#93959e;font-size:15px}.right-side{width:80%;margin-left:10px}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:30px;width:30px;border-radius:50%;cursor:pointer;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important}.discounted-price,.add-to-cart-btn button{font-size:14px!important}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:block!important}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:1000;width:100%;margin-left:-5px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:220px}.default-image img{height:220px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group{position:relative;width:95%;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i12.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i14.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i14.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "component", type: PagninationComponent, selector: "simpo-pagnination", inputs: ["totalPages", "currentPage"], outputs: ["paginationChange"] }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { 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: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i15.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i15.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "pipe", type: FormateAmount, name: "formateAmount" }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
 }
@@ -6443,7 +6444,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         MatRadioModule,
                         FormateAmount,
                         ToastModule
-                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n\r\n<div class=\"input-group\" *ngIf=\"isMobile\">\r\n  <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n  <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div>\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n  <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [style.paddingTop.px]=\"isMobile ? 0 : ''\">\r\n\r\n    <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\r\n      <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 20%;\">\r\n        <div class=\"filter body-large\" [style.color]=\"styles?.background?.accentColor\">\r\n          Filters\r\n        </div>\r\n        <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\r\n          Clear all\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center justify-content-between\" style=\"width: 80%;margin-left: 10px;\">\r\n      <div class=\"fs-6 fw-normal\" [style.color]=\"styles?.background?.accentColor\">Showing {{(pageNo -1)*size +1}}-{{minSize}} of {{ totalCount }} Results</div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 10px;\" [style.color]=\"styles?.background?.accentColor\">\r\n          <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n          <select (change)=\"applyFilter($event, 'SORT')\">\r\n              <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{filter.name}}</option>\r\n          </select>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex w-100 onlyMobile\" style=\"gap: 5px; overflow-x: auto;\" [style.color]=\"styles?.background?.accentColor\">\r\n      <ng-container *ngFor=\"let filter of filterList\">\r\n        <div class=\"d-flex justify-content-between w-100 chip\" [style.color]=\"styles?.background?.accentColor\">\r\n          <span>{{filter.name}}</span>\r\n          <span style=\"cursor: pointer; margin-left: 5px;\" (click)=\"removeFilter(filter)\">X</span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex justify-content-between\">\r\n      <div class=\"filter-side onlyDesktop\">\r\n        <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n      </div>\r\n      <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n        <ng-container *ngIf=\"!filterLoading\">\r\n            <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n              <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"getProductWidth()\" style=\"cursor: pointer;\">\r\n                <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image position-relative\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n                  <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n                  <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n                </div>\r\n                <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\" class=\"position-relative\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n                  <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"product?.itemImages?.[0]?.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"product-img\">\r\n                  <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n                </div>\r\n                <div class=\"mt-2 w-100\">\r\n                  <div class=\"product-name heading-large w-100 text-left trim-text\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n                  <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n                    <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n                      <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"varient.variantImages?.[0]?.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\" [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\" (click)=\"selectVarient(product, varient)\">\r\n                    </ng-container>\r\n                  </div>\r\n                  <div class=\"d-flex align-item-center justify-content-between\">\r\n                    <div class=\"price body-large text-left d-flex align-items-center\">\r\n                      <!-- <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n                        <span [innerHTML]='currency'></span>\r\n                        {{product.price.value}}\r\n                      </div> -->\r\n                      <div class=\"discounted-price\"[style.color]=\"styles?.background?.accentColor\">\r\n                        <span [innerHTML]='currency'></span>\r\n                        {{product.price.discountedPrice}}\r\n                      </div>\r\n                    </div>\r\n                    <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n                      <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n                        [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart($event, product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n                      <div class=\"quantity\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\">\r\n                        <span (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n                        <span>{{product.quantity}}</span>\r\n                        <span (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n                      </div>\r\n                      <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <simpo-pagnination style=\"width: 100%;\" class=\"mt-15\" [totalPages]=\"totalPages\" [currentPage]=\"pageNo\" (paginationChange)=\"paginationChange($event)\"></simpo-pagnination>\r\n            </div>\r\n\r\n            <section class=\"empty-cart\" *ngIf=\"responseData?.length == 0\">\r\n              <div>\r\n                <div class=\"cart-image\">\r\n                  <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   style=\"height: 150px; width: 150px;\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n                </div>\r\n                <div class=\"cart-text\">\r\n                  <div class=\"heading-medium d-flex justify-content-center\" [style.color]=\"styles?.background?.accentColor\">\r\n                    Product list is empty\r\n                  </div>\r\n                  <div class=\"description d-flex justify-content-center mt-4\" [style.color]=\"styles?.background?.accentColor\">\r\n                    Looks like no item is present with filter. Go ahead & explore top categories.\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </section>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div class=\"bottom-filter\"[style.color]=\"styles?.background?.accentColor\">\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n          <mat-icon>sort</mat-icon>\r\n          <span>Sort by</span>\r\n        </div>\r\n        <div class=\"divider\"></div>\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n          <mat-icon>filter_list</mat-icon>\r\n          <span>Filter</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading || filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #FilterSection>\r\n  <section>\r\n    <div class=\"d-flex flex-column m-auto\" style=\"width: 95%;\">\r\n      <ng-container *ngFor=\"let filter of filterList\">\r\n        <div class=\"d-flex justify-content-between w-100 chip\" [style.color]=\"styles?.background?.accentColor\">\r\n          <span>{{filter.name}}</span>\r\n          <span style=\"cursor: pointer;\" (click)=\"removeFilter(filter)\">X</span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"categories-section\" *ngIf=\"categories?.length\">\r\n      <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\r\n        Shop by categories\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let category of categories\" (click)=\"applyFilter(category, 'FILTER')\" [style.color]=\"styles?.background?.accentColor\">\r\n        <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"category.status\" />\r\n        <div class=\"trim-text\">{{category.option | uppercase}}</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"categories-section\" *ngIf=\"collections?.length\" [style.color]=\"styles?.background?.accentColor\">\r\n      <div class=\"categories heading-small\">\r\n        Shop by collections\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let collection of collections\" (click)=\"applyFilter(collection, 'FILTER')\">\r\n        <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"collection.status\" />\r\n        <div class=\"trim-text\">{{collection.option | uppercase}}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"price-section\">\r\n      <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\r\n        Shop by price\r\n      </div>\r\n      <div>\r\n        <mat-slider class=\"mat-slider\" [min]=\"minProductPrice\" [max]=\"maxProductPrice\" style=\"width: 250px;\">\r\n          <input matSliderStartThumb [(ngModel)]=\"pricingMin\">\r\n          <input matSliderEndThumb [(ngModel)]=\"pricingMax\">\r\n        </mat-slider>\r\n      </div>\r\n      <div class=\"price-button-section\">\r\n        <div class=\"button-section\">\r\n          <button (click)=\"applyFilter()\">Filter</button>\r\n        </div>\r\n        <div class=\"price-range\">\r\n          Price: <span [innerHtml]='currency'></span>{{ pricingMin }} - <span [innerHtml]='currency'></span>{{ pricingMax | formateAmount }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n<ng-template #SortingSection>\r\n  <section style=\"padding: 10px\">\r\n    <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n      <span>Sort by</span>\r\n      <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n    </div>\r\n    <mat-radio-group class=\"d-flex flex-column\">\r\n        <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"applyFilter($event, 'SORT')\">{{sortingType.name}}</mat-radio-button>\r\n    </mat-radio-group>\r\n  </section>\r\n</ng-template>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.trim-text{text-align:left!important;display:inline-block!important;white-space:nowrap!important;overflow:hidden!important;-webkit-line-clamp:1!important;text-overflow:ellipsis!important}.price{color:#222;font-size:16px;font-weight:600;line-height:normal;text-align:left}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;text-align:left!important;width:220px}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.add-to-cart-btn button{height:35px;font-size:16px!important}.fav-icon{position:absolute;z-index:1000;padding:5px;right:3px;top:3px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.discounted-price{margin-top:-3px}.filter-side{width:19%;position:sticky;top:0;height:fit-content}.filter-top-section{padding:0 2rem}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.categories{display:flex;padding:1rem 2rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;background:#0267c1;color:#fff;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{background:#0267c1;padding:8px 15px;border-radius:3px;margin:3px 0;color:#fff;transition:.3s opacity ease}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;justify-content:space-between}.price-range{padding-right:22px;color:#93959e;font-size:15px}.right-side{width:80%;margin-left:10px}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:30px;width:30px;border-radius:50%;cursor:pointer;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:block!important}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:1000;width:100%;margin-left:-12px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:220px}.default-image img{height:220px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group{position:relative;width:95%;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}\n"] }]
+                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n\r\n<div class=\"input-group\" *ngIf=\"isMobile\">\r\n  <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n  <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div>\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n  <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\">\r\n\r\n    <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\r\n      <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 20%;\">\r\n        <div class=\"filter body-large\" [style.color]=\"styles?.background?.accentColor\">\r\n          Filters\r\n        </div>\r\n        <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\r\n          Clear all\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center justify-content-between\" style=\"width: 80%;margin-left: 10px;\">\r\n      <div class=\"fs-6 fw-normal\" [style.color]=\"styles?.background?.accentColor\">Showing {{(pageNo -1)*size +1}}-{{minSize}} of {{ totalCount }} Results</div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 10px;\" [style.color]=\"styles?.background?.accentColor\">\r\n          <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n          <select (change)=\"applyFilter($event, 'SORT')\">\r\n              <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{filter.name}}</option>\r\n          </select>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex w-100 onlyMobile\" style=\"gap: 5px; overflow-x: auto;\" [style.color]=\"styles?.background?.accentColor\">\r\n      <ng-container *ngFor=\"let filter of filterList\">\r\n        <div class=\"d-flex justify-content-between w-100 chip\" [style.color]=\"styles?.background?.accentColor\">\r\n          <span>{{filter.name}}</span>\r\n          <span style=\"cursor: pointer; margin-left: 5px;\" (click)=\"removeFilter(filter)\">X</span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex justify-content-between\">\r\n      <div class=\"filter-side onlyDesktop\">\r\n        <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n      </div>\r\n      <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n        <ng-container *ngIf=\"!filterLoading\">\r\n            <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n              <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"getProductWidth()\" style=\"cursor: pointer;\">\r\n                <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image position-relative\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n                  <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n                  <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n                </div>\r\n                <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\" class=\"position-relative\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n                  <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"product?.itemImages?.[0]?.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"product-img\">\r\n                  <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n                </div>\r\n                <div class=\"mt-2 w-100\">\r\n                  <div class=\"product-name heading-large w-100 text-left trim-text\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n                  <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n                    <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n                      <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"varient.variantImages?.[0]?.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\" [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\" (click)=\"selectVarient(product, varient)\">\r\n                    </ng-container>\r\n                  </div>\r\n                  <div class=\"d-flex align-item-center justify-content-between\">\r\n                    <div class=\"price body-large text-left d-flex align-items-center\">\r\n                      <!-- <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n                        <span [innerHTML]='currency'></span>\r\n                        {{product.price.value}}\r\n                      </div> -->\r\n                      <div class=\"discounted-price\"[style.color]=\"styles?.background?.accentColor\">\r\n                        <span [innerHTML]='currency'></span>\r\n                        {{product.price.discountedPrice}}\r\n                      </div>\r\n                    </div>\r\n                    <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n                      <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n                        [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart($event, product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n                      <div class=\"quantity\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\">\r\n                        <span (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n                        <span>{{product.quantity}}</span>\r\n                        <span (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n                      </div>\r\n                      <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <simpo-pagnination style=\"width: 100%;\" class=\"mt-15\" [totalPages]=\"totalPages\" [currentPage]=\"pageNo\" (paginationChange)=\"paginationChange($event)\"></simpo-pagnination>\r\n            </div>\r\n\r\n            <section class=\"empty-cart\" *ngIf=\"responseData?.length == 0\">\r\n              <div>\r\n                <div class=\"cart-image\">\r\n                  <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   style=\"height: 150px; width: 150px;\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n                </div>\r\n                <div class=\"cart-text\">\r\n                  <div class=\"heading-medium d-flex justify-content-center\" [style.color]=\"styles?.background?.accentColor\">\r\n                    Product list is empty\r\n                  </div>\r\n                  <div class=\"description d-flex justify-content-center mt-4\" [style.color]=\"styles?.background?.accentColor\">\r\n                    Looks like no item is present with filter. Go ahead & explore top categories.\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </section>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div class=\"bottom-filter\"[style.color]=\"styles?.background?.accentColor\">\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n          <mat-icon>sort</mat-icon>\r\n          <span>Sort by</span>\r\n        </div>\r\n        <div class=\"divider\"></div>\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n          <mat-icon>filter_list</mat-icon>\r\n          <span>Filter</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading || filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #FilterSection>\r\n  <section>\r\n    <div class=\"d-flex flex-column m-auto\" style=\"width: 95%;\">\r\n      <ng-container *ngFor=\"let filter of filterList\">\r\n        <div class=\"d-flex justify-content-between w-100 chip\" [style.color]=\"styles?.background?.accentColor\">\r\n          <span>{{filter.name}}</span>\r\n          <span style=\"cursor: pointer;\" (click)=\"removeFilter(filter)\">X</span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"categories-section\" *ngIf=\"categories?.length\">\r\n      <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\r\n        Shop by categories\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let category of categories\" (click)=\"applyFilter(category, 'FILTER')\" [style.color]=\"styles?.background?.accentColor\">\r\n        <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"category.status\" />\r\n        <div class=\"trim-text\">{{category.option | uppercase}}</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"categories-section\" *ngIf=\"collections?.length\" [style.color]=\"styles?.background?.accentColor\">\r\n      <div class=\"categories heading-small\">\r\n        Shop by collections\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let collection of collections\" (click)=\"applyFilter(collection, 'FILTER')\">\r\n        <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"collection.status\" />\r\n        <div class=\"trim-text\">{{collection.option | uppercase}}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"price-section\">\r\n      <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\r\n        Shop by price\r\n      </div>\r\n      <div>\r\n        <mat-slider class=\"mat-slider\" [min]=\"minProductPrice\" [max]=\"maxProductPrice\" style=\"width: 250px;\">\r\n          <input matSliderStartThumb [(ngModel)]=\"pricingMin\">\r\n          <input matSliderEndThumb [(ngModel)]=\"pricingMax\">\r\n        </mat-slider>\r\n      </div>\r\n      <div class=\"price-button-section\">\r\n        <div class=\"button-section\">\r\n          <button (click)=\"applyFilter()\">Filter</button>\r\n        </div>\r\n        <div class=\"price-range\">\r\n          Price: <span [innerHtml]='currency'></span>{{ pricingMin }} - <span [innerHtml]='currency'></span>{{ pricingMax | formateAmount }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n<ng-template #SortingSection>\r\n  <section style=\"padding: 10px\">\r\n    <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n      <span>Sort by</span>\r\n      <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n    </div>\r\n    <mat-radio-group class=\"d-flex flex-column\">\r\n        <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"applyFilter($event, 'SORT')\">{{sortingType.name}}</mat-radio-button>\r\n    </mat-radio-group>\r\n  </section>\r\n</ng-template>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.trim-text{text-align:left!important;display:inline-block!important;white-space:nowrap!important;overflow:hidden!important;-webkit-line-clamp:1!important;text-overflow:ellipsis!important}.price{color:#222;font-size:16px;font-weight:600;line-height:normal;text-align:left}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;text-align:left!important;width:220px}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.add-to-cart-btn button{height:35px;font-size:16px!important}.fav-icon{position:absolute;z-index:1000;padding:5px;right:3px;top:3px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.discounted-price{margin-top:-3px}.filter-side{width:19%;position:sticky;top:0;height:fit-content}.filter-top-section{padding:0 2rem}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.categories{display:flex;padding:1rem 2rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;background:#0267c1;color:#fff;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{background:#0267c1;padding:8px 15px;border-radius:3px;margin:3px 0;color:#fff;transition:.3s opacity ease}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;justify-content:space-between}.price-range{padding-right:22px;color:#93959e;font-size:15px}.right-side{width:80%;margin-left:10px}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:30px;width:30px;border-radius:50%;cursor:pointer;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important}.discounted-price,.add-to-cart-btn button{font-size:14px!important}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:block!important}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:1000;width:100%;margin-left:-5px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:220px}.default-image img{height:220px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group{position:relative;width:95%;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}\n"] }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]