simpo-component-library 3.6.518 → 3.6.520

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/esm2022/lib/components/image-loading/image-loading.component.mjs +2 -2
  2. package/esm2022/lib/ecommerce/sections/featured-category/featured-category.component.mjs +3 -3
  3. package/esm2022/lib/ecommerce/sections/featured-category/featured-collection.component.mjs +3 -3
  4. package/esm2022/lib/ecommerce/sections/featured-products/featured-products.component.mjs +4 -4
  5. package/esm2022/lib/ecommerce/sections/new-collection/new-collection.component.mjs +3 -3
  6. package/esm2022/lib/ecommerce/sections/small-product-listing/small-product-listing.component.mjs +3 -3
  7. package/esm2022/lib/sections/appointment-form/appointment-booking/appointment-booking/appointment-booking.component.mjs +4 -4
  8. package/fesm2022/simpo-component-library.mjs +16 -16
  9. package/fesm2022/simpo-component-library.mjs.map +1 -1
  10. package/lib/ecommerce/sections/authentication-required/authentication-required.component.d.ts +1 -1
  11. package/lib/ecommerce/sections/product-desc/product-desc.component.d.ts +1 -1
  12. package/lib/ecommerce/sections/schemes/schemes.component.d.ts +1 -1
  13. package/lib/sections/banner-carousel/banner-carousel.component.d.ts +2 -2
  14. package/lib/sections/carousel-banner/carousel-banner.component.d.ts +1 -1
  15. package/lib/sections/contact-us/contact-us.component.d.ts +1 -1
  16. package/lib/sections/faq-section/faq-section.component.d.ts +1 -1
  17. package/lib/sections/image-section/image-section.component.d.ts +2 -2
  18. package/lib/sections/logo-showcase/logo-showcase.component.d.ts +2 -2
  19. package/lib/sections/new-testimonials/new-testimonials.component.d.ts +1 -1
  20. package/lib/sections/pricing-section/pricing-section.component.d.ts +2 -2
  21. package/package.json +1 -1
  22. package/simpo-component-library-3.6.520.tgz +0 -0
  23. package/simpo-component-library-3.6.518.tgz +0 -0
package/fesm2022/simpo-component-library.mjs CHANGED
@@ -13043,7 +13043,7 @@ class AppointmentBookingComponent {
13043
13043
  this.activeButton = true;
13044
13044
  }
13045
13045
  checkRequiredValues() {
13046
- if (this.appointmentPayload.customerDetail.name && this.appointmentPayload.customerDetail.email && this.appointmentPayload.customerDetail.phoneNumber.length === 10 && this.termsAndConditions) {
13046
+ if (this.appointmentPayload.customerDetail.name && this.appointmentPayload.customerDetail.email.includes('@') && this.appointmentPayload.customerDetail.phoneNumber.length === 10 && this.termsAndConditions) {
13047
13047
  this.activeButton = true;
13048
13048
  // console.log(this.selectedService, this.selectedLocation, this.selectedStaff, this.selectedDate, this.selectedTime, this.userDetails)
13049
13049
  }
@@ -13116,11 +13116,11 @@ class AppointmentBookingComponent {
13116
13116
  }
13117
13117
  }
13118
13118
  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 }); }
