simpo-component-library 2.1.63 → 2.1.64

Sign up to get free protection for your applications and to get access to all the features.
Files changed (32) hide show
  1. package/esm2022/lib/elements/index.mjs +2 -2
  2. package/esm2022/lib/elements/property/property.component.mjs +8 -6
  3. package/esm2022/lib/elements/simpo-button/simpo-button.component.mjs +2 -2
  4. package/esm2022/lib/sections/banner-section/banner-section.component.mjs +3 -3
  5. package/esm2022/lib/sections/banner-section/banner-section.model.mjs +1 -1
  6. package/esm2022/lib/sections/faq-section/faq-section.component.mjs +4 -4
  7. package/esm2022/lib/sections/property-component/property-component.component.mjs +23 -0
  8. package/esm2022/lib/sections/property-component/property-component.modal.mjs +2 -0
  9. package/esm2022/lib/sections/service-section/service-section.component.mjs +3 -3
  10. package/esm2022/lib/sections/usp-video-section/usp-video-section.component.mjs +28 -0
  11. package/esm2022/lib/sections/usp-video-section/usp-video-section.model.mjs +2 -0
  12. package/esm2022/public-api.mjs +3 -1
  13. package/fesm2022/simpo-component-library.mjs +58 -14
  14. package/fesm2022/simpo-component-library.mjs.map +1 -1
  15. package/lib/directive/background-directive.d.ts +1 -1
  16. package/lib/directive/button-directive.directive.d.ts +1 -1
  17. package/lib/directive/color.directive.d.ts +1 -1
  18. package/lib/elements/property/property.component.d.ts +3 -1
  19. package/lib/sections/banner-carousel/banner-carousel.component.d.ts +2 -2
  20. package/lib/sections/banner-section/banner-section.model.d.ts +6 -0
  21. package/lib/sections/carousel-banner/carousel-banner.component.d.ts +1 -1
  22. package/lib/sections/image-section/image-section.component.d.ts +2 -2
  23. package/lib/sections/logo-showcase/logo-showcase.component.d.ts +1 -1
  24. package/lib/sections/pricing-section/pricing-section.component.d.ts +1 -1
  25. package/lib/sections/property-component/property-component.component.d.ts +10 -0
  26. package/lib/sections/property-component/property-component.modal.d.ts +28 -0
  27. package/lib/sections/usp-video-section/usp-video-section.component.d.ts +12 -0
  28. package/lib/sections/usp-video-section/usp-video-section.model.d.ts +22 -0
  29. package/package.json +1 -1
  30. package/public-api.d.ts +2 -0
  31. package/simpo-component-library-2.1.64.tgz +0 -0
  32. package/simpo-component-library-2.1.63.tgz +0 -0
@@ -666,11 +666,11 @@ class SimpoButtonComponent {
666
666
  this._eventService.buttonRedirection.emit({ data: this.buttonContent });
667
667
  }
668
668
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SimpoButtonComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
669
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: SimpoButtonComponent, isStandalone: true, selector: "app-button-element", inputs: { buttonContent: "buttonContent", buttonStyle: "buttonStyle", buttonId: "buttonId", color: "color", sectionId: "sectionId" }, ngImport: i0, template: "<button class=\"button\" (click)=\"redirectTo()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\">{{buttonContent?.label}}</button>\r\n", styles: [".button{font-size:14px!important;padding:5px 20px;display:inline-flex;align-items:center;justify-content:center;width:max-content!important}\n"], dependencies: [{ kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }] }); }
669
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: SimpoButtonComponent, isStandalone: true, selector: "app-button-element", inputs: { buttonContent: "buttonContent", buttonStyle: "buttonStyle", buttonId: "buttonId", color: "color", sectionId: "sectionId" }, ngImport: i0, template: "<button class=\"button\" (click)=\"redirectTo()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\">{{buttonContent?.label}}</button>\r\n", styles: [".button{font-size:14px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:max-content!important}\n"], dependencies: [{ kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }] }); }
670
670
  }
