simpo-component-library 3.6.524 → 3.6.526

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 (18) hide show
  1. package/esm2022/lib/ecommerce/sections/authentication-required/authentication-required.component.mjs +3 -3
  2. package/esm2022/lib/sections/appointment-form/appointment-booking/appointment-booking/appointment-booking.component.mjs +7 -3
  3. package/esm2022/lib/sections/news-letter-component/news-letter-component.component.mjs +3 -3
  4. package/esm2022/lib/services/rest.service.mjs +8 -5
  5. package/esm2022/lib/tokens/api-token.mjs +2 -1
  6. package/fesm2022/simpo-component-library.mjs +18 -10
  7. package/fesm2022/simpo-component-library.mjs.map +1 -1
  8. package/lib/ecommerce/sections/authentication-required/authentication-required.component.d.ts +1 -1
  9. package/lib/ecommerce/sections/product-desc/product-desc.component.d.ts +1 -1
  10. package/lib/ecommerce/sections/schemes/schemes.component.d.ts +1 -1
  11. package/lib/elements/link-editor/link-editor.component.d.ts +1 -1
  12. package/lib/sections/appointment-form/appointment-booking/appointment-booking/appointment-booking.component.d.ts +1 -0
  13. package/lib/sections/pricing-section/pricing-section.component.d.ts +1 -1
  14. package/lib/services/rest.service.d.ts +2 -2
  15. package/lib/tokens/api-token.d.ts +1 -0
  16. package/package.json +1 -1
  17. package/simpo-component-library-3.6.526.tgz +0 -0
  18. package/simpo-component-library-3.6.524.tgz +0 -0
package/fesm2022/simpo-component-library.mjs CHANGED
@@ -767,6 +767,7 @@ const ECOMMERCE_URL = new InjectionToken('ecommerceURL');
767
767
  const CMIS_URL = new InjectionToken('cmisURL');
768
768
  const BUCKET_URL = new InjectionToken('bucketURL');
769
769
  const PASSBOOK_URL = new InjectionToken('passbookURL');
770
+ const APPOINTMENT_URL = new InjectionToken('appointmentUrl');
770
771
 
771
772
  class ImageUplaodService {
772
773
  // region = 'us-east-1'
@@ -6894,7 +6895,7 @@ class checkItemAlreadyAdded {
6894
6895
  class RestService {
6895
6896
  constructor(http,
6896
6897
  // private readonly eventService: EventsService,
6897
- BASE_URL, ECOMMERCE_URL, CMIS_URL, cookieService, storage, PASSBOOK_URL) {
6898
+ BASE_URL, ECOMMERCE_URL, CMIS_URL, cookieService, storage, PASSBOOK_URL, APPOINTMENT_URL) {
6898
6899
  this.http = http;
6899
6900
  this.BASE_URL = BASE_URL;
6900
6901
  this.ECOMMERCE_URL = ECOMMERCE_URL;
@@ -6902,6 +6903,7 @@ class RestService {
6902
6903
  this.cookieService = cookieService;
6903
6904
  this.storage = storage;
6904
6905
  this.PASSBOOK_URL = PASSBOOK_URL;
6906
+ this.APPOINTMENT_URL = APPOINTMENT_URL;
6905
6907
  // private BASE_URL: string = "https://dev-api.simpo.ai/";
6906
6908
  // private ECOMMERCE_URL: string = "https://dev-ecommerce.simpo.ai/";
6907
6909
  // private CMIS_URL: string = "https://api-cmis.tejsoft.com/"; //production
@@ -6909,7 +6911,6 @@ class RestService {
6909
6911
  // private CMIS_URL: string = "https://stageapi-cmis.tejsoft.com/"; //stage
6910
6912
  this.environmentTypeSubscriber = null;
6911
6913
  this.isJewellery = false;
6912
- this.APPOINTMENT_URL = "https://stage-appointment.simpo.ai/";
6913
6914
  this.orraBaseUrl = 'https://stageapi-orra.letsmobility.com/';
6914
6915
  // this.environmentTypeSubscriber = this.eventService.environmentType.subscribe((response) => {
6915
6916
  // if (response == "DEV") {
@@ -7407,7 +7408,7 @@ class RestService {
7407
7408
  getAppointmentPaymentStatus(orderId) {
7408
7409
  return this.http.get(this.APPOINTMENT_URL + `payment/verify/status?orderId=${orderId}`);
7409
7410
  }
7410
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestService, deps: [{ token: i1.HttpClient }, { token: API_URL }, { token: ECOMMERCE_URL }, { token: CMIS_URL }, { token: i2$3.CookieService }, { token: LOCAL_STORAGE }, { token: PASSBOOK_URL }], target: i0.ɵɵFactoryTarget.Injectable }); }
7411
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestService, deps: [{ token: i1.HttpClient }, { token: API_URL }, { token: ECOMMERCE_URL }, { token: CMIS_URL }, { token: i2$3.CookieService }, { token: LOCAL_STORAGE }, { token: PASSBOOK_URL }, { token: APPOINTMENT_URL }], target: i0.ɵɵFactoryTarget.Injectable }); }
7411
7412
  static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestService, providedIn: 'root' }); }
7412
7413
  }
7413
7414
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestService, decorators: [{
@@ -7430,6 +7431,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
7430
7431
  }] }, { type: undefined, decorators: [{
7431
7432
  type: Inject,
7432
7433
  args: [PASSBOOK_URL]
7434
+ }] }, { type: undefined, decorators: [{
7435
+ type: Inject,
7436
+ args: [APPOINTMENT_URL]
7433
7437
  }] }] });
7434
7438
 
7435
7439
  class Cart {
@@ -9618,7 +9622,7 @@ class AuthenticationRequiredComponent extends BaseSection {
9618
9622
  });
9619
9623
  }
