simpo-component-library 3.6.801 → 3.6.803

package/fesm2022/simpo-component-library.mjs

@@ -3938,6 +3938,22 @@ class RestService {
     getOtpForLogin(payload) {
         return this.http.put(this.BASE_URL + `ecommerce/user/generate-otp`, payload);
     }
+    /** New OTP API: PUT /ecommerce/user/auth/send-otp
+     *  Body: { identifier, businessId }
+     *  Response: { data: { isExistingUser: boolean, message: string } }
+     */
+    sendOtpV2(identifier, businessId) {
+        return this.http.put(this.BASE_URL + `ecommerce/user/auth/send-otp`, { identifier, businessId });
+    }
+    verifyOtpV2(payload) {
+        return this.http.put(this.BASE_URL + `ecommerce/user/auth/verify-otp`, payload);
+    }
+    completeSignupV2(payload) {
+        return this.http.put(this.BASE_URL + `ecommerce/user/auth/complete-signup`, payload);
+    }
+    loginWithPasswordNew(payload) {
+        return this.http.put(this.BASE_URL + `ecommerce/user/auth/login-password`, payload);
+    }
     flush(eventsToSend) {
         this.http.post(this.BASE_URL + 'ecommerce/analytics/batch', eventsToSend)
             .subscribe({ error: () => { } });
@@ -7289,7 +7305,7 @@ class TestimonialSectionComponent extends BaseSection {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TestimonialSectionComponent, deps: [{ token: EventsService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TestimonialSectionComponent, isStandalone: true, selector: "simpo-testimonial-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }, { propertyName: "carouselInner", first: true, predicate: ["carouselInner"], descendants: true }, { propertyName: "carouselItems", predicate: ["carouselItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [attr.style]=\"customClass\" [simpoBorder]=\"style?.border\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n    [class.px-1]=\"screenWidth < 475\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row content-side w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\">\r\n            <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n          </div>\r\n        </div>\r\n\r\n        <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-bs-ride=\"carousel\"\r\n          data-bs-keyboard=\"false\">\r\n          <ol class=\"carousel-indicators\" [ngStyle]=\"{'color': getIndicatorColor()}\">\r\n            <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n              data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\">\r\n            </li>\r\n          </ol>\r\n          <div class=\"carousel-inner\" #carouselInner>\r\n            <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n              [class.active]=\"i === 0\" data-bs-interval=\"10000\" #carouselItem>\r\n              <div style=\"width: max-content; margin: auto; max-width: 90%;\" class=\"carousel-parent\"\r\n                [class.card-form]=\"content?.display?.showCard\" [simpoCorner]=\"style?.corners\"\r\n                [style.borderColor]=\"content?.display?.showCard ? style?.background?.accentColor : 'none'\"\r\n                [style.background]=\"content?.display?.showCard ? getColor(style?.background?.accentColor) : 'transparent'\">\r\n                <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n                  [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n                  <ng-container *ngIf=\"content?.display?.showImage\">\r\n                    <img loading=\"lazy\" [src]=\"testimonial?.image?.url\" class=\"mb-1\" loading=\"lazy\"\r\n                      [simpoContainerLayout]=\"getLayout\" [appImageEditor]=\"edit || false\"\r\n                      [imageData]=\"testimonial.image\" [sectionId]=\"data?.id\">\r\n                  </ng-container>\r\n                  <simpo-text-editor [(value)]=\"testimonial.inputText[0].value\"\r\n                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                  <ng-container *ngIf=\"testimonial?.inputText?.[1] as textItem\">\r\n                    <div class=\"d-flex\">\r\n                      <simpo-text-editor [(value)]=\"textItem.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\r\n            data-bs-slide=\"prev\" *ngIf=\"getLength() > 1\">\r\n            <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"sr-only\">Previous</span>\r\n          </a>\r\n          <a class=\"carousel-control-next\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\r\n            data-bs-slide=\"next\" *ngIf=\"getLength() > 1\">\r\n            <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"sr-only\">Next</span>\r\n          </a>\r\n        </div>\r\n\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>", styles: [".total-container{position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:5%;margin-right:5%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators li{background-color:currentColor;opacity:.5}.carousel-indicators .active{background-color:currentColor;opacity:1}.carousel-indicators{bottom:-45px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5  0 0 1 0 .708l-6 6a.5.5 0 0  1-.708-.708L10.293 8 4.646 2.354a.5.5  0 0 1 0-.708z'/%3e%3c/svg%3e\")}.carousel-item{height:100%;transition:transform .6s ease-in-out,opacity .6s ease-in-out}.previous-icon{position:absolute;height:45px}.card-form{border-width:2px;border-style:solid;padding:16px}.carousel-inner{overflow:visible!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.carousel-parent,.carousel-caption{width:100%!important}}li{list-style:none}.heading-medium{font-weight:400!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { 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: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TestimonialSectionComponent, isStandalone: true, selector: "simpo-testimonial-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }, { propertyName: "carouselInner", first: true, predicate: ["carouselInner"], descendants: true }, { propertyName: "carouselItems", predicate: ["carouselItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [attr.style]=\"customClass\" [simpoBorder]=\"style?.border\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n    [class.px-1]=\"screenWidth < 475\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row content-side w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\">\r\n            <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n          </div>\r\n        </div>\r\n\r\n        <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-bs-ride=\"carousel\"\r\n          data-bs-keyboard=\"false\">\r\n          <ol class=\"carousel-indicators\" [ngStyle]=\"{'color': getIndicatorColor()}\">\r\n            <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n              data-bs-target=\"#testimonialFullWidthCarousel\" [attr.data-bs-slide-to]=\"i\">\r\n            </li>\r\n          </ol>\r\n          <div class=\"carousel-inner\" #carouselInner>\r\n            <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n              [class.active]=\"i === 0\" data-bs-interval=\"10000\" #carouselItem>\r\n              <div style=\"width: max-content; margin: auto; max-width: 90%;\" class=\"carousel-parent\"\r\n                [class.card-form]=\"content?.display?.showCard\" [simpoCorner]=\"style?.corners\"\r\n                [style.borderColor]=\"content?.display?.showCard ? style?.background?.accentColor : 'none'\"\r\n                [style.background]=\"content?.display?.showCard ? getColor(style?.background?.accentColor) : 'transparent'\">\r\n                <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n                  [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n                  <ng-container *ngIf=\"content?.display?.showImage\">\r\n                    <img loading=\"lazy\" [src]=\"testimonial?.image?.url\" class=\"mb-1\" loading=\"lazy\"\r\n                      [simpoContainerLayout]=\"getLayout\" [appImageEditor]=\"edit || false\"\r\n                      [imageData]=\"testimonial.image\" [sectionId]=\"data?.id\">\r\n                  </ng-container>\r\n                  <simpo-text-editor [(value)]=\"testimonial.inputText[0].value\"\r\n                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                  <ng-container *ngIf=\"testimonial?.inputText?.[1] as textItem\">\r\n                    <div class=\"d-flex\">\r\n                      <simpo-text-editor [(value)]=\"textItem.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\r\n            data-bs-slide=\"prev\" *ngIf=\"getLength() > 1\">\r\n            <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"sr-only\">Previous</span>\r\n          </a>\r\n          <a class=\"carousel-control-next\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\r\n            data-bs-slide=\"next\" *ngIf=\"getLength() > 1\">\r\n            <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"sr-only\">Next</span>\r\n          </a>\r\n        </div>\r\n\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>", styles: [".total-container{position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:5%;margin-right:5%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators li{background-color:currentColor;opacity:.5}.carousel-indicators .active{background-color:currentColor;opacity:1}.carousel-indicators{bottom:-45px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5  0 0 1 0 .708l-6 6a.5.5 0 0  1-.708-.708L10.293 8 4.646 2.354a.5.5  0 0 1 0-.708z'/%3e%3c/svg%3e\")}.carousel-item{height:100%;transition:transform .6s ease-in-out,opacity .6s ease-in-out}.previous-icon{position:absolute;height:45px}.card-form{border-width:2px;border-style:solid;padding:16px}.carousel-inner{overflow:visible!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.carousel-parent,.carousel-caption{width:100%!important}}li{list-style:none}.heading-medium{font-weight:400!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { 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: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContainerFitDirective, selector: "[simpoContainerLayout]", inputs: ["simpoContainerLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
 }
@@ -7324,7 +7340,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         TextEditorComponent,
                         ImageEditorDirective,
                         SpacingHorizontalDirective,
-                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [attr.style]=\"customClass\" [simpoBorder]=\"style?.border\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n    [class.px-1]=\"screenWidth < 475\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row content-side w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\">\r\n            <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n          </div>\r\n        </div>\r\n\r\n        <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-bs-ride=\"carousel\"\r\n          data-bs-keyboard=\"false\">\r\n          <ol class=\"carousel-indicators\" [ngStyle]=\"{'color': getIndicatorColor()}\">\r\n            <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n              data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\">\r\n            </li>\r\n          </ol>\r\n          <div class=\"carousel-inner\" #carouselInner>\r\n            <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n              [class.active]=\"i === 0\" data-bs-interval=\"10000\" #carouselItem>\r\n              <div style=\"width: max-content; margin: auto; max-width: 90%;\" class=\"carousel-parent\"\r\n                [class.card-form]=\"content?.display?.showCard\" [simpoCorner]=\"style?.corners\"\r\n                [style.borderColor]=\"content?.display?.showCard ? style?.background?.accentColor : 'none'\"\r\n                [style.background]=\"content?.display?.showCard ? getColor(style?.background?.accentColor) : 'transparent'\">\r\n                <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n                  [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n                  <ng-container *ngIf=\"content?.display?.showImage\">\r\n                    <img loading=\"lazy\" [src]=\"testimonial?.image?.url\" class=\"mb-1\" loading=\"lazy\"\r\n                      [simpoContainerLayout]=\"getLayout\" [appImageEditor]=\"edit || false\"\r\n                      [imageData]=\"testimonial.image\" [sectionId]=\"data?.id\">\r\n                  </ng-container>\r\n                  <simpo-text-editor [(value)]=\"testimonial.inputText[0].value\"\r\n                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                  <ng-container *ngIf=\"testimonial?.inputText?.[1] as textItem\">\r\n                    <div class=\"d-flex\">\r\n                      <simpo-text-editor [(value)]=\"textItem.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\r\n            data-bs-slide=\"prev\" *ngIf=\"getLength() > 1\">\r\n            <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"sr-only\">Previous</span>\r\n          </a>\r\n          <a class=\"carousel-control-next\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\r\n            data-bs-slide=\"next\" *ngIf=\"getLength() > 1\">\r\n            <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"sr-only\">Next</span>\r\n          </a>\r\n        </div>\r\n\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>", styles: [".total-container{position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:5%;margin-right:5%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators li{background-color:currentColor;opacity:.5}.carousel-indicators .active{background-color:currentColor;opacity:1}.carousel-indicators{bottom:-45px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5  0 0 1 0 .708l-6 6a.5.5 0 0  1-.708-.708L10.293 8 4.646 2.354a.5.5  0 0 1 0-.708z'/%3e%3c/svg%3e\")}.carousel-item{height:100%;transition:transform .6s ease-in-out,opacity .6s ease-in-out}.previous-icon{position:absolute;height:45px}.card-form{border-width:2px;border-style:solid;padding:16px}.carousel-inner{overflow:visible!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.carousel-parent,.carousel-caption{width:100%!important}}li{list-style:none}.heading-medium{font-weight:400!important}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [attr.style]=\"customClass\" [simpoBorder]=\"style?.border\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n    [class.px-1]=\"screenWidth < 475\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row content-side w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\">\r\n            <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n          </div>\r\n        </div>\r\n\r\n        <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-bs-ride=\"carousel\"\r\n          data-bs-keyboard=\"false\">\r\n          <ol class=\"carousel-indicators\" [ngStyle]=\"{'color': getIndicatorColor()}\">\r\n            <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n              data-bs-target=\"#testimonialFullWidthCarousel\" [attr.data-bs-slide-to]=\"i\">\r\n            </li>\r\n          </ol>\r\n          <div class=\"carousel-inner\" #carouselInner>\r\n            <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n              [class.active]=\"i === 0\" data-bs-interval=\"10000\" #carouselItem>\r\n              <div style=\"width: max-content; margin: auto; max-width: 90%;\" class=\"carousel-parent\"\r\n                [class.card-form]=\"content?.display?.showCard\" [simpoCorner]=\"style?.corners\"\r\n                [style.borderColor]=\"content?.display?.showCard ? style?.background?.accentColor : 'none'\"\r\n                [style.background]=\"content?.display?.showCard ? getColor(style?.background?.accentColor) : 'transparent'\">\r\n                <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n                  [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n                  <ng-container *ngIf=\"content?.display?.showImage\">\r\n                    <img loading=\"lazy\" [src]=\"testimonial?.image?.url\" class=\"mb-1\" loading=\"lazy\"\r\n                      [simpoContainerLayout]=\"getLayout\" [appImageEditor]=\"edit || false\"\r\n                      [imageData]=\"testimonial.image\" [sectionId]=\"data?.id\">\r\n                  </ng-container>\r\n                  <simpo-text-editor [(value)]=\"testimonial.inputText[0].value\"\r\n                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                  <ng-container *ngIf=\"testimonial?.inputText?.[1] as textItem\">\r\n                    <div class=\"d-flex\">\r\n                      <simpo-text-editor [(value)]=\"textItem.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\r\n            data-bs-slide=\"prev\" *ngIf=\"getLength() > 1\">\r\n            <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"sr-only\">Previous</span>\r\n          </a>\r\n          <a class=\"carousel-control-next\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\r\n            data-bs-slide=\"next\" *ngIf=\"getLength() > 1\">\r\n            <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"sr-only\">Next</span>\r\n          </a>\r\n        </div>\r\n\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>", styles: [".total-container{position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:5%;margin-right:5%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators li{background-color:currentColor;opacity:.5}.carousel-indicators .active{background-color:currentColor;opacity:1}.carousel-indicators{bottom:-45px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5  0 0 1 0 .708l-6 6a.5.5 0 0  1-.708-.708L10.293 8 4.646 2.354a.5.5  0 0 1 0-.708z'/%3e%3c/svg%3e\")}.carousel-item{height:100%;transition:transform .6s ease-in-out,opacity .6s ease-in-out}.previous-icon{position:absolute;height:45px}.card-form{border-width:2px;border-style:solid;padding:16px}.carousel-inner{overflow:visible!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.carousel-parent,.carousel-caption{width:100%!important}}li{list-style:none}.heading-medium{font-weight:400!important}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: i0.Renderer2 }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -9821,9 +9837,10 @@ class AuthenticationRequiredComponent extends BaseSection {
         this.dialogRef = dialogRef;
         this.bottomsheetRef = bottomsheetRef;
         this.buttonId = '';
-        this.currentPage = 'LOGIN';
+        this.authScreen = 'PHONE';
         this.email = "";
         this.mobile = "";
+        this.phoneNumber = "";
         this.otp = "";
         this.otpControls = new FormArray([
             new FormControl(''),
@@ -9833,6 +9850,9 @@ class AuthenticationRequiredComponent extends BaseSection {
             new FormControl(''),
             new FormControl('')
         ]);
+        // Resend countdown
+        this.resendCountdown = 0;
+        this.isExistingUser = true;
         this.password = "";
         this.confPassword = "";
         this.userName = "";
@@ -9852,14 +9872,11 @@ class AuthenticationRequiredComponent extends BaseSection {
         this.proceedToEnrollment = false;
         this.tryAtHome = false;
         this.navigateToSchemeDetails = false;
+        this.currentPage = "";
         this.loginType = "OTP";
         this.generateOtp = true;
         this.generatedOtp = null;
         this.oneTimePassword = "";
-        this.otpPayload = {
-            "businessId": this.businessId ?? "",
-            "email": this.email ?? ""
-        };
         this.emailCheck = false;
         this.passwordCheck = false;
         this.mobileCheck = false;
@@ -9888,12 +9905,236 @@ class AuthenticationRequiredComponent extends BaseSection {
         this.styles = this.data?.styles;
         this.button = this.data?.action?.buttons[0];
         this.buttonId = (this.data ? this.data.id : '') + (this.button ? this.button.id : '');
+        this.setAccentRgbVar();
         let enabled = localStorage.getItem('signUpEnabled');
         if (enabled != null)
             this.signUpEnabled = enabled === 'true';
     }
-    ngAfterViewInit() {
-        // this.setup3DEffects();
+    ngAfterViewInit() { }
+    /** Sets --accent-rgb CSS variable so animated circles match the user's brand color */
+    setAccentRgbVar() {
+        const hex = this.styles?.background?.accentColor ?? '#667eea';
+        const cleanHex = hex.replace('#', '');
+        if (cleanHex.length === 6) {
+            const r = parseInt(cleanHex.substring(0, 2), 16);
+            const g = parseInt(cleanHex.substring(2, 4), 16);
+            const b = parseInt(cleanHex.substring(4, 6), 16);
+            document.documentElement.style.setProperty('--accent-rgb', `${r}, ${g}, ${b}`);
+        }
+    }
+    get canGoBack() {
+        return false; // phone is the first screen; no back from phone
+    }
+    goBack() {
+        if (this.authScreen === 'OTP')
+            this.authScreen = 'PHONE';
+        else if (this.authScreen === 'REGISTER')
+            this.authScreen = 'OTP';
+    }
+    closeAuth() {
+        if (this.dialogRef)
+            this.dialogRef.close();
+        else if (this.bottomsheetRef)
+            this.bottomsheetRef.dismiss();
+        else
+            this.router.navigate(['']);
+    }
+    formatCountdown(secs) {
+        const m = Math.floor(secs / 60).toString().padStart(2, '0');
+        const s = (secs % 60).toString().padStart(2, '0');
+        return `${m}:${s}`;
+    }
+    startResendTimer(seconds = 60) {
+        this.resendCountdown = seconds;
+        if (this.resendInterval)
+            clearInterval(this.resendInterval);
+        this.resendInterval = setInterval(() => {
+            this.resendCountdown--;
+            if (this.resendCountdown <= 0) {
+                clearInterval(this.resendInterval);
+                this.resendCountdown = 0;
+            }
+        }, 1000);
+    }
+    sendOTP() {
+        if (!this.edit) {
+            if (!this.isEmailOrNumberValid()) {
+                this.messageService.add({ severity: 'error', summary: 'Invalid Input', detail: 'Please enter a valid email or 10-digit mobile number' });
+                return;
+            }
+            this.buttonLoading = true;
+            this.restService.sendOtpV2(this.emailOrNumber, this.businessId ?? '').subscribe((response) => {
+                this.isExistingUser = response?.data?.isExistingUser ?? true;
+                this.buttonLoading = false;
+                this.authScreen = 'OTP';
+                this.startResendTimer(60);
+                this.messageService.add({ severity: 'success', summary: 'OTP Sent', detail: response?.data?.message ?? ('OTP sent to ' + this.emailOrNumber) });
+            }, (error) => {
+                this.buttonLoading = false;
+                this.messageService.add({ severity: 'error', summary: 'Error', detail: error?.error?.message });
+            });
+        }
+    }
+    resendOTPNew() {
+        this.restService.sendOtpV2(this.emailOrNumber, this.businessId ?? '').subscribe((response) => {
+            this.startResendTimer(60);
+            this.messageService.add({ severity: 'success', summary: 'OTP Resent', detail: response?.data?.message ?? ('New OTP sent to ' + this.emailOrNumber) });
+        }, (error) => {
+            this.messageService.add({ severity: 'error', summary: 'Error', detail: error?.error?.message });
+        });
+    }
+    verifyOTPNew() {
+        if (!this.edit) {
+            this.oneTimePassword = this.otpControls.value.join('');
+            if (this.oneTimePassword.length < 6) {
+                this.messageService.add({ severity: 'error', summary: 'OTP Required', detail: 'Please enter the 6-digit OTP' });
+                return;
+            }
+            this.buttonLoading = true;
+            const payload = {
+                businessId: this.businessId ?? '',
+                identifier: this.emailOrNumber,
+                otp: this.oneTimePassword,
+                deviceInfo: null
+            };
+            this.restService.verifyOtpV2(payload).subscribe((response) => {
+                const flow = response.data?.flow;
+                if (flow === 'SIGNUP') {
+                    this.buttonLoading = false;
+                    this.authScreen = 'REGISTER';
+                    // Prefill email or phone based on regex
+                    if (/^[6-9]\d{9}$/.test(this.emailOrNumber)) {
+                        this.phoneNumber = this.emailOrNumber;
+                    }
+                    else {
+                        this.email = this.emailOrNumber;
+                    }
+                    return;
+                }
+                if (flow === 'LOGIN') {
+                    const userDetails = this.storageService.setUser(response.data.user);
+                    this.storageService.setToken(response.data.passbookToken);
+                    this.storageService.updateAllData();
+                    this.storageService.setReferralDetails(response.data.user?.referralDetails);
+                    if (localStorage.getItem('utm_u_id')) {
+                        this.endUserRefferalDetails(response.data.user?.userId, localStorage.getItem('utm_u_id'));
+                    }
+                    this.buttonLoading = false;
+                    this.syncTrialCartToServerDB(userDetails.userId);
+                    this.messageService.add({ severity: 'success', summary: 'Logged In', detail: 'Logged in successfully' });
+                    if (this.proceedToCheckout)
+                        this.router.navigate(['/cart'], { queryParams: { checkout: true } });
+                    else if (this.proceedToEnrollment)
+                        this.router.navigate(['/schemes']);
+                    else if (this.tryAtHome)
+                        this.router.navigate(['/home-appointment']);
+                    else if (this.navigateToSchemeDetails)
+                        this.router.navigate(['scheme-detail']);
+                    else
+                        this.router.navigate(['']);
+                }
+            }, (error) => {
+                this.buttonLoading = false;
+                this.messageService.add({ severity: 'error', summary: 'Error', detail: error?.error?.message });
+            });
+        }
+    }
+    registerUser() {
+        if (!this.edit) {
+            if (!this.userName || this.userName.trim().length === 0) {
+                this.messageService.add({ severity: 'error', summary: 'Name Required', detail: 'Please enter your full name' });
+                return;
+            }
+            const mobileRegex = /^[6-9]\d{9}$/;
+            if (!mobileRegex.test(this.phoneNumber)) {
+                this.messageService.add({ severity: 'error', summary: 'Invalid Mobile', detail: 'Please enter a valid 10-digit mobile number' });
+                return;
+            }
+            if (!this.password || this.password.trim().length === 0) {
+                this.messageService.add({ severity: 'error', summary: 'Password Required', detail: 'Please enter a password' });
+                return;
+            }
+            if (this.password !== this.confPassword) {
+                this.messageService.add({ severity: 'error', summary: 'Password Mismatch', detail: 'Passwords do not match' });
+                return;
+            }
+            this.buttonLoading = true;
+            let verifySignData = {
+                identifier: this.emailOrNumber,
+                name: this.userName,
+                email: this.email.toLowerCase(),
+                mobile: this.phoneNumber,
+                password: this.password,
+                confirmPassword: this.confPassword,
+                businessId: this.businessId ?? '',
+                businessName: localStorage.getItem('bName') ?? '',
+                referralId: localStorage.getItem('utm_u_id') ?? null
+            };
+            this.restService.completeSignupV2(verifySignData).subscribe((response) => {
+                const userDetails = this.storageService.setUser(response.data);
+                this.storageService.setToken(response.data.passbookToken);
+                if (localStorage.getItem('utm_u_id')) {
+                    this.endUserRefferalDetails(response.data.userId, localStorage.getItem('utm_u_id'));
+                }
+                this.storageService.updateAllData();
+                this.syncTrialCartToServerDB(userDetails.userId);
+                this.buttonLoading = false;
+                this.messageService.add({ severity: 'success', summary: 'Welcome!', detail: 'Your account has been created successfully' });
+                if (this.proceedToCheckout)
+                    this.router.navigate(['/cart'], { queryParams: { checkout: true } });
+                else if (this.tryAtHome)
+                    this.router.navigate(['/home-appointment']);
+                else
+                    this.router.navigate(['']);
+            }, (error) => {
+                this.buttonLoading = false;
+                this.messageService.add({ severity: 'error', summary: 'Registration Error', detail: error?.error?.message });
+            });
+        }
+    }
+    loginWithPassword() {
+        if (!this.edit) {
+            if (!this.isEmailOrNumberValid()) {
+                this.messageService.add({ severity: 'error', summary: 'Invalid Input', detail: 'Please enter a valid email or 10-digit mobile number' });
+                return;
+            }
+            if (!this.password || this.password.trim().length === 0) {
+                this.messageService.add({ severity: 'error', summary: 'Password Required', detail: 'Please enter a password' });
+                return;
+            }
+            this.buttonLoading = true;
+            const payload = {
+                identifier: this.emailOrNumber,
+                password: this.password,
+                businessId: this.businessId ?? '',
+                deviceInfo: null
+            };
+            this.restService.loginWithPasswordNew(payload).subscribe((response) => {
+                const userDetails = this.storageService.setUser(response.data);
+                this.storageService.setToken(response.data.passbookToken);
+                this.storageService.updateAllData();
+                this.storageService.setReferralDetails(response.data.referralDetails);
+                if (localStorage.getItem('utm_u_id')) {
+                    this.endUserRefferalDetails(response.data.userId, localStorage.getItem('utm_u_id'));
+                }
+                this.buttonLoading = false;
+                this.syncTrialCartToServerDB(userDetails.userId);
+                this.messageService.add({ severity: 'success', summary: 'Logged In', detail: 'Logged in successfully' });
+                if (this.proceedToCheckout)
+                    this.router.navigate(['/cart'], { queryParams: { checkout: true } });
+                else if (this.proceedToEnrollment)
+                    this.router.navigate(['/schemes']);
+                else if (this.tryAtHome)
+                    this.router.navigate(['/home-appointment']);
+                else if (this.navigateToSchemeDetails)
+                    this.router.navigate(['scheme-detail']);
+                else
+                    this.router.navigate(['']);
+            }, (error) => {
+                this.buttonLoading = false;
+                this.messageService.add({ severity: 'error', summary: 'Login Failed', detail: error?.error?.message });
+            });
+        }
     }
     onInput(index) {
         const value = this.otpControls.at(index).value || '';
@@ -9955,39 +10196,6 @@ class AuthenticationRequiredComponent extends BaseSection {
     getFormOtp() {
         return this.otpControls.value.join('');
     }
-    loginAuthentication(loginType) {
-        this.loginType = loginType;
-        if (this.loginType == "OTP") {
-            this.generateOtp = true;
-        }
-        else if (this.loginType == "PASSWORD") {
-            this.generateOtp = false;
-        }
-    }
-    getOTP() {
-        if (!this.edit) {
-            if (this.emailOrNumber.length > 0) {
-                this.generateOtp = false;
-                this.otpPayload.email = this.emailOrNumber;
-                this.regenerateOtp(this.otpPayload);
-            }
-            else {
-                this.messageService.add({ severity: 'error', summary: 'Login request', detail: "Enter your login email or mobile number" });
-            }
-        }
-    }
-    regenerateOtp(payload) {
-        payload.email = this.emailOrNumber;
-        this.restService.getOtpForLogin(payload).subscribe((response) => {
-            this.generatedOtp = response;
-            this.messageService.add({ severity: 'success', summary: 'Otp Sent', detail: 'Otp sent to your email or mobile number' });
-        }, (error) => {
-            this.messageService.add({ severity: 'error', summary: 'Login request', detail: error?.error?.message });
-        });
-    }
-    resendOtp() {
-        this.regenerateOtp(this.otpPayload);
-    }
     close() {
         this.dialogRef.close();
     }
@@ -10399,7 +10607,7 @@ class AuthenticationRequiredComponent extends BaseSection {
         });
     }
     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 }); }
-    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], viewQueries: [{ propertyName: "inputs", predicate: ["otpInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<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\" [style.maxHeight.px]=\"\r\n        currentPage === 'LOGIN' ? 450 : 600\">\r\n        <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoCorner]=\"styles?.corners\">\r\n          <div class=\"tabs\">\r\n            <button class=\"tab\" id=\"tab-signup\" (click)=\"currentPage = 'SIGNUP'\"\r\n              [ngStyle]=\"{'background':currentPage === 'SIGNUP' ? accentBackground : ''}\" [style.color]=\"fontColor\">Sign\r\n              up</button>\r\n            <button class=\"tab\" id=\"tab-login\" (click)=\"currentPage = 'LOGIN'\"\r\n              [ngStyle]=\"{'background':currentPage === 'LOGIN' ? accentBackground : ''}\" [style.color]=\"fontColor\">Log\r\n              in</button>\r\n          </div>\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 class=\"d-flex text-center flex-column align-items-center justify-content-center mb-2 login-main-section\">\r\n    <p class=\"mb-0 clr-black login-text\">{{loginType === 'OTP' ? 'Login via OTP' : 'Login'}}</p>\r\n  </div>\r\n  <div class=\"login-input-section\">\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Email/Mobile</label>\r\n      <input type=\"text\" class=\"clr-black\" [(ngModel)]=\"emailOrNumber\" required=\"\"\r\n        placeholder=\"janedoe@gmail.com / 9876543210\" (ngModelChange)=\"onEmailOrNumberChange()\"\r\n        [style.borderColor]=\"!emailOrNumberCheck ? '' : 'red'\">\r\n    </div>\r\n    <div class=\"input-box mb-4\">\r\n      <div class=\"w-100\">\r\n        <div class=\"w-100 d-flex justify-content-between password-text-container\" *ngIf=\"loginType==='PASSWORD'\">\r\n          Password\r\n          <div *ngIf=\"!showPassword\" class=\"password-config d-flex align-items-center cursor-pointer\"\r\n            (click)=\"showPassword = true\"><img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/181720c1762866309854Icon_(3).svg\" alt=\"\">&nbsp;Show\r\n          </div>\r\n          <div class=\"password-config d-flex align-items-center cursor-pointer\" (click)=\"showPassword = false\"\r\n            *ngIf=\"showPassword\"><img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/994914c1762805529071Eye_off.svg\" alt=\"\">&nbsp;Hide\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex w-100 align-items-center justify-content-between mb-1 text-dark\"\r\n          *ngIf=\"loginType==='OTP' && !generateOtp\" style=\"font-size:12px\">OTP <span class=\"cursor-pointer text-nowrap\"\r\n            *ngIf=\"loginType==='OTP' && generateOtp === false\" (click)=\"resendOtp()\" style=\"font-size:11px\">Resend\r\n            Otp</span></div>\r\n        <ng-container *ngIf=\"loginType==='PASSWORD'\">\r\n          <div class=\"w-100 password-input-container\" [style.borderColor]=\"!passwordCheck ? '' : 'red'\">\r\n            <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\"\r\n              (ngModelChange)=\"onPasswordChange()\" class=\"w-90 b-none clr-black\" placeholder=\"Johndoe@1234\">\r\n          </div>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"loginType==='OTP'\">\r\n          <div class=\"d-flex align-items-center justify-content-between otp_input\" [ngClass]=\"{'gap-1': loginType==='OTP' &&\r\n              generateOtp===false}\" *ngIf=\"!generateOtp\">\r\n            <div class=\"d-flex gap-2 w-100 justify-content-between\">\r\n              <input *ngFor=\"let control of otpControls.controls; let i = index\" #otpInput\r\n                class=\"form-control text-center otp-box clr-black\" maxlength=\"1\" inputmode=\"numeric\"\r\n                [formControl]=\"control\" (input)=\"onInput(i)\" (keydown)=\"onKeyDown($event, i)\" />\r\n            </div>\r\n            <!-- <input class=\"w-100\" placeholder=\"1234\" [(ngModel)]=\"oneTimePassword\" type=\"number\"> -->\r\n          </div>\r\n        </ng-container>\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    <app-button-element [buttonContent]=\"data?.action?.buttons[1]?.content?.label?.length > 0 ? data?.action?.buttons[1]?.content: {\r\n          'label': 'Login' } \" (click)=\"login()\" *ngIf=\"!generateOtp\" [buttonStyle]=\"data?.action?.buttons[1]?.styles\"\r\n      [buttonId]=\"data?.action?.buttons[1]?.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [loading]=\"buttonLoading\" [isFullWidth]=\"true\"></app-button-element>\r\n    <!-- <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading && !generateOtp\" [buttonData]=\"button?.content\"\r\n      [buttonStyle]=\"button?.styles\" 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    <app-button-element [buttonContent]=\"data?.action?.buttons[2]?.content?.label?.length > 0 ? data?.action?.buttons[2]?.content: {\r\n          'label': 'Generate Otp'} \" (click)=\"getOTP()\" *ngIf=\"generateOtp\"\r\n      [buttonStyle]=\"data?.action?.buttons[2]?.styles\" [buttonId]=\"data?.action?.buttons[2]?.id\" [sectionId]=\"data?.id\"\r\n      [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [loading]=\"buttonLoading\" [isFullWidth]=\"true\"></app-button-element>\r\n    <!-- <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading && generateOtp\" [buttonData]=\"button?.content\"\r\n      [buttonStyle]=\"button?.styles\" 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)=\"getOTP()\">Generate Otp</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 ?? ''\">Loading...</button> -->\r\n\r\n\r\n    <div class=\"sign-up mt-3 d-flex align-items-center justify-content-end fs-13\" *ngIf=\"signUpEnabled\">\r\n      <span class=\"cursor-pointer text-dark\" (click)=\"loginAuthentication('OTP')\"\r\n        *ngIf=\"loginType==='PASSWORD';else loginWithPassword\">Login with\r\n        OTP</span>\r\n    </div>\r\n    <ng-template #loginWithPassword>\r\n      <span class=\"cursor-pointer text-dark\" (click)=\"loginAuthentication('PASSWORD')\">Login with\r\n        Password</span>\r\n    </ng-template>\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<ng-template #signInTemplate>\r\n  <div class=\"d-flex flex-column align-items-center justify-content-center mb-3\">\r\n    <p class=\"mb-0 fs-20-fw-600 clr-black\">Sign up</p>\r\n  </div>\r\n\r\n  <div class=\"d-flex w-100 signup-input-container flex-column\">\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Name</label>\r\n      <input type=\"text\" class=\"clr-black\" [(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\" class=\"clr-black\" [(ngModel)]=\"email\" 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=\"d-flex flex-column\">\r\n      <div class=\"input-box\">\r\n        <label for=\"\">Phone Number</label>\r\n        <input type=\"number\" class=\"clr-black\" [(ngModel)]=\"mobile\" (ngModelChange)=\"onMobileChange()\"\r\n          placeholder=\"9876543219\" [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        <div class=\"d-flex align-items-center justify-content-between password-text-container\"><label\r\n            for=\"\">Password</label>\r\n          <div *ngIf=\"!showPassword\" class=\"password-config d-flex align-items-center cursor-pointer\"\r\n            (click)=\"showPassword = true\"><img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/181720c1762866309854Icon_(3).svg\" alt=\"\">&nbsp;Show\r\n          </div>\r\n          <div class=\"password-config d-flex align-items-center cursor-pointer\" (click)=\"showPassword = false\"\r\n            *ngIf=\"showPassword\"><img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/994914c1762805529071Eye_off.svg\" alt=\"\">&nbsp;Hide\r\n          </div>\r\n        </div>\r\n        <div class=\"w-100 d-flex align-items-center\">\r\n          <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\" class=\"w-90 clr-black\"\r\n            placeholder=\"Janedoe@1234\" [style.borderColor]=\"!passwordCheck ? '' : 'red'\"\r\n            (ngModelChange)=\"onPasswordChange()\">\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    </div>\r\n    <app-button-element [buttonContent]=\"data?.action?.buttons[0]?.content?.label?.length > 0 ? data?.action?.buttons[0]?.content: {\r\n          'label': 'Create Account' } \" (click)=\"createAccount()\" [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n      [buttonId]=\"data?.action?.buttons[0]?.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [disabled]=\"!isEmailValid || !isPasswordValid || !userName\" [loading]=\"buttonLoading\"\r\n      [isFullWidth]=\"true\"></app-button-element>\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 text-secondary d-flex align-items-center justify-content-end \r\n    mt-3 fs-14 w-100 text-center \">Already have an account?&nbsp;<span (click)=\"currentPage = 'LOGIN'\"\r\n        class=\"cursor-pointer text-dark\">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}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.fa{font-family:\"Font Awesome 6 Free\"}.otp_input span{font-size:11px}.otp_input span:hover{text-decoration:underline}label,.eye{color:#000}.sign-up span:hover{text-decoration:underline}.eye{padding:6px;font-size:16px}.w-90{width:90%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-panel{width:450px;margin:2rem auto;background:#ffffff26;box-shadow:0 25px 50px -12px #00000040;backface-visibility:hidden}.login-input-section{padding:0 2rem}.panel{background:#fffffff2;padding:0 0 2rem;position:relative;transition:all .4s ease;margin:unset!important}.input-box{display:flex;flex-direction:column;margin-bottom:.75rem;position:relative;transform-style:preserve-3d;gap:5px}.input-box label{transform:translateZ(20px);margin-left:5px}.input-box input{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;border:1px solid rgba(0,0,0,.08);padding:.75rem;border-radius:12px;appearance:none;outline:none}.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}.clr-black{color:#000!important}.signup-input-container{padding:0 2rem}.fs-30-fw-600{font-size:30px;font-weight:600}.fs-20-fw-600{font-size:20px;font-weight:600}.fs-14-col-grey{font-size:14px;color:#979797}.fs-13{font-size:13px}.fs-14{font-size:14px}.password-input-container{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;border:1px solid rgba(0,0,0,.08);border-radius:12px;appearance:none;outline:none}.b-none{border:none!important}.password-text-container{padding-left:.5rem;font-size:13px;margin-bottom:.3rem;color:#000}.password-text-container img{width:15px}.password-text-container .password-config{font-size:13px;color:#686f78}.tabs{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border-radius:18px 15px 0 0;margin-bottom:2rem}.login-main-section .login-text{font-size:20px;font-weight:600}.tab{padding:1rem;font-size:clamp(13px,3.2vw,15px)!important;font-weight:600;text-align:center;cursor:pointer;background:#d9d9d9;border:none;letter-spacing:.01em;transition:background .2s,color .2s;-webkit-user-select:none;user-select:none;min-height:48px}.tab:hover{background:#cacaca}.tab.active{background:#1a1a1a;color:#fff}.otp-box{width:55px;height:55px;font-size:20px}h1{font-size:clamp(18px,4.5vw,22px);font-weight:600;color:#1a1a1a;text-align:center;margin-bottom:clamp(20px,5vw,28px);letter-spacing:-.01em}label{font-size:clamp(11px,2.8vw,13px);font-weight:500;color:#333}input[type=email],input[type=password],input[type=text]{width:100%;padding:clamp(10px,2.5vw,12px) clamp(10px,2.5vw,14px);border:1.5px solid #e0e0e0;border-radius:clamp(8px,2vw,12px);font-size:clamp(13px,3.2vw,14px);color:#1a1a1a;background:#fff;outline:none;transition:border-color .2s,box-shadow .2s;-webkit-text-size-adjust:100%}@media (max-width: 400px){input[type=email],input[type=password],input[type=text]{font-size:16px}}input[type=email]:focus,input[type=password]:focus,input[type=text]:focus{border-color:#888;box-shadow:0 0 0 3px #0000000f}input::placeholder{color:transparent}.forgot{display:block;text-align:right;font-size:clamp(11px,2.8vw,13px);font-weight:500;color:#1a1a1a;text-decoration:underline;text-underline-offset:2px;margin-top:clamp(6px,1.5vw,8px);cursor:pointer;touch-action:manipulation}.forgot:hover{color:#555}.submit-btn{display:block;width:100%;padding:clamp(13px,3.2vw,15px);margin-top:clamp(16px,4vw,24px);background:#c0bfbf;color:#fff;border:none;border-radius:50px;font-size:clamp(14px,3.5vw,15px);font-weight:600;cursor:pointer;letter-spacing:.01em;transition:background .2s;touch-action:manipulation;min-height:48px}.submit-btn:hover{background:#999}.submit-btn:active{background:#888}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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: i8$4.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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { 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"] }] }); }
+    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], viewQueries: [{ propertyName: "inputs", predicate: ["otpInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<section [id]=\"data?.id\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\n  <div [spacingAround]=\"stylesLayout\">\n    <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\n      <div class=\"area w-100\">\n        <ul class=\"circles\" [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\">\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n        </ul>\n      </div>\n\n      <!-- ===== SCREEN 1: PHONE NUMBER ===== -->\n      <div *ngIf=\"authScreen === 'PHONE'\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\"\n        [simpoCorner]=\"styles?.corners\">\n        <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoCorner]=\"styles?.corners\">\n\n          <div class=\"d-flex text-center flex-column align-items-center justify-content-center mb-2 login-main-section\"\n            style=\"padding: 1.5rem 2rem 0.5rem;\">\n            <p class=\"mb-0 clr-black login-text\">LOGIN OR SIGNUP</p>\n          </div>\n          <hr class=\"mx-0 my-0\" style=\"border-color: #e8e8e8;\">\n\n          <div class=\"login-input-section mt-4\">\n            <p class=\"text-center mb-3\" style=\"font-size:14px; color:#555;\">Unlock coupons, profile and much more</p>\n\n            <div class=\"input-box\">\n              <label for=\"auth-email-phone-input\">Email / Mobile Number</label>\n              <input id=\"auth-email-phone-input\" type=\"text\" class=\"clr-black\" [(ngModel)]=\"emailOrNumber\"\n                placeholder=\"janedoe@gmail.com / 9876543210\" (ngModelChange)=\"onEmailOrNumberChange()\"\n                [style.borderColor]=\"!emailOrNumberCheck ? '' : 'red'\" (keyup.enter)=\"sendOTP()\" />\n              <span class=\"f-12\" *ngIf=\"emailOrNumberCheck\" [style.color]=\"'red'\">Please enter a valid email or 10-digit\n                mobile number*</span>\n            </div>\n\n            <button class=\"send-btn gap-2 w-100 py-2\" [buttonData]=\"data?.action?.buttons[2]?.content\"\n              [buttonStyle]=\"data?.action?.buttons[2]?.styles\" simpoButtonDirective\n              [id]=\"data?.id+(data?.action?.buttons[2]?.id || '')\" [sectionId]=\"data?.id\"\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n              [appButtonEditor]=\"edit ?? false\" [buttonId]=\"data?.action?.buttons[2]?.id ?? ''\" (click)=\"sendOTP()\"\n              [disabled]=\"buttonLoading\">\n              <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"\n                *ngIf=\"buttonLoading\"></span>\n              {{ data?.action?.buttons[2]?.content?.label?.length > 0 ? data?.action?.buttons[2]?.content?.label : 'SEND\n              OTP' }}\n            </button>\n\n            <div class=\"mt-3 text-center\">\n              <span class=\"cursor-pointer clr-black fs-13\" style=\"font-weight:700; text-decoration:underline;\"\n                (click)=\"authScreen = 'PASSWORD'\">\n                Login with Password\n              </span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- ===== SCREEN 2: OTP VERIFICATION ===== -->\n      <div *ngIf=\"authScreen === 'OTP'\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\" [simpoCorner]=\"styles?.corners\">\n        <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoCorner]=\"styles?.corners\">\n\n          <div class=\"d-flex text-center flex-column align-items-center justify-content-center mb-2 login-main-section\"\n            style=\"padding: 1.5rem 2rem 0.5rem;\">\n            <p class=\"mb-0 clr-black login-text\">LOGIN OR SIGNUP</p>\n          </div>\n          <hr class=\"mx-0 my-0\" style=\"border-color: #e8e8e8;\">\n\n          <div class=\"login-input-section mt-4\">\n            <p class=\"text-center mb-3 clr-black\" style=\"font-size:14px;\">\n              Enter 6-digit OTP sent to {{emailOrNumber}}\n            </p>\n\n            <div class=\"d-flex align-items-center justify-content-between otp_input gap-1 mb-3\">\n              <div class=\"d-flex gap-2 w-100 justify-content-between\">\n                <input *ngFor=\"let control of otpControls.controls; let i = index\" #otpInput\n                  class=\"form-control text-center otp-box clr-black\" maxlength=\"1\" inputmode=\"numeric\"\n                  [formControl]=\"control\" (input)=\"onInput(i)\" (keydown)=\"onKeyDown($event, i)\" />\n              </div>\n            </div>\n\n            <div class=\"text-center mb-3\">\n              <span *ngIf=\"resendCountdown > 0\" class=\"clr-black fs-13\" style=\"font-weight:700; letter-spacing:0.04em;\">\n                RESEND IN &nbsp;{{formatCountdown(resendCountdown)}}\n              </span>\n              <span *ngIf=\"resendCountdown === 0\" class=\"cursor-pointer clr-black fs-13\"\n                style=\"font-weight:700; letter-spacing:0.04em; text-decoration:underline;\" (click)=\"resendOTPNew()\">\n                RESEND OTP\n              </span>\n            </div>\n\n            <button class=\"send-btn gap-2 w-100  py-2\" [buttonData]=\"data?.action?.buttons[1]?.content\"\n              [buttonStyle]=\"data?.action?.buttons[1]?.styles\" simpoButtonDirective\n              [id]=\"data?.id+(data?.action?.buttons[1]?.id || '')\" [sectionId]=\"data?.id\"\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n              [appButtonEditor]=\"edit ?? false\" [buttonId]=\"data?.action?.buttons[1]?.id ?? ''\" (click)=\"verifyOTPNew()\"\n              [disabled]=\"buttonLoading\">\n              <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"\n                *ngIf=\"buttonLoading\"></span>\n              {{ data?.action?.buttons[1]?.content?.label?.length > 0 ? data?.action?.buttons[1]?.content?.label :\n              'VERIFY OTP' }}\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <!-- ===== SCREEN 3: REGISTER ===== -->\n      <div *ngIf=\"authScreen === 'REGISTER'\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\"\n        [simpoCorner]=\"styles?.corners\">\n        <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoCorner]=\"styles?.corners\">\n\n          <div class=\"d-flex flex-column align-items-center justify-content-center mb-3\"\n            style=\"padding: 1.5rem 2rem 0.5rem;\">\n            <p class=\"mb-0 fs-20-fw-600 clr-black\">REGISTER</p>\n          </div>\n\n          <div class=\"d-flex w-100 signup-input-container flex-column\">\n            <div class=\"input-box\">\n              <label for=\"auth-fullname-input\">Full Name</label>\n              <input id=\"auth-fullname-input\" type=\"text\" class=\"clr-black\" [(ngModel)]=\"userName\"\n                placeholder=\"Jane Doe\">\n            </div>\n\n            <div class=\"input-box\">\n              <label for=\"auth-reg-phone-input\">Phone Number</label>\n              <div class=\"d-flex align-items-center w-100 password-input-container\">\n                <span class=\"clr-black\"\n                  style=\"font-size:14px; font-weight:500; padding: 0 8px 0 12px; white-space:nowrap;\">+91 |</span>\n                <input id=\"auth-reg-phone-input\" type=\"tel\" class=\"b-none clr-black w-90\" [(ngModel)]=\"phoneNumber\"\n                  placeholder=\"9876543210\" maxlength=\"10\" inputmode=\"numeric\" style=\"outline:none; font-size:14px;\" />\n              </div>\n            </div>\n\n            <div class=\"input-box\">\n              <label for=\"auth-email-input\">Email</label>\n              <input id=\"auth-email-input\" type=\"email\" class=\"clr-black\" [(ngModel)]=\"email\"\n                placeholder=\"janedoe@gmail.com\" (ngModelChange)=\"onEmailChange()\"\n                [style.borderColor]=\"!emailCheck ? '' : 'red'\">\n              <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid email*</span>\n            </div>\n\n            <div class=\"input-box\">\n              <label for=\"auth-reg-password-input\">Password</label>\n              <div class=\"password-input-container d-flex align-items-center w-100\" style=\"padding-right: 12px;\">\n                <input id=\"auth-reg-password-input\" [type]=\"passwordHidden ? 'password' : 'text'\"\n                  class=\"b-none clr-black w-100\" [(ngModel)]=\"password\" placeholder=\"Password\">\n                <mat-icon style=\"cursor: pointer; color: black; font-size: 20px; text-align: center\"\n                  (click)=\"passwordHidden = !passwordHidden\">\n                  {{passwordHidden ? 'visibility' : 'visibility_off'}}\n                </mat-icon>\n              </div>\n            </div>\n\n            <div class=\"input-box\">\n              <label for=\"auth-reg-conf-password-input\">Confirm Password</label>\n              <div class=\"password-input-container d-flex align-items-center w-100\" style=\"padding-right: 12px;\">\n                <input id=\"auth-reg-conf-password-input\" [type]=\"passwordHidden ? 'password' : 'text'\"\n                  class=\"b-none clr-black w-100\" [(ngModel)]=\"confPassword\" placeholder=\"Confirm Password\">\n              </div>\n            </div>\n\n            <button class=\"send-btn gap-2 w-100  py-2\" [buttonData]=\"data?.action?.buttons[0]?.content\"\n              [buttonStyle]=\"data?.action?.buttons[0]?.styles\" simpoButtonDirective\n              [id]=\"data?.id+(data?.action?.buttons[0]?.id || '')\" [sectionId]=\"data?.id\"\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n              [appButtonEditor]=\"edit ?? false\" [buttonId]=\"data?.action?.buttons[0]?.id ?? ''\" (click)=\"registerUser()\"\n              [disabled]=\"buttonLoading\">\n              <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"\n                *ngIf=\"buttonLoading\"></span>\n              {{ data?.action?.buttons[0]?.content?.label?.length > 0 ? data?.action?.buttons[0]?.content?.label :\n              'CONTINUE' }}\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <!-- ===== SCREEN 4: LOGIN WITH PASSWORD ===== -->\n      <div *ngIf=\"authScreen === 'PASSWORD'\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\"\n        [simpoCorner]=\"styles?.corners\">\n        <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoCorner]=\"styles?.corners\">\n\n          <div class=\"d-flex flex-column align-items-center justify-content-center mb-3\"\n            style=\"padding: 1.5rem 2rem 0.5rem;\">\n            <p class=\"mb-0 fs-20-fw-600 clr-black\">LOGIN</p>\n          </div>\n\n          <div class=\"d-flex w-100 signup-input-container flex-column\">\n\n            <div class=\"input-box\">\n              <label for=\"auth-pwd-email-input\">Email / Mobile Number</label>\n              <input id=\"auth-pwd-email-input\" type=\"text\" class=\"clr-black\" [(ngModel)]=\"emailOrNumber\"\n                placeholder=\"janedoe@gmail.com / 9876543210\" (ngModelChange)=\"onEmailOrNumberChange()\"\n                [style.borderColor]=\"!emailOrNumberCheck ? '' : 'red'\">\n              <span class=\"f-12\" *ngIf=\"emailOrNumberCheck\" [style.color]=\"'red'\">Please enter valid email or 10-digit\n                mobile number*</span>\n            </div>\n\n            <div class=\"input-box\">\n              <label for=\"auth-login-password-input\">Password</label>\n              <div class=\"password-input-container d-flex align-items-center w-100\" style=\"padding-right: 12px;\">\n                <input id=\"auth-login-password-input\" [type]=\"passwordHidden ? 'password' : 'text'\"\n                  class=\"b-none clr-black w-100\" [(ngModel)]=\"password\" placeholder=\"Password\"\n                  (keyup.enter)=\"loginWithPassword()\">\n                <mat-icon style=\"cursor: pointer; color: black; font-size: 20px; text-align: center\"\n                  (click)=\"passwordHidden = !passwordHidden\">\n                  {{passwordHidden ? 'visibility' : 'visibility_off'}}\n                </mat-icon>\n              </div>\n            </div>\n\n            <button class=\"send-btn gap-2 w-100  py-2\" [buttonData]=\"data?.action?.buttons[0]?.content\"\n              [buttonStyle]=\"data?.action?.buttons[0]?.styles\" simpoButtonDirective\n              [id]=\"data?.id+(data?.action?.buttons[0]?.id || '')\" [sectionId]=\"data?.id\"\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n              [appButtonEditor]=\"edit ?? false\" [buttonId]=\"data?.action?.buttons[0]?.id ?? ''\"\n              (click)=\"loginWithPassword()\" [disabled]=\"buttonLoading\">\n              <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"\n                *ngIf=\"buttonLoading\"></span>\n              {{ data?.action?.buttons[0]?.content?.label?.length > 0 ? data?.action?.buttons[0]?.content?.label :\n              'LOGIN' }}\n            </button>\n\n            <div class=\"mt-3 text-center\">\n              <span class=\"cursor-pointer clr-black fs-13\" style=\"font-weight:700; text-decoration:underline;\"\n                (click)=\"authScreen = 'PHONE'\">\n                Login with OTP\n              </span>\n            </div>\n\n          </div>\n        </div>\n      </div>\n\n    </div>\n  </div>\n\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n\n</section>", styles: [".total-container{position:relative;height:auto;perspective:1200px;overflow:hidden}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.fa{font-family:\"Font Awesome 6 Free\"}.otp_input span{font-size:11px}.otp_input span:hover{text-decoration:underline}label,.eye{color:#000}.sign-up span:hover{text-decoration:underline}.eye{padding:6px;font-size:16px}.w-90{width:90%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-panel{width:450px;margin:2rem auto;background:#ffffff26;box-shadow:0 25px 50px -12px #00000040;backface-visibility:hidden}.login-input-section{padding:0 2rem}.panel{background:#fffffff2;padding:0 0 2rem;position:relative;transition:all .4s ease;margin:unset!important}.input-box{display:flex;flex-direction:column;margin-bottom:.75rem;position:relative;transform-style:preserve-3d;gap:5px}.input-box label{transform:translateZ(20px);margin-left:5px}.input-box input{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;border:1px solid rgba(0,0,0,.08);padding:.75rem;border-radius:12px;appearance:none;outline:none}.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:radial-gradient(circle at 30% 30%,rgba(var(--accent-rgb, 102, 126, 234),.22),rgba(var(--accent-rgb, 102, 126, 234),.06));box-shadow:0 0 20px 4px rgba(var(--accent-rgb, 102, 126, 234),.15),inset 0 0 12px #ffffff1f;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:50%;border:1px solid rgba(var(--accent-rgb, 102, 126, 234),.18);animation:floatUp 25s linear infinite,pulse 4s ease-in-out infinite alternate;bottom:-150px}.circles li:nth-child(1){left:10%;width:90px;height:90px;animation-delay:0s;animation-duration:22s}.circles li:nth-child(2){left:25%;width:30px;height:30px;animation-delay:3s;animation-duration:14s}.circles li:nth-child(3){left:45%;width:60px;height:60px;animation-delay:6s;animation-duration:18s}.circles li:nth-child(4){left:65%;width:110px;height:110px;animation-delay:1s;animation-duration:28s}.circles li:nth-child(5){left:80%;width:25px;height:25px;animation-delay:4s;animation-duration:12s}.circles li:nth-child(6){left:55%;width:70px;height:70px;animation-delay:9s;animation-duration:20s}.circles li:nth-child(7){left:35%;width:140px;height:140px;animation-delay:2s;animation-duration:32s}.circles li:nth-child(8){left:70%;width:40px;height:40px;animation-delay:12s;animation-duration:40s}.circles li:nth-child(9){left:5%;width:20px;height:20px;animation-delay:5s;animation-duration:30s}.circles li:nth-child(10){left:90%;width:55px;height:55px;animation-delay:7s;animation-duration:24s}@keyframes floatUp{0%{transform:translateY(0) rotate(0);opacity:.8}20%{opacity:1}80%{opacity:.7}to{transform:translateY(-110vh) rotate(540deg);opacity:0}}@keyframes pulse{0%{box-shadow:0 0 12px 2px rgba(var(--accent-rgb, 102, 126, 234),.1)}to{box-shadow:0 0 32px 10px rgba(var(--accent-rgb, 102, 126, 234),.28)}}.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}.clr-black{color:#000!important}.signup-input-container{padding:0 2rem}.fs-30-fw-600{font-size:30px;font-weight:600}.fs-20-fw-600{font-size:20px;font-weight:600}.fs-14-col-grey{font-size:14px;color:#979797}.fs-13{font-size:13px}.fs-14{font-size:14px}.password-input-container{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;border:1px solid rgba(0,0,0,.08);border-radius:12px;appearance:none;outline:none}.b-none{border:none!important}.password-text-container{padding-left:.5rem;font-size:13px;margin-bottom:.3rem;color:#000}.password-text-container img{width:15px}.password-text-container .password-config{font-size:13px;color:#686f78}.tabs{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border-radius:18px 15px 0 0;margin-bottom:2rem}.login-main-section .login-text{font-size:20px;font-weight:600}.tab{padding:1rem;font-size:clamp(13px,3.2vw,15px)!important;font-weight:600;text-align:center;cursor:pointer;background:#d9d9d9;border:none;letter-spacing:.01em;transition:background .2s,color .2s;-webkit-user-select:none;user-select:none;min-height:48px}.tab:hover{background:#cacaca}.tab.active{background:#1a1a1a;color:#fff}.otp-box{width:55px;height:55px;font-size:20px}h1{font-size:clamp(18px,4.5vw,22px);font-weight:600;color:#1a1a1a;text-align:center;margin-bottom:clamp(20px,5vw,28px);letter-spacing:-.01em}label{font-size:clamp(11px,2.8vw,13px);font-weight:500;color:#333}input[type=email],input[type=password],input[type=text]{width:100%;padding:clamp(10px,2.5vw,12px) clamp(10px,2.5vw,14px);border:1.5px solid #e0e0e0;border-radius:clamp(8px,2vw,12px);font-size:clamp(13px,3.2vw,14px);color:#1a1a1a;background:#fff;outline:none;transition:border-color .2s,box-shadow .2s;-webkit-text-size-adjust:100%}@media (max-width: 400px){input[type=email],input[type=password],input[type=text]{font-size:16px}}input[type=email]:focus,input[type=password]:focus,input[type=text]:focus{border-color:#888;box-shadow:0 0 0 3px #0000000f}input::placeholder{color:transparent}.forgot{display:block;text-align:right;font-size:clamp(11px,2.8vw,13px);font-weight:500;color:#1a1a1a;text-decoration:underline;text-underline-offset:2px;margin-top:clamp(6px,1.5vw,8px);cursor:pointer;touch-action:manipulation}.forgot:hover{color:#555}.submit-btn{display:block;width:100%;padding:clamp(13px,3.2vw,15px);margin-top:clamp(16px,4vw,24px);background:#c0bfbf;color:#fff;border:none;border-radius:50px;font-size:clamp(14px,3.5vw,15px);font-weight:600;cursor:pointer;letter-spacing:.01em;transition:background .2s;touch-action:manipulation;min-height:48px}.submit-btn:hover{background:#999}.submit-btn:active{background:#888}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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: i8$4.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: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthenticationRequiredComponent, decorators: [{
             type: Component,
@@ -10421,7 +10629,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         OverlayDirective,
                         SpacingAroundDirective,
                         ButtonEditorDirective
-                    ], 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\" [style.maxHeight.px]=\"\r\n        currentPage === 'LOGIN' ? 450 : 600\">\r\n        <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoCorner]=\"styles?.corners\">\r\n          <div class=\"tabs\">\r\n            <button class=\"tab\" id=\"tab-signup\" (click)=\"currentPage = 'SIGNUP'\"\r\n              [ngStyle]=\"{'background':currentPage === 'SIGNUP' ? accentBackground : ''}\" [style.color]=\"fontColor\">Sign\r\n              up</button>\r\n            <button class=\"tab\" id=\"tab-login\" (click)=\"currentPage = 'LOGIN'\"\r\n              [ngStyle]=\"{'background':currentPage === 'LOGIN' ? accentBackground : ''}\" [style.color]=\"fontColor\">Log\r\n              in</button>\r\n          </div>\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 class=\"d-flex text-center flex-column align-items-center justify-content-center mb-2 login-main-section\">\r\n    <p class=\"mb-0 clr-black login-text\">{{loginType === 'OTP' ? 'Login via OTP' : 'Login'}}</p>\r\n  </div>\r\n  <div class=\"login-input-section\">\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Email/Mobile</label>\r\n      <input type=\"text\" class=\"clr-black\" [(ngModel)]=\"emailOrNumber\" required=\"\"\r\n        placeholder=\"janedoe@gmail.com / 9876543210\" (ngModelChange)=\"onEmailOrNumberChange()\"\r\n        [style.borderColor]=\"!emailOrNumberCheck ? '' : 'red'\">\r\n    </div>\r\n    <div class=\"input-box mb-4\">\r\n      <div class=\"w-100\">\r\n        <div class=\"w-100 d-flex justify-content-between password-text-container\" *ngIf=\"loginType==='PASSWORD'\">\r\n          Password\r\n          <div *ngIf=\"!showPassword\" class=\"password-config d-flex align-items-center cursor-pointer\"\r\n            (click)=\"showPassword = true\"><img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/181720c1762866309854Icon_(3).svg\" alt=\"\">&nbsp;Show\r\n          </div>\r\n          <div class=\"password-config d-flex align-items-center cursor-pointer\" (click)=\"showPassword = false\"\r\n            *ngIf=\"showPassword\"><img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/994914c1762805529071Eye_off.svg\" alt=\"\">&nbsp;Hide\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex w-100 align-items-center justify-content-between mb-1 text-dark\"\r\n          *ngIf=\"loginType==='OTP' && !generateOtp\" style=\"font-size:12px\">OTP <span class=\"cursor-pointer text-nowrap\"\r\n            *ngIf=\"loginType==='OTP' && generateOtp === false\" (click)=\"resendOtp()\" style=\"font-size:11px\">Resend\r\n            Otp</span></div>\r\n        <ng-container *ngIf=\"loginType==='PASSWORD'\">\r\n          <div class=\"w-100 password-input-container\" [style.borderColor]=\"!passwordCheck ? '' : 'red'\">\r\n            <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\"\r\n              (ngModelChange)=\"onPasswordChange()\" class=\"w-90 b-none clr-black\" placeholder=\"Johndoe@1234\">\r\n          </div>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"loginType==='OTP'\">\r\n          <div class=\"d-flex align-items-center justify-content-between otp_input\" [ngClass]=\"{'gap-1': loginType==='OTP' &&\r\n              generateOtp===false}\" *ngIf=\"!generateOtp\">\r\n            <div class=\"d-flex gap-2 w-100 justify-content-between\">\r\n              <input *ngFor=\"let control of otpControls.controls; let i = index\" #otpInput\r\n                class=\"form-control text-center otp-box clr-black\" maxlength=\"1\" inputmode=\"numeric\"\r\n                [formControl]=\"control\" (input)=\"onInput(i)\" (keydown)=\"onKeyDown($event, i)\" />\r\n            </div>\r\n            <!-- <input class=\"w-100\" placeholder=\"1234\" [(ngModel)]=\"oneTimePassword\" type=\"number\"> -->\r\n          </div>\r\n        </ng-container>\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    <app-button-element [buttonContent]=\"data?.action?.buttons[1]?.content?.label?.length > 0 ? data?.action?.buttons[1]?.content: {\r\n          'label': 'Login' } \" (click)=\"login()\" *ngIf=\"!generateOtp\" [buttonStyle]=\"data?.action?.buttons[1]?.styles\"\r\n      [buttonId]=\"data?.action?.buttons[1]?.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [loading]=\"buttonLoading\" [isFullWidth]=\"true\"></app-button-element>\r\n    <!-- <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading && !generateOtp\" [buttonData]=\"button?.content\"\r\n      [buttonStyle]=\"button?.styles\" 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    <app-button-element [buttonContent]=\"data?.action?.buttons[2]?.content?.label?.length > 0 ? data?.action?.buttons[2]?.content: {\r\n          'label': 'Generate Otp'} \" (click)=\"getOTP()\" *ngIf=\"generateOtp\"\r\n      [buttonStyle]=\"data?.action?.buttons[2]?.styles\" [buttonId]=\"data?.action?.buttons[2]?.id\" [sectionId]=\"data?.id\"\r\n      [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [loading]=\"buttonLoading\" [isFullWidth]=\"true\"></app-button-element>\r\n    <!-- <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading && generateOtp\" [buttonData]=\"button?.content\"\r\n      [buttonStyle]=\"button?.styles\" 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)=\"getOTP()\">Generate Otp</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 ?? ''\">Loading...</button> -->\r\n\r\n\r\n    <div class=\"sign-up mt-3 d-flex align-items-center justify-content-end fs-13\" *ngIf=\"signUpEnabled\">\r\n      <span class=\"cursor-pointer text-dark\" (click)=\"loginAuthentication('OTP')\"\r\n        *ngIf=\"loginType==='PASSWORD';else loginWithPassword\">Login with\r\n        OTP</span>\r\n    </div>\r\n    <ng-template #loginWithPassword>\r\n      <span class=\"cursor-pointer text-dark\" (click)=\"loginAuthentication('PASSWORD')\">Login with\r\n        Password</span>\r\n    </ng-template>\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<ng-template #signInTemplate>\r\n  <div class=\"d-flex flex-column align-items-center justify-content-center mb-3\">\r\n    <p class=\"mb-0 fs-20-fw-600 clr-black\">Sign up</p>\r\n  </div>\r\n\r\n  <div class=\"d-flex w-100 signup-input-container flex-column\">\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Name</label>\r\n      <input type=\"text\" class=\"clr-black\" [(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\" class=\"clr-black\" [(ngModel)]=\"email\" 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=\"d-flex flex-column\">\r\n      <div class=\"input-box\">\r\n        <label for=\"\">Phone Number</label>\r\n        <input type=\"number\" class=\"clr-black\" [(ngModel)]=\"mobile\" (ngModelChange)=\"onMobileChange()\"\r\n          placeholder=\"9876543219\" [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        <div class=\"d-flex align-items-center justify-content-between password-text-container\"><label\r\n            for=\"\">Password</label>\r\n          <div *ngIf=\"!showPassword\" class=\"password-config d-flex align-items-center cursor-pointer\"\r\n            (click)=\"showPassword = true\"><img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/181720c1762866309854Icon_(3).svg\" alt=\"\">&nbsp;Show\r\n          </div>\r\n          <div class=\"password-config d-flex align-items-center cursor-pointer\" (click)=\"showPassword = false\"\r\n            *ngIf=\"showPassword\"><img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/994914c1762805529071Eye_off.svg\" alt=\"\">&nbsp;Hide\r\n          </div>\r\n        </div>\r\n        <div class=\"w-100 d-flex align-items-center\">\r\n          <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\" class=\"w-90 clr-black\"\r\n            placeholder=\"Janedoe@1234\" [style.borderColor]=\"!passwordCheck ? '' : 'red'\"\r\n            (ngModelChange)=\"onPasswordChange()\">\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    </div>\r\n    <app-button-element [buttonContent]=\"data?.action?.buttons[0]?.content?.label?.length > 0 ? data?.action?.buttons[0]?.content: {\r\n          'label': 'Create Account' } \" (click)=\"createAccount()\" [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n      [buttonId]=\"data?.action?.buttons[0]?.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [disabled]=\"!isEmailValid || !isPasswordValid || !userName\" [loading]=\"buttonLoading\"\r\n      [isFullWidth]=\"true\"></app-button-element>\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 text-secondary d-flex align-items-center justify-content-end \r\n    mt-3 fs-14 w-100 text-center \">Already have an account?&nbsp;<span (click)=\"currentPage = 'LOGIN'\"\r\n        class=\"cursor-pointer text-dark\">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}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.fa{font-family:\"Font Awesome 6 Free\"}.otp_input span{font-size:11px}.otp_input span:hover{text-decoration:underline}label,.eye{color:#000}.sign-up span:hover{text-decoration:underline}.eye{padding:6px;font-size:16px}.w-90{width:90%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-panel{width:450px;margin:2rem auto;background:#ffffff26;box-shadow:0 25px 50px -12px #00000040;backface-visibility:hidden}.login-input-section{padding:0 2rem}.panel{background:#fffffff2;padding:0 0 2rem;position:relative;transition:all .4s ease;margin:unset!important}.input-box{display:flex;flex-direction:column;margin-bottom:.75rem;position:relative;transform-style:preserve-3d;gap:5px}.input-box label{transform:translateZ(20px);margin-left:5px}.input-box input{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;border:1px solid rgba(0,0,0,.08);padding:.75rem;border-radius:12px;appearance:none;outline:none}.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}.clr-black{color:#000!important}.signup-input-container{padding:0 2rem}.fs-30-fw-600{font-size:30px;font-weight:600}.fs-20-fw-600{font-size:20px;font-weight:600}.fs-14-col-grey{font-size:14px;color:#979797}.fs-13{font-size:13px}.fs-14{font-size:14px}.password-input-container{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;border:1px solid rgba(0,0,0,.08);border-radius:12px;appearance:none;outline:none}.b-none{border:none!important}.password-text-container{padding-left:.5rem;font-size:13px;margin-bottom:.3rem;color:#000}.password-text-container img{width:15px}.password-text-container .password-config{font-size:13px;color:#686f78}.tabs{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border-radius:18px 15px 0 0;margin-bottom:2rem}.login-main-section .login-text{font-size:20px;font-weight:600}.tab{padding:1rem;font-size:clamp(13px,3.2vw,15px)!important;font-weight:600;text-align:center;cursor:pointer;background:#d9d9d9;border:none;letter-spacing:.01em;transition:background .2s,color .2s;-webkit-user-select:none;user-select:none;min-height:48px}.tab:hover{background:#cacaca}.tab.active{background:#1a1a1a;color:#fff}.otp-box{width:55px;height:55px;font-size:20px}h1{font-size:clamp(18px,4.5vw,22px);font-weight:600;color:#1a1a1a;text-align:center;margin-bottom:clamp(20px,5vw,28px);letter-spacing:-.01em}label{font-size:clamp(11px,2.8vw,13px);font-weight:500;color:#333}input[type=email],input[type=password],input[type=text]{width:100%;padding:clamp(10px,2.5vw,12px) clamp(10px,2.5vw,14px);border:1.5px solid #e0e0e0;border-radius:clamp(8px,2vw,12px);font-size:clamp(13px,3.2vw,14px);color:#1a1a1a;background:#fff;outline:none;transition:border-color .2s,box-shadow .2s;-webkit-text-size-adjust:100%}@media (max-width: 400px){input[type=email],input[type=password],input[type=text]{font-size:16px}}input[type=email]:focus,input[type=password]:focus,input[type=text]:focus{border-color:#888;box-shadow:0 0 0 3px #0000000f}input::placeholder{color:transparent}.forgot{display:block;text-align:right;font-size:clamp(11px,2.8vw,13px);font-weight:500;color:#1a1a1a;text-decoration:underline;text-underline-offset:2px;margin-top:clamp(6px,1.5vw,8px);cursor:pointer;touch-action:manipulation}.forgot:hover{color:#555}.submit-btn{display:block;width:100%;padding:clamp(13px,3.2vw,15px);margin-top:clamp(16px,4vw,24px);background:#c0bfbf;color:#fff;border:none;border-radius:50px;font-size:clamp(14px,3.5vw,15px);font-weight:600;cursor:pointer;letter-spacing:.01em;transition:background .2s;touch-action:manipulation;min-height:48px}.submit-btn:hover{background:#999}.submit-btn:active{background:#888}\n"] }]
+                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<section [id]=\"data?.id\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\n  <div [spacingAround]=\"stylesLayout\">\n    <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\n      <div class=\"area w-100\">\n        <ul class=\"circles\" [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\">\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n        </ul>\n      </div>\n\n      <!-- ===== SCREEN 1: PHONE NUMBER ===== -->\n      <div *ngIf=\"authScreen === 'PHONE'\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\"\n        [simpoCorner]=\"styles?.corners\">\n        <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoCorner]=\"styles?.corners\">\n\n          <div class=\"d-flex text-center flex-column align-items-center justify-content-center mb-2 login-main-section\"\n            style=\"padding: 1.5rem 2rem 0.5rem;\">\n            <p class=\"mb-0 clr-black login-text\">LOGIN OR SIGNUP</p>\n          </div>\n          <hr class=\"mx-0 my-0\" style=\"border-color: #e8e8e8;\">\n\n          <div class=\"login-input-section mt-4\">\n            <p class=\"text-center mb-3\" style=\"font-size:14px; color:#555;\">Unlock coupons, profile and much more</p>\n\n            <div class=\"input-box\">\n              <label for=\"auth-email-phone-input\">Email / Mobile Number</label>\n              <input id=\"auth-email-phone-input\" type=\"text\" class=\"clr-black\" [(ngModel)]=\"emailOrNumber\"\n                placeholder=\"janedoe@gmail.com / 9876543210\" (ngModelChange)=\"onEmailOrNumberChange()\"\n                [style.borderColor]=\"!emailOrNumberCheck ? '' : 'red'\" (keyup.enter)=\"sendOTP()\" />\n              <span class=\"f-12\" *ngIf=\"emailOrNumberCheck\" [style.color]=\"'red'\">Please enter a valid email or 10-digit\n                mobile number*</span>\n            </div>\n\n            <button class=\"send-btn gap-2 w-100 py-2\" [buttonData]=\"data?.action?.buttons[2]?.content\"\n              [buttonStyle]=\"data?.action?.buttons[2]?.styles\" simpoButtonDirective\n              [id]=\"data?.id+(data?.action?.buttons[2]?.id || '')\" [sectionId]=\"data?.id\"\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n              [appButtonEditor]=\"edit ?? false\" [buttonId]=\"data?.action?.buttons[2]?.id ?? ''\" (click)=\"sendOTP()\"\n              [disabled]=\"buttonLoading\">\n              <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"\n                *ngIf=\"buttonLoading\"></span>\n              {{ data?.action?.buttons[2]?.content?.label?.length > 0 ? data?.action?.buttons[2]?.content?.label : 'SEND\n              OTP' }}\n            </button>\n\n            <div class=\"mt-3 text-center\">\n              <span class=\"cursor-pointer clr-black fs-13\" style=\"font-weight:700; text-decoration:underline;\"\n                (click)=\"authScreen = 'PASSWORD'\">\n                Login with Password\n              </span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- ===== SCREEN 2: OTP VERIFICATION ===== -->\n      <div *ngIf=\"authScreen === 'OTP'\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\" [simpoCorner]=\"styles?.corners\">\n        <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoCorner]=\"styles?.corners\">\n\n          <div class=\"d-flex text-center flex-column align-items-center justify-content-center mb-2 login-main-section\"\n            style=\"padding: 1.5rem 2rem 0.5rem;\">\n            <p class=\"mb-0 clr-black login-text\">LOGIN OR SIGNUP</p>\n          </div>\n          <hr class=\"mx-0 my-0\" style=\"border-color: #e8e8e8;\">\n\n          <div class=\"login-input-section mt-4\">\n            <p class=\"text-center mb-3 clr-black\" style=\"font-size:14px;\">\n              Enter 6-digit OTP sent to {{emailOrNumber}}\n            </p>\n\n            <div class=\"d-flex align-items-center justify-content-between otp_input gap-1 mb-3\">\n              <div class=\"d-flex gap-2 w-100 justify-content-between\">\n                <input *ngFor=\"let control of otpControls.controls; let i = index\" #otpInput\n                  class=\"form-control text-center otp-box clr-black\" maxlength=\"1\" inputmode=\"numeric\"\n                  [formControl]=\"control\" (input)=\"onInput(i)\" (keydown)=\"onKeyDown($event, i)\" />\n              </div>\n            </div>\n\n            <div class=\"text-center mb-3\">\n              <span *ngIf=\"resendCountdown > 0\" class=\"clr-black fs-13\" style=\"font-weight:700; letter-spacing:0.04em;\">\n                RESEND IN &nbsp;{{formatCountdown(resendCountdown)}}\n              </span>\n              <span *ngIf=\"resendCountdown === 0\" class=\"cursor-pointer clr-black fs-13\"\n                style=\"font-weight:700; letter-spacing:0.04em; text-decoration:underline;\" (click)=\"resendOTPNew()\">\n                RESEND OTP\n              </span>\n            </div>\n\n            <button class=\"send-btn gap-2 w-100  py-2\" [buttonData]=\"data?.action?.buttons[1]?.content\"\n              [buttonStyle]=\"data?.action?.buttons[1]?.styles\" simpoButtonDirective\n              [id]=\"data?.id+(data?.action?.buttons[1]?.id || '')\" [sectionId]=\"data?.id\"\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n              [appButtonEditor]=\"edit ?? false\" [buttonId]=\"data?.action?.buttons[1]?.id ?? ''\" (click)=\"verifyOTPNew()\"\n              [disabled]=\"buttonLoading\">\n              <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"\n                *ngIf=\"buttonLoading\"></span>\n              {{ data?.action?.buttons[1]?.content?.label?.length > 0 ? data?.action?.buttons[1]?.content?.label :\n              'VERIFY OTP' }}\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <!-- ===== SCREEN 3: REGISTER ===== -->\n      <div *ngIf=\"authScreen === 'REGISTER'\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\"\n        [simpoCorner]=\"styles?.corners\">\n        <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoCorner]=\"styles?.corners\">\n\n          <div class=\"d-flex flex-column align-items-center justify-content-center mb-3\"\n            style=\"padding: 1.5rem 2rem 0.5rem;\">\n            <p class=\"mb-0 fs-20-fw-600 clr-black\">REGISTER</p>\n          </div>\n\n          <div class=\"d-flex w-100 signup-input-container flex-column\">\n            <div class=\"input-box\">\n              <label for=\"auth-fullname-input\">Full Name</label>\n              <input id=\"auth-fullname-input\" type=\"text\" class=\"clr-black\" [(ngModel)]=\"userName\"\n                placeholder=\"Jane Doe\">\n            </div>\n\n            <div class=\"input-box\">\n              <label for=\"auth-reg-phone-input\">Phone Number</label>\n              <div class=\"d-flex align-items-center w-100 password-input-container\">\n                <span class=\"clr-black\"\n                  style=\"font-size:14px; font-weight:500; padding: 0 8px 0 12px; white-space:nowrap;\">+91 |</span>\n                <input id=\"auth-reg-phone-input\" type=\"tel\" class=\"b-none clr-black w-90\" [(ngModel)]=\"phoneNumber\"\n                  placeholder=\"9876543210\" maxlength=\"10\" inputmode=\"numeric\" style=\"outline:none; font-size:14px;\" />\n              </div>\n            </div>\n\n            <div class=\"input-box\">\n              <label for=\"auth-email-input\">Email</label>\n              <input id=\"auth-email-input\" type=\"email\" class=\"clr-black\" [(ngModel)]=\"email\"\n                placeholder=\"janedoe@gmail.com\" (ngModelChange)=\"onEmailChange()\"\n                [style.borderColor]=\"!emailCheck ? '' : 'red'\">\n              <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid email*</span>\n            </div>\n\n            <div class=\"input-box\">\n              <label for=\"auth-reg-password-input\">Password</label>\n              <div class=\"password-input-container d-flex align-items-center w-100\" style=\"padding-right: 12px;\">\n                <input id=\"auth-reg-password-input\" [type]=\"passwordHidden ? 'password' : 'text'\"\n                  class=\"b-none clr-black w-100\" [(ngModel)]=\"password\" placeholder=\"Password\">\n                <mat-icon style=\"cursor: pointer; color: black; font-size: 20px; text-align: center\"\n                  (click)=\"passwordHidden = !passwordHidden\">\n                  {{passwordHidden ? 'visibility' : 'visibility_off'}}\n                </mat-icon>\n              </div>\n            </div>\n\n            <div class=\"input-box\">\n              <label for=\"auth-reg-conf-password-input\">Confirm Password</label>\n              <div class=\"password-input-container d-flex align-items-center w-100\" style=\"padding-right: 12px;\">\n                <input id=\"auth-reg-conf-password-input\" [type]=\"passwordHidden ? 'password' : 'text'\"\n                  class=\"b-none clr-black w-100\" [(ngModel)]=\"confPassword\" placeholder=\"Confirm Password\">\n              </div>\n            </div>\n\n            <button class=\"send-btn gap-2 w-100  py-2\" [buttonData]=\"data?.action?.buttons[0]?.content\"\n              [buttonStyle]=\"data?.action?.buttons[0]?.styles\" simpoButtonDirective\n              [id]=\"data?.id+(data?.action?.buttons[0]?.id || '')\" [sectionId]=\"data?.id\"\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n              [appButtonEditor]=\"edit ?? false\" [buttonId]=\"data?.action?.buttons[0]?.id ?? ''\" (click)=\"registerUser()\"\n              [disabled]=\"buttonLoading\">\n              <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"\n                *ngIf=\"buttonLoading\"></span>\n              {{ data?.action?.buttons[0]?.content?.label?.length > 0 ? data?.action?.buttons[0]?.content?.label :\n              'CONTINUE' }}\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <!-- ===== SCREEN 4: LOGIN WITH PASSWORD ===== -->\n      <div *ngIf=\"authScreen === 'PASSWORD'\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\"\n        [simpoCorner]=\"styles?.corners\">\n        <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoCorner]=\"styles?.corners\">\n\n          <div class=\"d-flex flex-column align-items-center justify-content-center mb-3\"\n            style=\"padding: 1.5rem 2rem 0.5rem;\">\n            <p class=\"mb-0 fs-20-fw-600 clr-black\">LOGIN</p>\n          </div>\n\n          <div class=\"d-flex w-100 signup-input-container flex-column\">\n\n            <div class=\"input-box\">\n              <label for=\"auth-pwd-email-input\">Email / Mobile Number</label>\n              <input id=\"auth-pwd-email-input\" type=\"text\" class=\"clr-black\" [(ngModel)]=\"emailOrNumber\"\n                placeholder=\"janedoe@gmail.com / 9876543210\" (ngModelChange)=\"onEmailOrNumberChange()\"\n                [style.borderColor]=\"!emailOrNumberCheck ? '' : 'red'\">\n              <span class=\"f-12\" *ngIf=\"emailOrNumberCheck\" [style.color]=\"'red'\">Please enter valid email or 10-digit\n                mobile number*</span>\n            </div>\n\n            <div class=\"input-box\">\n              <label for=\"auth-login-password-input\">Password</label>\n              <div class=\"password-input-container d-flex align-items-center w-100\" style=\"padding-right: 12px;\">\n                <input id=\"auth-login-password-input\" [type]=\"passwordHidden ? 'password' : 'text'\"\n                  class=\"b-none clr-black w-100\" [(ngModel)]=\"password\" placeholder=\"Password\"\n                  (keyup.enter)=\"loginWithPassword()\">\n                <mat-icon style=\"cursor: pointer; color: black; font-size: 20px; text-align: center\"\n                  (click)=\"passwordHidden = !passwordHidden\">\n                  {{passwordHidden ? 'visibility' : 'visibility_off'}}\n                </mat-icon>\n              </div>\n            </div>\n\n            <button class=\"send-btn gap-2 w-100  py-2\" [buttonData]=\"data?.action?.buttons[0]?.content\"\n              [buttonStyle]=\"data?.action?.buttons[0]?.styles\" simpoButtonDirective\n              [id]=\"data?.id+(data?.action?.buttons[0]?.id || '')\" [sectionId]=\"data?.id\"\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n              [appButtonEditor]=\"edit ?? false\" [buttonId]=\"data?.action?.buttons[0]?.id ?? ''\"\n              (click)=\"loginWithPassword()\" [disabled]=\"buttonLoading\">\n              <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"\n                *ngIf=\"buttonLoading\"></span>\n              {{ data?.action?.buttons[0]?.content?.label?.length > 0 ? data?.action?.buttons[0]?.content?.label :\n              'LOGIN' }}\n            </button>\n\n            <div class=\"mt-3 text-center\">\n              <span class=\"cursor-pointer clr-black fs-13\" style=\"font-weight:700; text-decoration:underline;\"\n                (click)=\"authScreen = 'PHONE'\">\n                Login with OTP\n              </span>\n            </div>\n\n          </div>\n        </div>\n      </div>\n\n    </div>\n  </div>\n\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n\n</section>", styles: [".total-container{position:relative;height:auto;perspective:1200px;overflow:hidden}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.fa{font-family:\"Font Awesome 6 Free\"}.otp_input span{font-size:11px}.otp_input span:hover{text-decoration:underline}label,.eye{color:#000}.sign-up span:hover{text-decoration:underline}.eye{padding:6px;font-size:16px}.w-90{width:90%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-panel{width:450px;margin:2rem auto;background:#ffffff26;box-shadow:0 25px 50px -12px #00000040;backface-visibility:hidden}.login-input-section{padding:0 2rem}.panel{background:#fffffff2;padding:0 0 2rem;position:relative;transition:all .4s ease;margin:unset!important}.input-box{display:flex;flex-direction:column;margin-bottom:.75rem;position:relative;transform-style:preserve-3d;gap:5px}.input-box label{transform:translateZ(20px);margin-left:5px}.input-box input{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;border:1px solid rgba(0,0,0,.08);padding:.75rem;border-radius:12px;appearance:none;outline:none}.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:radial-gradient(circle at 30% 30%,rgba(var(--accent-rgb, 102, 126, 234),.22),rgba(var(--accent-rgb, 102, 126, 234),.06));box-shadow:0 0 20px 4px rgba(var(--accent-rgb, 102, 126, 234),.15),inset 0 0 12px #ffffff1f;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:50%;border:1px solid rgba(var(--accent-rgb, 102, 126, 234),.18);animation:floatUp 25s linear infinite,pulse 4s ease-in-out infinite alternate;bottom:-150px}.circles li:nth-child(1){left:10%;width:90px;height:90px;animation-delay:0s;animation-duration:22s}.circles li:nth-child(2){left:25%;width:30px;height:30px;animation-delay:3s;animation-duration:14s}.circles li:nth-child(3){left:45%;width:60px;height:60px;animation-delay:6s;animation-duration:18s}.circles li:nth-child(4){left:65%;width:110px;height:110px;animation-delay:1s;animation-duration:28s}.circles li:nth-child(5){left:80%;width:25px;height:25px;animation-delay:4s;animation-duration:12s}.circles li:nth-child(6){left:55%;width:70px;height:70px;animation-delay:9s;animation-duration:20s}.circles li:nth-child(7){left:35%;width:140px;height:140px;animation-delay:2s;animation-duration:32s}.circles li:nth-child(8){left:70%;width:40px;height:40px;animation-delay:12s;animation-duration:40s}.circles li:nth-child(9){left:5%;width:20px;height:20px;animation-delay:5s;animation-duration:30s}.circles li:nth-child(10){left:90%;width:55px;height:55px;animation-delay:7s;animation-duration:24s}@keyframes floatUp{0%{transform:translateY(0) rotate(0);opacity:.8}20%{opacity:1}80%{opacity:.7}to{transform:translateY(-110vh) rotate(540deg);opacity:0}}@keyframes pulse{0%{box-shadow:0 0 12px 2px rgba(var(--accent-rgb, 102, 126, 234),.1)}to{box-shadow:0 0 32px 10px rgba(var(--accent-rgb, 102, 126, 234),.28)}}.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}.clr-black{color:#000!important}.signup-input-container{padding:0 2rem}.fs-30-fw-600{font-size:30px;font-weight:600}.fs-20-fw-600{font-size:20px;font-weight:600}.fs-14-col-grey{font-size:14px;color:#979797}.fs-13{font-size:13px}.fs-14{font-size:14px}.password-input-container{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;border:1px solid rgba(0,0,0,.08);border-radius:12px;appearance:none;outline:none}.b-none{border:none!important}.password-text-container{padding-left:.5rem;font-size:13px;margin-bottom:.3rem;color:#000}.password-text-container img{width:15px}.password-text-container .password-config{font-size:13px;color:#686f78}.tabs{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border-radius:18px 15px 0 0;margin-bottom:2rem}.login-main-section .login-text{font-size:20px;font-weight:600}.tab{padding:1rem;font-size:clamp(13px,3.2vw,15px)!important;font-weight:600;text-align:center;cursor:pointer;background:#d9d9d9;border:none;letter-spacing:.01em;transition:background .2s,color .2s;-webkit-user-select:none;user-select:none;min-height:48px}.tab:hover{background:#cacaca}.tab.active{background:#1a1a1a;color:#fff}.otp-box{width:55px;height:55px;font-size:20px}h1{font-size:clamp(18px,4.5vw,22px);font-weight:600;color:#1a1a1a;text-align:center;margin-bottom:clamp(20px,5vw,28px);letter-spacing:-.01em}label{font-size:clamp(11px,2.8vw,13px);font-weight:500;color:#333}input[type=email],input[type=password],input[type=text]{width:100%;padding:clamp(10px,2.5vw,12px) clamp(10px,2.5vw,14px);border:1.5px solid #e0e0e0;border-radius:clamp(8px,2vw,12px);font-size:clamp(13px,3.2vw,14px);color:#1a1a1a;background:#fff;outline:none;transition:border-color .2s,box-shadow .2s;-webkit-text-size-adjust:100%}@media (max-width: 400px){input[type=email],input[type=password],input[type=text]{font-size:16px}}input[type=email]:focus,input[type=password]:focus,input[type=text]:focus{border-color:#888;box-shadow:0 0 0 3px #0000000f}input::placeholder{color:transparent}.forgot{display:block;text-align:right;font-size:clamp(11px,2.8vw,13px);font-weight:500;color:#1a1a1a;text-decoration:underline;text-underline-offset:2px;margin-top:clamp(6px,1.5vw,8px);cursor:pointer;touch-action:manipulation}.forgot:hover{color:#555}.submit-btn{display:block;width:100%;padding:clamp(13px,3.2vw,15px);margin-top:clamp(16px,4vw,24px);background:#c0bfbf;color:#fff;border:none;border-radius:50px;font-size:clamp(14px,3.5vw,15px);font-weight:600;cursor:pointer;letter-spacing:.01em;transition:background .2s;touch-action:manipulation;min-height:48px}.submit-btn:hover{background:#999}.submit-btn:active{background:#888}\n"] }]
         }], 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: [{
                     type: Optional
                 }] }, { type: i8$3.MatBottomSheetRef, decorators: [{
@@ -12950,7 +13158,7 @@ class TestimonialFullwidthComponent extends BaseSection {
         return brightness < 128; // true = dark
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TestimonialFullwidthComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TestimonialFullwidthComponent, isStandalone: true, selector: "simpo-testimonial-fullwidth", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" [attr.style]=\"customClass\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoBorder]=\"style?.border\">\r\n        <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n            <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n                <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-bs-interval=\"10000\"\r\n                    data-bs-keyboard=\"false\">\r\n                    <!-- data-bs-ride=\"carousel\" -->\r\n                    <ol class=\"carousel-indicators\" [ngStyle]=\"{'color': getIndicatorColor()}\">\r\n                        <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n                            data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\">\r\n                        </li>\r\n                    </ol>\r\n                    <div class=\"carousel-inner content-side overflow-visible\">\r\n                        <div class=\"single_card carousel-item\"\r\n                            *ngFor=\"let item of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n                            <!-- this is testimonial cards start-->\r\n                            <div class=\"main-section\" [id]=\"data?.id\"\r\n                                [ngClass]=\"{'flex-lg-row-reverse' : style?.positionLayout?.value === 'right' , 'flex-lg-row' : style?.positionLayout?.value === 'left'}\">\r\n                                <div class=\"left\"\r\n                                    [ngClass]=\"{'setHeight' : screenWidth > 475 , 'mb-1': screenWidth <= 475}\">\r\n                                    <div class=\"heading\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                    <div class=\"subtext\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[1].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"right\">\r\n                                    <div class=\"testimonial-img\" [id]=\"data?.id\">\r\n                                        <img loading=\"lazy\" [src]=\"item?.image?.url\" class=\"person-img\"\r\n                                            [class]=\"data?.id+(item?.image?.id || '')\" [id]=\"data?.id\"\r\n                                            [simpoImageDirective]=\"style?.image\"\r\n                                            [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n                                            [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n                                            [sectionId]=\"data?.id\" *ngIf=\"item?.image?.url\">\r\n                                        <img class=\"person-img\" [id]=\"data?.id\" [simpoImageDirective]=\"style?.image\"\r\n                                            [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n                                            [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n                                            [sectionId]=\"data?.id\"\r\n                                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/753282c1776171503712178724315_3e307710-5dd9-4f94-a34b-c4971fd2d26b.jpg\"\r\n                                            *ngIf=\"!item?.image?.url\">\r\n                                        <div class=\"person-details\">\r\n                                            <div style=\"z-index: 100;\">\r\n                                                <!-- <div class=\"person-name\"\r\n                                                  [ngClass]=\"item.inputText[2].label === 'Person-Name' ? 'body-large' : 'heading-large '\"[innerHtml]=\"item.inputText[2].value | sanitizeHtml\">\r\n\r\n                                              </div> -->\r\n                                                <simpo-text-editor [(value)]=\"item.inputText[2].value\"\r\n                                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                                                <!-- <div class=\"person-type\"\r\n                                                  [ngClass]=\"item.inputText[3].label === 'Person-Type' ? 'body-large' : 'heading-large lh-2 mb-3'\"\r\n                                                  [innerHtml]=\"item.inputText[3].value | sanitizeHtml\">\r\n\r\n                                              </div> -->\r\n                                                <simpo-text-editor [(value)]=\"item.inputText[3].value\"\r\n                                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <!-- this is testimonial cards start-->\r\n                    </div>\r\n                    <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n                        data-bs-slide=\"prev\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n                        <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Previous</span>\r\n                    </a>\r\n                    <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n                        data-bs-slide=\"next\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n                        <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Next</span>\r\n                    </a>\r\n                </div>\r\n\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <ng-container *ngIf=\"style?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n            [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\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</div>", styles: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.overflow-visible{overflow:visible}.setHeight{height:40vh;max-height:40vh;overflow-y:scroll}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:space-between;margin:auto;align-items:center;width:80%}.left{width:65%;display:flex;flex-direction:column;justify-content:left}.heading{padding:20px 0 6px;width:90%}.heading-large{font-size:2.5rem;font-weight:700;line-height:3rem}.subtext{font-size:14px;font-weight:400;line-height:1.6;width:90%;margin-top:10px}.body-large{font-size:16px;font-weight:400;font-family:desc}.testimonial-img{position:relative}.right{width:28%}.person-img{width:100%;height:100%;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5  0 0 1 0 .708l-6 6a.5.5 0 0  1-.708-.708L10.293 8 4.646 2.354a.5.5  0 0 1 0-.708z'/%3e%3c/svg%3e\")}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 275px) and (max-width: 500px){.main-section{width:100%!important;flex-direction:column-reverse!important}.left{width:100%!important;display:flex;flex-direction:column}.heading,.subtext{width:100%!important}.right{width:95%!important;display:flex;flex-direction:column}.carousel-control-prev,.carousel-control-next{width:8%!important}.container-fluid{padding:unset!important}}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators li{background-color:currentColor;opacity:.5}.carousel-indicators .active{background-color:currentColor;opacity:1}@media screen and (min-width: 501px){.carousel-control-prev,.carousel-control-next{width:5%!important}}.previous-icon{position:absolute;height:45px}li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { 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", "type"], outputs: ["valueChange"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TestimonialFullwidthComponent, isStandalone: true, selector: "simpo-testimonial-fullwidth", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" [attr.style]=\"customClass\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoBorder]=\"style?.border\">\r\n        <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n            <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n                <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-bs-interval=\"10000\"\r\n                    data-bs-keyboard=\"false\">\r\n                    <!-- data-bs-ride=\"carousel\" -->\r\n                    <ol class=\"carousel-indicators\" [ngStyle]=\"{'color': getIndicatorColor()}\">\r\n                        <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n                            data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\">\r\n                        </li>\r\n                    </ol>\r\n                    <div class=\"carousel-inner content-side overflow-visible\">\r\n                        <div class=\"single_card carousel-item\"\r\n                            *ngFor=\"let item of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n                            <!-- this is testimonial cards start-->\r\n                            <div class=\"main-section\" [id]=\"data?.id\"\r\n                                [ngClass]=\"{'flex-lg-row-reverse' : style?.positionLayout?.value === 'left' , 'flex-lg-row' : style?.positionLayout?.value === 'right'}\">\r\n                                <div class=\"left\"\r\n                                    [ngClass]=\"{'setHeight' : screenWidth > 475 , 'mb-1': screenWidth <= 475}\">\r\n                                    <div class=\"heading\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                    <div class=\"subtext\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[1].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"right\">\r\n                                    <div class=\"testimonial-img\" [id]=\"data?.id\">\r\n                                        <img loading=\"lazy\" [src]=\"item?.image?.url\" class=\"person-img\"\r\n                                            [class]=\"data?.id+(item?.image?.id || '')\" [id]=\"data?.id\"\r\n                                            [simpoImageDirective]=\"style?.image\"\r\n                                            [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n                                            [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n                                            [sectionId]=\"data?.id\" *ngIf=\"item?.image?.url\">\r\n                                        <img class=\"person-img\" [id]=\"data?.id\" [simpoImageDirective]=\"style?.image\"\r\n                                            [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n                                            [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n                                            [sectionId]=\"data?.id\"\r\n                                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/753282c1776171503712178724315_3e307710-5dd9-4f94-a34b-c4971fd2d26b.jpg\"\r\n                                            *ngIf=\"!item?.image?.url\">\r\n                                        <div class=\"person-details\">\r\n                                            <div style=\"z-index: 100;\">\r\n                                                <!-- <div class=\"person-name\"\r\n                                                  [ngClass]=\"item.inputText[2].label === 'Person-Name' ? 'body-large' : 'heading-large '\"[innerHtml]=\"item.inputText[2].value | sanitizeHtml\">\r\n\r\n                                              </div> -->\r\n                                                <simpo-text-editor [(value)]=\"item.inputText[2].value\"\r\n                                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                                                <!-- <div class=\"person-type\"\r\n                                                  [ngClass]=\"item.inputText[3].label === 'Person-Type' ? 'body-large' : 'heading-large lh-2 mb-3'\"\r\n                                                  [innerHtml]=\"item.inputText[3].value | sanitizeHtml\">\r\n\r\n                                              </div> -->\r\n                                                <simpo-text-editor [(value)]=\"item.inputText[3].value\"\r\n                                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <!-- this is testimonial cards start-->\r\n                    </div>\r\n                    <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n                        data-bs-slide=\"prev\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n                        <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Previous</span>\r\n                    </a>\r\n                    <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n                        data-bs-slide=\"next\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n                        <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Next</span>\r\n                    </a>\r\n                </div>\r\n\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <ng-container *ngIf=\"style?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n            [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\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</div>", styles: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.overflow-visible{overflow:visible}.setHeight{height:40vh;max-height:40vh;overflow-y:scroll}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:space-between;margin:auto;align-items:center;width:80%}.left{width:65%;display:flex;flex-direction:column;justify-content:left}.heading{padding:20px 0 6px;width:90%}.heading-large{font-size:2.5rem;font-weight:700;line-height:3rem}.subtext{font-size:14px;font-weight:400;line-height:1.6;width:90%;margin-top:10px}.body-large{font-size:16px;font-weight:400;font-family:desc}.testimonial-img{position:relative}.right{width:28%}.person-img{width:100%;height:100%;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5  0 0 1 0 .708l-6 6a.5.5 0 0  1-.708-.708L10.293 8 4.646 2.354a.5.5  0 0 1 0-.708z'/%3e%3c/svg%3e\")}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 275px) and (max-width: 500px){.main-section{width:100%!important;flex-direction:column-reverse!important}.left{width:100%!important;display:flex;flex-direction:column}.heading,.subtext{width:100%!important}.right{width:95%!important;display:flex;flex-direction:column}.carousel-control-prev,.carousel-control-next{width:8%!important}.container-fluid{padding:unset!important}}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators li{background-color:currentColor;opacity:.5}.carousel-indicators .active{background-color:currentColor;opacity:1}@media screen and (min-width: 501px){.carousel-control-prev,.carousel-control-next{width:5%!important}}.previous-icon{position:absolute;height:45px}li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { 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", "type"], outputs: ["valueChange"] }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
 }
@@ -12984,7 +13192,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ImageEditorDirective,
                         ObjectPositionDirective,
                         SpacingHorizontalDirective
-                    ], template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" [attr.style]=\"customClass\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoBorder]=\"style?.border\">\r\n        <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n            <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n                <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-bs-interval=\"10000\"\r\n                    data-bs-keyboard=\"false\">\r\n                    <!-- data-bs-ride=\"carousel\" -->\r\n                    <ol class=\"carousel-indicators\" [ngStyle]=\"{'color': getIndicatorColor()}\">\r\n                        <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n                            data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\">\r\n                        </li>\r\n                    </ol>\r\n                    <div class=\"carousel-inner content-side overflow-visible\">\r\n                        <div class=\"single_card carousel-item\"\r\n                            *ngFor=\"let item of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n                            <!-- this is testimonial cards start-->\r\n                            <div class=\"main-section\" [id]=\"data?.id\"\r\n                                [ngClass]=\"{'flex-lg-row-reverse' : style?.positionLayout?.value === 'right' , 'flex-lg-row' : style?.positionLayout?.value === 'left'}\">\r\n                                <div class=\"left\"\r\n                                    [ngClass]=\"{'setHeight' : screenWidth > 475 , 'mb-1': screenWidth <= 475}\">\r\n                                    <div class=\"heading\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                    <div class=\"subtext\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[1].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"right\">\r\n                                    <div class=\"testimonial-img\" [id]=\"data?.id\">\r\n                                        <img loading=\"lazy\" [src]=\"item?.image?.url\" class=\"person-img\"\r\n                                            [class]=\"data?.id+(item?.image?.id || '')\" [id]=\"data?.id\"\r\n                                            [simpoImageDirective]=\"style?.image\"\r\n                                            [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n                                            [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n                                            [sectionId]=\"data?.id\" *ngIf=\"item?.image?.url\">\r\n                                        <img class=\"person-img\" [id]=\"data?.id\" [simpoImageDirective]=\"style?.image\"\r\n                                            [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n                                            [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n                                            [sectionId]=\"data?.id\"\r\n                                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/753282c1776171503712178724315_3e307710-5dd9-4f94-a34b-c4971fd2d26b.jpg\"\r\n                                            *ngIf=\"!item?.image?.url\">\r\n                                        <div class=\"person-details\">\r\n                                            <div style=\"z-index: 100;\">\r\n                                                <!-- <div class=\"person-name\"\r\n                                                  [ngClass]=\"item.inputText[2].label === 'Person-Name' ? 'body-large' : 'heading-large '\"[innerHtml]=\"item.inputText[2].value | sanitizeHtml\">\r\n\r\n                                              </div> -->\r\n                                                <simpo-text-editor [(value)]=\"item.inputText[2].value\"\r\n                                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                                                <!-- <div class=\"person-type\"\r\n                                                  [ngClass]=\"item.inputText[3].label === 'Person-Type' ? 'body-large' : 'heading-large lh-2 mb-3'\"\r\n                                                  [innerHtml]=\"item.inputText[3].value | sanitizeHtml\">\r\n\r\n                                              </div> -->\r\n                                                <simpo-text-editor [(value)]=\"item.inputText[3].value\"\r\n                                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <!-- this is testimonial cards start-->\r\n                    </div>\r\n                    <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n                        data-bs-slide=\"prev\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n                        <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Previous</span>\r\n                    </a>\r\n                    <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n                        data-bs-slide=\"next\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n                        <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Next</span>\r\n                    </a>\r\n                </div>\r\n\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <ng-container *ngIf=\"style?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n            [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\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</div>", styles: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.overflow-visible{overflow:visible}.setHeight{height:40vh;max-height:40vh;overflow-y:scroll}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:space-between;margin:auto;align-items:center;width:80%}.left{width:65%;display:flex;flex-direction:column;justify-content:left}.heading{padding:20px 0 6px;width:90%}.heading-large{font-size:2.5rem;font-weight:700;line-height:3rem}.subtext{font-size:14px;font-weight:400;line-height:1.6;width:90%;margin-top:10px}.body-large{font-size:16px;font-weight:400;font-family:desc}.testimonial-img{position:relative}.right{width:28%}.person-img{width:100%;height:100%;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5  0 0 1 0 .708l-6 6a.5.5 0 0  1-.708-.708L10.293 8 4.646 2.354a.5.5  0 0 1 0-.708z'/%3e%3c/svg%3e\")}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 275px) and (max-width: 500px){.main-section{width:100%!important;flex-direction:column-reverse!important}.left{width:100%!important;display:flex;flex-direction:column}.heading,.subtext{width:100%!important}.right{width:95%!important;display:flex;flex-direction:column}.carousel-control-prev,.carousel-control-next{width:8%!important}.container-fluid{padding:unset!important}}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators li{background-color:currentColor;opacity:.5}.carousel-indicators .active{background-color:currentColor;opacity:1}@media screen and (min-width: 501px){.carousel-control-prev,.carousel-control-next{width:5%!important}}.previous-icon{position:absolute;height:45px}li{list-style:none}\n"] }]
+                    ], template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" [attr.style]=\"customClass\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoBorder]=\"style?.border\">\r\n        <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n            <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n                <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-bs-interval=\"10000\"\r\n                    data-bs-keyboard=\"false\">\r\n                    <!-- data-bs-ride=\"carousel\" -->\r\n                    <ol class=\"carousel-indicators\" [ngStyle]=\"{'color': getIndicatorColor()}\">\r\n                        <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n                            data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\">\r\n                        </li>\r\n                    </ol>\r\n                    <div class=\"carousel-inner content-side overflow-visible\">\r\n                        <div class=\"single_card carousel-item\"\r\n                            *ngFor=\"let item of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n                            <!-- this is testimonial cards start-->\r\n                            <div class=\"main-section\" [id]=\"data?.id\"\r\n                                [ngClass]=\"{'flex-lg-row-reverse' : style?.positionLayout?.value === 'left' , 'flex-lg-row' : style?.positionLayout?.value === 'right'}\">\r\n                                <div class=\"left\"\r\n                                    [ngClass]=\"{'setHeight' : screenWidth > 475 , 'mb-1': screenWidth <= 475}\">\r\n                                    <div class=\"heading\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                    <div class=\"subtext\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[1].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"right\">\r\n                                    <div class=\"testimonial-img\" [id]=\"data?.id\">\r\n                                        <img loading=\"lazy\" [src]=\"item?.image?.url\" class=\"person-img\"\r\n                                            [class]=\"data?.id+(item?.image?.id || '')\" [id]=\"data?.id\"\r\n                                            [simpoImageDirective]=\"style?.image\"\r\n                                            [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n                                            [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n                                            [sectionId]=\"data?.id\" *ngIf=\"item?.image?.url\">\r\n                                        <img class=\"person-img\" [id]=\"data?.id\" [simpoImageDirective]=\"style?.image\"\r\n                                            [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n                                            [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n                                            [sectionId]=\"data?.id\"\r\n                                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/753282c1776171503712178724315_3e307710-5dd9-4f94-a34b-c4971fd2d26b.jpg\"\r\n                                            *ngIf=\"!item?.image?.url\">\r\n                                        <div class=\"person-details\">\r\n                                            <div style=\"z-index: 100;\">\r\n                                                <!-- <div class=\"person-name\"\r\n                                                  [ngClass]=\"item.inputText[2].label === 'Person-Name' ? 'body-large' : 'heading-large '\"[innerHtml]=\"item.inputText[2].value | sanitizeHtml\">\r\n\r\n                                              </div> -->\r\n                                                <simpo-text-editor [(value)]=\"item.inputText[2].value\"\r\n                                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                                                <!-- <div class=\"person-type\"\r\n                                                  [ngClass]=\"item.inputText[3].label === 'Person-Type' ? 'body-large' : 'heading-large lh-2 mb-3'\"\r\n                                                  [innerHtml]=\"item.inputText[3].value | sanitizeHtml\">\r\n\r\n                                              </div> -->\r\n                                                <simpo-text-editor [(value)]=\"item.inputText[3].value\"\r\n                                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <!-- this is testimonial cards start-->\r\n                    </div>\r\n                    <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n                        data-bs-slide=\"prev\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n                        <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Previous</span>\r\n                    </a>\r\n                    <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n                        data-bs-slide=\"next\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n                        <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">Next</span>\r\n                    </a>\r\n                </div>\r\n\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <ng-container *ngIf=\"style?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n            [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\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</div>", styles: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.overflow-visible{overflow:visible}.setHeight{height:40vh;max-height:40vh;overflow-y:scroll}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:space-between;margin:auto;align-items:center;width:80%}.left{width:65%;display:flex;flex-direction:column;justify-content:left}.heading{padding:20px 0 6px;width:90%}.heading-large{font-size:2.5rem;font-weight:700;line-height:3rem}.subtext{font-size:14px;font-weight:400;line-height:1.6;width:90%;margin-top:10px}.body-large{font-size:16px;font-weight:400;font-family:desc}.testimonial-img{position:relative}.right{width:28%}.person-img{width:100%;height:100%;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5  0 0 1 0 .708l-6 6a.5.5 0 0  1-.708-.708L10.293 8 4.646 2.354a.5.5  0 0 1 0-.708z'/%3e%3c/svg%3e\")}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 275px) and (max-width: 500px){.main-section{width:100%!important;flex-direction:column-reverse!important}.left{width:100%!important;display:flex;flex-direction:column}.heading,.subtext{width:100%!important}.right{width:95%!important;display:flex;flex-direction:column}.carousel-control-prev,.carousel-control-next{width:8%!important}.container-fluid{padding:unset!important}}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators li{background-color:currentColor;opacity:.5}.carousel-indicators .active{background-color:currentColor;opacity:1}@media screen and (min-width: 501px){.carousel-control-prev,.carousel-control-next{width:5%!important}}.previous-icon{position:absolute;height:45px}li{list-style:none}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -16749,10 +16957,10 @@ class NewTestimonialsComponent extends BaseSection {
         return { ...this.styles?.layout };
     }
     getImageData() {
-        return this.content?.listItem.data[this?.idx]?.image;
+        return this.content?.listItem.data[this.idx]?.image;
     }
     getImageUrl() {
-        return this.content?.listItem?.data[this?.idx]?.image?.url;
+        return this.content?.listItem?.data[this.idx]?.image?.url;
     }
     getImageType() {
         if (this.content?.listItem?.data[this?.idx]?.image?.url?.includes('.mp4'))
@@ -16816,7 +17024,7 @@ class NewTestimonialsComponent extends BaseSection {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewTestimonialsComponent, deps: [{ token: EventsService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NewTestimonialsComponent, isStandalone: true, selector: "simpo-new-testimonials", inputs: { data: "data", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor", index: "index" }, host: { listeners: { "window: resize": "getScreenSize($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "carouselInner", first: true, predicate: ["carouselInner"], descendants: true }, { propertyName: "carouselItems", predicate: ["carouselItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\" [simpoBorder]=\"styles?.border\" [id]=\"data?.id\">\r\n        <div class=\"parent-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoBackground]=\"styles?.background\">\r\n            <div class=\"d-flex flex-column\" [simpoOverlay]=\"styles?.background\" [simpoLayout]=\"styles?.layout\"\r\n                [id]=\"data?.id\">\r\n                <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n                    <ng-container *ngFor=\"let text of content?.inputText\">\r\n                        <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                    </ng-container>\r\n                </div>\r\n                <div class=\"list-items mt-3 d-flex gap-3\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\"\r\n                    [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\"\r\n                    [class.flex-column]=\"screenWidth < 475\">\r\n                    <div class=\"image-container w-35 height-50\" [class.w-100]=\"screenWidth < 475\" [id]=\"data?.id\"\r\n                        [class.h-30]=\"screenWidth < 475\" [class.bg-black]=\"getImageType() == 'Video'\"\r\n                        [simpoCorner]=\"styles?.corners\">\r\n                        <ng-container>\r\n                            <ng-container *ngIf=\"getImageType() == 'Image'\">\r\n                                <img [src]=\"getImageUrl()\" alt=\"Selected Image\" class=\"w-100 h-100\"\r\n                                    [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n                                    [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\">\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"getImageType() == 'Video'\">\r\n                                <video [src]=\"getImageUrl()\" class=\"w-100 h-100\" [simpoCorner]=\"styles?.corners\"\r\n                                    [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n                                    controls></video>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div id=\"carouselExampleIndicators\" data-bs-keyboard=\"false\"\r\n                        class=\"carousel slide w-65 d-flex flex-column\"\r\n                        [simpoContentAlignment]=\"styles?.contentAlignment\" [class.w-100]=\"screenWidth < 475\">\r\n                        <div class=\"carousel-inner overflow-unset\" [class.mb-6]=\"screenWidth < 475\" #carouselInner>\r\n                            <ng-container *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                                <div class=\"carousel-item h-100\" [ngClass]=\"{'active': i === 0}\" #carouselItem>\r\n                                    <div class=\"quote-image mb-2\">\r\n                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"31\"\r\n                                            viewBox=\"0 0 36 31\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M35.3998 3.29993C35.5998 3.09993 35.7998 2.69993 35.5998 2.29993C35.3998 2.09993 34.9998 1.69993 34.5998 0.899925C33.9998 0.699925 33.5998 0.699926 32.9998 1.09993C25.3998 5.89993 21.1998 11.4999 20.3998 17.8999C18.9998 27.8999 27.9998 32.6999 32.5998 28.2999C37.1998 23.8999 34.3998 18.2999 31.1998 16.6999C27.9998 15.0999 25.9998 15.6999 26.1998 13.6999C26.5998 11.6999 31.1998 6.09993 35.3998 3.29993ZM14.7998 1.09993C14.1998 0.699926 13.5998 0.699926 13.1998 1.09993C5.59983 5.89993 1.39983 11.4999 0.599832 18.0999C-0.800168 28.0999 8.19983 32.8999 12.7998 28.4999C17.3998 24.0999 14.5998 18.4999 11.3998 16.8999C7.99983 15.4999 5.99983 16.0999 6.39983 13.8999C6.79983 11.8999 11.3998 6.29993 15.5998 3.49993C15.7998 3.29993 15.9998 2.89993 15.7998 2.49993C15.5998 2.29993 15.1998 1.89993 14.7998 1.09993Z\"\r\n                                                [attr.fill]=\"styles?.background?.accentColor\" />\r\n                                        </svg>\r\n                                    </div>\r\n                                    <div class=\"item mb-3\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div class=\"prev-next d-flex align-items-center justify-content-between\">\r\n                            <div class=\"d-flex align-items-center gap-2\">\r\n                                <div class=\"carousel-control-prev\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n                                    data-bs-slide=\"prev\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                                    (click)=\"idx = (idx - 1 < 0 ? getLength() - 1 : idx - 1)\">\r\n                                    <mat-icon>keyboard_arrow_left</mat-icon>\r\n                                </div>\r\n\r\n                                <div class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n                                    data-bs-slide=\"next\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                                    (click)=\"idx = (idx + 1 >= getLength() ? 0 : idx + 1)\">\r\n                                    <mat-icon>keyboard_arrow_right</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                            <ng-container *ngIf=\"data?.action?.display\">\r\n                                <div class=\"d-flex\">\r\n                                    <app-button-element [buttonContent]=\"data?.action?.buttons[0]?.content \"\r\n                                        [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n                                        [buttonId]=\"data?.action?.buttons[0]?.id\" [edit]=\"edit\" [sectionId]=\"data?.id\"\r\n                                        [color]=\"data?.styles?.background?.accentColor\"\r\n                                        [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n            [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-container{position:relative;height:auto}.bg-black{background:#000}.carousel-control-prev,.carousel-control-next{position:unset!important;width:30px;border-radius:50%!important;height:30px}.w-35{width:35%!important}.w-65{width:65%!important}.image-container{z-index:100}.prev-next{width:100%}.overflow-visible{overflow:visible!important}.overflow-unset{overflow:unset!important}@media screen and (max-width: 475px){.list-items{flex-direction:column!important}.h-30{height:30vh!important}}.height-50{height:50vh}.w-100{width:100%!important}.mb-6{margin-bottom:2.5rem!important}.flex-column{flex-direction:column!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NewTestimonialsComponent, isStandalone: true, selector: "simpo-new-testimonials", inputs: { data: "data", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor", index: "index" }, host: { listeners: { "window: resize": "getScreenSize($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "carouselInner", first: true, predicate: ["carouselInner"], descendants: true }, { propertyName: "carouselItems", predicate: ["carouselItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\" [simpoBorder]=\"styles?.border\" [id]=\"data?.id\">\r\n        <div class=\"parent-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoBackground]=\"styles?.background\">\r\n            <div class=\"d-flex flex-column\" [simpoOverlay]=\"styles?.background\" [simpoLayout]=\"styles?.layout\"\r\n                [id]=\"data?.id\">\r\n                <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n                    <ng-container *ngFor=\"let text of content?.inputText\">\r\n                        <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                    </ng-container>\r\n                </div>\r\n                <div class=\"list-items mt-3 d-flex gap-3\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\"\r\n                    [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\"\r\n                    [class.flex-column]=\"screenWidth < 475\">\r\n                    <div class=\"image-container w-35 height-50\" [class.w-100]=\"screenWidth < 475\" [id]=\"data?.id\"\r\n                        [class.h-30]=\"screenWidth < 475\" [class.bg-black]=\"getImageType() == 'Video'\"\r\n                        [simpoCorner]=\"styles?.corners\">\r\n                        <ng-container>\r\n                            <ng-container *ngIf=\"getImageType() == 'Image'\">\r\n                                <img loading=\"lazy\" class=\"w-100 h-100\" [src]=\"getImageUrl()\" alt=\"Selected Image\"\r\n                                    [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\" loading=\"lazy\"\r\n                                    [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\"\r\n                                    [sectionId]=\"data?.id\">\r\n                                <!-- <img [src]=\"getImageUrl()\" alt=\"Selected Image\" class=\"w-100 h-100\"\r\n                                    [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n                                    [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"> -->\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"getImageType() == 'Video'\">\r\n                                <video [src]=\"getImageUrl()\" class=\"w-100 h-100\" [simpoCorner]=\"styles?.corners\"\r\n                                    [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n                                    controls></video>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div id=\"carouselExampleIndicators\" data-bs-keyboard=\"false\"\r\n                        class=\"carousel slide w-65 d-flex flex-column\"\r\n                        [simpoContentAlignment]=\"styles?.contentAlignment\" [class.w-100]=\"screenWidth < 475\">\r\n                        <div class=\"carousel-inner overflow-unset\" [class.mb-6]=\"screenWidth < 475\" #carouselInner>\r\n                            <ng-container *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                                <div class=\"carousel-item h-100\" [ngClass]=\"{'active': i === 0}\" #carouselItem>\r\n                                    <div class=\"quote-image mb-2\">\r\n                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"31\"\r\n                                            viewBox=\"0 0 36 31\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M35.3998 3.29993C35.5998 3.09993 35.7998 2.69993 35.5998 2.29993C35.3998 2.09993 34.9998 1.69993 34.5998 0.899925C33.9998 0.699925 33.5998 0.699926 32.9998 1.09993C25.3998 5.89993 21.1998 11.4999 20.3998 17.8999C18.9998 27.8999 27.9998 32.6999 32.5998 28.2999C37.1998 23.8999 34.3998 18.2999 31.1998 16.6999C27.9998 15.0999 25.9998 15.6999 26.1998 13.6999C26.5998 11.6999 31.1998 6.09993 35.3998 3.29993ZM14.7998 1.09993C14.1998 0.699926 13.5998 0.699926 13.1998 1.09993C5.59983 5.89993 1.39983 11.4999 0.599832 18.0999C-0.800168 28.0999 8.19983 32.8999 12.7998 28.4999C17.3998 24.0999 14.5998 18.4999 11.3998 16.8999C7.99983 15.4999 5.99983 16.0999 6.39983 13.8999C6.79983 11.8999 11.3998 6.29993 15.5998 3.49993C15.7998 3.29993 15.9998 2.89993 15.7998 2.49993C15.5998 2.29993 15.1998 1.89993 14.7998 1.09993Z\"\r\n                                                [attr.fill]=\"styles?.background?.accentColor\" />\r\n                                        </svg>\r\n                                    </div>\r\n                                    <div class=\"item mb-3\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div class=\"prev-next d-flex align-items-center justify-content-between\">\r\n                            <div class=\"d-flex align-items-center gap-2\">\r\n                                <div class=\"carousel-control-prev\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n                                    data-bs-slide=\"prev\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                                    (click)=\"idx = (idx - 1 < 0 ? getLength() - 1 : idx - 1)\">\r\n                                    <mat-icon>keyboard_arrow_left</mat-icon>\r\n                                </div>\r\n\r\n                                <div class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n                                    data-bs-slide=\"next\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                                    (click)=\"idx = (idx + 1 >= getLength() ? 0 : idx + 1)\">\r\n                                    <mat-icon>keyboard_arrow_right</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                            <ng-container *ngIf=\"data?.action?.display\">\r\n                                <div class=\"d-flex\">\r\n                                    <app-button-element [buttonContent]=\"data?.action?.buttons[0]?.content \"\r\n                                        [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n                                        [buttonId]=\"data?.action?.buttons[0]?.id\" [edit]=\"edit\" [sectionId]=\"data?.id\"\r\n                                        [color]=\"data?.styles?.background?.accentColor\"\r\n                                        [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n            [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-container{position:relative;height:auto}.bg-black{background:#000}.carousel-control-prev,.carousel-control-next{position:unset!important;width:30px;border-radius:50%!important;height:30px}.w-35{width:35%!important}.w-65{width:65%!important}.image-container{z-index:100}.prev-next{width:100%}.overflow-visible{overflow:visible!important}.overflow-unset{overflow:unset!important}@media screen and (max-width: 475px){.list-items{flex-direction:column!important}.h-30{height:30vh!important}}.height-50{height:50vh}.w-100{width:100%!important}.mb-6{margin-bottom:2.5rem!important}.flex-column{flex-direction:column!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 
                 // directives
                 SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { 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: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "component", type: 
                 // components
@@ -16853,7 +17061,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         TextEditorComponent,
                         SimpoButtonComponent,
                         ImageEditorDirective,
-                    ], template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\" [simpoBorder]=\"styles?.border\" [id]=\"data?.id\">\r\n        <div class=\"parent-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoBackground]=\"styles?.background\">\r\n            <div class=\"d-flex flex-column\" [simpoOverlay]=\"styles?.background\" [simpoLayout]=\"styles?.layout\"\r\n                [id]=\"data?.id\">\r\n                <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n                    <ng-container *ngFor=\"let text of content?.inputText\">\r\n                        <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                    </ng-container>\r\n                </div>\r\n                <div class=\"list-items mt-3 d-flex gap-3\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\"\r\n                    [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\"\r\n                    [class.flex-column]=\"screenWidth < 475\">\r\n                    <div class=\"image-container w-35 height-50\" [class.w-100]=\"screenWidth < 475\" [id]=\"data?.id\"\r\n                        [class.h-30]=\"screenWidth < 475\" [class.bg-black]=\"getImageType() == 'Video'\"\r\n                        [simpoCorner]=\"styles?.corners\">\r\n                        <ng-container>\r\n                            <ng-container *ngIf=\"getImageType() == 'Image'\">\r\n                                <img [src]=\"getImageUrl()\" alt=\"Selected Image\" class=\"w-100 h-100\"\r\n                                    [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n                                    [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\">\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"getImageType() == 'Video'\">\r\n                                <video [src]=\"getImageUrl()\" class=\"w-100 h-100\" [simpoCorner]=\"styles?.corners\"\r\n                                    [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n                                    controls></video>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div id=\"carouselExampleIndicators\" data-bs-keyboard=\"false\"\r\n                        class=\"carousel slide w-65 d-flex flex-column\"\r\n                        [simpoContentAlignment]=\"styles?.contentAlignment\" [class.w-100]=\"screenWidth < 475\">\r\n                        <div class=\"carousel-inner overflow-unset\" [class.mb-6]=\"screenWidth < 475\" #carouselInner>\r\n                            <ng-container *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                                <div class=\"carousel-item h-100\" [ngClass]=\"{'active': i === 0}\" #carouselItem>\r\n                                    <div class=\"quote-image mb-2\">\r\n                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"31\"\r\n                                            viewBox=\"0 0 36 31\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M35.3998 3.29993C35.5998 3.09993 35.7998 2.69993 35.5998 2.29993C35.3998 2.09993 34.9998 1.69993 34.5998 0.899925C33.9998 0.699925 33.5998 0.699926 32.9998 1.09993C25.3998 5.89993 21.1998 11.4999 20.3998 17.8999C18.9998 27.8999 27.9998 32.6999 32.5998 28.2999C37.1998 23.8999 34.3998 18.2999 31.1998 16.6999C27.9998 15.0999 25.9998 15.6999 26.1998 13.6999C26.5998 11.6999 31.1998 6.09993 35.3998 3.29993ZM14.7998 1.09993C14.1998 0.699926 13.5998 0.699926 13.1998 1.09993C5.59983 5.89993 1.39983 11.4999 0.599832 18.0999C-0.800168 28.0999 8.19983 32.8999 12.7998 28.4999C17.3998 24.0999 14.5998 18.4999 11.3998 16.8999C7.99983 15.4999 5.99983 16.0999 6.39983 13.8999C6.79983 11.8999 11.3998 6.29993 15.5998 3.49993C15.7998 3.29993 15.9998 2.89993 15.7998 2.49993C15.5998 2.29993 15.1998 1.89993 14.7998 1.09993Z\"\r\n                                                [attr.fill]=\"styles?.background?.accentColor\" />\r\n                                        </svg>\r\n                                    </div>\r\n                                    <div class=\"item mb-3\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div class=\"prev-next d-flex align-items-center justify-content-between\">\r\n                            <div class=\"d-flex align-items-center gap-2\">\r\n                                <div class=\"carousel-control-prev\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n                                    data-bs-slide=\"prev\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                                    (click)=\"idx = (idx - 1 < 0 ? getLength() - 1 : idx - 1)\">\r\n                                    <mat-icon>keyboard_arrow_left</mat-icon>\r\n                                </div>\r\n\r\n                                <div class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n                                    data-bs-slide=\"next\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                                    (click)=\"idx = (idx + 1 >= getLength() ? 0 : idx + 1)\">\r\n                                    <mat-icon>keyboard_arrow_right</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                            <ng-container *ngIf=\"data?.action?.display\">\r\n                                <div class=\"d-flex\">\r\n                                    <app-button-element [buttonContent]=\"data?.action?.buttons[0]?.content \"\r\n                                        [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n                                        [buttonId]=\"data?.action?.buttons[0]?.id\" [edit]=\"edit\" [sectionId]=\"data?.id\"\r\n                                        [color]=\"data?.styles?.background?.accentColor\"\r\n                                        [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n            [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-container{position:relative;height:auto}.bg-black{background:#000}.carousel-control-prev,.carousel-control-next{position:unset!important;width:30px;border-radius:50%!important;height:30px}.w-35{width:35%!important}.w-65{width:65%!important}.image-container{z-index:100}.prev-next{width:100%}.overflow-visible{overflow:visible!important}.overflow-unset{overflow:unset!important}@media screen and (max-width: 475px){.list-items{flex-direction:column!important}.h-30{height:30vh!important}}.height-50{height:50vh}.w-100{width:100%!important}.mb-6{margin-bottom:2.5rem!important}.flex-column{flex-direction:column!important}\n"] }]
+                    ], template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\" [simpoBorder]=\"styles?.border\" [id]=\"data?.id\">\r\n        <div class=\"parent-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoBackground]=\"styles?.background\">\r\n            <div class=\"d-flex flex-column\" [simpoOverlay]=\"styles?.background\" [simpoLayout]=\"styles?.layout\"\r\n                [id]=\"data?.id\">\r\n                <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n                    <ng-container *ngFor=\"let text of content?.inputText\">\r\n                        <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                    </ng-container>\r\n                </div>\r\n                <div class=\"list-items mt-3 d-flex gap-3\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\"\r\n                    [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\"\r\n                    [class.flex-column]=\"screenWidth < 475\">\r\n                    <div class=\"image-container w-35 height-50\" [class.w-100]=\"screenWidth < 475\" [id]=\"data?.id\"\r\n                        [class.h-30]=\"screenWidth < 475\" [class.bg-black]=\"getImageType() == 'Video'\"\r\n                        [simpoCorner]=\"styles?.corners\">\r\n                        <ng-container>\r\n                            <ng-container *ngIf=\"getImageType() == 'Image'\">\r\n                                <img loading=\"lazy\" class=\"w-100 h-100\" [src]=\"getImageUrl()\" alt=\"Selected Image\"\r\n                                    [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\" loading=\"lazy\"\r\n                                    [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\"\r\n                                    [sectionId]=\"data?.id\">\r\n                                <!-- <img [src]=\"getImageUrl()\" alt=\"Selected Image\" class=\"w-100 h-100\"\r\n                                    [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n                                    [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"> -->\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"getImageType() == 'Video'\">\r\n                                <video [src]=\"getImageUrl()\" class=\"w-100 h-100\" [simpoCorner]=\"styles?.corners\"\r\n                                    [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n                                    controls></video>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div id=\"carouselExampleIndicators\" data-bs-keyboard=\"false\"\r\n                        class=\"carousel slide w-65 d-flex flex-column\"\r\n                        [simpoContentAlignment]=\"styles?.contentAlignment\" [class.w-100]=\"screenWidth < 475\">\r\n                        <div class=\"carousel-inner overflow-unset\" [class.mb-6]=\"screenWidth < 475\" #carouselInner>\r\n                            <ng-container *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                                <div class=\"carousel-item h-100\" [ngClass]=\"{'active': i === 0}\" #carouselItem>\r\n                                    <div class=\"quote-image mb-2\">\r\n                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"31\"\r\n                                            viewBox=\"0 0 36 31\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M35.3998 3.29993C35.5998 3.09993 35.7998 2.69993 35.5998 2.29993C35.3998 2.09993 34.9998 1.69993 34.5998 0.899925C33.9998 0.699925 33.5998 0.699926 32.9998 1.09993C25.3998 5.89993 21.1998 11.4999 20.3998 17.8999C18.9998 27.8999 27.9998 32.6999 32.5998 28.2999C37.1998 23.8999 34.3998 18.2999 31.1998 16.6999C27.9998 15.0999 25.9998 15.6999 26.1998 13.6999C26.5998 11.6999 31.1998 6.09993 35.3998 3.29993ZM14.7998 1.09993C14.1998 0.699926 13.5998 0.699926 13.1998 1.09993C5.59983 5.89993 1.39983 11.4999 0.599832 18.0999C-0.800168 28.0999 8.19983 32.8999 12.7998 28.4999C17.3998 24.0999 14.5998 18.4999 11.3998 16.8999C7.99983 15.4999 5.99983 16.0999 6.39983 13.8999C6.79983 11.8999 11.3998 6.29993 15.5998 3.49993C15.7998 3.29993 15.9998 2.89993 15.7998 2.49993C15.5998 2.29993 15.1998 1.89993 14.7998 1.09993Z\"\r\n                                                [attr.fill]=\"styles?.background?.accentColor\" />\r\n                                        </svg>\r\n                                    </div>\r\n                                    <div class=\"item mb-3\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div class=\"prev-next d-flex align-items-center justify-content-between\">\r\n                            <div class=\"d-flex align-items-center gap-2\">\r\n                                <div class=\"carousel-control-prev\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n                                    data-bs-slide=\"prev\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                                    (click)=\"idx = (idx - 1 < 0 ? getLength() - 1 : idx - 1)\">\r\n                                    <mat-icon>keyboard_arrow_left</mat-icon>\r\n                                </div>\r\n\r\n                                <div class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n                                    data-bs-slide=\"next\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                                    (click)=\"idx = (idx + 1 >= getLength() ? 0 : idx + 1)\">\r\n                                    <mat-icon>keyboard_arrow_right</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                            <ng-container *ngIf=\"data?.action?.display\">\r\n                                <div class=\"d-flex\">\r\n                                    <app-button-element [buttonContent]=\"data?.action?.buttons[0]?.content \"\r\n                                        [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n                                        [buttonId]=\"data?.action?.buttons[0]?.id\" [edit]=\"edit\" [sectionId]=\"data?.id\"\r\n                                        [color]=\"data?.styles?.background?.accentColor\"\r\n                                        [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n            [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-container{position:relative;height:auto}.bg-black{background:#000}.carousel-control-prev,.carousel-control-next{position:unset!important;width:30px;border-radius:50%!important;height:30px}.w-35{width:35%!important}.w-65{width:65%!important}.image-container{z-index:100}.prev-next{width:100%}.overflow-visible{overflow:visible!important}.overflow-unset{overflow:unset!important}@media screen and (max-width: 475px){.list-items{flex-direction:column!important}.h-30{height:30vh!important}}.height-50{height:50vh}.w-100{width:100%!important}.mb-6{margin-bottom:2.5rem!important}.flex-column{flex-direction:column!important}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: i0.Renderer2 }], propDecorators: { data: [{
                 type: Input
             }], edit: [{