simpo-component-library 2.0.27 → 2.0.28

package/fesm2022/simpo-component-library.mjs

@@ -45,6 +45,7 @@ import * as i13$1 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i12 from '@angular/material/core';
 import { MatNativeDateModule } from '@angular/material/core';
+import moment from 'moment';
 import { isBlurhashValid, decode } from 'blurhash';
 import * as i14$1 from 'ngx-image-zoom';
 import { NgxImageZoomModule } from 'ngx-image-zoom';
@@ -3575,6 +3576,20 @@ class RestService {
         const businessId = localStorage.getItem("bId") ?? localStorage.getItem("businessId") ?? "";
         return this.http.get(this.BASE_URL + `business/blog/by/business?businessId=${businessId}`);
     }
+    getAllService(businessId, size, page, locationId) {
+        if (!locationId) {
+            return this.http.get(this.BASE_URL + `crm/appointment/config/service?businessId=${businessId}&size=${size}&page=${page}`);
+        }
+        else {
+            return this.http.get(this.BASE_URL + `crm/appointment/config/service?businessId=${businessId}&size=${size}&page=${page}&locationId=${locationId}`);
+        }
+    }
+    getAllStaffByLocation(businessId, size, page, locationId, serviceId) {
+        return this.http.get(this.BASE_URL + `crm/appointment/config/staff?businessId=${businessId}&size=${size}&page=${page}&locationId=${locationId}&serviceId=${serviceId}`);
+    }
+    getAvailableSlots(data) {
+        return this.http.put(this.BASE_URL + `crm/appointment/config/available/timeslots`, data);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RestService, deps: [{ token: i1$1.HttpClient }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RestService, providedIn: 'root' }); }
 }