9620
9624
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthenticationRequiredComponent, deps: [{ token: RestService }, { token: i2$2.Router }, { token: i6$1.MessageService }, { token: StorageServiceService }, { token: i1$1.MatDialog }, { token: i2$2.ActivatedRoute }, { token: i0.ElementRef }, { token: i1$1.MatDialogRef, optional: true }, { token: i8$3.MatBottomSheetRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
9621
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuthenticationRequiredComponent, isStandalone: true, selector: "simpo-authentication-required", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section [id]=\"data?.id\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"area w-100\">\r\n <ul class=\"circles\">\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n </ul>\r\n </div>\r\n <div [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\">\r\n <div class=\"panel w-100\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container *ngTemplateOutlet=\"currentPage === 'LOGIN' ? loginTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"currentPage === 'SIGNUP' ? signInTemplate : null\"></ng-container>\r\n <ng-container\r\n *ngTemplateOutlet=\"currentPage === 'FORGOT_PASSWORD' ? forgotPasswordTemplate : null\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</section>\r\n\r\n<ng-template #loginTemplate>\r\n <div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Email or Phone number</label>\r\n <input type=\"email\" [(ngModel)]=\"email\" required=\"\" placeholder=\"janedoe@gmail.com\"\r\n (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n <!-- <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid Email*</span> -->\r\n </div>\r\n <div class=\"input-box\">\r\n <div class=\"w-100\">\r\n <label for=\"\">Password</label>\r\n <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\"\r\n (ngModelChange)=\"onPasswordChange()\" class=\"w-90\" placeholder=\"Janedoe@1234\"\r\n [style.borderColor]=\"!passwordCheck ? '' : 'red'\">\r\n <span class=\"eye\" (click)=\"showPassword = !showPassword\" style=\"cursor: pointer;\">\r\n <i class=\"fa\" [ngClass]=\"showPassword ? 'fa-eye-slash' : 'fa-eye'\"></i>\r\n </span>\r\n </div>\r\n <span *ngIf=\"passwordCheck && currentPage === 'SIGNUP'\" class=\"f-12\" [style.color]=\"'red'\">Your password must\r\n contain 1 Uppercase , 1\r\n Lowercase , 1 Special\r\n Character , 1 Digit and Minimum 8 Characters*</span>\r\n </div>\r\n <!-- <div class=\"forgot-pwd w-100 text-end mb-2\" [style.color]=\"accentColor\" (click)=\"currentPage = 'FORGOT_PASSWORD'\">\r\n Forgot Password?</div> -->\r\n <!-- <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n (click)=\"login()\">Login</button> -->\r\n <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Login</button>\r\n <!-- <button class=\"button\" *ngIf=\"buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\r\n [color]=\"styles?.background?.accentColor\">Loading...</button> -->\r\n <button class=\"send-btn p-2\" *ngIf=\"buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Loading...</button>\r\n\r\n\r\n <div class=\"sign-up mt-2\" *ngIf=\"signUpEnabled\">Don't have an account? <span [style.color]=\"accentColor\"\r\n (click)=\"currentPage = 'SIGNUP'\">Sign\r\n Up</span></div>\r\n\r\n <!-- <div class=\"text-center mt-20\">\r\n <div class=\"or-divider\">\r\n <span class=\"or-text\">or</span>\r\n </div>\r\n <div class=\"sign-up\">Login with <span [style.color]=\"accentColor\">OTP</span></div>\r\n </div> -->\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #signInTemplate>\r\n <div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Name</label>\r\n <input type=\"text\" [(ngModel)]=\"userName\" placeholder=\"Jane Doe\">\r\n </div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Email</label>\r\n <input type=\"email\" [(ngModel)]=\"email\" placeholder=\"janedoe@gmail.com\" (ngModelChange)=\"onEmailChange()\"\r\n [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid email*</span>\r\n </div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Phone Number</label>\r\n <input type=\"number\" [(ngModel)]=\"mobile\" (ngModelChange)=\"onMobileChange()\" placeholder=\"9876543219\"\r\n [style.borderColor]=\"!mobileCheck ? '' : 'red'\" class=\"no-arrows\">\r\n <span class=\"f-12\" *ngIf=\"mobileCheck\" [style.color]=\"'red'\">Please Enter valid Mobile number*</span>\r\n </div>\r\n <div class=\" input-box position-relative\">\r\n <label for=\"\">Password</label>\r\n <div class=\"w-100 d-flex align-items-center\">\r\n <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\" class=\"w-90\"\r\n placeholder=\"Janedoe@1234\" [style.borderColor]=\"!passwordCheck ? '' : 'red'\"\r\n (ngModelChange)=\"onPasswordChange()\">\r\n <span class=\"eye\" (click)=\"showPassword = !showPassword\" style=\"cursor: pointer;\">\r\n <i class=\"fa\" [ngClass]=\"showPassword ? 'fa-eye-slash' : 'fa-eye'\"></i>\r\n </span>\r\n </div>\r\n <span *ngIf=\"passwordCheck\" class=\"f-12\" [style.color]=\"'red'\">Your password must contain 1 Uppercase , 1\r\n Lowercase , 1 Special\r\n Character , 1 Digit and Minimum 8 Characters*</span>\r\n <!-- <div class=\"strength-bar-container\">\r\n <div *ngFor=\"let strength of passwordStrength; let idx = index\" class=\"strength-bar\"\r\n [style.backgroundColor]=\"getStrengthColor(idx)\"></div>\r\n </div> -->\r\n </div>\r\n <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n (click)=\"createAccount()\" [disabled]=\"!isEmailValid || !isPasswordValid || !userName\">Create Account</button>\r\n <button class=\"button\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n *ngIf=\"buttonLoading\">Loading...</button>\r\n\r\n\r\n <div class=\"sign-up mt-2\">Already have an account? <span [style.color]=\"accentColor\"\r\n (click)=\"currentPage = 'LOGIN'\">Login</span></div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #forgotPasswordTemplate>\r\n <div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Email or Phone number</label>\r\n <input type=\"email\" [(ngModel)]=\"email\" required=\"\" placeholder=\"janedoe@gmail.com\"\r\n (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n </div>\r\n <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" >Submit</button>\r\n <button class=\"send-btn p-2\" *ngIf=\"buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\">Loading...</button>\r\n </div>\r\n</ng-template>", styles: [".total-container{position:relative;height:auto;perspective:1200px;overflow:hidden}label,.sign-up,.eye{color:#000}.eye{padding:6px;font-size:16px}.w-90{width:90%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-panel{max-width:450px;margin:2rem auto;background:#ffffff26;border-radius:20px;box-shadow:0 25px 50px -12px #00000040;overflow:hidden;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;transform-style:preserve-3d;will-change:transform;perspective:1200px;backface-visibility:hidden}.main-panel:hover{transform:rotateY(3deg) rotateX(2deg) scale(1.02);box-shadow:0 35px 60px -10px #0000004d}.panel{background:#fffffff2;padding:3rem;position:relative;transform-style:preserve-3d;transition:all .4s ease;margin:unset!important}.panel:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,.15) 50%,transparent);opacity:0;transition:opacity .4s ease;pointer-events:none}.panel:hover:before{opacity:1}.input-box{display:flex;flex-direction:column;gap:8px;margin-bottom:1.5rem;position:relative;transform-style:preserve-3d}.input-box label{transform:translateZ(20px)}.input-box input{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;border:2px solid rgba(0,0,0,.08);padding:.75rem 1rem;border-radius:12px;appearance:none;outline:none}.input-box input:focus{border-color:var(--accent-color, #667eea);box-shadow:0 8px 25px -5px #667eea4d;transform:translateY(-3px) translateZ(25px);background:#fff}.input-box input:hover{transform:translateY(-2px) translateZ(15px);box-shadow:0 5px 15px #00000014}.button{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;overflow:hidden;border:none;padding:.5rem 2rem;font-weight:600}.button:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .7s ease}.button:hover{transform:translateY(-3px) translateZ(35px);box-shadow:0 15px 30px -5px var(--accent-shadow, rgba(102, 126, 234, .5))}.button:hover:before{left:100%}.button:active{transform:translateY(-1px) translateZ(25px)}.circles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:#ffffff1a;box-shadow:0 8px 32px #1f268733;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:80px;border:1px solid rgba(255,255,255,.18);animation:animate 25s linear infinite;bottom:-150px}.circles li:nth-child(1){left:25%;width:80px;height:80px;animation-delay:0s}.circles li:nth-child(2){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}.circles li:nth-child(3){left:70%;width:20px;height:20px;animation-delay:4s}.circles li:nth-child(4){left:40%;width:60px;height:60px;animation-delay:0s;animation-duration:18s}.circles li:nth-child(5){left:65%;width:20px;height:20px;animation-delay:0s}.circles li:nth-child(6){left:75%;width:110px;height:110px;animation-delay:3s}.circles li:nth-child(7){left:35%;width:150px;height:150px;animation-delay:7s}.circles li:nth-child(8){left:50%;width:25px;height:25px;animation-delay:15s;animation-duration:45s}.circles li:nth-child(9){left:20%;width:15px;height:15px;animation-delay:2s;animation-duration:35s}.circles li:nth-child(15){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}@keyframes animate{0%{transform:translateY(0) rotate(0);opacity:1;border-radius:0}to{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}.f-12{font-size:12px}@media screen and (max-width : 475px){.w-90{width:87%}}.no-arrows::-webkit-outer-spin-button,.no-arrows::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\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: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
9625
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuthenticationRequiredComponent, isStandalone: true, selector: "simpo-authentication-required", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section [id]=\"data?.id\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"area w-100\" >\r\n <ul class=\"circles\" [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\">\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n </ul>\r\n </div>\r\n <div [id]=\"data?.id\" class=\"main-panel d-flex gap-2\" [simpoCorner]=\"styles?.corners\">\r\n <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container *ngTemplateOutlet=\"currentPage === 'LOGIN' ? loginTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"currentPage === 'SIGNUP' ? signInTemplate : null\"></ng-container>\r\n <ng-container\r\n *ngTemplateOutlet=\"currentPage === 'FORGOT_PASSWORD' ? forgotPasswordTemplate : null\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</section>\r\n\r\n<ng-template #loginTemplate>\r\n <div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Email or Phone number</label>\r\n <input type=\"email\" [(ngModel)]=\"email\" required=\"\" placeholder=\"janedoe@gmail.com\"\r\n (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n <!-- <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid Email*</span> -->\r\n </div>\r\n <div class=\"input-box\">\r\n <div class=\"w-100\">\r\n <label for=\"\">Password</label>\r\n <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\"\r\n (ngModelChange)=\"onPasswordChange()\" class=\"w-90\" placeholder=\"Janedoe@1234\"\r\n [style.borderColor]=\"!passwordCheck ? '' : 'red'\">\r\n <span class=\"eye\" (click)=\"showPassword = !showPassword\" style=\"cursor: pointer;\">\r\n <i class=\"fa\" [ngClass]=\"showPassword ? 'fa-eye-slash' : 'fa-eye'\"></i>\r\n </span>\r\n </div>\r\n <span *ngIf=\"passwordCheck && currentPage === 'SIGNUP'\" class=\"f-12\" [style.color]=\"'red'\">Your password must\r\n contain 1 Uppercase , 1\r\n Lowercase , 1 Special\r\n Character , 1 Digit and Minimum 8 Characters*</span>\r\n </div>\r\n <!-- <div class=\"forgot-pwd w-100 text-end mb-2\" [style.color]=\"accentColor\" (click)=\"currentPage = 'FORGOT_PASSWORD'\">\r\n Forgot Password?</div> -->\r\n <!-- <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n (click)=\"login()\">Login</button> -->\r\n <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Login</button>\r\n <!-- <button class=\"button\" *ngIf=\"buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\r\n [color]=\"styles?.background?.accentColor\">Loading...</button> -->\r\n <button class=\"send-btn p-2\" *ngIf=\"buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Loading...</button>\r\n\r\n\r\n <div class=\"sign-up mt-2\" *ngIf=\"signUpEnabled\">Don't have an account? <span [style.color]=\"accentColor\"\r\n (click)=\"currentPage = 'SIGNUP'\">Sign\r\n Up</span></div>\r\n\r\n <!-- <div class=\"text-center mt-20\">\r\n <div class=\"or-divider\">\r\n <span class=\"or-text\">or</span>\r\n </div>\r\n <div class=\"sign-up\">Login with <span [style.color]=\"accentColor\">OTP</span></div>\r\n </div> -->\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #signInTemplate>\r\n <div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Name</label>\r\n <input type=\"text\" [(ngModel)]=\"userName\" placeholder=\"Jane Doe\">\r\n </div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Email</label>\r\n <input type=\"email\" [(ngModel)]=\"email\" placeholder=\"janedoe@gmail.com\" (ngModelChange)=\"onEmailChange()\"\r\n [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid email*</span>\r\n </div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Phone Number</label>\r\n <input type=\"number\" [(ngModel)]=\"mobile\" (ngModelChange)=\"onMobileChange()\" placeholder=\"9876543219\"\r\n [style.borderColor]=\"!mobileCheck ? '' : 'red'\" class=\"no-arrows\">\r\n <span class=\"f-12\" *ngIf=\"mobileCheck\" [style.color]=\"'red'\">Please Enter valid Mobile number*</span>\r\n </div>\r\n <div class=\" input-box position-relative\">\r\n <label for=\"\">Password</label>\r\n <div class=\"w-100 d-flex align-items-center\">\r\n <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\" class=\"w-90\"\r\n placeholder=\"Janedoe@1234\" [style.borderColor]=\"!passwordCheck ? '' : 'red'\"\r\n (ngModelChange)=\"onPasswordChange()\">\r\n <span class=\"eye\" (click)=\"showPassword = !showPassword\" style=\"cursor: pointer;\">\r\n <i class=\"fa\" [ngClass]=\"showPassword ? 'fa-eye-slash' : 'fa-eye'\"></i>\r\n </span>\r\n </div>\r\n <span *ngIf=\"passwordCheck\" class=\"f-12\" [style.color]=\"'red'\">Your password must contain 1 Uppercase , 1\r\n Lowercase , 1 Special\r\n Character , 1 Digit and Minimum 8 Characters*</span>\r\n <!-- <div class=\"strength-bar-container\">\r\n <div *ngFor=\"let strength of passwordStrength; let idx = index\" class=\"strength-bar\"\r\n [style.backgroundColor]=\"getStrengthColor(idx)\"></div>\r\n </div> -->\r\n </div>\r\n <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n (click)=\"createAccount()\" [disabled]=\"!isEmailValid || !isPasswordValid || !userName\">Create Account</button>\r\n <button class=\"button\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n *ngIf=\"buttonLoading\">Loading...</button>\r\n\r\n\r\n <div class=\"sign-up mt-2\">Already have an account? <span [style.color]=\"accentColor\"\r\n (click)=\"currentPage = 'LOGIN'\">Login</span></div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #forgotPasswordTemplate>\r\n <div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Email or Phone number</label>\r\n <input type=\"email\" [(ngModel)]=\"email\" required=\"\" placeholder=\"janedoe@gmail.com\"\r\n (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n </div>\r\n <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" >Submit</button>\r\n <button class=\"send-btn p-2\" *ngIf=\"buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\">Loading...</button>\r\n </div>\r\n</ng-template>", styles: [".total-container{position:relative;height:auto;perspective:1200px;overflow:hidden}label,.sign-up,.eye{color:#000}.eye{padding:6px;font-size:16px}.w-90{width:90%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-panel{max-width:450px;margin:2rem auto;background:#ffffff26;box-shadow:0 25px 50px -12px #00000040;overflow:hidden;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;transform-style:preserve-3d;will-change:transform;perspective:1200px;backface-visibility:hidden}.main-panel:hover{transform:rotateY(3deg) rotateX(2deg) scale(1.02);box-shadow:0 35px 60px -10px #0000004d}.panel{background:#fffffff2;padding:3rem;position:relative;transform-style:preserve-3d;transition:all .4s ease;margin:unset!important}.panel:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,.15) 50%,transparent);opacity:0;transition:opacity .4s ease;pointer-events:none}.panel:hover:before{opacity:1}.input-box{display:flex;flex-direction:column;gap:8px;margin-bottom:1.5rem;position:relative;transform-style:preserve-3d}.input-box label{transform:translateZ(20px)}.input-box input{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;border:2px solid rgba(0,0,0,.08);padding:.75rem 1rem;border-radius:12px;appearance:none;outline:none}.input-box input:focus{border-color:var(--accent-color, #667eea);box-shadow:0 8px 25px -5px #667eea4d;transform:translateY(-3px) translateZ(25px);background:#fff}.input-box input:hover{transform:translateY(-2px) translateZ(15px);box-shadow:0 5px 15px #00000014}.button{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;overflow:hidden;border:none;padding:.5rem 2rem;font-weight:600}.button:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .7s ease}.button:hover{transform:translateY(-3px) translateZ(35px);box-shadow:0 15px 30px -5px var(--accent-shadow, rgba(102, 126, 234, .5))}.button:hover:before{left:100%}.button:active{transform:translateY(-1px) translateZ(25px)}.circles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:#ffffff1a;box-shadow:0 8px 32px #1f268733;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:80px;border:1px solid rgba(255,255,255,.18);animation:animate 25s linear infinite;bottom:-150px}.circles li:nth-child(1){left:25%;width:80px;height:80px;animation-delay:0s}.circles li:nth-child(2){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}.circles li:nth-child(3){left:70%;width:20px;height:20px;animation-delay:4s}.circles li:nth-child(4){left:40%;width:60px;height:60px;animation-delay:0s;animation-duration:18s}.circles li:nth-child(5){left:65%;width:20px;height:20px;animation-delay:0s}.circles li:nth-child(6){left:75%;width:110px;height:110px;animation-delay:3s}.circles li:nth-child(7){left:35%;width:150px;height:150px;animation-delay:7s}.circles li:nth-child(8){left:50%;width:25px;height:25px;animation-delay:15s;animation-duration:45s}.circles li:nth-child(9){left:20%;width:15px;height:15px;animation-delay:2s;animation-duration:35s}.circles li:nth-child(15){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}@keyframes animate{0%{transform:translateY(0) rotate(0);opacity:1;border-radius:0}to{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}.f-12{font-size:12px}@media screen and (max-width : 475px){.w-90{width:87%}}.no-arrows::-webkit-outer-spin-button,.no-arrows::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\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: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
9622
9626
  }
9623
9627
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthenticationRequiredComponent, decorators: [{
9624
9628
  type: Component,
@@ -9638,7 +9642,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
9638
9642
  OverlayDirective,
9639
9643
  SpacingAroundDirective,
9640
9644
  ButtonEditorDirective
9641
- ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section [id]=\"data?.id\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"area w-100\">\r\n <ul class=\"circles\">\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n </ul>\r\n </div>\r\n <div [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\">\r\n <div class=\"panel w-100\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container *ngTemplateOutlet=\"currentPage === 'LOGIN' ? loginTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"currentPage === 'SIGNUP' ? signInTemplate : null\"></ng-container>\r\n <ng-container\r\n *ngTemplateOutlet=\"currentPage === 'FORGOT_PASSWORD' ? forgotPasswordTemplate : null\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</section>\r\n\r\n<ng-template #loginTemplate>\r\n <div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Email or Phone number</label>\r\n <input type=\"email\" [(ngModel)]=\"email\" required=\"\" placeholder=\"janedoe@gmail.com\"\r\n (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n <!-- <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid Email*</span> -->\r\n </div>\r\n <div class=\"input-box\">\r\n <div class=\"w-100\">\r\n <label for=\"\">Password</label>\r\n <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\"\r\n (ngModelChange)=\"onPasswordChange()\" class=\"w-90\" placeholder=\"Janedoe@1234\"\r\n [style.borderColor]=\"!passwordCheck ? '' : 'red'\">\r\n <span class=\"eye\" (click)=\"showPassword = !showPassword\" style=\"cursor: pointer;\">\r\n <i class=\"fa\" [ngClass]=\"showPassword ? 'fa-eye-slash' : 'fa-eye'\"></i>\r\n </span>\r\n </div>\r\n <span *ngIf=\"passwordCheck && currentPage === 'SIGNUP'\" class=\"f-12\" [style.color]=\"'red'\">Your password must\r\n contain 1 Uppercase , 1\r\n Lowercase , 1 Special\r\n Character , 1 Digit and Minimum 8 Characters*</span>\r\n </div>\r\n <!-- <div class=\"forgot-pwd w-100 text-end mb-2\" [style.color]=\"accentColor\" (click)=\"currentPage = 'FORGOT_PASSWORD'\">\r\n Forgot Password?</div> -->\r\n <!-- <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n (click)=\"login()\">Login</button> -->\r\n <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Login</button>\r\n <!-- <button class=\"button\" *ngIf=\"buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\r\n [color]=\"styles?.background?.accentColor\">Loading...</button> -->\r\n <button class=\"send-btn p-2\" *ngIf=\"buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Loading...</button>\r\n\r\n\r\n <div class=\"sign-up mt-2\" *ngIf=\"signUpEnabled\">Don't have an account? <span [style.color]=\"accentColor\"\r\n (click)=\"currentPage = 'SIGNUP'\">Sign\r\n Up</span></div>\r\n\r\n <!-- <div class=\"text-center mt-20\">\r\n <div class=\"or-divider\">\r\n <span class=\"or-text\">or</span>\r\n </div>\r\n <div class=\"sign-up\">Login with <span [style.color]=\"accentColor\">OTP</span></div>\r\n </div> -->\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #signInTemplate>\r\n <div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Name</label>\r\n <input type=\"text\" [(ngModel)]=\"userName\" placeholder=\"Jane Doe\">\r\n </div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Email</label>\r\n <input type=\"email\" [(ngModel)]=\"email\" placeholder=\"janedoe@gmail.com\" (ngModelChange)=\"onEmailChange()\"\r\n [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid email*</span>\r\n </div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Phone Number</label>\r\n <input type=\"number\" [(ngModel)]=\"mobile\" (ngModelChange)=\"onMobileChange()\" placeholder=\"9876543219\"\r\n [style.borderColor]=\"!mobileCheck ? '' : 'red'\" class=\"no-arrows\">\r\n <span class=\"f-12\" *ngIf=\"mobileCheck\" [style.color]=\"'red'\">Please Enter valid Mobile number*</span>\r\n </div>\r\n <div class=\" input-box position-relative\">\r\n <label for=\"\">Password</label>\r\n <div class=\"w-100 d-flex align-items-center\">\r\n <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\" class=\"w-90\"\r\n placeholder=\"Janedoe@1234\" [style.borderColor]=\"!passwordCheck ? '' : 'red'\"\r\n (ngModelChange)=\"onPasswordChange()\">\r\n <span class=\"eye\" (click)=\"showPassword = !showPassword\" style=\"cursor: pointer;\">\r\n <i class=\"fa\" [ngClass]=\"showPassword ? 'fa-eye-slash' : 'fa-eye'\"></i>\r\n </span>\r\n </div>\r\n <span *ngIf=\"passwordCheck\" class=\"f-12\" [style.color]=\"'red'\">Your password must contain 1 Uppercase , 1\r\n Lowercase , 1 Special\r\n Character , 1 Digit and Minimum 8 Characters*</span>\r\n <!-- <div class=\"strength-bar-container\">\r\n <div *ngFor=\"let strength of passwordStrength; let idx = index\" class=\"strength-bar\"\r\n [style.backgroundColor]=\"getStrengthColor(idx)\"></div>\r\n </div> -->\r\n </div>\r\n <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n (click)=\"createAccount()\" [disabled]=\"!isEmailValid || !isPasswordValid || !userName\">Create Account</button>\r\n <button class=\"button\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n *ngIf=\"buttonLoading\">Loading...</button>\r\n\r\n\r\n <div class=\"sign-up mt-2\">Already have an account? <span [style.color]=\"accentColor\"\r\n (click)=\"currentPage = 'LOGIN'\">Login</span></div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #forgotPasswordTemplate>\r\n <div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Email or Phone number</label>\r\n <input type=\"email\" [(ngModel)]=\"email\" required=\"\" placeholder=\"janedoe@gmail.com\"\r\n (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n </div>\r\n <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" >Submit</button>\r\n <button class=\"send-btn p-2\" *ngIf=\"buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\">Loading...</button>\r\n </div>\r\n</ng-template>", styles: [".total-container{position:relative;height:auto;perspective:1200px;overflow:hidden}label,.sign-up,.eye{color:#000}.eye{padding:6px;font-size:16px}.w-90{width:90%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-panel{max-width:450px;margin:2rem auto;background:#ffffff26;border-radius:20px;box-shadow:0 25px 50px -12px #00000040;overflow:hidden;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;transform-style:preserve-3d;will-change:transform;perspective:1200px;backface-visibility:hidden}.main-panel:hover{transform:rotateY(3deg) rotateX(2deg) scale(1.02);box-shadow:0 35px 60px -10px #0000004d}.panel{background:#fffffff2;padding:3rem;position:relative;transform-style:preserve-3d;transition:all .4s ease;margin:unset!important}.panel:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,.15) 50%,transparent);opacity:0;transition:opacity .4s ease;pointer-events:none}.panel:hover:before{opacity:1}.input-box{display:flex;flex-direction:column;gap:8px;margin-bottom:1.5rem;position:relative;transform-style:preserve-3d}.input-box label{transform:translateZ(20px)}.input-box input{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;border:2px solid rgba(0,0,0,.08);padding:.75rem 1rem;border-radius:12px;appearance:none;outline:none}.input-box input:focus{border-color:var(--accent-color, #667eea);box-shadow:0 8px 25px -5px #667eea4d;transform:translateY(-3px) translateZ(25px);background:#fff}.input-box input:hover{transform:translateY(-2px) translateZ(15px);box-shadow:0 5px 15px #00000014}.button{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;overflow:hidden;border:none;padding:.5rem 2rem;font-weight:600}.button:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .7s ease}.button:hover{transform:translateY(-3px) translateZ(35px);box-shadow:0 15px 30px -5px var(--accent-shadow, rgba(102, 126, 234, .5))}.button:hover:before{left:100%}.button:active{transform:translateY(-1px) translateZ(25px)}.circles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:#ffffff1a;box-shadow:0 8px 32px #1f268733;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:80px;border:1px solid rgba(255,255,255,.18);animation:animate 25s linear infinite;bottom:-150px}.circles li:nth-child(1){left:25%;width:80px;height:80px;animation-delay:0s}.circles li:nth-child(2){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}.circles li:nth-child(3){left:70%;width:20px;height:20px;animation-delay:4s}.circles li:nth-child(4){left:40%;width:60px;height:60px;animation-delay:0s;animation-duration:18s}.circles li:nth-child(5){left:65%;width:20px;height:20px;animation-delay:0s}.circles li:nth-child(6){left:75%;width:110px;height:110px;animation-delay:3s}.circles li:nth-child(7){left:35%;width:150px;height:150px;animation-delay:7s}.circles li:nth-child(8){left:50%;width:25px;height:25px;animation-delay:15s;animation-duration:45s}.circles li:nth-child(9){left:20%;width:15px;height:15px;animation-delay:2s;animation-duration:35s}.circles li:nth-child(15){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}@keyframes animate{0%{transform:translateY(0) rotate(0);opacity:1;border-radius:0}to{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}.f-12{font-size:12px}@media screen and (max-width : 475px){.w-90{width:87%}}.no-arrows::-webkit-outer-spin-button,.no-arrows::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
9645
+ ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section [id]=\"data?.id\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"area w-100\" >\r\n <ul class=\"circles\" [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\">\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n </ul>\r\n </div>\r\n <div [id]=\"data?.id\" class=\"main-panel d-flex gap-2\" [simpoCorner]=\"styles?.corners\">\r\n <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container *ngTemplateOutlet=\"currentPage === 'LOGIN' ? loginTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"currentPage === 'SIGNUP' ? signInTemplate : null\"></ng-container>\r\n <ng-container\r\n *ngTemplateOutlet=\"currentPage === 'FORGOT_PASSWORD' ? forgotPasswordTemplate : null\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</section>\r\n\r\n<ng-template #loginTemplate>\r\n <div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Email or Phone number</label>\r\n <input type=\"email\" [(ngModel)]=\"email\" required=\"\" placeholder=\"janedoe@gmail.com\"\r\n (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n <!-- <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid Email*</span> -->\r\n </div>\r\n <div class=\"input-box\">\r\n <div class=\"w-100\">\r\n <label for=\"\">Password</label>\r\n <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\"\r\n (ngModelChange)=\"onPasswordChange()\" class=\"w-90\" placeholder=\"Janedoe@1234\"\r\n [style.borderColor]=\"!passwordCheck ? '' : 'red'\">\r\n <span class=\"eye\" (click)=\"showPassword = !showPassword\" style=\"cursor: pointer;\">\r\n <i class=\"fa\" [ngClass]=\"showPassword ? 'fa-eye-slash' : 'fa-eye'\"></i>\r\n </span>\r\n </div>\r\n <span *ngIf=\"passwordCheck && currentPage === 'SIGNUP'\" class=\"f-12\" [style.color]=\"'red'\">Your password must\r\n contain 1 Uppercase , 1\r\n Lowercase , 1 Special\r\n Character , 1 Digit and Minimum 8 Characters*</span>\r\n </div>\r\n <!-- <div class=\"forgot-pwd w-100 text-end mb-2\" [style.color]=\"accentColor\" (click)=\"currentPage = 'FORGOT_PASSWORD'\">\r\n Forgot Password?</div> -->\r\n <!-- <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n (click)=\"login()\">Login</button> -->\r\n <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Login</button>\r\n <!-- <button class=\"button\" *ngIf=\"buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\r\n [color]=\"styles?.background?.accentColor\">Loading...</button> -->\r\n <button class=\"send-btn p-2\" *ngIf=\"buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Loading...</button>\r\n\r\n\r\n <div class=\"sign-up mt-2\" *ngIf=\"signUpEnabled\">Don't have an account? <span [style.color]=\"accentColor\"\r\n (click)=\"currentPage = 'SIGNUP'\">Sign\r\n Up</span></div>\r\n\r\n <!-- <div class=\"text-center mt-20\">\r\n <div class=\"or-divider\">\r\n <span class=\"or-text\">or</span>\r\n </div>\r\n <div class=\"sign-up\">Login with <span [style.color]=\"accentColor\">OTP</span></div>\r\n </div> -->\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #signInTemplate>\r\n <div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Name</label>\r\n <input type=\"text\" [(ngModel)]=\"userName\" placeholder=\"Jane Doe\">\r\n </div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Email</label>\r\n <input type=\"email\" [(ngModel)]=\"email\" placeholder=\"janedoe@gmail.com\" (ngModelChange)=\"onEmailChange()\"\r\n [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid email*</span>\r\n </div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Phone Number</label>\r\n <input type=\"number\" [(ngModel)]=\"mobile\" (ngModelChange)=\"onMobileChange()\" placeholder=\"9876543219\"\r\n [style.borderColor]=\"!mobileCheck ? '' : 'red'\" class=\"no-arrows\">\r\n <span class=\"f-12\" *ngIf=\"mobileCheck\" [style.color]=\"'red'\">Please Enter valid Mobile number*</span>\r\n </div>\r\n <div class=\" input-box position-relative\">\r\n <label for=\"\">Password</label>\r\n <div class=\"w-100 d-flex align-items-center\">\r\n <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\" class=\"w-90\"\r\n placeholder=\"Janedoe@1234\" [style.borderColor]=\"!passwordCheck ? '' : 'red'\"\r\n (ngModelChange)=\"onPasswordChange()\">\r\n <span class=\"eye\" (click)=\"showPassword = !showPassword\" style=\"cursor: pointer;\">\r\n <i class=\"fa\" [ngClass]=\"showPassword ? 'fa-eye-slash' : 'fa-eye'\"></i>\r\n </span>\r\n </div>\r\n <span *ngIf=\"passwordCheck\" class=\"f-12\" [style.color]=\"'red'\">Your password must contain 1 Uppercase , 1\r\n Lowercase , 1 Special\r\n Character , 1 Digit and Minimum 8 Characters*</span>\r\n <!-- <div class=\"strength-bar-container\">\r\n <div *ngFor=\"let strength of passwordStrength; let idx = index\" class=\"strength-bar\"\r\n [style.backgroundColor]=\"getStrengthColor(idx)\"></div>\r\n </div> -->\r\n </div>\r\n <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n (click)=\"createAccount()\" [disabled]=\"!isEmailValid || !isPasswordValid || !userName\">Create Account</button>\r\n <button class=\"button\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n *ngIf=\"buttonLoading\">Loading...</button>\r\n\r\n\r\n <div class=\"sign-up mt-2\">Already have an account? <span [style.color]=\"accentColor\"\r\n (click)=\"currentPage = 'LOGIN'\">Login</span></div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #forgotPasswordTemplate>\r\n <div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Email or Phone number</label>\r\n <input type=\"email\" [(ngModel)]=\"email\" required=\"\" placeholder=\"janedoe@gmail.com\"\r\n (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n </div>\r\n <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" >Submit</button>\r\n <button class=\"send-btn p-2\" *ngIf=\"buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\">Loading...</button>\r\n </div>\r\n</ng-template>", styles: [".total-container{position:relative;height:auto;perspective:1200px;overflow:hidden}label,.sign-up,.eye{color:#000}.eye{padding:6px;font-size:16px}.w-90{width:90%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-panel{max-width:450px;margin:2rem auto;background:#ffffff26;box-shadow:0 25px 50px -12px #00000040;overflow:hidden;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;transform-style:preserve-3d;will-change:transform;perspective:1200px;backface-visibility:hidden}.main-panel:hover{transform:rotateY(3deg) rotateX(2deg) scale(1.02);box-shadow:0 35px 60px -10px #0000004d}.panel{background:#fffffff2;padding:3rem;position:relative;transform-style:preserve-3d;transition:all .4s ease;margin:unset!important}.panel:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,.15) 50%,transparent);opacity:0;transition:opacity .4s ease;pointer-events:none}.panel:hover:before{opacity:1}.input-box{display:flex;flex-direction:column;gap:8px;margin-bottom:1.5rem;position:relative;transform-style:preserve-3d}.input-box label{transform:translateZ(20px)}.input-box input{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;border:2px solid rgba(0,0,0,.08);padding:.75rem 1rem;border-radius:12px;appearance:none;outline:none}.input-box input:focus{border-color:var(--accent-color, #667eea);box-shadow:0 8px 25px -5px #667eea4d;transform:translateY(-3px) translateZ(25px);background:#fff}.input-box input:hover{transform:translateY(-2px) translateZ(15px);box-shadow:0 5px 15px #00000014}.button{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;overflow:hidden;border:none;padding:.5rem 2rem;font-weight:600}.button:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .7s ease}.button:hover{transform:translateY(-3px) translateZ(35px);box-shadow:0 15px 30px -5px var(--accent-shadow, rgba(102, 126, 234, .5))}.button:hover:before{left:100%}.button:active{transform:translateY(-1px) translateZ(25px)}.circles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:#ffffff1a;box-shadow:0 8px 32px #1f268733;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:80px;border:1px solid rgba(255,255,255,.18);animation:animate 25s linear infinite;bottom:-150px}.circles li:nth-child(1){left:25%;width:80px;height:80px;animation-delay:0s}.circles li:nth-child(2){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}.circles li:nth-child(3){left:70%;width:20px;height:20px;animation-delay:4s}.circles li:nth-child(4){left:40%;width:60px;height:60px;animation-delay:0s;animation-duration:18s}.circles li:nth-child(5){left:65%;width:20px;height:20px;animation-delay:0s}.circles li:nth-child(6){left:75%;width:110px;height:110px;animation-delay:3s}.circles li:nth-child(7){left:35%;width:150px;height:150px;animation-delay:7s}.circles li:nth-child(8){left:50%;width:25px;height:25px;animation-delay:15s;animation-duration:45s}.circles li:nth-child(9){left:20%;width:15px;height:15px;animation-delay:2s;animation-duration:35s}.circles li:nth-child(15){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}@keyframes animate{0%{transform:translateY(0) rotate(0);opacity:1;border-radius:0}to{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}.f-12{font-size:12px}@media screen and (max-width : 475px){.w-90{width:87%}}.no-arrows::-webkit-outer-spin-button,.no-arrows::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
9642
9646
  }], ctorParameters: () => [{ type: RestService }, { type: i2$2.Router }, { type: i6$1.MessageService }, { type: StorageServiceService }, { type: i1$1.MatDialog }, { type: i2$2.ActivatedRoute }, { type: i0.ElementRef }, { type: i1$1.MatDialogRef, decorators: [{
9643
9647
  type: Optional
9644
9648
  }] }, { type: i8$3.MatBottomSheetRef, decorators: [{
@@ -12730,6 +12734,7 @@ class AppointmentBookingComponent {
12730
12734
  };
12731
12735
  this.locationTiming = [];
12732
12736
  this.loader = false;
12737
+ this.isProcessing = false;
12733
12738
  this.termsAndConditions = false;
12734
12739
  this.appointmentPayload = {
12735
12740
  staffDetail: {
@@ -13056,9 +13061,11 @@ class AppointmentBookingComponent {
13056
13061
  }
13057
13062
  }
13058
13063
  checkPayment() {
13064
+ this.isProcessing = true;
13059
13065
  const request_form = localStorage.getItem("REQUEST_FROM");
13060
13066
  if (request_form === 'ECOMMERCE') {
13061
13067
  this.createAppointment();
13068
+ this.isProcessing = false;
13062
13069
  }
13063
13070
  else {
13064
13071
  if (this.selectedService?.depositAmount?.depositRequired) {
@@ -13105,6 +13112,7 @@ class AppointmentBookingComponent {
13105
13112
  this.appointmentPayload.bookingDate = `${yyyy}-${mm}-${dd}T00:00:00.000Z`;
13106
13113
  this.restService.paymentForAppointment(this.appointmentPayload).subscribe((res) => {
13107
13114
  localStorage.setItem('appointmentPaymentId', res.pgOrderId);
13115
+ this.isProcessing = false;
13108
13116
  this._eventService.cashFreeEvent.emit({ data: { orderSignature: res.orderSignature } });
13109
13117
  }, (error) => {
13110
13118
  this.loader = false;
@@ -13120,11 +13128,11 @@ class AppointmentBookingComponent {
13120
13128
  }
13121
13129
  }
13122
13130
  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 }); }
13123
- 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>\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 *ngFor=\"let policy of selectedService?.cancellationPolicy\">&#8226;\r\n {{policy}}</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 *ngFor=\"let policy of selectedService?.reschedulePolicy\">&#8226; {{policy}}</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 : 0}}%</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;white-space:nowrap}.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"] }] }); }
13131
+ 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()\" [disabled]=\"isProcessing\"\r\n [ngClass]=\"{'pay-now-btn' : selectedService?.depositAmount?.depositRequired,'complete_booking' : !selectedService?.depositAmount?.depositRequired}\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n {{selectedService?.depositAmount?.depositRequired ? 'Pay Now' : 'Complete Booking'}}\r\n </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>\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 *ngFor=\"let policy of selectedService?.cancellationPolicy\">&#8226;\r\n {{policy}}</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 *ngFor=\"let policy of selectedService?.reschedulePolicy\">&#8226; {{policy}}</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 : 0}}%</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;white-space:nowrap}.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"] }] }); }
13124
13132
  }