13119
- 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 Home</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 *ngIf=\"!skeletonLoader\">\r\n <ng-container *ngTemplateOutlet=\"serviceListing\"></ng-container>\r\n </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\" [ngStyle]=\"{'justify-content': selectedTab != 'serviceListing' ? 'space-between' : 'end'}\">\r\n <span class=\"back-footer-btn cursor-pointer\" (click)=\"previousStep()\" *ngIf=\"selectedTab != 'serviceListing'\">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=\"cursor-pointer d-flex justify-content-evenly align-items-center\"\r\n *ngIf=\"selectedTab==='paymentTab'\" (click)=\"checkPayment()\"\r\n [ngClass]=\"{'pay-now-btn' : selectedService?.depositAmount?.depositRequired,'complete_booking' : !selectedService?.depositAmount?.depositRequired}\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">{{selectedService?.depositAmount?.depositRequired\r\n ? 'Pay Now' : '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\" *ngIf=\"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 staff-listing\">\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>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=\"card rounded-3 p-3\" (click)=\"selectStaff(staff)\"\r\n [ngClass]=\"{ 'staff-card-selected' : staff?.selected, 'staff-card': !staff?.selected }\">\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>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 justify-content-between\"\r\n (click)=\"$event.stopPropagation()\">\r\n <input type=\"text\" class=\"date-input border-0 rounded-2\" placeholder=\"dd-mm-yyyy\"\r\n [value]=\"selectedDateStr\" readonly (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 <ng-container *ngIf=\"!skeletonLoader ;else slotsLoader\">\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 : 'N/A'}}</div>\r\n </div>\r\n </ng-container>\r\n <ng-template #slotsLoader>\r\n <!-- Time Slot Grid Skeleton Loader HTML -->\r\n <div class=\"time-slot-grid\">\r\n <!-- Row 1 -->\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n\r\n <!-- Row 2 -->\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n\r\n <!-- Row 3 -->\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n\r\n <!-- Row 4 -->\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n\r\n <!-- Row 5 -->\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n\r\n <!-- Row 6 -->\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n </div>\r\n\r\n </ng-template>\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 overflow-hidden\">\r\n <div class=\"d-flex h-100\">\r\n <div class=\"h-100 w-100\">\r\n <!-- Header Section -->\r\n <div class=\"contact-header mb-2\">\r\n <h1>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\" [(ngModel)]=\"homeAddress\"></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)\" [(ngModel)]=\"instructions\"></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\" [(ngModel)]=\"termsAndConditions\"\r\n (ngModelChange)=\"checkRequiredValues()\">\r\n <p class=\"acceptance-text\">\r\n I understand and accept the cancellation & rescheduling policies and\r\n <span class=\"terms-link\">Terms & Conditions<span\r\n class=\"external-link-icon\"></span></span>\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>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\" *ngIf=\"selectedStaff?.staffName\">\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 {{selectedTime ? selectedTime.value : 'N/A'}}</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?.totalPrice ?\r\n selectedService?.priceDetails?.totalPrice : '0'}}\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\" *ngIf=\"appointmentPayload?.staffDetail?.name\">\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,10) :\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>\r\n<ng-template #skeletonLoader *ngIf=\"skeletonLoader\">\r\n <!-- Service Skeleton Loader HTML -->\r\n <div class=\"service-grid\">\r\n <!-- Skeleton Card 1 -->\r\n <div class=\"service-card skeleton-card\">\r\n <div class=\"service-header\">\r\n <div class=\"skeleton skeleton-icon\"></div>\r\n <div class=\"service-content\">\r\n <div class=\"skeleton skeleton-title\"></div>\r\n <div class=\"skeleton skeleton-price\"></div>\r\n <div class=\"skeleton skeleton-duration\"></div>\r\n </div>\r\n </div>\r\n <div class=\"skeleton skeleton-category\"></div>\r\n <div class=\"skeleton skeleton-description\"></div>\r\n <div class=\"skeleton skeleton-badge\"></div>\r\n </div>\r\n\r\n <!-- Skeleton Card 2 -->\r\n <div class=\"service-card skeleton-card\">\r\n <div class=\"service-header\">\r\n <div class=\"skeleton skeleton-icon\"></div>\r\n <div class=\"service-content\">\r\n <div class=\"skeleton skeleton-title\"></div>\r\n <div class=\"skeleton skeleton-price\"></div>\r\n <div class=\"skeleton skeleton-duration\"></div>\r\n </div>\r\n </div>\r\n <div class=\"skeleton skeleton-category\"></div>\r\n <div class=\"skeleton skeleton-description\"></div>\r\n <div class=\"skeleton skeleton-badge\"></div>\r\n </div>\r\n\r\n <!-- Skeleton Card 3 -->\r\n <div class=\"service-card skeleton-card\">\r\n <div class=\"service-header\">\r\n <div class=\"skeleton skeleton-icon\"></div>\r\n <div class=\"service-content\">\r\n <div class=\"skeleton skeleton-title\"></div>\r\n <div class=\"skeleton skeleton-price\"></div>\r\n <div class=\"skeleton skeleton-duration\"></div>\r\n </div>\r\n </div>\r\n <div class=\"skeleton skeleton-category\"></div>\r\n <div class=\"skeleton skeleton-description\"></div>\r\n <div class=\"skeleton skeleton-badge\"></div>\r\n </div>\r\n\r\n <!-- Skeleton Card 4 -->\r\n <div class=\"service-card skeleton-card\">\r\n <div class=\"service-header\">\r\n <div class=\"skeleton skeleton-icon\"></div>\r\n <div class=\"service-content\">\r\n <div class=\"skeleton skeleton-title\"></div>\r\n <div class=\"skeleton skeleton-price\"></div>\r\n <div class=\"skeleton skeleton-duration\"></div>\r\n </div>\r\n </div>\r\n <div class=\"skeleton skeleton-category\"></div>\r\n <div class=\"skeleton skeleton-description\"></div>\r\n <div class=\"skeleton skeleton-badge\"></div>\r\n </div>\r\n\r\n <!-- Skeleton Card 5 -->\r\n <div class=\"service-card skeleton-card\">\r\n <div class=\"service-header\">\r\n <div class=\"skeleton skeleton-icon\"></div>\r\n <div class=\"service-content\">\r\n <div class=\"skeleton skeleton-title\"></div>\r\n <div class=\"skeleton skeleton-price\"></div>\r\n <div class=\"skeleton skeleton-duration\"></div>\r\n </div>\r\n </div>\r\n <div class=\"skeleton skeleton-category\"></div>\r\n <div class=\"skeleton skeleton-description\"></div>\r\n <div class=\"skeleton skeleton-badge\"></div>\r\n </div>\r\n\r\n <!-- Skeleton Card 6 -->\r\n <div class=\"service-card skeleton-card\">\r\n <div class=\"service-header\">\r\n <div class=\"skeleton skeleton-icon\"></div>\r\n <div class=\"service-content\">\r\n <div class=\"skeleton skeleton-title\"></div>\r\n <div class=\"skeleton skeleton-price\"></div>\r\n <div class=\"skeleton skeleton-duration\"></div>\r\n </div>\r\n </div>\r\n <div class=\"skeleton skeleton-category\"></div>\r\n <div class=\"skeleton skeleton-description\"></div>\r\n <div class=\"skeleton skeleton-badge\"></div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", 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_section{position:relative;height:100%}.main_header{padding:1%;width:100%;background:#fff;height:15%}.main_body{height:75%;padding-top:0%;overflow:scroll}.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 h2{font-size:20px;font-weight:600;margin:.25rem 0}.service-selection p{color:#666;font-size:16px;margin-bottom:1rem}.main_footer{border-top:1px solid lightgrey;width:100%;background-color:#fff;height:10%}.services-grid{display:grid;grid-template-columns:48% 48%;gap:15px;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;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:.25rem 0}.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;margin:.25rem 0}.staff-subtitle{font-size:16px;color:#888;font-weight:400}.staff-card{border:1px solid lightgrey;cursor:pointer;transition:all .3s ease}.staff-card:hover{box-shadow:0 4px 8px #0000001a}.staff-card-selected{border-color:#666;cursor:pointer;transition:all .3s ease}.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:.25rem 0}.main_container{height:85%}.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%;outline:none}.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;margin:.25rem 0}.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:89%;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;margin:.25rem 0}.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}.pay-now-btn{justify-content:unset!important;background:#e3fee3;border:none;padding:.5%;width:8vw!important;font-size:15px!important;font-weight:500;border-radius:4px;gap:.5rem}.pay-now-btn 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}.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;padding:20px;width:60%}.service-card{border:1px solid #e5e5e5;border-radius:8px;padding:20px;background:#fff;box-shadow:0 2px 4px #0000001a}.service-header{display:flex;align-items:flex-start;gap:15px;margin-bottom:15px}.service-content{flex:1;display:flex;flex-direction:column;gap:8px}.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-icon{width:40px;height:40px;border-radius:50%;flex-shrink:0}.skeleton-title{height:20px;width:70%}.skeleton-price{height:18px;width:50%;align-self:flex-end}.skeleton-duration{height:14px;width:40%;align-self:flex-end}.skeleton-category{height:24px;width:25%;border-radius:12px;margin-bottom:10px}.skeleton-description{height:16px;width:85%;margin-bottom:15px}.skeleton-badge{height:32px;width:45%;border-radius:16px;margin-top:10px}@media (max-width: 768px){.service-grid{grid-template-columns:1fr;gap:15px;padding:15px}.service-card{padding:15px}}.time-slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px;max-width:400px;margin:0 auto}.skeleton-time-slot{height:44px;border-radius:8px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite;border:1px solid #e5e5e5;position:relative}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-time-slot:nth-child(2n){animation:skeleton-pulse 2s infinite}@keyframes skeleton-pulse{0%,to{opacity:1}50%{opacity:.7}}@media (max-width: 480px){.time-slot-grid{grid-template-columns:repeat(2,1fr);gap:10px;padding:12px}.skeleton-time-slot{height:40px}}@media (max-width: 320px){.time-slot-grid{grid-template-columns:1fr}}@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}.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}.datetime-header h1{margin:0!important}}@media screen and (max-width: 475px){.main_header{height:10%}.main_body{height:83%}.main_footer{height:7%}.staff-listing{width:100%!important;padding:0% 5%}.booking-confirmation{width:auto;padding:0rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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"] }] }); }
13119
+ 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 Home</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 *ngIf=\"!skeletonLoader\">\r\n <ng-container *ngTemplateOutlet=\"serviceListing\"></ng-container>\r\n </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 [ngStyle]=\"{'justify-content': selectedTab != 'serviceListing' ? 'space-between' : 'end'}\">\r\n <span class=\"back-footer-btn cursor-pointer\" (click)=\"previousStep()\"\r\n *ngIf=\"selectedTab != 'serviceListing'\">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=\"cursor-pointer d-flex justify-content-evenly align-items-center\"\r\n *ngIf=\"selectedTab==='paymentTab'\" (click)=\"checkPayment()\"\r\n [ngClass]=\"{'pay-now-btn' : selectedService?.depositAmount?.depositRequired,'complete_booking' : !selectedService?.depositAmount?.depositRequired}\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">{{selectedService?.depositAmount?.depositRequired\r\n ? 'Pay Now' : '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\" *ngIf=\"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 staff-listing\">\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>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=\"card rounded-3 p-3\" (click)=\"selectStaff(staff)\"\r\n [ngClass]=\"{ 'staff-card-selected' : staff?.selected, 'staff-card': !staff?.selected }\">\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>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 justify-content-between\"\r\n (click)=\"$event.stopPropagation()\">\r\n <input type=\"text\" class=\"date-input border-0 rounded-2\" placeholder=\"dd-mm-yyyy\"\r\n [value]=\"selectedDateStr\" readonly (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 <ng-container *ngIf=\"!skeletonLoader ;else slotsLoader\">\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 : 'N/A'}}</div>\r\n </div>\r\n </ng-container>\r\n <ng-template #slotsLoader>\r\n <!-- Time Slot Grid Skeleton Loader HTML -->\r\n <div class=\"time-slot-grid\">\r\n <!-- Row 1 -->\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n\r\n <!-- Row 2 -->\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n\r\n <!-- Row 3 -->\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n\r\n <!-- Row 4 -->\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n\r\n <!-- Row 5 -->\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n\r\n <!-- Row 6 -->\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n </div>\r\n\r\n </ng-template>\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 overflow-hidden\">\r\n <div class=\"d-flex h-100\">\r\n <div class=\"h-100 w-100\">\r\n <!-- Header Section -->\r\n <div class=\"contact-header mb-2\">\r\n <h1>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 pattern=\"^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$\">\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\" [(ngModel)]=\"homeAddress\"></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)\"\r\n [(ngModel)]=\"instructions\"></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\" [(ngModel)]=\"termsAndConditions\"\r\n (ngModelChange)=\"checkRequiredValues()\">\r\n <p class=\"acceptance-text\">\r\n I understand and accept the cancellation & rescheduling policies and\r\n <span class=\"terms-link\">Terms & Conditions<span\r\n class=\"external-link-icon\"></span></span>\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>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\" *ngIf=\"selectedStaff?.staffName\">\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 {{selectedTime ? selectedTime.value : 'N/A'}}</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?.totalPrice ?\r\n selectedService?.priceDetails?.totalPrice : '0'}}\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\" *ngIf=\"appointmentPayload?.staffDetail?.name\">\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,10) :\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>\r\n<ng-template #skeletonLoader *ngIf=\"skeletonLoader\">\r\n <!-- Service Skeleton Loader HTML -->\r\n <div class=\"service-grid\">\r\n <!-- Skeleton Card 1 -->\r\n <div class=\"service-card skeleton-card\">\r\n <div class=\"service-header\">\r\n <div class=\"skeleton skeleton-icon\"></div>\r\n <div class=\"service-content\">\r\n <div class=\"skeleton skeleton-title\"></div>\r\n <div class=\"skeleton skeleton-price\"></div>\r\n <div class=\"skeleton skeleton-duration\"></div>\r\n </div>\r\n </div>\r\n <div class=\"skeleton skeleton-category\"></div>\r\n <div class=\"skeleton skeleton-description\"></div>\r\n <div class=\"skeleton skeleton-badge\"></div>\r\n </div>\r\n\r\n <!-- Skeleton Card 2 -->\r\n <div class=\"service-card skeleton-card\">\r\n <div class=\"service-header\">\r\n <div class=\"skeleton skeleton-icon\"></div>\r\n <div class=\"service-content\">\r\n <div class=\"skeleton skeleton-title\"></div>\r\n <div class=\"skeleton skeleton-price\"></div>\r\n <div class=\"skeleton skeleton-duration\"></div>\r\n </div>\r\n </div>\r\n <div class=\"skeleton skeleton-category\"></div>\r\n <div class=\"skeleton skeleton-description\"></div>\r\n <div class=\"skeleton skeleton-badge\"></div>\r\n </div>\r\n\r\n <!-- Skeleton Card 3 -->\r\n <div class=\"service-card skeleton-card\">\r\n <div class=\"service-header\">\r\n <div class=\"skeleton skeleton-icon\"></div>\r\n <div class=\"service-content\">\r\n <div class=\"skeleton skeleton-title\"></div>\r\n <div class=\"skeleton skeleton-price\"></div>\r\n <div class=\"skeleton skeleton-duration\"></div>\r\n </div>\r\n </div>\r\n <div class=\"skeleton skeleton-category\"></div>\r\n <div class=\"skeleton skeleton-description\"></div>\r\n <div class=\"skeleton skeleton-badge\"></div>\r\n </div>\r\n\r\n <!-- Skeleton Card 4 -->\r\n <div class=\"service-card skeleton-card\">\r\n <div class=\"service-header\">\r\n <div class=\"skeleton skeleton-icon\"></div>\r\n <div class=\"service-content\">\r\n <div class=\"skeleton skeleton-title\"></div>\r\n <div class=\"skeleton skeleton-price\"></div>\r\n <div class=\"skeleton skeleton-duration\"></div>\r\n </div>\r\n </div>\r\n <div class=\"skeleton skeleton-category\"></div>\r\n <div class=\"skeleton skeleton-description\"></div>\r\n <div class=\"skeleton skeleton-badge\"></div>\r\n </div>\r\n\r\n <!-- Skeleton Card 5 -->\r\n <div class=\"service-card skeleton-card\">\r\n <div class=\"service-header\">\r\n <div class=\"skeleton skeleton-icon\"></div>\r\n <div class=\"service-content\">\r\n <div class=\"skeleton skeleton-title\"></div>\r\n <div class=\"skeleton skeleton-price\"></div>\r\n <div class=\"skeleton skeleton-duration\"></div>\r\n </div>\r\n </div>\r\n <div class=\"skeleton skeleton-category\"></div>\r\n <div class=\"skeleton skeleton-description\"></div>\r\n <div class=\"skeleton skeleton-badge\"></div>\r\n </div>\r\n\r\n <!-- Skeleton Card 6 -->\r\n <div class=\"service-card skeleton-card\">\r\n <div class=\"service-header\">\r\n <div class=\"skeleton skeleton-icon\"></div>\r\n <div class=\"service-content\">\r\n <div class=\"skeleton skeleton-title\"></div>\r\n <div class=\"skeleton skeleton-price\"></div>\r\n <div class=\"skeleton skeleton-duration\"></div>\r\n </div>\r\n </div>\r\n <div class=\"skeleton skeleton-category\"></div>\r\n <div class=\"skeleton skeleton-description\"></div>\r\n <div class=\"skeleton skeleton-badge\"></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_section{position:relative;height:100%}.main_header{padding:1%;width:100%;background:#fff;height:15%}.main_body{height:75%;padding-top:0%;overflow:scroll}.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 h2{font-size:20px;font-weight:600;margin:.25rem 0}.service-selection p{color:#666;font-size:16px;margin-bottom:1rem}.main_footer{border-top:1px solid lightgrey;width:100%;background-color:#fff;height:10%}.services-grid{display:grid;grid-template-columns:48% 48%;gap:15px;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;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:.25rem 0}.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;margin:.25rem 0}.staff-subtitle{font-size:16px;color:#888;font-weight:400}.staff-card{border:1px solid lightgrey;cursor:pointer;transition:all .3s ease}.staff-card:hover{box-shadow:0 4px 8px #0000001a}.staff-card-selected{border-color:#666;cursor:pointer;transition:all .3s ease}.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:.25rem 0}.main_container{height:85%}.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:auto;outline:none}.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;margin:.25rem 0}.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:89%;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;margin:.25rem 0}.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}.pay-now-btn{justify-content:unset!important;background:#e3fee3;border:none;padding:.5%;width:8vw!important;font-size:15px!important;font-weight:500;border-radius:4px;gap:.5rem}.pay-now-btn 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}.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;padding:20px;width:60%}.service-card{border:1px solid #e5e5e5;border-radius:8px;padding:20px;background:#fff;box-shadow:0 2px 4px #0000001a}.service-header{display:flex;align-items:flex-start;gap:15px;margin-bottom:15px}.service-content{flex:1;display:flex;flex-direction:column;gap:8px}.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-icon{width:40px;height:40px;border-radius:50%;flex-shrink:0}.skeleton-title{height:20px;width:70%}.skeleton-price{height:18px;width:50%;align-self:flex-end}.skeleton-duration{height:14px;width:40%;align-self:flex-end}.skeleton-category{height:24px;width:25%;border-radius:12px;margin-bottom:10px}.skeleton-description{height:16px;width:85%;margin-bottom:15px}.skeleton-badge{height:32px;width:45%;border-radius:16px;margin-top:10px}@media (max-width: 768px){.service-grid{grid-template-columns:1fr;gap:15px;padding:15px}.service-card{padding:15px}}.time-slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px;max-width:400px;margin:0 auto}.skeleton-time-slot{height:44px;border-radius:8px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite;border:1px solid #e5e5e5;position:relative}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-time-slot:nth-child(2n){animation:skeleton-pulse 2s infinite}@keyframes skeleton-pulse{0%,to{opacity:1}50%{opacity:.7}}@media (max-width: 480px){.time-slot-grid{grid-template-columns:repeat(2,1fr);gap:10px;padding:12px}.skeleton-time-slot{height:40px}}@media (max-width: 320px){.time-slot-grid{grid-template-columns:1fr}}@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}.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}.datetime-header h1{margin:0!important}}@media screen and (max-width: 475px){.main_header{height:10%}.main_body{height:83%}.main_footer{height:7%}.staff-listing{width:100%!important;padding:0% 5%}.booking-confirmation{width:auto;padding:0rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { 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"] }] }); }
13120
13120
  }
13121
13121
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppointmentBookingComponent, decorators: [{
13122
13122
  type: Component,
13123
- 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 Home</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 *ngIf=\"!skeletonLoader\">\r\n <ng-container *ngTemplateOutlet=\"serviceListing\"></ng-container>\r\n </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\" [ngStyle]=\"{'justify-content': selectedTab != 'serviceListing' ? 'space-between' : 'end'}\">\r\n <span class=\"back-footer-btn cursor-pointer\" (click)=\"previousStep()\" *ngIf=\"selectedTab != 'serviceListing'\">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=\"cursor-pointer d-flex justify-content-evenly align-items-center\"\r\n *ngIf=\"selectedTab==='paymentTab'\" (click)=\"checkPayment()\"\r\n [ngClass]=\"{'pay-now-btn' : selectedService?.depositAmount?.depositRequired,'complete_booking' : !selectedService?.depositAmount?.depositRequired}\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">{{selectedService?.depositAmount?.depositRequired\r\n ? 'Pay Now' : '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\" *ngIf=\"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 staff-listing\">\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>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=\"card rounded-3 p-3\" (click)=\"selectStaff(staff)\"\r\n [ngClass]=\"{ 'staff-card-selected' : staff?.selected, 'staff-card': !staff?.selected }\">\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>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 justify-content-between\"\r\n (click)=\"$event.stopPropagation()\">\r\n <input type=\"text\" class=\"date-input border-0 rounded-2\" placeholder=\"dd-mm-yyyy\"\r\n [value]=\"selectedDateStr\" readonly (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 <ng-container *ngIf=\"!skeletonLoader ;else slotsLoader\">\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 : 'N/A'}}</div>\r\n </div>\r\n </ng-container>\r\n <ng-template #slotsLoader>\r\n <!-- Time Slot Grid Skeleton Loader HTML -->\r\n <div class=\"time-slot-grid\">\r\n <!-- Row 1 -->\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n\r\n <!-- Row 2 -->\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n\r\n <!-- Row 3 -->\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n\r\n <!-- Row 4 -->\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n\r\n <!-- Row 5 -->\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n\r\n <!-- Row 6 -->\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n </div>\r\n\r\n </ng-template>\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 overflow-hidden\">\r\n <div class=\"d-flex h-100\">\r\n <div class=\"h-100 w-100\">\r\n <!-- Header Section -->\r\n <div class=\"contact-header mb-2\">\r\n <h1>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\" [(ngModel)]=\"homeAddress\"></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)\" [(ngModel)]=\"instructions\"></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\" [(ngModel)]=\"termsAndConditions\"\r\n (ngModelChange)=\"checkRequiredValues()\">\r\n <p class=\"acceptance-text\">\r\n I understand and accept the cancellation & rescheduling policies and\r\n <span class=\"terms-link\">Terms & Conditions<span\r\n class=\"external-link-icon\"></span></span>\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>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\" *ngIf=\"selectedStaff?.staffName\">\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 {{selectedTime ? selectedTime.value : 'N/A'}}</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?.totalPrice ?\r\n selectedService?.priceDetails?.totalPrice : '0'}}\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\" *ngIf=\"appointmentPayload?.staffDetail?.name\">\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,10) :\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>\r\n<ng-template #skeletonLoader *ngIf=\"skeletonLoader\">\r\n <!-- Service Skeleton Loader HTML -->\r\n <div class=\"service-grid\">\r\n <!-- Skeleton Card 1 -->\r\n <div class=\"service-card skeleton-card\">\r\n <div class=\"service-header\">\r\n <div class=\"skeleton skeleton-icon\"></div>\r\n <div class=\"service-content\">\r\n <div class=\"skeleton skeleton-title\"></div>\r\n <div class=\"skeleton skeleton-price\"></div>\r\n <div class=\"skeleton skeleton-duration\"></div>\r\n </div>\r\n </div>\r\n <div class=\"skeleton skeleton-category\"></div>\r\n <div class=\"skeleton skeleton-description\"></div>\r\n <div class=\"skeleton skeleton-badge\"></div>\r\n </div>\r\n\r\n <!-- Skeleton Card 2 -->\r\n <div class=\"service-card skeleton-card\">\r\n <div class=\"service-header\">\r\n <div class=\"skeleton skeleton-icon\"></div>\r\n <div class=\"service-content\">\r\n <div class=\"skeleton skeleton-title\"></div>\r\n <div class=\"skeleton skeleton-price\"></div>\r\n <div class=\"skeleton skeleton-duration\"></div>\r\n </div>\r\n </div>\r\n <div class=\"skeleton skeleton-category\"></div>\r\n <div class=\"skeleton skeleton-description\"></div>\r\n <div class=\"skeleton skeleton-badge\"></div>\r\n </div>\r\n\r\n <!-- Skeleton Card 3 -->\r\n <div class=\"service-card skeleton-card\">\r\n <div class=\"service-header\">\r\n <div class=\"skeleton skeleton-icon\"></div>\r\n <div class=\"service-content\">\r\n <div class=\"skeleton skeleton-title\"></div>\r\n <div class=\"skeleton skeleton-price\"></div>\r\n <div class=\"skeleton skeleton-duration\"></div>\r\n </div>\r\n </div>\r\n <div class=\"skeleton skeleton-category\"></div>\r\n <div class=\"skeleton skeleton-description\"></div>\r\n <div class=\"skeleton skeleton-badge\"></div>\r\n </div>\r\n\r\n <!-- Skeleton Card 4 -->\r\n <div class=\"service-card skeleton-card\">\r\n <div class=\"service-header\">\r\n <div class=\"skeleton skeleton-icon\"></div>\r\n <div class=\"service-content\">\r\n <div class=\"skeleton skeleton-title\"></div>\r\n <div class=\"skeleton skeleton-price\"></div>\r\n <div class=\"skeleton skeleton-duration\"></div>\r\n </div>\r\n </div>\r\n <div class=\"skeleton skeleton-category\"></div>\r\n <div class=\"skeleton skeleton-description\"></div>\r\n <div class=\"skeleton skeleton-badge\"></div>\r\n </div>\r\n\r\n <!-- Skeleton Card 5 -->\r\n <div class=\"service-card skeleton-card\">\r\n <div class=\"service-header\">\r\n <div class=\"skeleton skeleton-icon\"></div>\r\n <div class=\"service-content\">\r\n <div class=\"skeleton skeleton-title\"></div>\r\n <div class=\"skeleton skeleton-price\"></div>\r\n <div class=\"skeleton skeleton-duration\"></div>\r\n </div>\r\n </div>\r\n <div class=\"skeleton skeleton-category\"></div>\r\n <div class=\"skeleton skeleton-description\"></div>\r\n <div class=\"skeleton skeleton-badge\"></div>\r\n </div>\r\n\r\n <!-- Skeleton Card 6 -->\r\n <div class=\"service-card skeleton-card\">\r\n <div class=\"service-header\">\r\n <div class=\"skeleton skeleton-icon\"></div>\r\n <div class=\"service-content\">\r\n <div class=\"skeleton skeleton-title\"></div>\r\n <div class=\"skeleton skeleton-price\"></div>\r\n <div class=\"skeleton skeleton-duration\"></div>\r\n </div>\r\n </div>\r\n <div class=\"skeleton skeleton-category\"></div>\r\n <div class=\"skeleton skeleton-description\"></div>\r\n <div class=\"skeleton skeleton-badge\"></div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", 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_section{position:relative;height:100%}.main_header{padding:1%;width:100%;background:#fff;height:15%}.main_body{height:75%;padding-top:0%;overflow:scroll}.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 h2{font-size:20px;font-weight:600;margin:.25rem 0}.service-selection p{color:#666;font-size:16px;margin-bottom:1rem}.main_footer{border-top:1px solid lightgrey;width:100%;background-color:#fff;height:10%}.services-grid{display:grid;grid-template-columns:48% 48%;gap:15px;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;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:.25rem 0}.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;margin:.25rem 0}.staff-subtitle{font-size:16px;color:#888;font-weight:400}.staff-card{border:1px solid lightgrey;cursor:pointer;transition:all .3s ease}.staff-card:hover{box-shadow:0 4px 8px #0000001a}.staff-card-selected{border-color:#666;cursor:pointer;transition:all .3s ease}.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:.25rem 0}.main_container{height:85%}.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%;outline:none}.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;margin:.25rem 0}.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:89%;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;margin:.25rem 0}.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}.pay-now-btn{justify-content:unset!important;background:#e3fee3;border:none;padding:.5%;width:8vw!important;font-size:15px!important;font-weight:500;border-radius:4px;gap:.5rem}.pay-now-btn 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}.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;padding:20px;width:60%}.service-card{border:1px solid #e5e5e5;border-radius:8px;padding:20px;background:#fff;box-shadow:0 2px 4px #0000001a}.service-header{display:flex;align-items:flex-start;gap:15px;margin-bottom:15px}.service-content{flex:1;display:flex;flex-direction:column;gap:8px}.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-icon{width:40px;height:40px;border-radius:50%;flex-shrink:0}.skeleton-title{height:20px;width:70%}.skeleton-price{height:18px;width:50%;align-self:flex-end}.skeleton-duration{height:14px;width:40%;align-self:flex-end}.skeleton-category{height:24px;width:25%;border-radius:12px;margin-bottom:10px}.skeleton-description{height:16px;width:85%;margin-bottom:15px}.skeleton-badge{height:32px;width:45%;border-radius:16px;margin-top:10px}@media (max-width: 768px){.service-grid{grid-template-columns:1fr;gap:15px;padding:15px}.service-card{padding:15px}}.time-slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px;max-width:400px;margin:0 auto}.skeleton-time-slot{height:44px;border-radius:8px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite;border:1px solid #e5e5e5;position:relative}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-time-slot:nth-child(2n){animation:skeleton-pulse 2s infinite}@keyframes skeleton-pulse{0%,to{opacity:1}50%{opacity:.7}}@media (max-width: 480px){.time-slot-grid{grid-template-columns:repeat(2,1fr);gap:10px;padding:12px}.skeleton-time-slot{height:40px}}@media (max-width: 320px){.time-slot-grid{grid-template-columns:1fr}}@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}.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}.datetime-header h1{margin:0!important}}@media screen and (max-width: 475px){.main_header{height:10%}.main_body{height:83%}.main_footer{height:7%}.staff-listing{width:100%!important;padding:0% 5%}.booking-confirmation{width:auto;padding:0rem}}\n"] }]
13123
+ 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 Home</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 *ngIf=\"!skeletonLoader\">\r\n <ng-container *ngTemplateOutlet=\"serviceListing\"></ng-container>\r\n </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 [ngStyle]=\"{'justify-content': selectedTab != 'serviceListing' ? 'space-between' : 'end'}\">\r\n <span class=\"back-footer-btn cursor-pointer\" (click)=\"previousStep()\"\r\n *ngIf=\"selectedTab != 'serviceListing'\">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=\"cursor-pointer d-flex justify-content-evenly align-items-center\"\r\n *ngIf=\"selectedTab==='paymentTab'\" (click)=\"checkPayment()\"\r\n [ngClass]=\"{'pay-now-btn' : selectedService?.depositAmount?.depositRequired,'complete_booking' : !selectedService?.depositAmount?.depositRequired}\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">{{selectedService?.depositAmount?.depositRequired\r\n ? 'Pay Now' : '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\" *ngIf=\"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 staff-listing\">\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>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=\"card rounded-3 p-3\" (click)=\"selectStaff(staff)\"\r\n [ngClass]=\"{ 'staff-card-selected' : staff?.selected, 'staff-card': !staff?.selected }\">\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>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 justify-content-between\"\r\n (click)=\"$event.stopPropagation()\">\r\n <input type=\"text\" class=\"date-input border-0 rounded-2\" placeholder=\"dd-mm-yyyy\"\r\n [value]=\"selectedDateStr\" readonly (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 <ng-container *ngIf=\"!skeletonLoader ;else slotsLoader\">\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 : 'N/A'}}</div>\r\n </div>\r\n </ng-container>\r\n <ng-template #slotsLoader>\r\n <!-- Time Slot Grid Skeleton Loader HTML -->\r\n <div class=\"time-slot-grid\">\r\n <!-- Row 1 -->\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n\r\n <!-- Row 2 -->\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n\r\n <!-- Row 3 -->\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n\r\n <!-- Row 4 -->\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n\r\n <!-- Row 5 -->\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n\r\n <!-- Row 6 -->\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n <div class=\"skeleton-time-slot\"></div>\r\n </div>\r\n\r\n </ng-template>\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 overflow-hidden\">\r\n <div class=\"d-flex h-100\">\r\n <div class=\"h-100 w-100\">\r\n <!-- Header Section -->\r\n <div class=\"contact-header mb-2\">\r\n <h1>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 pattern=\"^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$\">\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\" [(ngModel)]=\"homeAddress\"></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)\"\r\n [(ngModel)]=\"instructions\"></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\" [(ngModel)]=\"termsAndConditions\"\r\n (ngModelChange)=\"checkRequiredValues()\">\r\n <p class=\"acceptance-text\">\r\n I understand and accept the cancellation & rescheduling policies and\r\n <span class=\"terms-link\">Terms & Conditions<span\r\n class=\"external-link-icon\"></span></span>\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>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\" *ngIf=\"selectedStaff?.staffName\">\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 {{selectedTime ? selectedTime.value : 'N/A'}}</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?.totalPrice ?\r\n selectedService?.priceDetails?.totalPrice : '0'}}\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\" *ngIf=\"appointmentPayload?.staffDetail?.name\">\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,10) :\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>\r\n<ng-template #skeletonLoader *ngIf=\"skeletonLoader\">\r\n <!-- Service Skeleton Loader HTML -->\r\n <div class=\"service-grid\">\r\n <!-- Skeleton Card 1 -->\r\n <div class=\"service-card skeleton-card\">\r\n <div class=\"service-header\">\r\n <div class=\"skeleton skeleton-icon\"></div>\r\n <div class=\"service-content\">\r\n <div class=\"skeleton skeleton-title\"></div>\r\n <div class=\"skeleton skeleton-price\"></div>\r\n <div class=\"skeleton skeleton-duration\"></div>\r\n </div>\r\n </div>\r\n <div class=\"skeleton skeleton-category\"></div>\r\n <div class=\"skeleton skeleton-description\"></div>\r\n <div class=\"skeleton skeleton-badge\"></div>\r\n </div>\r\n\r\n <!-- Skeleton Card 2 -->\r\n <div class=\"service-card skeleton-card\">\r\n <div class=\"service-header\">\r\n <div class=\"skeleton skeleton-icon\"></div>\r\n <div class=\"service-content\">\r\n <div class=\"skeleton skeleton-title\"></div>\r\n <div class=\"skeleton skeleton-price\"></div>\r\n <div class=\"skeleton skeleton-duration\"></div>\r\n </div>\r\n </div>\r\n <div class=\"skeleton skeleton-category\"></div>\r\n <div class=\"skeleton skeleton-description\"></div>\r\n <div class=\"skeleton skeleton-badge\"></div>\r\n </div>\r\n\r\n <!-- Skeleton Card 3 -->\r\n <div class=\"service-card skeleton-card\">\r\n <div class=\"service-header\">\r\n <div class=\"skeleton skeleton-icon\"></div>\r\n <div class=\"service-content\">\r\n <div class=\"skeleton skeleton-title\"></div>\r\n <div class=\"skeleton skeleton-price\"></div>\r\n <div class=\"skeleton skeleton-duration\"></div>\r\n </div>\r\n </div>\r\n <div class=\"skeleton skeleton-category\"></div>\r\n <div class=\"skeleton skeleton-description\"></div>\r\n <div class=\"skeleton skeleton-badge\"></div>\r\n </div>\r\n\r\n <!-- Skeleton Card 4 -->\r\n <div class=\"service-card skeleton-card\">\r\n <div class=\"service-header\">\r\n <div class=\"skeleton skeleton-icon\"></div>\r\n <div class=\"service-content\">\r\n <div class=\"skeleton skeleton-title\"></div>\r\n <div class=\"skeleton skeleton-price\"></div>\r\n <div class=\"skeleton skeleton-duration\"></div>\r\n </div>\r\n </div>\r\n <div class=\"skeleton skeleton-category\"></div>\r\n <div class=\"skeleton skeleton-description\"></div>\r\n <div class=\"skeleton skeleton-badge\"></div>\r\n </div>\r\n\r\n <!-- Skeleton Card 5 -->\r\n <div class=\"service-card skeleton-card\">\r\n <div class=\"service-header\">\r\n <div class=\"skeleton skeleton-icon\"></div>\r\n <div class=\"service-content\">\r\n <div class=\"skeleton skeleton-title\"></div>\r\n <div class=\"skeleton skeleton-price\"></div>\r\n <div class=\"skeleton skeleton-duration\"></div>\r\n </div>\r\n </div>\r\n <div class=\"skeleton skeleton-category\"></div>\r\n <div class=\"skeleton skeleton-description\"></div>\r\n <div class=\"skeleton skeleton-badge\"></div>\r\n </div>\r\n\r\n <!-- Skeleton Card 6 -->\r\n <div class=\"service-card skeleton-card\">\r\n <div class=\"service-header\">\r\n <div class=\"skeleton skeleton-icon\"></div>\r\n <div class=\"service-content\">\r\n <div class=\"skeleton skeleton-title\"></div>\r\n <div class=\"skeleton skeleton-price\"></div>\r\n <div class=\"skeleton skeleton-duration\"></div>\r\n </div>\r\n </div>\r\n <div class=\"skeleton skeleton-category\"></div>\r\n <div class=\"skeleton skeleton-description\"></div>\r\n <div class=\"skeleton skeleton-badge\"></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_section{position:relative;height:100%}.main_header{padding:1%;width:100%;background:#fff;height:15%}.main_body{height:75%;padding-top:0%;overflow:scroll}.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 h2{font-size:20px;font-weight:600;margin:.25rem 0}.service-selection p{color:#666;font-size:16px;margin-bottom:1rem}.main_footer{border-top:1px solid lightgrey;width:100%;background-color:#fff;height:10%}.services-grid{display:grid;grid-template-columns:48% 48%;gap:15px;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;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:.25rem 0}.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;margin:.25rem 0}.staff-subtitle{font-size:16px;color:#888;font-weight:400}.staff-card{border:1px solid lightgrey;cursor:pointer;transition:all .3s ease}.staff-card:hover{box-shadow:0 4px 8px #0000001a}.staff-card-selected{border-color:#666;cursor:pointer;transition:all .3s ease}.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:.25rem 0}.main_container{height:85%}.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:auto;outline:none}.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;margin:.25rem 0}.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:89%;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;margin:.25rem 0}.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}.pay-now-btn{justify-content:unset!important;background:#e3fee3;border:none;padding:.5%;width:8vw!important;font-size:15px!important;font-weight:500;border-radius:4px;gap:.5rem}.pay-now-btn 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}.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;padding:20px;width:60%}.service-card{border:1px solid #e5e5e5;border-radius:8px;padding:20px;background:#fff;box-shadow:0 2px 4px #0000001a}.service-header{display:flex;align-items:flex-start;gap:15px;margin-bottom:15px}.service-content{flex:1;display:flex;flex-direction:column;gap:8px}.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-icon{width:40px;height:40px;border-radius:50%;flex-shrink:0}.skeleton-title{height:20px;width:70%}.skeleton-price{height:18px;width:50%;align-self:flex-end}.skeleton-duration{height:14px;width:40%;align-self:flex-end}.skeleton-category{height:24px;width:25%;border-radius:12px;margin-bottom:10px}.skeleton-description{height:16px;width:85%;margin-bottom:15px}.skeleton-badge{height:32px;width:45%;border-radius:16px;margin-top:10px}@media (max-width: 768px){.service-grid{grid-template-columns:1fr;gap:15px;padding:15px}.service-card{padding:15px}}.time-slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px;max-width:400px;margin:0 auto}.skeleton-time-slot{height:44px;border-radius:8px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite;border:1px solid #e5e5e5;position:relative}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-time-slot:nth-child(2n){animation:skeleton-pulse 2s infinite}@keyframes skeleton-pulse{0%,to{opacity:1}50%{opacity:.7}}@media (max-width: 480px){.time-slot-grid{grid-template-columns:repeat(2,1fr);gap:10px;padding:12px}.skeleton-time-slot{height:40px}}@media (max-width: 320px){.time-slot-grid{grid-template-columns:1fr}}@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}.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}.datetime-header h1{margin:0!important}}@media screen and (max-width: 475px){.main_header{height:10%}.main_body{height:83%}.main_footer{height:7%}.staff-listing{width:100%!important;padding:0% 5%}.booking-confirmation{width:auto;padding:0rem}}\n"] }]
13124
13124
  }], ctorParameters: () => [{ type: RestService }, { type: EventsService }, { type: i2$2.Router }, { type: i6$1.MessageService }], propDecorators: { data: [{
13125
13125
  type: Input
13126
13126
  }], index: [{
@@ -16446,11 +16446,11 @@ class ImageLoadingComponent {
16446
16446
  this.product.prviewIdx = 0;
16447
16447
  }
16448
16448
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageLoadingComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
16449
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageLoadingComponent, isStandalone: true, selector: "image-loading", inputs: { hash: "hash", imageUrl: "imageUrl", index: "index", product: "product", theme: "theme" }, viewQueries: [{ propertyName: "image", first: true, predicate: ["image"], descendants: true }, { propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true }], ngImport: i0, template: "<canvas #canvas class=\"mask\"></canvas> \r\n<img [src]=\"imageUrl\" [id]=\"'preview_'+index\" alt=\"\" class=\"afterLoadImg\" [ngClass]=\"{'product-img preview': theme == 'Theme1'}\" loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" (mouseenter)=\"togglePreviewImage(product, index)\" (mouseleave)=\"mouseLeave()\" #image>", styles: [".mask,img{height:100%;width:100%}.product-img{height:200px;width:100%;border-radius:10px}.preivew{transition:opacity .5s ease-in-out;opacity:1}@media screen and (max-width: 475px){.product-img{height:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
16449
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageLoadingComponent, isStandalone: true, selector: "image-loading", inputs: { hash: "hash", imageUrl: "imageUrl", index: "index", product: "product", theme: "theme" }, viewQueries: [{ propertyName: "image", first: true, predicate: ["image"], descendants: true }, { propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true }], ngImport: i0, template: "<canvas #canvas class=\"mask\"></canvas> \r\n<img [src]=\"imageUrl\" [id]=\"'preview_'+index\" alt=\"\" class=\"afterLoadImg\" [ngClass]=\"{'product-img preview': theme == 'Theme1'}\" loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" (mouseenter)=\"togglePreviewImage(product, index)\" (mouseleave)=\"mouseLeave()\" #image>", styles: [".mask,img{height:100%;width:100%}.product-img{height:300px;width:100%;border-radius:10px}.preivew{transition:opacity .5s ease-in-out;opacity:1}@media screen and (max-width: 475px){.product-img{height:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
16450
16450
  }
16451
16451
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageLoadingComponent, decorators: [{
16452
16452
  type: Component,
16453
- args: [{ selector: "image-loading", standalone: true, imports: [CommonModule], template: "<canvas #canvas class=\"mask\"></canvas> \r\n<img [src]=\"imageUrl\" [id]=\"'preview_'+index\" alt=\"\" class=\"afterLoadImg\" [ngClass]=\"{'product-img preview': theme == 'Theme1'}\" loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" (mouseenter)=\"togglePreviewImage(product, index)\" (mouseleave)=\"mouseLeave()\" #image>", styles: [".mask,img{height:100%;width:100%}.product-img{height:200px;width:100%;border-radius:10px}.preivew{transition:opacity .5s ease-in-out;opacity:1}@media screen and (max-width: 475px){.product-img{height:100%}}\n"] }]
16453
+ args: [{ selector: "image-loading", standalone: true, imports: [CommonModule], template: "<canvas #canvas class=\"mask\"></canvas> \r\n<img [src]=\"imageUrl\" [id]=\"'preview_'+index\" alt=\"\" class=\"afterLoadImg\" [ngClass]=\"{'product-img preview': theme == 'Theme1'}\" loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" (mouseenter)=\"togglePreviewImage(product, index)\" (mouseleave)=\"mouseLeave()\" #image>", styles: [".mask,img{height:100%;width:100%}.product-img{height:300px;width:100%;border-radius:10px}.preivew{transition:opacity .5s ease-in-out;opacity:1}@media screen and (max-width: 475px){.product-img{height:100%}}\n"] }]
16454
16454
  }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { hash: [{
16455
16455
  type: Input
16456
16456
  }], imageUrl: [{
@@ -16620,7 +16620,7 @@ class SmallProductListingComponent {
16620
16620
  }
16621
16621
  }
16622
16622
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SmallProductListingComponent, deps: [{ token: CartService }, { token: i2$2.Router }, { token: RestService }, { token: StorageServiceService }, { token: i6$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
16623
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SmallProductListingComponent, isStandalone: true, selector: "simpo-small-product-listing", inputs: { product: "product", data: "data", isScrollable: "isScrollable", isCategoryProductList: "isCategoryProductList", customClass: "customClass", index: "index" }, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n<div class=\"product hover-effect\" [ngClass]=\"{'width' : isScrollable, 'adjustHeightWidth': isCategoryProductList}\"\r\n [style.opacity]=\"product?.itemInventory?.openingStock == 0 ? 0.5 : 1\" [attr.style]=\"customClass\">\r\n <div class=\"prod-img\" [class.fade-out]=\"imageIndex == index\">\r\n <image-loading [imageUrl]=\"getProductImages(product)\" [hash]=\"product.itemImages?.[0]?.blurhash\"\r\n (click)=\"goToProductDetail(product)\" [theme]=\"data?.styles?.theme\"></image-loading>\r\n <div class=\"discount\" [style.backgroundColor]=\"data?.styles?.background?.color\"\r\n [simpoColor]=\"data?.styles?.background?.color\" *ngIf=\"getPercentage(product) > '0'\">{{getPercentage(product)}}%\r\n off</div>\r\n <div class=\"carousel-buttons\" *ngIf=\"(product?.itemImages?.length || 0) > 1\">\r\n <div><mat-icon (click)=\"changeImage(product, 'PREV')\">keyboard_arrow_left</mat-icon></div>\r\n <div><mat-icon (click)=\"changeImage(product, 'NEXT')\">keyboard_arrow_right</mat-icon></div>\r\n </div>\r\n </div>\r\n <div class=\"p-2 h-40\" (click)=\"goToProductDetail(product)\">\r\n <span class=\"trim-text color\">{{product.name}}</span>\r\n <div class=\"bottom\">\r\n <span class=\"m-1\">\r\n <span class=\"color\"><span [innerHTML]=\"currency\"></span> {{product?.price?.sellingPrice ?? 0}}</span>\r\n <span class=\"color\" *ngIf=\"product.price.value - product.price.discountedPrice > 2\"\r\n [ngClass]=\"{'strike-through' : product.price.value - product.price.discountedPrice > 2}\"><span\r\n [innerHTML]=\"currency\"></span> {{product?.price?.value ?? 0}}</span>\r\n </span>\r\n <div class=\"review-rating d-flex gap-2 align-items-center justify-content-between\" *ngIf=\"product?.averageRating\">\r\n <p-rating [(ngModel)]=\"product.averageRating\" [cancel]=\"false\" [readonly]=\"true\" />\r\n <div class=\"total-ratings\">{{\r\n getRatings(product?.totalReviewCount)}}</div>\r\n </div>\r\n <div class=\"add-to-cart\" [style.borderColor]=\"data.styles?.background?.accentColor\"\r\n *ngIf=\"data?.content?.display?.showButton\"\r\n [ngClass]=\"{'justify-content-between p-0 d-flex': product.quantity, 'justify-content-center': !product.quantity}\"\r\n (click)=\"removeDefault($event)\">\r\n <ng-container *ngIf=\"product?.itemInventory?.openingStock\">\r\n <ng-container *ngIf=\"!product.quantity\">\r\n <div (click)=\"addItemToCart($event, product, 'ADD')\" [style.color]=\"data.styles?.background?.accentColor\"\r\n *ngIf=\"IsEcommerce\">\r\n Add to Cart</div>\r\n <div [style.color]=\"data.styles?.background?.accentColor\" *ngIf=\"!IsEcommerce\" (click)=\"raiseLead()\">Notify\r\n Me</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"product.quantity\">\r\n <span class=\"quantity-btn\" (click)=\"addItemToCart($event, product, 'SUBSTRACT')\"\r\n [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\"\r\n [style.color]=\"data.styles?.background?.accentColor\">-</span>\r\n <span class=\"quantity\" [style.color]=\"data.styles?.background?.accentColor\">{{product.quantity}}</span>\r\n <span class=\"quantity-btn\" (click)=\"addItemToCart($event, product, 'ADD')\"\r\n [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\"\r\n [style.color]=\"data.styles?.background?.accentColor\">+</span>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"!product?.itemInventory?.openingStock\">\r\n <span class=\"d-flex align-items-center justify-content-center w-100\">\r\n <mat-icon>notification_important</mat-icon>\r\n <span class=\"ml-2\">Notify</span>\r\n </span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- <ng-template #loadingScreen>\r\n <ngx-skeleton-loader *ngIf=\"filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '100%',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\" />\r\n</ng-template> -->", styles: [".product{position:relative;display:flex;flex-direction:column;cursor:pointer;margin-bottom:10px;border-radius:10px;overflow:hidden;height:350px;background-color:#fff}.product .prod-img{position:relative;height:55%;width:100%;overflow:hidden;border:1.8px solid;border-radius:10px;border-color:#e5e7eb}.product .prod-img img{height:100%;width:100%;object-fit:cover}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.width{margin-right:10px}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid transparent;border-radius:5px;padding:5px;text-align:center;align-items:center}.add-to-cart .quantity-btn{padding:5px 10px;font-weight:700}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@media screen and (max-width: 475px){.width{max-width:160px;min-width:160px;height:300px}.adjustHeightWidth{max-width:100%;min-width:100%}}.h-40{height:45%;position:relative}.bottom{position:absolute;bottom:10px;width:93%;display:flex;flex-direction:column}.discount-price{font-weight:600;font-size:14px}.color{color:#000}.trim-text{text-align:inherit!important}.product-img.fade-out{opacity:0;transform:scale(.95)}.gap-15{gap:15px}.flex-wrap{flex-wrap:wrap}.carousel-buttons{display:flex;gap:10px;position:absolute;bottom:10px;left:10px;transform:translateY(-50%);pointer-events:none}.carousel-buttons div{background:#fff;display:flex;align-items:center;border-radius:100%;height:30px;width:30px;justify-content:center;pointer-events:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ImageLoadingComponent, selector: "image-loading", inputs: ["hash", "imageUrl", "index", "product", "theme"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i7$3.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { 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: 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"] }] }); }
16623
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SmallProductListingComponent, isStandalone: true, selector: "simpo-small-product-listing", inputs: { product: "product", data: "data", isScrollable: "isScrollable", isCategoryProductList: "isCategoryProductList", customClass: "customClass", index: "index" }, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n<div class=\"product hover-effect\" [ngClass]=\"{'width' : isScrollable, 'adjustHeightWidth': isCategoryProductList}\"\r\n [style.opacity]=\"product?.itemInventory?.openingStock == 0 ? 0.5 : 1\" [attr.style]=\"customClass\">\r\n <div class=\"prod-img\" [class.fade-out]=\"imageIndex == index\">\r\n <image-loading [imageUrl]=\"getProductImages(product)\" [hash]=\"product.itemImages?.[0]?.blurhash\"\r\n (click)=\"goToProductDetail(product)\" [theme]=\"data?.styles?.theme\"></image-loading>\r\n <div class=\"discount\" [style.backgroundColor]=\"data?.styles?.background?.color\"\r\n [simpoColor]=\"data?.styles?.background?.color\" *ngIf=\"getPercentage(product) > '0'\">{{getPercentage(product)}}%\r\n off</div>\r\n <div class=\"carousel-buttons\" *ngIf=\"(product?.itemImages?.length || 0) > 1\">\r\n <div><mat-icon (click)=\"changeImage(product, 'PREV')\">keyboard_arrow_left</mat-icon></div>\r\n <div><mat-icon (click)=\"changeImage(product, 'NEXT')\">keyboard_arrow_right</mat-icon></div>\r\n </div>\r\n </div>\r\n <div class=\"p-2 h-40\" (click)=\"goToProductDetail(product)\">\r\n <span class=\"trim-text color\">{{product.name}}</span>\r\n <div class=\"bottom\">\r\n <span class=\"m-1\">\r\n <span class=\"color\"><span [innerHTML]=\"currency\"></span> {{product?.price?.sellingPrice ?? 0}}</span>\r\n <span class=\"color\" *ngIf=\"product.price.value - product.price.discountedPrice > 2\"\r\n [ngClass]=\"{'strike-through' : product.price.value - product.price.discountedPrice > 2}\"><span\r\n [innerHTML]=\"currency\"></span> {{product?.price?.value ?? 0}}</span>\r\n </span>\r\n <div class=\"review-rating d-flex gap-2 align-items-center justify-content-between\" *ngIf=\"product?.averageRating\">\r\n <p-rating [(ngModel)]=\"product.averageRating\" [cancel]=\"false\" [readonly]=\"true\" />\r\n <div class=\"total-ratings\">{{\r\n getRatings(product?.totalReviewCount)}}</div>\r\n </div>\r\n <div class=\"add-to-cart\" [style.borderColor]=\"data.styles?.background?.accentColor\"\r\n *ngIf=\"data?.content?.display?.showButton\"\r\n [ngClass]=\"{'justify-content-between p-0 d-flex': product.quantity, 'justify-content-center': !product.quantity}\"\r\n (click)=\"removeDefault($event)\">\r\n <ng-container *ngIf=\"product?.itemInventory?.openingStock\">\r\n <ng-container *ngIf=\"!product.quantity\">\r\n <div (click)=\"addItemToCart($event, product, 'ADD')\" [style.color]=\"data.styles?.background?.accentColor\"\r\n *ngIf=\"IsEcommerce\">\r\n Add to Cart</div>\r\n <div [style.color]=\"data.styles?.background?.accentColor\" *ngIf=\"!IsEcommerce\" (click)=\"raiseLead()\">Notify\r\n Me</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"product.quantity\">\r\n <span class=\"quantity-btn\" (click)=\"addItemToCart($event, product, 'SUBSTRACT')\"\r\n [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\"\r\n [style.color]=\"data.styles?.background?.accentColor\">-</span>\r\n <span class=\"quantity\" [style.color]=\"data.styles?.background?.accentColor\">{{product.quantity}}</span>\r\n <span class=\"quantity-btn\" (click)=\"addItemToCart($event, product, 'ADD')\"\r\n [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\"\r\n [style.color]=\"data.styles?.background?.accentColor\">+</span>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"!product?.itemInventory?.openingStock\">\r\n <span class=\"d-flex align-items-center justify-content-center w-100\">\r\n <mat-icon>notification_important</mat-icon>\r\n <span class=\"ml-2\">Notify</span>\r\n </span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- <ng-template #loadingScreen>\r\n <ngx-skeleton-loader *ngIf=\"filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '100%',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\" />\r\n</ng-template> -->", styles: [".product{position:relative;display:flex;flex-direction:column;cursor:pointer;margin-bottom:10px;border-radius:10px;overflow:hidden;height:350px;background-color:#fff}.product .prod-img{position:relative;height:55%;width:100%;overflow:hidden;border:1.8px solid;border-radius:10px;border-color:#e5e7eb}.product .prod-img img{height:100%;width:100%;object-fit:cover}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.width{margin-right:10px;min-width:195px;max-width:195px}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid transparent;border-radius:5px;padding:5px;text-align:center;align-items:center}.add-to-cart .quantity-btn{padding:5px 10px;font-weight:700}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@media screen and (max-width: 475px){.width{max-width:160px;min-width:160px;height:300px}.adjustHeightWidth{max-width:100%;min-width:100%}}.h-40{height:45%;position:relative}.bottom{position:absolute;bottom:10px;width:93%;display:flex;flex-direction:column}.discount-price{font-weight:600;font-size:14px}.color{color:#000}.trim-text{text-align:inherit!important}.product-img.fade-out{opacity:0;transform:scale(.95)}.gap-15{gap:15px}.flex-wrap{flex-wrap:wrap}.carousel-buttons{display:flex;gap:10px;position:absolute;bottom:10px;left:10px;transform:translateY(-50%);pointer-events:none}.carousel-buttons div{background:#fff;display:flex;align-items:center;border-radius:100%;height:30px;width:30px;justify-content:center;pointer-events:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ImageLoadingComponent, selector: "image-loading", inputs: ["hash", "imageUrl", "index", "product", "theme"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i7$3.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { 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: 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"] }] }); }
16624
16624
  }
16625
16625
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SmallProductListingComponent, decorators: [{
16626
16626
  type: Component,
@@ -16632,7 +16632,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
16632
16632
  RatingModule,
16633
16633
  FormsModule,
16634
16634
  ToastModule
16635
- ], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n<div class=\"product hover-effect\" [ngClass]=\"{'width' : isScrollable, 'adjustHeightWidth': isCategoryProductList}\"\r\n [style.opacity]=\"product?.itemInventory?.openingStock == 0 ? 0.5 : 1\" [attr.style]=\"customClass\">\r\n <div class=\"prod-img\" [class.fade-out]=\"imageIndex == index\">\r\n <image-loading [imageUrl]=\"getProductImages(product)\" [hash]=\"product.itemImages?.[0]?.blurhash\"\r\n (click)=\"goToProductDetail(product)\" [theme]=\"data?.styles?.theme\"></image-loading>\r\n <div class=\"discount\" [style.backgroundColor]=\"data?.styles?.background?.color\"\r\n [simpoColor]=\"data?.styles?.background?.color\" *ngIf=\"getPercentage(product) > '0'\">{{getPercentage(product)}}%\r\n off</div>\r\n <div class=\"carousel-buttons\" *ngIf=\"(product?.itemImages?.length || 0) > 1\">\r\n <div><mat-icon (click)=\"changeImage(product, 'PREV')\">keyboard_arrow_left</mat-icon></div>\r\n <div><mat-icon (click)=\"changeImage(product, 'NEXT')\">keyboard_arrow_right</mat-icon></div>\r\n </div>\r\n </div>\r\n <div class=\"p-2 h-40\" (click)=\"goToProductDetail(product)\">\r\n <span class=\"trim-text color\">{{product.name}}</span>\r\n <div class=\"bottom\">\r\n <span class=\"m-1\">\r\n <span class=\"color\"><span [innerHTML]=\"currency\"></span> {{product?.price?.sellingPrice ?? 0}}</span>\r\n <span class=\"color\" *ngIf=\"product.price.value - product.price.discountedPrice > 2\"\r\n [ngClass]=\"{'strike-through' : product.price.value - product.price.discountedPrice > 2}\"><span\r\n [innerHTML]=\"currency\"></span> {{product?.price?.value ?? 0}}</span>\r\n </span>\r\n <div class=\"review-rating d-flex gap-2 align-items-center justify-content-between\" *ngIf=\"product?.averageRating\">\r\n <p-rating [(ngModel)]=\"product.averageRating\" [cancel]=\"false\" [readonly]=\"true\" />\r\n <div class=\"total-ratings\">{{\r\n getRatings(product?.totalReviewCount)}}</div>\r\n </div>\r\n <div class=\"add-to-cart\" [style.borderColor]=\"data.styles?.background?.accentColor\"\r\n *ngIf=\"data?.content?.display?.showButton\"\r\n [ngClass]=\"{'justify-content-between p-0 d-flex': product.quantity, 'justify-content-center': !product.quantity}\"\r\n (click)=\"removeDefault($event)\">\r\n <ng-container *ngIf=\"product?.itemInventory?.openingStock\">\r\n <ng-container *ngIf=\"!product.quantity\">\r\n <div (click)=\"addItemToCart($event, product, 'ADD')\" [style.color]=\"data.styles?.background?.accentColor\"\r\n *ngIf=\"IsEcommerce\">\r\n Add to Cart</div>\r\n <div [style.color]=\"data.styles?.background?.accentColor\" *ngIf=\"!IsEcommerce\" (click)=\"raiseLead()\">Notify\r\n Me</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"product.quantity\">\r\n <span class=\"quantity-btn\" (click)=\"addItemToCart($event, product, 'SUBSTRACT')\"\r\n [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\"\r\n [style.color]=\"data.styles?.background?.accentColor\">-</span>\r\n <span class=\"quantity\" [style.color]=\"data.styles?.background?.accentColor\">{{product.quantity}}</span>\r\n <span class=\"quantity-btn\" (click)=\"addItemToCart($event, product, 'ADD')\"\r\n [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\"\r\n [style.color]=\"data.styles?.background?.accentColor\">+</span>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"!product?.itemInventory?.openingStock\">\r\n <span class=\"d-flex align-items-center justify-content-center w-100\">\r\n <mat-icon>notification_important</mat-icon>\r\n <span class=\"ml-2\">Notify</span>\r\n </span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- <ng-template #loadingScreen>\r\n <ngx-skeleton-loader *ngIf=\"filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '100%',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\" />\r\n</ng-template> -->", styles: [".product{position:relative;display:flex;flex-direction:column;cursor:pointer;margin-bottom:10px;border-radius:10px;overflow:hidden;height:350px;background-color:#fff}.product .prod-img{position:relative;height:55%;width:100%;overflow:hidden;border:1.8px solid;border-radius:10px;border-color:#e5e7eb}.product .prod-img img{height:100%;width:100%;object-fit:cover}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.width{margin-right:10px}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid transparent;border-radius:5px;padding:5px;text-align:center;align-items:center}.add-to-cart .quantity-btn{padding:5px 10px;font-weight:700}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@media screen and (max-width: 475px){.width{max-width:160px;min-width:160px;height:300px}.adjustHeightWidth{max-width:100%;min-width:100%}}.h-40{height:45%;position:relative}.bottom{position:absolute;bottom:10px;width:93%;display:flex;flex-direction:column}.discount-price{font-weight:600;font-size:14px}.color{color:#000}.trim-text{text-align:inherit!important}.product-img.fade-out{opacity:0;transform:scale(.95)}.gap-15{gap:15px}.flex-wrap{flex-wrap:wrap}.carousel-buttons{display:flex;gap:10px;position:absolute;bottom:10px;left:10px;transform:translateY(-50%);pointer-events:none}.carousel-buttons div{background:#fff;display:flex;align-items:center;border-radius:100%;height:30px;width:30px;justify-content:center;pointer-events:auto}\n"] }]
16635
+ ], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n<div class=\"product hover-effect\" [ngClass]=\"{'width' : isScrollable, 'adjustHeightWidth': isCategoryProductList}\"\r\n [style.opacity]=\"product?.itemInventory?.openingStock == 0 ? 0.5 : 1\" [attr.style]=\"customClass\">\r\n <div class=\"prod-img\" [class.fade-out]=\"imageIndex == index\">\r\n <image-loading [imageUrl]=\"getProductImages(product)\" [hash]=\"product.itemImages?.[0]?.blurhash\"\r\n (click)=\"goToProductDetail(product)\" [theme]=\"data?.styles?.theme\"></image-loading>\r\n <div class=\"discount\" [style.backgroundColor]=\"data?.styles?.background?.color\"\r\n [simpoColor]=\"data?.styles?.background?.color\" *ngIf=\"getPercentage(product) > '0'\">{{getPercentage(product)}}%\r\n off</div>\r\n <div class=\"carousel-buttons\" *ngIf=\"(product?.itemImages?.length || 0) > 1\">\r\n <div><mat-icon (click)=\"changeImage(product, 'PREV')\">keyboard_arrow_left</mat-icon></div>\r\n <div><mat-icon (click)=\"changeImage(product, 'NEXT')\">keyboard_arrow_right</mat-icon></div>\r\n </div>\r\n </div>\r\n <div class=\"p-2 h-40\" (click)=\"goToProductDetail(product)\">\r\n <span class=\"trim-text color\">{{product.name}}</span>\r\n <div class=\"bottom\">\r\n <span class=\"m-1\">\r\n <span class=\"color\"><span [innerHTML]=\"currency\"></span> {{product?.price?.sellingPrice ?? 0}}</span>\r\n <span class=\"color\" *ngIf=\"product.price.value - product.price.discountedPrice > 2\"\r\n [ngClass]=\"{'strike-through' : product.price.value - product.price.discountedPrice > 2}\"><span\r\n [innerHTML]=\"currency\"></span> {{product?.price?.value ?? 0}}</span>\r\n </span>\r\n <div class=\"review-rating d-flex gap-2 align-items-center justify-content-between\" *ngIf=\"product?.averageRating\">\r\n <p-rating [(ngModel)]=\"product.averageRating\" [cancel]=\"false\" [readonly]=\"true\" />\r\n <div class=\"total-ratings\">{{\r\n getRatings(product?.totalReviewCount)}}</div>\r\n </div>\r\n <div class=\"add-to-cart\" [style.borderColor]=\"data.styles?.background?.accentColor\"\r\n *ngIf=\"data?.content?.display?.showButton\"\r\n [ngClass]=\"{'justify-content-between p-0 d-flex': product.quantity, 'justify-content-center': !product.quantity}\"\r\n (click)=\"removeDefault($event)\">\r\n <ng-container *ngIf=\"product?.itemInventory?.openingStock\">\r\n <ng-container *ngIf=\"!product.quantity\">\r\n <div (click)=\"addItemToCart($event, product, 'ADD')\" [style.color]=\"data.styles?.background?.accentColor\"\r\n *ngIf=\"IsEcommerce\">\r\n Add to Cart</div>\r\n <div [style.color]=\"data.styles?.background?.accentColor\" *ngIf=\"!IsEcommerce\" (click)=\"raiseLead()\">Notify\r\n Me</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"product.quantity\">\r\n <span class=\"quantity-btn\" (click)=\"addItemToCart($event, product, 'SUBSTRACT')\"\r\n [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\"\r\n [style.color]=\"data.styles?.background?.accentColor\">-</span>\r\n <span class=\"quantity\" [style.color]=\"data.styles?.background?.accentColor\">{{product.quantity}}</span>\r\n <span class=\"quantity-btn\" (click)=\"addItemToCart($event, product, 'ADD')\"\r\n [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\"\r\n [style.color]=\"data.styles?.background?.accentColor\">+</span>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"!product?.itemInventory?.openingStock\">\r\n <span class=\"d-flex align-items-center justify-content-center w-100\">\r\n <mat-icon>notification_important</mat-icon>\r\n <span class=\"ml-2\">Notify</span>\r\n </span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- <ng-template #loadingScreen>\r\n <ngx-skeleton-loader *ngIf=\"filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '100%',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\" />\r\n</ng-template> -->", styles: [".product{position:relative;display:flex;flex-direction:column;cursor:pointer;margin-bottom:10px;border-radius:10px;overflow:hidden;height:350px;background-color:#fff}.product .prod-img{position:relative;height:55%;width:100%;overflow:hidden;border:1.8px solid;border-radius:10px;border-color:#e5e7eb}.product .prod-img img{height:100%;width:100%;object-fit:cover}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.width{margin-right:10px;min-width:195px;max-width:195px}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid transparent;border-radius:5px;padding:5px;text-align:center;align-items:center}.add-to-cart .quantity-btn{padding:5px 10px;font-weight:700}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@media screen and (max-width: 475px){.width{max-width:160px;min-width:160px;height:300px}.adjustHeightWidth{max-width:100%;min-width:100%}}.h-40{height:45%;position:relative}.bottom{position:absolute;bottom:10px;width:93%;display:flex;flex-direction:column}.discount-price{font-weight:600;font-size:14px}.color{color:#000}.trim-text{text-align:inherit!important}.product-img.fade-out{opacity:0;transform:scale(.95)}.gap-15{gap:15px}.flex-wrap{flex-wrap:wrap}.carousel-buttons{display:flex;gap:10px;position:absolute;bottom:10px;left:10px;transform:translateY(-50%);pointer-events:none}.carousel-buttons div{background:#fff;display:flex;align-items:center;border-radius:100%;height:30px;width:30px;justify-content:center;pointer-events:auto}\n"] }]
16636
16636
  }], ctorParameters: () => [{ type: CartService }, { type: i2$2.Router }, { type: RestService }, { type: StorageServiceService }, { type: i6$1.MessageService }], propDecorators: { product: [{
16637
16637
  type: Input
16638
16638
  }], data: [{
@@ -16993,11 +16993,11 @@ class FeaturedProductsComponent extends BaseSection {
16993
16993
  this._eventService.buttonRedirection.emit({ data: data });
16994
16994
  }
16995
16995
  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 }); }