@@ -6916,42 +6931,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
             }] } });
 
 class AppointmentFormComponent extends BaseSection {
-    constructor(_eventService, matDialog, restService, snackBar) {
+    constructor(_eventService, matDialog, appointmentService, snackbar) {
         super();
         this._eventService = _eventService;
         this.matDialog = matDialog;
-        this.restService = restService;
-        this.snackBar = snackBar;
+        this.appointmentService = appointmentService;
+        this.snackbar = snackbar;
         this.isMoved = false;
+        this.minDate = new Date();
+        this.bookedSlots = new Set();
+        this.locationTiming = [];
+        this.selectedLocation = "";
+        this.formattedTimeIntervals = [];
+        this.dateFilter = (date) => {
+            const day = date?.getDay();
+            // Disable Sundays
+            return day !== 0;
+        };
+        this.selectedServices = '';
+        this.selectedStaff = '';
         this.CreateData = {
+            //appointmentId: "",
             business: {
                 id: "",
                 name: ""
             },
             clientName: "",
             mobile: "",
-            scheduledDate: "",
-            staff: [],
+            scheduledDate: new Date(),
             services: [
                 {
                     id: "",
                     name: ""
                 }
             ],
-            time: "",
+            staff: [
+                {
+                    id: "",
+                    name: ""
+                }
+            ],
+            location: {
+                id: "",
+                name: ""
+            },
+            scheduledTime: "",
             message: ""
         };
-        this.minDate = new Date();
-        this.selectedLocation = "";
-        this.staffList = [];
-        this.selectedStaff = '';
-        this.selectedServices = '';
-        this.dateFilter = (date) => {
-            const day = date?.getDay();
-            // Disable Sundays
-            return day !== 0;
-        };
         this.createLoader = false;
+        this.availableTimes = [];
     }
     ngOnInit() {
         console.log(this.data);
@@ -6962,9 +6990,9 @@ class AppointmentFormComponent extends BaseSection {
             return;
         this.businessId = localStorage.getItem("bId") ?? localStorage.getItem("businessId"),
             this.businessName = localStorage.getItem("bName") ?? localStorage.getItem("businessName");
-        this.getAllServices();
-        this.getAllLocations();
+        // this.getAllServices();
         // this.styles.layout.bannerImageDisplay = this.content.image.showImage;
+        this.getAllLocations();
     }
     get stylesLayout() {
         return { ...this.styles?.layout };
@@ -7022,14 +7050,47 @@ class AppointmentFormComponent extends BaseSection {
             return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
         });
     }
+    changeLocation() {
+        this.getAllServices();
+        this.getAllStaff();
+        this.updateLocationTiming();
+        // console.log(this.locationTiming)
+    }
+    updateLocationTiming() {
+        this.locationTiming = [];
+        const day = this.getDay();
+        for (let location of this.locationData) {
+            if (location.id === this.selectedLocation) {
+                let data = location.storeTimings[day.toUpperCase()];
+                if (!data.dayType) {
+                    this.snackbar.open('Opps shop is closed on selected date', 'close', { duration: 2000 });
+                    return;
+                }
+                this.locationTiming = this.generateTimeSlots(data.startTime, data.endTime) || [];
+            }
+        }
+    }
+    getDay() {
+        const daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+        return daysOfWeek[this.CreateData.scheduledDate.getDay()];
+    }
     getAllServices() {
-        this.restService.getAllServices(this.businessId, 1000, 0).subscribe((res) => {
+        this.selectedServices = '';
+        this.appointmentService.getAllService(this.businessId, 1000, 0, this.selectedLocation).subscribe((res) => {
             if (res.data.data.length > 0) {
-                this.serviceData = res.data.data;
-                console.log(this.serviceData);
+                // Filter services to only include those with status 'ACTIVE'
+                this.serviceData = res.data.data.filter((service) => service.status === 'ACTIVE');
+                if (this.serviceData.length > 0) {
+                    console.log(this.serviceData);
+                }
+                else {
+                    this.snackbar.open(`No active services available for this business.`, 'Close', {
+                        duration: 1500
+                    });
+                }
             }
             else {
-                this.snackBar.open(`Service is not created yet with this business`, 'Close', {
+                this.snackbar.open(`Service is not created yet with this business`, 'Close', {
                     duration: 1500
                 });
             }
@@ -7037,36 +7098,191 @@ class AppointmentFormComponent extends BaseSection {
             console.error("Error fetching services:", error); // Handle errors gracefully
         });
     }
-    getAllLocations() {
-        this.restService.getAllLocation(this.businessId, 1000, 0).subscribe((res) => {
+    getAllStaff() {
+        this.selectedStaff = '';
+        this.CreateData.scheduledTime = '';
+        this.getAvailableSlots();
+        this.appointmentService.getAllStaffByLocation(this.businessId, 1000, 0, this.selectedLocation, this.selectedServices).subscribe((res) => {
             if (res.data.data.length > 0) {
-                this.locationData = res.data.data;
+                // Filter services to only include those with status 'ACTIVE'
+                this.staffData = res.data.data.filter((staff) => staff.status === 'ACTIVE');
+                if (this.staffData.length > 0) {
+                    console.log(this.staffData);
+                }
+                else {
+                    this.snackbar.open(`No active staff available for this business.`, 'Close', {
+                        duration: 1500
+                    });
+                }
             }
             else {
-                this.snackBar.open(`Location is not created yet with this business`, 'Close', {
+                this.snackbar.open(`Staff is not created yet with this business`, 'Close', {
                     duration: 1500
                 });
             }
         }, (error) => {
-            console.error("Error fetching services:", error); // Handle errors gracefully
+            console.error("Error fetching staff:", error); // Handle errors gracefully
         });
     }
-    getAllStaff() {
-        this.restService.getAllStaff(this.businessId, 1000, 0, this.selectedLocation, this.selectedServices).subscribe((res) => {
-            this.staffList = res.data.data;
+    changeDate() {
+        this.updateLocationTiming();
+        this.getAvailableSlots();
+    }
+    getAvailableSlots() {
+        this.bookedSlots = new Set();
+        let payload = {
+            "locationId": this.selectedLocation,
+            "serviceId": this.selectedServices,
+            "staffId": this.selectedStaff,
+            "businessId": this.businessId,
+            "appointmentDate": this.CreateData.scheduledDate
+        };
+        this.appointmentService.getAvailableSlots(payload).subscribe((res) => {
+            // let selectedDate = moment(this.CreateData.scheduledDate).format('DD-MM-YYYY');;
+            // for (let staff of res.data) {
+            //   if(!staff.bookedSlots?.[selectedDate]){
+            //     this.bookedSlots = new Set();
+            //     break;
+            //   }
+            //   if (staff?.bookedSlots?.[selectedDate]) {
+            //     for (let apppointment of staff?.bookedSlots?.[selectedDate]) {
+            //       const timeSlots = this.getTime(apppointment.appointmentStartTime, apppointment.appointmentEndTime, 15);
+            //       timeSlots.splice(timeSlots.length - 1, 1);
+            //       timeSlots?.forEach(slot => this.bookedSlots.add(slot));
+            //       // this.bookedSlots = new Set(timeSlots);
+            //     }
+            //   }
+            // }
+            // console.log(this.bookedSlots)
+            // this.getBookedSlots(res);
+            this.getBookedSlots(res);
+        });
+    }
+    getBookedSlots(res) {
+        let selectedDate = moment(this.CreateData.scheduledDate).format('DD-MM-YYYY');
+        let slots = [];
+        for (let staff of res.data) {
+            if (!staff.bookedSlots?.[selectedDate]) {
+                this.bookedSlots = new Set();
+                return;
+            }
+            slots.push(...staff?.bookedSlots?.[selectedDate]);
+        }
+        slots.sort((a, b) => {
+            const dateA = new Date(a.appointmentStartTime).getTime();
+            const dateB = new Date(b.appointmentStartTime).getTime();
+            return dateA - dateB; // Ascending order
+        });
+        console.log(slots);
+        let startTime = new Date(slots[0].appointmentStartTime);
+        let endTime = new Date(slots[0].appointmentEndTime);
+        for (let apppointment of slots) {
+            let currentStartTime = new Date(apppointment.appointmentStartTime);
+            let currentEndTime = new Date(apppointment.appointmentEndTime);
+            if (currentStartTime.getTime() <= endTime.getTime()) {
+                startTime = currentStartTime.getTime() > startTime.getTime() ? currentStartTime : startTime;
+                endTime = currentEndTime.getTime() < endTime.getTime() ? currentEndTime : endTime;
+            }
+            else {
+                const timeSlots = this.getTime(startTime.toString(), endTime.toString(), 15);
+                timeSlots.splice(timeSlots.length - 1, 1);
+                timeSlots?.forEach(slot => this.bookedSlots.add(slot));
+                startTime = currentStartTime;
+                endTime = currentEndTime;
+            }
+        }
+        const timeSlots = this.getTime(startTime.toString(), endTime.toString(), 15);
+        timeSlots.splice(timeSlots.length - 1, 1);
+        timeSlots?.forEach(slot => this.bookedSlots.add(slot));
+        console.log(this.bookedSlots);
+    }
+    getTime(start, end, intervalMinutes) {
+        const startDate = new Date(start);
+        const endDate = new Date(end);
+        const slots = [];
+        while (startDate <= endDate) {
+            // Format the time as needed (e.g., "05:15 PM")
+            let hours = startDate.getHours();
+            const minutes = startDate.getMinutes();
+            const period = hours >= 12 ? 'PM' : 'AM';
+            // Convert hours to 12-hour format and pad with '0' if needed
+            hours = ((hours + 11) % 12) + 1;
+            const formattedHours = hours.toString().padStart(2, '0');
+            const formattedTime = `${formattedHours}:${minutes.toString().padStart(2, '0')} ${period}`;
+            slots.push(formattedTime);
+            // Increment time by the interval
+            startDate.setMinutes(startDate.getMinutes() + intervalMinutes);
+        }
+        return slots;
+    }
+    generateTimeSlots(startTime, endTime) {
+        console.log(startTime, endTime);
+        this.availableTimes = []; // Clear previous times
+        if (!startTime || !endTime) {
+            console.error("StartTime or EndTime is undefined:", startTime, endTime);
+            return;
+        }
+        const [startHour, startMinute, startPeriod] = this.parseTime(startTime);
+        const [endHour, endMinute, endPeriod] = this.parseTime(endTime);
+        let currentHour = startHour;
+        let currentMinute = startMinute;
+        let currentPeriod = startPeriod;
+        while (true) {
+            const formattedHour = this.padZero(currentHour === 0 ? 12 : currentHour);
+            const formattedMinute = this.padZero(currentMinute);
+            const timeString = `${formattedHour}:${formattedMinute} ${currentPeriod}`;
+            this.availableTimes.push(timeString);
+            // Increment time by 15 minutes
+            currentMinute += 15;
+            if (currentMinute === 60) {
+                currentMinute = 0;
+                currentHour = (currentHour % 12) + 1;
+                if (currentHour === 12) {
+                    currentPeriod = currentPeriod === 'AM' ? 'PM' : 'AM';
+                }
+            }
+            // Stop the loop when reaching the end time
+            if (currentHour === endHour &&
+                currentMinute === endMinute &&
+                currentPeriod === endPeriod) {
+                break;
+            }
+        }
+        return this.availableTimes;
+    }
+    parseTime(time) {
+        if (!time) {
+            console.error("Time is undefined or null:", time);
+            return [0, 0, 'AM']; // Default or fallback values
+        }
+        const [timeString, period] = time.split(" ");
+        const [hour, minute] = timeString.split(":").map(num => parseInt(num, 10)); // Ensures parsed as numbers
+        return [hour % 12, minute, period];
+    }
+    getAllLocations() {
+        this.appointmentService.getAllLocation(this.businessId, 1000, 0).subscribe((res) => {
+            if (res.data.data.length > 0) {
+                this.locationData = res.data.data.filter((service) => service.status === 'ACTIVE');
+            }
+            else {
+                this.snackbar.open(`Location is not created yet with this business`, 'Close', {
+                    duration: 1500
+                });
+            }
         }, (error) => {
             console.error("Error fetching services:", error); // Handle errors gracefully
         });
     }
     formatDate(date) {
         const year = date.getFullYear();
-        const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are zero-based
+        const month = String(date.getMonth() + 1).padStart(2, '0');
         const day = String(date.getDate()).padStart(2, '0');
         return `${year}-${month}-${day}`;
     }
+    // Function to get time slots
     getTimeSlots() {
         this.formattedDate = this.formatDate(new Date(this.CreateData.scheduledDate));
-        this.restService.getAllTimeSlots(this.selectedLocation, this.formattedDate).subscribe((res) => {
+        this.appointmentService.getAllTimeSlots(this.selectedLocation, this.formattedDate).subscribe((res) => {
             if (res) {
                 this.timeSlotsData = res;
                 this.formattedTimeIntervals = this.timeSlotsData.map((interval) => ({
@@ -7075,103 +7291,97 @@ class AppointmentFormComponent extends BaseSection {
                 this.filterTimeSlots();
             }
             else {
-                this.snackBar.open(`Time is not created yet with this business`, 'Close', {
-                    duration: 1500
-                });
+                this.snackbar.open(`Location is not created yet with this business`, 'Close', { duration: 1500 });
             }
         }, (error) => {
-            console.error("Error fetching services:", error); // Handle errors gracefully
+            console.error("Error fetching services:", error);
         });
     }
+    // Function to filter time slots
     filterTimeSlots() {
         const now = new Date();
         const selectedDate = new Date(this.CreateData.scheduledDate);
         // Check if the selected date is today
         if (selectedDate.toDateString() === now.toDateString()) {
-            const currentTime = now.getHours() * 60 + now.getMinutes(); // Convert current time to total minutes
+            const currentTime = now.getHours() * 60 + now.getMinutes();
             // Filter out the time slots that are before the current time
-            this.formattedTimeIntervals = this.formattedTimeIntervals.filter((timeSlot) => {
-                const [time, period] = timeSlot.startTime.split(' '); // Split time and period
-                const [hours, minutes] = time.split(':').map(Number);
-                const adjustedHours = (period === 'PM' && hours !== 12) ? hours + 12 : (period === 'AM' && hours === 12) ? 0 : hours; // Adjust for 24-hour format
-                const slotTime = adjustedHours * 60 + minutes; // Convert slot time to total minutes
+            this.formattedTimeIntervals = this.formattedTimeIntervals.filter(timeSlot => {
+                const [hours, minutes] = timeSlot.startTime.split(':').map(Number);
+                const slotTime = hours * 60 + minutes; // Convert slot time to total minutes
                 return slotTime > currentTime; // Only show slots after the current time
             });
         }
     }
-    isFormValid() {
-        return !this.CreateData.clientName ||
-            !this.selectedServices ||
-            !this.selectedLocation ||
-            !this.CreateData.scheduledDate;
-    }
     prepareCreateData() {
         this.CreateData.services = [];
+        this.CreateData.staff = [];
         this.serviceData.forEach((service) => {
-            if (this.selectedServices === service.id) {
+            if (this.selectedServices.includes(service.id)) {
                 this.CreateData.services.push({
                     id: service.id,
                     name: service.name
                 });
             }
         });
+        this.staffData.forEach((staff) => {
+            if (this.selectedStaff.includes(staff.id)) {
+                this.CreateData.staff.push({
+                    id: staff.id,
+                    name: staff.name
+                });
+            }
+        });
     }
     prepareLocationData() {
-        this.CreateData.locations = [];
         this.locationData.forEach((location) => {
             if (this.selectedLocation == location.id) {
-                this.CreateData.locations.push({
-                    id: location.id,
-                    name: location.name
-                });
+                this.CreateData.location.id = location.id;
+                this.CreateData.location.name = location.name;
             }
         });
     }
-    prepareStaffData() {
-        this.CreateData.staff = [];
-        this.staffList.forEach((staff) => {
-            if (staff.id === this.selectedStaff) {
-                this.CreateData.staff.push({
-                    id: staff.id,
-                    name: staff.name
-                });
-            }
-        });
+    padZero(value) {
+        return value < 10 ? `0${value}` : `${value}`;
     }
-    bookAppointment() {
-        if (!this.CreateData.mobile || this.CreateData.mobile.length != 10) {
-            this.snackBar.open('Invalid mobile number', 'close', { duration: 2000 });
-            return;
-        }
+    isTimeGreaterThanCurrent(time, currentHour, currentMinute) {
+        const [hour, minute] = time.split(':').map(Number);
+        return (hour > currentHour) || (hour === currentHour && minute >= currentMinute);
+    }
+    createAppointment() {
         this.prepareCreateData();
         this.prepareLocationData();
-        this.prepareStaffData();
         this.CreateData.business.id = this.businessId;
         this.CreateData.business.name = this.businessName;
         if (this.CreateData.scheduledDate) {
-            const originalDate = new Date(this.CreateData.scheduledDate);
-            originalDate.setDate(originalDate.getDate() + 1); // Add one day
-            this.CreateData.scheduledDate = originalDate.toISOString().split('T')[0];
+            this.CreateData.scheduledDate = moment(this.CreateData.scheduledDate).format('DD-MM-YYYY');
         }
+        this.CreateData.scheduledTime = this.CreateData.scheduledTime.toLowerCase();
         this.createLoader = true;
-        this.restService.createAppointment(this.CreateData).subscribe((res) => {
+        this.appointmentService.createAppointment(this.CreateData).subscribe((res) => {
             if (res) {
                 this.createLoader = false;
-                this.snackBar.open(`Appointment is Created`, 'Close', {
+                this.snackbar.open(`Appointment is Created`, 'Close', {
                     duration: 1500
                 });
-                this.matDialog.closeAll();
             }
         }, (error) => {
             this.createLoader = false;
-            this.snackBar.open(`Internal Server Error`, 'Close', {
+            this.snackbar.open(`Internal Server Error`, 'Close', {
                 duration: 1500
             });
             console.error("Error fetching Creation:", error); // Handle errors gracefully
         });
     }
+    isFormValid() {
+        return this.CreateData.clientName !== '' &&
+            this.CreateData.mobile !== '' &&
+            this.selectedServices.length > 0 &&
+            this.selectedLocation !== '' &&
+            this.CreateData.scheduledDate !== '' &&
+            this.CreateData.scheduledTime !== '';
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AppointmentFormComponent, deps: [{ token: EventsService }, { token: i5.MatDialog }, { token: RestService }, { token: i2$4.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AppointmentFormComponent, isStandalone: true, selector: "simpo-appointment-form", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\"\r\n  [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage}\"\r\n  [simpoBackground]=\"styles?.background\" class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n  <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n  <div class=\"px-4 py-5\" [ngClass]=\"{'col-lg-6 col-xxl-6': isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage}\"\r\n    [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n    <div class=\"row g-5 justify-content-start\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n      [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n      [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n      <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage && !isBorderlessImage\"\r\n        [simpoContainerAlignment]=\"stylesLayout\">\r\n        <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n          [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n          [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\" style=\"object-fit: cover;\"\r\n          [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n      </div>\r\n      <div class=\"d-flex flex-column justify-content-start gap-15\"\r\n        [ngClass]=\"{'col-lg-12': isBorderlessImage, 'col-lg-6': !isBorderlessImage}\"\r\n        [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n        <div *ngFor=\"let item of content?.inputText\">\r\n          <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n            [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n        </div>\r\n        <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n          <div class=\"card_wrapper\">\r\n            <div class=\"container_card visible\">\r\n              <div class=\"card-section\">\r\n                <div class=\"second-part-card\">\r\n\r\n                </div>\r\n                <div class=\"first-part-card\"\r\n                  [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                  <img loading=\"lazy\" class=\"tick-img\"\r\n                    src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/933997c1718790303127907598c1696063061900green_verified_image.png\"\r\n                    alt=\"something\" />\r\n\r\n                  {{ item.inputText[0].value }}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n          [simpoContainerAlignment]=\"stylesLayout\">\r\n          <div *ngFor=\"let button of data?.action?.buttons\">\r\n            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n              (click)=\"opendailogbox(dialogBox)\" [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- <div style=\" width: 100%; height: 500px;\">\r\n    <img loading=\"lazy\"  src=\"../../assets/divider.svg\" style=\"clip-path: polygon(0 55%, 100% 0, 100% 100%, 0% 100%); background-color: red;\">\r\n  </div> -->\r\n  <div [ngClass]=\"{'hover_effect': edit && false }\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n      [isMerged]=\"styles?.merge ?? false\"></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</div>\r\n<ng-template #ImageSection>\r\n  <div class=\"col-10 col-sm-8 col-lg-6\"\r\n    [ngStyle]=\"{'width': styles?.positionLayout?.value === 'right' ? 'fit-content' : ''}\"\r\n    style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n    [simpoBorderless]=\"getPositionLayout\">\r\n    <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n      [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n<!-- Dialog template -->\r\n<ng-template #dialogBox class=\"dialogbox\">\r\n  <div class=\"appointment-form\">\r\n    <div class=\"header-section\">\r\n      <div class=\"header-left-side\">\r\n        <h2 style=\"text-align: left;\">Book an Appointment</h2>\r\n      </div>\r\n      <div class=\"header-right-side\">\r\n        <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <form>\r\n      <div class=\"name-mobile\">\r\n        <div class=\"sfull-width\">\r\n          <div class=\"input-text\">Name</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <input class=\"inputStyle\" matInput placeholder=\"Enter Your Name\" pattern=\"[a-zA-Z ]*\"\r\n              [(ngModel)]=\"CreateData.clientName\" (ngModelChange)=\"onUserNameChange($event)\" [ngModelOptions]=\"{standalone: true}\">\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <div class=\"sfull-width\">\r\n          <div class=\"input-text\">Mobile Number</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <input type=\"text\" class=\"inputStyle\" matInput placeholder=\"Enter Your Mobile Number\"\r\n              pattern=\"^[0-9]{10,15}$\" maxlength=\"15\" (focus)=\"onFocus()\" (keypress)=\"restrictNonNumeric($event)\"\r\n              [(ngModel)]=\"CreateData.mobile\" [ngModelOptions]=\"{standalone: true}\">\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"name-mobile\">\r\n        <div class=\"sfull-width\">\r\n          <div class=\"input-text\">Location</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <mat-select class=\"inputStyle\" placeholder=\"Select Location\" [(ngModel)]=\"selectedLocation\" (ngModelChange)=\"getAllStaff()\" [ngModelOptions]=\"{standalone: true}\">\r\n              <ng-container *ngFor=\"let location of locationData\">\r\n                <mat-option [value]=\"location.id\">\r\n                  {{ location.name }}\r\n                </mat-option>\r\n              </ng-container>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"sfull-width\">\r\n          <div class=\"input-text\">Service</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <mat-select class=\"inputStyle\" placeholder=\"Select Service\" [(ngModel)]=\"selectedServices\" (ngModelChange)=\"getAllStaff()\" [ngModelOptions]=\"{standalone: true}\">\r\n              <ng-container *ngFor=\"let service of serviceData\">\r\n                <mat-option [value]=\"service.id\">\r\n                  {{ service.name }}\r\n                </mat-option>\r\n              </ng-container>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"name-mobile\">\r\n        <div class=\"sfull-width\">\r\n          <div class=\"input-text\">Staff</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <mat-select class=\"inputStyle\" placeholder=\"Select Staff\" [(ngModel)]=\"selectedStaff\" [ngModelOptions]=\"{standalone: true}\">\r\n              <ng-container *ngFor=\"let staff of staffList\">\r\n                <mat-option [value]=\"staff.id\">\r\n                  {{ staff.name }}\r\n                </mat-option>\r\n              </ng-container>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"name-mobile\">\r\n        <div class=\"sfull-width\">\r\n          <div class=\"input-text\">Date</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <input class=\"inputStyle\" matInput [matDatepicker]=\"picker\" placeholder=\"Select Date\"\r\n              [(ngModel)]=\"CreateData.scheduledDate\" (ngModelChange)=\"getTimeSlots()\" [min]=\"minDate\"\r\n              [matDatepickerFilter]=\"dateFilter\" [ngModelOptions]=\"{standalone: true}\">\r\n            <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n            <mat-datepicker #picker></mat-datepicker>\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <div class=\"sfull-width\">\r\n          <div class=\"input-text\">Time</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <mat-select class=\"inputStyle\" placeholder=\"Select Location\" [(ngModel)]=\"CreateData.time\" [ngModelOptions]=\"{standalone: true}\">\r\n              <ng-container *ngFor=\"let time of formattedTimeIntervals\">\r\n                <mat-option [value]=\"time.startTime\">\r\n                  {{ time.startTime }}\r\n                </mat-option>\r\n              </ng-container>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <div class=\"full-message-section\">\r\n        <div class=\"business-field-section\">\r\n          <div class=\"input-text\">Message</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <input class=\"inputStyle\" matInput placeholder=\"Enter Your Name\" pattern=\"[a-zA-Z ]*\"\r\n              [(ngModel)]=\"CreateData.message\" [ngModelOptions]=\"{standalone: true}\">\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"bottom-section\">\r\n        <div class=\"button-section\">\r\n          <button class=\"booking-button\" [disabled]=\"isFormValid()\" (click)=\"bookAppointment()\">\r\n            Book Appointment\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n\r\n    </form>\r\n  </div>\r\n</ng-template>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.appointment-form{width:60vw;margin:auto;background-color:#fff;border-radius:8px;padding:20px;box-shadow:0 4px 8px #0000001a}h2{text-align:center;margin-bottom:20px}.form-group{display:flex;flex-direction:column;margin-bottom:15px;width:100%}label{font-weight:700;margin-bottom:5px}input,select,textarea{padding:8px;border:1px solid #ccc;border-radius:4px;font-size:14px}input::placeholder,textarea::placeholder{color:#888}.name-mobile,.date-time{display:flex;justify-content:space-between}textarea{resize:vertical}.book-btn{width:100%;background-color:#007bff;color:#fff;border:none;padding:10px;border-radius:4px;font-size:16px;cursor:pointer}.book-btn:hover{background-color:#0056b3}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}}.text-element{inline-size:100%;overflow-wrap:break-word}.mergeNavbar{margin-top:-75px;padding-top:75px}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.sfull-width{width:49%;height:75px}.input-text{margin-bottom:5px}.full-width{width:100%}.bottom-section{width:100%;display:flex;justify-content:right}.button-section{width:30%}.booking-button{background:#0496ff;color:#fff;border:1px solid#0496FF;border-radius:10px;padding:7px 5px}.header-section{display:flex;width:100%;justify-content:space-between}.header-left-side{width:50%}.header-right-side{width:5%;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i10$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i11$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i13$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i13$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i13$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i14.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AppointmentFormComponent, isStandalone: true, selector: "simpo-appointment-form", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\"\r\n  [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage}\"\r\n  [simpoBackground]=\"styles?.background\" class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n  <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n  <div class=\"px-4 py-5\" [ngClass]=\"{'col-lg-6 col-xxl-6': isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage}\"\r\n    [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n    <div class=\"row g-5 justify-content-start\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n      [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n      [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n      <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage && !isBorderlessImage\"\r\n        [simpoContainerAlignment]=\"stylesLayout\">\r\n        <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n          [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n          [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\" style=\"object-fit: cover;\"\r\n          [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n      </div>\r\n      <div class=\"d-flex flex-column justify-content-start gap-15\"\r\n        [ngClass]=\"{'col-lg-12': isBorderlessImage, 'col-lg-6': !isBorderlessImage}\"\r\n        [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n        <div *ngFor=\"let item of content?.inputText\">\r\n          <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n            [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n        </div>\r\n        <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n          <div class=\"card_wrapper\">\r\n            <div class=\"container_card visible\">\r\n              <div class=\"card-section\">\r\n                <div class=\"second-part-card\">\r\n\r\n                </div>\r\n                <div class=\"first-part-card\"\r\n                  [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                  <img loading=\"lazy\" class=\"tick-img\"\r\n                    src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/933997c1718790303127907598c1696063061900green_verified_image.png\"\r\n                    alt=\"something\" />\r\n\r\n                  {{ item.inputText[0].value }}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n          [simpoContainerAlignment]=\"stylesLayout\">\r\n          <div *ngFor=\"let button of data?.action?.buttons\">\r\n            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n              (click)=\"opendailogbox(dialogBox)\" [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- <div style=\" width: 100%; height: 500px;\">\r\n    <img loading=\"lazy\"  src=\"../../assets/divider.svg\" style=\"clip-path: polygon(0 55%, 100% 0, 100% 100%, 0% 100%); background-color: red;\">\r\n  </div> -->\r\n  <div [ngClass]=\"{'hover_effect': edit && false }\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n      [isMerged]=\"styles?.merge ?? false\"></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</div>\r\n<ng-template #ImageSection>\r\n  <div class=\"col-10 col-sm-8 col-lg-6\"\r\n    [ngStyle]=\"{'width': styles?.positionLayout?.value === 'right' ? 'fit-content' : ''}\"\r\n    style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n    [simpoBorderless]=\"getPositionLayout\">\r\n    <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n      [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n<!-- Dialog template -->\r\n<ng-template #dialogBox class=\"dialogbox\">\r\n  <div class=\"appointment-form\">\r\n    <div class=\"header-section\">\r\n      <div class=\"header-left-side\">\r\n        <h2 style=\"text-align: left;\">Book an Appointment</h2>\r\n      </div>\r\n      <div class=\"header-right-side\">\r\n        <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <form>\r\n      <div class=\"name-mobile\">\r\n        <div class=\"sfull-width\">\r\n          <div class=\"input-text\">Name</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <input class=\"inputStyle\" matInput placeholder=\"Enter Your Name\" pattern=\"[a-zA-Z ]*\"\r\n              [(ngModel)]=\"CreateData.clientName\" (ngModelChange)=\"onUserNameChange($event)\" [ngModelOptions]=\"{standalone: true}\">\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <div class=\"sfull-width\">\r\n          <div class=\"input-text\">Mobile Number</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <input type=\"text\" class=\"inputStyle\" matInput placeholder=\"Enter Your Mobile Number\"\r\n              pattern=\"^[0-9]{10,15}$\" maxlength=\"15\" (focus)=\"onFocus()\" (keypress)=\"restrictNonNumeric($event)\"\r\n              [(ngModel)]=\"CreateData.mobile\" [ngModelOptions]=\"{standalone: true}\">\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"name-mobile\">\r\n        <div class=\"sfull-width\">\r\n          <div class=\"input-text\">Location</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <mat-select class=\"inputStyle\" placeholder=\"Select Location\" [(ngModel)]=\"selectedLocation\" (ngModelChange)=\"changeLocation()\" [ngModelOptions]=\"{standalone: true}\">\r\n              <ng-container *ngFor=\"let location of locationData\">\r\n                <mat-option [value]=\"location.id\">\r\n                  {{ location.name }}\r\n                </mat-option>\r\n              </ng-container>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"sfull-width\">\r\n          <div class=\"input-text\">Service</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <mat-select class=\"inputStyle\" placeholder=\"Select Service\" [(ngModel)]=\"selectedServices\" (ngModelChange)=\"getAllStaff()\" [ngModelOptions]=\"{standalone: true}\">\r\n              <ng-container *ngFor=\"let service of serviceData\">\r\n                <mat-option [value]=\"service.id\">\r\n                  {{ service.name }}\r\n                </mat-option>\r\n              </ng-container>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"name-mobile\">\r\n        <div class=\"sfull-width\">\r\n          <div class=\"input-text\">Staff</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <mat-select class=\"inputStyle\" placeholder=\"Select Staff\" [(ngModel)]=\"selectedStaff\"  (ngModelChange)=\"getAvailableSlots()\" [ngModelOptions]=\"{standalone: true}\">\r\n              <ng-container *ngFor=\"let staff of staffData\">\r\n                <mat-option [value]=\"staff.id\">\r\n                  {{ staff.name }}\r\n                </mat-option>\r\n              </ng-container>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"name-mobile\">\r\n        <div class=\"sfull-width\">\r\n          <div class=\"input-text\">Date</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <input class=\"inputStyle\" matInput [matDatepicker]=\"picker\" placeholder=\"Select Date\"\r\n              [(ngModel)]=\"CreateData.scheduledDate\" (ngModelChange)=\"changeDate()\" [min]=\"minDate\"\r\n              [matDatepickerFilter]=\"dateFilter\" [ngModelOptions]=\"{standalone: true}\">\r\n            <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n            <mat-datepicker #picker></mat-datepicker>\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <div class=\"sfull-width\">\r\n          <div class=\"input-text\">Time</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <mat-select class=\"inputStyle\" placeholder=\"Select Location\" [(ngModel)]=\"CreateData.scheduledTime\" [ngModelOptions]=\"{standalone: true}\">\r\n              <mat-option *ngFor=\"let time of locationTiming\" [value]=\"time\" [disabled]=\"bookedSlots.has(time)\">\r\n                {{ time }}\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <div class=\"full-message-section\">\r\n        <div class=\"business-field-section\">\r\n          <div class=\"input-text\">Message</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <input class=\"inputStyle\" matInput placeholder=\"Enter Your Name\" pattern=\"[a-zA-Z ]*\"\r\n              [(ngModel)]=\"CreateData.message\" [ngModelOptions]=\"{standalone: true}\">\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"bottom-section\">\r\n        <div class=\"button-section\">\r\n          <button class=\"booking-button\" [disabled]=\"isFormValid()\" (click)=\"createAppointment()\">\r\n            Book Appointment\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n\r\n    </form>\r\n  </div>\r\n</ng-template>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.appointment-form{width:60vw;margin:auto;background-color:#fff;border-radius:8px;padding:20px;box-shadow:0 4px 8px #0000001a}h2{text-align:center;margin-bottom:20px}.form-group{display:flex;flex-direction:column;margin-bottom:15px;width:100%}label{font-weight:700;margin-bottom:5px}input,select,textarea{padding:8px;border:1px solid #ccc;border-radius:4px;font-size:14px}input::placeholder,textarea::placeholder{color:#888}.name-mobile,.date-time{display:flex;justify-content:space-between}textarea{resize:vertical}.book-btn{width:100%;background-color:#007bff;color:#fff;border:none;padding:10px;border-radius:4px;font-size:16px;cursor:pointer}.book-btn:hover{background-color:#0056b3}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}}.text-element{inline-size:100%;overflow-wrap:break-word}.mergeNavbar{margin-top:-75px;padding-top:75px}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.sfull-width{width:49%;height:75px}.input-text{margin-bottom:5px}.full-width{width:100%}.bottom-section{width:100%;display:flex;justify-content:right}.button-section{width:30%}.booking-button{background:#0496ff;color:#fff;border:1px solid#0496FF;border-radius:10px;padding:7px 5px}.header-section{display:flex;width:100%;justify-content:space-between}.header-left-side{width:50%}.header-right-side{width:5%;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i10$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i11$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i13$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i13$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i13$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i14.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 
                 //directive
                 SimpoBorderlessDirective, selector: "[simpoBorderless]", inputs: ["simpoBorderless"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
 }
@@ -7216,7 +7426,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         ColorDirective,
                         TextSizeDirective,
                         SanitizeHtmlPipe
-                    ], template: "<div [id]=\"data?.id\"\r\n  [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage}\"\r\n  [simpoBackground]=\"styles?.background\" class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n  <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n  <div class=\"px-4 py-5\" [ngClass]=\"{'col-lg-6 col-xxl-6': isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage}\"\r\n    [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n    <div class=\"row g-5 justify-content-start\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n      [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n      [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n      <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage && !isBorderlessImage\"\r\n        [simpoContainerAlignment]=\"stylesLayout\">\r\n        <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n          [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n          [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\" style=\"object-fit: cover;\"\r\n          [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n      </div>\r\n      <div class=\"d-flex flex-column justify-content-start gap-15\"\r\n        [ngClass]=\"{'col-lg-12': isBorderlessImage, 'col-lg-6': !isBorderlessImage}\"\r\n        [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n        <div *ngFor=\"let item of content?.inputText\">\r\n          <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n            [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n        </div>\r\n        <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n          <div class=\"card_wrapper\">\r\n            <div class=\"container_card visible\">\r\n              <div class=\"card-section\">\r\n                <div class=\"second-part-card\">\r\n\r\n                </div>\r\n                <div class=\"first-part-card\"\r\n                  [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                  <img loading=\"lazy\" class=\"tick-img\"\r\n                    src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/933997c1718790303127907598c1696063061900green_verified_image.png\"\r\n                    alt=\"something\" />\r\n\r\n                  {{ item.inputText[0].value }}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n          [simpoContainerAlignment]=\"stylesLayout\">\r\n          <div *ngFor=\"let button of data?.action?.buttons\">\r\n            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n              (click)=\"opendailogbox(dialogBox)\" [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- <div style=\" width: 100%; height: 500px;\">\r\n    <img loading=\"lazy\"  src=\"../../assets/divider.svg\" style=\"clip-path: polygon(0 55%, 100% 0, 100% 100%, 0% 100%); background-color: red;\">\r\n  </div> -->\r\n  <div [ngClass]=\"{'hover_effect': edit && false }\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n      [isMerged]=\"styles?.merge ?? false\"></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</div>\r\n<ng-template #ImageSection>\r\n  <div class=\"col-10 col-sm-8 col-lg-6\"\r\n    [ngStyle]=\"{'width': styles?.positionLayout?.value === 'right' ? 'fit-content' : ''}\"\r\n    style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n    [simpoBorderless]=\"getPositionLayout\">\r\n    <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n      [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n<!-- Dialog template -->\r\n<ng-template #dialogBox class=\"dialogbox\">\r\n  <div class=\"appointment-form\">\r\n    <div class=\"header-section\">\r\n      <div class=\"header-left-side\">\r\n        <h2 style=\"text-align: left;\">Book an Appointment</h2>\r\n      </div>\r\n      <div class=\"header-right-side\">\r\n        <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <form>\r\n      <div class=\"name-mobile\">\r\n        <div class=\"sfull-width\">\r\n          <div class=\"input-text\">Name</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <input class=\"inputStyle\" matInput placeholder=\"Enter Your Name\" pattern=\"[a-zA-Z ]*\"\r\n              [(ngModel)]=\"CreateData.clientName\" (ngModelChange)=\"onUserNameChange($event)\" [ngModelOptions]=\"{standalone: true}\">\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <div class=\"sfull-width\">\r\n          <div class=\"input-text\">Mobile Number</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <input type=\"text\" class=\"inputStyle\" matInput placeholder=\"Enter Your Mobile Number\"\r\n              pattern=\"^[0-9]{10,15}$\" maxlength=\"15\" (focus)=\"onFocus()\" (keypress)=\"restrictNonNumeric($event)\"\r\n              [(ngModel)]=\"CreateData.mobile\" [ngModelOptions]=\"{standalone: true}\">\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"name-mobile\">\r\n        <div class=\"sfull-width\">\r\n          <div class=\"input-text\">Location</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <mat-select class=\"inputStyle\" placeholder=\"Select Location\" [(ngModel)]=\"selectedLocation\" (ngModelChange)=\"getAllStaff()\" [ngModelOptions]=\"{standalone: true}\">\r\n              <ng-container *ngFor=\"let location of locationData\">\r\n                <mat-option [value]=\"location.id\">\r\n                  {{ location.name }}\r\n                </mat-option>\r\n              </ng-container>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"sfull-width\">\r\n          <div class=\"input-text\">Service</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <mat-select class=\"inputStyle\" placeholder=\"Select Service\" [(ngModel)]=\"selectedServices\" (ngModelChange)=\"getAllStaff()\" [ngModelOptions]=\"{standalone: true}\">\r\n              <ng-container *ngFor=\"let service of serviceData\">\r\n                <mat-option [value]=\"service.id\">\r\n                  {{ service.name }}\r\n                </mat-option>\r\n              </ng-container>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"name-mobile\">\r\n        <div class=\"sfull-width\">\r\n          <div class=\"input-text\">Staff</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <mat-select class=\"inputStyle\" placeholder=\"Select Staff\" [(ngModel)]=\"selectedStaff\" [ngModelOptions]=\"{standalone: true}\">\r\n              <ng-container *ngFor=\"let staff of staffList\">\r\n                <mat-option [value]=\"staff.id\">\r\n                  {{ staff.name }}\r\n                </mat-option>\r\n              </ng-container>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"name-mobile\">\r\n        <div class=\"sfull-width\">\r\n          <div class=\"input-text\">Date</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <input class=\"inputStyle\" matInput [matDatepicker]=\"picker\" placeholder=\"Select Date\"\r\n              [(ngModel)]=\"CreateData.scheduledDate\" (ngModelChange)=\"getTimeSlots()\" [min]=\"minDate\"\r\n              [matDatepickerFilter]=\"dateFilter\" [ngModelOptions]=\"{standalone: true}\">\r\n            <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n            <mat-datepicker #picker></mat-datepicker>\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <div class=\"sfull-width\">\r\n          <div class=\"input-text\">Time</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <mat-select class=\"inputStyle\" placeholder=\"Select Location\" [(ngModel)]=\"CreateData.time\" [ngModelOptions]=\"{standalone: true}\">\r\n              <ng-container *ngFor=\"let time of formattedTimeIntervals\">\r\n                <mat-option [value]=\"time.startTime\">\r\n                  {{ time.startTime }}\r\n                </mat-option>\r\n              </ng-container>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <div class=\"full-message-section\">\r\n        <div class=\"business-field-section\">\r\n          <div class=\"input-text\">Message</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <input class=\"inputStyle\" matInput placeholder=\"Enter Your Name\" pattern=\"[a-zA-Z ]*\"\r\n              [(ngModel)]=\"CreateData.message\" [ngModelOptions]=\"{standalone: true}\">\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"bottom-section\">\r\n        <div class=\"button-section\">\r\n          <button class=\"booking-button\" [disabled]=\"isFormValid()\" (click)=\"bookAppointment()\">\r\n            Book Appointment\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n\r\n    </form>\r\n  </div>\r\n</ng-template>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.appointment-form{width:60vw;margin:auto;background-color:#fff;border-radius:8px;padding:20px;box-shadow:0 4px 8px #0000001a}h2{text-align:center;margin-bottom:20px}.form-group{display:flex;flex-direction:column;margin-bottom:15px;width:100%}label{font-weight:700;margin-bottom:5px}input,select,textarea{padding:8px;border:1px solid #ccc;border-radius:4px;font-size:14px}input::placeholder,textarea::placeholder{color:#888}.name-mobile,.date-time{display:flex;justify-content:space-between}textarea{resize:vertical}.book-btn{width:100%;background-color:#007bff;color:#fff;border:none;padding:10px;border-radius:4px;font-size:16px;cursor:pointer}.book-btn:hover{background-color:#0056b3}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}}.text-element{inline-size:100%;overflow-wrap:break-word}.mergeNavbar{margin-top:-75px;padding-top:75px}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.sfull-width{width:49%;height:75px}.input-text{margin-bottom:5px}.full-width{width:100%}.bottom-section{width:100%;display:flex;justify-content:right}.button-section{width:30%}.booking-button{background:#0496ff;color:#fff;border:1px solid#0496FF;border-radius:10px;padding:7px 5px}.header-section{display:flex;width:100%;justify-content:space-between}.header-left-side{width:50%}.header-right-side{width:5%;cursor:pointer}\n"] }]
+                    ], template: "<div [id]=\"data?.id\"\r\n  [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage}\"\r\n  [simpoBackground]=\"styles?.background\" class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n  <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n  <div class=\"px-4 py-5\" [ngClass]=\"{'col-lg-6 col-xxl-6': isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage}\"\r\n    [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n    <div class=\"row g-5 justify-content-start\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n      [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n      [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n      <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage && !isBorderlessImage\"\r\n        [simpoContainerAlignment]=\"stylesLayout\">\r\n        <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n          [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n          [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\" style=\"object-fit: cover;\"\r\n          [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n      </div>\r\n      <div class=\"d-flex flex-column justify-content-start gap-15\"\r\n        [ngClass]=\"{'col-lg-12': isBorderlessImage, 'col-lg-6': !isBorderlessImage}\"\r\n        [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n        <div *ngFor=\"let item of content?.inputText\">\r\n          <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n            [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n        </div>\r\n        <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n          <div class=\"card_wrapper\">\r\n            <div class=\"container_card visible\">\r\n              <div class=\"card-section\">\r\n                <div class=\"second-part-card\">\r\n\r\n                </div>\r\n                <div class=\"first-part-card\"\r\n                  [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                  <img loading=\"lazy\" class=\"tick-img\"\r\n                    src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/933997c1718790303127907598c1696063061900green_verified_image.png\"\r\n                    alt=\"something\" />\r\n\r\n                  {{ item.inputText[0].value }}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n          [simpoContainerAlignment]=\"stylesLayout\">\r\n          <div *ngFor=\"let button of data?.action?.buttons\">\r\n            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n              (click)=\"opendailogbox(dialogBox)\" [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- <div style=\" width: 100%; height: 500px;\">\r\n    <img loading=\"lazy\"  src=\"../../assets/divider.svg\" style=\"clip-path: polygon(0 55%, 100% 0, 100% 100%, 0% 100%); background-color: red;\">\r\n  </div> -->\r\n  <div [ngClass]=\"{'hover_effect': edit && false }\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n      [isMerged]=\"styles?.merge ?? false\"></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</div>\r\n<ng-template #ImageSection>\r\n  <div class=\"col-10 col-sm-8 col-lg-6\"\r\n    [ngStyle]=\"{'width': styles?.positionLayout?.value === 'right' ? 'fit-content' : ''}\"\r\n    style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n    [simpoBorderless]=\"getPositionLayout\">\r\n    <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n      [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n<!-- Dialog template -->\r\n<ng-template #dialogBox class=\"dialogbox\">\r\n  <div class=\"appointment-form\">\r\n    <div class=\"header-section\">\r\n      <div class=\"header-left-side\">\r\n        <h2 style=\"text-align: left;\">Book an Appointment</h2>\r\n      </div>\r\n      <div class=\"header-right-side\">\r\n        <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <form>\r\n      <div class=\"name-mobile\">\r\n        <div class=\"sfull-width\">\r\n          <div class=\"input-text\">Name</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <input class=\"inputStyle\" matInput placeholder=\"Enter Your Name\" pattern=\"[a-zA-Z ]*\"\r\n              [(ngModel)]=\"CreateData.clientName\" (ngModelChange)=\"onUserNameChange($event)\" [ngModelOptions]=\"{standalone: true}\">\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <div class=\"sfull-width\">\r\n          <div class=\"input-text\">Mobile Number</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <input type=\"text\" class=\"inputStyle\" matInput placeholder=\"Enter Your Mobile Number\"\r\n              pattern=\"^[0-9]{10,15}$\" maxlength=\"15\" (focus)=\"onFocus()\" (keypress)=\"restrictNonNumeric($event)\"\r\n              [(ngModel)]=\"CreateData.mobile\" [ngModelOptions]=\"{standalone: true}\">\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"name-mobile\">\r\n        <div class=\"sfull-width\">\r\n          <div class=\"input-text\">Location</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <mat-select class=\"inputStyle\" placeholder=\"Select Location\" [(ngModel)]=\"selectedLocation\" (ngModelChange)=\"changeLocation()\" [ngModelOptions]=\"{standalone: true}\">\r\n              <ng-container *ngFor=\"let location of locationData\">\r\n                <mat-option [value]=\"location.id\">\r\n                  {{ location.name }}\r\n                </mat-option>\r\n              </ng-container>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"sfull-width\">\r\n          <div class=\"input-text\">Service</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <mat-select class=\"inputStyle\" placeholder=\"Select Service\" [(ngModel)]=\"selectedServices\" (ngModelChange)=\"getAllStaff()\" [ngModelOptions]=\"{standalone: true}\">\r\n              <ng-container *ngFor=\"let service of serviceData\">\r\n                <mat-option [value]=\"service.id\">\r\n                  {{ service.name }}\r\n                </mat-option>\r\n              </ng-container>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"name-mobile\">\r\n        <div class=\"sfull-width\">\r\n          <div class=\"input-text\">Staff</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <mat-select class=\"inputStyle\" placeholder=\"Select Staff\" [(ngModel)]=\"selectedStaff\"  (ngModelChange)=\"getAvailableSlots()\" [ngModelOptions]=\"{standalone: true}\">\r\n              <ng-container *ngFor=\"let staff of staffData\">\r\n                <mat-option [value]=\"staff.id\">\r\n                  {{ staff.name }}\r\n                </mat-option>\r\n              </ng-container>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"name-mobile\">\r\n        <div class=\"sfull-width\">\r\n          <div class=\"input-text\">Date</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <input class=\"inputStyle\" matInput [matDatepicker]=\"picker\" placeholder=\"Select Date\"\r\n              [(ngModel)]=\"CreateData.scheduledDate\" (ngModelChange)=\"changeDate()\" [min]=\"minDate\"\r\n              [matDatepickerFilter]=\"dateFilter\" [ngModelOptions]=\"{standalone: true}\">\r\n            <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n            <mat-datepicker #picker></mat-datepicker>\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <div class=\"sfull-width\">\r\n          <div class=\"input-text\">Time</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <mat-select class=\"inputStyle\" placeholder=\"Select Location\" [(ngModel)]=\"CreateData.scheduledTime\" [ngModelOptions]=\"{standalone: true}\">\r\n              <mat-option *ngFor=\"let time of locationTiming\" [value]=\"time\" [disabled]=\"bookedSlots.has(time)\">\r\n                {{ time }}\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <div class=\"full-message-section\">\r\n        <div class=\"business-field-section\">\r\n          <div class=\"input-text\">Message</div>\r\n          <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n            <input class=\"inputStyle\" matInput placeholder=\"Enter Your Name\" pattern=\"[a-zA-Z ]*\"\r\n              [(ngModel)]=\"CreateData.message\" [ngModelOptions]=\"{standalone: true}\">\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"bottom-section\">\r\n        <div class=\"button-section\">\r\n          <button class=\"booking-button\" [disabled]=\"isFormValid()\" (click)=\"createAppointment()\">\r\n            Book Appointment\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n\r\n    </form>\r\n  </div>\r\n</ng-template>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.appointment-form{width:60vw;margin:auto;background-color:#fff;border-radius:8px;padding:20px;box-shadow:0 4px 8px #0000001a}h2{text-align:center;margin-bottom:20px}.form-group{display:flex;flex-direction:column;margin-bottom:15px;width:100%}label{font-weight:700;margin-bottom:5px}input,select,textarea{padding:8px;border:1px solid #ccc;border-radius:4px;font-size:14px}input::placeholder,textarea::placeholder{color:#888}.name-mobile,.date-time{display:flex;justify-content:space-between}textarea{resize:vertical}.book-btn{width:100%;background-color:#007bff;color:#fff;border:none;padding:10px;border-radius:4px;font-size:16px;cursor:pointer}.book-btn:hover{background-color:#0056b3}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}}.text-element{inline-size:100%;overflow-wrap:break-word}.mergeNavbar{margin-top:-75px;padding-top:75px}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.sfull-width{width:49%;height:75px}.input-text{margin-bottom:5px}.full-width{width:100%}.bottom-section{width:100%;display:flex;justify-content:right}.button-section{width:30%}.booking-button{background:#0496ff;color:#fff;border:1px solid#0496FF;border-radius:10px;padding:7px 5px}.header-section{display:flex;width:100%;justify-content:space-between}.header-left-side{width:50%}.header-right-side{width:5%;cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: i5.MatDialog }, { type: RestService }, { type: i2$4.MatSnackBar }], propDecorators: { data: [{
                 type: Input
             }], index: [{