671
671
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SimpoButtonComponent, decorators: [{
672
672
  type: Component,
673
- args: [{ selector: 'app-button-element', standalone: true, imports: [ButtonDirectiveDirective], template: "<button class=\"button\" (click)=\"redirectTo()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\">{{buttonContent?.label}}</button>\r\n", styles: [".button{font-size:14px!important;padding:5px 20px;display:inline-flex;align-items:center;justify-content:center;width:max-content!important}\n"] }]
673
+ args: [{ selector: 'app-button-element', standalone: true, imports: [ButtonDirectiveDirective], template: "<button class=\"button\" (click)=\"redirectTo()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\">{{buttonContent?.label}}</button>\r\n", styles: [".button{font-size:14px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:max-content!important}\n"] }]
674
674
  }], ctorParameters: () => [{ type: EventsService }], propDecorators: { buttonContent: [{
675
675
  type: Input
676
676
  }], buttonStyle: [{
@@ -1569,17 +1569,19 @@ class PropertyComponent {
1569
1569
  };
1570
1570
  }
1571
1571
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1572
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PropertyComponent, isStandalone: true, selector: "simpo-property", ngImport: i0, template: "<div class=\"main-container w-100\" [ngStyle]=\"{ 'background-image': 'url(' + obj.backgroundImageUrl + ')' }\">\r\n <div class=\"data p-3 w-100\">\r\n <div class=\"top-data d-flex justify-content-between\">\r\n <div class=\"top-left d-flex g-10\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/697059c1737627380633Rectangle%2034625906.png\"\r\n alt=\"logo-text\">\r\n <div class=\"top-left-text text-left d-flex flex-column justify-content-center\">\r\n <div class=\"text-heading clr-white\">{{obj.heading}}</div>\r\n <div class=\"d-flex sub-text\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\">{{obj.location.city\r\n + \", \" + obj.location.state}}</div>\r\n </div>\r\n </div>\r\n <div class=\"top-right text-right\">\r\n <div class=\"xl-text mb-10\">{{obj.minInvestment}}</div>\r\n <div class=\"nrml-text\">Min.Investment</div>\r\n </div>\r\n </div>\r\n <div class=\"bottom-data d-flex justify-content-between align-items-center\">\r\n <div class=\"key-value d-flex flex-column\" *ngFor=\"let ele of obj.features\">\r\n <div class=\"text-heading clr-grey\">{{ele.value}}</div>\r\n <div class=\"text-heading clr-grey\">{{ele.key}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".main-container{background-repeat:no-repeat;background-size:cover;height:40vh;position:relative}.data{position:absolute;bottom:0}.g-10{gap:10px}.mb-10{margin-bottom:10px}.text-heading{font-weight:700;font-size:18px}.clr-white{color:#fff}.clr-grey{color:#000000b3}.sub-text{font-weight:600;font-size:16px;color:#ffffffb3}.xl-text{font-size:28px;line-height:17px;font-weight:700;color:#f09819}.nrml-text{font-size:16px;font-weight:500;color:#fff6}.bottom-data{background:#fff;padding:10px;border-radius:8px;margin-top:10px}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
1572
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PropertyComponent, isStandalone: true, selector: "simpo-property", inputs: { element: "element" }, ngImport: i0, template: "<div class=\"main-container w-100\" [ngStyle]=\"{ 'background-image': 'url(' + obj.backgroundImageUrl + ')' }\">\r\n <div class=\"data p-3 w-100\">\r\n <div class=\"top-data d-flex justify-content-between\">\r\n <div class=\"top-left d-flex g-10\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/697059c1737627380633Rectangle%2034625906.png\"\r\n alt=\"logo-text\">\r\n <div class=\"top-left-text text-left d-flex flex-column justify-content-center\">\r\n <div class=\"text-heading clr-white\">{{obj.heading}}</div>\r\n <div class=\"d-flex sub-text\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\">{{obj.location.city\r\n + \", \" + obj.location.state}}</div>\r\n </div>\r\n </div>\r\n <div class=\"top-right text-right\">\r\n <div class=\"xl-text mb-10\">{{obj.minInvestment}}</div>\r\n <div class=\"nrml-text\">Min.Investment</div>\r\n </div>\r\n </div>\r\n <div class=\"bottom-data d-flex justify-content-between align-items-center\">\r\n <div class=\"key-value d-flex flex-column\" *ngFor=\"let ele of obj.features\">\r\n <div class=\"text-heading clr-grey\">{{ele.value}}</div>\r\n <div class=\"text-heading clr-grey\">{{ele.key}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".main-container{background-repeat:no-repeat;background-size:cover;height:40vh;position:relative}.data{position:absolute;bottom:0}.g-10{gap:10px}.mb-10{margin-bottom:10px}.text-heading{font-weight:700;font-size:18px}.clr-white{color:#fff}.clr-grey{color:#000000b3}.sub-text{font-weight:600;font-size:17px;color:#ffffffb3}.xl-text{font-size:28px;line-height:17px;font-weight:700;color:#f09819}.nrml-text{font-size:16px;font-weight:500;color:#fff6}.bottom-data{background:#fff;padding:10px;border-radius:8px;margin-top:10px}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: CommonModule }] }); }
1573
1573
  }
1574
1574
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertyComponent, decorators: [{
1575
1575
  type: Component,
1576
- args: [{ selector: 'simpo-property', standalone: true, imports: [NgStyle, NgFor], template: "<div class=\"main-container w-100\" [ngStyle]=\"{ 'background-image': 'url(' + obj.backgroundImageUrl + ')' }\">\r\n <div class=\"data p-3 w-100\">\r\n <div class=\"top-data d-flex justify-content-between\">\r\n <div class=\"top-left d-flex g-10\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/697059c1737627380633Rectangle%2034625906.png\"\r\n alt=\"logo-text\">\r\n <div class=\"top-left-text text-left d-flex flex-column justify-content-center\">\r\n <div class=\"text-heading clr-white\">{{obj.heading}}</div>\r\n <div class=\"d-flex sub-text\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\">{{obj.location.city\r\n + \", \" + obj.location.state}}</div>\r\n </div>\r\n </div>\r\n <div class=\"top-right text-right\">\r\n <div class=\"xl-text mb-10\">{{obj.minInvestment}}</div>\r\n <div class=\"nrml-text\">Min.Investment</div>\r\n </div>\r\n </div>\r\n <div class=\"bottom-data d-flex justify-content-between align-items-center\">\r\n <div class=\"key-value d-flex flex-column\" *ngFor=\"let ele of obj.features\">\r\n <div class=\"text-heading clr-grey\">{{ele.value}}</div>\r\n <div class=\"text-heading clr-grey\">{{ele.key}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".main-container{background-repeat:no-repeat;background-size:cover;height:40vh;position:relative}.data{position:absolute;bottom:0}.g-10{gap:10px}.mb-10{margin-bottom:10px}.text-heading{font-weight:700;font-size:18px}.clr-white{color:#fff}.clr-grey{color:#000000b3}.sub-text{font-weight:600;font-size:16px;color:#ffffffb3}.xl-text{font-size:28px;line-height:17px;font-weight:700;color:#f09819}.nrml-text{font-size:16px;font-weight:500;color:#fff6}.bottom-data{background:#fff;padding:10px;border-radius:8px;margin-top:10px}\n"] }]
1577
- }] });
1576
+ args: [{ selector: 'simpo-property', standalone: true, imports: [NgStyle, NgFor, CommonModule], template: "<div class=\"main-container w-100\" [ngStyle]=\"{ 'background-image': 'url(' + obj.backgroundImageUrl + ')' }\">\r\n <div class=\"data p-3 w-100\">\r\n <div class=\"top-data d-flex justify-content-between\">\r\n <div class=\"top-left d-flex g-10\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/697059c1737627380633Rectangle%2034625906.png\"\r\n alt=\"logo-text\">\r\n <div class=\"top-left-text text-left d-flex flex-column justify-content-center\">\r\n <div class=\"text-heading clr-white\">{{obj.heading}}</div>\r\n <div class=\"d-flex sub-text\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\">{{obj.location.city\r\n + \", \" + obj.location.state}}</div>\r\n </div>\r\n </div>\r\n <div class=\"top-right text-right\">\r\n <div class=\"xl-text mb-10\">{{obj.minInvestment}}</div>\r\n <div class=\"nrml-text\">Min.Investment</div>\r\n </div>\r\n </div>\r\n <div class=\"bottom-data d-flex justify-content-between align-items-center\">\r\n <div class=\"key-value d-flex flex-column\" *ngFor=\"let ele of obj.features\">\r\n <div class=\"text-heading clr-grey\">{{ele.value}}</div>\r\n <div class=\"text-heading clr-grey\">{{ele.key}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".main-container{background-repeat:no-repeat;background-size:cover;height:40vh;position:relative}.data{position:absolute;bottom:0}.g-10{gap:10px}.mb-10{margin-bottom:10px}.text-heading{font-weight:700;font-size:18px}.clr-white{color:#fff}.clr-grey{color:#000000b3}.sub-text{font-weight:600;font-size:17px;color:#ffffffb3}.xl-text{font-size:28px;line-height:17px;font-weight:700;color:#f09819}.nrml-text{font-size:16px;font-weight:500;color:#fff6}.bottom-data{background:#fff;padding:10px;border-radius:8px;margin-top:10px}\n"] }]
1577
+ }], propDecorators: { element: [{
1578
+ type: Input
1579
+ }] } });
1578
1580
 
1579
1581
  class SimpoElementsModule {
1580
1582
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SimpoElementsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
1581
1583
  static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.4", ngImport: i0, type: SimpoElementsModule, imports: [ButtonElementComponent, TextElementComponent, BelowImageCardComponent, TopOfImageCardComponent, CoveringImageCardComponent, HeadingElementComponent, SimpoButtonComponent, SociaIconsComponent, CardSkeletonLoaderComponent, SvgDividerComponent, PropertyComponent], exports: [ButtonElementComponent, TextElementComponent, BelowImageCardComponent, TopOfImageCardComponent, CoveringImageCardComponent, HeadingElementComponent, SimpoButtonComponent, SociaIconsComponent, CardSkeletonLoaderComponent, SvgDividerComponent, PropertyComponent] }); }
1582
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SimpoElementsModule, imports: [ButtonElementComponent, TextElementComponent, BelowImageCardComponent, TopOfImageCardComponent, CoveringImageCardComponent, SociaIconsComponent, CardSkeletonLoaderComponent, SvgDividerComponent] }); }
1584
+ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SimpoElementsModule, imports: [ButtonElementComponent, TextElementComponent, BelowImageCardComponent, TopOfImageCardComponent, CoveringImageCardComponent, SociaIconsComponent, CardSkeletonLoaderComponent, SvgDividerComponent, PropertyComponent] }); }
1583
1585
  }