16996
- 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:
16996
+ 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 [simpoBackground]=\"styles?.background\"\r\n [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\"\r\n [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\"\r\n [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=\"\" 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\"\r\n class=\"d-flex w-100 scroll\" #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 >\r\n <!-- [style.width.%]=\"styles?.theme != theme.Theme1 && !isMobile ? '16.667' : ''\" -->\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}.scroll::-webkit-scrollbar{display:flex!important;height:3px}.scroll::-webkit-scrollbar-thumb{background:var(--accentColor, #d4d4d4)}}.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:
16997
16997
  //directive
16998
16998
  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:
16999
16999
  // MatBottomSheetModule,
17000
- 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"] }] }); }
17000
+ 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"] }] }); }
17001
17001
  }
17002
17002
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeaturedProductsComponent, decorators: [{
17003
17003
  type: Component,
@@ -17031,7 +17031,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
17031
17031
  SpacingAroundDirective,
17032
17032
  ButtonEditorDirective,
17033
17033
  ObjectPositionDirective,
17034
- ], 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"] }]
17034
+ ], 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 [simpoBackground]=\"styles?.background\"\r\n [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\"\r\n [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\"\r\n [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=\"\" 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\"\r\n class=\"d-flex w-100 scroll\" #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 >\r\n <!-- [style.width.%]=\"styles?.theme != theme.Theme1 && !isMobile ? '16.667' : ''\" -->\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}.scroll::-webkit-scrollbar{display:flex!important;height:3px}.scroll::-webkit-scrollbar-thumb{background:var(--accentColor, #d4d4d4)}}.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"] }]
17035
17035
  }], ctorParameters: () => [{ type: Object, decorators: [{
17036
17036
  type: Inject,
17037
17037
  args: [PLATFORM_ID]
@@ -17117,7 +17117,7 @@ class FeaturedCategoryComponent extends BaseSection {
17117
17117
  return window.innerWidth <= 475;
17118
17118
  }
17119
17119
  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 }); }
17120
- 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}.category-parent::-webkit-scrollbar{display:flex!important;height:3px}.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:
17120
+ 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;transition:.3s ease-in-out}.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}.category-parent::-webkit-scrollbar{display:flex!important;height:3px}.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:
17121
17121
  //directive
