simpo-component-library 3.6.495 → 3.6.497

package/fesm2022/simpo-component-library.mjs

@@ -6987,7 +6987,8 @@ class RestService {
         let subIndustryId = this.storage.getItem("subIndustryId");
         if (!subIndustryId)
             subIndustryId = "";
-        return this.http.get(this.BASE_URL + `ecommerce/product/collection/id?collectionId=${collectionId || ''}&isJewellery=${this.isJewellery}`).pipe(map((response) => response.data?.map((product) => new Product(product))));
+        return this.http.get(this.BASE_URL + `ecommerce/product/collection/id?collectionId=1f0987b0-4d02-6606-9ea2-35dd099af3f1
+&isJewellery=${this.isJewellery}`).pipe(map((response) => response.data?.map((product) => new Product(product))));
     }
     getCategoriesByCollectionId(collectionId) {
         return this.http.get(this.BASE_URL + `ecommerce/inventory/category/collectionId?collectionId=${collectionId}`).pipe(map((response) => response.data?.map((category) => new Category(category))));
@@ -12660,18 +12661,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['mouseleave']
             }] } });
 
+class LettersOnlyDirective {
+    constructor(el) {
+        this.el = el;
+    }
+    onInputChange(event) {
+        const initalValue = this.el.nativeElement.value;
+        // Use a regular expression to remove any characters that are not letters or spaces
+        this.el.nativeElement.value = initalValue.replace(/[^a-zA-Z ]*/g, '');
+        if (initalValue !== this.el.nativeElement.value) {
+            event.stopPropagation();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LettersOnlyDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: LettersOnlyDirective, isStandalone: true, selector: "[simpoLettersOnly]", host: { listeners: { "input": "onInputChange($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LettersOnlyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[simpoLettersOnly]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onInputChange: [{
+                type: HostListener,
+                args: ['input', ['$event']]
+            }] } });
+
+class NumbersOnlyDirective {
+    constructor(el) {
+        this.el = el;
+    }
+    onInputChange(event) {
+        const initalValue = this.el.nativeElement.value;
+        // Use a regular expression to remove any non-numeric characters
+        this.el.nativeElement.value = initalValue.replace(/[^0-9]*/g, '');
+        if (initalValue !== this.el.nativeElement.value) {
+            event.stopPropagation();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NumbersOnlyDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: NumbersOnlyDirective, isStandalone: true, selector: "[simpoNumbersOnly]", host: { listeners: { "input": "onInputChange($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NumbersOnlyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[simpoNumbersOnly]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onInputChange: [{
+                type: HostListener,
+                args: ['input', ['$event']]
+            }] } });
+
 class AppointmentBookingComponent {
-    constructor(restService, _eventService, router) {
+    constructor(restService, _eventService, router, messageService) {
         this.restService = restService;
         this._eventService = _eventService;
         this.router = router;
+        this.messageService = messageService;
+        this.screenWidth = 0;
         this.accessedTabs = {
             serviceListing: false,
             locationListing: false,
             staffListing: false
         };
-        this.businessName = localStorage.getItem('bName') ?? "";
-        this.businessId = localStorage.getItem('bId') ?? "";
+        this.businessName = localStorage.getItem('bName') ?? "24K Bazaar";
+        this.businessId = localStorage.getItem('bId') ?? "1f095216-7c00-6cab-9045-ff9c70e1c641";
         this.activeButton = false;
         this.selectedTab = '';
         this.barWidth = '';
@@ -12687,6 +12742,12 @@ class AppointmentBookingComponent {
             email: '',
             mobileNumber: ''
         };
+        this.dateFilter = (d) => {
+            const date = (d || new Date());
+            const today = new Date();
+            today.setHours(0, 0, 0, 0);
+            return date.getTime() >= today.getTime();
+        };
         this.serviceData = [];
         this.locationData = [];
         this.staffPayload = {
@@ -12720,12 +12781,17 @@ class AppointmentBookingComponent {
                 name: ''
             },
             storeId: '',
-            businessId: this.businessId
+            businessId: this.businessId,
+            businessName: this.businessName
         };
         this.apiStatus = false;
     }
     ngOnInit() {
         this.getAllServices();
+        this.getScreenSize();
+    }
+    getScreenSize() {
+        this.screenWidth = window.innerWidth;
     }
     closeOnOutsideClick() {
         this.showCalendar = false;
@@ -12736,6 +12802,8 @@ class AppointmentBookingComponent {
         this.showCalendar = !this.showCalendar;
     }
     onDateSelected(date) {
+        this.selectedTime = {};
+        this.activeButton = false;
         this.selectedDate = date;
         this.selectedDateStr = this.formatDate(date);
         this.showCalendar = false;
@@ -12814,7 +12882,7 @@ class AppointmentBookingComponent {
                 this.getAvailableSlots();
         }
         else if (this.selectedTab === 'dateSelection') {
-            this.activeButton = this.selectedDateStr && this.selectedTime ? true : false;
+            this.activeButton = this.appointmentPayload.customerDetail.name && this.appointmentPayload.customerDetail.email && this.appointmentPayload.customerDetail.phoneNumber.length === 10 ? true : false;
             this.selectedTab = 'contactDetails';
             this.barWidth = '70.57';
         }
@@ -12875,7 +12943,7 @@ class AppointmentBookingComponent {
             if (res.content.length > 0) {
                 this.serviceData = res.content.filter((service) => service.active === true);
                 this.serviceData.forEach(service => service.selected = false);
-                console.log(this.serviceData);
+                // console.log(this.serviceData)
                 if (this.serviceData.length === 1 && !this.activeButton) {
                     this.selectedService = this.serviceData[0];
                     this.getAllLocations();
@@ -12985,18 +13053,28 @@ class AppointmentBookingComponent {
         this.activeButton = true;
     }
     checkRequiredValues() {
-        if (this.appointmentPayload.customerDetail.name && this.appointmentPayload.customerDetail.email && this.appointmentPayload.customerDetail.phoneNumber) {
+        if (this.appointmentPayload.customerDetail.name && this.appointmentPayload.customerDetail.email && this.appointmentPayload.customerDetail.phoneNumber.length === 10) {
             this.activeButton = true;
-            console.log(this.selectedService, this.selectedLocation, this.selectedStaff, this.selectedDate, this.selectedTime, this.userDetails);
+            // console.log(this.selectedService, this.selectedLocation, this.selectedStaff, this.selectedDate, this.selectedTime, this.userDetails)
+        }
+        else {
+            this.activeButton = false;
         }
     }
     checkPayment() {
-        // if (this.selectedService?.depositAmount?.depositRequired) {
-        //   this.paymentBookingAppointment();
-        // } else {
-        //   this.createAppointment();
-        // }
-        this.createAppointment();
+        const request_form = localStorage.getItem("REQUEST_FROM");
+        if (request_form === 'ECOMMERCE') {
+            this.createAppointment();
+        }
+        else {
+            if (this.selectedService?.depositAmount?.depositRequired) {
+                this.paymentBookingAppointment();
+            }
+            else {
+                this.createAppointment();
+            }
+        }
+        // this.createAppointment();
     }
     createAppointment() {
         const date = this.selectedDate ?? new Date();
@@ -13031,20 +13109,36 @@ class AppointmentBookingComponent {
         this.appointmentPayload.startTime = this.selectedTime.value.slice(0, 5);
         this.appointmentPayload.bookingDate = `${yyyy}-${mm}-${dd}T00:00:00.000Z`;
         this.restService.paymentForAppointment(this.appointmentPayload).subscribe((res) => {
-            this._eventService.cashFreeEvent.emit(res.data);
+            this._eventService.cashFreeEvent.emit(res.data.pgOrderId);
         }, (error) => {
             this.loader = false;
+            this.messageService.add({ severity: 'error', summary: 'Payment Failed', detail: error.message });
         });
     }
     goBack() {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppointmentBookingComponent, deps: [{ token: RestService }, { token: EventsService }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AppointmentBookingComponent, isStandalone: true, selector: "simpo-appointment-booking", host: { listeners: { "document:click": "closeOnOutsideClick()" } }, ngImport: i0, template: "<section class=\"main_section\">\r\n    <div class=\"main_header\">\r\n        <div class=\"header d-flex justify-content-between align-items-center\">\r\n            <div class=\"back-btn d-flex justify-content-center align-items-center cursor-pointer gap-2 mb-3\"\r\n                (click)=\"goBack()\">\r\n                <mat-icon>keyboard_backspace</mat-icon><span>Back to My Bookings</span>\r\n            </div>\r\n            <div class=\"header-title\">\r\n                <h1>Book New Appointment</h1>\r\n                <p>{{businessName ?? \"N/A\" }}</p>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"progress-bar\">\r\n            <div class=\"progress-fill\" [style.width]=\"barWidth + '%'\"></div>\r\n        </div>\r\n    </div>\r\n    <div class=\"main_body w-100 d-flex justify-content-center\"><ng-container *ngIf=\"selectedTab === 'serviceListing'\">\r\n            <ng-container *ngTemplateOutlet=\"serviceListing\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'locationListing'\">\r\n            <ng-container *ngTemplateOutlet=\"locationListing\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'staffListing'\">\r\n            <ng-container *ngTemplateOutlet=\"staffListing\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'dateSelection'\">\r\n            <ng-container *ngTemplateOutlet=\"dateSelection\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='contactDetails'\">\r\n            <ng-container *ngTemplateOutlet=\"contactDetails\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='paymentTab'\">\r\n            <ng-container *ngTemplateOutlet=\"paymentTab\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='statusTemplate'\">\r\n            <ng-container *ngTemplateOutlet=\"statusTemplate\"></ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"main_footer d-flex justify-content-center align-items-center\" *ngIf=\"selectedTab!=='statusTemplate'\">\r\n        <div class=\"footer-buttons\">\r\n            <span class=\"back-footer-btn cursor-pointer\" (click)=\"previousStep()\">Back</span>\r\n            <button class=\"continue-btn\" [disabled]=\"!activeButton\" (click)=\"nextStep()\"\r\n                *ngIf=\"selectedTab!='paymentTab'\">{{!loader ? 'Continue' : 'Loading...'}}</button>\r\n            <button class=\"complete_booking cursor-pointer\" *ngIf=\"selectedTab==='paymentTab'\"\r\n                (click)=\"checkPayment()\">Complete Booking</button>\r\n        </div>\r\n    </div>\r\n</section>\r\n<ng-template #serviceListing>\r\n    <div class=\"w-60 service_section\">\r\n        <div class=\"service-selection\">\r\n            <h2>Select a Service</h2>\r\n            <p>Choose the service you'd like to book</p>\r\n\r\n            <div class=\"services-grid\">\r\n                <ng-container *ngFor=\"let service of serviceData\">\r\n                    <div class=\"\" (click)=\"selectService(service)\"\r\n                        [ngClass]=\"{ 'service-card-selected' : service?.selected, 'service-card': !service?.selected }\">\r\n                        <div class=\" service-header\">\r\n                            <div class=\"service-icon\"><mat-icon>person_outline</mat-icon></div>\r\n                            <div class=\"service-info\">\r\n                                <div class=\"service-title\">{{service?.name ? service?.name : 'N/A'}}</div>\r\n                                <div class=\"service-category\">Wellness</div>\r\n                            </div>\r\n                            <div>\r\n                                <div class=\"service-price\">\u20B9{{service?.priceDetails?.price ?\r\n                                    service?.priceDetails?.price : 'N/A' }}</div>\r\n                                <div class=\"service-duration\">{{service?.duration ? service?.duration : 'N/A'}} min\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"service-description\">\r\n                            {{service?.description ? service?.description : 'N/A'}}\r\n                        </div>\r\n                        <div class=\"home-visit\" *ngIf=\"service?.homeAppointmentAvailable\"><img\r\n                                src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/982126c1758628863129furniture_16406103.png\">Home\r\n                            Visit Available</div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <!-- <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\uD83D\uDC64</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">General Consultation</div>\r\n                            <div class=\"service-category\">Medical</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B9800</div>\r\n                            <div class=\"service-duration\">30 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Comprehensive health consultation\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\uD83E\uDDE0</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">Mental Health Counseling</div>\r\n                            <div class=\"service-category\">Mental Health</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B91500</div>\r\n                            <div class=\"service-duration\">45 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Professional psychological support\r\n                    </div>\r\n                    <div class=\"home-visit\">Home Visit Available</div>\r\n                </div>\r\n\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\u2702</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">Hair Cut & Styling</div>\r\n                            <div class=\"service-category\">Beauty</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B91200</div>\r\n                            <div class=\"service-duration\">45 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Professional hair cutting and styling\r\n                    </div>\r\n                    <div class=\"home-visit\">Home Visit Available</div>\r\n                </div> -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #locationListing>\r\n    <div class=\"location_header\">\r\n        <div class=\"header flex-column align-items-start\">\r\n            <h1>Choose Location</h1>\r\n            <p>Select where you'd like to receive the service</p>\r\n        </div>\r\n\r\n        <div class=\"location-list\">\r\n            <ng-container *ngFor=\"let location of locationData\">\r\n                <div (click)=\"selectLocation(location)\"\r\n                    [ngClass]=\"{ 'location-card-selected' : location?.selected, 'location-card': !location?.selected }\">\r\n                    <div class=\"location-content\">\r\n                        <div class=\"location-info\">\r\n                            <div class=\"location-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/427226c1758629157758store_3171510.png\">\r\n                            </div>\r\n                            <div class=\"location-details\">\r\n                                <div class=\"d-flex justify-content-between align-items-center\">\r\n                                    <h3>{{location?.storeName ? location?.storeName : 'N/A'}}</h3>\r\n                                    <div class=\"distance\"><mat-icon>location_on</mat-icon> 2.3 km</div>\r\n                                </div>\r\n                                <p>{{location?.addressDetails?.addressLine}}, {{location?.addressDetails?.city}},\r\n                                    {{location?.addressDetails?.state}} {{location?.pincode}}</p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <!-- <div class=\"location-card\">\r\n                <div class=\"location-content\">\r\n                    <div class=\"location-info\">\r\n                        <div class=\"location-icon branch-icon\"></div>\r\n                        <div class=\"location-details\">\r\n                            <h3>Branch Clinic</h3>\r\n                            <p>456 Care Avenue, Health Zone, Mumbai 400015</p>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"distance\">5.8 km</div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"location-card\">\r\n                <div class=\"location-content\">\r\n                    <div class=\"location-info\">\r\n                        <div class=\"location-icon home-icon\"></div>\r\n                        <div class=\"location-details\">\r\n                            <h3>Home Visit</h3>\r\n                            <p>Your Location</p>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"distance\">0 km</div>\r\n                </div>\r\n            </div> -->\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #staffListing>\r\n    <div class=\"w-60 overflow-hidden\">\r\n        <div class=\"d-flex w-100 h-100\">\r\n            <div class=\"w-100\">\r\n                <!-- Header Section -->\r\n                <div class=\"staff-header mb-3\">\r\n                    <h1 class=\"mb-1\">Select Staff Member</h1>\r\n                    <p class=\"staff-subtitle mb-0\">Choose your preferred professional</p>\r\n                </div>\r\n\r\n                <!-- Staff Cards -->\r\n                <div class=\"d-flex flex-column gap-4 staff-list\">\r\n                    <ng-container *ngFor=\"let staff of staffData\">\r\n                        <div class=\" staff-card card rounded-3 p-4\" (click)=\"selectStaff(staff)\">\r\n                            <div class=\"d-flex align-items-start justify-content-between\">\r\n                                <div class=\"d-flex align-items-start flex-grow-1\">\r\n                                    <div\r\n                                        class=\"staff-avatar rounded-circle d-flex align-items-center justify-content-center me-4\">\r\n                                        {{staff?.staffName.slice(0,3).toUpperCase()}}\r\n                                    </div>\r\n                                    <div class=\"staff-details flex-grow-1\">\r\n                                        <h3 class=\"staff-name\">{{staff?.staffName ? staff?.staffName : 'N/A'}}</h3>\r\n                                        <p class=\"staff-specialty\">General Medicine</p>\r\n                                        <p class=\"staff-description mb-0\">Experienced physician with 10+ years in\r\n                                            general\r\n                                            medicine and wellness care.</p>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"rating-section\">\r\n                                    <div class=\"star-rating d-flex align-items-center\">\r\n                                        <span class=\"star-icon\"></span>\r\n                                        <span class=\"rating-number\">4.9</span>\r\n                                    </div>\r\n                                    <div class=\"review-count\">156 reviews</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #dateSelection>\r\n    <div class=\"w-60\">\r\n        <div class=\"row justify-content-center h-100\">\r\n            <div class=\"col-12 h-100\">\r\n                <div class=\"datetime-header mb-2\">\r\n                    <h1 class=\"mb-3\">Select Date & Time</h1>\r\n                    <p class=\"datetime-subtitle mb-0\">Choose when you'd like your appointment</p>\r\n                </div>\r\n\r\n                <!-- Main Content -->\r\n                <div class=\"d-flex gap-4 main_container\">\r\n                    <!-- Left Column - Date Selection -->\r\n                    <div class=\"w-50\">\r\n                        <div class=\"section-card card rounded-3 p-4 h-100\">\r\n                            <h3 class=\"section-title\">Select Date</h3>\r\n\r\n                            <div class=\"date-picker-container d-flex align-items-center\"\r\n                                (click)=\"$event.stopPropagation()\">\r\n                                <input type=\"text\" class=\"form-control date-input border-0 rounded-2\"\r\n                                    placeholder=\"dd-mm-yyyy\" [value]=\"selectedDateStr\" readonly\r\n                                    (click)=\"toggleCalendar($event)\">\r\n\r\n                                <mat-icon class=\"ms-2\" (click)=\"toggleCalendar($event)\">calendar_today</mat-icon>\r\n                            </div>\r\n                            <div class=\"position-relative\" (click)=\"$event.stopPropagation()\">\r\n                                <div class=\"datepicker-popover\" *ngIf=\"showCalendar\">\r\n                                    <mat-calendar [(selected)]=\"selectedDate\" (selectedChange)=\"onDateSelected($event)\">\r\n                                    </mat-calendar>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Right Column - Time Selection -->\r\n                    <div class=\"w-50\">\r\n                        <div class=\"section-card card h-100 rounded-3 p-4\">\r\n                            <h3 class=\"section-title\">Available Times</h3>\r\n\r\n                            <!-- Time Slots Grid -->\r\n                            <div class=\"row g-2 mb-4 overflow-scroll\">\r\n                                <div class=\"col-4\" *ngFor=\"let time of locationTiming\">\r\n                                    <div class=\"time-slot rounded-2\" [class.selected]=\"time.selected\"\r\n                                        (click)=\"selectTimeSlot(time)\">{{time ?\r\n                                        time?.value.slice(0,5) : 'N/A'}}</div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <!-- Waitlist Section -->\r\n                            <div class=\"waitlist-section rounded-3\">\r\n                                <div class=\"d-flex align-items-start\">\r\n                                    <div class=\"d-flex h-100 justify-content-between flex-column\"><span\r\n                                            class=\"waitlist-icon check-icon\"></span>\r\n                                        <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\">\r\n                                    </div>\r\n                                    <div>\r\n                                        <div class=\"waitlist-title\">No slots available?</div>\r\n                                        <div class=\"waitlist-description\">\r\n                                            Add me to the waitlist for earlier\r\n                                            availability\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n</ng-template>\r\n<ng-template #contactDetails>\r\n    <div class=\"w-60\">\r\n        <div class=\"d-flex\">\r\n            <div class=\"h-100 w-100\">\r\n                <!-- Header Section -->\r\n                <div class=\"contact-header mb-2\">\r\n                    <h1 class=\"mb-0\">Contact Details</h1>\r\n                    <p class=\"contact-subtitle mb-0\">Provide your contact information</p>\r\n                </div>\r\n\r\n                <!-- Form Sections -->\r\n                <div class=\"d-flex gap-3 details_container flex-column w-100\">\r\n                    <!-- Left Column - Personal Information -->\r\n                    <div class=\"d-flex gap-4\">\r\n                        <div class=\"w-50\">\r\n                            <div class=\"form-section card rounded-3 p-4 h-100\">\r\n                                <h3 class=\"section-title\">Personal Information</h3>\r\n\r\n                                <!-- Full Name -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Full Name\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"text\" class=\"form-control form-input rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.name\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\">\r\n                                </div>\r\n\r\n                                <!-- Email Address -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Email Address\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"email\" class=\"form-control form-input rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.email\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\">\r\n                                </div>\r\n\r\n                                <!-- Phone Number -->\r\n                                <div class=\"mb-0\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Phone Number\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"tel\" class=\"form-control form-input rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.phoneNumber\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\">\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <!-- Right Column - Home Visit Details -->\r\n                        <div class=\"w-50\">\r\n                            <div class=\"form-section card rounded-3 p-4 h-100\">\r\n                                <h3 class=\"section-title\">Home Visit Details</h3>\r\n\r\n                                <!-- Home Address -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Home Address\r\n                                    </label>\r\n                                    <textarea class=\"form-control form-textarea rounded-2\"\r\n                                        placeholder=\"Enter your complete address\"></textarea>\r\n                                </div>\r\n\r\n                                <!-- Special Instructions -->\r\n                                <div class=\"mb-0\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Special Instructions\r\n                                    </label>\r\n                                    <textarea class=\"form-control form-textarea rounded-2\"\r\n                                        placeholder=\"Any special instructions for the professional (optional)\"></textarea>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"policies-container\">\r\n                        <!-- Header -->\r\n                        <h2 class=\"policies-title\">Policies & Terms</h2>\r\n\r\n                        <!-- Policy Items -->\r\n                        <div class=\"policy-items-container d-flex flex-column gap-3\">\r\n                            <!-- Cancellation Policy -->\r\n                            <div class=\"policy-item d-flex justify-content-between align-items-center\"\r\n                                (click)=\"showCancellationPolicy = !showCancellationPolicy\">\r\n                                <h3 class=\"policy-title\">Cancellation Policy</h3>\r\n                                <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\r\n                                        *ngIf=\"!showCancellationPolicy\">keyboard_arrow_right</mat-icon>\r\n                                    <mat-icon *ngIf=\"showCancellationPolicy\">keyboard_arrow_down</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\r\n                                *ngIf=\"showCancellationPolicy\">\r\n                                <span>&#8226; Free cancellation up to 24 hours before appointment</span>\r\n                                <span>&#8226; 50% charge for cancellations within 24 hours</span>\r\n                                <span>&#8226; No refund for no-shows</span>\r\n                                <span>&#8226; Emergency cancellations will be reviewed case by case</span>\r\n                            </div>\r\n\r\n                            <!-- Rescheduling Policy -->\r\n                            <div class=\"policy-item d-flex justify-content-between align-items-center\"\r\n                                (click)=\"showReducingPolicy = !showReducingPolicy\">\r\n                                <h3 class=\"policy-title\">Rescheduling Policy</h3>\r\n                                <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\r\n                                        *ngIf=\"!showReducingPolicy\">keyboard_arrow_right</mat-icon>\r\n                                    <mat-icon *ngIf=\"showReducingPolicy\">keyboard_arrow_down</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\r\n                                *ngIf=\"showReducingPolicy\">\r\n                                <span>&#8226; Free cancellation up to 24 hours before appointment</span>\r\n                                <span>&#8226; 50% charge for cancellations within 24 hours</span>\r\n                                <span>&#8226; No refund for no-shows</span>\r\n                                <span>&#8226; Emergency cancellations will be reviewed case by case</span>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <!-- Acceptance Section -->\r\n                        <div class=\"acceptance-section\">\r\n                            <div class=\"custom-checkbox\"></div>\r\n                            <p class=\"acceptance-text\">\r\n                                I understand and accept the cancellation & rescheduling policies and\r\n                                <a href=\"#\" class=\"terms-link\">Terms & Conditions<span\r\n                                        class=\"external-link-icon\"></span></a>\r\n                            </p>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #paymentTab>\r\n    <div class=\"w-60\">\r\n        <div class=\"w-100 h-100\">\r\n            <div class=\"w-100 d-flex justify-content-center align-items-center flex-column\">\r\n                <!-- Header Section -->\r\n                <div class=\"payment-header mb-3 w-100\">\r\n                    <h1 class=\"mb-0\">Payment & Confirmation</h1>\r\n                    <p class=\"payment-subtitle mb-0\">Review your booking and complete payment</p>\r\n                </div>\r\n\r\n                <!-- Booking Summary Card -->\r\n                <div class=\"booking-summary-card w-50\">\r\n                    <h2 class=\"summary-title\">Booking Summary</h2>\r\n\r\n                    <!-- Service -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Service</div>\r\n                        <div class=\"summary-value\">{{selectedService?.name ? selectedService?.name : 'N/A'}}</div>\r\n                    </div>\r\n\r\n                    <!-- Professional -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Professional</div>\r\n                        <div class=\"summary-value\">{{selectedStaff?.staffName ? selectedStaff?.staffName : 'N/A'}}</div>\r\n                    </div>\r\n\r\n                    <!-- Location -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Location</div>\r\n                        <div class=\"summary-value\">{{selectedLocation?.storeName ? selectedLocation?.storeName : 'N/A'}}\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Date & Time -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Date & Time</div>\r\n                        <div class=\"summary-value\">{{selectedDate ? (selectedDate | date : 'shortData') :\r\n                            (selectedDateStr ? (selectedDateStr) : 'N/A')}} at\r\n                            15:30</div>\r\n                    </div>\r\n\r\n                    <!-- Duration -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Duration</div>\r\n                        <div class=\"summary-value\">{{selectedService?.duration ? selectedService?.duration : 'N/A'}}\r\n                            minutes</div>\r\n                    </div>\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Tax Percent</div>\r\n                        <div class=\"summary-value\">{{selectedService?.priceDetails?.taxPercent ?\r\n                            selectedService?.priceDetails?.taxPercent : 'N/A'}}%</div>\r\n                    </div>\r\n                    <!-- Total -->\r\n                    <div class=\"summary-row total-row\">\r\n                        <div class=\"summary-label\">Total</div>\r\n                        <div class=\"summary-value\">\r\n                            <span class=\"currency-symbol\">\u20B9</span>{{selectedService?.priceDetails?.price ?\r\n                            selectedService?.priceDetails?.price : 'N/A'}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #statusTemplate>\r\n    <div class=\"booking-confirmation\">\r\n        <!-- Success Icon -->\r\n        <div class=\"success-icon\">\r\n            <div class=\"checkmark-circle\">\r\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/881293c1758695578518success.gif\"\r\n                    class=\"w-100 h-100\" *ngIf=\"apiStatus\">\r\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/325000c1758695564518fail.gif\"\r\n                    class=\"w-100 h-100\" *ngIf=\"!apiStatus\">\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Main Content -->\r\n        <div class=\"confirmation-content\">\r\n            <h1 class=\"confirmation-title\">{{apiStatus ? 'Booking Confirmed!' : 'Booking Failed'}}</h1>\r\n            <p class=\"confirmation-message\">\r\n                {{apiStatus ? 'Your appointment has been successfully booked.':'Failed to book you appointment. Please\r\n                try again later'}}\r\n            </p>\r\n\r\n            <!-- Details Card -->\r\n            <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\r\n                <div class=\"details-card\">\r\n                    <h3 class=\"details-title\">Appointment Details</h3>\r\n\r\n                    <div class=\"details-row\">\r\n                        <span class=\"detail-label\">Service</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.serviceDetail?.name ?\r\n                            appointmentPayload.serviceDetail?.name : 'N/A'}}</span>\r\n                    </div>\r\n\r\n                    <div class=\"details-row\">\r\n                        <span class=\"detail-label\">Professional</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.staffDetail?.name ?\r\n                            appointmentPayload.staffDetail?.name : 'N/A'}}</span>\r\n                    </div>\r\n                    <div class=\"details-row\">\r\n                        <span class=\"detail-label\">Date & Time</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.bookingDate ?\r\n                            appointmentPayload.bookingDate.slice(0,8) :\r\n                            'N/A'}} at\r\n                            {{appointmentPayload.startTime ? appointmentPayload.startTime : 'N/A'}}</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n\r\n            <!-- Action Buttons -->\r\n            <!-- <div class=\"action-buttons\">\r\n                <button class=\"btn btn-outline\">View My Bookings</button>\r\n                <button class=\"btn btn-primary\">Back to Admin</button>\r\n            </div> -->\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: ["body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:#fff;color:#000;line-height:1.6}.main_header{padding:1%}.main_body{height:73vh}.header{display:flex;align-items:center;justify-content:space-between}.back-btn mat-icon{height:16px!important;width:20px!important;font-size:21px!important}.back-btn span{color:#000;font-size:15px;font-weight:500}.back-btn:hover{background-color:#f0f0f0}.header-title{flex-grow:1;margin-left:2rem}.header-title h1{font-size:20px;font-weight:600;margin-bottom:0}.header-title p{color:#666;font-size:14px}.step-indicator{font-size:14px;color:#000;font-weight:700}.progress-bar{width:100%;height:8px;background-color:#e0e0e0;margin-bottom:1rem;border-radius:10px;overflow:hidden}.w-60{width:60%!important}.progress-fill{height:100%;width:14.28%;background-color:#000}.service-selection{height:100%;overflow:hidden}.service-selection h2{font-size:20px;font-weight:600;margin-bottom:8px}.service-selection p{color:#666;font-size:16px;margin-bottom:1rem}.main_footer{border-top:1px solid black}.services-grid{display:grid;grid-template-columns:48% 48%;gap:15px;overflow-x:scroll;height:87%;padding-bottom:5px}.service-card{border:1px solid lightgrey;border-radius:8px;padding:24px;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.service-card:hover{background-color:#f9f9f9;box-shadow:0 4px 8px #0000001a}.service-card-selected{border:2px solid black;border-radius:8px;padding:24px;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.service-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:3rem}.service-info{flex-grow:1}.service-icon{width:40px;height:40px;border-radius:8px;background-color:#f0f0f0;display:flex;align-items:center;justify-content:center;margin-right:1rem;font-size:20px;margin-top:.2rem}.service-title{font-size:18px;font-weight:600;margin-bottom:4px}.service-category{background-color:#f0f0f0;color:#000;padding:1% 4%;border-radius:12px;font-size:12px;font-weight:500;display:inline-block}.service-price{font-size:17px;font-weight:700;color:#000}.service-duration{font-size:12px;color:#666;display:flex;justify-content:center;align-items:center}.service-description{color:#666;font-size:15px;margin-bottom:.5rem;line-height:1.5}.home-visit{display:flex;align-items:center;font-size:12px;color:#666;border:1px solid lightgrey;padding:.5% 1%;border-radius:4px;background-color:#fff;width:10vw;height:3vh;white-space:nowrap;justify-content:space-around}.home-visit img{width:18px}.footer-buttons{display:flex;justify-content:space-between;align-items:center;padding-top:20px;width:60%}.back-footer-btn{color:#000;padding:12px 24px;font-size:16px}.continue-btn{background-color:#000;color:#fff;border:2px solid black;padding:.5%;border-radius:4px;font-size:15px!important;font-weight:600;cursor:pointer;width:6vw!important}.continue-btn:hover{background-color:#333}.continue-btn:disabled{background-color:#ccc;border-color:#ccc;cursor:not-allowed}.location_header{width:60%;overflow:hidden}.location_header .header h1{font-size:20px;font-weight:600;margin-bottom:.25rem}.location_header .header p{font-size:16px;color:#888;font-weight:400}.location-list{display:flex;flex-direction:column;gap:20px;height:64vh;overflow-x:scroll;padding-bottom:1%}.location-card{border:1px solid lightgrey;border-radius:12px;padding:1.5rem 1.5rem 2rem;cursor:pointer;transition:all .3s ease}.location-card:hover{box-shadow:0 4px 8px #0000001a}.location-card-selected{border:1px solid black;border-radius:12px;padding:1.5rem 1.5rem 2rem;cursor:pointer;transition:all .3s ease}.location-content{display:flex;align-items:center;justify-content:space-between}.location-info{display:flex;align-items:center;flex-grow:1}.location-icon{width:40px;height:40px;background-color:#d3d3d3;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-right:20px}.location-icon img{width:28px}.location-details{width:95%}.location-details h3{font-size:16px;font-weight:600;margin-bottom:0}.location-details p{font-size:14px;color:#aaa;line-height:1.4;margin:0}.distance{display:flex;align-items:center;color:#888;font-size:14px;margin-left:20px}.distance mat-icon{width:18px!important;height:15px!important;font-size:17px}.staff-header h1{font-size:20px;font-weight:600}.staff-subtitle{font-size:16px;color:#888;font-weight:400}.staff-card{border:1px solid lightgrey;cursor:pointer;transition:all .3s ease;padding-bottom:2rem!important}.staff-card:hover{box-shadow:0 4px 8px #0000001a}.staff-card.selected{border-color:#666}.staff-avatar{width:64px;height:64px;background-color:gray;font-size:20px;font-weight:600;color:#fff}.staff-name{font-size:16px;font-weight:600;margin-bottom:0}.staff-specialty{font-size:14px;color:gray;margin-bottom:8px}.staff-description{font-size:14px;color:gray;line-height:1.4}.rating-section{display:flex;flex-direction:column;align-items:flex-end}.star-rating{color:gold;font-size:16px;margin-bottom:4px;width:100%}.rating-number{font-size:18px;font-weight:600;color:#000}.review-count{font-size:12px;color:#888}.star-icon:before{content:\"\\2b50\";margin-right:4px}.staff_section{width:60%;overflow:hidden}.staff-list{height:64vh;overflow-x:scroll;padding-bottom:1%}.datetime-header h1{font-size:20px;font-weight:600;margin:0!important}.main_container{height:64vh}.datetime-subtitle{font-size:16px;color:#888;font-weight:400}.section-card{border:1px solid lightgrey}.section-title{font-size:17px;font-weight:600;margin-bottom:20px}.date-picker-container{border:1px solid lightgrey}.date-picker-container mat-icon{height:17px;font-size:18px}.date-input{font-size:16px;padding:2%;width:30%}.time-slot{border:1px solid lightgrey;font-size:14px;font-weight:500;padding:6%;cursor:pointer;transition:all .3s ease;text-align:center;min-width:80px}.time-slot:hover{box-shadow:0 4px 8px #0000001a}.time-slot.selected{background-color:#555;border-color:#777;color:#fff}.waitlist-section{background-color:gray;border:none;padding:20px;max-height:13vh}.waitlist-icon{color:#4ade80;font-size:18px;margin-right:8px}.waitlist-title{color:#fff;font-size:16px;font-weight:500;margin-bottom:8px}.waitlist-description{color:#aaa;font-size:14px;margin-bottom:0}.check-icon:before{content:\"\\2713\"}.contact-header h1{font-size:20px;font-weight:600}.contact-subtitle{font-size:16px;color:#888;font-weight:400}.form-section{border:1px solid lightgrey}.section-title{font-size:16px;font-weight:600;margin-bottom:24px}.form-label{font-size:14px;font-weight:500;margin-bottom:8px}.required-asterisk{color:#ff6b6b;margin-left:4px}.form-input{border:1px solid lightgrey;font-size:16px;padding:2%;transition:all .3s ease}.form-input:focus{border-color:#777}.form-input::placeholder{color:#aaa;font-size:14px}.form-textarea{border:1px solid lightgrey;font-size:16px;padding:12px 16px;resize:vertical;max-height:120px;transition:all .3s ease}.form-textarea:focus{border-color:#777}.form-textarea::placeholder{color:#aaa;font-size:14px}.optional-label{color:#888;font-size:12px;font-style:italic}.details_container{height:65vh;overflow-x:scroll;padding-bottom:1%}.policies-container{background-color:#fff;border:1px solid lightgrey;padding:2rem;border-radius:12px}.policies-title{font-size:16px;font-weight:600;color:#000;margin-bottom:1rem}.policy-item{background-color:#fff;border:1px solid lightgrey;border-radius:8px;padding:1%;cursor:pointer;transition:all .3s ease}.cancellation_policies{padding:1% .5%;font-weight:500}.policy-item:hover{background-color:#f8f9fa;border-color:#ccc}.policy-item:last-of-type{margin-bottom:32px}.policy-title{font-size:14px;font-weight:500;color:#000;margin:0}.acceptance-section{display:flex;align-items:flex-start;gap:12px;margin-top:8px}.custom-checkbox{width:20px;height:20px;background-color:#fff;border:1px solid lightgrey;border-radius:4px;margin-top:2px;cursor:pointer;position:relative;flex-shrink:0;transition:all .3s ease}.custom-checkbox:hover{border-color:#999;background-color:#f8f9fa}.custom-checkbox.checked{background-color:#007bff;border-color:#007bff}.custom-checkbox.checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:700}.acceptance-text{font-size:14px;color:#000;line-height:1.5;margin:0}.terms-link{color:#007bff;text-decoration:none;font-weight:500;position:relative}.terms-link:hover{color:#0056b3;text-decoration:underline}.external-link-icon{margin-left:4px;font-size:12px;opacity:.8}.external-link-icon:after{content:\"\\2197\"}.payment-header h1{font-size:20px;font-weight:600;color:#000}.payment-subtitle{font-size:16px;color:#666;font-weight:400}.booking-summary-card{background-color:#fff;border:1px solid lightgrey;padding:2%;border-radius:12px}.summary-title{font-size:18px;font-weight:600;color:#000;margin-bottom:32px}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0}.summary-row:last-child{border-bottom:none;padding-bottom:0}.summary-label{font-size:16px;color:#000;font-weight:500}.summary-value{font-size:16px;color:#000;font-weight:400;text-align:right}.total-row{margin-top:16px;padding-top:16px}.total-row .summary-label,.total-row .summary-value{font-size:20px;font-weight:600}.currency-symbol{font-size:18px}.complete_booking{background:#90ee90;border:none;padding:.5%;width:12vw!important;font-size:15px!important;font-weight:500;border-radius:4px}.datepicker-popover{position:absolute;top:0;left:0;z-index:1000;background:#fff;border-radius:.5rem;box-shadow:0 6px 24px #0000001f;overflow:hidden}.booking-confirmation{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;width:60%;border-radius:10px}.success-icon{margin-bottom:1.5rem}.checkmark-circle{width:80px;height:80px;position:relative}.checkmark{width:80px;height:80px;border-radius:50%;display:block;stroke-width:3;stroke:#22c55e;stroke-miterlimit:10;animation:checkmark-fill .4s ease-in-out .4s forwards,checkmark-scale .3s ease-in-out .9s both}.checkmark-circle-path{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:3;stroke-miterlimit:10;stroke:#22c55e;fill:none;animation:checkmark-stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;stroke:#22c55e;stroke-width:3;animation:checkmark-stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes checkmark-stroke{to{stroke-dashoffset:0}}@keyframes checkmark-scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes checkmark-fill{to{box-shadow:inset 0 0 0 30px #22c55e}}.confirmation-content{width:100%;height:80%}.confirmation-title{font-size:18px;font-weight:700}.confirmation-message{font-size:1rem;margin-bottom:1rem;line-height:1.6;font-weight:500}.details-card{background:#ffffff1a;border:1px solid lightgrey;border-radius:16px;padding:1.5rem;margin-bottom:2rem;width:35vw}.details-title{font-size:1.25rem;font-weight:600;margin:0 0 1.5rem}.details-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.1)}.details-row:last-child{border-bottom:none}.detail-label{font-size:.9rem;font-weight:500}.detail-value{font-weight:600;font-size:1rem}.action-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.btn{padding:.75rem 1.5rem;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .2s ease;border:none;min-width:140px}.btn-outline{background:transparent;border:2px solid rgba(255,255,255,.3);color:#fff}.btn-outline:hover{background:#ffffff1a;border-color:#ffffff80}.btn-primary{background:#fff;color:#1f2937}.btn-primary:hover{background:#f3f4f6;transform:translateY(-1px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i15.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatInputModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppointmentBookingComponent, deps: [{ token: RestService }, { token: EventsService }, { token: i2$2.Router }, { token: i6$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AppointmentBookingComponent, isStandalone: true, selector: "simpo-appointment-booking", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)", "document:click": "closeOnOutsideClick()" } }, providers: [MessageService], ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"screenWidth < 475 ? 'translateY(-100%)' : ''\"></p-toast>\r\n<section class=\"main_section\">\r\n    <div class=\"main_header\">\r\n        <div class=\"header d-flex justify-content-between align-items-center\">\r\n            <div class=\"back-btn d-flex justify-content-center align-items-center cursor-pointer gap-2 mb-3\"\r\n                (click)=\"goBack()\">\r\n                <mat-icon>keyboard_backspace</mat-icon><span *ngIf=\"screenWidth > 475\">Back to My Bookings</span>\r\n            </div>\r\n            <div class=\"header-title\">\r\n                <h1>Book New Appointment</h1>\r\n                <p>{{businessName ?? \"N/A\" }}</p>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"progress-bar\">\r\n            <div class=\"progress-fill\" [style.width]=\"barWidth + '%'\"></div>\r\n        </div>\r\n    </div>\r\n    <div class=\"main_body w-100 d-flex justify-content-center\"><ng-container *ngIf=\"selectedTab === 'serviceListing'\">\r\n            <ng-container *ngTemplateOutlet=\"serviceListing\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'locationListing'\">\r\n            <ng-container *ngTemplateOutlet=\"locationListing\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'staffListing'\">\r\n            <ng-container *ngTemplateOutlet=\"staffListing\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'dateSelection'\">\r\n            <ng-container *ngTemplateOutlet=\"dateSelection\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='contactDetails'\">\r\n            <ng-container *ngTemplateOutlet=\"contactDetails\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='paymentTab'\">\r\n            <ng-container *ngTemplateOutlet=\"paymentTab\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='statusTemplate'\">\r\n            <ng-container *ngTemplateOutlet=\"statusTemplate\"></ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"main_footer d-flex justify-content-center align-items-center\" *ngIf=\"selectedTab!=='statusTemplate'\">\r\n        <div class=\"footer-buttons\">\r\n            <span class=\"back-footer-btn cursor-pointer\" (click)=\"previousStep()\">Back</span>\r\n            <button class=\"continue-btn\" [disabled]=\"!activeButton\" (click)=\"nextStep()\"\r\n                *ngIf=\"selectedTab!='paymentTab'\">{{!loader ? 'Continue' : 'Loading...'}}</button>\r\n            <button class=\"complete_booking cursor-pointer d-flex justify-content-evenly align-items-center\"\r\n                *ngIf=\"selectedTab==='paymentTab'\" (click)=\"checkPayment()\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">Complete\r\n                Booking</button>\r\n        </div>\r\n    </div>\r\n</section>\r\n<ng-template #serviceListing>\r\n    <div class=\"w-60 service_section\">\r\n        <div class=\"service-selection\">\r\n            <h2>Select a Service</h2>\r\n            <p>Choose the service you'd like to book</p>\r\n\r\n            <div class=\"services-grid\">\r\n                <ng-container *ngFor=\"let service of serviceData\">\r\n                    <div class=\"\" (click)=\"selectService(service)\"\r\n                        [ngClass]=\"{ 'service-card-selected' : service?.selected, 'service-card': !service?.selected }\">\r\n                        <div class=\" service-header\">\r\n                            <div class=\"service-icon\"><mat-icon>person_outline</mat-icon></div>\r\n                            <div class=\"service-info\">\r\n                                <div class=\"service-title\">{{service?.name ? service?.name : 'N/A'}}</div>\r\n                                <div class=\"service-category\">Wellness</div>\r\n                            </div>\r\n                            <div>\r\n                                <div class=\"service-price\">\u20B9{{service?.priceDetails?.price ?\r\n                                    service?.priceDetails?.price : 'N/A' }}</div>\r\n                                <div class=\"service-duration\">{{service?.duration ? service?.duration : 'N/A'}} min\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"service-description\">\r\n                            {{service?.description ? service?.description : 'N/A'}}\r\n                        </div>\r\n                        <div class=\"home-visit\" *ngIf=\"service?.homeAppointmentAvailable\"><img\r\n                                src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/982126c1758628863129furniture_16406103.png\">Home\r\n                            Visit Available</div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <!-- <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\uD83D\uDC64</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">General Consultation</div>\r\n                            <div class=\"service-category\">Medical</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B9800</div>\r\n                            <div class=\"service-duration\">30 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Comprehensive health consultation\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\uD83E\uDDE0</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">Mental Health Counseling</div>\r\n                            <div class=\"service-category\">Mental Health</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B91500</div>\r\n                            <div class=\"service-duration\">45 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Professional psychological support\r\n                    </div>\r\n                    <div class=\"home-visit\">Home Visit Available</div>\r\n                </div>\r\n\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\u2702</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">Hair Cut & Styling</div>\r\n                            <div class=\"service-category\">Beauty</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B91200</div>\r\n                            <div class=\"service-duration\">45 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Professional hair cutting and styling\r\n                    </div>\r\n                    <div class=\"home-visit\">Home Visit Available</div>\r\n                </div> -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #locationListing>\r\n    <div class=\"location_section\">\r\n        <div class=\"header flex-column align-items-start\">\r\n            <h1>Choose Location</h1>\r\n            <p>Select where you'd like to receive the service</p>\r\n        </div>\r\n\r\n        <div class=\"location-list\">\r\n            <ng-container *ngFor=\"let location of locationData\">\r\n                <div (click)=\"selectLocation(location)\"\r\n                    [ngClass]=\"{ 'location-card-selected' : location?.selected, 'location-card': !location?.selected }\">\r\n                    <div class=\"location-content\">\r\n                        <div class=\"location-info\">\r\n                            <div class=\"location-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/427226c1758629157758store_3171510.png\">\r\n                            </div>\r\n                            <div class=\"location-details\">\r\n                                <div class=\"d-flex justify-content-between align-items-center\">\r\n                                    <h3>{{location?.storeName ? location?.storeName : 'N/A'}}</h3>\r\n                                    <div class=\"distance\"><mat-icon>location_on</mat-icon> 2.3 km</div>\r\n                                </div>\r\n                                <p>{{location?.addressDetails?.addressLine}}, {{location?.addressDetails?.city}},\r\n                                    {{location?.addressDetails?.state}} {{location?.pincode}}</p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <!-- <div class=\"location-card\">\r\n                <div class=\"location-content\">\r\n                    <div class=\"location-info\">\r\n                        <div class=\"location-icon branch-icon\"></div>\r\n                        <div class=\"location-details\">\r\n                            <h3>Branch Clinic</h3>\r\n                            <p>456 Care Avenue, Health Zone, Mumbai 400015</p>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"distance\">5.8 km</div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"location-card\">\r\n                <div class=\"location-content\">\r\n                    <div class=\"location-info\">\r\n                        <div class=\"location-icon home-icon\"></div>\r\n                        <div class=\"location-details\">\r\n                            <h3>Home Visit</h3>\r\n                            <p>Your Location</p>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"distance\">0 km</div>\r\n                </div>\r\n            </div> -->\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #staffListing>\r\n    <div class=\"w-60 overflow-hidden\">\r\n        <div class=\"d-flex w-100 h-100\">\r\n            <div class=\"w-100\">\r\n                <!-- Header Section -->\r\n                <div class=\"staff-header mb-3\">\r\n                    <h1 class=\"mb-1\">Select Staff Member</h1>\r\n                    <p class=\"staff-subtitle mb-0\">Choose your preferred professional</p>\r\n                </div>\r\n\r\n                <!-- Staff Cards -->\r\n                <div class=\"d-flex flex-column gap-4 staff-list\">\r\n                    <ng-container *ngFor=\"let staff of staffData\">\r\n                        <div class=\" staff-card card rounded-3 p-4\" (click)=\"selectStaff(staff)\">\r\n                            <div class=\"d-flex align-items-start justify-content-between\">\r\n                                <div class=\"d-flex align-items-start flex-grow-1\">\r\n                                    <div\r\n                                        class=\"staff-avatar rounded-circle d-flex align-items-center justify-content-center me-4\">\r\n                                        {{staff?.staffName.slice(0,3).toUpperCase()}}\r\n                                    </div>\r\n                                    <div class=\"staff-details flex-grow-1\">\r\n                                        <h3 class=\"staff-name\">{{staff?.staffName ? staff?.staffName : 'N/A'}}</h3>\r\n                                        <p class=\"staff-specialty\">General Medicine</p>\r\n                                        <p class=\"staff-description mb-0\">Experienced physician with 10+ years in\r\n                                            general\r\n                                            medicine and wellness care.</p>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"rating-section\">\r\n                                    <div class=\"star-rating d-flex align-items-center\">\r\n                                        <span class=\"star-icon\"></span>\r\n                                        <span class=\"rating-number\">4.9</span>\r\n                                    </div>\r\n                                    <div class=\"review-count\">156 reviews</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #dateSelection>\r\n    <div class=\"w-60 date_section\">\r\n        <div class=\"row justify-content-center h-100\">\r\n            <div class=\"col-12 h-100\">\r\n                <div class=\"datetime-header mb-2\">\r\n                    <h1 class=\"mb-3\">Select Date & Time</h1>\r\n                    <p class=\"datetime-subtitle mb-0\">Choose when you'd like your appointment</p>\r\n                </div>\r\n\r\n                <!-- Main Content -->\r\n                <div class=\"d-flex gap-4 main_container\">\r\n                    <!-- Left Column - Date Selection -->\r\n                    <div [ngClass]=\"{'w-50' : screenWidth > 475 , 'w-100':screenWidth < 475}\">\r\n                        <div class=\"section-card card rounded-3 p-4 h-100\">\r\n                            <h3 class=\"section-title\">Select Date</h3>\r\n\r\n                            <div class=\"date-picker-container d-flex align-items-center\"\r\n                                (click)=\"$event.stopPropagation()\">\r\n                                <input type=\"text\" class=\"form-control date-input border-0 rounded-2\"\r\n                                    placeholder=\"dd-mm-yyyy\" [value]=\"selectedDateStr\" readonly\r\n                                    (click)=\"toggleCalendar($event)\">\r\n\r\n                                <mat-icon class=\"ms-2\" (click)=\"toggleCalendar($event)\">calendar_today</mat-icon>\r\n                            </div>\r\n                            <div class=\"position-relative\" (click)=\"$event.stopPropagation()\">\r\n                                <div class=\"datepicker-popover\" *ngIf=\"showCalendar\">\r\n                                    <mat-calendar [(selected)]=\"selectedDate\" [dateFilter]=\"dateFilter\"\r\n                                        (selectedChange)=\"onDateSelected($event)\" class=\"datepicker-calendar\">\r\n                                    </mat-calendar>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Right Column - Time Selection -->\r\n                    <div class=\"time_selection\" [ngClass]=\"{'w-50' : screenWidth > 475 , 'w-100':screenWidth < 475}\">\r\n                        <div class=\"section-card card h-100 rounded-3 p-4\">\r\n                            <h3 class=\"section-title\">Available Times</h3>\r\n\r\n                            <!-- Time Slots Grid -->\r\n                            <div class=\"row g-2 mb-4 overflow-scroll\">\r\n                                <div class=\"col-4\" *ngFor=\"let time of locationTiming\">\r\n                                    <div class=\"time-slot rounded-2\" [class.selected]=\"time.selected\"\r\n                                        (click)=\"selectTimeSlot(time)\">{{time ?\r\n                                        time?.value.slice(0,5) : 'N/A'}}</div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <!-- Waitlist Section -->\r\n                            <div class=\"waitlist-section rounded-3\">\r\n                                <div class=\"d-flex align-items-start\">\r\n                                    <div class=\"d-flex h-100 justify-content-between flex-column\">\r\n                                        <div class=\"waitlist-title d-flex align-items-center gap-2\"><span\r\n                                                class=\"waitlist-icon check-icon\"></span>No\r\n                                            slots available?</div>\r\n                                        <div class=\"waitlist-description d-flex align-items-center gap-2\">\r\n                                            <input class=\"form-check-input cursor-pointer\" type=\"checkbox\"\r\n                                                id=\"flexCheckChecked\">\r\n                                            Add me to the waitlist for earlier\r\n                                            availability\r\n                                        </div>\r\n                                    </div>\r\n                                    <div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n</ng-template>\r\n<ng-template #contactDetails>\r\n    <div class=\"w-60 contact_section\">\r\n        <div class=\"d-flex\" [ngClass]=\"{'h-100':screenWidth < 475}\">\r\n            <div class=\"h-100 w-100\">\r\n                <!-- Header Section -->\r\n                <div class=\"contact-header mb-2\">\r\n                    <h1 class=\"mb-0\">Contact Details</h1>\r\n                    <p class=\"contact-subtitle mb-0\">Provide your contact information</p>\r\n                </div>\r\n\r\n                <!-- Form Sections -->\r\n                <div class=\"d-flex gap-3 details_container flex-column w-100\">\r\n                    <!-- Left Column - Personal Information -->\r\n                    <div class=\"d-flex gap-4\">\r\n                        <div\r\n                            [ngClass]=\"{'w-50' : selectedService?.homeAppointmentAvailable, 'w-100' : !selectedService?.homeAppointmentAvailable}\">\r\n                            <div class=\"form-section card rounded-3 p-4 h-100\">\r\n                                <h3 class=\"section-title\">Personal Information</h3>\r\n\r\n                                <!-- Full Name -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Full Name\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"text\" class=\"form-control form-input rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.name\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\" simpoLettersOnly>\r\n                                </div>\r\n\r\n                                <!-- Email Address -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Email Address\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"email\" class=\"form-control form-input rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.email\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\">\r\n                                </div>\r\n\r\n                                <!-- Phone Number -->\r\n                                <div class=\"mb-0\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Phone Number\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"tel\" class=\"form-control  rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.phoneNumber\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\" simpoNumbersOnly\r\n                                        [ngClass]=\"{'mobile_number' : appointmentPayload.customerDetail.phoneNumber.length != 10}\">\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <!-- Right Column - Home Visit Details -->\r\n                        <div class=\"w-50\" *ngIf=\"selectedService?.homeAppointmentAvailable\">\r\n                            <div class=\"form-section card rounded-3 p-4 h-100\">\r\n                                <h3 class=\"section-title\">Home Visit Details</h3>\r\n\r\n                                <!-- Home Address -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Home Address\r\n                                    </label>\r\n                                    <textarea class=\"form-control form-textarea rounded-2\"\r\n                                        placeholder=\"Enter your complete address\"></textarea>\r\n                                </div>\r\n\r\n                                <!-- Special Instructions -->\r\n                                <div class=\"mb-0\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Special Instructions\r\n                                    </label>\r\n                                    <textarea class=\"form-control form-textarea rounded-2\"\r\n                                        placeholder=\"Any special instructions for the professional (optional)\"></textarea>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"policies-container\">\r\n                        <!-- Header -->\r\n                        <h2 class=\"policies-title\">Policies & Terms</h2>\r\n\r\n                        <!-- Policy Items -->\r\n                        <div class=\"policy-items-container d-flex flex-column gap-3\">\r\n                            <!-- Cancellation Policy -->\r\n                            <div class=\"policy-item d-flex justify-content-between align-items-center\"\r\n                                (click)=\"showCancellationPolicy = !showCancellationPolicy\">\r\n                                <h3 class=\"policy-title\">Cancellation Policy</h3>\r\n                                <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\r\n                                        *ngIf=\"!showCancellationPolicy\">keyboard_arrow_right</mat-icon>\r\n                                    <mat-icon *ngIf=\"showCancellationPolicy\">keyboard_arrow_down</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\r\n                                *ngIf=\"showCancellationPolicy\">\r\n                                <span>&#8226; Free cancellation up to 24 hours before appointment</span>\r\n                                <span>&#8226; 50% charge for cancellations within 24 hours</span>\r\n                                <span>&#8226; No refund for no-shows</span>\r\n                                <span>&#8226; Emergency cancellations will be reviewed case by case</span>\r\n                            </div>\r\n\r\n                            <!-- Rescheduling Policy -->\r\n                            <div class=\"policy-item d-flex justify-content-between align-items-center\"\r\n                                (click)=\"showReducingPolicy = !showReducingPolicy\">\r\n                                <h3 class=\"policy-title\">Rescheduling Policy</h3>\r\n                                <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\r\n                                        *ngIf=\"!showReducingPolicy\">keyboard_arrow_right</mat-icon>\r\n                                    <mat-icon *ngIf=\"showReducingPolicy\">keyboard_arrow_down</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\r\n                                *ngIf=\"showReducingPolicy\">\r\n                                <span>&#8226; Free cancellation up to 24 hours before appointment</span>\r\n                                <span>&#8226; 50% charge for cancellations within 24 hours</span>\r\n                                <span>&#8226; No refund for no-shows</span>\r\n                                <span>&#8226; Emergency cancellations will be reviewed case by case</span>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <!-- Acceptance Section -->\r\n                        <div class=\"acceptance-section\">\r\n                            <input type=\"checkbox\" class=\"custom-checkbox\">\r\n                            <p class=\"acceptance-text\">\r\n                                I understand and accept the cancellation & rescheduling policies and\r\n                                <a href=\"#\" class=\"terms-link\">Terms & Conditions<span\r\n                                        class=\"external-link-icon\"></span></a>\r\n                            </p>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #paymentTab>\r\n    <div class=\"w-60 payment_section\">\r\n        <div class=\"w-100 h-100\">\r\n            <div class=\"w-100 d-flex justify-content-center align-items-center flex-column\">\r\n                <!-- Header Section -->\r\n                <div class=\"payment-header mb-3 w-100\">\r\n                    <h1 class=\"mb-0\">Payment & Confirmation</h1>\r\n                    <p class=\"payment-subtitle mb-0\">Review your booking and complete payment</p>\r\n                </div>\r\n\r\n                <!-- Booking Summary Card -->\r\n                <div class=\"booking-summary-card\" [ngClass]=\"{'w-100' : screenWidth < 475,'w-50':screenWidth > 475}\">\r\n                    <h2 class=\"summary-title\">Booking Summary</h2>\r\n\r\n                    <!-- Service -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Service</div>\r\n                        <div class=\"summary-value\">{{selectedService?.name ? selectedService?.name : 'N/A'}}</div>\r\n                    </div>\r\n\r\n                    <!-- Professional -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Professional</div>\r\n                        <div class=\"summary-value\">{{selectedStaff?.staffName ? selectedStaff?.staffName : 'N/A'}}</div>\r\n                    </div>\r\n\r\n                    <!-- Location -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Location</div>\r\n                        <div class=\"summary-value\">{{selectedLocation?.storeName ? selectedLocation?.storeName : 'N/A'}}\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Date & Time -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Date & Time</div>\r\n                        <div class=\"summary-value\">{{selectedDateStr ? (selectedDateStr) : 'N/A'}} at\r\n                            15:30</div>\r\n                    </div>\r\n\r\n                    <!-- Duration -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Duration</div>\r\n                        <div class=\"summary-value\">{{selectedService?.duration ? selectedService?.duration : 'N/A'}}\r\n                            minutes</div>\r\n                    </div>\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Tax Percent</div>\r\n                        <div class=\"summary-value\">{{selectedService?.priceDetails?.taxPercent ?\r\n                            selectedService?.priceDetails?.taxPercent : 'N/A'}}%</div>\r\n                    </div>\r\n                    <!-- Total -->\r\n                    <div class=\"summary-row total-row\">\r\n                        <div class=\"summary-label\">Total</div>\r\n                        <div class=\"summary-value\">\r\n                            <span class=\"currency-symbol\">\u20B9</span>{{selectedService?.priceDetails?.price ?\r\n                            selectedService?.priceDetails?.price : 'N/A'}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #statusTemplate>\r\n    <div class=\"booking-confirmation\">\r\n        <!-- Success Icon -->\r\n        <div class=\"success-icon\">\r\n            <div class=\"checkmark-circle\">\r\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/881293c1758695578518success.gif\"\r\n                    class=\"w-100 h-100\" *ngIf=\"apiStatus\">\r\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/325000c1758695564518fail.gif\"\r\n                    class=\"w-100 h-100\" *ngIf=\"!apiStatus\">\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Main Content -->\r\n        <div class=\"confirmation-content\">\r\n            <h1 class=\"confirmation-title\">{{apiStatus ? 'Booking Confirmed!' : 'Booking Failed'}}</h1>\r\n            <p class=\"confirmation-message\">\r\n                {{apiStatus ? 'Your appointment has been successfully booked.':'Failed to book you appointment. Please\r\n                try again later'}}\r\n            </p>\r\n\r\n            <!-- Details Card -->\r\n            <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\r\n                <div class=\"details-card\">\r\n                    <h3 class=\"details-title\">Appointment Details</h3>\r\n\r\n                    <div class=\"details-row\">\r\n                        <span class=\"detail-label\">Service</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.serviceDetail?.name ?\r\n                            appointmentPayload.serviceDetail?.name : 'N/A'}}</span>\r\n                    </div>\r\n\r\n                    <div class=\"details-row\">\r\n                        <span class=\"detail-label\">Professional</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.staffDetail?.name ?\r\n                            appointmentPayload.staffDetail?.name : 'N/A'}}</span>\r\n                    </div>\r\n                    <div class=\"details-row\">\r\n                        <span class=\"detail-label\">Date & Time</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.bookingDate ?\r\n                            appointmentPayload.bookingDate.slice(0,8) :\r\n                            'N/A'}} at\r\n                            {{appointmentPayload.startTime ? appointmentPayload.startTime : 'N/A'}}</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n\r\n            <!-- Action Buttons -->\r\n            <!-- <div class=\"action-buttons\">\r\n                <button class=\"btn btn-outline\">View My Bookings</button>\r\n                <button class=\"btn btn-primary\">Back to Admin</button>\r\n            </div> -->\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: ["body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:#fff;color:#000;line-height:1.6}.main_header{padding:1%}.main_body{height:73vh}.header{display:flex;align-items:center;justify-content:space-between}.back-btn mat-icon{height:16px!important;width:20px!important;font-size:21px!important}.back-btn span{color:#000;font-size:15px;font-weight:500}.back-btn:hover{background-color:#f0f0f0}.header-title{flex-grow:1;margin-left:2rem}.header-title h1{font-size:20px;font-weight:600;margin-bottom:0}.header-title p{color:#666;font-size:14px}.step-indicator{font-size:14px;color:#000;font-weight:700}.progress-bar{width:100%;height:8px;background-color:#e0e0e0;margin-bottom:1rem;border-radius:10px;overflow:hidden}.w-60{width:60%!important}.progress-fill{height:100%;width:14.28%;background-color:#000}.service-selection{height:100%;overflow:hidden}.service-selection h2{font-size:20px;font-weight:600;margin-bottom:8px}.service-selection p{color:#666;font-size:16px;margin-bottom:1rem}.main_footer{border-top:1px solid black}.services-grid{display:grid;grid-template-columns:48% 48%;gap:15px;overflow-x:scroll;height:87%;padding-bottom:5px}.service-card{border:1px solid lightgrey;border-radius:8px;padding:24px;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.service-card:hover{background-color:#f9f9f9;box-shadow:0 4px 8px #0000001a}.service-card-selected{border:2px solid black;border-radius:8px;padding:24px;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.service-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:3rem}.service-info{flex-grow:1}.service-icon{width:40px;height:40px;border-radius:8px;background-color:#f0f0f0;display:flex;align-items:center;justify-content:center;margin-right:1rem;font-size:20px;margin-top:.2rem}.service-title{font-size:18px;font-weight:600;margin-bottom:4px}.service-category{background-color:#f0f0f0;color:#000;padding:1% 4%;border-radius:12px;font-size:12px;font-weight:500;display:inline-block}.service-price{font-size:17px;font-weight:700;color:#000}.service-duration{font-size:12px;color:#666;display:flex;justify-content:center;align-items:center}.service-description{color:#666;font-size:15px;margin-bottom:.5rem;line-height:1.5}.home-visit{display:flex;align-items:center;font-size:12px;color:#666;border:1px solid lightgrey;padding:.5% 1%;border-radius:4px;background-color:#fff;width:10vw;height:3vh;white-space:nowrap;justify-content:space-around}.home-visit img{width:18px}.footer-buttons{display:flex;justify-content:space-between;align-items:center;padding-top:20px;width:60%}.back-footer-btn{color:#000;padding:12px 24px;font-size:16px}.continue-btn{background-color:#000;color:#fff;border:2px solid black;padding:.5%;border-radius:4px;font-size:15px!important;font-weight:600;cursor:pointer;width:6vw!important}.continue-btn:hover{background-color:#333}.continue-btn:disabled{background-color:#ccc;border-color:#ccc;cursor:not-allowed}.location_section{width:60%;overflow:hidden}.location_section .header h1{font-size:20px;font-weight:600;margin-bottom:.25rem}.location_section .header p{font-size:16px;color:#888;font-weight:400}.location-list{display:flex;flex-direction:column;gap:20px;height:64vh;overflow-x:scroll;padding-bottom:1%}.location-card{border:1px solid lightgrey;border-radius:12px;padding:1.5rem 1.5rem 2rem;cursor:pointer;transition:all .3s ease}.location-card:hover{box-shadow:0 4px 8px #0000001a}.location-card-selected{border:1px solid black;border-radius:12px;padding:1.5rem 1.5rem 2rem;cursor:pointer;transition:all .3s ease}.location-content{display:flex;align-items:center;justify-content:space-between}.location-info{display:flex;align-items:center;flex-grow:1}.location-icon{width:40px;height:40px;background-color:#d3d3d3;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-right:20px}.location-icon img{width:28px}.location-details{width:95%}.location-details h3{font-size:16px;font-weight:600;margin-bottom:0}.location-details p{font-size:14px;color:#aaa;line-height:1.4;margin:0}.distance{display:flex;align-items:center;color:#888;font-size:14px;margin-left:20px}.distance mat-icon{width:18px!important;height:15px!important;font-size:17px}.staff-header h1{font-size:20px;font-weight:600}.staff-subtitle{font-size:16px;color:#888;font-weight:400}.staff-card{border:1px solid lightgrey;cursor:pointer;transition:all .3s ease;padding-bottom:2rem!important}.staff-card:hover{box-shadow:0 4px 8px #0000001a}.staff-card.selected{border-color:#666}.staff-avatar{width:64px;height:64px;background-color:gray;font-size:20px;font-weight:600;color:#fff}.staff-name{font-size:16px;font-weight:600;margin-bottom:0}.staff-specialty{font-size:14px;color:gray;margin-bottom:8px}.staff-description{font-size:14px;color:gray;line-height:1.4}.rating-section{display:flex;flex-direction:column;align-items:flex-end}.star-rating{color:gold;font-size:16px;margin-bottom:4px;width:100%}.rating-number{font-size:18px;font-weight:600;color:#000}.review-count{font-size:12px;color:#888}.star-icon:before{content:\"\\2b50\";margin-right:4px}.staff_section{width:60%;overflow:hidden}.staff-list{height:64vh;overflow-x:scroll;padding-bottom:1%}.datetime-header h1{font-size:20px;font-weight:600;margin:0!important}.main_container{height:64vh}.datetime-subtitle{font-size:16px;color:#888;font-weight:400}.section-card{border:1px solid lightgrey}.section-title{font-size:17px;font-weight:600;margin-bottom:20px}.date-picker-container{border:1px solid lightgrey}.date-picker-container mat-icon{height:17px;font-size:18px}.date-input{font-size:16px;padding:2%;width:30%}.time-slot{border:1px solid lightgrey;font-size:14px;font-weight:500;padding:6%;cursor:pointer;transition:all .3s ease;text-align:center;min-width:80px}.time-slot:hover{box-shadow:0 4px 8px #0000001a}.time-slot.selected{background-color:#555;border-color:#777;color:#fff}.waitlist-section{background-color:#789;border:none;padding:4%;max-height:13vh}.waitlist-icon{color:#4ade80;font-size:18px}.waitlist-title{color:#fff;font-size:16px;font-weight:500;margin-bottom:8px}.mobile_number{border-color:#dc3545!important;box-shadow:0 0 0 .1rem #ffc3c3}.waitlist-description{color:#fff;font-size:14px;margin-bottom:0;font-weight:500}.waitlist-description .form-check-input{width:17px;height:17px;background-color:transparent}.waitlist-description .form-check-input:checked{background-color:#0d6efd}.check-icon:before{content:\"\\2713\"}.contact-header h1{font-size:20px;font-weight:600}.contact-subtitle{font-size:16px;color:#888;font-weight:400}.form-section{border:1px solid lightgrey}.section-title{font-size:16px;font-weight:600;margin-bottom:24px}.form-label{font-size:14px;font-weight:500;margin-bottom:8px}.required-asterisk{color:#ff6b6b;margin-left:4px}.form-input{border:1px solid lightgrey;font-size:16px;padding:1%;transition:all .3s ease}.form-input:focus{border-color:#777}.form-input::placeholder{color:#aaa;font-size:14px}.form-textarea{border:1px solid lightgrey;font-size:16px;padding:12px 16px;resize:vertical;max-height:120px;transition:all .3s ease}.form-textarea:focus{border-color:#777}.form-textarea::placeholder{color:#aaa;font-size:14px}.optional-label{color:#888;font-size:12px;font-style:italic}.details_container{height:65vh;overflow-x:scroll;padding-bottom:1%}.policies-container{background-color:#fff;border:1px solid lightgrey;padding:2rem;border-radius:12px}.policies-title{font-size:16px;font-weight:600;color:#000;margin-bottom:1rem}.policy-item{background-color:#fff;border:1px solid lightgrey;border-radius:8px;padding:1%;cursor:pointer;transition:all .3s ease}.cancellation_policies{padding:1% .5%;font-weight:500}.policy-item:hover{background-color:#f8f9fa;border-color:#ccc}.policy-item:last-of-type{margin-bottom:32px}.policy-title{font-size:14px;font-weight:500;color:#000;margin:0}.acceptance-section{display:flex;align-items:flex-start;gap:7px;margin-top:8px}.custom-checkbox{width:18px;height:20px;background-color:#fff;border:1px solid lightgrey;border-radius:4px;margin-top:2px;cursor:pointer;position:relative;flex-shrink:0;transition:all .3s ease}.custom-checkbox:hover{border-color:#999;background-color:#f8f9fa}.custom-checkbox.checked{background-color:#007bff;border-color:#007bff}.custom-checkbox.checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:700}.acceptance-text{font-size:14px;color:#000;line-height:1.5;margin:0}.terms-link{color:#007bff;text-decoration:none;font-weight:500;position:relative}.terms-link:hover{color:#0056b3;text-decoration:underline}.external-link-icon{margin-left:4px;font-size:12px;opacity:.8}.external-link-icon:after{content:\"\\2197\"}.payment-header h1{font-size:20px;font-weight:600;color:#000}.payment-subtitle{font-size:16px;color:#666;font-weight:400}.booking-summary-card{background-color:#fff;border:1px solid lightgrey;padding:2%;border-radius:12px}.summary-title{font-size:18px;font-weight:600;color:#000;margin-bottom:32px}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0}.summary-row:last-child{border-bottom:none;padding-bottom:0}.summary-label{font-size:16px;color:#000;font-weight:500}.summary-value{font-size:16px;color:#000;font-weight:400;text-align:right}.total-row{margin-top:16px;padding-top:16px}.total-row .summary-label,.total-row .summary-value{font-size:20px;font-weight:600}.currency-symbol{font-size:18px}.complete_booking{background:#e3fee3;border:none;padding:.5%;width:12vw!important;font-size:15px!important;font-weight:500;border-radius:4px}.complete_booking img{width:30px}.booking-confirmation{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;width:60%;border-radius:10px}.success-icon{margin-bottom:1.5rem}.checkmark-circle{width:80px;height:80px;position:relative}.checkmark{width:80px;height:80px;border-radius:50%;display:block;stroke-width:3;stroke:#22c55e;stroke-miterlimit:10;animation:checkmark-fill .4s ease-in-out .4s forwards,checkmark-scale .3s ease-in-out .9s both}.checkmark-circle-path{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:3;stroke-miterlimit:10;stroke:#22c55e;fill:none;animation:checkmark-stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;stroke:#22c55e;stroke-width:3;animation:checkmark-stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes checkmark-stroke{to{stroke-dashoffset:0}}@keyframes checkmark-scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes checkmark-fill{to{box-shadow:inset 0 0 0 30px #22c55e}}.confirmation-content{width:100%;height:80%}.confirmation-title{font-size:18px;font-weight:700}.confirmation-message{font-size:1rem;margin-bottom:1rem;line-height:1.6;font-weight:500}.details-card{background:#ffffff1a;border:1px solid lightgrey;border-radius:16px;padding:1.5rem;margin-bottom:2rem;width:35vw}.details-title{font-size:1.25rem;font-weight:600;margin:0 0 1.5rem}.details-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.1)}.details-row:last-child{border-bottom:none}.detail-label{font-size:.9rem;font-weight:500}.detail-value{font-weight:600;font-size:1rem}.action-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.btn{padding:.75rem 1.5rem;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .2s ease;border:none;min-width:140px}.btn-outline{background:transparent;border:2px solid rgba(255,255,255,.3);color:#fff}.btn-outline:hover{background:#ffffff1a;border-color:#ffffff80}.btn-primary{background:#fff;color:#1f2937}.btn-primary:hover{background:#f3f4f6;transform:translateY(-1px)}.datepicker-popover{position:absolute;z-index:1000;margin-top:8px;border-radius:16px;overflow:hidden;box-shadow:0 12px 28px #0000001f,0 2px 4px #00000014;background:#fff;border:1px solid rgba(0,0,0,.06);width:17vw}::ng-deep .datepicker-calendar{border-radius:16px!important;overflow:hidden!important;font-family:Segoe UI,Roboto,sans-serif!important;width:100%!important}::ng-deep .mat-calendar-header{background:linear-gradient(135deg,#667eea,#764ba2)!important;color:#fff!important;padding:3px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:60px!important;border-radius:16px 16px 0 0!important}::ng-deep .mat-calendar-controls{display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;margin:2% calc(4.7142857143% - 16px)!important}::ng-deep .mat-calendar-period-button{color:#fff!important;font-weight:700!important;font-size:16px!important;letter-spacing:.5px!important;background:transparent!important;border:none!important;padding:12px 16px!important;border-radius:8px!important;transition:all .3s ease!important;flex-grow:1!important;text-align:left!important;margin:0!important;order:1!important}::ng-deep .mat-calendar-period-button:hover{background:#ffffff26!important;transform:translateY(-1px)!important}::ng-deep .mat-calendar-header .mat-calendar-controls>div{display:flex;order:2!important}::ng-deep .mat-calendar-previous-button,::ng-deep .mat-calendar-next-button{color:#fff!important;width:40px!important;height:40px!important;border-radius:50%!important;background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;transition:all .3s ease!important;margin:0 4px!important;display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .mat-calendar-previous-button:hover,::ng-deep .mat-calendar-next-button:hover{background:#ffffff40!important;transform:scale(1.05)!important}::ng-deep .mat-calendar-arrow{fill:#fff!important;width:20px!important;height:20px!important}::ng-deep .mat-calendar-content{padding:10px 16px!important;background:#fff!important}::ng-deep .mat-calendar-table-header th{color:#6b7280!important;font-weight:600!important;font-size:12px!important;text-align:center!important;padding-bottom:12px!important;text-transform:uppercase!important}::ng-deep .mat-calendar-table{border-spacing:0!important;border-collapse:collapse!important;width:100%!important}::ng-deep .mat-calendar-body-cell{height:44px!important;width:44px!important;border-radius:12px!important}::ng-deep .mat-calendar-body-cell-content{width:33px!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-weight:500!important;font-size:14px!important;color:#374151!important;transition:all .3s cubic-bezier(.4,0,.2,1)!important}::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover .mat-calendar-body-cell-content:not(.mat-calendar-body-selected){background:#667eea1a!important;color:#667eea!important;transform:scale(1.05)!important}::ng-deep .mat-calendar-body-selected{background:linear-gradient(135deg,#667eea,#764ba2)!important;color:#fff!important;box-shadow:0 4px 12px #677eea4d!important}::ng-deep .mat-calendar-body-today:not(.mat-calendar-body-selected){border:none;color:#667eea!important;font-weight:700!important}::ng-deep .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected){color:#d1d5db!important}@media screen and (min-width:320px) and (max-width:475px){.back-btn{gap:.25rem!important;margin:0!important}.back-btn span{color:#000;font-size:12px;font-weight:500;white-space:nowrap}.back-btn mat-icon{font-size:16px!important;margin-bottom:0!important}.header-title{display:flex;align-items:center;margin-bottom:0rem!important}.header-title h1{font-size:16px!important}.main_header .header{padding:3%}.date_section,.service_section,.location_section,.contact_section,.payment_section{width:100%!important;padding:0% 5%}.service_section h2{font-size:17px!important;margin-bottom:0!important}.service_section p{font-size:14px!important}.main_section{height:100vh}.services-grid{display:flex;justify-content:center;flex-wrap:wrap}.service-card,.service-card-selected{width:90vw!important}.home-visit{width:40vw!important}.main_body{height:calc(100% - 123px)!important}.back-footer-btn{padding:12px 2px!important}.footer-buttons{padding:0% 3%!important;width:100%!important}.continue-btn{width:22vw!important}.main_container{flex-wrap:wrap;height:100%!important}.date_section{overflow:hidden}.date_section .time_selection{height:60%}.datepicker-popover{width:60vw!important}.details_container{height:90%!important;justify-content:space-around}.complete_booking{width:39vw!important}.booking_confirmation,.details-card{width:100%!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i15.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: LettersOnlyDirective, selector: "[simpoLettersOnly]" }, { kind: "directive", type: NumbersOnlyDirective, selector: "[simpoNumbersOnly]" }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.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.2.13", ngImport: i0, type: AppointmentBookingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-appointment-booking', standalone: true, imports: [CdkDragPlaceholder, CommonModule, MatIcon, MatFormFieldModule, MatDatepickerModule, FormsModule, MatNativeDateModule, MatInputModule], template: "<section class=\"main_section\">\r\n    <div class=\"main_header\">\r\n        <div class=\"header d-flex justify-content-between align-items-center\">\r\n            <div class=\"back-btn d-flex justify-content-center align-items-center cursor-pointer gap-2 mb-3\"\r\n                (click)=\"goBack()\">\r\n                <mat-icon>keyboard_backspace</mat-icon><span>Back to My Bookings</span>\r\n            </div>\r\n            <div class=\"header-title\">\r\n                <h1>Book New Appointment</h1>\r\n                <p>{{businessName ?? \"N/A\" }}</p>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"progress-bar\">\r\n            <div class=\"progress-fill\" [style.width]=\"barWidth + '%'\"></div>\r\n        </div>\r\n    </div>\r\n    <div class=\"main_body w-100 d-flex justify-content-center\"><ng-container *ngIf=\"selectedTab === 'serviceListing'\">\r\n            <ng-container *ngTemplateOutlet=\"serviceListing\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'locationListing'\">\r\n            <ng-container *ngTemplateOutlet=\"locationListing\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'staffListing'\">\r\n            <ng-container *ngTemplateOutlet=\"staffListing\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'dateSelection'\">\r\n            <ng-container *ngTemplateOutlet=\"dateSelection\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='contactDetails'\">\r\n            <ng-container *ngTemplateOutlet=\"contactDetails\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='paymentTab'\">\r\n            <ng-container *ngTemplateOutlet=\"paymentTab\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='statusTemplate'\">\r\n            <ng-container *ngTemplateOutlet=\"statusTemplate\"></ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"main_footer d-flex justify-content-center align-items-center\" *ngIf=\"selectedTab!=='statusTemplate'\">\r\n        <div class=\"footer-buttons\">\r\n            <span class=\"back-footer-btn cursor-pointer\" (click)=\"previousStep()\">Back</span>\r\n            <button class=\"continue-btn\" [disabled]=\"!activeButton\" (click)=\"nextStep()\"\r\n                *ngIf=\"selectedTab!='paymentTab'\">{{!loader ? 'Continue' : 'Loading...'}}</button>\r\n            <button class=\"complete_booking cursor-pointer\" *ngIf=\"selectedTab==='paymentTab'\"\r\n                (click)=\"checkPayment()\">Complete Booking</button>\r\n        </div>\r\n    </div>\r\n</section>\r\n<ng-template #serviceListing>\r\n    <div class=\"w-60 service_section\">\r\n        <div class=\"service-selection\">\r\n            <h2>Select a Service</h2>\r\n            <p>Choose the service you'd like to book</p>\r\n\r\n            <div class=\"services-grid\">\r\n                <ng-container *ngFor=\"let service of serviceData\">\r\n                    <div class=\"\" (click)=\"selectService(service)\"\r\n                        [ngClass]=\"{ 'service-card-selected' : service?.selected, 'service-card': !service?.selected }\">\r\n                        <div class=\" service-header\">\r\n                            <div class=\"service-icon\"><mat-icon>person_outline</mat-icon></div>\r\n                            <div class=\"service-info\">\r\n                                <div class=\"service-title\">{{service?.name ? service?.name : 'N/A'}}</div>\r\n                                <div class=\"service-category\">Wellness</div>\r\n                            </div>\r\n                            <div>\r\n                                <div class=\"service-price\">\u20B9{{service?.priceDetails?.price ?\r\n                                    service?.priceDetails?.price : 'N/A' }}</div>\r\n                                <div class=\"service-duration\">{{service?.duration ? service?.duration : 'N/A'}} min\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"service-description\">\r\n                            {{service?.description ? service?.description : 'N/A'}}\r\n                        </div>\r\n                        <div class=\"home-visit\" *ngIf=\"service?.homeAppointmentAvailable\"><img\r\n                                src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/982126c1758628863129furniture_16406103.png\">Home\r\n                            Visit Available</div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <!-- <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\uD83D\uDC64</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">General Consultation</div>\r\n                            <div class=\"service-category\">Medical</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B9800</div>\r\n                            <div class=\"service-duration\">30 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Comprehensive health consultation\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\uD83E\uDDE0</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">Mental Health Counseling</div>\r\n                            <div class=\"service-category\">Mental Health</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B91500</div>\r\n                            <div class=\"service-duration\">45 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Professional psychological support\r\n                    </div>\r\n                    <div class=\"home-visit\">Home Visit Available</div>\r\n                </div>\r\n\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\u2702</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">Hair Cut & Styling</div>\r\n                            <div class=\"service-category\">Beauty</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B91200</div>\r\n                            <div class=\"service-duration\">45 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Professional hair cutting and styling\r\n                    </div>\r\n                    <div class=\"home-visit\">Home Visit Available</div>\r\n                </div> -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #locationListing>\r\n    <div class=\"location_header\">\r\n        <div class=\"header flex-column align-items-start\">\r\n            <h1>Choose Location</h1>\r\n            <p>Select where you'd like to receive the service</p>\r\n        </div>\r\n\r\n        <div class=\"location-list\">\r\n            <ng-container *ngFor=\"let location of locationData\">\r\n                <div (click)=\"selectLocation(location)\"\r\n                    [ngClass]=\"{ 'location-card-selected' : location?.selected, 'location-card': !location?.selected }\">\r\n                    <div class=\"location-content\">\r\n                        <div class=\"location-info\">\r\n                            <div class=\"location-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/427226c1758629157758store_3171510.png\">\r\n                            </div>\r\n                            <div class=\"location-details\">\r\n                                <div class=\"d-flex justify-content-between align-items-center\">\r\n                                    <h3>{{location?.storeName ? location?.storeName : 'N/A'}}</h3>\r\n                                    <div class=\"distance\"><mat-icon>location_on</mat-icon> 2.3 km</div>\r\n                                </div>\r\n                                <p>{{location?.addressDetails?.addressLine}}, {{location?.addressDetails?.city}},\r\n                                    {{location?.addressDetails?.state}} {{location?.pincode}}</p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <!-- <div class=\"location-card\">\r\n                <div class=\"location-content\">\r\n                    <div class=\"location-info\">\r\n                        <div class=\"location-icon branch-icon\"></div>\r\n                        <div class=\"location-details\">\r\n                            <h3>Branch Clinic</h3>\r\n                            <p>456 Care Avenue, Health Zone, Mumbai 400015</p>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"distance\">5.8 km</div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"location-card\">\r\n                <div class=\"location-content\">\r\n                    <div class=\"location-info\">\r\n                        <div class=\"location-icon home-icon\"></div>\r\n                        <div class=\"location-details\">\r\n                            <h3>Home Visit</h3>\r\n                            <p>Your Location</p>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"distance\">0 km</div>\r\n                </div>\r\n            </div> -->\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #staffListing>\r\n    <div class=\"w-60 overflow-hidden\">\r\n        <div class=\"d-flex w-100 h-100\">\r\n            <div class=\"w-100\">\r\n                <!-- Header Section -->\r\n                <div class=\"staff-header mb-3\">\r\n                    <h1 class=\"mb-1\">Select Staff Member</h1>\r\n                    <p class=\"staff-subtitle mb-0\">Choose your preferred professional</p>\r\n                </div>\r\n\r\n                <!-- Staff Cards -->\r\n                <div class=\"d-flex flex-column gap-4 staff-list\">\r\n                    <ng-container *ngFor=\"let staff of staffData\">\r\n                        <div class=\" staff-card card rounded-3 p-4\" (click)=\"selectStaff(staff)\">\r\n                            <div class=\"d-flex align-items-start justify-content-between\">\r\n                                <div class=\"d-flex align-items-start flex-grow-1\">\r\n                                    <div\r\n                                        class=\"staff-avatar rounded-circle d-flex align-items-center justify-content-center me-4\">\r\n                                        {{staff?.staffName.slice(0,3).toUpperCase()}}\r\n                                    </div>\r\n                                    <div class=\"staff-details flex-grow-1\">\r\n                                        <h3 class=\"staff-name\">{{staff?.staffName ? staff?.staffName : 'N/A'}}</h3>\r\n                                        <p class=\"staff-specialty\">General Medicine</p>\r\n                                        <p class=\"staff-description mb-0\">Experienced physician with 10+ years in\r\n                                            general\r\n                                            medicine and wellness care.</p>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"rating-section\">\r\n                                    <div class=\"star-rating d-flex align-items-center\">\r\n                                        <span class=\"star-icon\"></span>\r\n                                        <span class=\"rating-number\">4.9</span>\r\n                                    </div>\r\n                                    <div class=\"review-count\">156 reviews</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #dateSelection>\r\n    <div class=\"w-60\">\r\n        <div class=\"row justify-content-center h-100\">\r\n            <div class=\"col-12 h-100\">\r\n                <div class=\"datetime-header mb-2\">\r\n                    <h1 class=\"mb-3\">Select Date & Time</h1>\r\n                    <p class=\"datetime-subtitle mb-0\">Choose when you'd like your appointment</p>\r\n                </div>\r\n\r\n                <!-- Main Content -->\r\n                <div class=\"d-flex gap-4 main_container\">\r\n                    <!-- Left Column - Date Selection -->\r\n                    <div class=\"w-50\">\r\n                        <div class=\"section-card card rounded-3 p-4 h-100\">\r\n                            <h3 class=\"section-title\">Select Date</h3>\r\n\r\n                            <div class=\"date-picker-container d-flex align-items-center\"\r\n                                (click)=\"$event.stopPropagation()\">\r\n                                <input type=\"text\" class=\"form-control date-input border-0 rounded-2\"\r\n                                    placeholder=\"dd-mm-yyyy\" [value]=\"selectedDateStr\" readonly\r\n                                    (click)=\"toggleCalendar($event)\">\r\n\r\n                                <mat-icon class=\"ms-2\" (click)=\"toggleCalendar($event)\">calendar_today</mat-icon>\r\n                            </div>\r\n                            <div class=\"position-relative\" (click)=\"$event.stopPropagation()\">\r\n                                <div class=\"datepicker-popover\" *ngIf=\"showCalendar\">\r\n                                    <mat-calendar [(selected)]=\"selectedDate\" (selectedChange)=\"onDateSelected($event)\">\r\n                                    </mat-calendar>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Right Column - Time Selection -->\r\n                    <div class=\"w-50\">\r\n                        <div class=\"section-card card h-100 rounded-3 p-4\">\r\n                            <h3 class=\"section-title\">Available Times</h3>\r\n\r\n                            <!-- Time Slots Grid -->\r\n                            <div class=\"row g-2 mb-4 overflow-scroll\">\r\n                                <div class=\"col-4\" *ngFor=\"let time of locationTiming\">\r\n                                    <div class=\"time-slot rounded-2\" [class.selected]=\"time.selected\"\r\n                                        (click)=\"selectTimeSlot(time)\">{{time ?\r\n                                        time?.value.slice(0,5) : 'N/A'}}</div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <!-- Waitlist Section -->\r\n                            <div class=\"waitlist-section rounded-3\">\r\n                                <div class=\"d-flex align-items-start\">\r\n                                    <div class=\"d-flex h-100 justify-content-between flex-column\"><span\r\n                                            class=\"waitlist-icon check-icon\"></span>\r\n                                        <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\">\r\n                                    </div>\r\n                                    <div>\r\n                                        <div class=\"waitlist-title\">No slots available?</div>\r\n                                        <div class=\"waitlist-description\">\r\n                                            Add me to the waitlist for earlier\r\n                                            availability\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n</ng-template>\r\n<ng-template #contactDetails>\r\n    <div class=\"w-60\">\r\n        <div class=\"d-flex\">\r\n            <div class=\"h-100 w-100\">\r\n                <!-- Header Section -->\r\n                <div class=\"contact-header mb-2\">\r\n                    <h1 class=\"mb-0\">Contact Details</h1>\r\n                    <p class=\"contact-subtitle mb-0\">Provide your contact information</p>\r\n                </div>\r\n\r\n                <!-- Form Sections -->\r\n                <div class=\"d-flex gap-3 details_container flex-column w-100\">\r\n                    <!-- Left Column - Personal Information -->\r\n                    <div class=\"d-flex gap-4\">\r\n                        <div class=\"w-50\">\r\n                            <div class=\"form-section card rounded-3 p-4 h-100\">\r\n                                <h3 class=\"section-title\">Personal Information</h3>\r\n\r\n                                <!-- Full Name -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Full Name\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"text\" class=\"form-control form-input rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.name\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\">\r\n                                </div>\r\n\r\n                                <!-- Email Address -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Email Address\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"email\" class=\"form-control form-input rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.email\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\">\r\n                                </div>\r\n\r\n                                <!-- Phone Number -->\r\n                                <div class=\"mb-0\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Phone Number\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"tel\" class=\"form-control form-input rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.phoneNumber\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\">\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <!-- Right Column - Home Visit Details -->\r\n                        <div class=\"w-50\">\r\n                            <div class=\"form-section card rounded-3 p-4 h-100\">\r\n                                <h3 class=\"section-title\">Home Visit Details</h3>\r\n\r\n                                <!-- Home Address -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Home Address\r\n                                    </label>\r\n                                    <textarea class=\"form-control form-textarea rounded-2\"\r\n                                        placeholder=\"Enter your complete address\"></textarea>\r\n                                </div>\r\n\r\n                                <!-- Special Instructions -->\r\n                                <div class=\"mb-0\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Special Instructions\r\n                                    </label>\r\n                                    <textarea class=\"form-control form-textarea rounded-2\"\r\n                                        placeholder=\"Any special instructions for the professional (optional)\"></textarea>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"policies-container\">\r\n                        <!-- Header -->\r\n                        <h2 class=\"policies-title\">Policies & Terms</h2>\r\n\r\n                        <!-- Policy Items -->\r\n                        <div class=\"policy-items-container d-flex flex-column gap-3\">\r\n                            <!-- Cancellation Policy -->\r\n                            <div class=\"policy-item d-flex justify-content-between align-items-center\"\r\n                                (click)=\"showCancellationPolicy = !showCancellationPolicy\">\r\n                                <h3 class=\"policy-title\">Cancellation Policy</h3>\r\n                                <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\r\n                                        *ngIf=\"!showCancellationPolicy\">keyboard_arrow_right</mat-icon>\r\n                                    <mat-icon *ngIf=\"showCancellationPolicy\">keyboard_arrow_down</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\r\n                                *ngIf=\"showCancellationPolicy\">\r\n                                <span>&#8226; Free cancellation up to 24 hours before appointment</span>\r\n                                <span>&#8226; 50% charge for cancellations within 24 hours</span>\r\n                                <span>&#8226; No refund for no-shows</span>\r\n                                <span>&#8226; Emergency cancellations will be reviewed case by case</span>\r\n                            </div>\r\n\r\n                            <!-- Rescheduling Policy -->\r\n                            <div class=\"policy-item d-flex justify-content-between align-items-center\"\r\n                                (click)=\"showReducingPolicy = !showReducingPolicy\">\r\n                                <h3 class=\"policy-title\">Rescheduling Policy</h3>\r\n                                <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\r\n                                        *ngIf=\"!showReducingPolicy\">keyboard_arrow_right</mat-icon>\r\n                                    <mat-icon *ngIf=\"showReducingPolicy\">keyboard_arrow_down</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\r\n                                *ngIf=\"showReducingPolicy\">\r\n                                <span>&#8226; Free cancellation up to 24 hours before appointment</span>\r\n                                <span>&#8226; 50% charge for cancellations within 24 hours</span>\r\n                                <span>&#8226; No refund for no-shows</span>\r\n                                <span>&#8226; Emergency cancellations will be reviewed case by case</span>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <!-- Acceptance Section -->\r\n                        <div class=\"acceptance-section\">\r\n                            <div class=\"custom-checkbox\"></div>\r\n                            <p class=\"acceptance-text\">\r\n                                I understand and accept the cancellation & rescheduling policies and\r\n                                <a href=\"#\" class=\"terms-link\">Terms & Conditions<span\r\n                                        class=\"external-link-icon\"></span></a>\r\n                            </p>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #paymentTab>\r\n    <div class=\"w-60\">\r\n        <div class=\"w-100 h-100\">\r\n            <div class=\"w-100 d-flex justify-content-center align-items-center flex-column\">\r\n                <!-- Header Section -->\r\n                <div class=\"payment-header mb-3 w-100\">\r\n                    <h1 class=\"mb-0\">Payment & Confirmation</h1>\r\n                    <p class=\"payment-subtitle mb-0\">Review your booking and complete payment</p>\r\n                </div>\r\n\r\n                <!-- Booking Summary Card -->\r\n                <div class=\"booking-summary-card w-50\">\r\n                    <h2 class=\"summary-title\">Booking Summary</h2>\r\n\r\n                    <!-- Service -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Service</div>\r\n                        <div class=\"summary-value\">{{selectedService?.name ? selectedService?.name : 'N/A'}}</div>\r\n                    </div>\r\n\r\n                    <!-- Professional -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Professional</div>\r\n                        <div class=\"summary-value\">{{selectedStaff?.staffName ? selectedStaff?.staffName : 'N/A'}}</div>\r\n                    </div>\r\n\r\n                    <!-- Location -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Location</div>\r\n                        <div class=\"summary-value\">{{selectedLocation?.storeName ? selectedLocation?.storeName : 'N/A'}}\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Date & Time -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Date & Time</div>\r\n                        <div class=\"summary-value\">{{selectedDate ? (selectedDate | date : 'shortData') :\r\n                            (selectedDateStr ? (selectedDateStr) : 'N/A')}} at\r\n                            15:30</div>\r\n                    </div>\r\n\r\n                    <!-- Duration -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Duration</div>\r\n                        <div class=\"summary-value\">{{selectedService?.duration ? selectedService?.duration : 'N/A'}}\r\n                            minutes</div>\r\n                    </div>\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Tax Percent</div>\r\n                        <div class=\"summary-value\">{{selectedService?.priceDetails?.taxPercent ?\r\n                            selectedService?.priceDetails?.taxPercent : 'N/A'}}%</div>\r\n                    </div>\r\n                    <!-- Total -->\r\n                    <div class=\"summary-row total-row\">\r\n                        <div class=\"summary-label\">Total</div>\r\n                        <div class=\"summary-value\">\r\n                            <span class=\"currency-symbol\">\u20B9</span>{{selectedService?.priceDetails?.price ?\r\n                            selectedService?.priceDetails?.price : 'N/A'}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #statusTemplate>\r\n    <div class=\"booking-confirmation\">\r\n        <!-- Success Icon -->\r\n        <div class=\"success-icon\">\r\n            <div class=\"checkmark-circle\">\r\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/881293c1758695578518success.gif\"\r\n                    class=\"w-100 h-100\" *ngIf=\"apiStatus\">\r\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/325000c1758695564518fail.gif\"\r\n                    class=\"w-100 h-100\" *ngIf=\"!apiStatus\">\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Main Content -->\r\n        <div class=\"confirmation-content\">\r\n            <h1 class=\"confirmation-title\">{{apiStatus ? 'Booking Confirmed!' : 'Booking Failed'}}</h1>\r\n            <p class=\"confirmation-message\">\r\n                {{apiStatus ? 'Your appointment has been successfully booked.':'Failed to book you appointment. Please\r\n                try again later'}}\r\n            </p>\r\n\r\n            <!-- Details Card -->\r\n            <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\r\n                <div class=\"details-card\">\r\n                    <h3 class=\"details-title\">Appointment Details</h3>\r\n\r\n                    <div class=\"details-row\">\r\n                        <span class=\"detail-label\">Service</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.serviceDetail?.name ?\r\n                            appointmentPayload.serviceDetail?.name : 'N/A'}}</span>\r\n                    </div>\r\n\r\n                    <div class=\"details-row\">\r\n                        <span class=\"detail-label\">Professional</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.staffDetail?.name ?\r\n                            appointmentPayload.staffDetail?.name : 'N/A'}}</span>\r\n                    </div>\r\n                    <div class=\"details-row\">\r\n                        <span class=\"detail-label\">Date & Time</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.bookingDate ?\r\n                            appointmentPayload.bookingDate.slice(0,8) :\r\n                            'N/A'}} at\r\n                            {{appointmentPayload.startTime ? appointmentPayload.startTime : 'N/A'}}</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n\r\n            <!-- Action Buttons -->\r\n            <!-- <div class=\"action-buttons\">\r\n                <button class=\"btn btn-outline\">View My Bookings</button>\r\n                <button class=\"btn btn-primary\">Back to Admin</button>\r\n            </div> -->\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: ["body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:#fff;color:#000;line-height:1.6}.main_header{padding:1%}.main_body{height:73vh}.header{display:flex;align-items:center;justify-content:space-between}.back-btn mat-icon{height:16px!important;width:20px!important;font-size:21px!important}.back-btn span{color:#000;font-size:15px;font-weight:500}.back-btn:hover{background-color:#f0f0f0}.header-title{flex-grow:1;margin-left:2rem}.header-title h1{font-size:20px;font-weight:600;margin-bottom:0}.header-title p{color:#666;font-size:14px}.step-indicator{font-size:14px;color:#000;font-weight:700}.progress-bar{width:100%;height:8px;background-color:#e0e0e0;margin-bottom:1rem;border-radius:10px;overflow:hidden}.w-60{width:60%!important}.progress-fill{height:100%;width:14.28%;background-color:#000}.service-selection{height:100%;overflow:hidden}.service-selection h2{font-size:20px;font-weight:600;margin-bottom:8px}.service-selection p{color:#666;font-size:16px;margin-bottom:1rem}.main_footer{border-top:1px solid black}.services-grid{display:grid;grid-template-columns:48% 48%;gap:15px;overflow-x:scroll;height:87%;padding-bottom:5px}.service-card{border:1px solid lightgrey;border-radius:8px;padding:24px;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.service-card:hover{background-color:#f9f9f9;box-shadow:0 4px 8px #0000001a}.service-card-selected{border:2px solid black;border-radius:8px;padding:24px;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.service-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:3rem}.service-info{flex-grow:1}.service-icon{width:40px;height:40px;border-radius:8px;background-color:#f0f0f0;display:flex;align-items:center;justify-content:center;margin-right:1rem;font-size:20px;margin-top:.2rem}.service-title{font-size:18px;font-weight:600;margin-bottom:4px}.service-category{background-color:#f0f0f0;color:#000;padding:1% 4%;border-radius:12px;font-size:12px;font-weight:500;display:inline-block}.service-price{font-size:17px;font-weight:700;color:#000}.service-duration{font-size:12px;color:#666;display:flex;justify-content:center;align-items:center}.service-description{color:#666;font-size:15px;margin-bottom:.5rem;line-height:1.5}.home-visit{display:flex;align-items:center;font-size:12px;color:#666;border:1px solid lightgrey;padding:.5% 1%;border-radius:4px;background-color:#fff;width:10vw;height:3vh;white-space:nowrap;justify-content:space-around}.home-visit img{width:18px}.footer-buttons{display:flex;justify-content:space-between;align-items:center;padding-top:20px;width:60%}.back-footer-btn{color:#000;padding:12px 24px;font-size:16px}.continue-btn{background-color:#000;color:#fff;border:2px solid black;padding:.5%;border-radius:4px;font-size:15px!important;font-weight:600;cursor:pointer;width:6vw!important}.continue-btn:hover{background-color:#333}.continue-btn:disabled{background-color:#ccc;border-color:#ccc;cursor:not-allowed}.location_header{width:60%;overflow:hidden}.location_header .header h1{font-size:20px;font-weight:600;margin-bottom:.25rem}.location_header .header p{font-size:16px;color:#888;font-weight:400}.location-list{display:flex;flex-direction:column;gap:20px;height:64vh;overflow-x:scroll;padding-bottom:1%}.location-card{border:1px solid lightgrey;border-radius:12px;padding:1.5rem 1.5rem 2rem;cursor:pointer;transition:all .3s ease}.location-card:hover{box-shadow:0 4px 8px #0000001a}.location-card-selected{border:1px solid black;border-radius:12px;padding:1.5rem 1.5rem 2rem;cursor:pointer;transition:all .3s ease}.location-content{display:flex;align-items:center;justify-content:space-between}.location-info{display:flex;align-items:center;flex-grow:1}.location-icon{width:40px;height:40px;background-color:#d3d3d3;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-right:20px}.location-icon img{width:28px}.location-details{width:95%}.location-details h3{font-size:16px;font-weight:600;margin-bottom:0}.location-details p{font-size:14px;color:#aaa;line-height:1.4;margin:0}.distance{display:flex;align-items:center;color:#888;font-size:14px;margin-left:20px}.distance mat-icon{width:18px!important;height:15px!important;font-size:17px}.staff-header h1{font-size:20px;font-weight:600}.staff-subtitle{font-size:16px;color:#888;font-weight:400}.staff-card{border:1px solid lightgrey;cursor:pointer;transition:all .3s ease;padding-bottom:2rem!important}.staff-card:hover{box-shadow:0 4px 8px #0000001a}.staff-card.selected{border-color:#666}.staff-avatar{width:64px;height:64px;background-color:gray;font-size:20px;font-weight:600;color:#fff}.staff-name{font-size:16px;font-weight:600;margin-bottom:0}.staff-specialty{font-size:14px;color:gray;margin-bottom:8px}.staff-description{font-size:14px;color:gray;line-height:1.4}.rating-section{display:flex;flex-direction:column;align-items:flex-end}.star-rating{color:gold;font-size:16px;margin-bottom:4px;width:100%}.rating-number{font-size:18px;font-weight:600;color:#000}.review-count{font-size:12px;color:#888}.star-icon:before{content:\"\\2b50\";margin-right:4px}.staff_section{width:60%;overflow:hidden}.staff-list{height:64vh;overflow-x:scroll;padding-bottom:1%}.datetime-header h1{font-size:20px;font-weight:600;margin:0!important}.main_container{height:64vh}.datetime-subtitle{font-size:16px;color:#888;font-weight:400}.section-card{border:1px solid lightgrey}.section-title{font-size:17px;font-weight:600;margin-bottom:20px}.date-picker-container{border:1px solid lightgrey}.date-picker-container mat-icon{height:17px;font-size:18px}.date-input{font-size:16px;padding:2%;width:30%}.time-slot{border:1px solid lightgrey;font-size:14px;font-weight:500;padding:6%;cursor:pointer;transition:all .3s ease;text-align:center;min-width:80px}.time-slot:hover{box-shadow:0 4px 8px #0000001a}.time-slot.selected{background-color:#555;border-color:#777;color:#fff}.waitlist-section{background-color:gray;border:none;padding:20px;max-height:13vh}.waitlist-icon{color:#4ade80;font-size:18px;margin-right:8px}.waitlist-title{color:#fff;font-size:16px;font-weight:500;margin-bottom:8px}.waitlist-description{color:#aaa;font-size:14px;margin-bottom:0}.check-icon:before{content:\"\\2713\"}.contact-header h1{font-size:20px;font-weight:600}.contact-subtitle{font-size:16px;color:#888;font-weight:400}.form-section{border:1px solid lightgrey}.section-title{font-size:16px;font-weight:600;margin-bottom:24px}.form-label{font-size:14px;font-weight:500;margin-bottom:8px}.required-asterisk{color:#ff6b6b;margin-left:4px}.form-input{border:1px solid lightgrey;font-size:16px;padding:2%;transition:all .3s ease}.form-input:focus{border-color:#777}.form-input::placeholder{color:#aaa;font-size:14px}.form-textarea{border:1px solid lightgrey;font-size:16px;padding:12px 16px;resize:vertical;max-height:120px;transition:all .3s ease}.form-textarea:focus{border-color:#777}.form-textarea::placeholder{color:#aaa;font-size:14px}.optional-label{color:#888;font-size:12px;font-style:italic}.details_container{height:65vh;overflow-x:scroll;padding-bottom:1%}.policies-container{background-color:#fff;border:1px solid lightgrey;padding:2rem;border-radius:12px}.policies-title{font-size:16px;font-weight:600;color:#000;margin-bottom:1rem}.policy-item{background-color:#fff;border:1px solid lightgrey;border-radius:8px;padding:1%;cursor:pointer;transition:all .3s ease}.cancellation_policies{padding:1% .5%;font-weight:500}.policy-item:hover{background-color:#f8f9fa;border-color:#ccc}.policy-item:last-of-type{margin-bottom:32px}.policy-title{font-size:14px;font-weight:500;color:#000;margin:0}.acceptance-section{display:flex;align-items:flex-start;gap:12px;margin-top:8px}.custom-checkbox{width:20px;height:20px;background-color:#fff;border:1px solid lightgrey;border-radius:4px;margin-top:2px;cursor:pointer;position:relative;flex-shrink:0;transition:all .3s ease}.custom-checkbox:hover{border-color:#999;background-color:#f8f9fa}.custom-checkbox.checked{background-color:#007bff;border-color:#007bff}.custom-checkbox.checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:700}.acceptance-text{font-size:14px;color:#000;line-height:1.5;margin:0}.terms-link{color:#007bff;text-decoration:none;font-weight:500;position:relative}.terms-link:hover{color:#0056b3;text-decoration:underline}.external-link-icon{margin-left:4px;font-size:12px;opacity:.8}.external-link-icon:after{content:\"\\2197\"}.payment-header h1{font-size:20px;font-weight:600;color:#000}.payment-subtitle{font-size:16px;color:#666;font-weight:400}.booking-summary-card{background-color:#fff;border:1px solid lightgrey;padding:2%;border-radius:12px}.summary-title{font-size:18px;font-weight:600;color:#000;margin-bottom:32px}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0}.summary-row:last-child{border-bottom:none;padding-bottom:0}.summary-label{font-size:16px;color:#000;font-weight:500}.summary-value{font-size:16px;color:#000;font-weight:400;text-align:right}.total-row{margin-top:16px;padding-top:16px}.total-row .summary-label,.total-row .summary-value{font-size:20px;font-weight:600}.currency-symbol{font-size:18px}.complete_booking{background:#90ee90;border:none;padding:.5%;width:12vw!important;font-size:15px!important;font-weight:500;border-radius:4px}.datepicker-popover{position:absolute;top:0;left:0;z-index:1000;background:#fff;border-radius:.5rem;box-shadow:0 6px 24px #0000001f;overflow:hidden}.booking-confirmation{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;width:60%;border-radius:10px}.success-icon{margin-bottom:1.5rem}.checkmark-circle{width:80px;height:80px;position:relative}.checkmark{width:80px;height:80px;border-radius:50%;display:block;stroke-width:3;stroke:#22c55e;stroke-miterlimit:10;animation:checkmark-fill .4s ease-in-out .4s forwards,checkmark-scale .3s ease-in-out .9s both}.checkmark-circle-path{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:3;stroke-miterlimit:10;stroke:#22c55e;fill:none;animation:checkmark-stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;stroke:#22c55e;stroke-width:3;animation:checkmark-stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes checkmark-stroke{to{stroke-dashoffset:0}}@keyframes checkmark-scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes checkmark-fill{to{box-shadow:inset 0 0 0 30px #22c55e}}.confirmation-content{width:100%;height:80%}.confirmation-title{font-size:18px;font-weight:700}.confirmation-message{font-size:1rem;margin-bottom:1rem;line-height:1.6;font-weight:500}.details-card{background:#ffffff1a;border:1px solid lightgrey;border-radius:16px;padding:1.5rem;margin-bottom:2rem;width:35vw}.details-title{font-size:1.25rem;font-weight:600;margin:0 0 1.5rem}.details-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.1)}.details-row:last-child{border-bottom:none}.detail-label{font-size:.9rem;font-weight:500}.detail-value{font-weight:600;font-size:1rem}.action-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.btn{padding:.75rem 1.5rem;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .2s ease;border:none;min-width:140px}.btn-outline{background:transparent;border:2px solid rgba(255,255,255,.3);color:#fff}.btn-outline:hover{background:#ffffff1a;border-color:#ffffff80}.btn-primary{background:#fff;color:#1f2937}.btn-primary:hover{background:#f3f4f6;transform:translateY(-1px)}\n"] }]
-        }], ctorParameters: () => [{ type: RestService }, { type: EventsService }, { type: i2$2.Router }], propDecorators: { closeOnOutsideClick: [{
+            args: [{ selector: 'simpo-appointment-booking', standalone: true, imports: [CdkDragPlaceholder, CommonModule, MatIcon, MatFormFieldModule, MatDatepickerModule, FormsModule, MatNativeDateModule, MatInputModule, LettersOnlyDirective, NumbersOnlyDirective, ToastModule], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"screenWidth < 475 ? 'translateY(-100%)' : ''\"></p-toast>\r\n<section class=\"main_section\">\r\n    <div class=\"main_header\">\r\n        <div class=\"header d-flex justify-content-between align-items-center\">\r\n            <div class=\"back-btn d-flex justify-content-center align-items-center cursor-pointer gap-2 mb-3\"\r\n                (click)=\"goBack()\">\r\n                <mat-icon>keyboard_backspace</mat-icon><span *ngIf=\"screenWidth > 475\">Back to My Bookings</span>\r\n            </div>\r\n            <div class=\"header-title\">\r\n                <h1>Book New Appointment</h1>\r\n                <p>{{businessName ?? \"N/A\" }}</p>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"progress-bar\">\r\n            <div class=\"progress-fill\" [style.width]=\"barWidth + '%'\"></div>\r\n        </div>\r\n    </div>\r\n    <div class=\"main_body w-100 d-flex justify-content-center\"><ng-container *ngIf=\"selectedTab === 'serviceListing'\">\r\n            <ng-container *ngTemplateOutlet=\"serviceListing\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'locationListing'\">\r\n            <ng-container *ngTemplateOutlet=\"locationListing\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'staffListing'\">\r\n            <ng-container *ngTemplateOutlet=\"staffListing\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'dateSelection'\">\r\n            <ng-container *ngTemplateOutlet=\"dateSelection\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='contactDetails'\">\r\n            <ng-container *ngTemplateOutlet=\"contactDetails\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='paymentTab'\">\r\n            <ng-container *ngTemplateOutlet=\"paymentTab\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='statusTemplate'\">\r\n            <ng-container *ngTemplateOutlet=\"statusTemplate\"></ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"main_footer d-flex justify-content-center align-items-center\" *ngIf=\"selectedTab!=='statusTemplate'\">\r\n        <div class=\"footer-buttons\">\r\n            <span class=\"back-footer-btn cursor-pointer\" (click)=\"previousStep()\">Back</span>\r\n            <button class=\"continue-btn\" [disabled]=\"!activeButton\" (click)=\"nextStep()\"\r\n                *ngIf=\"selectedTab!='paymentTab'\">{{!loader ? 'Continue' : 'Loading...'}}</button>\r\n            <button class=\"complete_booking cursor-pointer d-flex justify-content-evenly align-items-center\"\r\n                *ngIf=\"selectedTab==='paymentTab'\" (click)=\"checkPayment()\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">Complete\r\n                Booking</button>\r\n        </div>\r\n    </div>\r\n</section>\r\n<ng-template #serviceListing>\r\n    <div class=\"w-60 service_section\">\r\n        <div class=\"service-selection\">\r\n            <h2>Select a Service</h2>\r\n            <p>Choose the service you'd like to book</p>\r\n\r\n            <div class=\"services-grid\">\r\n                <ng-container *ngFor=\"let service of serviceData\">\r\n                    <div class=\"\" (click)=\"selectService(service)\"\r\n                        [ngClass]=\"{ 'service-card-selected' : service?.selected, 'service-card': !service?.selected }\">\r\n                        <div class=\" service-header\">\r\n                            <div class=\"service-icon\"><mat-icon>person_outline</mat-icon></div>\r\n                            <div class=\"service-info\">\r\n                                <div class=\"service-title\">{{service?.name ? service?.name : 'N/A'}}</div>\r\n                                <div class=\"service-category\">Wellness</div>\r\n                            </div>\r\n                            <div>\r\n                                <div class=\"service-price\">\u20B9{{service?.priceDetails?.price ?\r\n                                    service?.priceDetails?.price : 'N/A' }}</div>\r\n                                <div class=\"service-duration\">{{service?.duration ? service?.duration : 'N/A'}} min\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"service-description\">\r\n                            {{service?.description ? service?.description : 'N/A'}}\r\n                        </div>\r\n                        <div class=\"home-visit\" *ngIf=\"service?.homeAppointmentAvailable\"><img\r\n                                src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/982126c1758628863129furniture_16406103.png\">Home\r\n                            Visit Available</div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <!-- <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\uD83D\uDC64</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">General Consultation</div>\r\n                            <div class=\"service-category\">Medical</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B9800</div>\r\n                            <div class=\"service-duration\">30 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Comprehensive health consultation\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\uD83E\uDDE0</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">Mental Health Counseling</div>\r\n                            <div class=\"service-category\">Mental Health</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B91500</div>\r\n                            <div class=\"service-duration\">45 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Professional psychological support\r\n                    </div>\r\n                    <div class=\"home-visit\">Home Visit Available</div>\r\n                </div>\r\n\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\u2702</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">Hair Cut & Styling</div>\r\n                            <div class=\"service-category\">Beauty</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B91200</div>\r\n                            <div class=\"service-duration\">45 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Professional hair cutting and styling\r\n                    </div>\r\n                    <div class=\"home-visit\">Home Visit Available</div>\r\n                </div> -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #locationListing>\r\n    <div class=\"location_section\">\r\n        <div class=\"header flex-column align-items-start\">\r\n            <h1>Choose Location</h1>\r\n            <p>Select where you'd like to receive the service</p>\r\n        </div>\r\n\r\n        <div class=\"location-list\">\r\n            <ng-container *ngFor=\"let location of locationData\">\r\n                <div (click)=\"selectLocation(location)\"\r\n                    [ngClass]=\"{ 'location-card-selected' : location?.selected, 'location-card': !location?.selected }\">\r\n                    <div class=\"location-content\">\r\n                        <div class=\"location-info\">\r\n                            <div class=\"location-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/427226c1758629157758store_3171510.png\">\r\n                            </div>\r\n                            <div class=\"location-details\">\r\n                                <div class=\"d-flex justify-content-between align-items-center\">\r\n                                    <h3>{{location?.storeName ? location?.storeName : 'N/A'}}</h3>\r\n                                    <div class=\"distance\"><mat-icon>location_on</mat-icon> 2.3 km</div>\r\n                                </div>\r\n                                <p>{{location?.addressDetails?.addressLine}}, {{location?.addressDetails?.city}},\r\n                                    {{location?.addressDetails?.state}} {{location?.pincode}}</p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <!-- <div class=\"location-card\">\r\n                <div class=\"location-content\">\r\n                    <div class=\"location-info\">\r\n                        <div class=\"location-icon branch-icon\"></div>\r\n                        <div class=\"location-details\">\r\n                            <h3>Branch Clinic</h3>\r\n                            <p>456 Care Avenue, Health Zone, Mumbai 400015</p>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"distance\">5.8 km</div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"location-card\">\r\n                <div class=\"location-content\">\r\n                    <div class=\"location-info\">\r\n                        <div class=\"location-icon home-icon\"></div>\r\n                        <div class=\"location-details\">\r\n                            <h3>Home Visit</h3>\r\n                            <p>Your Location</p>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"distance\">0 km</div>\r\n                </div>\r\n            </div> -->\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #staffListing>\r\n    <div class=\"w-60 overflow-hidden\">\r\n        <div class=\"d-flex w-100 h-100\">\r\n            <div class=\"w-100\">\r\n                <!-- Header Section -->\r\n                <div class=\"staff-header mb-3\">\r\n                    <h1 class=\"mb-1\">Select Staff Member</h1>\r\n                    <p class=\"staff-subtitle mb-0\">Choose your preferred professional</p>\r\n                </div>\r\n\r\n                <!-- Staff Cards -->\r\n                <div class=\"d-flex flex-column gap-4 staff-list\">\r\n                    <ng-container *ngFor=\"let staff of staffData\">\r\n                        <div class=\" staff-card card rounded-3 p-4\" (click)=\"selectStaff(staff)\">\r\n                            <div class=\"d-flex align-items-start justify-content-between\">\r\n                                <div class=\"d-flex align-items-start flex-grow-1\">\r\n                                    <div\r\n                                        class=\"staff-avatar rounded-circle d-flex align-items-center justify-content-center me-4\">\r\n                                        {{staff?.staffName.slice(0,3).toUpperCase()}}\r\n                                    </div>\r\n                                    <div class=\"staff-details flex-grow-1\">\r\n                                        <h3 class=\"staff-name\">{{staff?.staffName ? staff?.staffName : 'N/A'}}</h3>\r\n                                        <p class=\"staff-specialty\">General Medicine</p>\r\n                                        <p class=\"staff-description mb-0\">Experienced physician with 10+ years in\r\n                                            general\r\n                                            medicine and wellness care.</p>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"rating-section\">\r\n                                    <div class=\"star-rating d-flex align-items-center\">\r\n                                        <span class=\"star-icon\"></span>\r\n                                        <span class=\"rating-number\">4.9</span>\r\n                                    </div>\r\n                                    <div class=\"review-count\">156 reviews</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #dateSelection>\r\n    <div class=\"w-60 date_section\">\r\n        <div class=\"row justify-content-center h-100\">\r\n            <div class=\"col-12 h-100\">\r\n                <div class=\"datetime-header mb-2\">\r\n                    <h1 class=\"mb-3\">Select Date & Time</h1>\r\n                    <p class=\"datetime-subtitle mb-0\">Choose when you'd like your appointment</p>\r\n                </div>\r\n\r\n                <!-- Main Content -->\r\n                <div class=\"d-flex gap-4 main_container\">\r\n                    <!-- Left Column - Date Selection -->\r\n                    <div [ngClass]=\"{'w-50' : screenWidth > 475 , 'w-100':screenWidth < 475}\">\r\n                        <div class=\"section-card card rounded-3 p-4 h-100\">\r\n                            <h3 class=\"section-title\">Select Date</h3>\r\n\r\n                            <div class=\"date-picker-container d-flex align-items-center\"\r\n                                (click)=\"$event.stopPropagation()\">\r\n                                <input type=\"text\" class=\"form-control date-input border-0 rounded-2\"\r\n                                    placeholder=\"dd-mm-yyyy\" [value]=\"selectedDateStr\" readonly\r\n                                    (click)=\"toggleCalendar($event)\">\r\n\r\n                                <mat-icon class=\"ms-2\" (click)=\"toggleCalendar($event)\">calendar_today</mat-icon>\r\n                            </div>\r\n                            <div class=\"position-relative\" (click)=\"$event.stopPropagation()\">\r\n                                <div class=\"datepicker-popover\" *ngIf=\"showCalendar\">\r\n                                    <mat-calendar [(selected)]=\"selectedDate\" [dateFilter]=\"dateFilter\"\r\n                                        (selectedChange)=\"onDateSelected($event)\" class=\"datepicker-calendar\">\r\n                                    </mat-calendar>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Right Column - Time Selection -->\r\n                    <div class=\"time_selection\" [ngClass]=\"{'w-50' : screenWidth > 475 , 'w-100':screenWidth < 475}\">\r\n                        <div class=\"section-card card h-100 rounded-3 p-4\">\r\n                            <h3 class=\"section-title\">Available Times</h3>\r\n\r\n                            <!-- Time Slots Grid -->\r\n                            <div class=\"row g-2 mb-4 overflow-scroll\">\r\n                                <div class=\"col-4\" *ngFor=\"let time of locationTiming\">\r\n                                    <div class=\"time-slot rounded-2\" [class.selected]=\"time.selected\"\r\n                                        (click)=\"selectTimeSlot(time)\">{{time ?\r\n                                        time?.value.slice(0,5) : 'N/A'}}</div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <!-- Waitlist Section -->\r\n                            <div class=\"waitlist-section rounded-3\">\r\n                                <div class=\"d-flex align-items-start\">\r\n                                    <div class=\"d-flex h-100 justify-content-between flex-column\">\r\n                                        <div class=\"waitlist-title d-flex align-items-center gap-2\"><span\r\n                                                class=\"waitlist-icon check-icon\"></span>No\r\n                                            slots available?</div>\r\n                                        <div class=\"waitlist-description d-flex align-items-center gap-2\">\r\n                                            <input class=\"form-check-input cursor-pointer\" type=\"checkbox\"\r\n                                                id=\"flexCheckChecked\">\r\n                                            Add me to the waitlist for earlier\r\n                                            availability\r\n                                        </div>\r\n                                    </div>\r\n                                    <div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n</ng-template>\r\n<ng-template #contactDetails>\r\n    <div class=\"w-60 contact_section\">\r\n        <div class=\"d-flex\" [ngClass]=\"{'h-100':screenWidth < 475}\">\r\n            <div class=\"h-100 w-100\">\r\n                <!-- Header Section -->\r\n                <div class=\"contact-header mb-2\">\r\n                    <h1 class=\"mb-0\">Contact Details</h1>\r\n                    <p class=\"contact-subtitle mb-0\">Provide your contact information</p>\r\n                </div>\r\n\r\n                <!-- Form Sections -->\r\n                <div class=\"d-flex gap-3 details_container flex-column w-100\">\r\n                    <!-- Left Column - Personal Information -->\r\n                    <div class=\"d-flex gap-4\">\r\n                        <div\r\n                            [ngClass]=\"{'w-50' : selectedService?.homeAppointmentAvailable, 'w-100' : !selectedService?.homeAppointmentAvailable}\">\r\n                            <div class=\"form-section card rounded-3 p-4 h-100\">\r\n                                <h3 class=\"section-title\">Personal Information</h3>\r\n\r\n                                <!-- Full Name -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Full Name\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"text\" class=\"form-control form-input rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.name\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\" simpoLettersOnly>\r\n                                </div>\r\n\r\n                                <!-- Email Address -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Email Address\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"email\" class=\"form-control form-input rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.email\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\">\r\n                                </div>\r\n\r\n                                <!-- Phone Number -->\r\n                                <div class=\"mb-0\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Phone Number\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"tel\" class=\"form-control  rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.phoneNumber\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\" simpoNumbersOnly\r\n                                        [ngClass]=\"{'mobile_number' : appointmentPayload.customerDetail.phoneNumber.length != 10}\">\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <!-- Right Column - Home Visit Details -->\r\n                        <div class=\"w-50\" *ngIf=\"selectedService?.homeAppointmentAvailable\">\r\n                            <div class=\"form-section card rounded-3 p-4 h-100\">\r\n                                <h3 class=\"section-title\">Home Visit Details</h3>\r\n\r\n                                <!-- Home Address -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Home Address\r\n                                    </label>\r\n                                    <textarea class=\"form-control form-textarea rounded-2\"\r\n                                        placeholder=\"Enter your complete address\"></textarea>\r\n                                </div>\r\n\r\n                                <!-- Special Instructions -->\r\n                                <div class=\"mb-0\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Special Instructions\r\n                                    </label>\r\n                                    <textarea class=\"form-control form-textarea rounded-2\"\r\n                                        placeholder=\"Any special instructions for the professional (optional)\"></textarea>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"policies-container\">\r\n                        <!-- Header -->\r\n                        <h2 class=\"policies-title\">Policies & Terms</h2>\r\n\r\n                        <!-- Policy Items -->\r\n                        <div class=\"policy-items-container d-flex flex-column gap-3\">\r\n                            <!-- Cancellation Policy -->\r\n                            <div class=\"policy-item d-flex justify-content-between align-items-center\"\r\n                                (click)=\"showCancellationPolicy = !showCancellationPolicy\">\r\n                                <h3 class=\"policy-title\">Cancellation Policy</h3>\r\n                                <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\r\n                                        *ngIf=\"!showCancellationPolicy\">keyboard_arrow_right</mat-icon>\r\n                                    <mat-icon *ngIf=\"showCancellationPolicy\">keyboard_arrow_down</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\r\n                                *ngIf=\"showCancellationPolicy\">\r\n                                <span>&#8226; Free cancellation up to 24 hours before appointment</span>\r\n                                <span>&#8226; 50% charge for cancellations within 24 hours</span>\r\n                                <span>&#8226; No refund for no-shows</span>\r\n                                <span>&#8226; Emergency cancellations will be reviewed case by case</span>\r\n                            </div>\r\n\r\n                            <!-- Rescheduling Policy -->\r\n                            <div class=\"policy-item d-flex justify-content-between align-items-center\"\r\n                                (click)=\"showReducingPolicy = !showReducingPolicy\">\r\n                                <h3 class=\"policy-title\">Rescheduling Policy</h3>\r\n                                <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\r\n                                        *ngIf=\"!showReducingPolicy\">keyboard_arrow_right</mat-icon>\r\n                                    <mat-icon *ngIf=\"showReducingPolicy\">keyboard_arrow_down</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\r\n                                *ngIf=\"showReducingPolicy\">\r\n                                <span>&#8226; Free cancellation up to 24 hours before appointment</span>\r\n                                <span>&#8226; 50% charge for cancellations within 24 hours</span>\r\n                                <span>&#8226; No refund for no-shows</span>\r\n                                <span>&#8226; Emergency cancellations will be reviewed case by case</span>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <!-- Acceptance Section -->\r\n                        <div class=\"acceptance-section\">\r\n                            <input type=\"checkbox\" class=\"custom-checkbox\">\r\n                            <p class=\"acceptance-text\">\r\n                                I understand and accept the cancellation & rescheduling policies and\r\n                                <a href=\"#\" class=\"terms-link\">Terms & Conditions<span\r\n                                        class=\"external-link-icon\"></span></a>\r\n                            </p>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #paymentTab>\r\n    <div class=\"w-60 payment_section\">\r\n        <div class=\"w-100 h-100\">\r\n            <div class=\"w-100 d-flex justify-content-center align-items-center flex-column\">\r\n                <!-- Header Section -->\r\n                <div class=\"payment-header mb-3 w-100\">\r\n                    <h1 class=\"mb-0\">Payment & Confirmation</h1>\r\n                    <p class=\"payment-subtitle mb-0\">Review your booking and complete payment</p>\r\n                </div>\r\n\r\n                <!-- Booking Summary Card -->\r\n                <div class=\"booking-summary-card\" [ngClass]=\"{'w-100' : screenWidth < 475,'w-50':screenWidth > 475}\">\r\n                    <h2 class=\"summary-title\">Booking Summary</h2>\r\n\r\n                    <!-- Service -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Service</div>\r\n                        <div class=\"summary-value\">{{selectedService?.name ? selectedService?.name : 'N/A'}}</div>\r\n                    </div>\r\n\r\n                    <!-- Professional -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Professional</div>\r\n                        <div class=\"summary-value\">{{selectedStaff?.staffName ? selectedStaff?.staffName : 'N/A'}}</div>\r\n                    </div>\r\n\r\n                    <!-- Location -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Location</div>\r\n                        <div class=\"summary-value\">{{selectedLocation?.storeName ? selectedLocation?.storeName : 'N/A'}}\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Date & Time -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Date & Time</div>\r\n                        <div class=\"summary-value\">{{selectedDateStr ? (selectedDateStr) : 'N/A'}} at\r\n                            15:30</div>\r\n                    </div>\r\n\r\n                    <!-- Duration -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Duration</div>\r\n                        <div class=\"summary-value\">{{selectedService?.duration ? selectedService?.duration : 'N/A'}}\r\n                            minutes</div>\r\n                    </div>\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Tax Percent</div>\r\n                        <div class=\"summary-value\">{{selectedService?.priceDetails?.taxPercent ?\r\n                            selectedService?.priceDetails?.taxPercent : 'N/A'}}%</div>\r\n                    </div>\r\n                    <!-- Total -->\r\n                    <div class=\"summary-row total-row\">\r\n                        <div class=\"summary-label\">Total</div>\r\n                        <div class=\"summary-value\">\r\n                            <span class=\"currency-symbol\">\u20B9</span>{{selectedService?.priceDetails?.price ?\r\n                            selectedService?.priceDetails?.price : 'N/A'}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #statusTemplate>\r\n    <div class=\"booking-confirmation\">\r\n        <!-- Success Icon -->\r\n        <div class=\"success-icon\">\r\n            <div class=\"checkmark-circle\">\r\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/881293c1758695578518success.gif\"\r\n                    class=\"w-100 h-100\" *ngIf=\"apiStatus\">\r\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/325000c1758695564518fail.gif\"\r\n                    class=\"w-100 h-100\" *ngIf=\"!apiStatus\">\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Main Content -->\r\n        <div class=\"confirmation-content\">\r\n            <h1 class=\"confirmation-title\">{{apiStatus ? 'Booking Confirmed!' : 'Booking Failed'}}</h1>\r\n            <p class=\"confirmation-message\">\r\n                {{apiStatus ? 'Your appointment has been successfully booked.':'Failed to book you appointment. Please\r\n                try again later'}}\r\n            </p>\r\n\r\n            <!-- Details Card -->\r\n            <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\r\n                <div class=\"details-card\">\r\n                    <h3 class=\"details-title\">Appointment Details</h3>\r\n\r\n                    <div class=\"details-row\">\r\n                        <span class=\"detail-label\">Service</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.serviceDetail?.name ?\r\n                            appointmentPayload.serviceDetail?.name : 'N/A'}}</span>\r\n                    </div>\r\n\r\n                    <div class=\"details-row\">\r\n                        <span class=\"detail-label\">Professional</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.staffDetail?.name ?\r\n                            appointmentPayload.staffDetail?.name : 'N/A'}}</span>\r\n                    </div>\r\n                    <div class=\"details-row\">\r\n                        <span class=\"detail-label\">Date & Time</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.bookingDate ?\r\n                            appointmentPayload.bookingDate.slice(0,8) :\r\n                            'N/A'}} at\r\n                            {{appointmentPayload.startTime ? appointmentPayload.startTime : 'N/A'}}</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n\r\n            <!-- Action Buttons -->\r\n            <!-- <div class=\"action-buttons\">\r\n                <button class=\"btn btn-outline\">View My Bookings</button>\r\n                <button class=\"btn btn-primary\">Back to Admin</button>\r\n            </div> -->\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: ["body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:#fff;color:#000;line-height:1.6}.main_header{padding:1%}.main_body{height:73vh}.header{display:flex;align-items:center;justify-content:space-between}.back-btn mat-icon{height:16px!important;width:20px!important;font-size:21px!important}.back-btn span{color:#000;font-size:15px;font-weight:500}.back-btn:hover{background-color:#f0f0f0}.header-title{flex-grow:1;margin-left:2rem}.header-title h1{font-size:20px;font-weight:600;margin-bottom:0}.header-title p{color:#666;font-size:14px}.step-indicator{font-size:14px;color:#000;font-weight:700}.progress-bar{width:100%;height:8px;background-color:#e0e0e0;margin-bottom:1rem;border-radius:10px;overflow:hidden}.w-60{width:60%!important}.progress-fill{height:100%;width:14.28%;background-color:#000}.service-selection{height:100%;overflow:hidden}.service-selection h2{font-size:20px;font-weight:600;margin-bottom:8px}.service-selection p{color:#666;font-size:16px;margin-bottom:1rem}.main_footer{border-top:1px solid black}.services-grid{display:grid;grid-template-columns:48% 48%;gap:15px;overflow-x:scroll;height:87%;padding-bottom:5px}.service-card{border:1px solid lightgrey;border-radius:8px;padding:24px;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.service-card:hover{background-color:#f9f9f9;box-shadow:0 4px 8px #0000001a}.service-card-selected{border:2px solid black;border-radius:8px;padding:24px;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.service-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:3rem}.service-info{flex-grow:1}.service-icon{width:40px;height:40px;border-radius:8px;background-color:#f0f0f0;display:flex;align-items:center;justify-content:center;margin-right:1rem;font-size:20px;margin-top:.2rem}.service-title{font-size:18px;font-weight:600;margin-bottom:4px}.service-category{background-color:#f0f0f0;color:#000;padding:1% 4%;border-radius:12px;font-size:12px;font-weight:500;display:inline-block}.service-price{font-size:17px;font-weight:700;color:#000}.service-duration{font-size:12px;color:#666;display:flex;justify-content:center;align-items:center}.service-description{color:#666;font-size:15px;margin-bottom:.5rem;line-height:1.5}.home-visit{display:flex;align-items:center;font-size:12px;color:#666;border:1px solid lightgrey;padding:.5% 1%;border-radius:4px;background-color:#fff;width:10vw;height:3vh;white-space:nowrap;justify-content:space-around}.home-visit img{width:18px}.footer-buttons{display:flex;justify-content:space-between;align-items:center;padding-top:20px;width:60%}.back-footer-btn{color:#000;padding:12px 24px;font-size:16px}.continue-btn{background-color:#000;color:#fff;border:2px solid black;padding:.5%;border-radius:4px;font-size:15px!important;font-weight:600;cursor:pointer;width:6vw!important}.continue-btn:hover{background-color:#333}.continue-btn:disabled{background-color:#ccc;border-color:#ccc;cursor:not-allowed}.location_section{width:60%;overflow:hidden}.location_section .header h1{font-size:20px;font-weight:600;margin-bottom:.25rem}.location_section .header p{font-size:16px;color:#888;font-weight:400}.location-list{display:flex;flex-direction:column;gap:20px;height:64vh;overflow-x:scroll;padding-bottom:1%}.location-card{border:1px solid lightgrey;border-radius:12px;padding:1.5rem 1.5rem 2rem;cursor:pointer;transition:all .3s ease}.location-card:hover{box-shadow:0 4px 8px #0000001a}.location-card-selected{border:1px solid black;border-radius:12px;padding:1.5rem 1.5rem 2rem;cursor:pointer;transition:all .3s ease}.location-content{display:flex;align-items:center;justify-content:space-between}.location-info{display:flex;align-items:center;flex-grow:1}.location-icon{width:40px;height:40px;background-color:#d3d3d3;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-right:20px}.location-icon img{width:28px}.location-details{width:95%}.location-details h3{font-size:16px;font-weight:600;margin-bottom:0}.location-details p{font-size:14px;color:#aaa;line-height:1.4;margin:0}.distance{display:flex;align-items:center;color:#888;font-size:14px;margin-left:20px}.distance mat-icon{width:18px!important;height:15px!important;font-size:17px}.staff-header h1{font-size:20px;font-weight:600}.staff-subtitle{font-size:16px;color:#888;font-weight:400}.staff-card{border:1px solid lightgrey;cursor:pointer;transition:all .3s ease;padding-bottom:2rem!important}.staff-card:hover{box-shadow:0 4px 8px #0000001a}.staff-card.selected{border-color:#666}.staff-avatar{width:64px;height:64px;background-color:gray;font-size:20px;font-weight:600;color:#fff}.staff-name{font-size:16px;font-weight:600;margin-bottom:0}.staff-specialty{font-size:14px;color:gray;margin-bottom:8px}.staff-description{font-size:14px;color:gray;line-height:1.4}.rating-section{display:flex;flex-direction:column;align-items:flex-end}.star-rating{color:gold;font-size:16px;margin-bottom:4px;width:100%}.rating-number{font-size:18px;font-weight:600;color:#000}.review-count{font-size:12px;color:#888}.star-icon:before{content:\"\\2b50\";margin-right:4px}.staff_section{width:60%;overflow:hidden}.staff-list{height:64vh;overflow-x:scroll;padding-bottom:1%}.datetime-header h1{font-size:20px;font-weight:600;margin:0!important}.main_container{height:64vh}.datetime-subtitle{font-size:16px;color:#888;font-weight:400}.section-card{border:1px solid lightgrey}.section-title{font-size:17px;font-weight:600;margin-bottom:20px}.date-picker-container{border:1px solid lightgrey}.date-picker-container mat-icon{height:17px;font-size:18px}.date-input{font-size:16px;padding:2%;width:30%}.time-slot{border:1px solid lightgrey;font-size:14px;font-weight:500;padding:6%;cursor:pointer;transition:all .3s ease;text-align:center;min-width:80px}.time-slot:hover{box-shadow:0 4px 8px #0000001a}.time-slot.selected{background-color:#555;border-color:#777;color:#fff}.waitlist-section{background-color:#789;border:none;padding:4%;max-height:13vh}.waitlist-icon{color:#4ade80;font-size:18px}.waitlist-title{color:#fff;font-size:16px;font-weight:500;margin-bottom:8px}.mobile_number{border-color:#dc3545!important;box-shadow:0 0 0 .1rem #ffc3c3}.waitlist-description{color:#fff;font-size:14px;margin-bottom:0;font-weight:500}.waitlist-description .form-check-input{width:17px;height:17px;background-color:transparent}.waitlist-description .form-check-input:checked{background-color:#0d6efd}.check-icon:before{content:\"\\2713\"}.contact-header h1{font-size:20px;font-weight:600}.contact-subtitle{font-size:16px;color:#888;font-weight:400}.form-section{border:1px solid lightgrey}.section-title{font-size:16px;font-weight:600;margin-bottom:24px}.form-label{font-size:14px;font-weight:500;margin-bottom:8px}.required-asterisk{color:#ff6b6b;margin-left:4px}.form-input{border:1px solid lightgrey;font-size:16px;padding:1%;transition:all .3s ease}.form-input:focus{border-color:#777}.form-input::placeholder{color:#aaa;font-size:14px}.form-textarea{border:1px solid lightgrey;font-size:16px;padding:12px 16px;resize:vertical;max-height:120px;transition:all .3s ease}.form-textarea:focus{border-color:#777}.form-textarea::placeholder{color:#aaa;font-size:14px}.optional-label{color:#888;font-size:12px;font-style:italic}.details_container{height:65vh;overflow-x:scroll;padding-bottom:1%}.policies-container{background-color:#fff;border:1px solid lightgrey;padding:2rem;border-radius:12px}.policies-title{font-size:16px;font-weight:600;color:#000;margin-bottom:1rem}.policy-item{background-color:#fff;border:1px solid lightgrey;border-radius:8px;padding:1%;cursor:pointer;transition:all .3s ease}.cancellation_policies{padding:1% .5%;font-weight:500}.policy-item:hover{background-color:#f8f9fa;border-color:#ccc}.policy-item:last-of-type{margin-bottom:32px}.policy-title{font-size:14px;font-weight:500;color:#000;margin:0}.acceptance-section{display:flex;align-items:flex-start;gap:7px;margin-top:8px}.custom-checkbox{width:18px;height:20px;background-color:#fff;border:1px solid lightgrey;border-radius:4px;margin-top:2px;cursor:pointer;position:relative;flex-shrink:0;transition:all .3s ease}.custom-checkbox:hover{border-color:#999;background-color:#f8f9fa}.custom-checkbox.checked{background-color:#007bff;border-color:#007bff}.custom-checkbox.checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:700}.acceptance-text{font-size:14px;color:#000;line-height:1.5;margin:0}.terms-link{color:#007bff;text-decoration:none;font-weight:500;position:relative}.terms-link:hover{color:#0056b3;text-decoration:underline}.external-link-icon{margin-left:4px;font-size:12px;opacity:.8}.external-link-icon:after{content:\"\\2197\"}.payment-header h1{font-size:20px;font-weight:600;color:#000}.payment-subtitle{font-size:16px;color:#666;font-weight:400}.booking-summary-card{background-color:#fff;border:1px solid lightgrey;padding:2%;border-radius:12px}.summary-title{font-size:18px;font-weight:600;color:#000;margin-bottom:32px}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0}.summary-row:last-child{border-bottom:none;padding-bottom:0}.summary-label{font-size:16px;color:#000;font-weight:500}.summary-value{font-size:16px;color:#000;font-weight:400;text-align:right}.total-row{margin-top:16px;padding-top:16px}.total-row .summary-label,.total-row .summary-value{font-size:20px;font-weight:600}.currency-symbol{font-size:18px}.complete_booking{background:#e3fee3;border:none;padding:.5%;width:12vw!important;font-size:15px!important;font-weight:500;border-radius:4px}.complete_booking img{width:30px}.booking-confirmation{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;width:60%;border-radius:10px}.success-icon{margin-bottom:1.5rem}.checkmark-circle{width:80px;height:80px;position:relative}.checkmark{width:80px;height:80px;border-radius:50%;display:block;stroke-width:3;stroke:#22c55e;stroke-miterlimit:10;animation:checkmark-fill .4s ease-in-out .4s forwards,checkmark-scale .3s ease-in-out .9s both}.checkmark-circle-path{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:3;stroke-miterlimit:10;stroke:#22c55e;fill:none;animation:checkmark-stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;stroke:#22c55e;stroke-width:3;animation:checkmark-stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes checkmark-stroke{to{stroke-dashoffset:0}}@keyframes checkmark-scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes checkmark-fill{to{box-shadow:inset 0 0 0 30px #22c55e}}.confirmation-content{width:100%;height:80%}.confirmation-title{font-size:18px;font-weight:700}.confirmation-message{font-size:1rem;margin-bottom:1rem;line-height:1.6;font-weight:500}.details-card{background:#ffffff1a;border:1px solid lightgrey;border-radius:16px;padding:1.5rem;margin-bottom:2rem;width:35vw}.details-title{font-size:1.25rem;font-weight:600;margin:0 0 1.5rem}.details-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.1)}.details-row:last-child{border-bottom:none}.detail-label{font-size:.9rem;font-weight:500}.detail-value{font-weight:600;font-size:1rem}.action-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.btn{padding:.75rem 1.5rem;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .2s ease;border:none;min-width:140px}.btn-outline{background:transparent;border:2px solid rgba(255,255,255,.3);color:#fff}.btn-outline:hover{background:#ffffff1a;border-color:#ffffff80}.btn-primary{background:#fff;color:#1f2937}.btn-primary:hover{background:#f3f4f6;transform:translateY(-1px)}.datepicker-popover{position:absolute;z-index:1000;margin-top:8px;border-radius:16px;overflow:hidden;box-shadow:0 12px 28px #0000001f,0 2px 4px #00000014;background:#fff;border:1px solid rgba(0,0,0,.06);width:17vw}::ng-deep .datepicker-calendar{border-radius:16px!important;overflow:hidden!important;font-family:Segoe UI,Roboto,sans-serif!important;width:100%!important}::ng-deep .mat-calendar-header{background:linear-gradient(135deg,#667eea,#764ba2)!important;color:#fff!important;padding:3px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:60px!important;border-radius:16px 16px 0 0!important}::ng-deep .mat-calendar-controls{display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;margin:2% calc(4.7142857143% - 16px)!important}::ng-deep .mat-calendar-period-button{color:#fff!important;font-weight:700!important;font-size:16px!important;letter-spacing:.5px!important;background:transparent!important;border:none!important;padding:12px 16px!important;border-radius:8px!important;transition:all .3s ease!important;flex-grow:1!important;text-align:left!important;margin:0!important;order:1!important}::ng-deep .mat-calendar-period-button:hover{background:#ffffff26!important;transform:translateY(-1px)!important}::ng-deep .mat-calendar-header .mat-calendar-controls>div{display:flex;order:2!important}::ng-deep .mat-calendar-previous-button,::ng-deep .mat-calendar-next-button{color:#fff!important;width:40px!important;height:40px!important;border-radius:50%!important;background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;transition:all .3s ease!important;margin:0 4px!important;display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .mat-calendar-previous-button:hover,::ng-deep .mat-calendar-next-button:hover{background:#ffffff40!important;transform:scale(1.05)!important}::ng-deep .mat-calendar-arrow{fill:#fff!important;width:20px!important;height:20px!important}::ng-deep .mat-calendar-content{padding:10px 16px!important;background:#fff!important}::ng-deep .mat-calendar-table-header th{color:#6b7280!important;font-weight:600!important;font-size:12px!important;text-align:center!important;padding-bottom:12px!important;text-transform:uppercase!important}::ng-deep .mat-calendar-table{border-spacing:0!important;border-collapse:collapse!important;width:100%!important}::ng-deep .mat-calendar-body-cell{height:44px!important;width:44px!important;border-radius:12px!important}::ng-deep .mat-calendar-body-cell-content{width:33px!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-weight:500!important;font-size:14px!important;color:#374151!important;transition:all .3s cubic-bezier(.4,0,.2,1)!important}::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover .mat-calendar-body-cell-content:not(.mat-calendar-body-selected){background:#667eea1a!important;color:#667eea!important;transform:scale(1.05)!important}::ng-deep .mat-calendar-body-selected{background:linear-gradient(135deg,#667eea,#764ba2)!important;color:#fff!important;box-shadow:0 4px 12px #677eea4d!important}::ng-deep .mat-calendar-body-today:not(.mat-calendar-body-selected){border:none;color:#667eea!important;font-weight:700!important}::ng-deep .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected){color:#d1d5db!important}@media screen and (min-width:320px) and (max-width:475px){.back-btn{gap:.25rem!important;margin:0!important}.back-btn span{color:#000;font-size:12px;font-weight:500;white-space:nowrap}.back-btn mat-icon{font-size:16px!important;margin-bottom:0!important}.header-title{display:flex;align-items:center;margin-bottom:0rem!important}.header-title h1{font-size:16px!important}.main_header .header{padding:3%}.date_section,.service_section,.location_section,.contact_section,.payment_section{width:100%!important;padding:0% 5%}.service_section h2{font-size:17px!important;margin-bottom:0!important}.service_section p{font-size:14px!important}.main_section{height:100vh}.services-grid{display:flex;justify-content:center;flex-wrap:wrap}.service-card,.service-card-selected{width:90vw!important}.home-visit{width:40vw!important}.main_body{height:calc(100% - 123px)!important}.back-footer-btn{padding:12px 2px!important}.footer-buttons{padding:0% 3%!important;width:100%!important}.continue-btn{width:22vw!important}.main_container{flex-wrap:wrap;height:100%!important}.date_section{overflow:hidden}.date_section .time_selection{height:60%}.datepicker-popover{width:60vw!important}.details_container{height:90%!important;justify-content:space-around}.complete_booking{width:39vw!important}.booking_confirmation,.details-card{width:100%!important}}\n"] }]
+        }], ctorParameters: () => [{ type: RestService }, { type: EventsService }, { type: i2$2.Router }, { type: i6$1.MessageService }], propDecorators: { data: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], edit: [{
+                type: Input
+            }], delete: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }], nextComponentColor: [{
+                type: Input
+            }], getScreenSize: [{
+                type: HostListener,
+                args: ["window: resize", ["$event"]]
+            }], closeOnOutsideClick: [{
                 type: HostListener,
                 args: ['document:click']
             }] } });
@@ -16581,9 +16675,6 @@ class FeaturedProductsComponent extends BaseSection {
         this.IsEcommerce = false;
         this.showRightArrow = true;
         this.showLeftArrow = false;
-        if (isPlatformBrowser(this.platformId)) {
-            this.getScreenSize();
-        }
     }
     getScreenSize() {
         this.screenWidth = window.innerWidth;
@@ -16592,6 +16683,9 @@ class FeaturedProductsComponent extends BaseSection {
         setTimeout(() => this.updateArrows(), 2000);
     }
     ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.getScreenSize();
+        }
         this.content = this.data?.content;
         this.styles = this.data?.styles;
         this.button = this.data?.action.buttons[0];
@@ -16893,7 +16987,7 @@ class FeaturedProductsComponent extends BaseSection {
         return this.data?.action?.buttons[index]?.styles || {};
     }
     getBtnData(index) {
-        return this.data?.action?.buttons[index].content || {};
+        return this.data?.action?.buttons[index]?.content || {};
     }
     redirectTo(data) {
         if (!data?.pageId && data?.redirectionUrl)
@@ -16901,11 +16995,11 @@ class FeaturedProductsComponent extends BaseSection {
         this._eventService.buttonRedirection.emit({ data: data });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeaturedProductsComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$2.Router }, { token: CartService }, { token: StorageServiceService }, { token: i6$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FeaturedProductsComponent, isStandalone: true, selector: "simpo-featured-products", inputs: { data: "data", responseData: "responseData", index: "index", isRelatedProduct: "isRelatedProduct", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, outputs: { changeDetailProduct: "changeDetailProduct" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<ng-container>\r\n  <section class=\"container-fluid total-container px-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [attr.style]=\"customClass\">\r\n    <div [spacingAround]=\"stylesLayout\">\r\n      <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n        [simpoBackground]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [simpoAnimation]=\"styles?.animation\"\r\n        [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\" [simpoCorner]=\"styles?.corners\">\r\n        <div class=\"d-flex jc-space align-center content-side\">\r\n          <div class=\"input-text content-side\">\r\n            <div *ngFor=\"let item of content?.inputText\">\r\n              <ng-container>\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n              </ng-container>\r\n              <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\r\n              <!-- </div> -->\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n          class=\"span-img mt-15\">\r\n        <ng-container *ngIf=\"!apiLoading\">\r\n          <!-- mt-3 -->\r\n          <div class=\"d-flex gap-md-4\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [id]=\"data?.id\"\r\n            [class.flex-column]=\"screenWidth <= 475\">\r\n            <div class=\"w-50\" *ngIf=\"content?.image?.showImage\" [class.w-100]=\"screenWidth <= 475\">\r\n              <ng-container>\r\n                <img loading=\"lazy\" [src]=\"content?.image?.url\" alt=\"\" class=\"section-image w-100 h-100\"\r\n                  [simpoCorner]=\"styles?.corners\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\"\r\n                  [sectionId]=\"data?.id\" [class]=\"data?.id+(content?.image?.id || '')\" [id]=\"data?.id\"\r\n                  [simpoObjectPosition]=\"content?.image?.position\">\r\n              </ng-container>\r\n            </div>\r\n\r\n            <div class=\"product-parent position-relative\" [class.w-50]=\"content?.image?.showImage\"\r\n              [class.w-100]=\"!content?.image?.showImage || screenWidth <= 475\">\r\n\r\n              <!-- <ng-container *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n              <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow && responseData?.length\">\r\n                <mat-icon>keyboard_arrow_left</mat-icon>\r\n              </div>\r\n            </ng-container> -->\r\n              <div *ngIf=\"responseData && responseData?.length\" [simpoWrapContainer]=\"styles?.direction\" class=\"d-flex\"\r\n                #container>\r\n                <div\r\n                  *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n                  class=\"product\" [style.padding.px]=\"styles?.theme != theme.Theme1 ? '3' : ''\"\r\n                  [style.width.%]=\"styles?.theme != theme.Theme1 && isMobile && isRelatedProduct ? '48' : ''\"\r\n                  [style.minWidth]=\"applyProductWidth() ? getProductWidth() : ''\"\r\n                  [style.maxWidth]=\"applyProductWidth() ? getProductWidth() : ''\">\r\n                  <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n                    <ng-container *ngTemplateOutlet=\"ProductDes; context: {data: product, idx: idx}\"></ng-container>\r\n                  </ng-container>\r\n                  <div *ngIf=\"styles?.theme != theme.Theme1\">\r\n                    <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [index]=\"idx\"\r\n                      [isScrollable]=\"this.screenWidth > 475 || (this.screenWidth <= 475 && styles?.direction == 'ROW')\"></simpo-small-product-listing>\r\n                  </div>\r\n                </div>\r\n\r\n              </div>\r\n              <ng-container>\r\n                <div class=\"d-flex justify-content-end align-items-center w-100 py-3\">\r\n                  <div class=\"d-flex justify-content-between align-items-center mt-3 w-100\">\r\n                    <div class=\"d-flex align-items-center gap-3\" *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n                      <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"responseData?.length\">\r\n                        <mat-icon>keyboard_arrow_left</mat-icon>\r\n                      </div>\r\n                      <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"responseData?.length\">\r\n                        <mat-icon>keyboard_arrow_right</mat-icon>\r\n                      </div>\r\n                    </div>\r\n                    <button class=\"view-all-btn text-center mx-3\" simpoButtonDirective\r\n                      [id]=\"data?.id+(getBtnId(1) || '')\" [buttonStyle]=\"getBtnStyle(1)\"\r\n                      [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n                      [backgroundInfo]=\"styles?.background\" [sectionId]=\"data?.id\" [buttonData]=\"getBtnData(1)\"\r\n                      [buttonId]=\"getBtnId(1)\" (click)=\"redirectTo(getBtnData(1))\">{{viewAllButton?.content?.label ??\r\n                      'See All'}}</button>\r\n\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n      </div>\r\n      <ng-container *ngIf=\"styles?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n          [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n      </ng-container>\r\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n      </div>\r\n\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n\r\n<ng-template #VarientList let-product=\"data\">\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'\"\r\n        [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\r\n        [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n        [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n        (click)=\"selectVarient(product, varient)\">\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n    (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\"\r\n    (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #AddToCart let-product=\"data\">\r\n  <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\" [style.marginTop]=\"true ? '10px' : ''\">\r\n    <button simpoButtonDirective [id]=\"data?.id+(getBtnId(0) || '')\" [buttonStyle]=\"getBtnStyle(0)\"\r\n      [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\"\r\n      [sectionId]=\"data?.id\" [buttonId]=\"getBtnId(0)\"\r\n      *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n      (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to\r\n      Cart'}}</button>\r\n    <button simpoButtonDirective [id]=\"data?.id+(getBtnId(0) || '')\" [buttonStyle]=\"getBtnStyle(0)\"\r\n      [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\"\r\n      [sectionId]=\"data?.id\" [buttonId]=\"getBtnId(0)\"\r\n      *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && !IsEcommerce\" (click)=\"raiseLead()\">Notify\r\n      Me</button>\r\n    <div class=\"quantity full-width-quantity\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n      [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n      <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\r\n        [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n      <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n      <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\r\n        [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(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</ng-template>\r\n\r\n<ng-template #ProductPricing let-product=\"data\">\r\n  <div class=\"d-flex justify-content-between align-items-center\" [style.display]=\"true ? 'block!important' : ''\">\r\n    <div class=\"price body-large g-10\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\" [ngClass]=\"{\r\n        'text-left': stylesLayout?.align === 'left',\r\n        'text-right': stylesLayout?.align === 'right',\r\n        'text-center': stylesLayout?.align === 'center'\r\n      }\">\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=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice != product?.price?.value\" >\r\n        <span [innerHTML]='currency | sanitizeHtml'></span>\r\n        {{product.price.value}}</div> -->\r\n      <div class=\"d-flex gap-2\">\r\n        <span [innerHTML]='currency | sanitizeHtml'></span>\r\n        <ng-container>{{product.price.sellingPrice |\r\n          number:'1.0-0'}}</ng-container>\r\n        <span class=\"price\" *ngIf=\"product.price.value - product.price.discountedPrice > 10\"\r\n          [class.discount-price]=\"product.price.value - product.price.discountedPrice > 10\">\r\n          {{product.price.value}}\r\n        </span>\r\n      </div>\r\n    </div>\r\n    <ng-container>\r\n      <ng-container *ngTemplateOutlet=\"AddToCart; context: {data: product}\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductDes let-product=\"data\" let-idx=\"idx\">\r\n  <div (click)=\"proceedToProductDesc(product)\" class=\"position-relative box-shadow\"\r\n    [style.height.px]=\"isMobile ? (styles?.mobileColumn == 1 ? '480' : styles?.mobileColumn == 2 ? '230' : '110' ) : ''\">\r\n    <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n    <!-- <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n      [id]=\"'preview_'+idx\" [src]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" alt=\"\"\r\n      class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\"\r\n      (mouseleave)=\"product.prviewIdx = 0\"> -->\r\n    <image-loading [hash]=\"product.itemImages?.[product.prviewIdx]?.blurhash\" [index]=\"idx\"\r\n      [imageUrl]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" [theme]=\"styles?.theme\"></image-loading>\r\n\r\n  </div>\r\n  <div class=\"mt-15 w-100\">\r\n    <ng-container *ngTemplateOutlet=\"VarientList; context: {data: product}\"></ng-container>\r\n    <ng-container *ngTemplateOutlet=\"ProductPricing; context: {data: product}\"></ng-container>\r\n    <div class=\"product-name heading-large trim-text w-100\" [id]=\"data?.id\" (click)=\"proceedToProductDesc(product)\"\r\n      [simpoColor]=\"styles?.background?.color\">\r\n      {{product.name }}</div>\r\n  </div>\r\n</ng-template>\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>", styles: ["div[class*=arrow]{background-color:#fff;color:#000;padding:5px;border-radius:50%;position:sticky;height:fit-content;top:50%;display:flex;align-items:center;justify-content:center;z-index:101;cursor:pointer;box-shadow:#63636333 0 2px 8px}div[class*=arrow] .mat-icon{color:#000}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.left-arrow{left:2px}.right-arrow{right:2px}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.view-all-btn{padding:6px;width:15%!important;font-size:13px!important}.product{padding:10px;cursor:pointer;position:relative;display:flex;flex-direction:column}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:13px;line-height:26px;margin-bottom:5px;font-weight:500}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.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{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin-left:-40px}.them2-lisiting{min-width:195px;max-width:195px;margin-right:10px}.input-text{width:90%}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important}.view-all-btn{width:30%!important}.default-image img{height:250px}.out-of-stock{font-size:12px!important}.input-text{width:100%}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}.jc-space{justify-content:space-between}.align-end{align-items:end}.view-all{font-size:16px;font-weight:600;cursor:pointer}.box-shadow{box-shadow:#0000003d 0 3px 8px;border-radius:10px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.align-center{align-items:center}@media screen and (max-width: 475px){.product-name{font-size:14px}.product-parent{margin-top:unset!important}}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mb-5{margin-bottom:5px!important}.trim-text{text-align:inherit!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FeaturedProductsComponent, isStandalone: true, selector: "simpo-featured-products", inputs: { data: "data", responseData: "responseData", index: "index", isRelatedProduct: "isRelatedProduct", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, outputs: { changeDetailProduct: "changeDetailProduct" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<ng-container>\r\n  <section class=\"container-fluid total-container px-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [attr.style]=\"customClass\">\r\n    <div [spacingAround]=\"stylesLayout\" [simpoBorder]=\"styles?.border\" [id]=\"data?.id\" >\r\n      <div [id]=\"data?.id\" class=\"display-block\" #mainContainer\r\n        [simpoBackground]=\"styles?.background\" [simpoAnimation]=\"styles?.animation\"\r\n        [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\" [simpoCorner]=\"styles?.corners\">\r\n        <div class=\"d-flex flex-column w-100\" [id]=\"data?.id\"[simpoOverlay]=\"styles?.background\">\r\n          <div class=\"d-flex jc-space align-center content-side\">\r\n            <div class=\"input-text content-side\">\r\n              <div *ngFor=\"let item of content?.inputText\">\r\n                <ng-container>\r\n                  <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n            class=\"span-img mt-15\">\r\n          <ng-container *ngIf=\"!apiLoading\">\r\n            <div class=\"d-flex gap-md-4 flex-mob-column\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [id]=\"data?.id\">\r\n              <div class=\"w-50\" *ngIf=\"content?.image?.showImage\" [class.w-100]=\"screenWidth <= 475\">\r\n                <ng-container>\r\n                  <img loading=\"lazy\" [src]=\"content?.image?.url\" alt=\"\" [simpoImageDirective]=\"styles?.image\" class=\"section-image w-100 h-100\"\r\n                    [simpoCorner]=\"styles?.corners\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\"\r\n                    [sectionId]=\"data?.id\" [class]=\"data?.id+(content?.image?.id || '')\" [id]=\"data?.id\"\r\n                    [simpoObjectPosition]=\"content?.image?.position\">\r\n                </ng-container>\r\n              </div>\r\n  \r\n              <div class=\"product-parent position-relative\" [class.w-50]=\"content?.image?.showImage\"\r\n                [class.w-100]=\"!content?.image?.showImage || screenWidth <= 475\">\r\n                <div *ngIf=\"responseData && responseData?.length\" [simpoWrapContainer]=\"styles?.direction\" class=\"d-flex w-100\"\r\n                  #container>\r\n                  <div\r\n                    *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n                    class=\"product\" [style.padding.px]=\"styles?.theme != theme.Theme1 ? '3' : ''\"\r\n                    [style.width.%]=\"styles?.theme != theme.Theme1 && isMobile && isRelatedProduct ? '48' : ''\"\r\n                    [style.minWidth]=\"applyProductWidth() ? getProductWidth() : ''\"\r\n                    [style.maxWidth]=\"applyProductWidth() ? getProductWidth() : ''\">\r\n                    <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n                      <ng-container *ngTemplateOutlet=\"ProductDes; context: {data: product, idx: idx}\"></ng-container>\r\n                    </ng-container>\r\n                    <div *ngIf=\"styles?.theme != theme.Theme1\">\r\n                      <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [index]=\"idx\"\r\n                        [isScrollable]=\"this.screenWidth > 475 || (this.screenWidth <= 475 && styles?.direction == 'ROW')\"></simpo-small-product-listing>\r\n                    </div>\r\n                  </div>\r\n  \r\n                </div>\r\n                <ng-container>\r\n                  <div class=\"d-flex justify-content-end align-items-center w-100 py-3\">\r\n                    <div class=\"d-flex justify-content-between align-items-center mt-3 w-100\">\r\n                      <div class=\"d-flex align-items-center gap-3\" *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n                        <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"responseData?.length\">\r\n                          <mat-icon>keyboard_arrow_left</mat-icon>\r\n                        </div>\r\n                        <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"responseData?.length\">\r\n                          <mat-icon>keyboard_arrow_right</mat-icon>\r\n                        </div>\r\n                      </div>\r\n                      <button class=\"view-all-btn text-center mx-3\" simpoButtonDirective\r\n                        [id]=\"data?.id+(getBtnId(1) || '')\" [buttonStyle]=\"getBtnStyle(1)\"\r\n                        [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n                        [backgroundInfo]=\"styles?.background\" [sectionId]=\"data?.id\" [buttonData]=\"getBtnData(1)\"\r\n                        [buttonId]=\"getBtnId(1)\" (click)=\"redirectTo(getBtnData(1))\">{{viewAllButton?.content?.label ??\r\n                        'See All'}}</button>\r\n  \r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n          <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n        </div>\r\n      </div>\r\n      <ng-container *ngIf=\"styles?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n          [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n      </ng-container>\r\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n      </div>\r\n\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n\r\n<ng-template #VarientList let-product=\"data\">\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'\"\r\n        [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\r\n        [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n        [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n        (click)=\"selectVarient(product, varient)\">\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n    (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\"\r\n    (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #AddToCart let-product=\"data\">\r\n  <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\" [style.marginTop]=\"true ? '10px' : ''\">\r\n    <button simpoButtonDirective [id]=\"data?.id+(getBtnId(0) || '')\" [buttonStyle]=\"getBtnStyle(0)\"\r\n      [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\"\r\n      [sectionId]=\"data?.id\" [buttonId]=\"getBtnId(0)\"\r\n      *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n      (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to\r\n      Cart'}}</button>\r\n    <button simpoButtonDirective [id]=\"data?.id+(getBtnId(0) || '')\" [buttonStyle]=\"getBtnStyle(0)\"\r\n      [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\"\r\n      [sectionId]=\"data?.id\" [buttonId]=\"getBtnId(0)\"\r\n      *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && !IsEcommerce\" (click)=\"raiseLead()\">Notify\r\n      Me</button>\r\n    <div class=\"quantity full-width-quantity\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n      [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n      <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\r\n        [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n      <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n      <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\r\n        [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(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</ng-template>\r\n\r\n<ng-template #ProductPricing let-product=\"data\">\r\n  <div class=\"d-flex justify-content-between align-items-center\" [style.display]=\"true ? 'block!important' : ''\">\r\n    <div class=\"price body-large g-10\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\" [ngClass]=\"{\r\n        'text-left': stylesLayout?.align === 'left',\r\n        'text-right': stylesLayout?.align === 'right',\r\n        'text-center': stylesLayout?.align === 'center'\r\n      }\">\r\n      <div class=\"d-flex gap-2\">\r\n        <span [innerHTML]='currency | sanitizeHtml'></span>\r\n        <ng-container>{{product.price.sellingPrice |\r\n          number:'1.0-0'}}</ng-container>\r\n        <span class=\"price\" *ngIf=\"product.price.value - product.price.discountedPrice > 10\"\r\n          [class.discount-price]=\"product.price.value - product.price.discountedPrice > 10\">\r\n          {{product.price.value}}\r\n        </span>\r\n      </div>\r\n    </div>\r\n    <ng-container>\r\n      <ng-container *ngTemplateOutlet=\"AddToCart; context: {data: product}\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductDes let-product=\"data\" let-idx=\"idx\">\r\n  <div (click)=\"proceedToProductDesc(product)\" class=\"position-relative box-shadow\"\r\n    [style.height.px]=\"isMobile ? (styles?.mobileColumn == 1 ? '480' : styles?.mobileColumn == 2 ? '230' : '110' ) : ''\">\r\n    <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n    <image-loading [hash]=\"product.itemImages?.[product.prviewIdx]?.blurhash\" [index]=\"idx\"\r\n      [imageUrl]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" [theme]=\"styles?.theme\"></image-loading>\r\n  </div>\r\n  <div class=\"mt-15 w-100\">\r\n    <ng-container *ngTemplateOutlet=\"VarientList; context: {data: product}\"></ng-container>\r\n    <ng-container *ngTemplateOutlet=\"ProductPricing; context: {data: product}\"></ng-container>\r\n    <div class=\"product-name heading-large trim-text w-100\" [id]=\"data?.id\" (click)=\"proceedToProductDesc(product)\"\r\n      [simpoColor]=\"styles?.background?.color\">\r\n      {{product.name }}</div>\r\n  </div>\r\n</ng-template>\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>", styles: ["div[class*=arrow]{background-color:#fff;color:#000;padding:5px;border-radius:50%;position:sticky;height:fit-content;top:50%;display:flex;align-items:center;justify-content:center;z-index:101;cursor:pointer;box-shadow:#63636333 0 2px 8px}div[class*=arrow] .mat-icon{color:#000}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.left-arrow{left:2px}.right-arrow{right:2px}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.view-all-btn{padding:6px;width:15%!important;font-size:13px!important}.product{padding:10px;cursor:pointer;position:relative;display:flex;flex-direction:column}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:16px!important;line-height:26px;margin-bottom:5px;font-weight:500}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.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{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin-left:-40px}.them2-lisiting{min-width:195px;max-width:195px;margin-right:10px}.input-text{width:90%}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important}.view-all-btn{width:30%!important}.default-image img{height:250px}.out-of-stock{font-size:12px!important}.input-text{width:100%}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}.jc-space{justify-content:space-between}.align-end{align-items:end}.view-all{font-size:16px;font-weight:600;cursor:pointer}.box-shadow{box-shadow:#0000003d 0 3px 8px;border-radius:10px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.align-center{align-items:center}@media screen and (max-width: 475px){.product-name{font-size:14px}.product-parent{margin-top:unset!important}}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mb-5{margin-bottom:5px!important}.trim-text{text-align:inherit!important}@media screen and (max-width: 475px){.flex-mob-column{flex-direction:column!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: 
                 //directive
                 SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SimpoWrapComntainer, selector: "[simpoWrapContainer]", inputs: ["simpoWrapContainer"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: 
                 // MatBottomSheetModule,
-                ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass", "index"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }, { kind: "component", type: ImageLoadingComponent, selector: "image-loading", inputs: ["hash", "imageUrl", "index", "product", "theme"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }] }); }
+                ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass", "index"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }, { kind: "component", type: ImageLoadingComponent, selector: "image-loading", inputs: ["hash", "imageUrl", "index", "product", "theme"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeaturedProductsComponent, decorators: [{
             type: Component,
@@ -16938,8 +17032,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ImageDirectiveDirective,
                         SpacingAroundDirective,
                         ButtonEditorDirective,
-                        ObjectPositionDirective
-                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<ng-container>\r\n  <section class=\"container-fluid total-container px-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [attr.style]=\"customClass\">\r\n    <div [spacingAround]=\"stylesLayout\">\r\n      <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n        [simpoBackground]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [simpoAnimation]=\"styles?.animation\"\r\n        [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\" [simpoCorner]=\"styles?.corners\">\r\n        <div class=\"d-flex jc-space align-center content-side\">\r\n          <div class=\"input-text content-side\">\r\n            <div *ngFor=\"let item of content?.inputText\">\r\n              <ng-container>\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n              </ng-container>\r\n              <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\r\n              <!-- </div> -->\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n          class=\"span-img mt-15\">\r\n        <ng-container *ngIf=\"!apiLoading\">\r\n          <!-- mt-3 -->\r\n          <div class=\"d-flex gap-md-4\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [id]=\"data?.id\"\r\n            [class.flex-column]=\"screenWidth <= 475\">\r\n            <div class=\"w-50\" *ngIf=\"content?.image?.showImage\" [class.w-100]=\"screenWidth <= 475\">\r\n              <ng-container>\r\n                <img loading=\"lazy\" [src]=\"content?.image?.url\" alt=\"\" class=\"section-image w-100 h-100\"\r\n                  [simpoCorner]=\"styles?.corners\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\"\r\n                  [sectionId]=\"data?.id\" [class]=\"data?.id+(content?.image?.id || '')\" [id]=\"data?.id\"\r\n                  [simpoObjectPosition]=\"content?.image?.position\">\r\n              </ng-container>\r\n            </div>\r\n\r\n            <div class=\"product-parent position-relative\" [class.w-50]=\"content?.image?.showImage\"\r\n              [class.w-100]=\"!content?.image?.showImage || screenWidth <= 475\">\r\n\r\n              <!-- <ng-container *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n              <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow && responseData?.length\">\r\n                <mat-icon>keyboard_arrow_left</mat-icon>\r\n              </div>\r\n            </ng-container> -->\r\n              <div *ngIf=\"responseData && responseData?.length\" [simpoWrapContainer]=\"styles?.direction\" class=\"d-flex\"\r\n                #container>\r\n                <div\r\n                  *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n                  class=\"product\" [style.padding.px]=\"styles?.theme != theme.Theme1 ? '3' : ''\"\r\n                  [style.width.%]=\"styles?.theme != theme.Theme1 && isMobile && isRelatedProduct ? '48' : ''\"\r\n                  [style.minWidth]=\"applyProductWidth() ? getProductWidth() : ''\"\r\n                  [style.maxWidth]=\"applyProductWidth() ? getProductWidth() : ''\">\r\n                  <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n                    <ng-container *ngTemplateOutlet=\"ProductDes; context: {data: product, idx: idx}\"></ng-container>\r\n                  </ng-container>\r\n                  <div *ngIf=\"styles?.theme != theme.Theme1\">\r\n                    <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [index]=\"idx\"\r\n                      [isScrollable]=\"this.screenWidth > 475 || (this.screenWidth <= 475 && styles?.direction == 'ROW')\"></simpo-small-product-listing>\r\n                  </div>\r\n                </div>\r\n\r\n              </div>\r\n              <ng-container>\r\n                <div class=\"d-flex justify-content-end align-items-center w-100 py-3\">\r\n                  <div class=\"d-flex justify-content-between align-items-center mt-3 w-100\">\r\n                    <div class=\"d-flex align-items-center gap-3\" *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n                      <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"responseData?.length\">\r\n                        <mat-icon>keyboard_arrow_left</mat-icon>\r\n                      </div>\r\n                      <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"responseData?.length\">\r\n                        <mat-icon>keyboard_arrow_right</mat-icon>\r\n                      </div>\r\n                    </div>\r\n                    <button class=\"view-all-btn text-center mx-3\" simpoButtonDirective\r\n                      [id]=\"data?.id+(getBtnId(1) || '')\" [buttonStyle]=\"getBtnStyle(1)\"\r\n                      [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n                      [backgroundInfo]=\"styles?.background\" [sectionId]=\"data?.id\" [buttonData]=\"getBtnData(1)\"\r\n                      [buttonId]=\"getBtnId(1)\" (click)=\"redirectTo(getBtnData(1))\">{{viewAllButton?.content?.label ??\r\n                      'See All'}}</button>\r\n\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n      </div>\r\n      <ng-container *ngIf=\"styles?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n          [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n      </ng-container>\r\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n      </div>\r\n\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n\r\n<ng-template #VarientList let-product=\"data\">\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'\"\r\n        [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\r\n        [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n        [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n        (click)=\"selectVarient(product, varient)\">\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n    (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\"\r\n    (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #AddToCart let-product=\"data\">\r\n  <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\" [style.marginTop]=\"true ? '10px' : ''\">\r\n    <button simpoButtonDirective [id]=\"data?.id+(getBtnId(0) || '')\" [buttonStyle]=\"getBtnStyle(0)\"\r\n      [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\"\r\n      [sectionId]=\"data?.id\" [buttonId]=\"getBtnId(0)\"\r\n      *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n      (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to\r\n      Cart'}}</button>\r\n    <button simpoButtonDirective [id]=\"data?.id+(getBtnId(0) || '')\" [buttonStyle]=\"getBtnStyle(0)\"\r\n      [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\"\r\n      [sectionId]=\"data?.id\" [buttonId]=\"getBtnId(0)\"\r\n      *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && !IsEcommerce\" (click)=\"raiseLead()\">Notify\r\n      Me</button>\r\n    <div class=\"quantity full-width-quantity\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n      [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n      <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\r\n        [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n      <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n      <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\r\n        [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(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</ng-template>\r\n\r\n<ng-template #ProductPricing let-product=\"data\">\r\n  <div class=\"d-flex justify-content-between align-items-center\" [style.display]=\"true ? 'block!important' : ''\">\r\n    <div class=\"price body-large g-10\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\" [ngClass]=\"{\r\n        'text-left': stylesLayout?.align === 'left',\r\n        'text-right': stylesLayout?.align === 'right',\r\n        'text-center': stylesLayout?.align === 'center'\r\n      }\">\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=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice != product?.price?.value\" >\r\n        <span [innerHTML]='currency | sanitizeHtml'></span>\r\n        {{product.price.value}}</div> -->\r\n      <div class=\"d-flex gap-2\">\r\n        <span [innerHTML]='currency | sanitizeHtml'></span>\r\n        <ng-container>{{product.price.sellingPrice |\r\n          number:'1.0-0'}}</ng-container>\r\n        <span class=\"price\" *ngIf=\"product.price.value - product.price.discountedPrice > 10\"\r\n          [class.discount-price]=\"product.price.value - product.price.discountedPrice > 10\">\r\n          {{product.price.value}}\r\n        </span>\r\n      </div>\r\n    </div>\r\n    <ng-container>\r\n      <ng-container *ngTemplateOutlet=\"AddToCart; context: {data: product}\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductDes let-product=\"data\" let-idx=\"idx\">\r\n  <div (click)=\"proceedToProductDesc(product)\" class=\"position-relative box-shadow\"\r\n    [style.height.px]=\"isMobile ? (styles?.mobileColumn == 1 ? '480' : styles?.mobileColumn == 2 ? '230' : '110' ) : ''\">\r\n    <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n    <!-- <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n      [id]=\"'preview_'+idx\" [src]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" alt=\"\"\r\n      class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\"\r\n      (mouseleave)=\"product.prviewIdx = 0\"> -->\r\n    <image-loading [hash]=\"product.itemImages?.[product.prviewIdx]?.blurhash\" [index]=\"idx\"\r\n      [imageUrl]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" [theme]=\"styles?.theme\"></image-loading>\r\n\r\n  </div>\r\n  <div class=\"mt-15 w-100\">\r\n    <ng-container *ngTemplateOutlet=\"VarientList; context: {data: product}\"></ng-container>\r\n    <ng-container *ngTemplateOutlet=\"ProductPricing; context: {data: product}\"></ng-container>\r\n    <div class=\"product-name heading-large trim-text w-100\" [id]=\"data?.id\" (click)=\"proceedToProductDesc(product)\"\r\n      [simpoColor]=\"styles?.background?.color\">\r\n      {{product.name }}</div>\r\n  </div>\r\n</ng-template>\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>", styles: ["div[class*=arrow]{background-color:#fff;color:#000;padding:5px;border-radius:50%;position:sticky;height:fit-content;top:50%;display:flex;align-items:center;justify-content:center;z-index:101;cursor:pointer;box-shadow:#63636333 0 2px 8px}div[class*=arrow] .mat-icon{color:#000}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.left-arrow{left:2px}.right-arrow{right:2px}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.view-all-btn{padding:6px;width:15%!important;font-size:13px!important}.product{padding:10px;cursor:pointer;position:relative;display:flex;flex-direction:column}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:13px;line-height:26px;margin-bottom:5px;font-weight:500}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.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{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin-left:-40px}.them2-lisiting{min-width:195px;max-width:195px;margin-right:10px}.input-text{width:90%}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important}.view-all-btn{width:30%!important}.default-image img{height:250px}.out-of-stock{font-size:12px!important}.input-text{width:100%}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}.jc-space{justify-content:space-between}.align-end{align-items:end}.view-all{font-size:16px;font-weight:600;cursor:pointer}.box-shadow{box-shadow:#0000003d 0 3px 8px;border-radius:10px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.align-center{align-items:center}@media screen and (max-width: 475px){.product-name{font-size:14px}.product-parent{margin-top:unset!important}}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mb-5{margin-bottom:5px!important}.trim-text{text-align:inherit!important}\n"] }]
+                        ObjectPositionDirective,
+                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<ng-container>\r\n  <section class=\"container-fluid total-container px-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [attr.style]=\"customClass\">\r\n    <div [spacingAround]=\"stylesLayout\" [simpoBorder]=\"styles?.border\" [id]=\"data?.id\" >\r\n      <div [id]=\"data?.id\" class=\"display-block\" #mainContainer\r\n        [simpoBackground]=\"styles?.background\" [simpoAnimation]=\"styles?.animation\"\r\n        [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\" [simpoCorner]=\"styles?.corners\">\r\n        <div class=\"d-flex flex-column w-100\" [id]=\"data?.id\"[simpoOverlay]=\"styles?.background\">\r\n          <div class=\"d-flex jc-space align-center content-side\">\r\n            <div class=\"input-text content-side\">\r\n              <div *ngFor=\"let item of content?.inputText\">\r\n                <ng-container>\r\n                  <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n            class=\"span-img mt-15\">\r\n          <ng-container *ngIf=\"!apiLoading\">\r\n            <div class=\"d-flex gap-md-4 flex-mob-column\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [id]=\"data?.id\">\r\n              <div class=\"w-50\" *ngIf=\"content?.image?.showImage\" [class.w-100]=\"screenWidth <= 475\">\r\n                <ng-container>\r\n                  <img loading=\"lazy\" [src]=\"content?.image?.url\" alt=\"\" [simpoImageDirective]=\"styles?.image\" class=\"section-image w-100 h-100\"\r\n                    [simpoCorner]=\"styles?.corners\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\"\r\n                    [sectionId]=\"data?.id\" [class]=\"data?.id+(content?.image?.id || '')\" [id]=\"data?.id\"\r\n                    [simpoObjectPosition]=\"content?.image?.position\">\r\n                </ng-container>\r\n              </div>\r\n  \r\n              <div class=\"product-parent position-relative\" [class.w-50]=\"content?.image?.showImage\"\r\n                [class.w-100]=\"!content?.image?.showImage || screenWidth <= 475\">\r\n                <div *ngIf=\"responseData && responseData?.length\" [simpoWrapContainer]=\"styles?.direction\" class=\"d-flex w-100\"\r\n                  #container>\r\n                  <div\r\n                    *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n                    class=\"product\" [style.padding.px]=\"styles?.theme != theme.Theme1 ? '3' : ''\"\r\n                    [style.width.%]=\"styles?.theme != theme.Theme1 && isMobile && isRelatedProduct ? '48' : ''\"\r\n                    [style.minWidth]=\"applyProductWidth() ? getProductWidth() : ''\"\r\n                    [style.maxWidth]=\"applyProductWidth() ? getProductWidth() : ''\">\r\n                    <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n                      <ng-container *ngTemplateOutlet=\"ProductDes; context: {data: product, idx: idx}\"></ng-container>\r\n                    </ng-container>\r\n                    <div *ngIf=\"styles?.theme != theme.Theme1\">\r\n                      <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [index]=\"idx\"\r\n                        [isScrollable]=\"this.screenWidth > 475 || (this.screenWidth <= 475 && styles?.direction == 'ROW')\"></simpo-small-product-listing>\r\n                    </div>\r\n                  </div>\r\n  \r\n                </div>\r\n                <ng-container>\r\n                  <div class=\"d-flex justify-content-end align-items-center w-100 py-3\">\r\n                    <div class=\"d-flex justify-content-between align-items-center mt-3 w-100\">\r\n                      <div class=\"d-flex align-items-center gap-3\" *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n                        <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"responseData?.length\">\r\n                          <mat-icon>keyboard_arrow_left</mat-icon>\r\n                        </div>\r\n                        <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"responseData?.length\">\r\n                          <mat-icon>keyboard_arrow_right</mat-icon>\r\n                        </div>\r\n                      </div>\r\n                      <button class=\"view-all-btn text-center mx-3\" simpoButtonDirective\r\n                        [id]=\"data?.id+(getBtnId(1) || '')\" [buttonStyle]=\"getBtnStyle(1)\"\r\n                        [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n                        [backgroundInfo]=\"styles?.background\" [sectionId]=\"data?.id\" [buttonData]=\"getBtnData(1)\"\r\n                        [buttonId]=\"getBtnId(1)\" (click)=\"redirectTo(getBtnData(1))\">{{viewAllButton?.content?.label ??\r\n                        'See All'}}</button>\r\n  \r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n          <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n        </div>\r\n      </div>\r\n      <ng-container *ngIf=\"styles?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n          [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n      </ng-container>\r\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n      </div>\r\n\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n\r\n<ng-template #VarientList let-product=\"data\">\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'\"\r\n        [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\r\n        [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n        [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n        (click)=\"selectVarient(product, varient)\">\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n    (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\"\r\n    (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #AddToCart let-product=\"data\">\r\n  <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\" [style.marginTop]=\"true ? '10px' : ''\">\r\n    <button simpoButtonDirective [id]=\"data?.id+(getBtnId(0) || '')\" [buttonStyle]=\"getBtnStyle(0)\"\r\n      [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\"\r\n      [sectionId]=\"data?.id\" [buttonId]=\"getBtnId(0)\"\r\n      *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n      (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to\r\n      Cart'}}</button>\r\n    <button simpoButtonDirective [id]=\"data?.id+(getBtnId(0) || '')\" [buttonStyle]=\"getBtnStyle(0)\"\r\n      [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\"\r\n      [sectionId]=\"data?.id\" [buttonId]=\"getBtnId(0)\"\r\n      *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && !IsEcommerce\" (click)=\"raiseLead()\">Notify\r\n      Me</button>\r\n    <div class=\"quantity full-width-quantity\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n      [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n      <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\r\n        [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n      <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n      <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\r\n        [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(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</ng-template>\r\n\r\n<ng-template #ProductPricing let-product=\"data\">\r\n  <div class=\"d-flex justify-content-between align-items-center\" [style.display]=\"true ? 'block!important' : ''\">\r\n    <div class=\"price body-large g-10\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\" [ngClass]=\"{\r\n        'text-left': stylesLayout?.align === 'left',\r\n        'text-right': stylesLayout?.align === 'right',\r\n        'text-center': stylesLayout?.align === 'center'\r\n      }\">\r\n      <div class=\"d-flex gap-2\">\r\n        <span [innerHTML]='currency | sanitizeHtml'></span>\r\n        <ng-container>{{product.price.sellingPrice |\r\n          number:'1.0-0'}}</ng-container>\r\n        <span class=\"price\" *ngIf=\"product.price.value - product.price.discountedPrice > 10\"\r\n          [class.discount-price]=\"product.price.value - product.price.discountedPrice > 10\">\r\n          {{product.price.value}}\r\n        </span>\r\n      </div>\r\n    </div>\r\n    <ng-container>\r\n      <ng-container *ngTemplateOutlet=\"AddToCart; context: {data: product}\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductDes let-product=\"data\" let-idx=\"idx\">\r\n  <div (click)=\"proceedToProductDesc(product)\" class=\"position-relative box-shadow\"\r\n    [style.height.px]=\"isMobile ? (styles?.mobileColumn == 1 ? '480' : styles?.mobileColumn == 2 ? '230' : '110' ) : ''\">\r\n    <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n    <image-loading [hash]=\"product.itemImages?.[product.prviewIdx]?.blurhash\" [index]=\"idx\"\r\n      [imageUrl]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" [theme]=\"styles?.theme\"></image-loading>\r\n  </div>\r\n  <div class=\"mt-15 w-100\">\r\n    <ng-container *ngTemplateOutlet=\"VarientList; context: {data: product}\"></ng-container>\r\n    <ng-container *ngTemplateOutlet=\"ProductPricing; context: {data: product}\"></ng-container>\r\n    <div class=\"product-name heading-large trim-text w-100\" [id]=\"data?.id\" (click)=\"proceedToProductDesc(product)\"\r\n      [simpoColor]=\"styles?.background?.color\">\r\n      {{product.name }}</div>\r\n  </div>\r\n</ng-template>\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>", styles: ["div[class*=arrow]{background-color:#fff;color:#000;padding:5px;border-radius:50%;position:sticky;height:fit-content;top:50%;display:flex;align-items:center;justify-content:center;z-index:101;cursor:pointer;box-shadow:#63636333 0 2px 8px}div[class*=arrow] .mat-icon{color:#000}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.left-arrow{left:2px}.right-arrow{right:2px}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.view-all-btn{padding:6px;width:15%!important;font-size:13px!important}.product{padding:10px;cursor:pointer;position:relative;display:flex;flex-direction:column}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:16px!important;line-height:26px;margin-bottom:5px;font-weight:500}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.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{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin-left:-40px}.them2-lisiting{min-width:195px;max-width:195px;margin-right:10px}.input-text{width:90%}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important}.view-all-btn{width:30%!important}.default-image img{height:250px}.out-of-stock{font-size:12px!important}.input-text{width:100%}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}.jc-space{justify-content:space-between}.align-end{align-items:end}.view-all{font-size:16px;font-weight:600;cursor:pointer}.box-shadow{box-shadow:#0000003d 0 3px 8px;border-radius:10px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.align-center{align-items:center}@media screen and (max-width: 475px){.product-name{font-size:14px}.product-parent{margin-top:unset!important}}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mb-5{margin-bottom:5px!important}.trim-text{text-align:inherit!important}@media screen and (max-width: 475px){.flex-mob-column{flex-direction:column!important}}\n"] }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -17025,9 +17119,9 @@ class FeaturedCategoryComponent extends BaseSection {
         return window.innerWidth <= 475;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeaturedCategoryComponent, deps: [{ token: PLATFORM_ID }, { token: i2$2.Router }, { token: RestService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FeaturedCategoryComponent, isStandalone: true, selector: "simpo-featured-category", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container p-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [attr.style]=\"customClass\" [simpoLayout]=\"styles?.layout\">\r\n    <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\">\r\n      <div [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoAnimation]=\"styles?.animation\"\r\n        [spacingHorizontal]=\"stylesLayout\" [simpoBackground]=\"styles?.background\" [simpoCorner]=\"styles?.corners\">\r\n        <div *ngFor=\"let item of content?.inputText\">\r\n          <!-- <div  class = \"content-side\"[innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\r\n          <ng-container *ngIf=\"edit || item.value\">\r\n            <div class=\"pt-3 w-100\">\r\n              <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <!-- </div> -->\r\n        </div>\r\n        <div>\r\n          <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n            class=\"span-img mt-15\">\r\n        </div>\r\n        <div class=\"category-parent\" [ngClass]=\"{'flex-wrap': getDirection == 'ROW'}\"\r\n          [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\" [style.justifyContent]=\"!isMobile ? styles?.layout?.align : ''\">\r\n          <div\r\n            *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n            (click)=\"redirectToListPage(data)\">\r\n            <img [style.borderRadius.px]=\"(styles?.border?.radius ?? 1) / (isMobile ? 2 : 1)\"\r\n              [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n              [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\" loading=\"lazy\"\r\n              onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n              [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n              class=\"category-image\">\r\n            <div class=\"category-name body-large\" *ngIf=\"content?.display?.showHeading\">{{data.categoryName}}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n\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>", styles: [".mt-15{margin-top:15px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.total-container{height:fit-content!important;position:relative;display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.category-parent{padding:25px 0% 2%;display:flex;width:100%;max-width:100%;gap:25px;overflow-x:scroll;cursor:pointer}.category-image{display:flex;flex-wrap:wrap;margin-bottom:15px;transition-duration:.3s;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out}.category-image:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important;padding-top:5px!important;padding-bottom:5px!important}.category-image{height:100px;width:100px}.header{gap:7px}.category-parent{gap:8px;margin-top:15px;padding-left:0!important;padding-right:0!important;padding-top:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FeaturedCategoryComponent, isStandalone: true, selector: "simpo-featured-category", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container p-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [attr.style]=\"customClass\">\r\n    <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\" class=\"border-radius-unset\">\r\n      <div [id]=\"data?.id\" #mainContainer   [simpoAnimation]=\"styles?.animation\"\r\n        [simpoBackground]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" class=\"d-flex w-100\">\r\n        <div class=\"d-flex flex-column w-100\" [simpoOverlay]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n          <div *ngFor=\"let item of content?.inputText\">\r\n            <!-- <div  class = \"content-side\"[innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\r\n            <ng-container *ngIf=\"edit || item.value\">\r\n              <div class=\"pt-3 w-100\">\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n              </div>\r\n            </ng-container>\r\n  \r\n            <!-- </div> -->\r\n          </div>\r\n          <div class=\"category-parent\" [ngClass]=\"{'flex-wrap': getDirection == 'COLUMN'}\"\r\n            [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\" [style.justifyContent]=\"!isMobile ? styles?.layout?.align : ''\">\r\n            <div\r\n              *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n              (click)=\"redirectToListPage(data)\" class=\"hovering-effect\" [ngClass]=\"{ 'w-48 d-flex flex-column align-items-center' : isMobile}\">\r\n              <img [style.borderRadius.px]=\"(styles?.border?.radius ?? 1) / (isMobile ? 2 : 1)\"\r\n                [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\" loading=\"lazy\"\r\n                onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n                class=\"category-image\" [ngClass]=\"{'category-new-image' : isMobile && getDirection == 'COLUMN'}\">\r\n              <div *ngIf=\"content?.display?.showHeading\">{{data.categoryName}}</div>\r\n              <!-- class=\"category-name body-large\"  -->\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n\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>", styles: [".mt-15{margin-top:15px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.total-container{height:fit-content!important;position:relative;display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.category-parent{padding:25px 0% 2%;display:flex;width:100%;max-width:100%;gap:25px;overflow-x:scroll;font-size:16px!important;cursor:pointer}.hovering-effect:hover{font-size:22px!important}.category-image{display:flex;flex-wrap:wrap;margin-bottom:15px;transition-duration:.3s;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out}.category-image:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}.border-radius-unset{border-radius:unset!important}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important;padding-top:5px!important;padding-bottom:5px!important}.w-48{width:48%!important}.category-new-image{height:150px!important;width:100%!important}.header{gap:7px}.category-parent{gap:8px;margin-top:15px;padding-left:0!important;padding-right:0!important;padding-top:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: 
                 //directive
-                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }] }); }
+                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeaturedCategoryComponent, decorators: [{
             type: Component,
@@ -17049,7 +17143,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SvgDividerComponent,
                         TextEditorComponent,
                         SpacingAroundDirective,
-                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container p-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [attr.style]=\"customClass\" [simpoLayout]=\"styles?.layout\">\r\n    <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\">\r\n      <div [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoAnimation]=\"styles?.animation\"\r\n        [spacingHorizontal]=\"stylesLayout\" [simpoBackground]=\"styles?.background\" [simpoCorner]=\"styles?.corners\">\r\n        <div *ngFor=\"let item of content?.inputText\">\r\n          <!-- <div  class = \"content-side\"[innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\r\n          <ng-container *ngIf=\"edit || item.value\">\r\n            <div class=\"pt-3 w-100\">\r\n              <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <!-- </div> -->\r\n        </div>\r\n        <div>\r\n          <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n            class=\"span-img mt-15\">\r\n        </div>\r\n        <div class=\"category-parent\" [ngClass]=\"{'flex-wrap': getDirection == 'ROW'}\"\r\n          [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\" [style.justifyContent]=\"!isMobile ? styles?.layout?.align : ''\">\r\n          <div\r\n            *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n            (click)=\"redirectToListPage(data)\">\r\n            <img [style.borderRadius.px]=\"(styles?.border?.radius ?? 1) / (isMobile ? 2 : 1)\"\r\n              [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n              [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\" loading=\"lazy\"\r\n              onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n              [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n              class=\"category-image\">\r\n            <div class=\"category-name body-large\" *ngIf=\"content?.display?.showHeading\">{{data.categoryName}}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n\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>", styles: [".mt-15{margin-top:15px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.total-container{height:fit-content!important;position:relative;display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.category-parent{padding:25px 0% 2%;display:flex;width:100%;max-width:100%;gap:25px;overflow-x:scroll;cursor:pointer}.category-image{display:flex;flex-wrap:wrap;margin-bottom:15px;transition-duration:.3s;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out}.category-image:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important;padding-top:5px!important;padding-bottom:5px!important}.category-image{height:100px;width:100px}.header{gap:7px}.category-parent{gap:8px;margin-top:15px;padding-left:0!important;padding-right:0!important;padding-top:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"] }]
+                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container p-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [attr.style]=\"customClass\">\r\n    <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\" class=\"border-radius-unset\">\r\n      <div [id]=\"data?.id\" #mainContainer   [simpoAnimation]=\"styles?.animation\"\r\n        [simpoBackground]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" class=\"d-flex w-100\">\r\n        <div class=\"d-flex flex-column w-100\" [simpoOverlay]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n          <div *ngFor=\"let item of content?.inputText\">\r\n            <!-- <div  class = \"content-side\"[innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\r\n            <ng-container *ngIf=\"edit || item.value\">\r\n              <div class=\"pt-3 w-100\">\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n              </div>\r\n            </ng-container>\r\n  \r\n            <!-- </div> -->\r\n          </div>\r\n          <div class=\"category-parent\" [ngClass]=\"{'flex-wrap': getDirection == 'COLUMN'}\"\r\n            [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\" [style.justifyContent]=\"!isMobile ? styles?.layout?.align : ''\">\r\n            <div\r\n              *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n              (click)=\"redirectToListPage(data)\" class=\"hovering-effect\" [ngClass]=\"{ 'w-48 d-flex flex-column align-items-center' : isMobile}\">\r\n              <img [style.borderRadius.px]=\"(styles?.border?.radius ?? 1) / (isMobile ? 2 : 1)\"\r\n                [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\" loading=\"lazy\"\r\n                onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n                class=\"category-image\" [ngClass]=\"{'category-new-image' : isMobile && getDirection == 'COLUMN'}\">\r\n              <div *ngIf=\"content?.display?.showHeading\">{{data.categoryName}}</div>\r\n              <!-- class=\"category-name body-large\"  -->\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n\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>", styles: [".mt-15{margin-top:15px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.total-container{height:fit-content!important;position:relative;display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.category-parent{padding:25px 0% 2%;display:flex;width:100%;max-width:100%;gap:25px;overflow-x:scroll;font-size:16px!important;cursor:pointer}.hovering-effect:hover{font-size:22px!important}.category-image{display:flex;flex-wrap:wrap;margin-bottom:15px;transition-duration:.3s;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out}.category-image:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}.border-radius-unset{border-radius:unset!important}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important;padding-top:5px!important;padding-bottom:5px!important}.w-48{width:48%!important}.category-new-image{height:150px!important;width:100%!important}.header{gap:7px}.category-parent{gap:8px;margin-top:15px;padding-left:0!important;padding-right:0!important;padding-top:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"] }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -21484,9 +21578,9 @@ class FeaturedCollectionComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeaturedCollectionComponent, deps: [{ token: i2$2.Router }, { token: RestService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FeaturedCollectionComponent, isStandalone: true, selector: "simpo-featured-collection", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container p-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [attr.style]=\"customClass\" [simpoLayout]=\"styles?.layout\">\r\n    <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\">\r\n      <div [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoAnimation]=\"styles?.animation\"\r\n        [spacingHorizontal]=\"stylesLayout\" [simpoBackground]=\"styles?.background\" [simpoCorner]=\"styles?.corners\">\r\n        <div *ngFor=\"let item of content?.inputText\">\r\n          <!-- <div  class = \"content-side\"[innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\r\n          <ng-container *ngIf=\"edit || item.value\">\r\n            <div class=\"pt-3 w-100\">\r\n              <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <!-- </div> -->\r\n        </div>\r\n        <div>\r\n          <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n            class=\"span-img mt-15\">\r\n        </div>\r\n        <div class=\"category-parent\" [ngClass]=\"{'flex-wrap': getDirection == 'ROW'}\"\r\n          [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\" [style.justifyContent]=\"!isMobile ? styles?.layout?.align : ''\">\r\n          <div\r\n            *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n            (click)=\"redirectToListPage(data)\">\r\n            <img [style.borderRadius.px]=\"(styles?.border?.radius ?? 1) / (isMobile ? 2 : 1)\"\r\n              [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n              [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\" loading=\"lazy\"\r\n              onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n              [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n              class=\"category-image\">\r\n            <div class=\"category-name body-large\" *ngIf=\"content?.display?.showHeading\">{{data.categoryName}}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n\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>", styles: [".mt-15{margin-top:15px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.total-container{height:fit-content!important;position:relative;display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.category-parent{padding:25px 0% 2%;display:flex;width:100%;max-width:100%;gap:25px;overflow-x:scroll;cursor:pointer}.category-image{display:flex;flex-wrap:wrap;margin-bottom:15px;transition-duration:.3s;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out}.category-image:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important;padding-top:5px!important;padding-bottom:5px!important}.category-image{height:100px;width:100px}.header{gap:7px}.category-parent{gap:8px;margin-top:15px;padding-left:0!important;padding-right:0!important;padding-top:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FeaturedCollectionComponent, isStandalone: true, selector: "simpo-featured-collection", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container p-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [attr.style]=\"customClass\">\r\n    <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\" class=\"border-radius-unset\">\r\n      <div [id]=\"data?.id\" #mainContainer   [simpoAnimation]=\"styles?.animation\"\r\n        [simpoBackground]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" class=\"d-flex w-100\">\r\n        <div class=\"d-flex flex-column w-100\" [simpoOverlay]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n          <div *ngFor=\"let item of content?.inputText\">\r\n            <!-- <div  class = \"content-side\"[innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\r\n            <ng-container *ngIf=\"edit || item.value\">\r\n              <div class=\"pt-3 w-100\">\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n              </div>\r\n            </ng-container>\r\n  \r\n            <!-- </div> -->\r\n          </div>\r\n          <div class=\"category-parent\" [ngClass]=\"{'flex-wrap': getDirection == 'COLUMN'}\"\r\n            [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\" [style.justifyContent]=\"!isMobile ? styles?.layout?.align : ''\">\r\n            <div\r\n              *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n              (click)=\"redirectToListPage(data)\" class=\"hovering-effect\" [ngClass]=\"{ 'w-48 d-flex flex-column align-items-center' : isMobile}\">\r\n              <img [style.borderRadius.px]=\"(styles?.border?.radius ?? 1) / (isMobile ? 2 : 1)\"\r\n                [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\" loading=\"lazy\"\r\n                onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n                class=\"category-image\" [ngClass]=\"{'category-new-image' : isMobile && getDirection == 'COLUMN'}\">\r\n              <div *ngIf=\"content?.display?.showHeading\">{{data.categoryName}}</div>\r\n              <!-- class=\"category-name body-large\"  -->\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n\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>", styles: [".mt-15{margin-top:15px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.total-container{height:fit-content!important;position:relative;display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.category-parent{padding:25px 0% 2%;display:flex;width:100%;max-width:100%;gap:25px;overflow-x:scroll;font-size:16px!important;cursor:pointer}.hovering-effect:hover{font-size:22px!important}.category-image{display:flex;flex-wrap:wrap;margin-bottom:15px;transition-duration:.3s;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out}.category-image:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}.border-radius-unset{border-radius:unset!important}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important;padding-top:5px!important;padding-bottom:5px!important}.w-48{width:48%!important}.category-new-image{height:150px!important;width:100%!important}.header{gap:7px}.category-parent{gap:8px;margin-top:15px;padding-left:0!important;padding-right:0!important;padding-top:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: 
                 //directive
-                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }] }); }
+                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeaturedCollectionComponent, decorators: [{
             type: Component,
@@ -21509,7 +21603,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SanitizeHtmlPipe, SvgDividerComponent,
                         TextEditorComponent,
                         SpacingAroundDirective,
-                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container p-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [attr.style]=\"customClass\" [simpoLayout]=\"styles?.layout\">\r\n    <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\">\r\n      <div [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoAnimation]=\"styles?.animation\"\r\n        [spacingHorizontal]=\"stylesLayout\" [simpoBackground]=\"styles?.background\" [simpoCorner]=\"styles?.corners\">\r\n        <div *ngFor=\"let item of content?.inputText\">\r\n          <!-- <div  class = \"content-side\"[innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\r\n          <ng-container *ngIf=\"edit || item.value\">\r\n            <div class=\"pt-3 w-100\">\r\n              <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <!-- </div> -->\r\n        </div>\r\n        <div>\r\n          <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n            class=\"span-img mt-15\">\r\n        </div>\r\n        <div class=\"category-parent\" [ngClass]=\"{'flex-wrap': getDirection == 'ROW'}\"\r\n          [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\" [style.justifyContent]=\"!isMobile ? styles?.layout?.align : ''\">\r\n          <div\r\n            *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n            (click)=\"redirectToListPage(data)\">\r\n            <img [style.borderRadius.px]=\"(styles?.border?.radius ?? 1) / (isMobile ? 2 : 1)\"\r\n              [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n              [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\" loading=\"lazy\"\r\n              onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n              [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n              class=\"category-image\">\r\n            <div class=\"category-name body-large\" *ngIf=\"content?.display?.showHeading\">{{data.categoryName}}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n\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>", styles: [".mt-15{margin-top:15px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.total-container{height:fit-content!important;position:relative;display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.category-parent{padding:25px 0% 2%;display:flex;width:100%;max-width:100%;gap:25px;overflow-x:scroll;cursor:pointer}.category-image{display:flex;flex-wrap:wrap;margin-bottom:15px;transition-duration:.3s;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out}.category-image:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important;padding-top:5px!important;padding-bottom:5px!important}.category-image{height:100px;width:100px}.header{gap:7px}.category-parent{gap:8px;margin-top:15px;padding-left:0!important;padding-right:0!important;padding-top:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"] }]
+                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container p-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [attr.style]=\"customClass\">\r\n    <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\" class=\"border-radius-unset\">\r\n      <div [id]=\"data?.id\" #mainContainer   [simpoAnimation]=\"styles?.animation\"\r\n        [simpoBackground]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" class=\"d-flex w-100\">\r\n        <div class=\"d-flex flex-column w-100\" [simpoOverlay]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n          <div *ngFor=\"let item of content?.inputText\">\r\n            <!-- <div  class = \"content-side\"[innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\r\n            <ng-container *ngIf=\"edit || item.value\">\r\n              <div class=\"pt-3 w-100\">\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n              </div>\r\n            </ng-container>\r\n  \r\n            <!-- </div> -->\r\n          </div>\r\n          <div class=\"category-parent\" [ngClass]=\"{'flex-wrap': getDirection == 'COLUMN'}\"\r\n            [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\" [style.justifyContent]=\"!isMobile ? styles?.layout?.align : ''\">\r\n            <div\r\n              *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n              (click)=\"redirectToListPage(data)\" class=\"hovering-effect\" [ngClass]=\"{ 'w-48 d-flex flex-column align-items-center' : isMobile}\">\r\n              <img [style.borderRadius.px]=\"(styles?.border?.radius ?? 1) / (isMobile ? 2 : 1)\"\r\n                [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\" loading=\"lazy\"\r\n                onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n                class=\"category-image\" [ngClass]=\"{'category-new-image' : isMobile && getDirection == 'COLUMN'}\">\r\n              <div *ngIf=\"content?.display?.showHeading\">{{data.categoryName}}</div>\r\n              <!-- class=\"category-name body-large\"  -->\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n\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>", styles: [".mt-15{margin-top:15px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.total-container{height:fit-content!important;position:relative;display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.category-parent{padding:25px 0% 2%;display:flex;width:100%;max-width:100%;gap:25px;overflow-x:scroll;font-size:16px!important;cursor:pointer}.hovering-effect:hover{font-size:22px!important}.category-image{display:flex;flex-wrap:wrap;margin-bottom:15px;transition-duration:.3s;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out}.category-image:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}.border-radius-unset{border-radius:unset!important}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important;padding-top:5px!important;padding-bottom:5px!important}.w-48{width:48%!important}.category-new-image{height:150px!important;width:100%!important}.header{gap:7px}.category-parent{gap:8px;margin-top:15px;padding-left:0!important;padding-right:0!important;padding-top:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"] }]
         }], ctorParameters: () => [{ type: i2$2.Router }, { type: RestService }, { type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], responseData: [{
@@ -21599,9 +21693,9 @@ class NewCollectionComponent extends BaseSection {
         return brightness > threshold ? '#000000' : '#ffffff';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewCollectionComponent, deps: [{ token: i2$2.Router }, { token: RestService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NewCollectionComponent, isStandalone: true, selector: "simpo-new-collection", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n    <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\">\r\n      <div [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoAnimation]=\"styles?.animation\"\r\n        [spacingHorizontal]=\"stylesLayout\" [simpoBackground]=\"styles?.background\" [simpoCorner]=\"styles?.corners\">\r\n        <div *ngFor=\"let item of content?.inputText\">\r\n          <!-- <div  class = \"content-side\"[innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\r\n          <ng-container *ngIf=\"edit || item.value\">\r\n            <div class=\"pt-3 w-100\">\r\n              <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <!-- </div> -->\r\n        </div>\r\n        <div>\r\n          <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n            class=\"span-img mt-15\">\r\n        </div>\r\n        <div class=\"category-parent\" [ngClass]=\"{'flex-wrap': getDirection == 'ROW'}\"\r\n          [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\"\r\n          [style.justifyContent]=\"!isMobile ? styles?.layout?.align : ''\">\r\n          <div *ngFor=\"let data of responseData; let idx = index\" (click)=\"redirectToListPage(data)\"\r\n            class=\"d-flex flex-column align-items-center\">\r\n            <div class=\"d-flex position-relative justify-content-center\" (click)=\"redirectToListPage(data)\">\r\n              <div class=\"category-back\" [style.--before-height.px]=\"((styles?.containerHeight ?? 50) - 30) ?? 50\"\r\n                [style.--after-height.px]=\"((styles?.containerHeight ?? 50)- 30)\"></div>\r\n              <img loading=\"lazy\" [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n                class=\"category-image\">\r\n              <div class=\"product-count\" [style.background]=\"styles?.background?.color\"\r\n                [style.color]=\"getColor(styles?.background?.color)\">{{(data?.itemIds?.length ?? 0) + \"\r\n                \" + \"designs\"}}</div>\r\n            </div>\r\n            <div class=\"category-name body-large p-2\" *ngIf=\"content?.display?.showHeading\"\r\n              [style.background]=\"styles?.background?.accentColor\"\r\n              [style.color]=\"getColor(styles?.background?.accentColor)\">{{data.collectionName}}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n\r\n\r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n\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>", styles: [".mt-15{margin-top:15px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.total-container{height:fit-content!important;position:relative;display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.category-parent{padding:2%;display:flex;width:100%;max-width:100%;margin-top:25px;gap:25px;overflow-x:scroll;cursor:pointer}.category-image{margin:0 35px;position:relative;background:#f9f9fb;border-radius:13px}.product-count{width:70%;border-radius:30px;padding:3px;position:absolute;bottom:-10px;font-size:12px;font-weight:600}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{font-size:15px;line-height:normal;font-weight:600;border-radius:8px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:90%;height:47px;align-content:end}.category-back:after{content:\"\";position:absolute;width:90px;height:var(--after-height);border:1px solid rgb(220,220,220);transform:rotate(10.282deg);right:25px;bottom:5px;border-radius:14px;background:#fff}.category-back:before{content:\"\";position:absolute;width:90px;height:var(--before-height);border:1px solid rgb(220,220,220);transform:rotate(-10.282deg);left:25px;bottom:5px;border-radius:14px;background:#fff}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important;padding-top:5px!important;padding-bottom:5px!important}.category-image{height:100px;width:100px}.header{gap:7px}.category-parent{gap:8px;margin-top:15px;padding-left:0!important;padding-right:0!important;padding-top:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NewCollectionComponent, isStandalone: true, selector: "simpo-new-collection", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container p-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [attr.style]=\"customClass\">\r\n    <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\" class=\"border-radius-unset\">\r\n      <div [id]=\"data?.id\" #mainContainer [simpoAnimation]=\"styles?.animation\" [simpoBackground]=\"styles?.background\"\r\n        [simpoCorner]=\"styles?.corners\" class=\"d-flex w-100\">\r\n        <div class=\"d-flex flex-column w-100\" [simpoOverlay]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\r\n          [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\"\r\n          [simpoAnimation]=\"styles?.animation\">\r\n          <div *ngFor=\"let item of content?.inputText\">\r\n            <!-- <div  class = \"content-side\"[innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\r\n            <ng-container *ngIf=\"edit || item.value\">\r\n              <div class=\"pt-3 w-100\">\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n              </div>\r\n            </ng-container>\r\n\r\n            <!-- </div> -->\r\n          </div>\r\n          <div class=\"category-parent\" [ngClass]=\"{'flex-wrap': getDirection == 'COLUMN'}\"\r\n            [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\"\r\n            [style.justifyContent]=\"!isMobile ? styles?.layout?.align : ''\">\r\n            <div *ngFor=\"let data of responseData; let idx = index\" (click)=\"redirectToListPage(data)\"\r\n              class=\"d-flex flex-column align-items-center\">\r\n              <div class=\"d-flex position-relative justify-content-center\" (click)=\"redirectToListPage(data)\">\r\n                <div class=\"category-back\" [style.--before-height.px]=\"((styles?.containerHeight ?? 50) - 30) ?? 50\"\r\n                  [style.--after-height.px]=\"((styles?.containerHeight ?? 50)- 30)\"></div>\r\n                <img loading=\"lazy\" [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                  [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                  onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                  [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n                  class=\"category-image\">\r\n                <div class=\"product-count\" [style.background]=\"styles?.background?.color\"\r\n                  [style.color]=\"getColor(styles?.background?.color)\">{{(data?.itemIds?.length ?? 0) + \"\r\n                  \" + \"designs\"}}</div>\r\n              </div>\r\n              <div class=\"category-name body-large p-2\" *ngIf=\"content?.display?.showHeading\"\r\n                [style.background]=\"styles?.background?.accentColor\"\r\n                [style.color]=\"getColor(styles?.background?.accentColor)\">{{data.collectionName}}</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n\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>", styles: [".mt-15{margin-top:15px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.total-container{height:fit-content!important;position:relative;display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.category-parent{padding:2%;display:flex;width:100%;max-width:100%;margin-top:25px;gap:25px;overflow-x:scroll;cursor:pointer}.category-image{margin:0 35px;position:relative;background:#f9f9fb;border-radius:13px}.product-count{width:70%;border-radius:30px;padding:3px;position:absolute;bottom:-10px;font-size:12px;font-weight:600}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{font-size:15px;line-height:normal;font-weight:600;border-radius:8px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:90%;height:47px;align-content:end}.category-back:after{content:\"\";position:absolute;width:90px;height:var(--after-height);border:1px solid rgb(220,220,220);transform:rotate(10.282deg);right:25px;bottom:5px;border-radius:14px;background:#fff}.category-back:before{content:\"\";position:absolute;width:90px;height:var(--before-height);border:1px solid rgb(220,220,220);transform:rotate(-10.282deg);left:25px;bottom:5px;border-radius:14px;background:#fff}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important;padding-top:5px!important;padding-bottom:5px!important}.category-image{height:100px!important;width:100px!important}.category-back:after{height:90px!important}.category-back:before{height:90px!important}.header{gap:7px}.category-parent{gap:8px;margin-top:15px;padding-left:0!important;padding-right:0!important;padding-top:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: 
                 //directive
-                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }] }); }
+                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewCollectionComponent, decorators: [{
             type: Component,
@@ -21624,7 +21718,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SanitizeHtmlPipe, SvgDividerComponent,
                         TextEditorComponent,
                         SpacingAroundDirective,
-                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n    <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\">\r\n      <div [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoAnimation]=\"styles?.animation\"\r\n        [spacingHorizontal]=\"stylesLayout\" [simpoBackground]=\"styles?.background\" [simpoCorner]=\"styles?.corners\">\r\n        <div *ngFor=\"let item of content?.inputText\">\r\n          <!-- <div  class = \"content-side\"[innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\r\n          <ng-container *ngIf=\"edit || item.value\">\r\n            <div class=\"pt-3 w-100\">\r\n              <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <!-- </div> -->\r\n        </div>\r\n        <div>\r\n          <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n            class=\"span-img mt-15\">\r\n        </div>\r\n        <div class=\"category-parent\" [ngClass]=\"{'flex-wrap': getDirection == 'ROW'}\"\r\n          [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\"\r\n          [style.justifyContent]=\"!isMobile ? styles?.layout?.align : ''\">\r\n          <div *ngFor=\"let data of responseData; let idx = index\" (click)=\"redirectToListPage(data)\"\r\n            class=\"d-flex flex-column align-items-center\">\r\n            <div class=\"d-flex position-relative justify-content-center\" (click)=\"redirectToListPage(data)\">\r\n              <div class=\"category-back\" [style.--before-height.px]=\"((styles?.containerHeight ?? 50) - 30) ?? 50\"\r\n                [style.--after-height.px]=\"((styles?.containerHeight ?? 50)- 30)\"></div>\r\n              <img loading=\"lazy\" [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n                class=\"category-image\">\r\n              <div class=\"product-count\" [style.background]=\"styles?.background?.color\"\r\n                [style.color]=\"getColor(styles?.background?.color)\">{{(data?.itemIds?.length ?? 0) + \"\r\n                \" + \"designs\"}}</div>\r\n            </div>\r\n            <div class=\"category-name body-large p-2\" *ngIf=\"content?.display?.showHeading\"\r\n              [style.background]=\"styles?.background?.accentColor\"\r\n              [style.color]=\"getColor(styles?.background?.accentColor)\">{{data.collectionName}}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n\r\n\r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n\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>", styles: [".mt-15{margin-top:15px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.total-container{height:fit-content!important;position:relative;display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.category-parent{padding:2%;display:flex;width:100%;max-width:100%;margin-top:25px;gap:25px;overflow-x:scroll;cursor:pointer}.category-image{margin:0 35px;position:relative;background:#f9f9fb;border-radius:13px}.product-count{width:70%;border-radius:30px;padding:3px;position:absolute;bottom:-10px;font-size:12px;font-weight:600}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{font-size:15px;line-height:normal;font-weight:600;border-radius:8px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:90%;height:47px;align-content:end}.category-back:after{content:\"\";position:absolute;width:90px;height:var(--after-height);border:1px solid rgb(220,220,220);transform:rotate(10.282deg);right:25px;bottom:5px;border-radius:14px;background:#fff}.category-back:before{content:\"\";position:absolute;width:90px;height:var(--before-height);border:1px solid rgb(220,220,220);transform:rotate(-10.282deg);left:25px;bottom:5px;border-radius:14px;background:#fff}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important;padding-top:5px!important;padding-bottom:5px!important}.category-image{height:100px;width:100px}.header{gap:7px}.category-parent{gap:8px;margin-top:15px;padding-left:0!important;padding-right:0!important;padding-top:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"] }]
+                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container p-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [attr.style]=\"customClass\">\r\n    <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\" class=\"border-radius-unset\">\r\n      <div [id]=\"data?.id\" #mainContainer [simpoAnimation]=\"styles?.animation\" [simpoBackground]=\"styles?.background\"\r\n        [simpoCorner]=\"styles?.corners\" class=\"d-flex w-100\">\r\n        <div class=\"d-flex flex-column w-100\" [simpoOverlay]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\r\n          [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\"\r\n          [simpoAnimation]=\"styles?.animation\">\r\n          <div *ngFor=\"let item of content?.inputText\">\r\n            <!-- <div  class = \"content-side\"[innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\r\n            <ng-container *ngIf=\"edit || item.value\">\r\n              <div class=\"pt-3 w-100\">\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n              </div>\r\n            </ng-container>\r\n\r\n            <!-- </div> -->\r\n          </div>\r\n          <div class=\"category-parent\" [ngClass]=\"{'flex-wrap': getDirection == 'COLUMN'}\"\r\n            [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\"\r\n            [style.justifyContent]=\"!isMobile ? styles?.layout?.align : ''\">\r\n            <div *ngFor=\"let data of responseData; let idx = index\" (click)=\"redirectToListPage(data)\"\r\n              class=\"d-flex flex-column align-items-center\">\r\n              <div class=\"d-flex position-relative justify-content-center\" (click)=\"redirectToListPage(data)\">\r\n                <div class=\"category-back\" [style.--before-height.px]=\"((styles?.containerHeight ?? 50) - 30) ?? 50\"\r\n                  [style.--after-height.px]=\"((styles?.containerHeight ?? 50)- 30)\"></div>\r\n                <img loading=\"lazy\" [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                  [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                  onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                  [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n                  class=\"category-image\">\r\n                <div class=\"product-count\" [style.background]=\"styles?.background?.color\"\r\n                  [style.color]=\"getColor(styles?.background?.color)\">{{(data?.itemIds?.length ?? 0) + \"\r\n                  \" + \"designs\"}}</div>\r\n              </div>\r\n              <div class=\"category-name body-large p-2\" *ngIf=\"content?.display?.showHeading\"\r\n                [style.background]=\"styles?.background?.accentColor\"\r\n                [style.color]=\"getColor(styles?.background?.accentColor)\">{{data.collectionName}}</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n\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>", styles: [".mt-15{margin-top:15px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.total-container{height:fit-content!important;position:relative;display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.category-parent{padding:2%;display:flex;width:100%;max-width:100%;margin-top:25px;gap:25px;overflow-x:scroll;cursor:pointer}.category-image{margin:0 35px;position:relative;background:#f9f9fb;border-radius:13px}.product-count{width:70%;border-radius:30px;padding:3px;position:absolute;bottom:-10px;font-size:12px;font-weight:600}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{font-size:15px;line-height:normal;font-weight:600;border-radius:8px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:90%;height:47px;align-content:end}.category-back:after{content:\"\";position:absolute;width:90px;height:var(--after-height);border:1px solid rgb(220,220,220);transform:rotate(10.282deg);right:25px;bottom:5px;border-radius:14px;background:#fff}.category-back:before{content:\"\";position:absolute;width:90px;height:var(--before-height);border:1px solid rgb(220,220,220);transform:rotate(-10.282deg);left:25px;bottom:5px;border-radius:14px;background:#fff}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important;padding-top:5px!important;padding-bottom:5px!important}.category-image{height:100px!important;width:100px!important}.category-back:after{height:90px!important}.category-back:before{height:90px!important}.header{gap:7px}.category-parent{gap:8px;margin-top:15px;padding-left:0!important;padding-right:0!important;padding-top:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"] }]
         }], ctorParameters: () => [{ type: i2$2.Router }, { type: RestService }, { type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], responseData: [{
@@ -22301,7 +22395,7 @@ class ReturnsCalculatorComponent extends BaseSection {
         this.stores = scheme?.storeList ? scheme.storeList : [];
         this.selectedStaff = "";
         this.selectedStore = {};
-        console.log(scheme);
+        // console.log(scheme);
         this.enrolledScheme = scheme;
         this.enrolledScheme?.suggestedValues?.forEach((scheme) => this.installmentOptions.push({ status: false, value: scheme }));
         this.benefitAmount = 0;
@@ -22390,7 +22484,7 @@ class ReturnsCalculatorComponent extends BaseSection {
         }
         this.enrollButtonLoader = true;
         const userDetails = this.storageService.getUser();
-        console.log(userDetails);
+        // console.log(userDetails)
         let payload = {
             userBasicDetails: {
                 customer_id: userDetails?.userId,
@@ -22515,7 +22609,7 @@ class ReturnsCalculatorComponent extends BaseSection {
         this.router.navigate(['/scheme-detail'], { queryParams: { schemeId: this.enrolledScheme?.id, termsAndCondition: true } });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReturnsCalculatorComponent, deps: [{ token: EventsService }, { token: RestService }, { token: i1$1.MatDialog }, { token: StorageServiceService }, { token: i2$2.Router }, { token: i6$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ReturnsCalculatorComponent, isStandalone: true, selector: "simpo-returns-calculator", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index" }, providers: [MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n    <div class=\"main-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoLayout]=\"stylesLayout\">\r\n        <div class=\"headers w-100\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <ng-container *ngFor=\"let item of data?.content?.inputText\">\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <div class=\"calculator bx-shd w-75 mx-auto my-3\">\r\n                <div class=\"calculator-header text-center mb-4  w-100\">\r\n                    <h3 class=\"mb-0 calculator-title\">Interactive Returns Calculator</h3>\r\n                </div>\r\n                <div class=\"sub-header mb-3 p-3\">\r\n                    <h6 class=\"mb-0 sub-header-text\">Select Your Preferred Scheme</h6>\r\n                </div>\r\n                <div class=\"calculator-body-top d-flex mb-4 px-3\">\r\n                    <ng-container *ngFor=\"let scheme of allSchemes\">\r\n                        <div class=\"form-check scheme-option  p-3 border rounded border-primary ind-border\"\r\n                            (click)=\"onSchemeChange(scheme)\">\r\n                            <input class=\"form-check-input cursor-pointer\" type=\"radio\" name=\"scheme\" id=\"individual\"\r\n                                (change)=\"onSchemeChange(scheme)\" [checked]=\"scheme.selected\">\r\n                            <div class=\"form-check-label ms-2\">\r\n                                <div class=\"d-flex align-items-center mb-2\">\r\n                                    \uD83D\uDC64\r\n                                    <div class=\"scheme-header fw-bold\">{{scheme?.schemeName ? scheme.schemeName :\r\n                                        'N/A'}}</div>\r\n                                </div>\r\n                                <div class=\"scheme-description text-muted small\">Pay 10 months, get 11th month FREE\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n                <div class=\"gold-purity\"\r\n                    *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n                    <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? [0,0,0]\">\r\n                        <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\"\r\n                            alt=\"\" *ngIf=\"gold?.karats === '_18k'\">\r\n                        <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\"\r\n                            alt=\"\" *ngIf=\"gold?.karats === '_24k'\">\r\n                        <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\"\r\n                            alt=\"\" *ngIf=\"gold?.karats === '_22k'\">\r\n                        <div>\r\n                            <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\r\n                            <div class=\"gold-price\">\u20B9{{gold.price}}</div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"sub-header mb-3 px-3 monthly-scheme\" *ngIf=\"minAmount && maxAmount\">\r\n                    <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n                    <p class=\"enrolled-gram\"\r\n                        *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n                        {{purchasedGram}} gms</p>\r\n                </div>\r\n\r\n                <div class=\"calculate-slider mb-4 px-3\" *ngIf=\"minAmount && maxAmount\">\r\n                    <div class=\"slider-container position-relative\">\r\n                        <mat-slider [min]=\"minAmount\" [max]=\"maxAmount\" [step]=\"enrolledScheme?.valueStep\"\r\n                            class=\"w-100 pale-slider\"\r\n                            [style.--mdc-slider-handle-color]=\"styles?.background?.accentColor\"\r\n                            [style.--mdc-slider-focus-handle-color]=\"styles?.background?.accentColor\"\r\n                            [style.--mdc-slider-hover-handle-color]=\"styles?.background?.accentColor\"\r\n                            [style.--mdc-slider-active-track-color]=\"styles?.background?.accentColor\"\r\n                            [style.--mdc-slider-with-tick-marks-active-container-color]=\"styles?.background?.accentColor\"\r\n                            [style.--mat-slider-ripple-color]=\"styles?.background?.accentColor\"\r\n                            [style.--mat-slider-value-indicator-color]=\"styles?.background?.accentColor\">\r\n                            <input matSliderThumb [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\">\r\n                        </mat-slider>\r\n                        <!-- <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n                            [step]=\"enrolledScheme?.valueStep\" [(ngModel)]=\"monthlyAmount\"\r\n                            (ngModelChange)=\"onAmountChange()\"> -->\r\n                        <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n                            <span class=\"text-muted\">\u20B9{{minAmount | number}}</span>\r\n                            <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n                            <span class=\"text-muted\">\u20B9{{maxAmount | number}}</span>\r\n                        </div>\r\n                        <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n                    </div>\r\n                    <div class=\"random_opitons d-flex justify-content-center gap-3 align-items-center flex-wrap\"\r\n                        *ngIf=\"installmentOptions && installmentOptions.length > 0\">\r\n                        <div class=\"option cursor-pointer\" *ngFor=\"let option of installmentOptions\"\r\n                            [ngStyle]=\"option.status ? {'border': '2px solid grey','font-weight':'bold'} : {}\"\r\n                            (click)=\"setMonthlyAmount(option)\">\r\n                            \u20B9 {{option?.value ? option?.value : 'N/A'}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"calculator-bottom px-3 mb-5\">\r\n                    <div class=\"scheme-results\">\r\n                        <!-- <div class=\"d-flex align-items-center mb-3\">\r\n                            \u2B50 <h6 class=\"mb-0 individual-results-title\">Individual Scheme Results</h6>\r\n                        </div> -->\r\n\r\n                        <div class=\"row mb-3\">\r\n                            <div [class]=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' ? 'col-6' : 'col-4'\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * maturityCount) |\r\n                                        number}}</div>\r\n                                    <div class=\"result-label text-muted small\">Your {{maturityCount}}-Month Contribution\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{benefitAmount | number}}</div>\r\n                                    <div class=\"result-label text-muted small\">Scheme Benefit</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\r\n                                <div class=\"result-card result-card-highlight text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\"\r\n                                        *ngIf=\"enrolledScheme?.benefitType != 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n                                        maturityCount)+benefitAmount) | number}}</div>\r\n                                    <div class=\"result-amount fw-bold fs-5\"\r\n                                        *ngIf=\"enrolledScheme?.benefitType === 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n                                        maturityCount)) | number}}</div>\r\n                                    <div class=\"result-label small opacity-75\">Total Redemption Value</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-6\" *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION'\">\r\n                                <div class=\"result-card text-center p-3 border rounded result-card-highlight\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">{{purchasedGram}} gms</div>\r\n                                    <div class=\"result-label  small color-white\">Gold Allocation Today\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\r\n                            *ngIf=\"enrolledScheme && (stores.length >= 2 || staffMembers.length >= 2) \">\r\n                            <div class=\"store_selection  w-50 align-items-center gap-1\" *ngIf=\"stores.length >= 2\">\r\n                                <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\r\n                                        Store : </span></div>\r\n                                <div class=\"store-selector\">\r\n                                    <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\r\n                                        (ngModelChange)=\"getMetalPrice()\">\r\n                                        <option [ngValue]=\"null\" disabled>Choose a store...</option>\r\n                                        <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\r\n                                            {{store.name}} - {{store.storeRefId}}\r\n                                        </option>\r\n                                    </select>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"staff-selector w-50  align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\r\n                                <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\r\n                                        Staff Member : </span></div>\r\n                                <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\r\n                                    <option value=\"\" disabled>Choose a staff member...</option>\r\n                                    <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\r\n                                        {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\r\n                                    </option>\r\n                                </select>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"terms-and-condition\" *ngIf=\"enrolledScheme\">\r\n                            <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a\r\n                                (click)=\"goToTermsAndCondition()\">Terms & Conditions</a>\r\n                        </div>\r\n                        <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n                            simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n                            [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\"\r\n                            (click)=\"enrollScheme(enrolledScheme)\"\r\n                            [style.borderColor]=\"styles?.background?.accentColor\">\r\n                            <span *ngIf=\"!enrollButtonLoader\">Enroll in Scheme</span>\r\n                            <ng-container *ngIf=\"enrollButtonLoader\">\r\n                                <div class=\"d-flex align-items-center justify-content-center\">\r\n                                    <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\r\n                                    Loading...\r\n                                </div>\r\n                            </ng-container>\r\n                        </button>\r\n                    </div>\r\n                    <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n                        <div class=\"d-flex align-items-center mb-3\">\r\n                            \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n                        </div>\r\n\r\n                        <div class=\"row mb-3\">\r\n                            <div class=\"col-6\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                                    <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-6\">\r\n                                <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                                    <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n                            simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n                            [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n                            Enroll in Scheme\r\n                        </button>\r\n                    </div> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <ng-template #showCharges>\r\n        <div class=\"payment-dialog\">\r\n            <div class=\"dialog-header\">\r\n                <h2>Payment Details</h2>\r\n                <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\r\n                    <mat-icon>close</mat-icon>\r\n                </button>\r\n            </div>\r\n\r\n            <div class=\"payment-content\">\r\n                <div class=\"payment-row\">\r\n                    <span class=\"label\">Installment Amount:</span>\r\n                    <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n                        (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n                </div>\r\n\r\n                <div class=\"payment-row\">\r\n                    <span class=\"label\">Convenience Fee:</span>\r\n                    <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n                        (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n                </div>\r\n\r\n                <div class=\"payment-row\">\r\n                    <span class=\"label\">Payment Service Charges:</span>\r\n                    <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n                        (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n                </div>\r\n\r\n                <div class=\"payment-row total-row\">\r\n                    <span class=\"label total-label\">Total Amount:</span>\r\n                    <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n                        (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"dialog-actions\">\r\n                <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\r\n            </div>\r\n        </div>\r\n    </ng-template>\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\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</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.bx-shd{box-shadow:#ffffff1a 0 1px 1px inset,#32325d40 0 50px 100px -20px,#0000004d 0 30px 60px -30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.calculator{border-radius:12px;box-shadow:0 4px 6px #0000001a}.calculator-header{background:linear-gradient(145deg,#f2e8cb,#d1c29e);color:#fff;padding:15px;border-radius:8px 8px 0 0}.calculator-title{color:#000;font-weight:600}.sub-header-text{color:#666;font-weight:500}.w-48{width:48%!important}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.random_opitons{padding:1%}.option{padding:1% 2%;border:1px solid lightgrey;border-radius:50px}.payment-row:last-child{margin-bottom:0}.label{color:#666;font-size:14px;font-weight:400}.amount{color:#333;font-size:14px;font-weight:500}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}.mat-dialog-container{padding:0!important;border-radius:12px!important}.scheme-option{cursor:pointer;transition:all .3s ease;min-width:22vw}.form-check-input:checked{background-color:#d63384;border-color:#d63384}.form-check-input:focus{box-shadow:0 0 0 .25rem #d6338440}.scheme-header{font-size:16px;margin-bottom:5px;color:#333}.scheme-description{font-size:13px;line-height:1.4}.custom-range{height:8px;border-radius:5px;outline:none}.custom-range::-webkit-slider-thumb{appearance:none;width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0003}.custom-range::-moz-range-thumb{width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #0003}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.monthly-amount{color:#d4a574}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{background:#d4a574;color:#fff}.result-card-group{background:#d63384;color:#fff}.ind-border{border:2px solid rgb(201,176,130)!important}.grp-border{border:2px solid rgb(214,51,132)!important}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.spinner{width:30px;height:30px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.bonus-text{color:#d4a574;font-weight:500}.scheme-results{background:#fff;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.group-results-title{color:#d63384;font-weight:600}.enroll-btn{font-size:16px;border:1px solid}.calculator-body-top{overflow-y:scroll;gap:2rem}@media (max-width: 768px){.calculator{width:95%!important}.scheme-results .row{flex-direction:column}.scheme-results :is(.col-4,.col-6){width:100%!important}.calculator-body-top{flex-direction:column!important}.w-48{width:100%!important;margin-bottom:15px}.row .col-4,.row .col-6,.scheme-option{margin-bottom:15px}}@media (max-width:475px){.gold-purity{flex-wrap:wrap;gap:.5rem!important;padding:.5rem}.enrolled-gram{font-size:1rem;white-space:nowrap}.bonus-message{flex-direction:column}.staff-selector,.store_selection{width:100%!important}.scheme-results{padding:20px 0}}.gold-purity{padding-left:1rem;padding-bottom:15px;display:flex;gap:15px}.gold-purity .purity{display:flex;gap:10px;background:#fff7d0;width:max-content;padding:5px 8px;border-radius:11px;align-items:center}.gold-purity .purity img{height:40px}.gold-purity .purity div{font-size:12px}.gold-purity .purity .gold-price{font-weight:700}.enrolled-gram{margin-bottom:0;font-size:17px;font-weight:600}.monthly-scheme{display:flex;justify-content:space-between}.color-white{color:#fff}.terms-and-condition{display:flex;align-items:center;gap:10px;margin-bottom:10px}.terms-and-condition input{cursor:pointer}a{color:#0d6efd!important;text-decoration:underline!important;cursor:pointer}a:hover{color:#0a58ca!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "directive", type: i10$2.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ReturnsCalculatorComponent, isStandalone: true, selector: "simpo-returns-calculator", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index" }, providers: [MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n    <div class=\"main-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoLayout]=\"stylesLayout\">\r\n        <div class=\"headers w-100\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <ng-container *ngFor=\"let item of data?.content?.inputText\">\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <div class=\"calculator bx-shd w-75 mx-auto my-3\">\r\n                <div class=\"calculator-header text-center mb-4  w-100\">\r\n                    <h3 class=\"mb-0 calculator-title\">Interactive Returns Calculator</h3>\r\n                </div>\r\n                <div class=\"sub-header mb-3 p-3\">\r\n                    <h6 class=\"mb-0 sub-header-text\">Select Your Preferred Scheme</h6>\r\n                </div>\r\n                <div class=\"calculator-body-top d-flex mb-4 px-3\">\r\n                    <ng-container *ngFor=\"let scheme of allSchemes\">\r\n                        <div class=\"form-check scheme-option  p-3 border rounded border-primary ind-border\"\r\n                            (click)=\"onSchemeChange(scheme)\">\r\n                            <input class=\"form-check-input cursor-pointer\" type=\"radio\" name=\"scheme\" id=\"individual\"\r\n                                (change)=\"onSchemeChange(scheme)\" [checked]=\"scheme.selected\">\r\n                            <div class=\"form-check-label ms-2\">\r\n                                <div class=\"d-flex align-items-center mb-2\">\r\n                                    \uD83D\uDC64\r\n                                    <div class=\"scheme-header fw-bold\">{{scheme?.schemeName ? scheme.schemeName :\r\n                                        'N/A'}}</div>\r\n                                </div>\r\n                                <div class=\"scheme-description text-muted small\">Pay 10 months, get 11th month FREE\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n                <div class=\"gold-purity\"\r\n                    *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n                    <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? [0,0,0]\">\r\n                        <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\"\r\n                            alt=\"\" *ngIf=\"gold?.karats === '_18k'\">\r\n                        <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\"\r\n                            alt=\"\" *ngIf=\"gold?.karats === '_24k'\">\r\n                        <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\"\r\n                            alt=\"\" *ngIf=\"gold?.karats === '_22k'\">\r\n                        <div>\r\n                            <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\r\n                            <div class=\"gold-price\">\u20B9{{gold.price}}</div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"sub-header mb-3 px-3 monthly-scheme\" *ngIf=\"minAmount && maxAmount\">\r\n                    <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n                    <p class=\"enrolled-gram\"\r\n                        *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n                        {{purchasedGram}} gms</p>\r\n                </div>\r\n\r\n                <div class=\"calculate-slider mb-4 px-3\" *ngIf=\"minAmount && maxAmount\">\r\n                    <div class=\"slider-container position-relative\">\r\n                        <mat-slider [min]=\"minAmount\" [max]=\"maxAmount\" [step]=\"enrolledScheme?.valueStep\"\r\n                            class=\"w-100 pale-slider\"\r\n                            [style.--mdc-slider-handle-color]=\"styles?.background?.accentColor\"\r\n                            [style.--mdc-slider-focus-handle-color]=\"styles?.background?.accentColor\"\r\n                            [style.--mdc-slider-hover-handle-color]=\"styles?.background?.accentColor\"\r\n                            [style.--mdc-slider-active-track-color]=\"styles?.background?.accentColor\"\r\n                            [style.--mdc-slider-with-tick-marks-active-container-color]=\"styles?.background?.accentColor\"\r\n                            [style.--mat-slider-ripple-color]=\"styles?.background?.accentColor\"\r\n                            [style.--mat-slider-value-indicator-color]=\"styles?.background?.accentColor\">\r\n                            <input matSliderThumb [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\">\r\n                        </mat-slider>\r\n                        <!-- <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n                            [step]=\"enrolledScheme?.valueStep\" [(ngModel)]=\"monthlyAmount\"\r\n                            (ngModelChange)=\"onAmountChange()\"> -->\r\n                        <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n                            <span class=\"text-muted\">\u20B9{{minAmount | number}}</span>\r\n                            <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n                            <span class=\"text-muted\">\u20B9{{maxAmount | number}}</span>\r\n                        </div>\r\n                        <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n                    </div>\r\n                    <div class=\"random_opitons d-flex justify-content-center gap-3 align-items-center flex-wrap\"\r\n                        *ngIf=\"installmentOptions && installmentOptions.length > 0\">\r\n                        <div class=\"option cursor-pointer\" *ngFor=\"let option of installmentOptions\"\r\n                            [ngStyle]=\"option.status ? {'border': '2px solid grey','font-weight':'bold'} : {}\"\r\n                            (click)=\"setMonthlyAmount(option)\">\r\n                            \u20B9 {{option?.value ? option?.value : 'N/A'}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"calculator-bottom px-3 mb-5\">\r\n                    <div class=\"scheme-results\">\r\n                        <!-- <div class=\"d-flex align-items-center mb-3\">\r\n                            \u2B50 <h6 class=\"mb-0 individual-results-title\">Individual Scheme Results</h6>\r\n                        </div> -->\r\n\r\n                        <div class=\"row mb-3\">\r\n                            <div [class]=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' ? 'col-6' : 'col-4'\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * maturityCount) |\r\n                                        number}}</div>\r\n                                    <div class=\"result-label text-muted small\">Your {{maturityCount}}-Month Contribution\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{benefitAmount | number}}</div>\r\n                                    <div class=\"result-label text-muted small\">Scheme Benefit</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\r\n                                <div class=\"result-card result-card-highlight text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\"\r\n                                        *ngIf=\"enrolledScheme?.benefitType != 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n                                        maturityCount)+benefitAmount) | number}}</div>\r\n                                    <div class=\"result-amount fw-bold fs-5\"\r\n                                        *ngIf=\"enrolledScheme?.benefitType === 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n                                        maturityCount)) | number}}</div>\r\n                                    <div class=\"result-label small opacity-75\">Total Redemption Value</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-6\" *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION'\">\r\n                                <div class=\"result-card text-center p-3 border rounded result-card-highlight\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">{{purchasedGram}} gms</div>\r\n                                    <div class=\"result-label  small color-white\">Gold Allocation Today\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\r\n                            *ngIf=\"enrolledScheme && (stores.length >= 2 || staffMembers.length >= 2) \">\r\n                            <div class=\"store_selection  w-50 align-items-center gap-1\" *ngIf=\"stores.length >= 2\">\r\n                                <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\r\n                                        Store : </span></div>\r\n                                <div class=\"store-selector\">\r\n                                    <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\r\n                                        (ngModelChange)=\"getMetalPrice()\">\r\n                                        <option [ngValue]=\"null\" disabled>Choose a store...</option>\r\n                                        <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\r\n                                            {{store.name}} - {{store.storeRefId}}\r\n                                        </option>\r\n                                    </select>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"staff-selector w-50  align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\r\n                                <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\r\n                                        Staff Member : </span></div>\r\n                                <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\r\n                                    <option value=\"\" disabled>Choose a staff member...</option>\r\n                                    <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\r\n                                        {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\r\n                                    </option>\r\n                                </select>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"terms-and-condition\" *ngIf=\"enrolledScheme\">\r\n                            <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a\r\n                                (click)=\"goToTermsAndCondition()\">Terms & Conditions</a>\r\n                        </div>\r\n                        <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n                            simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n                            [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\"\r\n                            (click)=\"enrollScheme(enrolledScheme)\"\r\n                            [style.borderColor]=\"styles?.background?.accentColor\">\r\n                            <span *ngIf=\"!enrollButtonLoader\">Enroll in Scheme</span>\r\n                            <ng-container *ngIf=\"enrollButtonLoader\">\r\n                                <div class=\"d-flex align-items-center justify-content-center\">\r\n                                    <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\r\n                                    Loading...\r\n                                </div>\r\n                            </ng-container>\r\n                        </button>\r\n                    </div>\r\n                    <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n                        <div class=\"d-flex align-items-center mb-3\">\r\n                            \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n                        </div>\r\n\r\n                        <div class=\"row mb-3\">\r\n                            <div class=\"col-6\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                                    <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-6\">\r\n                                <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                                    <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n                            simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n                            [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n                            Enroll in Scheme\r\n                        </button>\r\n                    </div> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <ng-template #showCharges>\r\n        <div class=\"payment-dialog\">\r\n            <div class=\"dialog-header\">\r\n                <h2>Payment Details</h2>\r\n                <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\r\n                    <mat-icon>close</mat-icon>\r\n                </button>\r\n            </div>\r\n\r\n            <div class=\"payment-content\">\r\n                <div class=\"payment-row\">\r\n                    <span class=\"label\">Installment Amount:</span>\r\n                    <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n                        (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n                </div>\r\n\r\n                <div class=\"payment-row\">\r\n                    <span class=\"label\">Convenience Fee:</span>\r\n                    <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n                        (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n                </div>\r\n\r\n                <div class=\"payment-row\">\r\n                    <span class=\"label\">Payment Service Charges:</span>\r\n                    <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n                        (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n                </div>\r\n\r\n                <div class=\"payment-row total-row\">\r\n                    <span class=\"label total-label\">Total Amount:</span>\r\n                    <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n                        (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"dialog-actions\">\r\n                <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\r\n            </div>\r\n        </div>\r\n    </ng-template>\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\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</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.bx-shd{box-shadow:#ffffff1a 0 1px 1px inset,#32325d40 0 50px 100px -20px,#0000004d 0 30px 60px -30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.calculator{border-radius:12px;box-shadow:0 4px 6px #0000001a}.calculator-header{background:linear-gradient(145deg,#f2e8cb,#d1c29e);color:#fff;padding:15px;border-radius:8px 8px 0 0}.calculator-title{color:#000;font-weight:600}.sub-header-text{color:#666;font-weight:500}.w-48{width:48%!important}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.random_opitons{padding:1%}.option{padding:1% 2%;border:1px solid lightgrey;border-radius:50px}.payment-row:last-child{margin-bottom:0}.label{color:#666;font-size:14px;font-weight:400}.amount{color:#333;font-size:14px;font-weight:500}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}.mat-dialog-container{padding:0!important;border-radius:12px!important}.scheme-option{cursor:pointer;transition:all .3s ease;min-width:22vw}.form-check-input:checked{background-color:#d63384;border-color:#d63384}.form-check-input:focus{box-shadow:0 0 0 .25rem #d6338440}.scheme-header{font-size:16px;margin-bottom:5px;color:#333}.scheme-description{font-size:13px;line-height:1.4}.custom-range{height:8px;border-radius:5px;outline:none}.custom-range::-webkit-slider-thumb{appearance:none;width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0003}.custom-range::-moz-range-thumb{width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #0003}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.monthly-amount{color:#d4a574}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{background:#d4a574;color:#fff}.result-card-group{background:#d63384;color:#fff}.ind-border{border:2px solid rgb(201,176,130)!important}.grp-border{border:2px solid rgb(214,51,132)!important}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.spinner{width:30px;height:30px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.bonus-text{color:#d4a574;font-weight:500}.scheme-results{background:#fff;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.group-results-title{color:#d63384;font-weight:600}.enroll-btn{font-size:16px;border:1px solid}.calculator-body-top{overflow-y:scroll;gap:2rem}@media (max-width: 768px){.calculator{width:95%!important}.scheme-results .row{flex-direction:column}.scheme-results :is(.col-4,.col-6){width:100%!important}.calculator-body-top{flex-direction:column!important}.w-48{width:100%!important;margin-bottom:15px}.row .col-4,.row .col-6,.scheme-option{margin-bottom:15px}}@media (max-width:475px){.gold-purity{flex-wrap:wrap;gap:.5rem!important;padding:.5rem}.enrolled-gram{font-size:1rem;white-space:nowrap}.bonus-message{flex-direction:column}.staff-selector,.store_selection{width:100%!important}.scheme-results{padding:20px 0}}.gold-purity{padding-left:1rem;padding-bottom:15px;display:flex;gap:15px}.gold-purity .purity{display:flex;gap:10px;background:#fff7d0;width:max-content;padding:5px 8px;border-radius:11px;align-items:center}.gold-purity .purity img{height:40px}.gold-purity .purity div{font-size:12px}.gold-purity .purity .gold-price{font-weight:700}.enrolled-gram{margin-bottom:0;font-size:17px;font-weight:600}.monthly-scheme{display:flex;justify-content:space-between}.color-white{color:#fff}.terms-and-condition{display:flex;align-items:center;gap:10px;margin-bottom:10px}.terms-and-condition input{cursor:pointer}a{color:#0d6efd!important;text-decoration:underline!important;cursor:pointer}a:hover{color:#0a58ca!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "directive", type: i10$2.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReturnsCalculatorComponent, decorators: [{
             type: Component,
@@ -22538,7 +22632,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ToastModule,
                         MatSlider,
                         MatSliderModule
-                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n    <div class=\"main-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoLayout]=\"stylesLayout\">\r\n        <div class=\"headers w-100\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <ng-container *ngFor=\"let item of data?.content?.inputText\">\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <div class=\"calculator bx-shd w-75 mx-auto my-3\">\r\n                <div class=\"calculator-header text-center mb-4  w-100\">\r\n                    <h3 class=\"mb-0 calculator-title\">Interactive Returns Calculator</h3>\r\n                </div>\r\n                <div class=\"sub-header mb-3 p-3\">\r\n                    <h6 class=\"mb-0 sub-header-text\">Select Your Preferred Scheme</h6>\r\n                </div>\r\n                <div class=\"calculator-body-top d-flex mb-4 px-3\">\r\n                    <ng-container *ngFor=\"let scheme of allSchemes\">\r\n                        <div class=\"form-check scheme-option  p-3 border rounded border-primary ind-border\"\r\n                            (click)=\"onSchemeChange(scheme)\">\r\n                            <input class=\"form-check-input cursor-pointer\" type=\"radio\" name=\"scheme\" id=\"individual\"\r\n                                (change)=\"onSchemeChange(scheme)\" [checked]=\"scheme.selected\">\r\n                            <div class=\"form-check-label ms-2\">\r\n                                <div class=\"d-flex align-items-center mb-2\">\r\n                                    \uD83D\uDC64\r\n                                    <div class=\"scheme-header fw-bold\">{{scheme?.schemeName ? scheme.schemeName :\r\n                                        'N/A'}}</div>\r\n                                </div>\r\n                                <div class=\"scheme-description text-muted small\">Pay 10 months, get 11th month FREE\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n                <div class=\"gold-purity\"\r\n                    *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n                    <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? [0,0,0]\">\r\n                        <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\"\r\n                            alt=\"\" *ngIf=\"gold?.karats === '_18k'\">\r\n                        <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\"\r\n                            alt=\"\" *ngIf=\"gold?.karats === '_24k'\">\r\n                        <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\"\r\n                            alt=\"\" *ngIf=\"gold?.karats === '_22k'\">\r\n                        <div>\r\n                            <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\r\n                            <div class=\"gold-price\">\u20B9{{gold.price}}</div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"sub-header mb-3 px-3 monthly-scheme\" *ngIf=\"minAmount && maxAmount\">\r\n                    <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n                    <p class=\"enrolled-gram\"\r\n                        *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n                        {{purchasedGram}} gms</p>\r\n                </div>\r\n\r\n                <div class=\"calculate-slider mb-4 px-3\" *ngIf=\"minAmount && maxAmount\">\r\n                    <div class=\"slider-container position-relative\">\r\n                        <mat-slider [min]=\"minAmount\" [max]=\"maxAmount\" [step]=\"enrolledScheme?.valueStep\"\r\n                            class=\"w-100 pale-slider\"\r\n                            [style.--mdc-slider-handle-color]=\"styles?.background?.accentColor\"\r\n                            [style.--mdc-slider-focus-handle-color]=\"styles?.background?.accentColor\"\r\n                            [style.--mdc-slider-hover-handle-color]=\"styles?.background?.accentColor\"\r\n                            [style.--mdc-slider-active-track-color]=\"styles?.background?.accentColor\"\r\n                            [style.--mdc-slider-with-tick-marks-active-container-color]=\"styles?.background?.accentColor\"\r\n                            [style.--mat-slider-ripple-color]=\"styles?.background?.accentColor\"\r\n                            [style.--mat-slider-value-indicator-color]=\"styles?.background?.accentColor\">\r\n                            <input matSliderThumb [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\">\r\n                        </mat-slider>\r\n                        <!-- <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n                            [step]=\"enrolledScheme?.valueStep\" [(ngModel)]=\"monthlyAmount\"\r\n                            (ngModelChange)=\"onAmountChange()\"> -->\r\n                        <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n                            <span class=\"text-muted\">\u20B9{{minAmount | number}}</span>\r\n                            <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n                            <span class=\"text-muted\">\u20B9{{maxAmount | number}}</span>\r\n                        </div>\r\n                        <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n                    </div>\r\n                    <div class=\"random_opitons d-flex justify-content-center gap-3 align-items-center flex-wrap\"\r\n                        *ngIf=\"installmentOptions && installmentOptions.length > 0\">\r\n                        <div class=\"option cursor-pointer\" *ngFor=\"let option of installmentOptions\"\r\n                            [ngStyle]=\"option.status ? {'border': '2px solid grey','font-weight':'bold'} : {}\"\r\n                            (click)=\"setMonthlyAmount(option)\">\r\n                            \u20B9 {{option?.value ? option?.value : 'N/A'}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"calculator-bottom px-3 mb-5\">\r\n                    <div class=\"scheme-results\">\r\n                        <!-- <div class=\"d-flex align-items-center mb-3\">\r\n                            \u2B50 <h6 class=\"mb-0 individual-results-title\">Individual Scheme Results</h6>\r\n                        </div> -->\r\n\r\n                        <div class=\"row mb-3\">\r\n                            <div [class]=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' ? 'col-6' : 'col-4'\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * maturityCount) |\r\n                                        number}}</div>\r\n                                    <div class=\"result-label text-muted small\">Your {{maturityCount}}-Month Contribution\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{benefitAmount | number}}</div>\r\n                                    <div class=\"result-label text-muted small\">Scheme Benefit</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\r\n                                <div class=\"result-card result-card-highlight text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\"\r\n                                        *ngIf=\"enrolledScheme?.benefitType != 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n                                        maturityCount)+benefitAmount) | number}}</div>\r\n                                    <div class=\"result-amount fw-bold fs-5\"\r\n                                        *ngIf=\"enrolledScheme?.benefitType === 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n                                        maturityCount)) | number}}</div>\r\n                                    <div class=\"result-label small opacity-75\">Total Redemption Value</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-6\" *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION'\">\r\n                                <div class=\"result-card text-center p-3 border rounded result-card-highlight\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">{{purchasedGram}} gms</div>\r\n                                    <div class=\"result-label  small color-white\">Gold Allocation Today\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\r\n                            *ngIf=\"enrolledScheme && (stores.length >= 2 || staffMembers.length >= 2) \">\r\n                            <div class=\"store_selection  w-50 align-items-center gap-1\" *ngIf=\"stores.length >= 2\">\r\n                                <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\r\n                                        Store : </span></div>\r\n                                <div class=\"store-selector\">\r\n                                    <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\r\n                                        (ngModelChange)=\"getMetalPrice()\">\r\n                                        <option [ngValue]=\"null\" disabled>Choose a store...</option>\r\n                                        <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\r\n                                            {{store.name}} - {{store.storeRefId}}\r\n                                        </option>\r\n                                    </select>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"staff-selector w-50  align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\r\n                                <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\r\n                                        Staff Member : </span></div>\r\n                                <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\r\n                                    <option value=\"\" disabled>Choose a staff member...</option>\r\n                                    <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\r\n                                        {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\r\n                                    </option>\r\n                                </select>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"terms-and-condition\" *ngIf=\"enrolledScheme\">\r\n                            <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a\r\n                                (click)=\"goToTermsAndCondition()\">Terms & Conditions</a>\r\n                        </div>\r\n                        <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n                            simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n                            [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\"\r\n                            (click)=\"enrollScheme(enrolledScheme)\"\r\n                            [style.borderColor]=\"styles?.background?.accentColor\">\r\n                            <span *ngIf=\"!enrollButtonLoader\">Enroll in Scheme</span>\r\n                            <ng-container *ngIf=\"enrollButtonLoader\">\r\n                                <div class=\"d-flex align-items-center justify-content-center\">\r\n                                    <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\r\n                                    Loading...\r\n                                </div>\r\n                            </ng-container>\r\n                        </button>\r\n                    </div>\r\n                    <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n                        <div class=\"d-flex align-items-center mb-3\">\r\n                            \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n                        </div>\r\n\r\n                        <div class=\"row mb-3\">\r\n                            <div class=\"col-6\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                                    <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-6\">\r\n                                <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                                    <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n                            simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n                            [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n                            Enroll in Scheme\r\n                        </button>\r\n                    </div> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <ng-template #showCharges>\r\n        <div class=\"payment-dialog\">\r\n            <div class=\"dialog-header\">\r\n                <h2>Payment Details</h2>\r\n                <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\r\n                    <mat-icon>close</mat-icon>\r\n                </button>\r\n            </div>\r\n\r\n            <div class=\"payment-content\">\r\n                <div class=\"payment-row\">\r\n                    <span class=\"label\">Installment Amount:</span>\r\n                    <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n                        (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n                </div>\r\n\r\n                <div class=\"payment-row\">\r\n                    <span class=\"label\">Convenience Fee:</span>\r\n                    <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n                        (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n                </div>\r\n\r\n                <div class=\"payment-row\">\r\n                    <span class=\"label\">Payment Service Charges:</span>\r\n                    <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n                        (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n                </div>\r\n\r\n                <div class=\"payment-row total-row\">\r\n                    <span class=\"label total-label\">Total Amount:</span>\r\n                    <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n                        (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"dialog-actions\">\r\n                <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\r\n            </div>\r\n        </div>\r\n    </ng-template>\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\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</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.bx-shd{box-shadow:#ffffff1a 0 1px 1px inset,#32325d40 0 50px 100px -20px,#0000004d 0 30px 60px -30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.calculator{border-radius:12px;box-shadow:0 4px 6px #0000001a}.calculator-header{background:linear-gradient(145deg,#f2e8cb,#d1c29e);color:#fff;padding:15px;border-radius:8px 8px 0 0}.calculator-title{color:#000;font-weight:600}.sub-header-text{color:#666;font-weight:500}.w-48{width:48%!important}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.random_opitons{padding:1%}.option{padding:1% 2%;border:1px solid lightgrey;border-radius:50px}.payment-row:last-child{margin-bottom:0}.label{color:#666;font-size:14px;font-weight:400}.amount{color:#333;font-size:14px;font-weight:500}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}.mat-dialog-container{padding:0!important;border-radius:12px!important}.scheme-option{cursor:pointer;transition:all .3s ease;min-width:22vw}.form-check-input:checked{background-color:#d63384;border-color:#d63384}.form-check-input:focus{box-shadow:0 0 0 .25rem #d6338440}.scheme-header{font-size:16px;margin-bottom:5px;color:#333}.scheme-description{font-size:13px;line-height:1.4}.custom-range{height:8px;border-radius:5px;outline:none}.custom-range::-webkit-slider-thumb{appearance:none;width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0003}.custom-range::-moz-range-thumb{width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #0003}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.monthly-amount{color:#d4a574}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{background:#d4a574;color:#fff}.result-card-group{background:#d63384;color:#fff}.ind-border{border:2px solid rgb(201,176,130)!important}.grp-border{border:2px solid rgb(214,51,132)!important}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.spinner{width:30px;height:30px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.bonus-text{color:#d4a574;font-weight:500}.scheme-results{background:#fff;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.group-results-title{color:#d63384;font-weight:600}.enroll-btn{font-size:16px;border:1px solid}.calculator-body-top{overflow-y:scroll;gap:2rem}@media (max-width: 768px){.calculator{width:95%!important}.scheme-results .row{flex-direction:column}.scheme-results :is(.col-4,.col-6){width:100%!important}.calculator-body-top{flex-direction:column!important}.w-48{width:100%!important;margin-bottom:15px}.row .col-4,.row .col-6,.scheme-option{margin-bottom:15px}}@media (max-width:475px){.gold-purity{flex-wrap:wrap;gap:.5rem!important;padding:.5rem}.enrolled-gram{font-size:1rem;white-space:nowrap}.bonus-message{flex-direction:column}.staff-selector,.store_selection{width:100%!important}.scheme-results{padding:20px 0}}.gold-purity{padding-left:1rem;padding-bottom:15px;display:flex;gap:15px}.gold-purity .purity{display:flex;gap:10px;background:#fff7d0;width:max-content;padding:5px 8px;border-radius:11px;align-items:center}.gold-purity .purity img{height:40px}.gold-purity .purity div{font-size:12px}.gold-purity .purity .gold-price{font-weight:700}.enrolled-gram{margin-bottom:0;font-size:17px;font-weight:600}.monthly-scheme{display:flex;justify-content:space-between}.color-white{color:#fff}.terms-and-condition{display:flex;align-items:center;gap:10px;margin-bottom:10px}.terms-and-condition input{cursor:pointer}a{color:#0d6efd!important;text-decoration:underline!important;cursor:pointer}a:hover{color:#0a58ca!important}\n"] }]
+                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n    <div class=\"main-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoLayout]=\"stylesLayout\">\r\n        <div class=\"headers w-100\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <ng-container *ngFor=\"let item of data?.content?.inputText\">\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <div class=\"calculator bx-shd w-75 mx-auto my-3\">\r\n                <div class=\"calculator-header text-center mb-4  w-100\">\r\n                    <h3 class=\"mb-0 calculator-title\">Interactive Returns Calculator</h3>\r\n                </div>\r\n                <div class=\"sub-header mb-3 p-3\">\r\n                    <h6 class=\"mb-0 sub-header-text\">Select Your Preferred Scheme</h6>\r\n                </div>\r\n                <div class=\"calculator-body-top d-flex mb-4 px-3\">\r\n                    <ng-container *ngFor=\"let scheme of allSchemes\">\r\n                        <div class=\"form-check scheme-option  p-3 border rounded border-primary ind-border\"\r\n                            (click)=\"onSchemeChange(scheme)\">\r\n                            <input class=\"form-check-input cursor-pointer\" type=\"radio\" name=\"scheme\" id=\"individual\"\r\n                                (change)=\"onSchemeChange(scheme)\" [checked]=\"scheme.selected\">\r\n                            <div class=\"form-check-label ms-2\">\r\n                                <div class=\"d-flex align-items-center mb-2\">\r\n                                    \uD83D\uDC64\r\n                                    <div class=\"scheme-header fw-bold\">{{scheme?.schemeName ? scheme.schemeName :\r\n                                        'N/A'}}</div>\r\n                                </div>\r\n                                <div class=\"scheme-description text-muted small\">Pay 10 months, get 11th month FREE\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n                <div class=\"gold-purity\"\r\n                    *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n                    <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? [0,0,0]\">\r\n                        <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\"\r\n                            alt=\"\" *ngIf=\"gold?.karats === '_18k'\">\r\n                        <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\"\r\n                            alt=\"\" *ngIf=\"gold?.karats === '_24k'\">\r\n                        <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\"\r\n                            alt=\"\" *ngIf=\"gold?.karats === '_22k'\">\r\n                        <div>\r\n                            <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\r\n                            <div class=\"gold-price\">\u20B9{{gold.price}}</div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"sub-header mb-3 px-3 monthly-scheme\" *ngIf=\"minAmount && maxAmount\">\r\n                    <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n                    <p class=\"enrolled-gram\"\r\n                        *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n                        {{purchasedGram}} gms</p>\r\n                </div>\r\n\r\n                <div class=\"calculate-slider mb-4 px-3\" *ngIf=\"minAmount && maxAmount\">\r\n                    <div class=\"slider-container position-relative\">\r\n                        <mat-slider [min]=\"minAmount\" [max]=\"maxAmount\" [step]=\"enrolledScheme?.valueStep\"\r\n                            class=\"w-100 pale-slider\"\r\n                            [style.--mdc-slider-handle-color]=\"styles?.background?.accentColor\"\r\n                            [style.--mdc-slider-focus-handle-color]=\"styles?.background?.accentColor\"\r\n                            [style.--mdc-slider-hover-handle-color]=\"styles?.background?.accentColor\"\r\n                            [style.--mdc-slider-active-track-color]=\"styles?.background?.accentColor\"\r\n                            [style.--mdc-slider-with-tick-marks-active-container-color]=\"styles?.background?.accentColor\"\r\n                            [style.--mat-slider-ripple-color]=\"styles?.background?.accentColor\"\r\n                            [style.--mat-slider-value-indicator-color]=\"styles?.background?.accentColor\">\r\n                            <input matSliderThumb [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\">\r\n                        </mat-slider>\r\n                        <!-- <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n                            [step]=\"enrolledScheme?.valueStep\" [(ngModel)]=\"monthlyAmount\"\r\n                            (ngModelChange)=\"onAmountChange()\"> -->\r\n                        <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n                            <span class=\"text-muted\">\u20B9{{minAmount | number}}</span>\r\n                            <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n                            <span class=\"text-muted\">\u20B9{{maxAmount | number}}</span>\r\n                        </div>\r\n                        <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n                    </div>\r\n                    <div class=\"random_opitons d-flex justify-content-center gap-3 align-items-center flex-wrap\"\r\n                        *ngIf=\"installmentOptions && installmentOptions.length > 0\">\r\n                        <div class=\"option cursor-pointer\" *ngFor=\"let option of installmentOptions\"\r\n                            [ngStyle]=\"option.status ? {'border': '2px solid grey','font-weight':'bold'} : {}\"\r\n                            (click)=\"setMonthlyAmount(option)\">\r\n                            \u20B9 {{option?.value ? option?.value : 'N/A'}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"calculator-bottom px-3 mb-5\">\r\n                    <div class=\"scheme-results\">\r\n                        <!-- <div class=\"d-flex align-items-center mb-3\">\r\n                            \u2B50 <h6 class=\"mb-0 individual-results-title\">Individual Scheme Results</h6>\r\n                        </div> -->\r\n\r\n                        <div class=\"row mb-3\">\r\n                            <div [class]=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' ? 'col-6' : 'col-4'\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * maturityCount) |\r\n                                        number}}</div>\r\n                                    <div class=\"result-label text-muted small\">Your {{maturityCount}}-Month Contribution\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{benefitAmount | number}}</div>\r\n                                    <div class=\"result-label text-muted small\">Scheme Benefit</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\r\n                                <div class=\"result-card result-card-highlight text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\"\r\n                                        *ngIf=\"enrolledScheme?.benefitType != 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n                                        maturityCount)+benefitAmount) | number}}</div>\r\n                                    <div class=\"result-amount fw-bold fs-5\"\r\n                                        *ngIf=\"enrolledScheme?.benefitType === 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n                                        maturityCount)) | number}}</div>\r\n                                    <div class=\"result-label small opacity-75\">Total Redemption Value</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-6\" *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION'\">\r\n                                <div class=\"result-card text-center p-3 border rounded result-card-highlight\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">{{purchasedGram}} gms</div>\r\n                                    <div class=\"result-label  small color-white\">Gold Allocation Today\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\r\n                            *ngIf=\"enrolledScheme && (stores.length >= 2 || staffMembers.length >= 2) \">\r\n                            <div class=\"store_selection  w-50 align-items-center gap-1\" *ngIf=\"stores.length >= 2\">\r\n                                <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\r\n                                        Store : </span></div>\r\n                                <div class=\"store-selector\">\r\n                                    <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\r\n                                        (ngModelChange)=\"getMetalPrice()\">\r\n                                        <option [ngValue]=\"null\" disabled>Choose a store...</option>\r\n                                        <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\r\n                                            {{store.name}} - {{store.storeRefId}}\r\n                                        </option>\r\n                                    </select>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"staff-selector w-50  align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\r\n                                <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\r\n                                        Staff Member : </span></div>\r\n                                <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\r\n                                    <option value=\"\" disabled>Choose a staff member...</option>\r\n                                    <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\r\n                                        {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\r\n                                    </option>\r\n                                </select>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"terms-and-condition\" *ngIf=\"enrolledScheme\">\r\n                            <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a\r\n                                (click)=\"goToTermsAndCondition()\">Terms & Conditions</a>\r\n                        </div>\r\n                        <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n                            simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n                            [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\"\r\n                            (click)=\"enrollScheme(enrolledScheme)\"\r\n                            [style.borderColor]=\"styles?.background?.accentColor\">\r\n                            <span *ngIf=\"!enrollButtonLoader\">Enroll in Scheme</span>\r\n                            <ng-container *ngIf=\"enrollButtonLoader\">\r\n                                <div class=\"d-flex align-items-center justify-content-center\">\r\n                                    <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\r\n                                    Loading...\r\n                                </div>\r\n                            </ng-container>\r\n                        </button>\r\n                    </div>\r\n                    <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n                        <div class=\"d-flex align-items-center mb-3\">\r\n                            \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n                        </div>\r\n\r\n                        <div class=\"row mb-3\">\r\n                            <div class=\"col-6\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                                    <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-6\">\r\n                                <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                                    <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n                            simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n                            [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n                            Enroll in Scheme\r\n                        </button>\r\n                    </div> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <ng-template #showCharges>\r\n        <div class=\"payment-dialog\">\r\n            <div class=\"dialog-header\">\r\n                <h2>Payment Details</h2>\r\n                <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\r\n                    <mat-icon>close</mat-icon>\r\n                </button>\r\n            </div>\r\n\r\n            <div class=\"payment-content\">\r\n                <div class=\"payment-row\">\r\n                    <span class=\"label\">Installment Amount:</span>\r\n                    <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n                        (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n                </div>\r\n\r\n                <div class=\"payment-row\">\r\n                    <span class=\"label\">Convenience Fee:</span>\r\n                    <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n                        (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n                </div>\r\n\r\n                <div class=\"payment-row\">\r\n                    <span class=\"label\">Payment Service Charges:</span>\r\n                    <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n                        (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n                </div>\r\n\r\n                <div class=\"payment-row total-row\">\r\n                    <span class=\"label total-label\">Total Amount:</span>\r\n                    <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n                        (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"dialog-actions\">\r\n                <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\r\n            </div>\r\n        </div>\r\n    </ng-template>\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\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</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.bx-shd{box-shadow:#ffffff1a 0 1px 1px inset,#32325d40 0 50px 100px -20px,#0000004d 0 30px 60px -30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.calculator{border-radius:12px;box-shadow:0 4px 6px #0000001a}.calculator-header{background:linear-gradient(145deg,#f2e8cb,#d1c29e);color:#fff;padding:15px;border-radius:8px 8px 0 0}.calculator-title{color:#000;font-weight:600}.sub-header-text{color:#666;font-weight:500}.w-48{width:48%!important}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.random_opitons{padding:1%}.option{padding:1% 2%;border:1px solid lightgrey;border-radius:50px}.payment-row:last-child{margin-bottom:0}.label{color:#666;font-size:14px;font-weight:400}.amount{color:#333;font-size:14px;font-weight:500}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}.mat-dialog-container{padding:0!important;border-radius:12px!important}.scheme-option{cursor:pointer;transition:all .3s ease;min-width:22vw}.form-check-input:checked{background-color:#d63384;border-color:#d63384}.form-check-input:focus{box-shadow:0 0 0 .25rem #d6338440}.scheme-header{font-size:16px;margin-bottom:5px;color:#333}.scheme-description{font-size:13px;line-height:1.4}.custom-range{height:8px;border-radius:5px;outline:none}.custom-range::-webkit-slider-thumb{appearance:none;width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0003}.custom-range::-moz-range-thumb{width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #0003}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.monthly-amount{color:#d4a574}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{background:#d4a574;color:#fff}.result-card-group{background:#d63384;color:#fff}.ind-border{border:2px solid rgb(201,176,130)!important}.grp-border{border:2px solid rgb(214,51,132)!important}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.spinner{width:30px;height:30px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.bonus-text{color:#d4a574;font-weight:500}.scheme-results{background:#fff;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.group-results-title{color:#d63384;font-weight:600}.enroll-btn{font-size:16px;border:1px solid}.calculator-body-top{overflow-y:scroll;gap:2rem}@media (max-width: 768px){.calculator{width:95%!important}.scheme-results .row{flex-direction:column}.scheme-results :is(.col-4,.col-6){width:100%!important}.calculator-body-top{flex-direction:column!important}.w-48{width:100%!important;margin-bottom:15px}.row .col-4,.row .col-6,.scheme-option{margin-bottom:15px}}@media (max-width:475px){.gold-purity{flex-wrap:wrap;gap:.5rem!important;padding:.5rem}.enrolled-gram{font-size:1rem;white-space:nowrap}.bonus-message{flex-direction:column}.staff-selector,.store_selection{width:100%!important}.scheme-results{padding:20px 0}}.gold-purity{padding-left:1rem;padding-bottom:15px;display:flex;gap:15px}.gold-purity .purity{display:flex;gap:10px;background:#fff7d0;width:max-content;padding:5px 8px;border-radius:11px;align-items:center}.gold-purity .purity img{height:40px}.gold-purity .purity div{font-size:12px}.gold-purity .purity .gold-price{font-weight:700}.enrolled-gram{margin-bottom:0;font-size:17px;font-weight:600}.monthly-scheme{display:flex;justify-content:space-between}.color-white{color:#fff}.terms-and-condition{display:flex;align-items:center;gap:10px;margin-bottom:10px}.terms-and-condition input{cursor:pointer}a{color:#0d6efd!important;text-decoration:underline!important;cursor:pointer}a:hover{color:#0a58ca!important}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: RestService }, { type: i1$1.MatDialog }, { type: StorageServiceService }, { type: i2$2.Router }, { type: i6$1.MessageService }], propDecorators: { showChargesTemplate: [{
                 type: ViewChild,
                 args: ['showCharges', { static: true }]