simpo-component-library 3.6.874 → 3.6.876
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 +3 -3
- package/esm2022/lib/elements/text-editor/text-editor.component.mjs +4 -1
- package/fesm2022/simpo-component-library.mjs +7 -4
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/package.json +1 -1
- package/simpo-component-library-3.6.876.tgz +0 -0
- package/simpo-component-library-3.6.874.tgz +0 -0
|
@@ -1170,6 +1170,9 @@ class TextEditorComponent {
|
|
|
1170
1170
|
ngOnChanges(changes) {
|
|
1171
1171
|
if (changes['value']) {
|
|
1172
1172
|
this.updateSafeHtml();
|
|
1173
|
+
if (this.editor && !changes['value'].firstChange) {
|
|
1174
|
+
this.editor.commands.setContent(this.value || '');
|
|
1175
|
+
}
|
|
1173
1176
|
}
|
|
1174
1177
|
}
|
|
1175
1178
|
async ngAfterViewInit() {
|
|
@@ -1951,7 +1954,7 @@ class BelowImageCardComponent {
|
|
|
1951
1954
|
}
|
|
1952
1955
|
}
|
|
1953
1956
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BelowImageCardComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1954
|
-
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", positionLayout: "positionLayout", itemIndex: "itemIndex" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"card-container\"\r\n (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\r\n [ngClass]=\"{'box-shadow' : content.display.showCard, 'px-0 py-0': styles?.borderLessImage && !content?.display?.showIcon ,'py-14' : content?.display?.showCardBackground && !styles?.borderLessImage}\"\r\n [style.background]=\"getBackground()\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" [backgroundColor]=\"styles?.background?.color\"\r\n [simpoSetDynamicBackground]=\"content?.display?.showCardBackground\" [class]=\"getAlignment()\">\r\n\r\n <ng-container *ngIf=\"positionLayout == 'bottom'\">\r\n <ng-container *ngTemplateOutlet=\"headingDescription\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"iconAndImage\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"positionLayout == 'top'\">\r\n <ng-container *ngTemplateOutlet=\"iconAndImage\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"headingDescription\"></ng-container>\r\n </ng-container>\r\n\r\n <div class=\"ptb-1 w-100\">\r\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\" class=\"card-button\"\r\n [simpoHoverAnimation]=\"getContentAnimation()\">\r\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\"\r\n [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\" [color]=\"styles?.background?.accentColor\"\r\n [backgroundInfo]=\"styles?.background\" [edit]=\"edit\">\r\n </app-button-element>\r\n </div>\r\n </div>\r\n</div>\r\n<ng-template #iconAndImage>\r\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\r\n [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.display.showImage\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"data.image\" [sectionId]=\"
|
|
1957
|
+
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", positionLayout: "positionLayout", itemIndex: "itemIndex" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"card-container\"\r\n (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\r\n [ngClass]=\"{'box-shadow' : content.display.showCard, 'px-0 py-0': styles?.borderLessImage && !content?.display?.showIcon ,'py-14' : content?.display?.showCardBackground && !styles?.borderLessImage}\"\r\n [style.background]=\"getBackground()\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" [backgroundColor]=\"styles?.background?.color\"\r\n [simpoSetDynamicBackground]=\"content?.display?.showCardBackground\" [class]=\"getAlignment()\">\r\n\r\n <ng-container *ngIf=\"positionLayout == 'bottom'\">\r\n <ng-container *ngTemplateOutlet=\"headingDescription\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"iconAndImage\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"positionLayout == 'top'\">\r\n <ng-container *ngTemplateOutlet=\"iconAndImage\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"headingDescription\"></ng-container>\r\n </ng-container>\r\n\r\n <div class=\"ptb-1 w-100\">\r\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\" class=\"card-button\"\r\n [simpoHoverAnimation]=\"getContentAnimation()\">\r\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\"\r\n [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\" [color]=\"styles?.background?.accentColor\"\r\n [backgroundInfo]=\"styles?.background\" [edit]=\"edit\">\r\n </app-button-element>\r\n </div>\r\n </div>\r\n</div>\r\n<ng-template #iconAndImage>\r\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\r\n [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.display.showImage\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"data.image\" [sectionId]=\"componentId\"\r\n [simpoObjectPosition]=\"data?.image?.position\" [class]=\"data?.id+data.image.id\" [itemIndex]=\"itemIndex\">\r\n\r\n\r\n <ng-container *ngIf=\"content.display.showIcon && (data.icon.url.includes('.png') || data.icon.url.includes('.svg'))\">\r\n <div [simpoCorner]=\"styles?.corners\" [class.hovering-effect]=\"content?.display?.showHoverEffect\" [id]=\"componentId\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"data?.icon?.showBackground ? getIconBackground : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\" [sectionId]=\"componentId\"\r\n [showIcon]=\"content.display.showIcon\" [itemIndex]=\"itemIndex\">\r\n <div [id]=\"componentId\" [iconId]=\"componentId + data?.icon?.id\" [simpoIconDirective]=\"data?.icon\"\r\n class=\"w-65 h-100\" [class.w-100]=\"!data?.icon?.showBackground\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <img loading=\"lazy\" class=\"logo-img\" [src]=\"data.icon.url\" [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\"\r\n [sectionId]=\"componentId\" [showIcon]=\"content.display.showIcon\" [itemIndex]=\"itemIndex\"\r\n *ngIf=\"content.display.showIcon && !data.icon.url.includes('.png') && !data.icon.url.includes('.svg')\"\r\n class=\"logo-img\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n [class.hovering-effect]=\"content?.display?.showHoverEffect\">\r\n</ng-template>\r\n\r\n<ng-template #headingDescription>\r\n\r\n <div class=\"ptb-1 content-side w-100\">\r\n <div class=\"heading-medium mb-1\" *ngIf=\"content.display.showHeading\">\r\n <div class=\"d-flex justify-content-between align-items-start\">\r\n <simpo-text-editor [(value)]=\"data.inputText[0].value\" [editable]=\"edit || false\">\r\n </simpo-text-editor>\r\n <div class=\"indexing\" *ngIf=\"styles?.showIndexing\" [style.color]=\"styles?.background?.accentColor\"\r\n [style.background]=\"getGlassyBackground(styles?.background?.accentColor)\">\r\n 0{{ currentIndex }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\r\n <simpo-text-editor [(value)]=\"data.inputText[01].value \" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".w-100{width:100%}.card-container{display:flex;flex-direction:column;height:100%;position:relative}.card-inner{display:flex;flex-direction:column;width:100%}.justify-items-start{align-items:flex-start;text-align:left}.justify-items-end{align-items:flex-end;text-align:right}.justify-items-center{align-items:center;text-align:center}.content-side{display:flex;flex-direction:column;flex:1;padding:14px 18px}.card-button{margin-top:auto;padding-top:12px;padding-bottom:10px}.ptb-1{padding-top:1rem}.mb-1{margin-bottom:1rem!important}.box-shadow{box-shadow:0 10px 40px #0a32231a;padding:12px 20px;color:#000!important}.logo-img{width:70px;height:70px;margin-top:.25rem;margin:0 18px}.w-65{width:65%}.justify-items-start{justify-items:flex-start}.justify-items-end{justify-items:flex-end}.justify-items-center{justify-items:center}.indexing{font-size:14px;padding:6px 8px;border-radius:50px}@media screen and (max-width: 475px){.mt-4{margin-top:unset!important}}\n"], dependencies: [{ kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: 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", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { 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"] }, { kind: "directive", type: IconDirectiveDirective, selector: "[simpoIconDirective]", inputs: ["simpoIconDirective", "iconId"] }] }); }
|
|
1955
1958
|
}
|
|
1956
1959
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BelowImageCardComponent, decorators: [{
|
|
1957
1960
|
type: Component,
|
|
@@ -1968,7 +1971,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1968
1971
|
SetDynamicBackgroundDirective,
|
|
1969
1972
|
IconDirectiveDirective,
|
|
1970
1973
|
CdkDragPlaceholder
|
|
1971
|
-
], template: "<div class=\"card-container\"\r\n (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\r\n [ngClass]=\"{'box-shadow' : content.display.showCard, 'px-0 py-0': styles?.borderLessImage && !content?.display?.showIcon ,'py-14' : content?.display?.showCardBackground && !styles?.borderLessImage}\"\r\n [style.background]=\"getBackground()\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" [backgroundColor]=\"styles?.background?.color\"\r\n [simpoSetDynamicBackground]=\"content?.display?.showCardBackground\" [class]=\"getAlignment()\">\r\n\r\n <ng-container *ngIf=\"positionLayout == 'bottom'\">\r\n <ng-container *ngTemplateOutlet=\"headingDescription\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"iconAndImage\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"positionLayout == 'top'\">\r\n <ng-container *ngTemplateOutlet=\"iconAndImage\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"headingDescription\"></ng-container>\r\n </ng-container>\r\n\r\n <div class=\"ptb-1 w-100\">\r\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\" class=\"card-button\"\r\n [simpoHoverAnimation]=\"getContentAnimation()\">\r\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\"\r\n [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\" [color]=\"styles?.background?.accentColor\"\r\n [backgroundInfo]=\"styles?.background\" [edit]=\"edit\">\r\n </app-button-element>\r\n </div>\r\n </div>\r\n</div>\r\n<ng-template #iconAndImage>\r\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\r\n [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.display.showImage\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"data.image\" [sectionId]=\"
|
|
1974
|
+
], template: "<div class=\"card-container\"\r\n (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\r\n [ngClass]=\"{'box-shadow' : content.display.showCard, 'px-0 py-0': styles?.borderLessImage && !content?.display?.showIcon ,'py-14' : content?.display?.showCardBackground && !styles?.borderLessImage}\"\r\n [style.background]=\"getBackground()\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" [backgroundColor]=\"styles?.background?.color\"\r\n [simpoSetDynamicBackground]=\"content?.display?.showCardBackground\" [class]=\"getAlignment()\">\r\n\r\n <ng-container *ngIf=\"positionLayout == 'bottom'\">\r\n <ng-container *ngTemplateOutlet=\"headingDescription\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"iconAndImage\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"positionLayout == 'top'\">\r\n <ng-container *ngTemplateOutlet=\"iconAndImage\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"headingDescription\"></ng-container>\r\n </ng-container>\r\n\r\n <div class=\"ptb-1 w-100\">\r\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\" class=\"card-button\"\r\n [simpoHoverAnimation]=\"getContentAnimation()\">\r\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\"\r\n [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\" [color]=\"styles?.background?.accentColor\"\r\n [backgroundInfo]=\"styles?.background\" [edit]=\"edit\">\r\n </app-button-element>\r\n </div>\r\n </div>\r\n</div>\r\n<ng-template #iconAndImage>\r\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\r\n [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.display.showImage\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"data.image\" [sectionId]=\"componentId\"\r\n [simpoObjectPosition]=\"data?.image?.position\" [class]=\"data?.id+data.image.id\" [itemIndex]=\"itemIndex\">\r\n\r\n\r\n <ng-container *ngIf=\"content.display.showIcon && (data.icon.url.includes('.png') || data.icon.url.includes('.svg'))\">\r\n <div [simpoCorner]=\"styles?.corners\" [class.hovering-effect]=\"content?.display?.showHoverEffect\" [id]=\"componentId\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"data?.icon?.showBackground ? getIconBackground : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\" [sectionId]=\"componentId\"\r\n [showIcon]=\"content.display.showIcon\" [itemIndex]=\"itemIndex\">\r\n <div [id]=\"componentId\" [iconId]=\"componentId + data?.icon?.id\" [simpoIconDirective]=\"data?.icon\"\r\n class=\"w-65 h-100\" [class.w-100]=\"!data?.icon?.showBackground\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <img loading=\"lazy\" class=\"logo-img\" [src]=\"data.icon.url\" [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\"\r\n [sectionId]=\"componentId\" [showIcon]=\"content.display.showIcon\" [itemIndex]=\"itemIndex\"\r\n *ngIf=\"content.display.showIcon && !data.icon.url.includes('.png') && !data.icon.url.includes('.svg')\"\r\n class=\"logo-img\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n [class.hovering-effect]=\"content?.display?.showHoverEffect\">\r\n</ng-template>\r\n\r\n<ng-template #headingDescription>\r\n\r\n <div class=\"ptb-1 content-side w-100\">\r\n <div class=\"heading-medium mb-1\" *ngIf=\"content.display.showHeading\">\r\n <div class=\"d-flex justify-content-between align-items-start\">\r\n <simpo-text-editor [(value)]=\"data.inputText[0].value\" [editable]=\"edit || false\">\r\n </simpo-text-editor>\r\n <div class=\"indexing\" *ngIf=\"styles?.showIndexing\" [style.color]=\"styles?.background?.accentColor\"\r\n [style.background]=\"getGlassyBackground(styles?.background?.accentColor)\">\r\n 0{{ currentIndex }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\r\n <simpo-text-editor [(value)]=\"data.inputText[01].value \" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".w-100{width:100%}.card-container{display:flex;flex-direction:column;height:100%;position:relative}.card-inner{display:flex;flex-direction:column;width:100%}.justify-items-start{align-items:flex-start;text-align:left}.justify-items-end{align-items:flex-end;text-align:right}.justify-items-center{align-items:center;text-align:center}.content-side{display:flex;flex-direction:column;flex:1;padding:14px 18px}.card-button{margin-top:auto;padding-top:12px;padding-bottom:10px}.ptb-1{padding-top:1rem}.mb-1{margin-bottom:1rem!important}.box-shadow{box-shadow:0 10px 40px #0a32231a;padding:12px 20px;color:#000!important}.logo-img{width:70px;height:70px;margin-top:.25rem;margin:0 18px}.w-65{width:65%}.justify-items-start{justify-items:flex-start}.justify-items-end{justify-items:flex-end}.justify-items-center{justify-items:center}.indexing{font-size:14px;padding:6px 8px;border-radius:50px}@media screen and (max-width: 475px){.mt-4{margin-top:unset!important}}\n"] }]
|
|
1972
1975
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
1973
1976
|
type: Input
|
|
1974
1977
|
}], styles: [{
|
|
@@ -2159,7 +2162,7 @@ class CoveringImageCardComponent {
|
|
|
2159
2162
|
return { contentAnimation: this.styles?.contentAnimation };
|
|
2160
2163
|
}
|
|
2161
2164
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CoveringImageCardComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2162
|
-
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", itemIndex: "itemIndex" }, ngImport: i0, template: "<div class=\"parent-tab\" [id]=\"componentId\"\r\n (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\">\r\n <div class=\"popular-tag\" [simpoCorner]=\"styles?.corners\"\r\n [ngStyle]=\"{'background-color': styles?.background?.accentColor}\" *ngIf=\"data?.highlight?.highlighted === true\">\r\n <simpo-text-editor [(value)]=\"data.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <ng-container *ngIf=\"content.display.showImage\">\r\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoCorner]=\"styles?.corners\"\r\n [id]=\"componentId\" class=\"w-100 img\"\r\n [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\r\n [class]=\"componentId+data.image.id\" [simpoImageDirective]=\"styles?.image\" loading=\"lazy\" [appImageEditor]=\"
|
|
2165
|
+
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", itemIndex: "itemIndex" }, ngImport: i0, template: "<div class=\"parent-tab\" [id]=\"componentId\"\r\n (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\">\r\n <div class=\"popular-tag\" [simpoCorner]=\"styles?.corners\"\r\n [ngStyle]=\"{'background-color': styles?.background?.accentColor}\" *ngIf=\"data?.highlight?.highlighted === true\">\r\n <simpo-text-editor [(value)]=\"data.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <ng-container *ngIf=\"content.display.showImage\">\r\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoCorner]=\"styles?.corners\"\r\n [id]=\"componentId\" class=\"w-100 img\"\r\n [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\r\n [class]=\"componentId+data.image.id\" [simpoImageDirective]=\"styles?.image\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"data?.image\" [sectionId]=\"componentId\" [simpoObjectPosition]=\"data?.image?.position\" [itemIndex]=\"itemIndex\">\r\n <!-- <img loading=\"lazy\" [simpoImageDirective]=\"styles?.image\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n [class]=\"data?.id+data.image.id\" [simpoObjectPosition]=\"data.image.position\" [src]=\"data.image.url\"\r\n [alt]=\"data.image.altText\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"data?.image\"\r\n [sectionId]=\"data?.id\" class=\"w-100 h-100\" />\r\n </ng-container> -->\r\n </ng-container>\r\n <div class=\"ptb-1 content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\"\r\n [simpoTextBackgroundDirective]=\"styles?.textBackground\">\r\n <div class=\"heading-medium mb-1\" *ngIf=\"content.display.showHeading\">\r\n <simpo-text-editor [(value)]=\"data.inputText[0].value \" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\r\n <simpo-text-editor [(value)]=\"data.inputText[1].value \" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\"\r\n [simpoHoverAnimation]=\"getContentAnimation()\">\r\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\"\r\n [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n</div>", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{position:relative;bottom:0;padding:1.5rem;display:flex;flex-direction:column;min-height:100%}.content>div:last-child{margin-top:auto}.parent-tab{position:relative;height:100%;width:100%;display:flex;flex-direction:column}.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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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", "type"], outputs: ["valueChange"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { kind: "directive", type: HoverAnimationDirective, selector: "[simpoHoverAnimation]", inputs: ["simpoHoverAnimation"] }] }); }
|
|
2163
2166
|
}
|
|
2164
2167
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CoveringImageCardComponent, decorators: [{
|
|
2165
2168
|
type: Component,
|
|
@@ -2174,7 +2177,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2174
2177
|
ImageEditorDirective,
|
|
2175
2178
|
HoverAnimationDirective,
|
|
2176
2179
|
ButtonDirectiveDirective
|
|
2177
|
-
], template: "<div class=\"parent-tab\" [id]=\"componentId\"\r\n (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\">\r\n <div class=\"popular-tag\" [simpoCorner]=\"styles?.corners\"\r\n [ngStyle]=\"{'background-color': styles?.background?.accentColor}\" *ngIf=\"data?.highlight?.highlighted === true\">\r\n <simpo-text-editor [(value)]=\"data.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <ng-container *ngIf=\"content.display.showImage\">\r\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoCorner]=\"styles?.corners\"\r\n [id]=\"componentId\" class=\"w-100 img\"\r\n [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\r\n [class]=\"componentId+data.image.id\" [simpoImageDirective]=\"styles?.image\" loading=\"lazy\" [appImageEditor]=\"
|
|
2180
|
+
], template: "<div class=\"parent-tab\" [id]=\"componentId\"\r\n (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\">\r\n <div class=\"popular-tag\" [simpoCorner]=\"styles?.corners\"\r\n [ngStyle]=\"{'background-color': styles?.background?.accentColor}\" *ngIf=\"data?.highlight?.highlighted === true\">\r\n <simpo-text-editor [(value)]=\"data.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <ng-container *ngIf=\"content.display.showImage\">\r\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoCorner]=\"styles?.corners\"\r\n [id]=\"componentId\" class=\"w-100 img\"\r\n [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\r\n [class]=\"componentId+data.image.id\" [simpoImageDirective]=\"styles?.image\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"data?.image\" [sectionId]=\"componentId\" [simpoObjectPosition]=\"data?.image?.position\" [itemIndex]=\"itemIndex\">\r\n <!-- <img loading=\"lazy\" [simpoImageDirective]=\"styles?.image\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n [class]=\"data?.id+data.image.id\" [simpoObjectPosition]=\"data.image.position\" [src]=\"data.image.url\"\r\n [alt]=\"data.image.altText\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"data?.image\"\r\n [sectionId]=\"data?.id\" class=\"w-100 h-100\" />\r\n </ng-container> -->\r\n </ng-container>\r\n <div class=\"ptb-1 content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\"\r\n [simpoTextBackgroundDirective]=\"styles?.textBackground\">\r\n <div class=\"heading-medium mb-1\" *ngIf=\"content.display.showHeading\">\r\n <simpo-text-editor [(value)]=\"data.inputText[0].value \" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\r\n <simpo-text-editor [(value)]=\"data.inputText[1].value \" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\"\r\n [simpoHoverAnimation]=\"getContentAnimation()\">\r\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\"\r\n [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n</div>", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{position:relative;bottom:0;padding:1.5rem;display:flex;flex-direction:column;min-height:100%}.content>div:last-child{margin-top:auto}.parent-tab{position:relative;height:100%;width:100%;display:flex;flex-direction:column}.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"] }]
|
|
2178
2181
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
2179
2182
|
type: Input
|
|
2180
2183
|
}], styles: [{
|