simpo-component-library 3.6.97 → 3.6.98
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/elements/below-image-card/below-image-card.component.mjs +3 -3
- package/esm2022/lib/elements/covering-image-card/covering-image-card.component.mjs +2 -2
- package/esm2022/lib/elements/pricing-s1/pricing-s1.component.mjs +2 -2
- package/esm2022/lib/elements/top-of-image-card/top-of-image-card.component.mjs +2 -2
- package/esm2022/lib/sections/logo-showcase/logo-showcase.component.mjs +6 -3
- package/esm2022/lib/sections/logo-showcase/logo-showcase.modal.mjs +1 -1
- package/fesm2022/simpo-component-library.mjs +13 -10
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/sections/logo-showcase/logo-showcase.component.d.ts +2 -1
- package/lib/sections/logo-showcase/logo-showcase.modal.d.ts +2 -0
- package/package.json +1 -1
- package/simpo-component-library-3.6.98.tgz +0 -0
- package/simpo-component-library-3.6.97.tgz +0 -0
|
@@ -32,7 +32,7 @@ export class BelowImageCardComponent {
|
|
|
32
32
|
return { contentAnimation: this.styles?.contentAnimation };
|
|
33
33
|
}
|
|
34
34
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BelowImageCardComponent, deps: [{ token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
35
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BelowImageCardComponent, isStandalone: true, selector: "simpo-below-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button", edit: "edit" }, ngImport: i0, template: "<div (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\n [ngClass]=\"{'box-shadow' : content.display.showCard, 'px-0 py-0': styles?.borderLessImage, 'border-large':styles?.corners === 'Large', 'border-medium':styles?.corners === 'Medium', 'border-small':styles?.corners === 'Small'}\" [simpoCorner]=\"styles?.corners\" \n [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" [id]=\"componentId\" [backgroundColor]=\"styles?.background?.color\" [simpoSetDynamicBackground]=\"content?.display?.showCardBackground\" class=\"mt-4\">\n <div class=\"popular-tag\" [simpoCorner]=\"styles?.corners\"\n [ngStyle]=\"{'background-color': styles?.background?.accentColor}\"\n *ngIf=\"data?.highlight?.highlighted === true\">\n <simpo-text-editor [(value)]=\"data.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <!-- <div [simpoImageContainerDirective]=\"getAspectRatio\" class=\"w-100\"> -->\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\" [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 h-100\" [class]=\"componentId+data.image.id\" *ngIf=\"content.display.showImage\"\n loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"data.image\" [sectionId]=\"data?.id\">\n\n <img loading=\"lazy\" [src]=\"data.image.url\" *ngIf=\"content.display.showIcon\" class=\"logo-img\" [appImageEditor]=\"edit || false\" [imageData]=\"data.image\" [sectionId]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\">\n <!-- </div> -->\n <div class=\"ptb-1 content-side\">\n <div class=\"heading-medium mb-1\" *ngIf=\"content.display.showHeading\">\n <simpo-text-editor [(value)]=\"data.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\n <simpo-text-editor [(value)]=\"data.inputText[01].value \" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\" [simpoHoverAnimation]=\"getContentAnimation()\">\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\"\n [color]=\"styles?.background?.accentColor\" [backgroundInfo]=\"styles?.background\" [edit]=\"edit\"></app-button-element>\n </div>\n </div>\n</div>\n", styles: [".w-100{width:100%}.ptb-1{padding-top:1.5rem;padding-bottom:1.5rem}.mb-1{margin-bottom:1rem!important}.box-shadow{background:#fff!important;box-shadow:0 4px 8px #0003,0 0 #00000030;padding:10px;color:#000!important
|
|
35
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BelowImageCardComponent, isStandalone: true, selector: "simpo-below-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button", edit: "edit" }, ngImport: i0, template: "<div (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\n [ngClass]=\"{'box-shadow' : content.display.showCard, 'px-0 py-0': styles?.borderLessImage, 'border-large':styles?.corners === 'Large', 'border-medium':styles?.corners === 'Medium', 'border-small':styles?.corners === 'Small'}\" [simpoCorner]=\"styles?.corners\" \n [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" [id]=\"componentId\" [backgroundColor]=\"styles?.background?.color\" [simpoSetDynamicBackground]=\"content?.display?.showCardBackground\" class=\"mt-4\">\n <div class=\"popular-tag\" [simpoCorner]=\"styles?.corners\"\n [ngStyle]=\"{'background-color': styles?.background?.accentColor}\"\n *ngIf=\"data?.highlight?.highlighted === true\">\n <simpo-text-editor [(value)]=\"data.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <!-- <div [simpoImageContainerDirective]=\"getAspectRatio\" class=\"w-100\"> -->\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\" [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 h-100\" [class]=\"componentId+data.image.id\" *ngIf=\"content.display.showImage\"\n loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"data.image\" [sectionId]=\"data?.id\">\n\n <img loading=\"lazy\" [src]=\"data.image.url\" [ngClass]=\"{'px-2': content?.display?.showCard || content?.display?.showCardBackground}\" *ngIf=\"content.display.showIcon\" class=\"logo-img\" [appImageEditor]=\"edit || false\" [imageData]=\"data.image\" [sectionId]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\">\n <!-- </div> -->\n <div class=\"ptb-1 content-side\" [ngClass]=\"{'px-2': content?.display?.showCard || content?.display?.showCardBackground}\">\n <div class=\"heading-medium mb-1\" *ngIf=\"content.display.showHeading\">\n <simpo-text-editor [(value)]=\"data.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\n <simpo-text-editor [(value)]=\"data.inputText[01].value \" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\" [simpoHoverAnimation]=\"getContentAnimation()\">\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\"\n [color]=\"styles?.background?.accentColor\" [backgroundInfo]=\"styles?.background\" [edit]=\"edit\"></app-button-element>\n </div>\n </div>\n</div>\n", styles: [".w-100{width:100%}.ptb-1{padding-top:1.5rem;padding-bottom:1.5rem}.mb-1{margin-bottom:1rem!important}.box-shadow{background:#fff!important;box-shadow:0 4px 8px #0003,0 0 #00000030;padding:10px;color:#000!important}.logo-img{width:100px;height:100px;margin-top:1rem}.fw-600{font-weight:600}.popular-tag{position:absolute;top:-1px;right:0;padding:1px 20px 3px;border-top-left-radius:0!important;border-bottom-right-radius:0!important}.border-large{border-radius:2rem}.border-medium{border-radius:1rem}.border-medium{border-radius:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }, { kind: "directive", type: HoverAnimationDirective, selector: "[simpoHoverAnimation]", inputs: ["simpoHoverAnimation"] }, { kind: "directive", type: TranslateOnhoverDirective, selector: "[simpoTranslateOnhover]", inputs: ["simpoTranslateOnhover"] }, { kind: "directive", type: SetDynamicBackgroundDirective, selector: "[simpoSetDynamicBackground]", inputs: ["backgroundColor", "simpoSetDynamicBackground"] }] }); }
|
|
36
36
|
}
|
|
37
37
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BelowImageCardComponent, decorators: [{
|
|
38
38
|
type: Component,
|
|
@@ -49,7 +49,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
49
49
|
TranslateOnhoverDirective,
|
|
50
50
|
SetDynamicBackgroundDirective,
|
|
51
51
|
SimpoBorderlessDirective
|
|
52
|
-
], template: "<div (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\n [ngClass]=\"{'box-shadow' : content.display.showCard, 'px-0 py-0': styles?.borderLessImage, 'border-large':styles?.corners === 'Large', 'border-medium':styles?.corners === 'Medium', 'border-small':styles?.corners === 'Small'}\" [simpoCorner]=\"styles?.corners\" \n [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" [id]=\"componentId\" [backgroundColor]=\"styles?.background?.color\" [simpoSetDynamicBackground]=\"content?.display?.showCardBackground\" class=\"mt-4\">\n <div class=\"popular-tag\" [simpoCorner]=\"styles?.corners\"\n [ngStyle]=\"{'background-color': styles?.background?.accentColor}\"\n *ngIf=\"data?.highlight?.highlighted === true\">\n <simpo-text-editor [(value)]=\"data.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <!-- <div [simpoImageContainerDirective]=\"getAspectRatio\" class=\"w-100\"> -->\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\" [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 h-100\" [class]=\"componentId+data.image.id\" *ngIf=\"content.display.showImage\"\n loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"data.image\" [sectionId]=\"data?.id\">\n\n <img loading=\"lazy\" [src]=\"data.image.url\" *ngIf=\"content.display.showIcon\" class=\"logo-img\" [appImageEditor]=\"edit || false\" [imageData]=\"data.image\" [sectionId]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\">\n <!-- </div> -->\n <div class=\"ptb-1 content-side\">\n <div class=\"heading-medium mb-1\" *ngIf=\"content.display.showHeading\">\n <simpo-text-editor [(value)]=\"data.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\n <simpo-text-editor [(value)]=\"data.inputText[01].value \" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\" [simpoHoverAnimation]=\"getContentAnimation()\">\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\"\n [color]=\"styles?.background?.accentColor\" [backgroundInfo]=\"styles?.background\" [edit]=\"edit\"></app-button-element>\n </div>\n </div>\n</div>\n", styles: [".w-100{width:100%}.ptb-1{padding-top:1.5rem;padding-bottom:1.5rem}.mb-1{margin-bottom:1rem!important}.box-shadow{background:#fff!important;box-shadow:0 4px 8px #0003,0 0 #00000030;padding:10px;color:#000!important
|
|
52
|
+
], template: "<div (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\n [ngClass]=\"{'box-shadow' : content.display.showCard, 'px-0 py-0': styles?.borderLessImage, 'border-large':styles?.corners === 'Large', 'border-medium':styles?.corners === 'Medium', 'border-small':styles?.corners === 'Small'}\" [simpoCorner]=\"styles?.corners\" \n [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" [id]=\"componentId\" [backgroundColor]=\"styles?.background?.color\" [simpoSetDynamicBackground]=\"content?.display?.showCardBackground\" class=\"mt-4\">\n <div class=\"popular-tag\" [simpoCorner]=\"styles?.corners\"\n [ngStyle]=\"{'background-color': styles?.background?.accentColor}\"\n *ngIf=\"data?.highlight?.highlighted === true\">\n <simpo-text-editor [(value)]=\"data.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <!-- <div [simpoImageContainerDirective]=\"getAspectRatio\" class=\"w-100\"> -->\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\" [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 h-100\" [class]=\"componentId+data.image.id\" *ngIf=\"content.display.showImage\"\n loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"data.image\" [sectionId]=\"data?.id\">\n\n <img loading=\"lazy\" [src]=\"data.image.url\" [ngClass]=\"{'px-2': content?.display?.showCard || content?.display?.showCardBackground}\" *ngIf=\"content.display.showIcon\" class=\"logo-img\" [appImageEditor]=\"edit || false\" [imageData]=\"data.image\" [sectionId]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\">\n <!-- </div> -->\n <div class=\"ptb-1 content-side\" [ngClass]=\"{'px-2': content?.display?.showCard || content?.display?.showCardBackground}\">\n <div class=\"heading-medium mb-1\" *ngIf=\"content.display.showHeading\">\n <simpo-text-editor [(value)]=\"data.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\n <simpo-text-editor [(value)]=\"data.inputText[01].value \" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\" [simpoHoverAnimation]=\"getContentAnimation()\">\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\"\n [color]=\"styles?.background?.accentColor\" [backgroundInfo]=\"styles?.background\" [edit]=\"edit\"></app-button-element>\n </div>\n </div>\n</div>\n", styles: [".w-100{width:100%}.ptb-1{padding-top:1.5rem;padding-bottom:1.5rem}.mb-1{margin-bottom:1rem!important}.box-shadow{background:#fff!important;box-shadow:0 4px 8px #0003,0 0 #00000030;padding:10px;color:#000!important}.logo-img{width:100px;height:100px;margin-top:1rem}.fw-600{font-weight:600}.popular-tag{position:absolute;top:-1px;right:0;padding:1px 20px 3px;border-top-left-radius:0!important;border-bottom-right-radius:0!important}.border-large{border-radius:2rem}.border-medium{border-radius:1rem}.border-medium{border-radius:.5rem}\n"] }]
|
|
53
53
|
}], ctorParameters: () => [{ type: i1.EventsService }], propDecorators: { data: [{
|
|
54
54
|
type: Input
|
|
55
55
|
}], styles: [{
|
|
@@ -63,4 +63,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
63
63
|
}], edit: [{
|
|
64
64
|
type: Input
|
|
65
65
|
}] } });
|
|
66
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
66
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmVsb3ctaW1hZ2UtY2FyZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zaW1wby11aS9zcmMvbGliL2VsZW1lbnRzL2JlbG93LWltYWdlLWNhcmQvYmVsb3ctaW1hZ2UtY2FyZC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zaW1wby11aS9zcmMvbGliL2VsZW1lbnRzL2JlbG93LWltYWdlLWNhcmQvYmVsb3ctaW1hZ2UtY2FyZC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDakQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLG9DQUFvQyxDQUFDO0FBQ3JFLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDZDQUE2QyxDQUFDO0FBQ3RGLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLHdDQUF3QyxDQUFDO0FBRTlFLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDBDQUEwQyxDQUFDO0FBRW5GLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDJDQUEyQyxDQUFDO0FBQ3BGLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLHNDQUFzQyxDQUFDO0FBQzNFLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLHdDQUF3QyxDQUFDO0FBQzlFLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDJDQUEyQyxDQUFDO0FBQ3BGLE9BQU8sRUFBRSx5QkFBeUIsRUFBRSxNQUFNLDZDQUE2QyxDQUFDO0FBQ3hGLE9BQU8sRUFBRSw2QkFBNkIsRUFBRSxNQUFNLGtEQUFrRCxDQUFDO0FBQ2pHLE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLDJDQUEyQyxDQUFDOzs7O0FBdUJyRixNQUFNLE9BQU8sdUJBQXVCO0lBU2xDLFlBQW9CLGFBQTRCO1FBQTVCLGtCQUFhLEdBQWIsYUFBYSxDQUFlO0lBQUUsQ0FBQztJQUNuRCxRQUFRO1FBQ04sT0FBTyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUE7UUFDdEIsT0FBTyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFBO0lBQzNCLENBQUM7SUFDRCxVQUFVO1FBQ1IsSUFBSSxDQUFDLGFBQWEsQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsRUFBQyxJQUFJLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUMsQ0FBQyxDQUFDO0lBQ3RFLENBQUM7SUFDRCxJQUFJLGNBQWM7UUFDaEIsT0FBTyxFQUFDLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxLQUFLLEVBQUMsQ0FBQztJQUNoQyxDQUFDO0lBQ0QsbUJBQW1CO1FBQ2pCLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRyxJQUFJLENBQUMsTUFBTSxFQUFFLGdCQUFnQixFQUFDLENBQUE7SUFDNUQsQ0FBQzsrR0F0QlUsdUJBQXVCO21HQUF2Qix1QkFBdUIsOE1DckNwQyx5ekZBNEJBLGlsQkRQSSxZQUFZLHNUQUNaLHVCQUF1QixtR0FDdkIsZUFBZSxtRkFDZixvQkFBb0IscUtBR3BCLG1CQUFtQiw2SUFDbkIsb0JBQW9CLHNIQUNwQix1QkFBdUIsbUdBQ3ZCLHlCQUF5Qix1R0FDekIsNkJBQTZCOzs0RkFNcEIsdUJBQXVCO2tCQXBCbkMsU0FBUzsrQkFDRSx3QkFBd0IsY0FDdEIsSUFBSSxXQUNQO3dCQUNQLFlBQVk7d0JBQ1osdUJBQXVCO3dCQUN2QixlQUFlO3dCQUNmLG9CQUFvQjt3QkFDcEIsdUJBQXVCO3dCQUN2Qix1QkFBdUI7d0JBQ3ZCLG1CQUFtQjt3QkFDbkIsb0JBQW9CO3dCQUNwQix1QkFBdUI7d0JBQ3ZCLHlCQUF5Qjt3QkFDekIsNkJBQTZCO3dCQUM3Qix3QkFBd0I7cUJBQ3pCO2tGQU1RLElBQUk7c0JBQVosS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb3JuZXJEaXJlY3RpdmUgfSBmcm9tICcuLy4uLy4uL2RpcmVjdGl2ZS9jb3JuZXItZGlyZWN0aXZlJztcbmltcG9ydCB7IEltYWdlRGlyZWN0aXZlRGlyZWN0aXZlIH0gZnJvbSAnLi8uLi8uLi9kaXJlY3RpdmUvaW1hZ2UtZGlyZWN0aXZlLmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBTaW1wb0J1dHRvbkNvbXBvbmVudCB9IGZyb20gJy4uL3NpbXBvLWJ1dHRvbi9zaW1wby1idXR0b24uY29tcG9uZW50JztcbmltcG9ydCB7IEJ1dHRvbk1vZGVsIH0gZnJvbSAnLi4vLi4vc3R5bGVzL3N0eWxlLm1vZGVsJztcbmltcG9ydCB7IE9iamVjdFBvc2l0aW9uRGlyZWN0aXZlIH0gZnJvbSAnLi4vLi4vZGlyZWN0aXZlL2ltYWdlLXBvc2l0aW9uLmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBFdmVudHNTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vc2VydmljZXMvZXZlbnRzLnNlcnZpY2UnO1xuaW1wb3J0IHsgSW1hZ2VDb250YWluZXJEaXJlY3RpdmUgfSBmcm9tICcuLi8uLi9kaXJlY3RpdmUvaW1hZ2UtY29udGFpbmVyLmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBUZXh0RWRpdG9yQ29tcG9uZW50IH0gZnJvbSAnLi4vdGV4dC1lZGl0b3IvdGV4dC1lZGl0b3IuY29tcG9uZW50JztcbmltcG9ydCB7IEltYWdlRWRpdG9yRGlyZWN0aXZlIH0gZnJvbSAnLi4vLi4vZGlyZWN0aXZlL2ltYWdlLWVkaXRvci5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgSG92ZXJBbmltYXRpb25EaXJlY3RpdmUgfSBmcm9tICcuLi8uLi9kaXJlY3RpdmUvaG92ZXItYW5pbWF0aW9uLmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBUcmFuc2xhdGVPbmhvdmVyRGlyZWN0aXZlIH0gZnJvbSAnLi4vLi4vZGlyZWN0aXZlL3RyYW5zbGF0ZS1vbmhvdmVyLmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBTZXREeW5hbWljQmFja2dyb3VuZERpcmVjdGl2ZSB9IGZyb20gJy4uLy4uL2RpcmVjdGl2ZS9zZXQtZHluYW1pYy1iYWNrZ3JvdW5kLmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBTaW1wb0JvcmRlcmxlc3NEaXJlY3RpdmUgfSBmcm9tICcuLi8uLi9kaXJlY3RpdmUvYm9yZGVybGVzc0ltYWdlLmRpcmVjdGl2ZSc7XG5cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc2ltcG8tYmVsb3ctaW1hZ2UtY2FyZCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtcbiAgICBDb21tb25Nb2R1bGUsXG4gICAgSW1hZ2VEaXJlY3RpdmVEaXJlY3RpdmUsXG4gICAgQ29ybmVyRGlyZWN0aXZlLFxuICAgIFNpbXBvQnV0dG9uQ29tcG9uZW50LFxuICAgIE9iamVjdFBvc2l0aW9uRGlyZWN0aXZlLFxuICAgIEltYWdlQ29udGFpbmVyRGlyZWN0aXZlLFxuICAgIFRleHRFZGl0b3JDb21wb25lbnQsXG4gICAgSW1hZ2VFZGl0b3JEaXJlY3RpdmUsXG4gICAgSG92ZXJBbmltYXRpb25EaXJlY3RpdmUsXG4gICAgVHJhbnNsYXRlT25ob3ZlckRpcmVjdGl2ZSxcbiAgICBTZXREeW5hbWljQmFja2dyb3VuZERpcmVjdGl2ZSxcbiAgICBTaW1wb0JvcmRlcmxlc3NEaXJlY3RpdmVcbiAgXSxcbiAgdGVtcGxhdGVVcmw6ICcuL2JlbG93LWltYWdlLWNhcmQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJy4vYmVsb3ctaW1hZ2UtY2FyZC5jb21wb25lbnQuY3NzJ1xufSlcbmV4cG9ydCBjbGFzcyBCZWxvd0ltYWdlQ2FyZENvbXBvbmVudCB7XG5cbiAgQElucHV0KCkgZGF0YTogYW55O1xuICBASW5wdXQoKSBzdHlsZXM6IGFueTtcbiAgQElucHV0KCkgY29udGVudDogYW55O1xuICBASW5wdXQoKSBjb21wb25lbnRJZD86IHN0cmluZztcbiAgQElucHV0KCkgYnV0dG9uPzogQnV0dG9uTW9kZWw7XG4gIEBJbnB1dCgpIGVkaXQ/IDogYm9vbGVhbjtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIF9ldmVudFNlcnZpY2U6IEV2ZW50c1NlcnZpY2Upe31cbiAgbmdPbkluaXQoKXtcbiAgICBjb25zb2xlLmxvZyh0aGlzLmRhdGEpXG4gICAgY29uc29sZS5sb2codGhpcy5kYXRhLmlkKVxuICB9XG4gIHJlZGlyZWN0VG8oKXtcbiAgICB0aGlzLl9ldmVudFNlcnZpY2UuYnV0dG9uUmVkaXJlY3Rpb24uZW1pdCh7ZGF0YTogdGhpcy5kYXRhLmJ1dHRvbn0pO1xuICB9XG4gIGdldCBnZXRBc3BlY3RSYXRpbygpIHtcbiAgICByZXR1cm4gey4uLnRoaXMuc3R5bGVzLmltYWdlfTtcbiAgfVxuICBnZXRDb250ZW50QW5pbWF0aW9uKCl7XG4gICAgcmV0dXJuIHsgY29udGVudEFuaW1hdGlvbiA6IHRoaXMuc3R5bGVzPy5jb250ZW50QW5pbWF0aW9ufVxuICB9XG59XG4iLCI8ZGl2IChjbGljayk9XCIoY29udGVudD8uZGlzcGxheT8uc2hvd0xpbmsgJiYgY29udGVudD8uZGlzcGxheT8ubGlua1R5cGUgPT09ICdMaXN0IEl0ZW0nID8gcmVkaXJlY3RUbygpIDogJycpXCJcbiAgW25nQ2xhc3NdPVwieydib3gtc2hhZG93JyA6IGNvbnRlbnQuZGlzcGxheS5zaG93Q2FyZCwgJ3B4LTAgcHktMCc6IHN0eWxlcz8uYm9yZGVyTGVzc0ltYWdlLCAnYm9yZGVyLWxhcmdlJzpzdHlsZXM/LmNvcm5lcnMgPT09ICdMYXJnZScsICdib3JkZXItbWVkaXVtJzpzdHlsZXM/LmNvcm5lcnMgPT09ICdNZWRpdW0nLCAnYm9yZGVyLXNtYWxsJzpzdHlsZXM/LmNvcm5lcnMgPT09ICdTbWFsbCd9XCIgW3NpbXBvQ29ybmVyXT1cInN0eWxlcz8uY29ybmVyc1wiIFxuICBbc2ltcG9UcmFuc2xhdGVPbmhvdmVyXT1cImNvbnRlbnQ/LmRpc3BsYXk/LnNob3dIb3ZlckVmZmVjdFwiIFtpZF09XCJjb21wb25lbnRJZFwiIFtiYWNrZ3JvdW5kQ29sb3JdPVwic3R5bGVzPy5iYWNrZ3JvdW5kPy5jb2xvclwiIFtzaW1wb1NldER5bmFtaWNCYWNrZ3JvdW5kXT1cImNvbnRlbnQ/LmRpc3BsYXk/LnNob3dDYXJkQmFja2dyb3VuZFwiIGNsYXNzPVwibXQtNFwiPlxuICA8ZGl2IGNsYXNzPVwicG9wdWxhci10YWdcIiBbc2ltcG9Db3JuZXJdPVwic3R5bGVzPy5jb3JuZXJzXCJcbiAgICBbbmdTdHlsZV09XCJ7J2JhY2tncm91bmQtY29sb3InOiBzdHlsZXM/LmJhY2tncm91bmQ/LmFjY2VudENvbG9yfVwiXG4gICAgKm5nSWY9XCJkYXRhPy5oaWdobGlnaHQ/LmhpZ2hsaWdodGVkID09PSB0cnVlXCI+XG4gICAgPHNpbXBvLXRleHQtZWRpdG9yIFsodmFsdWUpXT1cImRhdGEuaGlnaGxpZ2h0LmxhYmVsXCIgW2VkaXRhYmxlXT1cImVkaXQgfHwgZmFsc2VcIj48L3NpbXBvLXRleHQtZWRpdG9yPlxuICA8L2Rpdj5cbiAgPCEtLSA8ZGl2IFtzaW1wb0ltYWdlQ29udGFpbmVyRGlyZWN0aXZlXT1cImdldEFzcGVjdFJhdGlvXCIgY2xhc3M9XCJ3LTEwMFwiPiAtLT5cbiAgICA8aW1nIGxvYWRpbmc9XCJsYXp5XCIgIFtzcmNdPVwiZGF0YS5pbWFnZS51cmxcIiBbYWx0XT1cImRhdGEuaW1hZ2UuYWx0VGV4dFwiIFtzaW1wb0ltYWdlRGlyZWN0aXZlXT1cInN0eWxlcz8uaW1hZ2VcIiBbYXR0ci5zaW1wb09iamVjdFBvc2l0aW9uXT1cInN0eWxlcz8uaW1hZ2U/LmZpdCAhPT0gJ2NvbnRhaW4nID8gZGF0YS5pbWFnZT8ucG9zaXRpb24gOiBudWxsXCJcbiAgICAgIFtzaW1wb0Nvcm5lcl09XCJzdHlsZXM/LmNvcm5lcnNcIiBbaWRdPVwiY29tcG9uZW50SWRcIiBjbGFzcz1cInctMTAwIGgtMTAwXCIgW2NsYXNzXT1cImNvbXBvbmVudElkK2RhdGEuaW1hZ2UuaWRcIiAqbmdJZj1cImNvbnRlbnQuZGlzcGxheS5zaG93SW1hZ2VcIlxuICAgICAgbG9hZGluZz1cImxhenlcIiAgW2FwcEltYWdlRWRpdG9yXT1cImVkaXQgfHwgZmFsc2VcIiBbaW1hZ2VEYXRhXT1cImRhdGEuaW1hZ2VcIiBbc2VjdGlvbklkXT1cImRhdGE/LmlkXCI+XG5cbiAgICA8aW1nIGxvYWRpbmc9XCJsYXp5XCIgW3NyY109XCJkYXRhLmltYWdlLnVybFwiIFtuZ0NsYXNzXT1cInsncHgtMic6IGNvbnRlbnQ/LmRpc3BsYXk/LnNob3dDYXJkIHx8IGNvbnRlbnQ/LmRpc3BsYXk/LnNob3dDYXJkQmFja2dyb3VuZH1cIiAqbmdJZj1cImNvbnRlbnQuZGlzcGxheS5zaG93SWNvblwiIGNsYXNzPVwibG9nby1pbWdcIiAgW2FwcEltYWdlRWRpdG9yXT1cImVkaXQgfHwgZmFsc2VcIiBbaW1hZ2VEYXRhXT1cImRhdGEuaW1hZ2VcIiBbc2VjdGlvbklkXT1cImRhdGE/LmlkXCIgW3NpbXBvQ29ybmVyXT1cInN0eWxlcz8uY29ybmVyc1wiIFtzaW1wb1RyYW5zbGF0ZU9uaG92ZXJdPVwiY29udGVudD8uZGlzcGxheT8uc2hvd0hvdmVyRWZmZWN0XCI+XG4gIDwhLS0gPC9kaXY+IC0tPlxuICA8ZGl2IGNsYXNzPVwicHRiLTEgY29udGVudC1zaWRlXCIgW25nQ2xhc3NdPVwieydweC0yJzogY29udGVudD8uZGlzcGxheT8uc2hvd0NhcmQgfHwgY29udGVudD8uZGlzcGxheT8uc2hvd0NhcmRCYWNrZ3JvdW5kfVwiPlxuICAgIDxkaXYgY2xhc3M9XCJoZWFkaW5nLW1lZGl1bSBtYi0xXCIgICpuZ0lmPVwiY29udGVudC5kaXNwbGF5LnNob3dIZWFkaW5nXCI+XG4gICAgICA8c2ltcG8tdGV4dC1lZGl0b3IgWyh2YWx1ZSldPVwiZGF0YS5pbnB1dFRleHRbMF0udmFsdWVcIiBbZWRpdGFibGVdPVwiZWRpdCB8fCBmYWxzZVwiPjwvc2ltcG8tdGV4dC1lZGl0b3I+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cImJvZHktZGVzY1wiICAqbmdJZj1cImNvbnRlbnQuZGlzcGxheS5zaG93Q29udGVudFwiPlxuICAgICAgPHNpbXBvLXRleHQtZWRpdG9yIFsodmFsdWUpXT1cImRhdGEuaW5wdXRUZXh0WzAxXS52YWx1ZSBcIiBbZWRpdGFibGVdPVwiZWRpdCB8fCBmYWxzZVwiPjwvc2ltcG8tdGV4dC1lZGl0b3I+XG4gICAgPC9kaXY+XG4gICAgPGRpdiAqbmdJZj1cImNvbnRlbnQuZGlzcGxheS5zaG93TGluayAmJiBjb250ZW50LmRpc3BsYXkubGlua1R5cGUgPT09ICdCdXR0b24nXCIgIFtzaW1wb0hvdmVyQW5pbWF0aW9uXT1cImdldENvbnRlbnRBbmltYXRpb24oKVwiPlxuICAgICAgPGFwcC1idXR0b24tZWxlbWVudCBbYnV0dG9uQ29udGVudF09XCJkYXRhLmJ1dHRvblwiIFtidXR0b25TdHlsZV09XCJidXR0b24/LnN0eWxlc1wiIFtidXR0b25JZF09XCJidXR0b24gPyBidXR0b24uaWQgOiAnJ1wiIFtzZWN0aW9uSWRdPVwiY29tcG9uZW50SWRcIlxuICAgICAgICBbY29sb3JdPVwic3R5bGVzPy5iYWNrZ3JvdW5kPy5hY2NlbnRDb2xvclwiIFtiYWNrZ3JvdW5kSW5mb109XCJzdHlsZXM/LmJhY2tncm91bmRcIiBbZWRpdF09XCJlZGl0XCI+PC9hcHAtYnV0dG9uLWVsZW1lbnQ+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=
|
|
@@ -25,11 +25,11 @@ export class CoveringImageCardComponent {
|
|
|
25
25
|
return { contentAnimation: this.styles?.contentAnimation };
|
|
26
26
|
}
|
|
27
27
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CoveringImageCardComponent, deps: [{ token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
28
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CoveringImageCardComponent, isStandalone: true, selector: "simpo-covering-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button", edit: "edit" }, ngImport: i0, template: "<div class=\"parent-tab\" [id]=\"componentId\"\n (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\">\n <div class=\"popular-tag\" [simpoCorner]=\"styles?.corners\"\n [ngStyle]=\"{'background-color': styles?.background?.accentColor}\"\n *ngIf=\"data?.highlight?.highlighted === true\">\n <simpo-text-editor [(value)]=\"data.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <ng-container *ngIf=\"content.display.showImage\">\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 img\"\n [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\" [class]=\"componentId+data.image.id\" [simpoImageDirective]=\"styles?.image\" loading=\"lazy\" [appImageEditor]=\"true\" [imageData]=\"data?.image\" [sectionId]=\"data?.id\">\n </ng-container>\n <div class=\"ptb-1 content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n <div class=\"heading-medium mb-1\" *ngIf=\"content.display.showHeading\">\n <simpo-text-editor [(value)]=\"data.inputText[0].value \" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\n <simpo-text-editor [(value)]=\"data.inputText[1].value \" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\" [simpoHoverAnimation]=\"getContentAnimation()\">\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\" [edit]=\"edit\" [backgroundInfo]=\"styles?.background\"></app-button-element>\n </div>\n </div>\n</div>\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{position:relative;bottom:0;padding:1.5rem;display:flex;flex-direction:column;justify-content:center;height:fit-content;min-height:100%}.parent-tab{position:relative;height:100%;width:100%}.img{position:absolute;height:100%;display:flex}.popular-tag{position:absolute;top:0;right:0;padding:
|
|
28
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CoveringImageCardComponent, isStandalone: true, selector: "simpo-covering-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button", edit: "edit" }, ngImport: i0, template: "<div class=\"parent-tab\" [id]=\"componentId\"\n (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\">\n <div class=\"popular-tag\" [simpoCorner]=\"styles?.corners\"\n [ngStyle]=\"{'background-color': styles?.background?.accentColor}\"\n *ngIf=\"data?.highlight?.highlighted === true\">\n <simpo-text-editor [(value)]=\"data.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <ng-container *ngIf=\"content.display.showImage\">\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 img\"\n [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\" [class]=\"componentId+data.image.id\" [simpoImageDirective]=\"styles?.image\" loading=\"lazy\" [appImageEditor]=\"true\" [imageData]=\"data?.image\" [sectionId]=\"data?.id\">\n </ng-container>\n <div class=\"ptb-1 content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n <div class=\"heading-medium mb-1\" *ngIf=\"content.display.showHeading\">\n <simpo-text-editor [(value)]=\"data.inputText[0].value \" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\n <simpo-text-editor [(value)]=\"data.inputText[1].value \" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\" [simpoHoverAnimation]=\"getContentAnimation()\">\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\" [edit]=\"edit\" [backgroundInfo]=\"styles?.background\"></app-button-element>\n </div>\n </div>\n</div>\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{position:relative;bottom:0;padding:1.5rem;display:flex;flex-direction:column;justify-content:center;height:fit-content;min-height:100%}.parent-tab{position:relative;height:100%;width:100%}.img{position:absolute;height:100%;display:flex}.popular-tag{position:absolute;top:0;right:0;padding:1px 20px 3px;border-top-left-radius:0!important;border-bottom-right-radius:0!important;z-index:10}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: TextBackgroundDirectiveDirective, selector: "[simpoTextBackgroundDirective]", inputs: ["simpoTextBackgroundDirective"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }, { kind: "directive", type: HoverAnimationDirective, selector: "[simpoHoverAnimation]", inputs: ["simpoHoverAnimation"] }] }); }
|
|
29
29
|
}
|
|
30
30
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CoveringImageCardComponent, decorators: [{
|
|
31
31
|
type: Component,
|
|
32
|
-
args: [{ selector: 'simpo-covering-image-card', standalone: true, imports: [CommonModule, ImageDirectiveDirective, CornerDirective, TextBackgroundDirectiveDirective, TextEditorComponent, SimpoButtonComponent, ObjectPositionDirective, ImageEditorDirective, HoverAnimationDirective, ButtonDirectiveDirective], template: "<div class=\"parent-tab\" [id]=\"componentId\"\n (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\">\n <div class=\"popular-tag\" [simpoCorner]=\"styles?.corners\"\n [ngStyle]=\"{'background-color': styles?.background?.accentColor}\"\n *ngIf=\"data?.highlight?.highlighted === true\">\n <simpo-text-editor [(value)]=\"data.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <ng-container *ngIf=\"content.display.showImage\">\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 img\"\n [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\" [class]=\"componentId+data.image.id\" [simpoImageDirective]=\"styles?.image\" loading=\"lazy\" [appImageEditor]=\"true\" [imageData]=\"data?.image\" [sectionId]=\"data?.id\">\n </ng-container>\n <div class=\"ptb-1 content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n <div class=\"heading-medium mb-1\" *ngIf=\"content.display.showHeading\">\n <simpo-text-editor [(value)]=\"data.inputText[0].value \" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\n <simpo-text-editor [(value)]=\"data.inputText[1].value \" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\" [simpoHoverAnimation]=\"getContentAnimation()\">\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\" [edit]=\"edit\" [backgroundInfo]=\"styles?.background\"></app-button-element>\n </div>\n </div>\n</div>\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{position:relative;bottom:0;padding:1.5rem;display:flex;flex-direction:column;justify-content:center;height:fit-content;min-height:100%}.parent-tab{position:relative;height:100%;width:100%}.img{position:absolute;height:100%;display:flex}.popular-tag{position:absolute;top:0;right:0;padding:
|
|
32
|
+
args: [{ selector: 'simpo-covering-image-card', standalone: true, imports: [CommonModule, ImageDirectiveDirective, CornerDirective, TextBackgroundDirectiveDirective, TextEditorComponent, SimpoButtonComponent, ObjectPositionDirective, ImageEditorDirective, HoverAnimationDirective, ButtonDirectiveDirective], template: "<div class=\"parent-tab\" [id]=\"componentId\"\n (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\">\n <div class=\"popular-tag\" [simpoCorner]=\"styles?.corners\"\n [ngStyle]=\"{'background-color': styles?.background?.accentColor}\"\n *ngIf=\"data?.highlight?.highlighted === true\">\n <simpo-text-editor [(value)]=\"data.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <ng-container *ngIf=\"content.display.showImage\">\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 img\"\n [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\" [class]=\"componentId+data.image.id\" [simpoImageDirective]=\"styles?.image\" loading=\"lazy\" [appImageEditor]=\"true\" [imageData]=\"data?.image\" [sectionId]=\"data?.id\">\n </ng-container>\n <div class=\"ptb-1 content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n <div class=\"heading-medium mb-1\" *ngIf=\"content.display.showHeading\">\n <simpo-text-editor [(value)]=\"data.inputText[0].value \" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\n <simpo-text-editor [(value)]=\"data.inputText[1].value \" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\" [simpoHoverAnimation]=\"getContentAnimation()\">\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\" [edit]=\"edit\" [backgroundInfo]=\"styles?.background\"></app-button-element>\n </div>\n </div>\n</div>\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{position:relative;bottom:0;padding:1.5rem;display:flex;flex-direction:column;justify-content:center;height:fit-content;min-height:100%}.parent-tab{position:relative;height:100%;width:100%}.img{position:absolute;height:100%;display:flex}.popular-tag{position:absolute;top:0;right:0;padding:1px 20px 3px;border-top-left-radius:0!important;border-bottom-right-radius:0!important;z-index:10}\n"] }]
|
|
33
33
|
}], ctorParameters: () => [{ type: i1.EventsService }], propDecorators: { data: [{
|
|
34
34
|
type: Input
|
|
35
35
|
}], styles: [{
|
|
@@ -38,7 +38,7 @@ export class PricingS1Component extends BaseSection {
|
|
|
38
38
|
redirectTo() {
|
|
39
39
|
}
|
|
40
40
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PricingS1Component, deps: [{ token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
41
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PricingS1Component, isStandalone: true, selector: "simpo-pricing-s1", inputs: { data: "data", edit: "edit" }, usesInheritance: true, ngImport: i0, template: "<section >\n <div class=\"pricing-options d-flex w-100\">\n <div class=\"individual-options d-flex flex-column justify-content-between mt-4 mb-5 align-items-center\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\n [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" *ngFor=\"let options of content?.listItem?.data\"\n [ngClass]=\"{'highlighted-option': options?.highlight?.highlighted === true,\n 'individual-options-3': content?.listItem?.data?.length === 3 || content?.listItem?.data?.length === 2}\"\n [ngStyle]=\"{'border': options?.highlight?.highlighted === true ? '3px solid ' + data?.styles?.background?.accentColor : ''}\">\n <div class=\"popular-tag\" [simpoCorner]=\"style?.corners\" [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\" \n *ngIf=\"options?.highlight?.highlighted === true\">\n <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div>\n <img loading=\"lazy\" class=\"logo-img\" *ngIf=\"content?.display?.showImage === true\"\n [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"options.image.position\"\n [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \" alt=\"\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(options?.image?.id || '')\">\n <div class=\"heading-small\">\n <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"heading-large price\">\n <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"body-desc mb-3\">\n <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\n <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\n <div class=\"d-flex align-items-center\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#EEF0FC\"/>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M17.0965 7.39004L9.9365 14.3L8.0365 12.27C7.6865 11.94 7.1365 11.92 6.7365 12.2C6.3465 12.49 6.2365 13 6.4765 13.41L8.7265 17.07C8.9465 17.41 9.3265 17.62 9.7565 17.62C10.1665 17.62 10.5565 17.41 10.7765 17.07C11.1365 16.6 18.0065 8.41004 18.0065 8.41004C18.9065 7.49004 17.8165 6.68004 17.0965 7.38004V7.39004Z\" fill=\"#4C63D9\"/>\n </svg>\n </div>\n <simpo-text-editor [(value)]=\"content.content\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n <div class=\"btn w-75 mt-4 p-0 border-0\" *ngIf=\"content?.display?.showButton === true\">\n <!-- <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\">{{options?.button?.label}}</button> -->\n <button class=\"custom-btn\" [buttonData]=\"options?.button\" [buttonStyle]=\"button?.styles\"\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId()\" (click)=\"redirectTo()\">{{options?.button?.label}}</button>\n </div>\n </div>\n </div>\n</section>", styles: [".pricing-options{justify-content:space-evenly;gap:10px}.individual-options{border:1px solid #80808057;padding:24px 10px;width:25%}.individual-options-3{width:32%}.highlighted-option{box-shadow:0 0 10px #0000004d}.logo-img{width:85px;height:85px;margin-top:1rem}.img_icon{width:25px;height:25px}.button{font-size:17px!important;padding:.75rem 0}.custom-btn{padding:6px;font-size:16px!important;font-weight:600}.popular-tag{position:absolute;top:-1px;right:-2px;padding:
|
|
41
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PricingS1Component, isStandalone: true, selector: "simpo-pricing-s1", inputs: { data: "data", edit: "edit" }, usesInheritance: true, ngImport: i0, template: "<section >\n <div class=\"pricing-options d-flex w-100\">\n <div class=\"individual-options d-flex flex-column justify-content-between mt-4 mb-5 align-items-center\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\n [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" *ngFor=\"let options of content?.listItem?.data\"\n [ngClass]=\"{'highlighted-option': options?.highlight?.highlighted === true,\n 'individual-options-3': content?.listItem?.data?.length === 3 || content?.listItem?.data?.length === 2}\"\n [ngStyle]=\"{'border': options?.highlight?.highlighted === true ? '3px solid ' + data?.styles?.background?.accentColor : ''}\">\n <div class=\"popular-tag\" [simpoCorner]=\"style?.corners\" [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\" \n *ngIf=\"options?.highlight?.highlighted === true\">\n <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div>\n <img loading=\"lazy\" class=\"logo-img\" *ngIf=\"content?.display?.showImage === true\"\n [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"options.image.position\"\n [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \" alt=\"\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(options?.image?.id || '')\">\n <div class=\"heading-small\">\n <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"heading-large price\">\n <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"body-desc mb-3\">\n <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\n <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\n <div class=\"d-flex align-items-center\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#EEF0FC\"/>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M17.0965 7.39004L9.9365 14.3L8.0365 12.27C7.6865 11.94 7.1365 11.92 6.7365 12.2C6.3465 12.49 6.2365 13 6.4765 13.41L8.7265 17.07C8.9465 17.41 9.3265 17.62 9.7565 17.62C10.1665 17.62 10.5565 17.41 10.7765 17.07C11.1365 16.6 18.0065 8.41004 18.0065 8.41004C18.9065 7.49004 17.8165 6.68004 17.0965 7.38004V7.39004Z\" fill=\"#4C63D9\"/>\n </svg>\n </div>\n <simpo-text-editor [(value)]=\"content.content\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n <div class=\"btn w-75 mt-4 p-0 border-0\" *ngIf=\"content?.display?.showButton === true\">\n <!-- <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\">{{options?.button?.label}}</button> -->\n <button class=\"custom-btn\" [buttonData]=\"options?.button\" [buttonStyle]=\"button?.styles\"\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId()\" (click)=\"redirectTo()\">{{options?.button?.label}}</button>\n </div>\n </div>\n </div>\n</section>", styles: [".pricing-options{justify-content:space-evenly;gap:10px}.individual-options{border:1px solid #80808057;padding:24px 10px;width:25%}.individual-options-3{width:32%}.highlighted-option{box-shadow:0 0 10px #0000004d}.logo-img{width:85px;height:85px;margin-top:1rem}.img_icon{width:25px;height:25px}.button{font-size:17px!important;padding:.75rem 0}.custom-btn{padding:6px;font-size:16px!important;font-weight:600}.popular-tag{position:absolute;top:-1px;right:-2px;padding:1px 20px 3px;border-top-left-radius:0!important;border-bottom-right-radius:0!important}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}}\n"], dependencies: [{ kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: TranslateOnhoverDirective, selector: "[simpoTranslateOnhover]", inputs: ["simpoTranslateOnhover"] }] }); }
|
|
42
42
|
}
|
|
43
43
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PricingS1Component, decorators: [{
|
|
44
44
|
type: Component,
|
|
@@ -54,7 +54,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
54
54
|
SimpoButtonComponent,
|
|
55
55
|
ButtonEditorDirective,
|
|
56
56
|
TranslateOnhoverDirective
|
|
57
|
-
], template: "<section >\n <div class=\"pricing-options d-flex w-100\">\n <div class=\"individual-options d-flex flex-column justify-content-between mt-4 mb-5 align-items-center\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\n [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" *ngFor=\"let options of content?.listItem?.data\"\n [ngClass]=\"{'highlighted-option': options?.highlight?.highlighted === true,\n 'individual-options-3': content?.listItem?.data?.length === 3 || content?.listItem?.data?.length === 2}\"\n [ngStyle]=\"{'border': options?.highlight?.highlighted === true ? '3px solid ' + data?.styles?.background?.accentColor : ''}\">\n <div class=\"popular-tag\" [simpoCorner]=\"style?.corners\" [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\" \n *ngIf=\"options?.highlight?.highlighted === true\">\n <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div>\n <img loading=\"lazy\" class=\"logo-img\" *ngIf=\"content?.display?.showImage === true\"\n [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"options.image.position\"\n [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \" alt=\"\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(options?.image?.id || '')\">\n <div class=\"heading-small\">\n <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"heading-large price\">\n <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"body-desc mb-3\">\n <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\n <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\n <div class=\"d-flex align-items-center\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#EEF0FC\"/>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M17.0965 7.39004L9.9365 14.3L8.0365 12.27C7.6865 11.94 7.1365 11.92 6.7365 12.2C6.3465 12.49 6.2365 13 6.4765 13.41L8.7265 17.07C8.9465 17.41 9.3265 17.62 9.7565 17.62C10.1665 17.62 10.5565 17.41 10.7765 17.07C11.1365 16.6 18.0065 8.41004 18.0065 8.41004C18.9065 7.49004 17.8165 6.68004 17.0965 7.38004V7.39004Z\" fill=\"#4C63D9\"/>\n </svg>\n </div>\n <simpo-text-editor [(value)]=\"content.content\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n <div class=\"btn w-75 mt-4 p-0 border-0\" *ngIf=\"content?.display?.showButton === true\">\n <!-- <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\">{{options?.button?.label}}</button> -->\n <button class=\"custom-btn\" [buttonData]=\"options?.button\" [buttonStyle]=\"button?.styles\"\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId()\" (click)=\"redirectTo()\">{{options?.button?.label}}</button>\n </div>\n </div>\n </div>\n</section>", styles: [".pricing-options{justify-content:space-evenly;gap:10px}.individual-options{border:1px solid #80808057;padding:24px 10px;width:25%}.individual-options-3{width:32%}.highlighted-option{box-shadow:0 0 10px #0000004d}.logo-img{width:85px;height:85px;margin-top:1rem}.img_icon{width:25px;height:25px}.button{font-size:17px!important;padding:.75rem 0}.custom-btn{padding:6px;font-size:16px!important;font-weight:600}.popular-tag{position:absolute;top:-1px;right:-2px;padding:
|
|
57
|
+
], template: "<section >\n <div class=\"pricing-options d-flex w-100\">\n <div class=\"individual-options d-flex flex-column justify-content-between mt-4 mb-5 align-items-center\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\n [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" *ngFor=\"let options of content?.listItem?.data\"\n [ngClass]=\"{'highlighted-option': options?.highlight?.highlighted === true,\n 'individual-options-3': content?.listItem?.data?.length === 3 || content?.listItem?.data?.length === 2}\"\n [ngStyle]=\"{'border': options?.highlight?.highlighted === true ? '3px solid ' + data?.styles?.background?.accentColor : ''}\">\n <div class=\"popular-tag\" [simpoCorner]=\"style?.corners\" [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\" \n *ngIf=\"options?.highlight?.highlighted === true\">\n <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div>\n <img loading=\"lazy\" class=\"logo-img\" *ngIf=\"content?.display?.showImage === true\"\n [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"options.image.position\"\n [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \" alt=\"\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(options?.image?.id || '')\">\n <div class=\"heading-small\">\n <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"heading-large price\">\n <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"body-desc mb-3\">\n <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\n <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\n <div class=\"d-flex align-items-center\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#EEF0FC\"/>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M17.0965 7.39004L9.9365 14.3L8.0365 12.27C7.6865 11.94 7.1365 11.92 6.7365 12.2C6.3465 12.49 6.2365 13 6.4765 13.41L8.7265 17.07C8.9465 17.41 9.3265 17.62 9.7565 17.62C10.1665 17.62 10.5565 17.41 10.7765 17.07C11.1365 16.6 18.0065 8.41004 18.0065 8.41004C18.9065 7.49004 17.8165 6.68004 17.0965 7.38004V7.39004Z\" fill=\"#4C63D9\"/>\n </svg>\n </div>\n <simpo-text-editor [(value)]=\"content.content\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n <div class=\"btn w-75 mt-4 p-0 border-0\" *ngIf=\"content?.display?.showButton === true\">\n <!-- <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\">{{options?.button?.label}}</button> -->\n <button class=\"custom-btn\" [buttonData]=\"options?.button\" [buttonStyle]=\"button?.styles\"\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId()\" (click)=\"redirectTo()\">{{options?.button?.label}}</button>\n </div>\n </div>\n </div>\n</section>", styles: [".pricing-options{justify-content:space-evenly;gap:10px}.individual-options{border:1px solid #80808057;padding:24px 10px;width:25%}.individual-options-3{width:32%}.highlighted-option{box-shadow:0 0 10px #0000004d}.logo-img{width:85px;height:85px;margin-top:1rem}.img_icon{width:25px;height:25px}.button{font-size:17px!important;padding:.75rem 0}.custom-btn{padding:6px;font-size:16px!important;font-weight:600}.popular-tag{position:absolute;top:-1px;right:-2px;padding:1px 20px 3px;border-top-left-radius:0!important;border-bottom-right-radius:0!important}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}}\n"] }]
|
|
58
58
|
}], ctorParameters: () => [{ type: i1.EventsService }], propDecorators: { data: [{
|
|
59
59
|
type: Input
|
|
60
60
|
}], edit: [{
|
|
@@ -22,11 +22,11 @@ export class TopOfImageCardComponent {
|
|
|
22
22
|
this._eventService.buttonRedirection.emit({ data: this.data.button });
|
|
23
23
|
}
|
|
24
24
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TopOfImageCardComponent, deps: [{ token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
25
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TopOfImageCardComponent, isStandalone: true, selector: "simpo-top-of-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button", edit: "edit" }, ngImport: i0, template: "<!-- <div style=\"position: relative;\">\n\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.showImage\">\n\n <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n <div style=\"color: white;\" class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\"\n *ngIf=\"content.showHeading\"></div>\n <div style=\"color: white;\" class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.showContent\">\n </div>\n <app-button-element [buttonData]=\"data?.button\" [sectionId]=\"componentId\" [buttonStyle]=\"styles?.button\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n </div>\n</div>\n -->\n<div class=\"top-container\" (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\n [ngStyle]=\"{'background-image' : content.display.showImage ? 'url('+data.image.url+')' : ''}\"\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\">\n <div class=\"popular-tag\" [simpoCorner]=\"styles?.corners\"\n [ngStyle]=\"{'background-color': styles?.background?.accentColor}\"\n *ngIf=\"data?.highlight?.highlighted === true\">\n <simpo-text-editor [(value)]=\"data.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div [simpoImageDirective]=\"styles?.image\" [id]=\"componentId\" *ngIf=\"content.display.showImage\"></div>\n <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\"\n [simpoTextBackgroundDirective]=\"content.display.showImage ? styles?.textBackground : ''\">\n <div class=\"heading-medium mb-1 lh-40\" *ngIf=\"content.display.showHeading\">\n <simpo-text-editor [(value)]=\"data.inputText[0].value \" [editable]=\"edit || false\"></simpo-text-editor>\n\n </div>\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\n <simpo-text-editor [(value)]=\"data.inputText[1].value \" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"w-100 d-flex justify-content-center\">\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\" [simpoHoverAnimation]=\"getContentAnimation()\" style=\"width: max-content;\">\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\"\n [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\" [backgroundInfo]=\"styles?.background\" [edit]=\"edit\"></app-button-element>\n </div>\n </div>\n </div>\n</div>\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{padding:3rem 1.5rem 1.5rem;min-height:256px;display:flex;flex-direction:column;justify-content:end;bottom:0}.top-container{background-position:center center;background-size:cover;height:100%;position:relative;display:flex;flex-direction:column;justify-content:flex-end}.popular-tag{position:absolute;top:-1px;right:-2px;padding:
|
|
25
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TopOfImageCardComponent, isStandalone: true, selector: "simpo-top-of-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button", edit: "edit" }, ngImport: i0, template: "<!-- <div style=\"position: relative;\">\n\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.showImage\">\n\n <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n <div style=\"color: white;\" class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\"\n *ngIf=\"content.showHeading\"></div>\n <div style=\"color: white;\" class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.showContent\">\n </div>\n <app-button-element [buttonData]=\"data?.button\" [sectionId]=\"componentId\" [buttonStyle]=\"styles?.button\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n </div>\n</div>\n -->\n<div class=\"top-container\" (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\n [ngStyle]=\"{'background-image' : content.display.showImage ? 'url('+data.image.url+')' : ''}\"\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\">\n <div class=\"popular-tag\" [simpoCorner]=\"styles?.corners\"\n [ngStyle]=\"{'background-color': styles?.background?.accentColor}\"\n *ngIf=\"data?.highlight?.highlighted === true\">\n <simpo-text-editor [(value)]=\"data.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div [simpoImageDirective]=\"styles?.image\" [id]=\"componentId\" *ngIf=\"content.display.showImage\"></div>\n <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\"\n [simpoTextBackgroundDirective]=\"content.display.showImage ? styles?.textBackground : ''\">\n <div class=\"heading-medium mb-1 lh-40\" *ngIf=\"content.display.showHeading\">\n <simpo-text-editor [(value)]=\"data.inputText[0].value \" [editable]=\"edit || false\"></simpo-text-editor>\n\n </div>\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\n <simpo-text-editor [(value)]=\"data.inputText[1].value \" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"w-100 d-flex justify-content-center\">\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\" [simpoHoverAnimation]=\"getContentAnimation()\" style=\"width: max-content;\">\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\"\n [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\" [backgroundInfo]=\"styles?.background\" [edit]=\"edit\"></app-button-element>\n </div>\n </div>\n </div>\n</div>\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{padding:3rem 1.5rem 1.5rem;min-height:256px;display:flex;flex-direction:column;justify-content:end;bottom:0}.top-container{background-position:center center;background-size:cover;height:100%;position:relative;display:flex;flex-direction:column;justify-content:flex-end}.popular-tag{position:absolute;top:-1px;right:-2px;padding:1px 20px 3px;border-top-left-radius:0!important;border-bottom-right-radius:0!important}.lh-40{line-height:40px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: TextBackgroundDirectiveDirective, selector: "[simpoTextBackgroundDirective]", inputs: ["simpoTextBackgroundDirective"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "directive", type: HoverAnimationDirective, selector: "[simpoHoverAnimation]", inputs: ["simpoHoverAnimation"] }] }); }
|
|
26
26
|
}
|
|
27
27
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TopOfImageCardComponent, decorators: [{
|
|
28
28
|
type: Component,
|
|
29
|
-
args: [{ selector: 'simpo-top-of-image-card', standalone: true, imports: [CommonModule, ImageDirectiveDirective, CornerDirective, TextBackgroundDirectiveDirective, TextEditorComponent, SimpoButtonComponent, HoverAnimationDirective], template: "<!-- <div style=\"position: relative;\">\n\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.showImage\">\n\n <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n <div style=\"color: white;\" class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\"\n *ngIf=\"content.showHeading\"></div>\n <div style=\"color: white;\" class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.showContent\">\n </div>\n <app-button-element [buttonData]=\"data?.button\" [sectionId]=\"componentId\" [buttonStyle]=\"styles?.button\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n </div>\n</div>\n -->\n<div class=\"top-container\" (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\n [ngStyle]=\"{'background-image' : content.display.showImage ? 'url('+data.image.url+')' : ''}\"\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\">\n <div class=\"popular-tag\" [simpoCorner]=\"styles?.corners\"\n [ngStyle]=\"{'background-color': styles?.background?.accentColor}\"\n *ngIf=\"data?.highlight?.highlighted === true\">\n <simpo-text-editor [(value)]=\"data.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div [simpoImageDirective]=\"styles?.image\" [id]=\"componentId\" *ngIf=\"content.display.showImage\"></div>\n <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\"\n [simpoTextBackgroundDirective]=\"content.display.showImage ? styles?.textBackground : ''\">\n <div class=\"heading-medium mb-1 lh-40\" *ngIf=\"content.display.showHeading\">\n <simpo-text-editor [(value)]=\"data.inputText[0].value \" [editable]=\"edit || false\"></simpo-text-editor>\n\n </div>\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\n <simpo-text-editor [(value)]=\"data.inputText[1].value \" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"w-100 d-flex justify-content-center\">\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\" [simpoHoverAnimation]=\"getContentAnimation()\" style=\"width: max-content;\">\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\"\n [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\" [backgroundInfo]=\"styles?.background\" [edit]=\"edit\"></app-button-element>\n </div>\n </div>\n </div>\n</div>\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{padding:3rem 1.5rem 1.5rem;min-height:256px;display:flex;flex-direction:column;justify-content:end;bottom:0}.top-container{background-position:center center;background-size:cover;height:100%;position:relative;display:flex;flex-direction:column;justify-content:flex-end}.popular-tag{position:absolute;top:-1px;right:-2px;padding:
|
|
29
|
+
args: [{ selector: 'simpo-top-of-image-card', standalone: true, imports: [CommonModule, ImageDirectiveDirective, CornerDirective, TextBackgroundDirectiveDirective, TextEditorComponent, SimpoButtonComponent, HoverAnimationDirective], template: "<!-- <div style=\"position: relative;\">\n\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.showImage\">\n\n <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n <div style=\"color: white;\" class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\"\n *ngIf=\"content.showHeading\"></div>\n <div style=\"color: white;\" class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.showContent\">\n </div>\n <app-button-element [buttonData]=\"data?.button\" [sectionId]=\"componentId\" [buttonStyle]=\"styles?.button\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n </div>\n</div>\n -->\n<div class=\"top-container\" (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\n [ngStyle]=\"{'background-image' : content.display.showImage ? 'url('+data.image.url+')' : ''}\"\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\">\n <div class=\"popular-tag\" [simpoCorner]=\"styles?.corners\"\n [ngStyle]=\"{'background-color': styles?.background?.accentColor}\"\n *ngIf=\"data?.highlight?.highlighted === true\">\n <simpo-text-editor [(value)]=\"data.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div [simpoImageDirective]=\"styles?.image\" [id]=\"componentId\" *ngIf=\"content.display.showImage\"></div>\n <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\"\n [simpoTextBackgroundDirective]=\"content.display.showImage ? styles?.textBackground : ''\">\n <div class=\"heading-medium mb-1 lh-40\" *ngIf=\"content.display.showHeading\">\n <simpo-text-editor [(value)]=\"data.inputText[0].value \" [editable]=\"edit || false\"></simpo-text-editor>\n\n </div>\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\n <simpo-text-editor [(value)]=\"data.inputText[1].value \" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"w-100 d-flex justify-content-center\">\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\" [simpoHoverAnimation]=\"getContentAnimation()\" style=\"width: max-content;\">\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\"\n [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\" [backgroundInfo]=\"styles?.background\" [edit]=\"edit\"></app-button-element>\n </div>\n </div>\n </div>\n</div>\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{padding:3rem 1.5rem 1.5rem;min-height:256px;display:flex;flex-direction:column;justify-content:end;bottom:0}.top-container{background-position:center center;background-size:cover;height:100%;position:relative;display:flex;flex-direction:column;justify-content:flex-end}.popular-tag{position:absolute;top:-1px;right:-2px;padding:1px 20px 3px;border-top-left-radius:0!important;border-bottom-right-radius:0!important}.lh-40{line-height:40px}\n"] }]
|
|
30
30
|
}], ctorParameters: () => [{ type: i1.EventsService }], propDecorators: { data: [{
|
|
31
31
|
type: Input
|
|
32
32
|
}], styles: [{
|