1584
1586
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SimpoElementsModule, decorators: [{
1585
1587
  type: NgModule,
@@ -2699,7 +2701,7 @@ class BannerSectionComponent extends BaseSection {
2699
2701
  this.screenWidth = window.innerWidth;
2700
2702
  }
2701
2703
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: BannerSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
2702
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: BannerSectionComponent, isStandalone: true, selector: "simpo-banner-section", 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\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage}\"\r\n class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container\" [simpoCorner]=\"styles?.corners\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"py-5\" [ngClass]=\"{'col-lg-6 col-xxl-6': isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage}\"\r\n [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\">\r\n <div class=\"row g-5 justify-content-start\" [id]=\"data?.id\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage && !isBorderlessImage\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\" style=\"object-fit: cover;\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n [ngClass]=\"{'col-lg-12': isBorderlessImage, 'col-lg-6': !isBorderlessImage}\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n </div>\r\n <div class=\"d-flex gap-3 card-container\" [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n </div>\r\n <div class=\"first-part-card d-flex align-items-center\"\r\n [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img loading=\"lazy\" class=\"tick-img\" [src]=\"item.inputText[0].image\" alt=\"something\" />\r\n <div [innerHTML]=\"item.inputText[0].value | sanitizeHtml\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\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\"\r\n [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>\r\n<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngStyle]=\"{'width': styles?.positionLayout?.value === 'right' ? 'fit-content' : ''}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n </div>\r\n</ng-template>", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}.card-container{flex-direction:column}}.text-element{inline-size:100%;overflow-wrap:break-word}.mergeNavbar{margin-top:-75px;padding-top:75px}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type:
2704
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: BannerSectionComponent, isStandalone: true, selector: "simpo-banner-section", 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\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage}\"\r\n class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container\" [simpoCorner]=\"styles?.corners\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"py-5\" [ngClass]=\"{'col-lg-6 col-xxl-6': isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage}\"\r\n [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\">\r\n <div class=\"row g-5 justify-content-start\" [id]=\"data?.id\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage && !isBorderlessImage\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\" style=\"object-fit: cover;\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n [ngClass]=\"{'col-lg-12': isBorderlessImage, 'col-lg-6': !isBorderlessImage}\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n </div>\r\n <div class=\"d-flex gap-3 card-container\" [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n </div>\r\n <div class=\"first-part-card d-flex align-items-center\"\r\n [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img loading=\"lazy\" class=\"tick-img\" [src]=\"item?.icon?.url\" alt=\"something\" />\r\n <div [innerHTML]=\"item.inputText[0].value | sanitizeHtml\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\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\"\r\n [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>\r\n<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngStyle]=\"{'width': styles?.positionLayout?.value === 'right' ? 'fit-content' : ''}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n </div>\r\n</ng-template>", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}.card-container{flex-direction:column}}.text-element{inline-size:100%;overflow-wrap:break-word}.mergeNavbar{margin-top:-75px;padding-top:75px}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type:
2703
2705
  //directive
2704
2706
  SimpoBorderlessDirective, selector: "[simpoBorderless]", inputs: ["simpoBorderless"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround"] }] }); }
2705
2707
  }
@@ -2737,7 +2739,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
2737
2739
  SanitizeHtmlPipe,
2738
2740
  SpacingHorizontalDirective,
2739
2741
  SpacingAroundDirective
2740
- ], template: "<div [id]=\"data?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage}\"\r\n class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container\" [simpoCorner]=\"styles?.corners\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"py-5\" [ngClass]=\"{'col-lg-6 col-xxl-6': isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage}\"\r\n [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\">\r\n <div class=\"row g-5 justify-content-start\" [id]=\"data?.id\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage && !isBorderlessImage\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\" style=\"object-fit: cover;\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n [ngClass]=\"{'col-lg-12': isBorderlessImage, 'col-lg-6': !isBorderlessImage}\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n </div>\r\n <div class=\"d-flex gap-3 card-container\" [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n </div>\r\n <div class=\"first-part-card d-flex align-items-center\"\r\n [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img loading=\"lazy\" class=\"tick-img\" [src]=\"item.inputText[0].image\" alt=\"something\" />\r\n <div [innerHTML]=\"item.inputText[0].value | sanitizeHtml\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\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\"\r\n [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>\r\n<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngStyle]=\"{'width': styles?.positionLayout?.value === 'right' ? 'fit-content' : ''}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n </div>\r\n</ng-template>", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}.card-container{flex-direction:column}}.text-element{inline-size:100%;overflow-wrap:break-word}.mergeNavbar{margin-top:-75px;padding-top:75px}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}\n"] }]
2742
+ ], template: "<div [id]=\"data?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage}\"\r\n class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container\" [simpoCorner]=\"styles?.corners\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"py-5\" [ngClass]=\"{'col-lg-6 col-xxl-6': isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage}\"\r\n [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\">\r\n <div class=\"row g-5 justify-content-start\" [id]=\"data?.id\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage && !isBorderlessImage\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\" style=\"object-fit: cover;\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n [ngClass]=\"{'col-lg-12': isBorderlessImage, 'col-lg-6': !isBorderlessImage}\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n </div>\r\n <div class=\"d-flex gap-3 card-container\" [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n </div>\r\n <div class=\"first-part-card d-flex align-items-center\"\r\n [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img loading=\"lazy\" class=\"tick-img\" [src]=\"item?.icon?.url\" alt=\"something\" />\r\n <div [innerHTML]=\"item.inputText[0].value | sanitizeHtml\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\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\"\r\n [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>\r\n<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngStyle]=\"{'width': styles?.positionLayout?.value === 'right' ? 'fit-content' : ''}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n </div>\r\n</ng-template>", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}.card-container{flex-direction:column}}.text-element{inline-size:100%;overflow-wrap:break-word}.mergeNavbar{margin-top:-75px;padding-top:75px}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}\n"] }]
2741
2743
  }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
