simpo-component-library 3.6.800 → 3.6.802
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/directive/overlay-directive.mjs +4 -1
- package/esm2022/lib/ecommerce/sections/category-product/category-product.component.mjs +3 -3
- package/esm2022/lib/ecommerce/sections/category-product/category-product.model.mjs +1 -1
- package/esm2022/lib/ecommerce/sections/small-product-listing/small-product-listing.component.mjs +13 -2
- package/esm2022/lib/ecommerce/styles/product.modal.mjs +2 -1
- package/esm2022/lib/sections/new-testimonials/new-testimonials.component.mjs +5 -5
- package/esm2022/lib/sections/testimonial-fullwidth/testimonial-fullwidth.component.mjs +3 -3
- package/esm2022/lib/sections/testimonial-section/testimonial-section.component.mjs +3 -3
- package/fesm2022/simpo-component-library.mjs +26 -11
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/components/input-fields/input-fields.component.d.ts +1 -1
- package/lib/ecommerce/sections/authentication-required/authentication-required.component.d.ts +1 -1
- package/lib/ecommerce/sections/category-product/category-product.model.d.ts +1 -0
- package/lib/ecommerce/sections/product-desc/product-desc.component.d.ts +1 -1
- package/lib/ecommerce/sections/schemes/schemes.component.d.ts +1 -1
- package/lib/ecommerce/sections/small-product-listing/small-product-listing.component.d.ts +1 -0
- package/lib/sections/banner-carousel/banner-carousel.component.d.ts +1 -1
- package/lib/sections/new-testimonials/new-testimonials.component.d.ts +1 -1
- package/lib/sections/pricing-section/pricing-section.component.d.ts +1 -1
- package/package.json +1 -1
- package/simpo-component-library-3.6.802.tgz +0 -0
- package/simpo-component-library-3.6.800.tgz +0 -0
|
@@ -3332,6 +3332,7 @@ class Product {
|
|
|
3332
3332
|
this.itemImages = json?.["itemImages"];
|
|
3333
3333
|
this.itemPacks = json?.["itemPacks"];
|
|
3334
3334
|
this.addOnToItem = json?.["addOnToItem"];
|
|
3335
|
+
this.slugifiedName = json?.["slugifiedName"];
|
|
3335
3336
|
this.unit = json?.["unit"];
|
|
3336
3337
|
this.price = json?.["price"];
|
|
3337
3338
|
this.categoryId = json?.["categoryId"];
|
|
@@ -5475,6 +5476,9 @@ class OverlayDirective {
|
|
|
5475
5476
|
if (res.data?.showImage) {
|
|
5476
5477
|
this.el.nativeElement.style.setProperty('background-color', this.getRGBA(res.data.color, res.data.opacity));
|
|
5477
5478
|
}
|
|
5479
|
+
else {
|
|
5480
|
+
this.el.nativeElement.style.setProperty('background-color', 'transparent');
|
|
5481
|
+
}
|
|
5478
5482
|
}
|
|
5479
5483
|
});
|
|
5480
5484
|
}
|
|
@@ -7285,7 +7289,7 @@ class TestimonialSectionComponent extends BaseSection {
|
|
|
7285
7289
|
}
|
|
7286
7290
|
}
|
|
7287
7291
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TestimonialSectionComponent, deps: [{ token: EventsService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7288
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TestimonialSectionComponent, isStandalone: true, selector: "simpo-testimonial-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }, { propertyName: "carouselInner", first: true, predicate: ["carouselInner"], descendants: true }, { propertyName: "carouselItems", predicate: ["carouselItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\" [simpoBorder]=\"style?.border\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [class.px-1]=\"screenWidth < 475\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row content-side w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n\r\n <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-bs-ride=\"carousel\"\r\n data-bs-keyboard=\"false\">\r\n <ol class=\"carousel-indicators\" [ngStyle]=\"{'color': getIndicatorColor()}\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#
|
|
7292
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TestimonialSectionComponent, isStandalone: true, selector: "simpo-testimonial-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }, { propertyName: "carouselInner", first: true, predicate: ["carouselInner"], descendants: true }, { propertyName: "carouselItems", predicate: ["carouselItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\" [simpoBorder]=\"style?.border\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [class.px-1]=\"screenWidth < 475\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row content-side w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n\r\n <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-bs-ride=\"carousel\"\r\n data-bs-keyboard=\"false\">\r\n <ol class=\"carousel-indicators\" [ngStyle]=\"{'color': getIndicatorColor()}\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialFullWidthCarousel\" [attr.data-bs-slide-to]=\"i\">\r\n </li>\r\n </ol>\r\n <div class=\"carousel-inner\" #carouselInner>\r\n <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n [class.active]=\"i === 0\" data-bs-interval=\"10000\" #carouselItem>\r\n <div style=\"width: max-content; margin: auto; max-width: 90%;\" class=\"carousel-parent\"\r\n [class.card-form]=\"content?.display?.showCard\" [simpoCorner]=\"style?.corners\"\r\n [style.borderColor]=\"content?.display?.showCard ? style?.background?.accentColor : 'none'\"\r\n [style.background]=\"content?.display?.showCard ? getColor(style?.background?.accentColor) : 'transparent'\">\r\n <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n <ng-container *ngIf=\"content?.display?.showImage\">\r\n <img loading=\"lazy\" [src]=\"testimonial?.image?.url\" class=\"mb-1\" loading=\"lazy\"\r\n [simpoContainerLayout]=\"getLayout\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"testimonial.image\" [sectionId]=\"data?.id\">\r\n </ng-container>\r\n <simpo-text-editor [(value)]=\"testimonial.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n <ng-container *ngIf=\"testimonial?.inputText?.[1] as textItem\">\r\n <div class=\"d-flex\">\r\n <simpo-text-editor [(value)]=\"textItem.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\r\n data-bs-slide=\"prev\" *ngIf=\"getLength() > 1\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\r\n data-bs-slide=\"next\" *ngIf=\"getLength() > 1\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".total-container{position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:5%;margin-right:5%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators li{background-color:currentColor;opacity:.5}.carousel-indicators .active{background-color:currentColor;opacity:1}.carousel-indicators{bottom:-45px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e\")}.carousel-item{height:100%;transition:transform .6s ease-in-out,opacity .6s ease-in-out}.previous-icon{position:absolute;height:45px}.card-form{border-width:2px;border-style:solid;padding:16px}.carousel-inner{overflow:visible!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.carousel-parent,.carousel-caption{width:100%!important}}li{list-style:none}.heading-medium{font-weight:400!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
|
|
7289
7293
|
//directive
|
|
7290
7294
|
AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContainerFitDirective, selector: "[simpoContainerLayout]", inputs: ["simpoContainerLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
|
7291
7295
|
}
|
|
@@ -7320,7 +7324,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
7320
7324
|
TextEditorComponent,
|
|
7321
7325
|
ImageEditorDirective,
|
|
7322
7326
|
SpacingHorizontalDirective,
|
|
7323
|
-
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\" [simpoBorder]=\"style?.border\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [class.px-1]=\"screenWidth < 475\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row content-side w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n\r\n <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-bs-ride=\"carousel\"\r\n data-bs-keyboard=\"false\">\r\n <ol class=\"carousel-indicators\" [ngStyle]=\"{'color': getIndicatorColor()}\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#
|
|
7327
|
+
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\" [simpoBorder]=\"style?.border\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [class.px-1]=\"screenWidth < 475\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row content-side w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n\r\n <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-bs-ride=\"carousel\"\r\n data-bs-keyboard=\"false\">\r\n <ol class=\"carousel-indicators\" [ngStyle]=\"{'color': getIndicatorColor()}\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialFullWidthCarousel\" [attr.data-bs-slide-to]=\"i\">\r\n </li>\r\n </ol>\r\n <div class=\"carousel-inner\" #carouselInner>\r\n <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n [class.active]=\"i === 0\" data-bs-interval=\"10000\" #carouselItem>\r\n <div style=\"width: max-content; margin: auto; max-width: 90%;\" class=\"carousel-parent\"\r\n [class.card-form]=\"content?.display?.showCard\" [simpoCorner]=\"style?.corners\"\r\n [style.borderColor]=\"content?.display?.showCard ? style?.background?.accentColor : 'none'\"\r\n [style.background]=\"content?.display?.showCard ? getColor(style?.background?.accentColor) : 'transparent'\">\r\n <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n <ng-container *ngIf=\"content?.display?.showImage\">\r\n <img loading=\"lazy\" [src]=\"testimonial?.image?.url\" class=\"mb-1\" loading=\"lazy\"\r\n [simpoContainerLayout]=\"getLayout\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"testimonial.image\" [sectionId]=\"data?.id\">\r\n </ng-container>\r\n <simpo-text-editor [(value)]=\"testimonial.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n <ng-container *ngIf=\"testimonial?.inputText?.[1] as textItem\">\r\n <div class=\"d-flex\">\r\n <simpo-text-editor [(value)]=\"textItem.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\r\n data-bs-slide=\"prev\" *ngIf=\"getLength() > 1\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\r\n data-bs-slide=\"next\" *ngIf=\"getLength() > 1\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".total-container{position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:5%;margin-right:5%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators li{background-color:currentColor;opacity:.5}.carousel-indicators .active{background-color:currentColor;opacity:1}.carousel-indicators{bottom:-45px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e\")}.carousel-item{height:100%;transition:transform .6s ease-in-out,opacity .6s ease-in-out}.previous-icon{position:absolute;height:45px}.card-form{border-width:2px;border-style:solid;padding:16px}.carousel-inner{overflow:visible!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.carousel-parent,.carousel-caption{width:100%!important}}li{list-style:none}.heading-medium{font-weight:400!important}\n"] }]
|
|
7324
7328
|
}], ctorParameters: () => [{ type: EventsService }, { type: i0.Renderer2 }], propDecorators: { data: [{
|
|
7325
7329
|
type: Input
|
|
7326
7330
|
}], index: [{
|
|
@@ -12946,7 +12950,7 @@ class TestimonialFullwidthComponent extends BaseSection {
|
|
|
12946
12950
|
return brightness < 128; // true = dark
|
|
12947
12951
|
}
|
|
12948
12952
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TestimonialFullwidthComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12949
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TestimonialFullwidthComponent, isStandalone: true, selector: "simpo-testimonial-fullwidth", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoBorder]=\"style?.border\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-bs-interval=\"10000\"\r\n data-bs-keyboard=\"false\">\r\n <!-- data-bs-ride=\"carousel\" -->\r\n <ol class=\"carousel-indicators\" [ngStyle]=\"{'color': getIndicatorColor()}\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\">\r\n </li>\r\n </ol>\r\n <div class=\"carousel-inner content-side overflow-visible\">\r\n <div class=\"single_card carousel-item\"\r\n *ngFor=\"let item of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n <!-- this is testimonial cards start-->\r\n <div class=\"main-section\" [id]=\"data?.id\"\r\n [ngClass]=\"{'flex-lg-row-reverse' : style?.positionLayout?.value === 'right' , 'flex-lg-row' : style?.positionLayout?.value === 'left'}\">\r\n <div class=\"left\"\r\n [ngClass]=\"{'setHeight' : screenWidth > 475 , 'mb-1': screenWidth <= 475}\">\r\n <div class=\"heading\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"subtext\">\r\n <simpo-text-editor [(value)]=\"item.inputText[1].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"testimonial-img\" [id]=\"data?.id\">\r\n <img loading=\"lazy\" [src]=\"item?.image?.url\" class=\"person-img\"\r\n [class]=\"data?.id+(item?.image?.id || '')\" [id]=\"data?.id\"\r\n [simpoImageDirective]=\"style?.image\"\r\n [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n [sectionId]=\"data?.id\" *ngIf=\"item?.image?.url\">\r\n <img class=\"person-img\" [id]=\"data?.id\" [simpoImageDirective]=\"style?.image\"\r\n [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n [sectionId]=\"data?.id\"\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/753282c1776171503712178724315_3e307710-5dd9-4f94-a34b-c4971fd2d26b.jpg\"\r\n *ngIf=\"!item?.image?.url\">\r\n <div class=\"person-details\">\r\n <div style=\"z-index: 100;\">\r\n <!-- <div class=\"person-name\"\r\n [ngClass]=\"item.inputText[2].label === 'Person-Name' ? 'body-large' : 'heading-large '\"[innerHtml]=\"item.inputText[2].value | sanitizeHtml\">\r\n\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[2].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n <!-- <div class=\"person-type\"\r\n [ngClass]=\"item.inputText[3].label === 'Person-Type' ? 'body-large' : 'heading-large lh-2 mb-3'\"\r\n [innerHtml]=\"item.inputText[3].value | sanitizeHtml\">\r\n\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[3].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- this is testimonial cards start-->\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n data-bs-slide=\"prev\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n data-bs-slide=\"next\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.overflow-visible{overflow:visible}.setHeight{height:40vh;max-height:40vh;overflow-y:scroll}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:space-between;margin:auto;align-items:center;width:80%}.left{width:65%;display:flex;flex-direction:column;justify-content:left}.heading{padding:20px 0 6px;width:90%}.heading-large{font-size:2.5rem;font-weight:700;line-height:3rem}.subtext{font-size:14px;font-weight:400;line-height:1.6;width:90%;margin-top:10px}.body-large{font-size:16px;font-weight:400;font-family:desc}.testimonial-img{position:relative}.right{width:28%}.person-img{width:100%;height:100%;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e\")}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 275px) and (max-width: 500px){.main-section{width:100%!important;flex-direction:column-reverse!important}.left{width:100%!important;display:flex;flex-direction:column}.heading,.subtext{width:100%!important}.right{width:95%!important;display:flex;flex-direction:column}.carousel-control-prev,.carousel-control-next{width:8%!important}.container-fluid{padding:unset!important}}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators li{background-color:currentColor;opacity:.5}.carousel-indicators .active{background-color:currentColor;opacity:1}@media screen and (min-width: 501px){.carousel-control-prev,.carousel-control-next{width:5%!important}}.previous-icon{position:absolute;height:45px}li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type:
|
|
12953
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TestimonialFullwidthComponent, isStandalone: true, selector: "simpo-testimonial-fullwidth", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoBorder]=\"style?.border\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-bs-interval=\"10000\"\r\n data-bs-keyboard=\"false\">\r\n <!-- data-bs-ride=\"carousel\" -->\r\n <ol class=\"carousel-indicators\" [ngStyle]=\"{'color': getIndicatorColor()}\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\">\r\n </li>\r\n </ol>\r\n <div class=\"carousel-inner content-side overflow-visible\">\r\n <div class=\"single_card carousel-item\"\r\n *ngFor=\"let item of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n <!-- this is testimonial cards start-->\r\n <div class=\"main-section\" [id]=\"data?.id\"\r\n [ngClass]=\"{'flex-lg-row-reverse' : style?.positionLayout?.value === 'left' , 'flex-lg-row' : style?.positionLayout?.value === 'right'}\">\r\n <div class=\"left\"\r\n [ngClass]=\"{'setHeight' : screenWidth > 475 , 'mb-1': screenWidth <= 475}\">\r\n <div class=\"heading\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"subtext\">\r\n <simpo-text-editor [(value)]=\"item.inputText[1].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"testimonial-img\" [id]=\"data?.id\">\r\n <img loading=\"lazy\" [src]=\"item?.image?.url\" class=\"person-img\"\r\n [class]=\"data?.id+(item?.image?.id || '')\" [id]=\"data?.id\"\r\n [simpoImageDirective]=\"style?.image\"\r\n [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n [sectionId]=\"data?.id\" *ngIf=\"item?.image?.url\">\r\n <img class=\"person-img\" [id]=\"data?.id\" [simpoImageDirective]=\"style?.image\"\r\n [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n [sectionId]=\"data?.id\"\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/753282c1776171503712178724315_3e307710-5dd9-4f94-a34b-c4971fd2d26b.jpg\"\r\n *ngIf=\"!item?.image?.url\">\r\n <div class=\"person-details\">\r\n <div style=\"z-index: 100;\">\r\n <!-- <div class=\"person-name\"\r\n [ngClass]=\"item.inputText[2].label === 'Person-Name' ? 'body-large' : 'heading-large '\"[innerHtml]=\"item.inputText[2].value | sanitizeHtml\">\r\n\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[2].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n <!-- <div class=\"person-type\"\r\n [ngClass]=\"item.inputText[3].label === 'Person-Type' ? 'body-large' : 'heading-large lh-2 mb-3'\"\r\n [innerHtml]=\"item.inputText[3].value | sanitizeHtml\">\r\n\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[3].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- this is testimonial cards start-->\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n data-bs-slide=\"prev\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n data-bs-slide=\"next\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.overflow-visible{overflow:visible}.setHeight{height:40vh;max-height:40vh;overflow-y:scroll}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:space-between;margin:auto;align-items:center;width:80%}.left{width:65%;display:flex;flex-direction:column;justify-content:left}.heading{padding:20px 0 6px;width:90%}.heading-large{font-size:2.5rem;font-weight:700;line-height:3rem}.subtext{font-size:14px;font-weight:400;line-height:1.6;width:90%;margin-top:10px}.body-large{font-size:16px;font-weight:400;font-family:desc}.testimonial-img{position:relative}.right{width:28%}.person-img{width:100%;height:100%;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e\")}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 275px) and (max-width: 500px){.main-section{width:100%!important;flex-direction:column-reverse!important}.left{width:100%!important;display:flex;flex-direction:column}.heading,.subtext{width:100%!important}.right{width:95%!important;display:flex;flex-direction:column}.carousel-control-prev,.carousel-control-next{width:8%!important}.container-fluid{padding:unset!important}}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators li{background-color:currentColor;opacity:.5}.carousel-indicators .active{background-color:currentColor;opacity:1}@media screen and (min-width: 501px){.carousel-control-prev,.carousel-control-next{width:5%!important}}.previous-icon{position:absolute;height:45px}li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type:
|
|
12950
12954
|
//directive
|
|
12951
12955
|
AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
|
12952
12956
|
}
|
|
@@ -12980,7 +12984,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
12980
12984
|
ImageEditorDirective,
|
|
12981
12985
|
ObjectPositionDirective,
|
|
12982
12986
|
SpacingHorizontalDirective
|
|
12983
|
-
], template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoBorder]=\"style?.border\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-bs-interval=\"10000\"\r\n data-bs-keyboard=\"false\">\r\n <!-- data-bs-ride=\"carousel\" -->\r\n <ol class=\"carousel-indicators\" [ngStyle]=\"{'color': getIndicatorColor()}\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\">\r\n </li>\r\n </ol>\r\n <div class=\"carousel-inner content-side overflow-visible\">\r\n <div class=\"single_card carousel-item\"\r\n *ngFor=\"let item of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n <!-- this is testimonial cards start-->\r\n <div class=\"main-section\" [id]=\"data?.id\"\r\n [ngClass]=\"{'flex-lg-row-reverse' : style?.positionLayout?.value === 'right' , 'flex-lg-row' : style?.positionLayout?.value === 'left'}\">\r\n <div class=\"left\"\r\n [ngClass]=\"{'setHeight' : screenWidth > 475 , 'mb-1': screenWidth <= 475}\">\r\n <div class=\"heading\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"subtext\">\r\n <simpo-text-editor [(value)]=\"item.inputText[1].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"testimonial-img\" [id]=\"data?.id\">\r\n <img loading=\"lazy\" [src]=\"item?.image?.url\" class=\"person-img\"\r\n [class]=\"data?.id+(item?.image?.id || '')\" [id]=\"data?.id\"\r\n [simpoImageDirective]=\"style?.image\"\r\n [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n [sectionId]=\"data?.id\" *ngIf=\"item?.image?.url\">\r\n <img class=\"person-img\" [id]=\"data?.id\" [simpoImageDirective]=\"style?.image\"\r\n [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n [sectionId]=\"data?.id\"\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/753282c1776171503712178724315_3e307710-5dd9-4f94-a34b-c4971fd2d26b.jpg\"\r\n *ngIf=\"!item?.image?.url\">\r\n <div class=\"person-details\">\r\n <div style=\"z-index: 100;\">\r\n <!-- <div class=\"person-name\"\r\n [ngClass]=\"item.inputText[2].label === 'Person-Name' ? 'body-large' : 'heading-large '\"[innerHtml]=\"item.inputText[2].value | sanitizeHtml\">\r\n\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[2].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n <!-- <div class=\"person-type\"\r\n [ngClass]=\"item.inputText[3].label === 'Person-Type' ? 'body-large' : 'heading-large lh-2 mb-3'\"\r\n [innerHtml]=\"item.inputText[3].value | sanitizeHtml\">\r\n\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[3].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- this is testimonial cards start-->\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n data-bs-slide=\"prev\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n data-bs-slide=\"next\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.overflow-visible{overflow:visible}.setHeight{height:40vh;max-height:40vh;overflow-y:scroll}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:space-between;margin:auto;align-items:center;width:80%}.left{width:65%;display:flex;flex-direction:column;justify-content:left}.heading{padding:20px 0 6px;width:90%}.heading-large{font-size:2.5rem;font-weight:700;line-height:3rem}.subtext{font-size:14px;font-weight:400;line-height:1.6;width:90%;margin-top:10px}.body-large{font-size:16px;font-weight:400;font-family:desc}.testimonial-img{position:relative}.right{width:28%}.person-img{width:100%;height:100%;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e\")}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 275px) and (max-width: 500px){.main-section{width:100%!important;flex-direction:column-reverse!important}.left{width:100%!important;display:flex;flex-direction:column}.heading,.subtext{width:100%!important}.right{width:95%!important;display:flex;flex-direction:column}.carousel-control-prev,.carousel-control-next{width:8%!important}.container-fluid{padding:unset!important}}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators li{background-color:currentColor;opacity:.5}.carousel-indicators .active{background-color:currentColor;opacity:1}@media screen and (min-width: 501px){.carousel-control-prev,.carousel-control-next{width:5%!important}}.previous-icon{position:absolute;height:45px}li{list-style:none}\n"] }]
|
|
12987
|
+
], template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoBorder]=\"style?.border\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-bs-interval=\"10000\"\r\n data-bs-keyboard=\"false\">\r\n <!-- data-bs-ride=\"carousel\" -->\r\n <ol class=\"carousel-indicators\" [ngStyle]=\"{'color': getIndicatorColor()}\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\">\r\n </li>\r\n </ol>\r\n <div class=\"carousel-inner content-side overflow-visible\">\r\n <div class=\"single_card carousel-item\"\r\n *ngFor=\"let item of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n <!-- this is testimonial cards start-->\r\n <div class=\"main-section\" [id]=\"data?.id\"\r\n [ngClass]=\"{'flex-lg-row-reverse' : style?.positionLayout?.value === 'left' , 'flex-lg-row' : style?.positionLayout?.value === 'right'}\">\r\n <div class=\"left\"\r\n [ngClass]=\"{'setHeight' : screenWidth > 475 , 'mb-1': screenWidth <= 475}\">\r\n <div class=\"heading\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"subtext\">\r\n <simpo-text-editor [(value)]=\"item.inputText[1].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"testimonial-img\" [id]=\"data?.id\">\r\n <img loading=\"lazy\" [src]=\"item?.image?.url\" class=\"person-img\"\r\n [class]=\"data?.id+(item?.image?.id || '')\" [id]=\"data?.id\"\r\n [simpoImageDirective]=\"style?.image\"\r\n [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n [sectionId]=\"data?.id\" *ngIf=\"item?.image?.url\">\r\n <img class=\"person-img\" [id]=\"data?.id\" [simpoImageDirective]=\"style?.image\"\r\n [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n [sectionId]=\"data?.id\"\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/753282c1776171503712178724315_3e307710-5dd9-4f94-a34b-c4971fd2d26b.jpg\"\r\n *ngIf=\"!item?.image?.url\">\r\n <div class=\"person-details\">\r\n <div style=\"z-index: 100;\">\r\n <!-- <div class=\"person-name\"\r\n [ngClass]=\"item.inputText[2].label === 'Person-Name' ? 'body-large' : 'heading-large '\"[innerHtml]=\"item.inputText[2].value | sanitizeHtml\">\r\n\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[2].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n <!-- <div class=\"person-type\"\r\n [ngClass]=\"item.inputText[3].label === 'Person-Type' ? 'body-large' : 'heading-large lh-2 mb-3'\"\r\n [innerHtml]=\"item.inputText[3].value | sanitizeHtml\">\r\n\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[3].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- this is testimonial cards start-->\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n data-bs-slide=\"prev\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n data-bs-slide=\"next\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.overflow-visible{overflow:visible}.setHeight{height:40vh;max-height:40vh;overflow-y:scroll}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:space-between;margin:auto;align-items:center;width:80%}.left{width:65%;display:flex;flex-direction:column;justify-content:left}.heading{padding:20px 0 6px;width:90%}.heading-large{font-size:2.5rem;font-weight:700;line-height:3rem}.subtext{font-size:14px;font-weight:400;line-height:1.6;width:90%;margin-top:10px}.body-large{font-size:16px;font-weight:400;font-family:desc}.testimonial-img{position:relative}.right{width:28%}.person-img{width:100%;height:100%;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e\")}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 275px) and (max-width: 500px){.main-section{width:100%!important;flex-direction:column-reverse!important}.left{width:100%!important;display:flex;flex-direction:column}.heading,.subtext{width:100%!important}.right{width:95%!important;display:flex;flex-direction:column}.carousel-control-prev,.carousel-control-next{width:8%!important}.container-fluid{padding:unset!important}}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators li{background-color:currentColor;opacity:.5}.carousel-indicators .active{background-color:currentColor;opacity:1}@media screen and (min-width: 501px){.carousel-control-prev,.carousel-control-next{width:5%!important}}.previous-icon{position:absolute;height:45px}li{list-style:none}\n"] }]
|
|
12984
12988
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
12985
12989
|
type: Input
|
|
12986
12990
|
}], index: [{
|
|
@@ -16745,10 +16749,10 @@ class NewTestimonialsComponent extends BaseSection {
|
|
|
16745
16749
|
return { ...this.styles?.layout };
|
|
16746
16750
|
}
|
|
16747
16751
|
getImageData() {
|
|
16748
|
-
return this.content?.listItem.data[this
|
|
16752
|
+
return this.content?.listItem.data[this.idx]?.image;
|
|
16749
16753
|
}
|
|
16750
16754
|
getImageUrl() {
|
|
16751
|
-
return this.content?.listItem?.data[this
|
|
16755
|
+
return this.content?.listItem?.data[this.idx]?.image?.url;
|
|
16752
16756
|
}
|
|
16753
16757
|
getImageType() {
|
|
16754
16758
|
if (this.content?.listItem?.data[this?.idx]?.image?.url?.includes('.mp4'))
|
|
@@ -16812,7 +16816,7 @@ class NewTestimonialsComponent extends BaseSection {
|
|
|
16812
16816
|
});
|
|
16813
16817
|
}
|
|
16814
16818
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewTestimonialsComponent, deps: [{ token: EventsService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16815
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NewTestimonialsComponent, isStandalone: true, selector: "simpo-new-testimonials", inputs: { data: "data", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor", index: "index" }, host: { listeners: { "window: resize": "getScreenSize($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "carouselInner", first: true, predicate: ["carouselInner"], descendants: true }, { propertyName: "carouselItems", predicate: ["carouselItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\" [simpoBorder]=\"styles?.border\" [id]=\"data?.id\">\r\n <div class=\"parent-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoBackground]=\"styles?.background\">\r\n <div class=\"d-flex flex-column\" [simpoOverlay]=\"styles?.background\" [simpoLayout]=\"styles?.layout\"\r\n [id]=\"data?.id\">\r\n <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div class=\"list-items mt-3 d-flex gap-3\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\"\r\n [class.flex-column]=\"screenWidth < 475\">\r\n <div class=\"image-container w-35 height-50\" [class.w-100]=\"screenWidth < 475\" [id]=\"data?.id\"\r\n [class.h-30]=\"screenWidth < 475\" [class.bg-black]=\"getImageType() == 'Video'\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <ng-container>\r\n <ng-container *ngIf=\"getImageType() == 'Image'\">\r\n <img [src]=\"getImageUrl()\" alt=\"Selected Image\" class=\"w-100 h-100\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"
|
|
16819
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NewTestimonialsComponent, isStandalone: true, selector: "simpo-new-testimonials", inputs: { data: "data", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor", index: "index" }, host: { listeners: { "window: resize": "getScreenSize($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "carouselInner", first: true, predicate: ["carouselInner"], descendants: true }, { propertyName: "carouselItems", predicate: ["carouselItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\" [simpoBorder]=\"styles?.border\" [id]=\"data?.id\">\r\n <div class=\"parent-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoBackground]=\"styles?.background\">\r\n <div class=\"d-flex flex-column\" [simpoOverlay]=\"styles?.background\" [simpoLayout]=\"styles?.layout\"\r\n [id]=\"data?.id\">\r\n <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div class=\"list-items mt-3 d-flex gap-3\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\"\r\n [class.flex-column]=\"screenWidth < 475\">\r\n <div class=\"image-container w-35 height-50\" [class.w-100]=\"screenWidth < 475\" [id]=\"data?.id\"\r\n [class.h-30]=\"screenWidth < 475\" [class.bg-black]=\"getImageType() == 'Video'\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <ng-container>\r\n <ng-container *ngIf=\"getImageType() == 'Image'\">\r\n <img loading=\"lazy\" class=\"w-100 h-100\" [src]=\"getImageUrl()\" alt=\"Selected Image\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\" loading=\"lazy\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\"\r\n [sectionId]=\"data?.id\">\r\n <!-- <img [src]=\"getImageUrl()\" alt=\"Selected Image\" class=\"w-100 h-100\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"> -->\r\n </ng-container>\r\n <ng-container *ngIf=\"getImageType() == 'Video'\">\r\n <video [src]=\"getImageUrl()\" class=\"w-100 h-100\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n controls></video>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <div id=\"carouselExampleIndicators\" data-bs-keyboard=\"false\"\r\n class=\"carousel slide w-65 d-flex flex-column\"\r\n [simpoContentAlignment]=\"styles?.contentAlignment\" [class.w-100]=\"screenWidth < 475\">\r\n <div class=\"carousel-inner overflow-unset\" [class.mb-6]=\"screenWidth < 475\" #carouselInner>\r\n <ng-container *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <div class=\"carousel-item h-100\" [ngClass]=\"{'active': i === 0}\" #carouselItem>\r\n <div class=\"quote-image mb-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"31\"\r\n viewBox=\"0 0 36 31\" fill=\"none\">\r\n <path\r\n d=\"M35.3998 3.29993C35.5998 3.09993 35.7998 2.69993 35.5998 2.29993C35.3998 2.09993 34.9998 1.69993 34.5998 0.899925C33.9998 0.699925 33.5998 0.699926 32.9998 1.09993C25.3998 5.89993 21.1998 11.4999 20.3998 17.8999C18.9998 27.8999 27.9998 32.6999 32.5998 28.2999C37.1998 23.8999 34.3998 18.2999 31.1998 16.6999C27.9998 15.0999 25.9998 15.6999 26.1998 13.6999C26.5998 11.6999 31.1998 6.09993 35.3998 3.29993ZM14.7998 1.09993C14.1998 0.699926 13.5998 0.699926 13.1998 1.09993C5.59983 5.89993 1.39983 11.4999 0.599832 18.0999C-0.800168 28.0999 8.19983 32.8999 12.7998 28.4999C17.3998 24.0999 14.5998 18.4999 11.3998 16.8999C7.99983 15.4999 5.99983 16.0999 6.39983 13.8999C6.79983 11.8999 11.3998 6.29993 15.5998 3.49993C15.7998 3.29993 15.9998 2.89993 15.7998 2.49993C15.5998 2.29993 15.1998 1.89993 14.7998 1.09993Z\"\r\n [attr.fill]=\"styles?.background?.accentColor\" />\r\n </svg>\r\n </div>\r\n <div class=\"item mb-3\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"prev-next d-flex align-items-center justify-content-between\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <div class=\"carousel-control-prev\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n data-bs-slide=\"prev\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n (click)=\"idx = (idx - 1 < 0 ? getLength() - 1 : idx - 1)\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n\r\n <div class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n data-bs-slide=\"next\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n (click)=\"idx = (idx + 1 >= getLength() ? 0 : idx + 1)\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <div class=\"d-flex\">\r\n <app-button-element [buttonContent]=\"data?.action?.buttons[0]?.content \"\r\n [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n [buttonId]=\"data?.action?.buttons[0]?.id\" [edit]=\"edit\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-container{position:relative;height:auto}.bg-black{background:#000}.carousel-control-prev,.carousel-control-next{position:unset!important;width:30px;border-radius:50%!important;height:30px}.w-35{width:35%!important}.w-65{width:65%!important}.image-container{z-index:100}.prev-next{width:100%}.overflow-visible{overflow:visible!important}.overflow-unset{overflow:unset!important}@media screen and (max-width: 475px){.list-items{flex-direction:column!important}.h-30{height:30vh!important}}.height-50{height:50vh}.w-100{width:100%!important}.mb-6{margin-bottom:2.5rem!important}.flex-column{flex-direction:column!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type:
|
|
16816
16820
|
// directives
|
|
16817
16821
|
SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "component", type:
|
|
16818
16822
|
// components
|
|
@@ -16849,7 +16853,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
16849
16853
|
TextEditorComponent,
|
|
16850
16854
|
SimpoButtonComponent,
|
|
16851
16855
|
ImageEditorDirective,
|
|
16852
|
-
], template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\" [simpoBorder]=\"styles?.border\" [id]=\"data?.id\">\r\n <div class=\"parent-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoBackground]=\"styles?.background\">\r\n <div class=\"d-flex flex-column\" [simpoOverlay]=\"styles?.background\" [simpoLayout]=\"styles?.layout\"\r\n [id]=\"data?.id\">\r\n <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div class=\"list-items mt-3 d-flex gap-3\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\"\r\n [class.flex-column]=\"screenWidth < 475\">\r\n <div class=\"image-container w-35 height-50\" [class.w-100]=\"screenWidth < 475\" [id]=\"data?.id\"\r\n [class.h-30]=\"screenWidth < 475\" [class.bg-black]=\"getImageType() == 'Video'\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <ng-container>\r\n <ng-container *ngIf=\"getImageType() == 'Image'\">\r\n <img [src]=\"getImageUrl()\" alt=\"Selected Image\" class=\"w-100 h-100\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"
|
|
16856
|
+
], template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\" [simpoBorder]=\"styles?.border\" [id]=\"data?.id\">\r\n <div class=\"parent-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoBackground]=\"styles?.background\">\r\n <div class=\"d-flex flex-column\" [simpoOverlay]=\"styles?.background\" [simpoLayout]=\"styles?.layout\"\r\n [id]=\"data?.id\">\r\n <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div class=\"list-items mt-3 d-flex gap-3\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\"\r\n [class.flex-column]=\"screenWidth < 475\">\r\n <div class=\"image-container w-35 height-50\" [class.w-100]=\"screenWidth < 475\" [id]=\"data?.id\"\r\n [class.h-30]=\"screenWidth < 475\" [class.bg-black]=\"getImageType() == 'Video'\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <ng-container>\r\n <ng-container *ngIf=\"getImageType() == 'Image'\">\r\n <img loading=\"lazy\" class=\"w-100 h-100\" [src]=\"getImageUrl()\" alt=\"Selected Image\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\" loading=\"lazy\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\"\r\n [sectionId]=\"data?.id\">\r\n <!-- <img [src]=\"getImageUrl()\" alt=\"Selected Image\" class=\"w-100 h-100\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"> -->\r\n </ng-container>\r\n <ng-container *ngIf=\"getImageType() == 'Video'\">\r\n <video [src]=\"getImageUrl()\" class=\"w-100 h-100\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n controls></video>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <div id=\"carouselExampleIndicators\" data-bs-keyboard=\"false\"\r\n class=\"carousel slide w-65 d-flex flex-column\"\r\n [simpoContentAlignment]=\"styles?.contentAlignment\" [class.w-100]=\"screenWidth < 475\">\r\n <div class=\"carousel-inner overflow-unset\" [class.mb-6]=\"screenWidth < 475\" #carouselInner>\r\n <ng-container *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <div class=\"carousel-item h-100\" [ngClass]=\"{'active': i === 0}\" #carouselItem>\r\n <div class=\"quote-image mb-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"31\"\r\n viewBox=\"0 0 36 31\" fill=\"none\">\r\n <path\r\n d=\"M35.3998 3.29993C35.5998 3.09993 35.7998 2.69993 35.5998 2.29993C35.3998 2.09993 34.9998 1.69993 34.5998 0.899925C33.9998 0.699925 33.5998 0.699926 32.9998 1.09993C25.3998 5.89993 21.1998 11.4999 20.3998 17.8999C18.9998 27.8999 27.9998 32.6999 32.5998 28.2999C37.1998 23.8999 34.3998 18.2999 31.1998 16.6999C27.9998 15.0999 25.9998 15.6999 26.1998 13.6999C26.5998 11.6999 31.1998 6.09993 35.3998 3.29993ZM14.7998 1.09993C14.1998 0.699926 13.5998 0.699926 13.1998 1.09993C5.59983 5.89993 1.39983 11.4999 0.599832 18.0999C-0.800168 28.0999 8.19983 32.8999 12.7998 28.4999C17.3998 24.0999 14.5998 18.4999 11.3998 16.8999C7.99983 15.4999 5.99983 16.0999 6.39983 13.8999C6.79983 11.8999 11.3998 6.29993 15.5998 3.49993C15.7998 3.29993 15.9998 2.89993 15.7998 2.49993C15.5998 2.29993 15.1998 1.89993 14.7998 1.09993Z\"\r\n [attr.fill]=\"styles?.background?.accentColor\" />\r\n </svg>\r\n </div>\r\n <div class=\"item mb-3\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"prev-next d-flex align-items-center justify-content-between\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <div class=\"carousel-control-prev\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n data-bs-slide=\"prev\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n (click)=\"idx = (idx - 1 < 0 ? getLength() - 1 : idx - 1)\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n\r\n <div class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n data-bs-slide=\"next\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n (click)=\"idx = (idx + 1 >= getLength() ? 0 : idx + 1)\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <div class=\"d-flex\">\r\n <app-button-element [buttonContent]=\"data?.action?.buttons[0]?.content \"\r\n [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n [buttonId]=\"data?.action?.buttons[0]?.id\" [edit]=\"edit\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-container{position:relative;height:auto}.bg-black{background:#000}.carousel-control-prev,.carousel-control-next{position:unset!important;width:30px;border-radius:50%!important;height:30px}.w-35{width:35%!important}.w-65{width:65%!important}.image-container{z-index:100}.prev-next{width:100%}.overflow-visible{overflow:visible!important}.overflow-unset{overflow:unset!important}@media screen and (max-width: 475px){.list-items{flex-direction:column!important}.h-30{height:30vh!important}}.height-50{height:50vh}.w-100{width:100%!important}.mb-6{margin-bottom:2.5rem!important}.flex-column{flex-direction:column!important}\n"] }]
|
|
16853
16857
|
}], ctorParameters: () => [{ type: EventsService }, { type: i0.Renderer2 }], propDecorators: { data: [{
|
|
16854
16858
|
type: Input
|
|
16855
16859
|
}], edit: [{
|
|
@@ -17756,7 +17760,18 @@ class SmallProductListingComponent {
|
|
|
17756
17760
|
return (((product?.price?.value - product?.price?.discountedPrice) / product?.price?.value) * 100).toFixed(0);
|
|
17757
17761
|
}
|
|
17758
17762
|
goToProductDetail(product) {
|
|
17759
|
-
|
|
17763
|
+
const slug = product.slugifiedName || this.toSlug(product.name);
|
|
17764
|
+
if (!slug)
|
|
17765
|
+
return;
|
|
17766
|
+
this.router.navigate(['details', slug], {});
|
|
17767
|
+
}
|
|
17768
|
+
toSlug(input) {
|
|
17769
|
+
if (!input)
|
|
17770
|
+
return null;
|
|
17771
|
+
const noWhitespace = input.replace(/\s+/g, '-');
|
|
17772
|
+
const normalized = noWhitespace.normalize('NFD');
|
|
17773
|
+
const slug = normalized.replace(/[^\w-]/g, '');
|
|
17774
|
+
return slug.toLowerCase().replace(/-+/g, '-').replace(/^-|-$/g, '');
|
|
17760
17775
|
}
|
|
17761
17776
|
getSupportingColor(color) {
|
|
17762
17777
|
let hex = color;
|
|
@@ -23283,7 +23298,7 @@ class CategoryProductComponent extends BaseSection {
|
|
|
23283
23298
|
return { ...this.styles?.layout };
|
|
23284
23299
|
}
|
|
23285
23300
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CategoryProductComponent, deps: [{ token: RestService }, { token: CartService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
23286
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CategoryProductComponent, isStandalone: true, selector: "simpo-category-product", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\r\n [simpoBackground]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <section class=\"container-fluid d-block\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [spacingHorizontal]=\"getSpacingLayout\" [simpoOverlay]=\"styles?.background\">\r\n <div *ngFor=\"let item of data?.content?.inputText\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <section class=\"m-auto position-relative w-100\" [ngClass]=\"{'adjustPosition': isMobile}\">\r\n <section class=\"d-flex\">\r\n <ng-container *ngFor=\"let category of categoryList; let idx = index\">\r\n <div class=\"d-flex flex-column align-items-center category-tag position-relative\" style=\"gap: 5px;\"\r\n [style.backgroundColor]=\"selectCategoryId === category.categoryId ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\"\r\n [style.borderColor]=\"selectCategoryId == category.categoryId ? styles?.background?.accentColor : ''\"\r\n (click)=\"selectCategory(category.categoryId)\">\r\n <img [src]=\"category.imgUrl[0]\" alt=\"\" height=\"30px\" width=\"30px\" style=\"border-radius: 50%;\">\r\n <span class=\"trim-text\" style=\"font-size: .8125rem; text-align: center !important;\"\r\n [style.color]=\"selectCategoryId === category.categoryId ? (styles?.background?.accentColor) : ''\">{{\r\n category.categoryName | titlecase }}</span>\r\n </div>\r\n </ng-container>\r\n </section>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow && categoryList?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"showRightArrow && categoryList?.length\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </ng-container>\r\n <section class=\"product-list position-relative\"\r\n [style.borderTopLeftRadius.px]='(selectCategoryId === categoryList?.[0]?.categoryId) ? 0 : 8' #container\r\n *ngIf=\"dataList.length\" [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n <section class=\"d-flex
|
|
23301
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CategoryProductComponent, isStandalone: true, selector: "simpo-category-product", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\r\n [simpoBackground]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <section class=\"container-fluid d-block\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [spacingHorizontal]=\"getSpacingLayout\" [simpoOverlay]=\"styles?.background\">\r\n <div *ngFor=\"let item of data?.content?.inputText\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <section class=\"m-auto position-relative w-100\" [ngClass]=\"{'adjustPosition': isMobile}\">\r\n <section class=\"d-flex\">\r\n <ng-container *ngFor=\"let category of categoryList; let idx = index\">\r\n <div class=\"d-flex flex-column align-items-center category-tag position-relative\" style=\"gap: 5px;\"\r\n [style.backgroundColor]=\"selectCategoryId === category.categoryId ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\"\r\n [style.borderColor]=\"selectCategoryId == category.categoryId ? styles?.background?.accentColor : ''\"\r\n (click)=\"selectCategory(category.categoryId)\">\r\n <img [src]=\"category.imgUrl[0]\" alt=\"\" height=\"30px\" width=\"30px\" style=\"border-radius: 50%;\">\r\n <span class=\"trim-text\" style=\"font-size: .8125rem; text-align: center !important;\"\r\n [style.color]=\"selectCategoryId === category.categoryId ? (styles?.background?.accentColor) : ''\">{{\r\n category.categoryName | titlecase }}</span>\r\n </div>\r\n </ng-container>\r\n </section>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow && categoryList?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"showRightArrow && categoryList?.length\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </ng-container>\r\n <section class=\"product-list position-relative\"\r\n [style.borderTopLeftRadius.px]='(selectCategoryId === categoryList?.[0]?.categoryId) ? 0 : 8' #container\r\n *ngIf=\"dataList.length\" [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n <section class=\"d-flex\" id=\"productScrollBar\" *ngIf=\"!apiLoading\"\r\n [ngClass]=\"{'overflow-scroll' : styles?.direction === 'ROW' , 'flex-wrap': styles?.direction === 'COLUMN'}\">\r\n <ng-container *ngFor=\"let product of dataList\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\"\r\n [isScrollable]=\"true\"></simpo-small-product-listing>\r\n </ng-container>\r\n </section>\r\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n </section>\r\n </section>\r\n </section>\r\n\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n<ng-template #loadingTemplate>\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n</ng-template>", styles: [".total-container{height:auto;position:relative}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.d-block{display:block!important}.category-tag{padding:1rem .3rem;height:105px;width:fit-content;border-top-left-radius:10px;border-top-right-radius:10px;cursor:pointer;border-top:8px solid transparent}.product-list{padding:40px 20px;border-radius:8px}.adjustPosition{position:relative!important;left:-15px!important;width:108%!important}.overflow-scroll{overflow-x:auto}div[class*=arrow]{background-color:#fff;color:#000;padding:5px;border-radius:50%;position:absolute;top:50%;display:flex;align-items:center;justify-content:center;z-index:100;cursor:pointer;box-shadow:#63636333 0 2px 8px}.left-arrow{left:10px}.right-arrow{right:10px}#productScrollBar{scroll-behavior:smooth}@media screen and (max-width: 475px){.padding-1{padding-left:1rem;padding-right:1rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass", "index"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { 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: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }] }); }
|
|
23287
23302
|
}
|
|
23288
23303
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CategoryProductComponent, decorators: [{
|
|
23289
23304
|
type: Component,
|
|
@@ -23302,7 +23317,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
23302
23317
|
CardSkeletonLoaderComponent, SvgDividerComponent, TextEditorComponent,
|
|
23303
23318
|
OverlayDirective,
|
|
23304
23319
|
BorderDirective
|
|
23305
|
-
], template: "<section class=\"total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\r\n [simpoBackground]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <section class=\"container-fluid d-block\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [spacingHorizontal]=\"getSpacingLayout\" [simpoOverlay]=\"styles?.background\">\r\n <div *ngFor=\"let item of data?.content?.inputText\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <section class=\"m-auto position-relative w-100\" [ngClass]=\"{'adjustPosition': isMobile}\">\r\n <section class=\"d-flex\">\r\n <ng-container *ngFor=\"let category of categoryList; let idx = index\">\r\n <div class=\"d-flex flex-column align-items-center category-tag position-relative\" style=\"gap: 5px;\"\r\n [style.backgroundColor]=\"selectCategoryId === category.categoryId ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\"\r\n [style.borderColor]=\"selectCategoryId == category.categoryId ? styles?.background?.accentColor : ''\"\r\n (click)=\"selectCategory(category.categoryId)\">\r\n <img [src]=\"category.imgUrl[0]\" alt=\"\" height=\"30px\" width=\"30px\" style=\"border-radius: 50%;\">\r\n <span class=\"trim-text\" style=\"font-size: .8125rem; text-align: center !important;\"\r\n [style.color]=\"selectCategoryId === category.categoryId ? (styles?.background?.accentColor) : ''\">{{\r\n category.categoryName | titlecase }}</span>\r\n </div>\r\n </ng-container>\r\n </section>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow && categoryList?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"showRightArrow && categoryList?.length\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </ng-container>\r\n <section class=\"product-list position-relative\"\r\n [style.borderTopLeftRadius.px]='(selectCategoryId === categoryList?.[0]?.categoryId) ? 0 : 8' #container\r\n *ngIf=\"dataList.length\" [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n <section class=\"d-flex
|
|
23320
|
+
], template: "<section class=\"total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\r\n [simpoBackground]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <section class=\"container-fluid d-block\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [spacingHorizontal]=\"getSpacingLayout\" [simpoOverlay]=\"styles?.background\">\r\n <div *ngFor=\"let item of data?.content?.inputText\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <section class=\"m-auto position-relative w-100\" [ngClass]=\"{'adjustPosition': isMobile}\">\r\n <section class=\"d-flex\">\r\n <ng-container *ngFor=\"let category of categoryList; let idx = index\">\r\n <div class=\"d-flex flex-column align-items-center category-tag position-relative\" style=\"gap: 5px;\"\r\n [style.backgroundColor]=\"selectCategoryId === category.categoryId ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\"\r\n [style.borderColor]=\"selectCategoryId == category.categoryId ? styles?.background?.accentColor : ''\"\r\n (click)=\"selectCategory(category.categoryId)\">\r\n <img [src]=\"category.imgUrl[0]\" alt=\"\" height=\"30px\" width=\"30px\" style=\"border-radius: 50%;\">\r\n <span class=\"trim-text\" style=\"font-size: .8125rem; text-align: center !important;\"\r\n [style.color]=\"selectCategoryId === category.categoryId ? (styles?.background?.accentColor) : ''\">{{\r\n category.categoryName | titlecase }}</span>\r\n </div>\r\n </ng-container>\r\n </section>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow && categoryList?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"showRightArrow && categoryList?.length\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </ng-container>\r\n <section class=\"product-list position-relative\"\r\n [style.borderTopLeftRadius.px]='(selectCategoryId === categoryList?.[0]?.categoryId) ? 0 : 8' #container\r\n *ngIf=\"dataList.length\" [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n <section class=\"d-flex\" id=\"productScrollBar\" *ngIf=\"!apiLoading\"\r\n [ngClass]=\"{'overflow-scroll' : styles?.direction === 'ROW' , 'flex-wrap': styles?.direction === 'COLUMN'}\">\r\n <ng-container *ngFor=\"let product of dataList\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\"\r\n [isScrollable]=\"true\"></simpo-small-product-listing>\r\n </ng-container>\r\n </section>\r\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n </section>\r\n </section>\r\n </section>\r\n\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n<ng-template #loadingTemplate>\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n</ng-template>", styles: [".total-container{height:auto;position:relative}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.d-block{display:block!important}.category-tag{padding:1rem .3rem;height:105px;width:fit-content;border-top-left-radius:10px;border-top-right-radius:10px;cursor:pointer;border-top:8px solid transparent}.product-list{padding:40px 20px;border-radius:8px}.adjustPosition{position:relative!important;left:-15px!important;width:108%!important}.overflow-scroll{overflow-x:auto}div[class*=arrow]{background-color:#fff;color:#000;padding:5px;border-radius:50%;position:absolute;top:50%;display:flex;align-items:center;justify-content:center;z-index:100;cursor:pointer;box-shadow:#63636333 0 2px 8px}.left-arrow{left:10px}.right-arrow{right:10px}#productScrollBar{scroll-behavior:smooth}@media screen and (max-width: 475px){.padding-1{padding-left:1rem;padding-right:1rem}}\n"] }]
|
|
23306
23321
|
}], ctorParameters: () => [{ type: RestService }, { type: CartService }, { type: EventsService }], propDecorators: { data: [{
|
|
23307
23322
|
type: Input
|
|
23308
23323
|
}], index: [{
|