17122
17122
  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"] }] }); }
17123
17123
  }
@@ -17141,7 +17141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
17141
17141
  SvgDividerComponent,
17142
17142
  TextEditorComponent,
17143
17143
  SpacingAroundDirective,
17144
- ], 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}.category-parent::-webkit-scrollbar{display:flex!important;height:3px}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"] }]
17144
+ ], 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;transition:.3s ease-in-out}.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}.category-parent::-webkit-scrollbar{display:flex!important;height:3px}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"] }]
17145
17145
  }], ctorParameters: () => [{ type: Object, decorators: [{
17146
17146
  type: Inject,
17147
17147
  args: [PLATFORM_ID]
@@ -21626,7 +21626,7 @@ class FeaturedCollectionComponent extends BaseSection {
21626
21626
  }, 100);
21627
21627
  }
21628
21628
  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 }); }
21629
- 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}.category-parent::-webkit-scrollbar{display:flex!important;height:3px}.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:
21629
+ 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;transition:.3s ease-in-out}.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}.category-parent::-webkit-scrollbar{display:flex!important;height:3px}.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:
21630
21630
  //directive
21631
21631
  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"] }] }); }
21632
21632
  }
@@ -21651,7 +21651,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
21651
21651
  SanitizeHtmlPipe, SvgDividerComponent,