2742
2744
  type: Input
2743
2745
  }], index: [{
@@ -2806,7 +2808,7 @@ class FaqSectionComponent extends BaseSection {
2806
2808
  constructor(_eventService) {
2807
2809
  super();
2808
2810
  this._eventService = _eventService;
2809
- this.unCollapsedList = [];
2811
+ this.unCollapsedList = [0];
2810
2812
  this.screenWidth = 0;
2811
2813
  this.getScreenSize();
2812
2814
  }
@@ -2842,7 +2844,7 @@ class FaqSectionComponent extends BaseSection {
2842
2844
  }
2843
2845
  }
2844
2846
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FaqSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
2845
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FaqSectionComponent, isStandalone: true, selector: "simpo-faq-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\"\r\n class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div class=\"col-xxl-8 py-5 w-100\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\">\r\n\r\n <div *ngIf=\"!content?.image?.showImage || screenWidth <= 475\">\r\n <!-- <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n </div> -->\r\n <div class=\"container-fluid flex-col\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n </div>\r\n\r\n <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\"(click)=\"toggleContent(i)\">\r\n <div style=\"display: flex;align-items: center;justify-content: space-between;\">\r\n <p class=\"heading-medium position-relative content-side\" data-toggle=\"collapse\" [simpoContainerAlignment]=\"stylesLayout\">\r\n <span style=\"display: block;\" [innerHTML]=\"itemData.inputText[0].value\"></span>\r\n </p>\r\n <mat-icon *ngIf=\"unCollapsedList.includes(i)\" [ngStyle]=\"{'left' : style?.layout?.align == 'right' ? 0 : '', 'right' : style?.layout?.align !== 'right' ? 0 : ''}\">keyboard_arrow_up</mat-icon>\r\n <mat-icon *ngIf=\"!unCollapsedList.includes(i)\" [ngStyle]=\"{'left' : style?.layout?.align == 'right' ? 0 : '', 'right' : style?.layout?.align !== 'right' ? 0 : ''}\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': !unCollapsedList.includes(i)}\" [innerHTML]=\"itemData.inputText[1].value\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"content?.image?.showImage && screenWidth > 475\" class=\"row g-5\" [id]=\"data?.id\"\r\n [simpoLayout]=\"style?.layout\" [simpoPositionLayoutDirective]=\"style?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': style?.positionLayout?.value === 'left' || style?.positionLayout?.value === 'right' }\">\r\n\r\n\r\n <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15 content-side \"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"style?.contentAlignment\">\r\n\r\n <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n </div>\r\n\r\n <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\" (click)=\"toggleContent(i)\">\r\n <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative content-side\" data-toggle=\"collapse\">\r\n <span [innerHTML]=\"itemData.inputText[0].value\"></span>\r\n <mat-icon *ngIf=\"unCollapsedList.includes(i)\"style=\"position:relative; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n <mat-icon *ngIf=\"!unCollapsedList.includes(i)\"style=\"position: relative; right: 0px;\">keyboard_arrow_down</mat-icon>\r\n </p>\r\n <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': !unCollapsedList.includes(i)}\" [innerHTML]=\"itemData.inputText[1].value\"></div>\r\n </div>\r\n </div>\r\n <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\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\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</section>\r\n", styles: [".mb-2{margin-bottom:2.5rem!important}.data{gap:1rem;padding-top:.5rem;padding-bottom:.5rem;box-shadow:#11182733 0 -1px inset;cursor:pointer;width:100%}.flex-col{display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{height:auto;position:relative}.heading-large{margin-top:20px}@media only screen and (max-width: 475px){.row{display:flex;flex-direction:column-reverse}.col-10{width:100%!important}}.float-end{position:absolute;top:0}@media only screen and (min-width: 500px){.heading-medium{font-size:20px}}@media screen and (max-width: 500px){.heading-medium{font-size:16px}.desc{font-size:14px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: HeadingElementComponent, selector: "simpo-heading-element", inputs: ["data"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "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: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type:
2847
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FaqSectionComponent, isStandalone: true, selector: "simpo-faq-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\"\r\n class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div class=\"col-xxl-8 py-5 w-100\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\">\r\n\r\n <div *ngIf=\"!content?.image?.showImage || screenWidth <= 475\">\r\n <!-- <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n </div> -->\r\n <div class=\"container-fluid flex-col\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n </div>\r\n\r\n <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data data-1\"(click)=\"toggleContent(i)\" [ngClass]=\"{'w-100':screenWidth <= 475 , 'w-60':screenWidth > 475 }\" [style.background-color]=\"unCollapsedList.includes(i) ? data?.styles?.background?.accentColor : ''\">\r\n <div style=\"display: flex;align-items: center;justify-content: space-between;\">\r\n <p class=\"heading-medium position-relative content-side mb-0\" data-toggle=\"collapse\">\r\n <span style=\"display: block;\" [innerHTML]=\"itemData.inputText[0].value\"></span>\r\n </p>\r\n <mat-icon *ngIf=\"unCollapsedList.includes(i)\" [ngStyle]=\"{'left' : style?.layout?.align == 'right' ? 0 : '', 'right' : style?.layout?.align !== 'right' ? 0 : ''}\">close</mat-icon>\r\n <mat-icon *ngIf=\"!unCollapsedList.includes(i)\" [ngStyle]=\"{'left' : style?.layout?.align == 'right' ? 0 : '', 'right' : style?.layout?.align !== 'right' ? 0 : ''}\">add</mat-icon>\r\n </div>\r\n <div class=\"body-large desc multi-collapse text-start\" [ngClass]=\"{'collapse': !unCollapsedList.includes(i)}\" [innerHTML]=\"itemData.inputText[1].value\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"content?.image?.showImage && screenWidth > 475\" class=\"row g-5\" [id]=\"data?.id\"\r\n [simpoLayout]=\"style?.layout\" [simpoPositionLayoutDirective]=\"style?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': style?.positionLayout?.value === 'left' || style?.positionLayout?.value === 'right' }\">\r\n\r\n\r\n <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15 content-side \"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"style?.contentAlignment\">\r\n\r\n <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n </div>\r\n\r\n <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\" (click)=\"toggleContent(i)\">\r\n <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative content-side\" data-toggle=\"collapse\">\r\n <span [innerHTML]=\"itemData.inputText[0].value\"></span>\r\n <mat-icon *ngIf=\"unCollapsedList.includes(i)\"style=\"position:relative; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n <mat-icon *ngIf=\"!unCollapsedList.includes(i)\"style=\"position: relative; right: 0px;\">keyboard_arrow_down</mat-icon>\r\n </p>\r\n <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': !unCollapsedList.includes(i)}\" [innerHTML]=\"itemData.inputText[1].value\"></div>\r\n </div>\r\n </div>\r\n <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\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\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</section>\r\n", styles: [".mb-2{margin-bottom:2.5rem!important}.data{gap:1rem;padding-top:.5rem;padding-bottom:.5rem;box-shadow:#11182733 0 -1px inset;cursor:pointer;width:100%}.flex-col{display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{height:auto;position:relative}.heading-large{margin-top:20px}@media only screen and (max-width: 475px){.row{display:flex;flex-direction:column-reverse}.col-10{width:100%!important}}.float-end{position:absolute;top:0}@media only screen and (min-width: 500px){.heading-medium{font-size:20px}}@media screen and (max-width: 500px){.heading-medium{font-size:16px}.desc{font-size:14px}}.w-60{width:60%}.data-1{box-shadow:#0000001a 0 1px 3px,#0000000f 0 1px 2px;border-radius:10px;text-align:center;padding-left:.5rem;padding-right:.5rem;margin-bottom:1rem;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: HeadingElementComponent, selector: "simpo-heading-element", inputs: ["data"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "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: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type:
2846
2848
  //directive
2847
2849
  AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal"] }] }); }
2848
2850
  }
@@ -2877,7 +2879,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
2877
2879
  SanitizeHtmlPipe,
2878
2880
  SpacingHorizontalDirective,
2879
2881
  SvgDividerComponent
2880
- ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\"\r\n class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div class=\"col-xxl-8 py-5 w-100\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\">\r\n\r\n <div *ngIf=\"!content?.image?.showImage || screenWidth <= 475\">\r\n <!-- <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n </div> -->\r\n <div class=\"container-fluid flex-col\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n </div>\r\n\r\n <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\"(click)=\"toggleContent(i)\">\r\n <div style=\"display: flex;align-items: center;justify-content: space-between;\">\r\n <p class=\"heading-medium position-relative content-side\" data-toggle=\"collapse\" [simpoContainerAlignment]=\"stylesLayout\">\r\n <span style=\"display: block;\" [innerHTML]=\"itemData.inputText[0].value\"></span>\r\n </p>\r\n <mat-icon *ngIf=\"unCollapsedList.includes(i)\" [ngStyle]=\"{'left' : style?.layout?.align == 'right' ? 0 : '', 'right' : style?.layout?.align !== 'right' ? 0 : ''}\">keyboard_arrow_up</mat-icon>\r\n <mat-icon *ngIf=\"!unCollapsedList.includes(i)\" [ngStyle]=\"{'left' : style?.layout?.align == 'right' ? 0 : '', 'right' : style?.layout?.align !== 'right' ? 0 : ''}\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': !unCollapsedList.includes(i)}\" [innerHTML]=\"itemData.inputText[1].value\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"content?.image?.showImage && screenWidth > 475\" class=\"row g-5\" [id]=\"data?.id\"\r\n [simpoLayout]=\"style?.layout\" [simpoPositionLayoutDirective]=\"style?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': style?.positionLayout?.value === 'left' || style?.positionLayout?.value === 'right' }\">\r\n\r\n\r\n <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15 content-side \"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"style?.contentAlignment\">\r\n\r\n <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n </div>\r\n\r\n <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\" (click)=\"toggleContent(i)\">\r\n <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative content-side\" data-toggle=\"collapse\">\r\n <span [innerHTML]=\"itemData.inputText[0].value\"></span>\r\n <mat-icon *ngIf=\"unCollapsedList.includes(i)\"style=\"position:relative; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n <mat-icon *ngIf=\"!unCollapsedList.includes(i)\"style=\"position: relative; right: 0px;\">keyboard_arrow_down</mat-icon>\r\n </p>\r\n <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': !unCollapsedList.includes(i)}\" [innerHTML]=\"itemData.inputText[1].value\"></div>\r\n </div>\r\n </div>\r\n <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\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\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</section>\r\n", styles: [".mb-2{margin-bottom:2.5rem!important}.data{gap:1rem;padding-top:.5rem;padding-bottom:.5rem;box-shadow:#11182733 0 -1px inset;cursor:pointer;width:100%}.flex-col{display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{height:auto;position:relative}.heading-large{margin-top:20px}@media only screen and (max-width: 475px){.row{display:flex;flex-direction:column-reverse}.col-10{width:100%!important}}.float-end{position:absolute;top:0}@media only screen and (min-width: 500px){.heading-medium{font-size:20px}}@media screen and (max-width: 500px){.heading-medium{font-size:16px}.desc{font-size:14px}}\n"] }]
2882
+ ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\"\r\n class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div class=\"col-xxl-8 py-5 w-100\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\">\r\n\r\n <div *ngIf=\"!content?.image?.showImage || screenWidth <= 475\">\r\n <!-- <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n </div> -->\r\n <div class=\"container-fluid flex-col\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n </div>\r\n\r\n <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data data-1\"(click)=\"toggleContent(i)\" [ngClass]=\"{'w-100':screenWidth <= 475 , 'w-60':screenWidth > 475 }\" [style.background-color]=\"unCollapsedList.includes(i) ? data?.styles?.background?.accentColor : ''\">\r\n <div style=\"display: flex;align-items: center;justify-content: space-between;\">\r\n <p class=\"heading-medium position-relative content-side mb-0\" data-toggle=\"collapse\">\r\n <span style=\"display: block;\" [innerHTML]=\"itemData.inputText[0].value\"></span>\r\n </p>\r\n <mat-icon *ngIf=\"unCollapsedList.includes(i)\" [ngStyle]=\"{'left' : style?.layout?.align == 'right' ? 0 : '', 'right' : style?.layout?.align !== 'right' ? 0 : ''}\">close</mat-icon>\r\n <mat-icon *ngIf=\"!unCollapsedList.includes(i)\" [ngStyle]=\"{'left' : style?.layout?.align == 'right' ? 0 : '', 'right' : style?.layout?.align !== 'right' ? 0 : ''}\">add</mat-icon>\r\n </div>\r\n <div class=\"body-large desc multi-collapse text-start\" [ngClass]=\"{'collapse': !unCollapsedList.includes(i)}\" [innerHTML]=\"itemData.inputText[1].value\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"content?.image?.showImage && screenWidth > 475\" class=\"row g-5\" [id]=\"data?.id\"\r\n [simpoLayout]=\"style?.layout\" [simpoPositionLayoutDirective]=\"style?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': style?.positionLayout?.value === 'left' || style?.positionLayout?.value === 'right' }\">\r\n\r\n\r\n <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15 content-side \"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"style?.contentAlignment\">\r\n\r\n <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n </div>\r\n\r\n <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\" (click)=\"toggleContent(i)\">\r\n <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative content-side\" data-toggle=\"collapse\">\r\n <span [innerHTML]=\"itemData.inputText[0].value\"></span>\r\n <mat-icon *ngIf=\"unCollapsedList.includes(i)\"style=\"position:relative; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n <mat-icon *ngIf=\"!unCollapsedList.includes(i)\"style=\"position: relative; right: 0px;\">keyboard_arrow_down</mat-icon>\r\n </p>\r\n <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': !unCollapsedList.includes(i)}\" [innerHTML]=\"itemData.inputText[1].value\"></div>\r\n </div>\r\n </div>\r\n <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\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\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</section>\r\n", styles: [".mb-2{margin-bottom:2.5rem!important}.data{gap:1rem;padding-top:.5rem;padding-bottom:.5rem;box-shadow:#11182733 0 -1px inset;cursor:pointer;width:100%}.flex-col{display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{height:auto;position:relative}.heading-large{margin-top:20px}@media only screen and (max-width: 475px){.row{display:flex;flex-direction:column-reverse}.col-10{width:100%!important}}.float-end{position:absolute;top:0}@media only screen and (min-width: 500px){.heading-medium{font-size:20px}}@media screen and (max-width: 500px){.heading-medium{font-size:16px}.desc{font-size:14px}}.w-60{width:60%}.data-1{box-shadow:#0000001a 0 1px 3px,#0000000f 0 1px 2px;border-radius:10px;text-align:center;padding-left:.5rem;padding-right:.5rem;margin-bottom:1rem;cursor:pointer}\n"] }]
2881
2883
  }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
