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
|
@@ -2394,7 +2394,7 @@ class BelowImageCardComponent {
|
|
|
2394
2394
|
return { contentAnimation: this.styles?.contentAnimation };
|
|
2395
2395
|
}
|
|
2396
2396
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BelowImageCardComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2397
|
-
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
|
|
2397
|
+
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"] }] }); }
|
|
2398
2398
|
}
|
|
2399
2399
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BelowImageCardComponent, decorators: [{
|
|
2400
2400
|
type: Component,
|
|
@@ -2411,7 +2411,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2411
2411
|
TranslateOnhoverDirective,
|
|
2412
2412
|
SetDynamicBackgroundDirective,
|
|
2413
2413
|
SimpoBorderlessDirective
|
|
2414
|
-
], 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
|
|
2414
|
+
], 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"] }]
|
|
2415
2415
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
2416
2416
|
type: Input
|
|
2417
2417
|
}], styles: [{
|
|
@@ -2545,11 +2545,11 @@ class TopOfImageCardComponent {
|
|
|
2545
2545
|
this._eventService.buttonRedirection.emit({ data: this.data.button });
|
|
2546
2546
|
}
|
|
2547
2547
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TopOfImageCardComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2548
|
-
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:
|
|
2548
|
+
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"] }] }); }
|
|
2549
2549
|
}
|
|
2550
2550
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TopOfImageCardComponent, decorators: [{
|
|
2551
2551
|
type: Component,
|
|
2552
|
-
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:
|
|
2552
|
+
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"] }]
|
|
2553
2553
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
2554
2554
|
type: Input
|
|
2555
2555
|
}], styles: [{
|
|
@@ -2577,11 +2577,11 @@ class CoveringImageCardComponent {
|
|
|
2577
2577
|
return { contentAnimation: this.styles?.contentAnimation };
|
|
2578
2578
|
}
|
|
2579
2579
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CoveringImageCardComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2580
|
-
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:
|
|
2580
|
+
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"] }] }); }
|
|
2581
2581
|
}
|
|
2582
2582
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CoveringImageCardComponent, decorators: [{
|
|
2583
2583
|
type: Component,
|
|
2584
|
-
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:
|
|
2584
|
+
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"] }]
|
|
2585
2585
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
2586
2586
|
type: Input
|
|
2587
2587
|
}], styles: [{
|
|
@@ -8758,7 +8758,7 @@ class PricingS1Component extends BaseSection {
|
|
|
8758
8758
|
redirectTo() {
|
|
8759
8759
|
}
|
|
8760
8760
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PricingS1Component, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8761
|
-
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:
|
|
8761
|
+
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"] }] }); }
|
|
8762
8762
|
}
|
|
8763
8763
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PricingS1Component, decorators: [{
|
|
8764
8764
|
type: Component,
|
|
@@ -8774,7 +8774,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
8774
8774
|
SimpoButtonComponent,
|
|
8775
8775
|
ButtonEditorDirective,
|
|
8776
8776
|
TranslateOnhoverDirective
|
|
8777
|
-
], 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:
|
|
8777
|
+
], 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"] }]
|
|
8778
8778
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
8779
8779
|
type: Input
|
|
8780
8780
|
}], edit: [{
|
|
@@ -10544,6 +10544,9 @@ class LogoShowcaseComponent extends BaseSection {
|
|
|
10544
10544
|
}
|
|
10545
10545
|
return logoDirection.Left;
|
|
10546
10546
|
}
|
|
10547
|
+
get isMobile() {
|
|
10548
|
+
return window.innerWidth <= 475;
|
|
10549
|
+
}
|
|
10547
10550
|
getScreenSize(event) {
|
|
10548
10551
|
if (typeof window !== 'undefined') {
|
|
10549
10552
|
this.screenWidth = window.innerWidth;
|
|
@@ -10558,11 +10561,11 @@ class LogoShowcaseComponent extends BaseSection {
|
|
|
10558
10561
|
}, 100);
|
|
10559
10562
|
}
|
|
10560
10563
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LogoShowcaseComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10561
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LogoShowcaseComponent, isStandalone: true, selector: "simpo-logo-showcase", 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 *ngIf=\"styles?.showCaseType==='Grid'\">\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n class=\"total-container\" [attr.style]=\"customClass\">\n <div class=\"col-xxl-8 py-5 w-100 \" [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" #mainContainer\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\n <div class=\"row g-5 gridtext\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\n *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\n\n <div class=\"col-5 gridimg w-full mb-20 content-side\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\n <div *ngFor=\"let item of content?.inputText\">\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n </div> -->\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n </div>\n <div class=\"col-7 d-flex flex-wrap flex-1 w-full\">\n <div class=\"slider flex overflow-hidden w-full\">\n <div class=\"slider-track\" *ngIf=\"content?.display?.showImage && !content?.display?.showText\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\">\n </div>\n </div>\n <div class=\"slider-track w-full\" *ngIf=\"!content?.display?.showImage && content?.display?.showText\" [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" *ngFor=\"let item of content?.listItem?.data\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\n <simpo-text-editor [(value)]=\"item.inputText.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"slider-track w-full\" *ngIf=\"content?.display?.showImage && content?.display?.showText\" [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" *ngFor=\"let item of content?.listItem?.data\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\">\n <simpo-text-editor [(value)]=\"item.inputText.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n <!-- </div> -->\n </div>\n </div>\n <div class=\"flex-column row g-2\" [id]=\"data?.id\"\n [simpoLayout]=\"styles?.layout\" *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\n <div class=\"px-5 mb-20 content-side\" [id]=\"data?.id\"\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\n <div *ngFor=\"let item of content?.inputText\">\n\n <div class=\"text-element\"\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n [color]=\"data?.styles?.background?.accentColor\"[backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n </div>\n <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\n <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\n <div class=\"slider flex overflow-hidden w-full\">\n <div class=\"slider-track w-full\" *ngIf=\"content?.display?.showImage && !content?.display?.showText\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\n *ngFor=\"let item of content?.listItem?.data; let i = index\">\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\n </div>\n </div>\n <div class=\"slider-track w-full\" *ngIf=\"!content?.display?.showImage && content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\n *ngFor=\"let item of content?.listItem?.data\">\n <simpo-text-editor [(value)]=\"item.inputText.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"slider-track w-full\" *ngIf=\"content?.display?.showImage && content?.display?.showText\" [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides d-flex flex-column\" [simpoCorner]=\"styles?.corners\" *ngFor=\"let item of content?.listItem?.data\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\">\n <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n <!-- </div> -->\n </div>\n\n\n\n </div>\n </div>\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n </div>\n</div>\n\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n class=\"total-container\">\n\n <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\n [simpoBorder]=\"styles?.border\">\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\n [simpoLayout]=\"styles?.layout\">\n <div class=\"mainsec px-5 content-side\" [id]=\"data?.id\"\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\n <div *ngFor=\"let item of content?.inputText\">\n\n <div class=\"text-element\"\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"gap-2 d-md-flex mt-15\" [ngClass]=\"[\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\n ]\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n\n <div [ngClass]=\"{\n 'fullwidth flex-1 inline-edit ': styles?.fullWidth,\n 'nofullwidth flex-1 inline-edit ': !styles?.fullWidth\n }\">\n <div class=\"masking\">\n\n <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\n [style.animationDirection]=\"animationDirection\">\n <div class=\"slider-track2\" *ngIf=\"content?.display?.showImage && !content?.display?.showText\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\n <div class=\"slides2\" [simpoCorner]=\"styles?.corners\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\n </div>\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" \n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\n </div>\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'\n }\" *ngFor=\"let item of content?.listItem?.data;let i = index\">\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\n </div>\n </div>\n <div class=\"slider-track2\" *ngIf=\"content?.display?.showText && !content?.display?.showImage\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\n *ngFor=\"let item of content?.listItem?.data\">\n <simpo-text-editor [(value)]=\"item.inputText.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"slider-track2 d-flex w-full\" *ngIf=\"content?.display?.showImage && content?.display?.showText\" [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides d-flex flex-column\" [simpoCorner]=\"styles?.corners\" *ngFor=\"let item of content?.listItem?.data\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\">\n <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n </div>\n</div>", styles: [".masking{mask:linear-gradient(90deg,transparent,white 5%,white 95%,transparent);overflow:hidden;width:100%}.sliderdad{width:100%;display:flex}@media (min-width: 860px){.nofullwidth{padding-left:15rem;padding-right:15rem;overflow:hidden}}.slider-track2{min-width:max-content;translate:none;rotate:none;scale:none;gap:1rem;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.mainsec{gap:2rem;flex-direction:column;display:flex}.slider-track2.logotype-boxed{gap:1rem}.slider-track2.logotype-basic{gap:5rem}.slides2.logotype-boxed{padding:1.5rem 1.25rem;--tw-bg-opacity: .05;flex-shrink:0;width:auto;height:8rem;display:flex;position:relative;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.slides2.logotype-basic{flex-shrink:0;width:auto;height:5rem;display:flex;position:relative}.slides2.img{height:100%;max-width:100%;border-style:solid}@keyframes scrollLeft{0%{transform:translateZ(0)}to{transform:translate3d(-50%,0,0)}}@keyframes scrollRight{0%{transform:translate3d(-50%,0,0)}to{transform:translateZ(0)}}.animation{animation:scrollLeft 5s linear infinite}.slider-track{justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex;gap:10px}.slider-track.logotype-basic{gap:5rem}.slider-track.logotype-boxed{gap:1rem}.slides.logotype-basic{flex-shrink:0;width:auto;height:5rem;display:flex;position:relative}.slides.logotype-boxed{padding:1.5rem .625rem;--tw-bg-opacity: .05;background-color:rgba(0,0,0,var(--tw-bg-opacity));justify-content:center;flex-grow:1;flex-shrink:0;width:auto;height:8rem;display:flex;position:relative}.slides.texttype-boxed{padding:1.5rem .625rem;justify-content:center;width:auto;display:flex;position:relative;border:1px solid #f3adb7}.slides.texttype-boxed:hover{--tw-bg-opacity: .05;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.slides.img{border-style:solid;max-width:100%;height:100%}@media only screen and (max-width: 500px){.col-xxl-8{padding-left:0!important;padding-right:0!important}.mainsec{padding-right:2rem!important;padding-left:2rem!important}.col-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}.slides img{width:88%}}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}.row{margin-left:0;margin-right:0}\n"], dependencies: [{ kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: 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: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }] }); }
|
|
10564
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LogoShowcaseComponent, isStandalone: true, selector: "simpo-logo-showcase", 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 *ngIf=\"styles?.showCaseType==='Grid'\">\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n class=\"total-container\" [attr.style]=\"customClass\">\n <div class=\"col-xxl-8 py-5 w-100 \" [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" #mainContainer\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\n <div class=\"row g-5 gridtext\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\n *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\n\n <div class=\"col-5 gridimg w-full mb-20 content-side\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\n <div *ngFor=\"let item of content?.inputText\">\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n </div> -->\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n </div>\n <div class=\"col-7 d-flex flex-wrap flex-1 w-full\">\n <div class=\"slider flex overflow-hidden w-full\">\n <div class=\"slider-track\" *ngIf=\"content?.display?.showImage && !content?.display?.showText\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\n <img loading=\"lazy\" [src]=\"item?.image?.url\" [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\" [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\">\n </div>\n </div>\n <div class=\"slider-track w-full\" *ngIf=\"!content?.display?.showImage && content?.display?.showText\" [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" *ngFor=\"let item of content?.listItem?.data\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\n <simpo-text-editor [(value)]=\"item.inputText.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"slider-track w-full\" *ngIf=\"content?.display?.showImage && content?.display?.showText\" [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" *ngFor=\"let item of content?.listItem?.data\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\n <img loading=\"lazy\" [src]=\"item?.image?.url\" [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\" [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\">\n <simpo-text-editor [(value)]=\"item.inputText.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n <!-- </div> -->\n </div>\n </div>\n <div class=\"flex-column row g-2\" [id]=\"data?.id\"\n [simpoLayout]=\"styles?.layout\" *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\n <div class=\"px-5 mb-20 content-side\" [id]=\"data?.id\"\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\n <div *ngFor=\"let item of content?.inputText\">\n <div class=\"text-element\"\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n [color]=\"data?.styles?.background?.accentColor\"[backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n </div>\n <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\n <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\n <div class=\"slider flex overflow-hidden w-full\">\n <div class=\"slider-track w-full\" *ngIf=\"content?.display?.showImage && !content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n *ngFor=\"let item of content?.listItem?.data; let i = index\">\n <img loading=\"lazy\" [src]=\"item?.image?.url\" [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\" [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\n </div>\n </div>\n <div class=\"slider-track w-full\" *ngIf=\"!content?.display?.showImage && content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n *ngFor=\"let item of content?.listItem?.data\">\n <simpo-text-editor [(value)]=\"item.inputText.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"slider-track w-full\" *ngIf=\"content?.display?.showImage && content?.display?.showText\" [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides d-flex flex-column\" [simpoCorner]=\"styles?.corners\" *ngFor=\"let item of content?.listItem?.data\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'align-items-start': styles?.layout?.align === 'left', 'align-items-center': styles?.layout?.align === 'center', 'align-items-end': styles?.layout?.align === 'right'}\">\n <img loading=\"lazy\" [src]=\"item?.image?.url\" [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\" [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\">\n <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n <!-- </div> -->\n </div>\n\n\n\n </div>\n </div>\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n </div>\n</div>\n\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n class=\"total-container\">\n\n <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\n [simpoBorder]=\"styles?.border\">\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\n [simpoLayout]=\"styles?.layout\">\n <div class=\"mainsec px-5 content-side\" [id]=\"data?.id\"\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\n <div *ngFor=\"let item of content?.inputText\">\n\n <div class=\"text-element\"\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"gap-2 d-md-flex mt-15\" [ngClass]=\"[\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\n ]\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n\n <div [ngClass]=\"{\n 'fullwidth flex-1 inline-edit ': styles?.fullWidth,\n 'nofullwidth flex-1 inline-edit ': !styles?.fullWidth\n }\">\n <div class=\"masking\">\n\n <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\n [style.animationDirection]=\"animationDirection\">\n <div class=\"slider-track2\" *ngIf=\"content?.display?.showImage && !content?.display?.showText\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\n <div class=\"slides2\" [simpoCorner]=\"styles?.corners\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\n <img loading=\"lazy\" [src]=\"item?.image?.url\" [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\" [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\n </div>\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" \n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\n <img loading=\"lazy\" [src]=\"item?.image?.url\" [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\" [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\n </div>\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'\n }\" *ngFor=\"let item of content?.listItem?.data;let i = index\">\n <img loading=\"lazy\" [src]=\"item?.image?.url\" [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\" [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\n </div>\n </div>\n <div class=\"slider-track2\" *ngIf=\"content?.display?.showText && !content?.display?.showImage\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n *ngFor=\"let item of content?.listItem?.data\">\n <simpo-text-editor [(value)]=\"item.inputText.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"slider-track2 d-flex w-full\" *ngIf=\"content?.display?.showImage && content?.display?.showText\" [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides d-flex flex-column\" [simpoCorner]=\"styles?.corners\" *ngFor=\"let item of content?.listItem?.data\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'align-items-start': styles?.layout?.align === 'left', 'align-items-center': styles?.layout?.align === 'center', 'align-items-end': styles?.layout?.align === 'right'}\">\n <img loading=\"lazy\" [src]=\"item?.image?.url\" [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\" [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\">\n <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n </div>\n</div>", styles: [".masking{mask:linear-gradient(90deg,transparent,white 5%,white 95%,transparent);overflow:hidden;width:100%}.sliderdad{width:100%;display:flex}@media (min-width: 860px){.nofullwidth{padding-left:15rem;padding-right:15rem;overflow:hidden}}.slider-track2{min-width:max-content;translate:none;rotate:none;scale:none;gap:1rem;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.mainsec{gap:2rem;flex-direction:column;display:flex}.slider-track2.logotype-boxed{gap:1rem}.slider-track2.logotype-basic{gap:5rem}.slides2.logotype-boxed{padding:1.5rem 1.25rem;--tw-bg-opacity: .05;flex-shrink:0;width:auto;min-height:8rem;height:auto;display:flex;position:relative;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.slides2.logotype-basic{flex-shrink:0;width:auto;min-height:5rem;height:auto;display:flex;position:relative}.slides2.img{height:100%;max-width:100%;border-style:solid}@keyframes scrollLeft{0%{transform:translateZ(0)}to{transform:translate3d(-50%,0,0)}}@keyframes scrollRight{0%{transform:translate3d(-50%,0,0)}to{transform:translateZ(0)}}.animation{animation:scrollLeft 5s linear infinite}.slider-track{justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex;gap:10px}.slider-track.logotype-basic{gap:5rem}.slider-track.logotype-boxed{gap:1rem}.slides.logotype-basic{flex-shrink:0;width:auto;min-height:5rem;height:auto;display:flex;position:relative}.slides.logotype-boxed{padding:1.5rem .625rem;--tw-bg-opacity: .05;background-color:rgba(0,0,0,var(--tw-bg-opacity));flex-grow:1;flex-shrink:0;width:auto;min-height:8rem;height:auto;display:flex;position:relative}.slides.texttype-boxed{padding:1.5rem .625rem;justify-content:center;width:auto;display:flex;position:relative;border:1px solid #f3adb7}.slides.texttype-boxed:hover{--tw-bg-opacity: .05;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.slides.img{border-style:solid;max-width:100%;height:100%}@media only screen and (max-width: 500px){.col-xxl-8{padding-left:0!important;padding-right:0!important}.mainsec{padding-right:2rem!important;padding-left:2rem!important}.col-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}.slides img{width:88%}}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}.row{margin-left:0;margin-right:0}\n"], dependencies: [{ kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: 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: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }] }); }
|
|
10562
10565
|
}
|
|
10563
10566
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LogoShowcaseComponent, decorators: [{
|
|
10564
10567
|
type: Component,
|
|
10565
|
-
args: [{ selector: 'simpo-logo-showcase', standalone: true, imports: [SimpoButtonComponent, SimpoElementsModule, SanitizeHtmlPipe, TextEditorComponent, SimpoComponentModule, CommonModule, MatGridListModule, AnimationDirective, BackgroundDirective, ContentFitDirective, BorderDirective, BannerContentFitDirective, ButtonDirectiveDirective, ColumnDirectiveDirective, ContainerFitDirective, CornerDirective, simpoConetenAlignmentDirective, SimpoFooterLayoutDirective, HoverDirective, ImageDirectiveDirective, OverlayDirective, PositionLayoutDirectiveDirective, TextBackgroundDirectiveDirective, SpacingHorizontalDirective, ObjectPositionDirective, ImageEditorDirective], template: "<div *ngIf=\"styles?.showCaseType==='Grid'\">\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n class=\"total-container\" [attr.style]=\"customClass\">\n <div class=\"col-xxl-8 py-5 w-100 \" [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" #mainContainer\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\n <div class=\"row g-5 gridtext\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\n *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\n\n <div class=\"col-5 gridimg w-full mb-20 content-side\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\n <div *ngFor=\"let item of content?.inputText\">\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n </div> -->\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n </div>\n <div class=\"col-7 d-flex flex-wrap flex-1 w-full\">\n <div class=\"slider flex overflow-hidden w-full\">\n <div class=\"slider-track\" *ngIf=\"content?.display?.showImage && !content?.display?.showText\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\">\n </div>\n </div>\n <div class=\"slider-track w-full\" *ngIf=\"!content?.display?.showImage && content?.display?.showText\" [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" *ngFor=\"let item of content?.listItem?.data\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\n <simpo-text-editor [(value)]=\"item.inputText.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"slider-track w-full\" *ngIf=\"content?.display?.showImage && content?.display?.showText\" [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" *ngFor=\"let item of content?.listItem?.data\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\">\n <simpo-text-editor [(value)]=\"item.inputText.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n <!-- </div> -->\n </div>\n </div>\n <div class=\"flex-column row g-2\" [id]=\"data?.id\"\n [simpoLayout]=\"styles?.layout\" *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\n <div class=\"px-5 mb-20 content-side\" [id]=\"data?.id\"\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\n <div *ngFor=\"let item of content?.inputText\">\n\n <div class=\"text-element\"\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n [color]=\"data?.styles?.background?.accentColor\"[backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n </div>\n <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\n <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\n <div class=\"slider flex overflow-hidden w-full\">\n <div class=\"slider-track w-full\" *ngIf=\"content?.display?.showImage && !content?.display?.showText\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\n *ngFor=\"let item of content?.listItem?.data; let i = index\">\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\n </div>\n </div>\n <div class=\"slider-track w-full\" *ngIf=\"!content?.display?.showImage && content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\n *ngFor=\"let item of content?.listItem?.data\">\n <simpo-text-editor [(value)]=\"item.inputText.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"slider-track w-full\" *ngIf=\"content?.display?.showImage && content?.display?.showText\" [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides d-flex flex-column\" [simpoCorner]=\"styles?.corners\" *ngFor=\"let item of content?.listItem?.data\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\">\n <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n <!-- </div> -->\n </div>\n\n\n\n </div>\n </div>\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n </div>\n</div>\n\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n class=\"total-container\">\n\n <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\n [simpoBorder]=\"styles?.border\">\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\n [simpoLayout]=\"styles?.layout\">\n <div class=\"mainsec px-5 content-side\" [id]=\"data?.id\"\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\n <div *ngFor=\"let item of content?.inputText\">\n\n <div class=\"text-element\"\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"gap-2 d-md-flex mt-15\" [ngClass]=\"[\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\n ]\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n\n <div [ngClass]=\"{\n 'fullwidth flex-1 inline-edit ': styles?.fullWidth,\n 'nofullwidth flex-1 inline-edit ': !styles?.fullWidth\n }\">\n <div class=\"masking\">\n\n <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\n [style.animationDirection]=\"animationDirection\">\n <div class=\"slider-track2\" *ngIf=\"content?.display?.showImage && !content?.display?.showText\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\n <div class=\"slides2\" [simpoCorner]=\"styles?.corners\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\n </div>\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" \n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\n </div>\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'\n }\" *ngFor=\"let item of content?.listItem?.data;let i = index\">\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\n </div>\n </div>\n <div class=\"slider-track2\" *ngIf=\"content?.display?.showText && !content?.display?.showImage\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\n *ngFor=\"let item of content?.listItem?.data\">\n <simpo-text-editor [(value)]=\"item.inputText.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"slider-track2 d-flex w-full\" *ngIf=\"content?.display?.showImage && content?.display?.showText\" [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides d-flex flex-column\" [simpoCorner]=\"styles?.corners\" *ngFor=\"let item of content?.listItem?.data\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\">\n <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n </div>\n</div>", styles: [".masking{mask:linear-gradient(90deg,transparent,white 5%,white 95%,transparent);overflow:hidden;width:100%}.sliderdad{width:100%;display:flex}@media (min-width: 860px){.nofullwidth{padding-left:15rem;padding-right:15rem;overflow:hidden}}.slider-track2{min-width:max-content;translate:none;rotate:none;scale:none;gap:1rem;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.mainsec{gap:2rem;flex-direction:column;display:flex}.slider-track2.logotype-boxed{gap:1rem}.slider-track2.logotype-basic{gap:5rem}.slides2.logotype-boxed{padding:1.5rem 1.25rem;--tw-bg-opacity: .05;flex-shrink:0;width:auto;height:8rem;display:flex;position:relative;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.slides2.logotype-basic{flex-shrink:0;width:auto;height:5rem;display:flex;position:relative}.slides2.img{height:100%;max-width:100%;border-style:solid}@keyframes scrollLeft{0%{transform:translateZ(0)}to{transform:translate3d(-50%,0,0)}}@keyframes scrollRight{0%{transform:translate3d(-50%,0,0)}to{transform:translateZ(0)}}.animation{animation:scrollLeft 5s linear infinite}.slider-track{justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex;gap:10px}.slider-track.logotype-basic{gap:5rem}.slider-track.logotype-boxed{gap:1rem}.slides.logotype-basic{flex-shrink:0;width:auto;height:5rem;display:flex;position:relative}.slides.logotype-boxed{padding:1.5rem .625rem;--tw-bg-opacity: .05;background-color:rgba(0,0,0,var(--tw-bg-opacity));justify-content:center;flex-grow:1;flex-shrink:0;width:auto;height:8rem;display:flex;position:relative}.slides.texttype-boxed{padding:1.5rem .625rem;justify-content:center;width:auto;display:flex;position:relative;border:1px solid #f3adb7}.slides.texttype-boxed:hover{--tw-bg-opacity: .05;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.slides.img{border-style:solid;max-width:100%;height:100%}@media only screen and (max-width: 500px){.col-xxl-8{padding-left:0!important;padding-right:0!important}.mainsec{padding-right:2rem!important;padding-left:2rem!important}.col-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}.slides img{width:88%}}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}.row{margin-left:0;margin-right:0}\n"] }]
|
|
10568
|
+
args: [{ selector: 'simpo-logo-showcase', standalone: true, imports: [SimpoButtonComponent, SimpoElementsModule, SanitizeHtmlPipe, TextEditorComponent, SimpoComponentModule, CommonModule, MatGridListModule, AnimationDirective, BackgroundDirective, ContentFitDirective, BorderDirective, BannerContentFitDirective, ButtonDirectiveDirective, ColumnDirectiveDirective, ContainerFitDirective, CornerDirective, simpoConetenAlignmentDirective, SimpoFooterLayoutDirective, HoverDirective, ImageDirectiveDirective, OverlayDirective, PositionLayoutDirectiveDirective, TextBackgroundDirectiveDirective, SpacingHorizontalDirective, ObjectPositionDirective, ImageEditorDirective], template: "<div *ngIf=\"styles?.showCaseType==='Grid'\">\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n class=\"total-container\" [attr.style]=\"customClass\">\n <div class=\"col-xxl-8 py-5 w-100 \" [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" #mainContainer\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\n <div class=\"row g-5 gridtext\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\n *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\n\n <div class=\"col-5 gridimg w-full mb-20 content-side\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\n <div *ngFor=\"let item of content?.inputText\">\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n </div> -->\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n </div>\n <div class=\"col-7 d-flex flex-wrap flex-1 w-full\">\n <div class=\"slider flex overflow-hidden w-full\">\n <div class=\"slider-track\" *ngIf=\"content?.display?.showImage && !content?.display?.showText\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\n <img loading=\"lazy\" [src]=\"item?.image?.url\" [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\" [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\">\n </div>\n </div>\n <div class=\"slider-track w-full\" *ngIf=\"!content?.display?.showImage && content?.display?.showText\" [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" *ngFor=\"let item of content?.listItem?.data\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\n <simpo-text-editor [(value)]=\"item.inputText.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"slider-track w-full\" *ngIf=\"content?.display?.showImage && content?.display?.showText\" [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" *ngFor=\"let item of content?.listItem?.data\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\n <img loading=\"lazy\" [src]=\"item?.image?.url\" [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\" [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\">\n <simpo-text-editor [(value)]=\"item.inputText.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n <!-- </div> -->\n </div>\n </div>\n <div class=\"flex-column row g-2\" [id]=\"data?.id\"\n [simpoLayout]=\"styles?.layout\" *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\n <div class=\"px-5 mb-20 content-side\" [id]=\"data?.id\"\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\n <div *ngFor=\"let item of content?.inputText\">\n <div class=\"text-element\"\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n [color]=\"data?.styles?.background?.accentColor\"[backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n </div>\n <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\n <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\n <div class=\"slider flex overflow-hidden w-full\">\n <div class=\"slider-track w-full\" *ngIf=\"content?.display?.showImage && !content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n *ngFor=\"let item of content?.listItem?.data; let i = index\">\n <img loading=\"lazy\" [src]=\"item?.image?.url\" [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\" [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\n </div>\n </div>\n <div class=\"slider-track w-full\" *ngIf=\"!content?.display?.showImage && content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n *ngFor=\"let item of content?.listItem?.data\">\n <simpo-text-editor [(value)]=\"item.inputText.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"slider-track w-full\" *ngIf=\"content?.display?.showImage && content?.display?.showText\" [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides d-flex flex-column\" [simpoCorner]=\"styles?.corners\" *ngFor=\"let item of content?.listItem?.data\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'align-items-start': styles?.layout?.align === 'left', 'align-items-center': styles?.layout?.align === 'center', 'align-items-end': styles?.layout?.align === 'right'}\">\n <img loading=\"lazy\" [src]=\"item?.image?.url\" [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\" [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\">\n <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n <!-- </div> -->\n </div>\n\n\n\n </div>\n </div>\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n </div>\n</div>\n\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n class=\"total-container\">\n\n <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\n [simpoBorder]=\"styles?.border\">\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\n [simpoLayout]=\"styles?.layout\">\n <div class=\"mainsec px-5 content-side\" [id]=\"data?.id\"\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\n <div *ngFor=\"let item of content?.inputText\">\n\n <div class=\"text-element\"\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"gap-2 d-md-flex mt-15\" [ngClass]=\"[\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\n ]\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n\n <div [ngClass]=\"{\n 'fullwidth flex-1 inline-edit ': styles?.fullWidth,\n 'nofullwidth flex-1 inline-edit ': !styles?.fullWidth\n }\">\n <div class=\"masking\">\n\n <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\n [style.animationDirection]=\"animationDirection\">\n <div class=\"slider-track2\" *ngIf=\"content?.display?.showImage && !content?.display?.showText\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\n <div class=\"slides2\" [simpoCorner]=\"styles?.corners\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\n <img loading=\"lazy\" [src]=\"item?.image?.url\" [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\" [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\n </div>\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" \n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\n <img loading=\"lazy\" [src]=\"item?.image?.url\" [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\" [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\n </div>\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'\n }\" *ngFor=\"let item of content?.listItem?.data;let i = index\">\n <img loading=\"lazy\" [src]=\"item?.image?.url\" [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\" [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\n </div>\n </div>\n <div class=\"slider-track2\" *ngIf=\"content?.display?.showText && !content?.display?.showImage\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n *ngFor=\"let item of content?.listItem?.data\">\n <simpo-text-editor [(value)]=\"item.inputText.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"slider-track2 d-flex w-full\" *ngIf=\"content?.display?.showImage && content?.display?.showText\" [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides d-flex flex-column\" [simpoCorner]=\"styles?.corners\" *ngFor=\"let item of content?.listItem?.data\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'align-items-start': styles?.layout?.align === 'left', 'align-items-center': styles?.layout?.align === 'center', 'align-items-end': styles?.layout?.align === 'right'}\">\n <img loading=\"lazy\" [src]=\"item?.image?.url\" [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\" [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\">\n <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n </div>\n</div>", styles: [".masking{mask:linear-gradient(90deg,transparent,white 5%,white 95%,transparent);overflow:hidden;width:100%}.sliderdad{width:100%;display:flex}@media (min-width: 860px){.nofullwidth{padding-left:15rem;padding-right:15rem;overflow:hidden}}.slider-track2{min-width:max-content;translate:none;rotate:none;scale:none;gap:1rem;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.mainsec{gap:2rem;flex-direction:column;display:flex}.slider-track2.logotype-boxed{gap:1rem}.slider-track2.logotype-basic{gap:5rem}.slides2.logotype-boxed{padding:1.5rem 1.25rem;--tw-bg-opacity: .05;flex-shrink:0;width:auto;min-height:8rem;height:auto;display:flex;position:relative;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.slides2.logotype-basic{flex-shrink:0;width:auto;min-height:5rem;height:auto;display:flex;position:relative}.slides2.img{height:100%;max-width:100%;border-style:solid}@keyframes scrollLeft{0%{transform:translateZ(0)}to{transform:translate3d(-50%,0,0)}}@keyframes scrollRight{0%{transform:translate3d(-50%,0,0)}to{transform:translateZ(0)}}.animation{animation:scrollLeft 5s linear infinite}.slider-track{justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex;gap:10px}.slider-track.logotype-basic{gap:5rem}.slider-track.logotype-boxed{gap:1rem}.slides.logotype-basic{flex-shrink:0;width:auto;min-height:5rem;height:auto;display:flex;position:relative}.slides.logotype-boxed{padding:1.5rem .625rem;--tw-bg-opacity: .05;background-color:rgba(0,0,0,var(--tw-bg-opacity));flex-grow:1;flex-shrink:0;width:auto;min-height:8rem;height:auto;display:flex;position:relative}.slides.texttype-boxed{padding:1.5rem .625rem;justify-content:center;width:auto;display:flex;position:relative;border:1px solid #f3adb7}.slides.texttype-boxed:hover{--tw-bg-opacity: .05;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.slides.img{border-style:solid;max-width:100%;height:100%}@media only screen and (max-width: 500px){.col-xxl-8{padding-left:0!important;padding-right:0!important}.mainsec{padding-right:2rem!important;padding-left:2rem!important}.col-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}.slides img{width:88%}}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}.row{margin-left:0;margin-right:0}\n"] }]
|
|
10566
10569
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
10567
10570
|
type: Input
|
|
10568
10571
|
}], index: [{
|