21652
21652
  TextEditorComponent,
21653
21653
  SpacingAroundDirective,
21654
- ], 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}.category-parent::-webkit-scrollbar{display:flex!important;height:3px}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"] }]
21654
+ ], 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;transition:.3s ease-in-out}.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}.category-parent::-webkit-scrollbar{display:flex!important;height:3px}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"] }]
21655
21655
  }], ctorParameters: () => [{ type: i2$2.Router }, { type: RestService }, { type: EventsService }], propDecorators: { data: [{
21656
21656
  type: Input
21657
21657
  }], responseData: [{
@@ -21741,7 +21741,7 @@ class NewCollectionComponent extends BaseSection {
21741
21741
  return brightness > threshold ? '#000000' : '#ffffff';
21742
21742
  }
21743
21743
  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 }); }
21744
- 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 text-center\" [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:
21744
+ 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 text-center\" [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:120px!important;width:120px!important}.category-back:after{height:100px!important}.category-back:before{height:100px!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;height:36px!important;display:flex;align-items:end;justify-content:center}}\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:
21745
21745
  //directive
21746
21746
  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"] }] }); }
21747
21747
  }
@@ -21766,7 +21766,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
21766
21766
  SanitizeHtmlPipe, SvgDividerComponent,
21767
21767
  TextEditorComponent,
21768
21768
  SpacingAroundDirective,
21769
- ], 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 text-center\" [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"] }]
21769
+ ], 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 text-center\" [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:120px!important;width:120px!important}.category-back:after{height:100px!important}.category-back:before{height:100px!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;height:36px!important;display:flex;align-items:end;justify-content:center}}\n"] }]
21770
21770
  }], ctorParameters: () => [{ type: i2$2.Router }, { type: RestService }, { type: EventsService }], propDecorators: { data: [{
21771
21771
  type: Input
21772
21772
  }], responseData: [{