2882
2884
  type: Input
2883
2885
  }], index: [{
@@ -3265,7 +3267,7 @@ class ServiceSectionComponent extends BaseSection {
3265
3267
  }, 100);
3266
3268
  }
3267
3269
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ServiceSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
3268
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ServiceSectionComponent, isStandalone: true, selector: "simpo-service-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.layout?.spacingAround != 'none' && style?.layout?.spacingAround != 'remove' ? style?.corners : Corner.None\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\"\r\n [innerHTML]=\"text.value | sanitizeHtml\"></div>\r\n </div>\r\n <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n *ngFor=\"let service of content?.listItem?.data\">\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\"></simpo-below-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\"></simpo-top-of-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\"></simpo-covering-image-card>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\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>\r\n", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: BelowImageCardComponent, selector: "simpo-below-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "component", type: TopOfImageCardComponent, selector: "simpo-top-of-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "component", type: CoveringImageCardComponent, selector: "simpo-covering-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: 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:
3270
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ServiceSectionComponent, isStandalone: true, selector: "simpo-service-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.layout?.spacingAround && style?.layout?.spacingAround != 'none' && style?.layout?.spacingAround != 'remove' ? style?.corners : Corner.None\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\"\r\n [innerHTML]=\"text.value | sanitizeHtml\"></div>\r\n </div>\r\n <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n *ngFor=\"let service of content?.listItem?.data\">\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\"></simpo-below-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\"></simpo-top-of-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\"></simpo-covering-image-card>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\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>\r\n", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: BelowImageCardComponent, selector: "simpo-below-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "component", type: TopOfImageCardComponent, selector: "simpo-top-of-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "component", type: CoveringImageCardComponent, selector: "simpo-covering-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: 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:
3269
3271
  //directive