13125
13133
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppointmentBookingComponent, decorators: [{
13126
13134
  type: Component,
13127
- 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>\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 *ngFor=\"let policy of selectedService?.cancellationPolicy\">&#8226;\r\n {{policy}}</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 *ngFor=\"let policy of selectedService?.reschedulePolicy\">&#8226; {{policy}}</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 : 0}}%</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;white-space:nowrap}.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"] }]
13135
+ 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()\" [disabled]=\"isProcessing\"\r\n [ngClass]=\"{'pay-now-btn' : selectedService?.depositAmount?.depositRequired,'complete_booking' : !selectedService?.depositAmount?.depositRequired}\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n {{selectedService?.depositAmount?.depositRequired ? 'Pay Now' : 'Complete Booking'}}\r\n </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>\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 *ngFor=\"let policy of selectedService?.cancellationPolicy\">&#8226;\r\n {{policy}}</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 *ngFor=\"let policy of selectedService?.reschedulePolicy\">&#8226; {{policy}}</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 : 0}}%</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;white-space:nowrap}.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"] }]
13128
13136
  }], ctorParameters: () => [{ type: RestService }, { type: EventsService }, { type: i2$2.Router }, { type: i6$1.MessageService }], propDecorators: { data: [{
13129
13137
  type: Input
13130
13138
  }], index: [{
@@ -16029,7 +16037,7 @@ class NewsLetterComponentComponent extends BaseSection {
16029
16037
  return this.data?.action?.buttons[index]?.styles;
16030
16038
  }
16031
16039
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewsLetterComponentComponent, deps: [{ token: RestService }, { token: i2$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
16032
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NewsLetterComponentComponent, isStandalone: true, selector: "simpo-news-letter-component", inputs: { index: "index", edit: "edit", delete: "delete", data: "data" }, usesInheritance: true, ngImport: i0, template: "<div class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\">\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row\">\r\n <div class=\"row field-container\" [simpoCorner]=\"styles?.corners\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoLayout]=\"stylesLayout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"col-7 d-flex gap-2 align-items-center image-field-container\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [id]=\"data?.id\" *ngIf=\"content?.image?.showImage\">\r\n <div class=\"image-container\">\r\n <img [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [simpoCorner]=\"styles?.corners\"\r\n [id]=\"data?.id\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '') + ' w-100 h-100'\"\r\n [class.logo]=\"content?.display?.showIcon\">\r\n </div>\r\n <div class=\"text-container mb-3\" *ngIf=\"content?.display?.showIcon\">\r\n <ng-container *ngFor=\"let item of content?.inputText\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div\r\n class=\"col-5 d-flex flex-column align-items-center justify-content-center h-100 input-fields-container\" [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\">\r\n <div class=\"text-container mb-3\" *ngIf=\"!content?.display?.showIcon\">\r\n <ng-container *ngFor=\"let item of content?.inputText\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div class=\"input-field w-75 mb-3\">\r\n <input type=\"email\" placeholder=\"Enter your email\" class=\"form-control py-2\" [(ngModel)]=\"email\"\r\n [class.error-border]=\"error\" [simpoCorner]=\"styles?.corners\">\r\n </div>\r\n <button class=\"submit w-75\" simpoButtonDirective [id]=\"data?.id+getButtonId(0)\"\r\n [buttonStyle]=\"getButtonStyle(0)\" [backgroundInfo]=\"styles?.background\" [sectionId]=\"data?.id\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId(0)\"\r\n [color]=\"data?.styles?.background?.accentColor\" (click)=\"postNewsLetter()\">Submit</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative}.submit{padding:5px 0}.logo{width:120px!important;height:120px!important;object-fit:unset!important}.error-border{border:2px solid #dc3545!important}@media (max-width:475px){.field-container{flex-direction:column}.total-container .total-container{justify-content:center}.image-field-container{width:100%}.image-container{margin-bottom:10px}.input-fields-container{height:auto!important;width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { 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: 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: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }] }); }
16040
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NewsLetterComponentComponent, isStandalone: true, selector: "simpo-news-letter-component", inputs: { index: "index", edit: "edit", delete: "delete", data: "data" }, usesInheritance: true, ngImport: i0, template: "<div class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\">\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row justify-content-center\">\r\n <div class=\"row field-container\" [simpoCorner]=\"styles?.corners\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoLayout]=\"stylesLayout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"col-7 d-flex gap-2 align-items-center image-field-container\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [id]=\"data?.id\" *ngIf=\"content?.image?.showImage\">\r\n <div class=\"image-container\">\r\n <img [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [simpoCorner]=\"styles?.corners\"\r\n [id]=\"data?.id\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '') + ' w-100 h-100'\"\r\n [class.logo]=\"content?.display?.showIcon\">\r\n </div>\r\n <div class=\"text-container mb-3\" *ngIf=\"content?.display?.showIcon || !content?.image?.showImage\">\r\n <ng-container *ngFor=\"let item of content?.inputText\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div\r\n class=\"col-5 d-flex flex-column align-items-center justify-content-center h-100 input-fields-container\" [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\">\r\n <div class=\"text-container mb-3\" *ngIf=\"!content?.display?.showIcon\">\r\n <ng-container *ngFor=\"let item of content?.inputText\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div class=\"input-field w-75 mb-3\">\r\n <input type=\"email\" placeholder=\"Enter your email\" class=\"form-control py-2\" [(ngModel)]=\"email\"\r\n [class.error-border]=\"error\" [simpoCorner]=\"styles?.corners\">\r\n </div>\r\n <button class=\"submit w-75\" simpoButtonDirective [id]=\"data?.id+getButtonId(0)\"\r\n [buttonStyle]=\"getButtonStyle(0)\" [backgroundInfo]=\"styles?.background\" [sectionId]=\"data?.id\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId(0)\"\r\n [color]=\"data?.styles?.background?.accentColor\" (click)=\"postNewsLetter()\">Submit</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative}.submit{padding:5px 0}.logo{width:120px!important;height:120px!important;object-fit:unset!important}.error-border{border:2px solid #dc3545!important}@media (max-width:475px){.field-container{flex-direction:column}.total-container .total-container{justify-content:center}.image-field-container{width:100%}.image-container{margin-bottom:10px}.input-fields-container{height:auto!important;width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { 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: 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: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }] }); }
16033
16041
  }
16034
16042
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewsLetterComponentComponent, decorators: [{
16035
16043
  type: Component,
@@ -16056,7 +16064,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
16056
16064
  MatSnackBarModule,
16057
16065
  SimpoContainerAligment,
16058
16066
  OverlayDirective,
16059
- ], template: "<div class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\">\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row\">\r\n <div class=\"row field-container\" [simpoCorner]=\"styles?.corners\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoLayout]=\"stylesLayout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"col-7 d-flex gap-2 align-items-center image-field-container\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [id]=\"data?.id\" *ngIf=\"content?.image?.showImage\">\r\n <div class=\"image-container\">\r\n <img [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [simpoCorner]=\"styles?.corners\"\r\n [id]=\"data?.id\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '') + ' w-100 h-100'\"\r\n [class.logo]=\"content?.display?.showIcon\">\r\n </div>\r\n <div class=\"text-container mb-3\" *ngIf=\"content?.display?.showIcon\">\r\n <ng-container *ngFor=\"let item of content?.inputText\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div\r\n class=\"col-5 d-flex flex-column align-items-center justify-content-center h-100 input-fields-container\" [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\">\r\n <div class=\"text-container mb-3\" *ngIf=\"!content?.display?.showIcon\">\r\n <ng-container *ngFor=\"let item of content?.inputText\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div class=\"input-field w-75 mb-3\">\r\n <input type=\"email\" placeholder=\"Enter your email\" class=\"form-control py-2\" [(ngModel)]=\"email\"\r\n [class.error-border]=\"error\" [simpoCorner]=\"styles?.corners\">\r\n </div>\r\n <button class=\"submit w-75\" simpoButtonDirective [id]=\"data?.id+getButtonId(0)\"\r\n [buttonStyle]=\"getButtonStyle(0)\" [backgroundInfo]=\"styles?.background\" [sectionId]=\"data?.id\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId(0)\"\r\n [color]=\"data?.styles?.background?.accentColor\" (click)=\"postNewsLetter()\">Submit</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative}.submit{padding:5px 0}.logo{width:120px!important;height:120px!important;object-fit:unset!important}.error-border{border:2px solid #dc3545!important}@media (max-width:475px){.field-container{flex-direction:column}.total-container .total-container{justify-content:center}.image-field-container{width:100%}.image-container{margin-bottom:10px}.input-fields-container{height:auto!important;width:100%}}\n"] }]
16067
+ ], template: "<div class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\">\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row justify-content-center\">\r\n <div class=\"row field-container\" [simpoCorner]=\"styles?.corners\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoLayout]=\"stylesLayout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"col-7 d-flex gap-2 align-items-center image-field-container\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [id]=\"data?.id\" *ngIf=\"content?.image?.showImage\">\r\n <div class=\"image-container\">\r\n <img [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [simpoCorner]=\"styles?.corners\"\r\n [id]=\"data?.id\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '') + ' w-100 h-100'\"\r\n [class.logo]=\"content?.display?.showIcon\">\r\n </div>\r\n <div class=\"text-container mb-3\" *ngIf=\"content?.display?.showIcon || !content?.image?.showImage\">\r\n <ng-container *ngFor=\"let item of content?.inputText\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div\r\n class=\"col-5 d-flex flex-column align-items-center justify-content-center h-100 input-fields-container\" [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\">\r\n <div class=\"text-container mb-3\" *ngIf=\"!content?.display?.showIcon\">\r\n <ng-container *ngFor=\"let item of content?.inputText\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div class=\"input-field w-75 mb-3\">\r\n <input type=\"email\" placeholder=\"Enter your email\" class=\"form-control py-2\" [(ngModel)]=\"email\"\r\n [class.error-border]=\"error\" [simpoCorner]=\"styles?.corners\">\r\n </div>\r\n <button class=\"submit w-75\" simpoButtonDirective [id]=\"data?.id+getButtonId(0)\"\r\n [buttonStyle]=\"getButtonStyle(0)\" [backgroundInfo]=\"styles?.background\" [sectionId]=\"data?.id\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId(0)\"\r\n [color]=\"data?.styles?.background?.accentColor\" (click)=\"postNewsLetter()\">Submit</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative}.submit{padding:5px 0}.logo{width:120px!important;height:120px!important;object-fit:unset!important}.error-border{border:2px solid #dc3545!important}@media (max-width:475px){.field-container{flex-direction:column}.total-container .total-container{justify-content:center}.image-field-container{width:100%}.image-container{margin-bottom:10px}.input-fields-container{height:auto!important;width:100%}}\n"] }]
16060
16068
  }], ctorParameters: () => [{ type: RestService }, { type: i2$1.MatSnackBar }], propDecorators: { index: [{
16061
16069
  type: Input
16062
16070
  }], edit: [{
@@ -22972,5 +22980,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
22972
22980
  * Generated bundle index. Do not edit.
22973
22981
  */
22974
22982
 
22975
- export { API_URL, AddNewSectionComponent, AlignContent, AlignmentDirective, AnimationDirective, AppointmentBookingComponent, AppointmentFormComponent, AuthenticateUserComponent, AuthenticationRequiredComponent, BANNERALIGNMENT, BANNERHALIGN, BUCKET_URL, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BookAppointmentComponent, BorderDirective, ButtonDirectiveDirective, CMIS_URL, CarouselBannerComponent, Cart, CartComponent, Category, CategoryProductComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, CustomerReviewComponent, DeviderType, ECOMMERCE_URL, EndUserService, EnrollmentFormComponent, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedCollectionComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterComponent, FooterSectionComponent, FooterType, FooterTypes, GradientDirection, HALIGN, HEADER_STYLING, HeaderButtonStyle, HeaderSectionComponent, HeaderTextComponent, Header_Type, HeightDirective, HoverAnimationDirective, HoverDirective, IconDirectiveDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LOCAL_STORAGE, LocationSectionComponent, LogoGalleryComponent, LogoShowcaseComponent, MapType, MergeHeaderDirective, MovingTextComponent, NavbarSectionComponent, NewCollectionComponent, NewServicesComponent, NewTestimonialsComponent, NewsLetterComponentComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, PASSBOOK_URL, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCardTheme, ProductCategoryListComponent, ProductDescComponent, ProductListComponent, PropertyComponentComponent, PropertyListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, RegistrationFormComponent, RemoveCarouselDirective, ReturnsCalculatorComponent, SPACING$1 as SPACING, SPACINGALIGN, SanitizeHtmlPipe, SchemeDetailComponent, SchemesComponent, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, SpacingAroundDirective, SpacingDirective, StoreListComponent, StorePageComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TestimonialVideoComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, TranslateOnhoverDirective, UserProfileComponent, UspVideoSectionComponent, VALIGN, VerifyComponent, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, cartType, checkItemAlreadyAdded, contentAlignment, fitContent, fitScreen, fontSize, headlineAnimationType, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective, svgData, syncItemToServerDBRequest };
22983
+ export { API_URL, APPOINTMENT_URL, AddNewSectionComponent, AlignContent, AlignmentDirective, AnimationDirective, AppointmentBookingComponent, AppointmentFormComponent, AuthenticateUserComponent, AuthenticationRequiredComponent, BANNERALIGNMENT, BANNERHALIGN, BUCKET_URL, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BookAppointmentComponent, BorderDirective, ButtonDirectiveDirective, CMIS_URL, CarouselBannerComponent, Cart, CartComponent, Category, CategoryProductComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, CustomerReviewComponent, DeviderType, ECOMMERCE_URL, EndUserService, EnrollmentFormComponent, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedCollectionComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterComponent, FooterSectionComponent, FooterType, FooterTypes, GradientDirection, HALIGN, HEADER_STYLING, HeaderButtonStyle, HeaderSectionComponent, HeaderTextComponent, Header_Type, HeightDirective, HoverAnimationDirective, HoverDirective, IconDirectiveDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LOCAL_STORAGE, LocationSectionComponent, LogoGalleryComponent, LogoShowcaseComponent, MapType, MergeHeaderDirective, MovingTextComponent, NavbarSectionComponent, NewCollectionComponent, NewServicesComponent, NewTestimonialsComponent, NewsLetterComponentComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, PASSBOOK_URL, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCardTheme, ProductCategoryListComponent, ProductDescComponent, ProductListComponent, PropertyComponentComponent, PropertyListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, RegistrationFormComponent, RemoveCarouselDirective, ReturnsCalculatorComponent, SPACING$1 as SPACING, SPACINGALIGN, SanitizeHtmlPipe, SchemeDetailComponent, SchemesComponent, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, SpacingAroundDirective, SpacingDirective, StoreListComponent, StorePageComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TestimonialVideoComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, TranslateOnhoverDirective, UserProfileComponent, UspVideoSectionComponent, VALIGN, VerifyComponent, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, cartType, checkItemAlreadyAdded, contentAlignment, fitContent, fitScreen, fontSize, headlineAnimationType, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective, svgData, syncItemToServerDBRequest };
22976
22984
  //# sourceMappingURL=simpo-component-library.mjs.map