3270
3272
  ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { 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: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround"] }] }); }
3271
3273
  }
@@ -3297,7 +3299,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
3297
3299
  SanitizeHtmlPipe,
3298
3300
  SpacingHorizontalDirective,
3299
3301
  SpacingAroundDirective
3300
- ], template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.layout?.spacingAround != 'none' && style?.layout?.spacingAround != 'remove' ? style?.corners : Corner.None\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\"\r\n [innerHTML]=\"text.value | sanitizeHtml\"></div>\r\n </div>\r\n <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n *ngFor=\"let service of content?.listItem?.data\">\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\"></simpo-below-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\"></simpo-top-of-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\"></simpo-covering-image-card>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\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>\r\n", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
3302
+ ], template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.layout?.spacingAround && style?.layout?.spacingAround != 'none' && style?.layout?.spacingAround != 'remove' ? style?.corners : Corner.None\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\"\r\n [innerHTML]=\"text.value | sanitizeHtml\"></div>\r\n </div>\r\n <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n *ngFor=\"let service of content?.listItem?.data\">\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\"></simpo-below-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\"></simpo-top-of-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\"></simpo-covering-image-card>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\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>\r\n", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
3301
3303
  }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
3302
3304
  type: Input
3303
3305
  }], index: [{
@@ -9502,6 +9504,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
9502
9504
  type: Input
9503
9505
  }] } });
9504
9506
 
9507
+ class PropertyComponentComponent {
9508
+ ngOnInit() {
9509
+ console.log(this.data, "this property data");
9510
+ this.content = this.data?.content;
9511
+ }
9512
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertyComponentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
9513
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PropertyComponentComponent, isStandalone: true, selector: "simpo-property-component", inputs: { data: "data", index: "index" }, ngImport: i0, template: "<div class=\"main-container content-side\">\r\n <div class=\"header-section text-center mb-3\">\r\n <div *ngFor=\"let text of data?.content?.inputText\" [ngClass]=\"{'head-text':text.label == 'Heading' , 'sub-text-1':text.label == 'Subtext'}\">{{text.value}}</div>\r\n </div>\r\n <div class=\"cards-section d-flex justify-content-center align-items-center g-3\">\r\n <ng-container *ngFor=\"let ele of data?.content?.listItem?.data\">\r\n <div class=\"card\">\r\n <div class=\"w-100 card-container\"\r\n [ngStyle]=\"{ 'background-image': 'url(' + ele.backgroundImageUrl + ')' }\">\r\n <div class=\"data p-3 w-100\">\r\n <div class=\"top-data d-flex justify-content-between align-items-center\">\r\n <div class=\"top-left d-flex g-10\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/155859c1737715323470Logo.png\"\r\n alt=\"logo-text\" class=\"\">\r\n <div class=\"top-left-text text-left d-flex flex-column justify-content-center\">\r\n <div class=\"text-heading clr-white\">{{ele.heading}}</div>\r\n <div class=\"d-flex sub-text\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\">{{ele.location.city\r\n + \", \" + ele.location.state}}</div>\r\n </div>\r\n </div>\r\n <div class=\"top-right text-right\">\r\n <div class=\"xl-text mb-10\">{{ele.minInvestment}}</div>\r\n <div class=\"nrml-text\">Min.Investment</div>\r\n </div>\r\n </div>\r\n <div class=\"bottom-data d-flex justify-content-around align-items-center\">\r\n <div class=\"key-value d-flex flex-column\" *ngFor=\"let item of ele.features\">\r\n <div class=\"text-heading clr-grey text-center\">{{item.value}}</div>\r\n <div class=\"text-heading clr-grey text-center\">{{item.key}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</div>", styles: [".main-container{padding:4rem}.head-text{font-family:Open Sans;font-size:32px;font-weight:600;line-height:44px;color:#000}.sub-text-1{font-family:Open Sans;font-size:18px;font-weight:400;line-height:44px;color:#000000b3}.g-10{gap:10px}.mb-10{margin-bottom:10px}.text-heading{font-weight:700;font-size:18px;margin-bottom:5px}.clr-white{color:#fff}.clr-grey{color:#000000b3}.sub-text{font-weight:600;font-size:16px;color:#ffffffb3}.xl-text{font-size:28px;line-height:17px;font-weight:700;color:#f09819}.nrml-text{font-size:16px;font-weight:500;color:#fff6}.bottom-data{background:#fff;padding:10px;border-radius:8px;margin-top:10px}.card{width:45%;border-radius:10px}.card-container{height:60vh;background-repeat:no-repeat;background-size:cover;position:relative;border-radius:10px}.data{position:absolute;bottom:0}.g-3{gap:3rem}.logo-img{width:60px;height:60px}@media only screen and (max-width: 475px){.main-container{padding:1rem}.cards-section{flex-direction:column;gap:1rem!important}.card{width:100%!important}.head-text{font-size:25px;line-height:38px;text-align:start!important;margin-bottom:10px}.sub-text-1{font-size:16px;line-height:20px;text-align:start!important}.xl-text{font-size:22px}.nrml-text{font-size:12px}.text-heading{font-size:13px}.sub-text{font-size:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
9514
+ }
9515
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertyComponentComponent, decorators: [{
9516
+ type: Component,
9517
+ args: [{ selector: 'simpo-property-component', standalone: true, imports: [
9518
+ CommonModule,
9519
+ ], template: "<div class=\"main-container content-side\">\r\n <div class=\"header-section text-center mb-3\">\r\n <div *ngFor=\"let text of data?.content?.inputText\" [ngClass]=\"{'head-text':text.label == 'Heading' , 'sub-text-1':text.label == 'Subtext'}\">{{text.value}}</div>\r\n </div>\r\n <div class=\"cards-section d-flex justify-content-center align-items-center g-3\">\r\n <ng-container *ngFor=\"let ele of data?.content?.listItem?.data\">\r\n <div class=\"card\">\r\n <div class=\"w-100 card-container\"\r\n [ngStyle]=\"{ 'background-image': 'url(' + ele.backgroundImageUrl + ')' }\">\r\n <div class=\"data p-3 w-100\">\r\n <div class=\"top-data d-flex justify-content-between align-items-center\">\r\n <div class=\"top-left d-flex g-10\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/155859c1737715323470Logo.png\"\r\n alt=\"logo-text\" class=\"\">\r\n <div class=\"top-left-text text-left d-flex flex-column justify-content-center\">\r\n <div class=\"text-heading clr-white\">{{ele.heading}}</div>\r\n <div class=\"d-flex sub-text\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\">{{ele.location.city\r\n + \", \" + ele.location.state}}</div>\r\n </div>\r\n </div>\r\n <div class=\"top-right text-right\">\r\n <div class=\"xl-text mb-10\">{{ele.minInvestment}}</div>\r\n <div class=\"nrml-text\">Min.Investment</div>\r\n </div>\r\n </div>\r\n <div class=\"bottom-data d-flex justify-content-around align-items-center\">\r\n <div class=\"key-value d-flex flex-column\" *ngFor=\"let item of ele.features\">\r\n <div class=\"text-heading clr-grey text-center\">{{item.value}}</div>\r\n <div class=\"text-heading clr-grey text-center\">{{item.key}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</div>", styles: [".main-container{padding:4rem}.head-text{font-family:Open Sans;font-size:32px;font-weight:600;line-height:44px;color:#000}.sub-text-1{font-family:Open Sans;font-size:18px;font-weight:400;line-height:44px;color:#000000b3}.g-10{gap:10px}.mb-10{margin-bottom:10px}.text-heading{font-weight:700;font-size:18px;margin-bottom:5px}.clr-white{color:#fff}.clr-grey{color:#000000b3}.sub-text{font-weight:600;font-size:16px;color:#ffffffb3}.xl-text{font-size:28px;line-height:17px;font-weight:700;color:#f09819}.nrml-text{font-size:16px;font-weight:500;color:#fff6}.bottom-data{background:#fff;padding:10px;border-radius:8px;margin-top:10px}.card{width:45%;border-radius:10px}.card-container{height:60vh;background-repeat:no-repeat;background-size:cover;position:relative;border-radius:10px}.data{position:absolute;bottom:0}.g-3{gap:3rem}.logo-img{width:60px;height:60px}@media only screen and (max-width: 475px){.main-container{padding:1rem}.cards-section{flex-direction:column;gap:1rem!important}.card{width:100%!important}.head-text{font-size:25px;line-height:38px;text-align:start!important;margin-bottom:10px}.sub-text-1{font-size:16px;line-height:20px;text-align:start!important}.xl-text{font-size:22px}.nrml-text{font-size:12px}.text-heading{font-size:13px}.sub-text{font-size:12px}}\n"] }]
9520
+ }], propDecorators: { data: [{
9521
+ type: Input
9522
+ }], index: [{
9523
+ type: Input
9524
+ }] } });
9525
+
9526
+ class UspVideoSectionComponent {
9527
+ constructor() {
9528
+ this.index = 0;
9529
+ }
9530
+ ngOnInit() {
9531
+ console.log(this.data);
9532
+ this.style = this.data?.styles;
9533
+ }
9534
+ get stylesLayout() {
9535
+ return { ...this.style?.layout };
9536
+ }
9537
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UspVideoSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
9538
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: UspVideoSectionComponent, isStandalone: true, selector: "simpo-usp-video-section", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"main-container\">\r\n <div class=\"header\" *ngFor=\"let ele of data?.content?.inputText\" [ngClass]=\"{'text-center': data?.styles?.layout?.align == 'center'}\">\r\n {{ele.value}}\r\n </div>\r\n <div class=\"body-container d-flex g-4 w-100\">\r\n <div class=\"left w-40\" [ngClass]=\"{'w-100':!data?.content?.videoLink?.display , 'center-alignment': data?.styles?.layout?.align == 'center'}\">\r\n <ng-container *ngFor=\"let ele of data?.content?.listItem?.data; let i = index\">\r\n <div class=\"card-container w-100\" [class.active-border]=\"i == 1\">\r\n <p class=\"head-text\" [class.active-text]=\"i == 1\">{{ele.inputText[0].value}}</p>\r\n <p class=\"sub-text\" [class.active-text]=\"i == 1\">{{ele.inputText[1].value}}</p>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"right w-60 d-flex justify-content-end align-items-center\" *ngIf=\"data?.content?.videoLink?.display\">\r\n <div class=\"video-section\">\r\n <video controls class=\"w-100 br-20 h-50\">\r\n <source [src]=\"data?.content?.videoLink?.url\">\r\n </video>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".main-container{padding:4rem 7rem}.header{font-weight:600;font-size:32px;line-height:56px;color:#555}.head-text{font-size:24px;line-height:56px;color:#1e1e1e;font-weight:700}.sub-text{font-size:16px;font-weight:400;line-height:24px;color:#6b6b6b}.w-40{width:40%}.w-60{width:60%}.active-text{color:#f8a938!important}.active-border{border-left:10px solid rgba(248,169,56,1);border-radius:10px;padding-left:10px}.br-20{border-radius:20px}.h-50{height:50vh}@media only screen and (max-width: 475px){.main-container{padding:2rem!important}.header{font-size:22px;line-height:35px;margin-bottom:10px}.body-container{flex-direction:column-reverse}.left,.right{width:100%!important}.head-text{margin-bottom:0}}.center-alignment{width:75%!important;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0 auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
9539
+ }
9540
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UspVideoSectionComponent, decorators: [{
9541
+ type: Component,
9542
+ args: [{ selector: 'simpo-usp-video-section', standalone: true, imports: [CommonModule,
9543
+ SimpoContainerAligment
9544
+ ], template: "<div class=\"main-container\">\r\n <div class=\"header\" *ngFor=\"let ele of data?.content?.inputText\" [ngClass]=\"{'text-center': data?.styles?.layout?.align == 'center'}\">\r\n {{ele.value}}\r\n </div>\r\n <div class=\"body-container d-flex g-4 w-100\">\r\n <div class=\"left w-40\" [ngClass]=\"{'w-100':!data?.content?.videoLink?.display , 'center-alignment': data?.styles?.layout?.align == 'center'}\">\r\n <ng-container *ngFor=\"let ele of data?.content?.listItem?.data; let i = index\">\r\n <div class=\"card-container w-100\" [class.active-border]=\"i == 1\">\r\n <p class=\"head-text\" [class.active-text]=\"i == 1\">{{ele.inputText[0].value}}</p>\r\n <p class=\"sub-text\" [class.active-text]=\"i == 1\">{{ele.inputText[1].value}}</p>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"right w-60 d-flex justify-content-end align-items-center\" *ngIf=\"data?.content?.videoLink?.display\">\r\n <div class=\"video-section\">\r\n <video controls class=\"w-100 br-20 h-50\">\r\n <source [src]=\"data?.content?.videoLink?.url\">\r\n </video>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".main-container{padding:4rem 7rem}.header{font-weight:600;font-size:32px;line-height:56px;color:#555}.head-text{font-size:24px;line-height:56px;color:#1e1e1e;font-weight:700}.sub-text{font-size:16px;font-weight:400;line-height:24px;color:#6b6b6b}.w-40{width:40%}.w-60{width:60%}.active-text{color:#f8a938!important}.active-border{border-left:10px solid rgba(248,169,56,1);border-radius:10px;padding-left:10px}.br-20{border-radius:20px}.h-50{height:50vh}@media only screen and (max-width: 475px){.main-container{padding:2rem!important}.header{font-size:22px;line-height:35px;margin-bottom:10px}.body-container{flex-direction:column-reverse}.left,.right{width:100%!important}.head-text{margin-bottom:0}}.center-alignment{width:75%!important;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0 auto}\n"] }]
9545
+ }], propDecorators: { data: [{
9546
+ type: Input
9547
+ }] } });
9548
+
9505
9549
  class SimpoWrapComntainer {
9506
9550
  constructor(eventService, el) {
9507
9551
  this.eventService = eventService;
@@ -12973,5 +13017,5 @@ class Product {
12973
13017
  * Generated bundle index. Do not edit.
12974
13018
  */
12975
13019
 
12976
- export { AddNewSectionComponent, AlignContent, AnimationDirective, AppointmentFormComponent, AuthenticateUserComponent, AuthenticationRequiredComponent, BANNERALIGNMENT, BANNERHALIGN, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BorderDirective, ButtonDirectiveDirective, CarouselBannerComponent, Cart, CartComponent, Category, CategoryProductComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, CustomerReviewComponent, DeviderType, EndUserService, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedCollectionComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterSectionComponent, FooterTypes, HALIGN, HEADER_STYLING, HeaderButtonStyle, HeaderTextComponent, HoverDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LocationSectionComponent, LogoGalleryComponent, LogoShowcaseComponent, MapType, NavbarSectionComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCardTheme, ProductCategoryListComponent, ProductDescComponent, ProductListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, RegistrationFormComponent, RemoveCarouselDirective, SPACING$1 as SPACING, SPACINGALIGN, SanitizeHtmlPipe, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, SpacingAroundDirective, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TestimonialVideoComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, UserProfileComponent, VALIGN, VerifyComponent, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, cartType, contentAlignment, fitContent, fitScreen, fontSize, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective, svgData };
13020
+ export { AddNewSectionComponent, AlignContent, AnimationDirective, AppointmentFormComponent, AuthenticateUserComponent, AuthenticationRequiredComponent, BANNERALIGNMENT, BANNERHALIGN, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BorderDirective, ButtonDirectiveDirective, CarouselBannerComponent, Cart, CartComponent, Category, CategoryProductComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, CustomerReviewComponent, DeviderType, EndUserService, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedCollectionComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterSectionComponent, FooterTypes, HALIGN, HEADER_STYLING, HeaderButtonStyle, HeaderTextComponent, HoverDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LocationSectionComponent, LogoGalleryComponent, LogoShowcaseComponent, MapType, NavbarSectionComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCardTheme, ProductCategoryListComponent, ProductDescComponent, ProductListComponent, PropertyComponentComponent, RecentBlogPostSectionComponent, RedirectionLinkType, RegistrationFormComponent, RemoveCarouselDirective, SPACING$1 as SPACING, SPACINGALIGN, SanitizeHtmlPipe, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, SpacingAroundDirective, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TestimonialVideoComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, UserProfileComponent, UspVideoSectionComponent, VALIGN, VerifyComponent, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, cartType, contentAlignment, fitContent, fitScreen, fontSize, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective, svgData };
12977
13021
  //# sourceMappingURL=simpo-component-library.mjs.map