simpo-component-library 3.6.83 → 3.6.85
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/directive/spacing-around.directive.mjs +2 -2
- package/esm2022/lib/elements/covering-image-card/covering-image-card.component.mjs +3 -3
- package/esm2022/lib/sections/appointment-form/appointment-form.component.mjs +5 -3
- package/esm2022/lib/sections/faq-section/faq-section.component.mjs +3 -3
- package/esm2022/lib/sections/features-section/features-section.component.mjs +6 -4
- package/esm2022/lib/sections/logo-gallery/logo-gallery.component.mjs +3 -3
- package/esm2022/lib/sections/logo-showcase/logo-showcase.component.mjs +3 -3
- package/esm2022/lib/sections/process-modern/process-modern.component.mjs +12 -4
- package/esm2022/lib/sections/process-section/process-section.component.mjs +3 -3
- package/esm2022/lib/styles/index.mjs +7 -7
- package/fesm2022/simpo-component-library.mjs +35 -24
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/directive/background-directive.d.ts +1 -1
- package/lib/directive/button-directive.directive.d.ts +1 -1
- package/lib/directive/color.directive.d.ts +1 -1
- package/lib/elements/link-editor/link-editor.component.d.ts +1 -1
- package/lib/sections/banner-carousel/banner-carousel.component.d.ts +2 -2
- package/lib/sections/carousel-banner/carousel-banner.component.d.ts +1 -1
- package/lib/sections/contact-us/contact-us.component.d.ts +1 -1
- package/lib/sections/image-section/image-section.component.d.ts +2 -2
- package/lib/sections/logo-showcase/logo-showcase.component.d.ts +1 -1
- package/lib/sections/moving-text/moving-text.component.d.ts +1 -1
- package/lib/sections/pricing-section/pricing-section.component.d.ts +1 -1
- package/lib/sections/process-modern/process-modern.component.d.ts +2 -0
- package/lib/styles/index.d.ts +6 -0
- package/package.json +1 -1
- package/simpo-component-library-3.6.85.tgz +0 -0
- package/src/lib/styles/global-styles.css +8 -0
- package/simpo-component-library-3.6.83.tgz +0 -0
|
@@ -345,18 +345,18 @@ const contentAlignment = {
|
|
|
345
345
|
// }
|
|
346
346
|
const fitContent = (element) => {
|
|
347
347
|
const style = {
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
348
|
+
display: 'flex',
|
|
349
|
+
'justify-content': 'center',
|
|
350
|
+
'align-items': 'center',
|
|
351
351
|
height: '100%',
|
|
352
352
|
};
|
|
353
353
|
applyStyle(element, style);
|
|
354
354
|
};
|
|
355
355
|
const fitScreen = (element) => {
|
|
356
356
|
const style = {
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
357
|
+
display: 'flex',
|
|
358
|
+
'justify-content': 'center',
|
|
359
|
+
'align-items': 'center',
|
|
360
360
|
'min-height': 'calc(95vh - 0px)',
|
|
361
361
|
};
|
|
362
362
|
applyStyle(element, style);
|
|
@@ -2416,11 +2416,11 @@ class CoveringImageCardComponent {
|
|
|
2416
2416
|
return { contentAnimation: this.styles?.contentAnimation };
|
|
2417
2417
|
}
|
|
2418
2418
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CoveringImageCardComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2419
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", 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\"\r\n (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\">\r\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 img\"\r\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\">\r\n <div class=\"ptb-1 content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [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'\" [simpoHoverAnimation]=\"getContentAnimation()\">\r\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>\r\n </div>\r\n </div>\r\n</div>\r\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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
|
|
2419
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", 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\"\r\n (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\">\r\n <ng-container *ngIf=\"content.display.showImage\">\r\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 img\"\r\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\">\r\n </ng-container>\r\n <div class=\"ptb-1 content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [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'\" [simpoHoverAnimation]=\"getContentAnimation()\">\r\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>\r\n </div>\r\n </div>\r\n</div>\r\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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
|
|
2420
2420
|
}
|
|
2421
2421
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CoveringImageCardComponent, decorators: [{
|
|
2422
2422
|
type: Component,
|
|
2423
|
-
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\"\r\n (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\">\r\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 img\"\r\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\">\r\n <div class=\"ptb-1 content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [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'\" [simpoHoverAnimation]=\"getContentAnimation()\">\r\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>\r\n </div>\r\n </div>\r\n</div>\r\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}\n"] }]
|
|
2423
|
+
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\"\r\n (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\">\r\n <ng-container *ngIf=\"content.display.showImage\">\r\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 img\"\r\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\">\r\n </ng-container>\r\n <div class=\"ptb-1 content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [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'\" [simpoHoverAnimation]=\"getContentAnimation()\">\r\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>\r\n </div>\r\n </div>\r\n</div>\r\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}\n"] }]
|
|
2424
2424
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
2425
2425
|
type: Input
|
|
2426
2426
|
}], styles: [{
|
|
@@ -4792,7 +4792,7 @@ class SpacingAroundDirective {
|
|
|
4792
4792
|
else {
|
|
4793
4793
|
this.el.nativeElement.style.setProperty("padding-left", SPACINGALIGN[this.layout?.spacingAround]);
|
|
4794
4794
|
this.el.nativeElement.style.setProperty("padding-right", SPACINGALIGN[this.layout?.spacingAround]);
|
|
4795
|
-
if (this.layout?.spacingAround && this.layout?.spacingAround != 'none'
|
|
4795
|
+
if (this.layout?.spacingAround && this.layout?.spacingAround != 'none') {
|
|
4796
4796
|
this.el.nativeElement.style.setProperty("padding-top", '1rem');
|
|
4797
4797
|
this.el.nativeElement.style.setProperty("padding-bottom", '1rem');
|
|
4798
4798
|
}
|
|
@@ -5016,7 +5016,7 @@ class FaqSectionComponent extends BaseSection {
|
|
|
5016
5016
|
}
|
|
5017
5017
|
}
|
|
5018
5018
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FaqSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5019
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FaqSectionComponent, isStandalone: true, selector: "simpo-faq-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" class=\"total-container\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div class=\"col-xxl-8 py-5 w-100\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n [spacingHorizontal]=\"stylesLayout\" [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\">\r\n\r\n <div [simpoPositionLayoutDirective]=\"style?.positionLayout\" class=\"row\">\r\n <div class=\"container-fluid flex-col col-lg-6 col-md-6 cursor-pointer\" [id]=\"data?.id\"
|
|
5019
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FaqSectionComponent, isStandalone: true, selector: "simpo-faq-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" class=\"total-container\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div class=\"col-xxl-8 py-5 w-100\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n [spacingHorizontal]=\"stylesLayout\" [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\">\r\n\r\n <div [simpoPositionLayoutDirective]=\"style?.positionLayout\" class=\"row\">\r\n <div class=\"container-fluid flex-col col-lg-6 col-md-6 cursor-pointer\" [id]=\"data?.id\"\r\n [simpoLayout]=\"style?.layout\" [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let text of data?.content?.inputText\" class=\"w-100\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n\r\n <div *ngFor=\"let itemData of content?.listItem?.data; let i = index\" class=\"data data-1 w-100 cursor-pointer\"\r\n [ngStyle]=\"\r\n unCollapsedList.includes(i) && data?.styles?.background?.accentBackgroundType == 'Gradient'\r\n ? { background: 'linear-gradient(90deg, ' + data?.styles?.background?.accentColor + ', ' + data?.styles?.background?.secondaryAccentColor + ')' }\r\n : unCollapsedList.includes(i) && data?.styles?.background?.accentBackgroundType == 'Solid' ?\r\n{ background : data?.styles?.background?.accentColor} : {}\r\n \">\r\n <div style=\"display: flex;align-items: center;justify-content: space-between; cursor: pointer;\"\r\n class=\"question\">\r\n <p class=\"heading-medium position-relative content-side mb-0 text-start cursor-pointer\"\r\n data-toggle=\"collapse\" [ngClass]=\"{'fw-600':unCollapsedList.includes(i)}\">\r\n <!-- <span style=\"display: block;\" > -->\r\n <simpo-text-editor [(value)]=\"itemData.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n <!-- </span> -->\r\n </p>\r\n <mat-icon *ngIf=\"unCollapsedList.includes(i)\"\r\n [ngStyle]=\"{'left' : style?.layout?.align == 'right' ? 0 : '', 'right' : style?.layout?.align !== 'right' ? 0 : ''}\"\r\n (click)=\"toggleContent(i)\">close</mat-icon>\r\n <mat-icon *ngIf=\"!unCollapsedList.includes(i)\"\r\n [ngStyle]=\"{'left' : style?.layout?.align == 'right' ? 0 : '', 'right' : style?.layout?.align !== 'right' ? 0 : ''}\"\r\n (click)=\"toggleContent(i)\">add</mat-icon>\r\n </div>\r\n <div class=\"body-large desc multi-collapse text-start cursor-pointer\"\r\n [ngClass]=\"{'collapse': !unCollapsedList.includes(i)}\">\r\n <simpo-text-editor [(value)]=\"itemData.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-10 col-sm-6 col-md-6 col-lg-6 d-flex align-items-center\" *ngIf=\"content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\"\r\n [sectionId]=\"data?.id\" class=\"h-100 w-100\" />\r\n </div>\r\n </div>\r\n <!-- <div *ngIf=\"content?.image?.showImage && screenWidth > 475\" class=\"row g-5\" [id]=\"data?.id\"\r\n [simpoLayout]=\"style?.layout\" [simpoPositionLayoutDirective]=\"style?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': style?.positionLayout?.value === 'left' || style?.positionLayout?.value === 'right' }\">\r\n\r\n\r\n <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15 content-side \"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"style?.contentAlignment\">\r\n\r\n <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n\r\n <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\"\r\n class=\"data\" (click)=\"toggleContent(i)\">\r\n <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative content-side cursor-pointer\"\r\n data-toggle=\"collapse\">\r\n <simpo-text-editor [(value)]=\"itemData.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n <mat-icon *ngIf=\"unCollapsedList.includes(i)\"\r\n style=\"position:relative; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n <mat-icon *ngIf=\"!unCollapsedList.includes(i)\"\r\n style=\"position: relative; right: 0px;\">keyboard_arrow_down</mat-icon>\r\n </p>\r\n <div class=\"body-large desc multi-collapse cursor-pointer\"\r\n [ngClass]=\"{'collapse': !unCollapsedList.includes(i)}\">\r\n <simpo-text-editor [(value)]=\"itemData.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\"\r\n [sectionId]=\"data?.id\" />\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</section>", styles: [".mb-2{margin-bottom:2.5rem!important}mat-icon{font-family:Material Icons!important}.data{gap:1rem;padding-top:.5rem;padding-bottom:.5rem;box-shadow:#11182733 0 -1px inset;cursor:pointer;width:100%}.flex-col{display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{height:auto;position:relative}.heading-large{margin-top:20px}.question p{width:95%}.question mat-icon{width:5%}@media only screen and (max-width: 475px){.row{display:flex;flex-direction:column-reverse}.col-10{width:100%!important}.question p{width:90%}.question mat-icon{width:10%}}.float-end{position:absolute;top:0}@media only screen and (min-width: 500px){.heading-medium{font-size:20px}}@media screen and (max-width: 500px){.heading-medium{font-size:16px}.desc{font-size:14px}}.w-60{width:60%}.data-1{box-shadow:#0000001a 0 1px 3px,#0000000f 0 1px 2px;border-radius:10px;text-align:center;padding-left:1rem;padding-right:1rem;margin-bottom:1rem;cursor:pointer}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type:
|
|
5020
5020
|
//directive
|
|
5021
5021
|
AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }] }); }
|
|
5022
5022
|
}
|
|
@@ -5053,7 +5053,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
5053
5053
|
SpacingHorizontalDirective,
|
|
5054
5054
|
SvgDividerComponent,
|
|
5055
5055
|
ImageEditorDirective
|
|
5056
|
-
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" class=\"total-container\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div class=\"col-xxl-8 py-5 w-100\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n [spacingHorizontal]=\"stylesLayout\" [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\">\r\n\r\n <div [simpoPositionLayoutDirective]=\"style?.positionLayout\" class=\"row\">\r\n <div class=\"container-fluid flex-col col-lg-6 col-md-6 cursor-pointer\" [id]=\"data?.id\"
|
|
5056
|
+
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" class=\"total-container\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div class=\"col-xxl-8 py-5 w-100\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n [spacingHorizontal]=\"stylesLayout\" [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\">\r\n\r\n <div [simpoPositionLayoutDirective]=\"style?.positionLayout\" class=\"row\">\r\n <div class=\"container-fluid flex-col col-lg-6 col-md-6 cursor-pointer\" [id]=\"data?.id\"\r\n [simpoLayout]=\"style?.layout\" [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let text of data?.content?.inputText\" class=\"w-100\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n\r\n <div *ngFor=\"let itemData of content?.listItem?.data; let i = index\" class=\"data data-1 w-100 cursor-pointer\"\r\n [ngStyle]=\"\r\n unCollapsedList.includes(i) && data?.styles?.background?.accentBackgroundType == 'Gradient'\r\n ? { background: 'linear-gradient(90deg, ' + data?.styles?.background?.accentColor + ', ' + data?.styles?.background?.secondaryAccentColor + ')' }\r\n : unCollapsedList.includes(i) && data?.styles?.background?.accentBackgroundType == 'Solid' ?\r\n{ background : data?.styles?.background?.accentColor} : {}\r\n \">\r\n <div style=\"display: flex;align-items: center;justify-content: space-between; cursor: pointer;\"\r\n class=\"question\">\r\n <p class=\"heading-medium position-relative content-side mb-0 text-start cursor-pointer\"\r\n data-toggle=\"collapse\" [ngClass]=\"{'fw-600':unCollapsedList.includes(i)}\">\r\n <!-- <span style=\"display: block;\" > -->\r\n <simpo-text-editor [(value)]=\"itemData.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n <!-- </span> -->\r\n </p>\r\n <mat-icon *ngIf=\"unCollapsedList.includes(i)\"\r\n [ngStyle]=\"{'left' : style?.layout?.align == 'right' ? 0 : '', 'right' : style?.layout?.align !== 'right' ? 0 : ''}\"\r\n (click)=\"toggleContent(i)\">close</mat-icon>\r\n <mat-icon *ngIf=\"!unCollapsedList.includes(i)\"\r\n [ngStyle]=\"{'left' : style?.layout?.align == 'right' ? 0 : '', 'right' : style?.layout?.align !== 'right' ? 0 : ''}\"\r\n (click)=\"toggleContent(i)\">add</mat-icon>\r\n </div>\r\n <div class=\"body-large desc multi-collapse text-start cursor-pointer\"\r\n [ngClass]=\"{'collapse': !unCollapsedList.includes(i)}\">\r\n <simpo-text-editor [(value)]=\"itemData.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-10 col-sm-6 col-md-6 col-lg-6 d-flex align-items-center\" *ngIf=\"content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\"\r\n [sectionId]=\"data?.id\" class=\"h-100 w-100\" />\r\n </div>\r\n </div>\r\n <!-- <div *ngIf=\"content?.image?.showImage && screenWidth > 475\" class=\"row g-5\" [id]=\"data?.id\"\r\n [simpoLayout]=\"style?.layout\" [simpoPositionLayoutDirective]=\"style?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': style?.positionLayout?.value === 'left' || style?.positionLayout?.value === 'right' }\">\r\n\r\n\r\n <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15 content-side \"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"style?.contentAlignment\">\r\n\r\n <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n\r\n <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\"\r\n class=\"data\" (click)=\"toggleContent(i)\">\r\n <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative content-side cursor-pointer\"\r\n data-toggle=\"collapse\">\r\n <simpo-text-editor [(value)]=\"itemData.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n <mat-icon *ngIf=\"unCollapsedList.includes(i)\"\r\n style=\"position:relative; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n <mat-icon *ngIf=\"!unCollapsedList.includes(i)\"\r\n style=\"position: relative; right: 0px;\">keyboard_arrow_down</mat-icon>\r\n </p>\r\n <div class=\"body-large desc multi-collapse cursor-pointer\"\r\n [ngClass]=\"{'collapse': !unCollapsedList.includes(i)}\">\r\n <simpo-text-editor [(value)]=\"itemData.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\"\r\n [sectionId]=\"data?.id\" />\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</section>", styles: [".mb-2{margin-bottom:2.5rem!important}mat-icon{font-family:Material Icons!important}.data{gap:1rem;padding-top:.5rem;padding-bottom:.5rem;box-shadow:#11182733 0 -1px inset;cursor:pointer;width:100%}.flex-col{display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{height:auto;position:relative}.heading-large{margin-top:20px}.question p{width:95%}.question mat-icon{width:5%}@media only screen and (max-width: 475px){.row{display:flex;flex-direction:column-reverse}.col-10{width:100%!important}.question p{width:90%}.question mat-icon{width:10%}}.float-end{position:absolute;top:0}@media only screen and (min-width: 500px){.heading-medium{font-size:20px}}@media screen and (max-width: 500px){.heading-medium{font-size:16px}.desc{font-size:14px}}.w-60{width:60%}.data-1{box-shadow:#0000001a 0 1px 3px,#0000000f 0 1px 2px;border-radius:10px;text-align:center;padding-left:1rem;padding-right:1rem;margin-bottom:1rem;cursor:pointer}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}\n"] }]
|
|
5057
5057
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
5058
5058
|
type: Input
|
|
5059
5059
|
}], index: [{
|
|
@@ -10081,7 +10081,7 @@ class ProcessSectionComponent extends BaseSection {
|
|
|
10081
10081
|
return this.content?.listItem?.data?.length ?? 0;
|
|
10082
10082
|
}
|
|
10083
10083
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProcessSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10084
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProcessSectionComponent, isStandalone: true, selector: "simpo-process-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"col-xxl-8 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\">\r\n\r\n <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15 content-side\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n [class.col-lg-10]=\"!content?.image?.showImage\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [simpoColor]=\"styles?.background?.color\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.processSectionDisplayStyle == 'STYLE1'\">\r\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <!-- <div class=\"first-part-card\"\r\n [ngClass]=\"item.inputText[0].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n {{ item.inputText[0].value }}\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n <div class=\"second-part-card \" *ngIf=\"item.image.url && (deviceWidth >= 475)\">\r\n <img loading=\"lazy\" [src]=\"item.image.url\" [alt]=\"item.image.altText\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" />\r\n </div>\r\n <div class=\"third-part-card\">\r\n <!-- <div class=\"text-element heading-medium\" [innerHtml]=\"item.inputText[1].value | sanitizeHtml\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[1].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n <!-- <div class=\"text-element\" [innerHtml]=\"item.inputText[2].value | sanitizeHtml\"\r\n [ngClass]=\"item.inputText[2].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[2].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"styles?.processSectionDisplayStyle == 'STYLE2'\">\r\n <div *ngFor=\"let item of content?.listItem?.data; let i = index\" class=\"carder\">\r\n <div class=\"step-container\">\r\n <div class=\"step\">\r\n <div class=\"step-section d-flex align-items-center gap-3\">\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <div class=\"gradient-stroke-text mb-3\" [attr.data-text]=\"i+1\" [ngStyle]=\"{\r\n color: 'transparent',\r\n fontWeight: '900',\r\n fontSize: '40px',\r\n WebkitTextStroke: '2px ' + styles?.background?.accentColor\r\n }\">{{ i+1 | number: '2.0' }}</div>\r\n <div class=\"height-width\" [style.background]=\"styles?.background?.accentColor\" *ngIf=\" i != getLength()-1\">\r\n </div>\r\n </div>\r\n <div class=\"third-part-card w-100\">\r\n <simpo-text-editor [(value)]=\"item.inputText[1].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n <simpo-text-editor [(value)]=\"item.inputText[2].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid h-100\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.container_card .card-section{display:flex;align-items:center;justify-content:center;gap:30px;padding:20px;border:1px solid rgba(116,33,252,.1);border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}@media only screen and (max-width: 475px){.col-10{width:100%;height:32vh;padding-right:13px;padding-left:13px}.container_card .card-section{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:10px;border:1px solid rgba(116,33,252,.1);border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}}.text-element{inline-size:100%;overflow-wrap:break-word}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content;text-align:left}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:40px;height:40px;border-radius:50%;border:1px solid rgba(116,33,252,.1);padding:10px;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.second-part-card img{width:100%;height:100%;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}:host ::ng-deep .gradient-stroke-text{font-family:Arial Black,sans-serif}.height-width{width:3px;height:50px}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }] }); }
|
|
10084
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProcessSectionComponent, isStandalone: true, selector: "simpo-process-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"col-xxl-8 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\">\r\n\r\n <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15 content-side\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n [class.col-lg-10]=\"!content?.image?.showImage\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [simpoColor]=\"styles?.background?.color\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.processSectionDisplayStyle == 'STYLE1'\">\r\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <!-- <div class=\"first-part-card\"\r\n [ngClass]=\"item.inputText[0].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n {{ item.inputText[0].value }}\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n <div class=\"second-part-card \" *ngIf=\"item.image.url && (deviceWidth >= 475)\">\r\n <img loading=\"lazy\" [src]=\"item.image.url\" [alt]=\"item.image.altText\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" />\r\n </div>\r\n <div class=\"third-part-card\">\r\n <!-- <div class=\"text-element heading-medium\" [innerHtml]=\"item.inputText[1].value | sanitizeHtml\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[1].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n <!-- <div class=\"text-element\" [innerHtml]=\"item.inputText[2].value | sanitizeHtml\"\r\n [ngClass]=\"item.inputText[2].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[2].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"styles?.processSectionDisplayStyle == 'STYLE2'\">\r\n <div *ngFor=\"let item of content?.listItem?.data; let i = index\" class=\"carder\">\r\n <div class=\"step-container\">\r\n <div class=\"step\">\r\n <div class=\"step-section d-flex gap-3\">\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <div class=\"gradient-stroke-text mb-1\" [attr.data-text]=\"i+1\" [ngStyle]=\"{\r\n color: 'transparent',\r\n fontWeight: '900',\r\n fontSize: '36px',\r\n WebkitTextStroke: '2px ' + styles?.background?.accentColor\r\n }\">{{ i+1 | number: '2.0' }}</div>\r\n <div class=\"height-width\" [style.background]=\"styles?.background?.accentColor\" *ngIf=\" i != getLength()-1\">\r\n </div>\r\n </div>\r\n <div class=\"third-part-card w-100\">\r\n <simpo-text-editor [(value)]=\"item.inputText[1].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n <simpo-text-editor [(value)]=\"item.inputText[2].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid h-100\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.container_card .card-section{display:flex;align-items:center;justify-content:center;gap:30px;padding:20px;border:1px solid rgba(116,33,252,.1);border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}@media only screen and (max-width: 475px){.col-10{width:100%;height:32vh;padding-right:13px;padding-left:13px}.container_card .card-section{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:10px;border:1px solid rgba(116,33,252,.1);border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}}.text-element{inline-size:100%;overflow-wrap:break-word}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content;text-align:left}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:40px;height:40px;border-radius:50%;border:1px solid rgba(116,33,252,.1);padding:10px;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.second-part-card img{width:100%;height:100%;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}:host ::ng-deep .gradient-stroke-text{font-family:Arial Black,sans-serif;position:relative;bottom:4px}.height-width{width:3px;flex-grow:1;display:flex;position:relative;flex-direction:column;bottom:6px}.step-section{align-items:stretch;flex:1 1 auto}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }] }); }
|
|
10085
10085
|
}
|
|
10086
10086
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProcessSectionComponent, decorators: [{
|
|
10087
10087
|
type: Component,
|
|
@@ -10113,7 +10113,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
10113
10113
|
SanitizeHtmlPipe,
|
|
10114
10114
|
TextSizeDirective,
|
|
10115
10115
|
SpacingHorizontalDirective,
|
|
10116
|
-
ImageEditorDirective], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"col-xxl-8 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\">\r\n\r\n <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15 content-side\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n [class.col-lg-10]=\"!content?.image?.showImage\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [simpoColor]=\"styles?.background?.color\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.processSectionDisplayStyle == 'STYLE1'\">\r\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <!-- <div class=\"first-part-card\"\r\n [ngClass]=\"item.inputText[0].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n {{ item.inputText[0].value }}\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n <div class=\"second-part-card \" *ngIf=\"item.image.url && (deviceWidth >= 475)\">\r\n <img loading=\"lazy\" [src]=\"item.image.url\" [alt]=\"item.image.altText\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" />\r\n </div>\r\n <div class=\"third-part-card\">\r\n <!-- <div class=\"text-element heading-medium\" [innerHtml]=\"item.inputText[1].value | sanitizeHtml\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[1].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n <!-- <div class=\"text-element\" [innerHtml]=\"item.inputText[2].value | sanitizeHtml\"\r\n [ngClass]=\"item.inputText[2].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[2].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"styles?.processSectionDisplayStyle == 'STYLE2'\">\r\n <div *ngFor=\"let item of content?.listItem?.data; let i = index\" class=\"carder\">\r\n <div class=\"step-container\">\r\n <div class=\"step\">\r\n <div class=\"step-section d-flex
|
|
10116
|
+
ImageEditorDirective], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"col-xxl-8 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\">\r\n\r\n <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15 content-side\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n [class.col-lg-10]=\"!content?.image?.showImage\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [simpoColor]=\"styles?.background?.color\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.processSectionDisplayStyle == 'STYLE1'\">\r\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <!-- <div class=\"first-part-card\"\r\n [ngClass]=\"item.inputText[0].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n {{ item.inputText[0].value }}\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n <div class=\"second-part-card \" *ngIf=\"item.image.url && (deviceWidth >= 475)\">\r\n <img loading=\"lazy\" [src]=\"item.image.url\" [alt]=\"item.image.altText\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" />\r\n </div>\r\n <div class=\"third-part-card\">\r\n <!-- <div class=\"text-element heading-medium\" [innerHtml]=\"item.inputText[1].value | sanitizeHtml\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[1].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n <!-- <div class=\"text-element\" [innerHtml]=\"item.inputText[2].value | sanitizeHtml\"\r\n [ngClass]=\"item.inputText[2].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[2].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"styles?.processSectionDisplayStyle == 'STYLE2'\">\r\n <div *ngFor=\"let item of content?.listItem?.data; let i = index\" class=\"carder\">\r\n <div class=\"step-container\">\r\n <div class=\"step\">\r\n <div class=\"step-section d-flex gap-3\">\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <div class=\"gradient-stroke-text mb-1\" [attr.data-text]=\"i+1\" [ngStyle]=\"{\r\n color: 'transparent',\r\n fontWeight: '900',\r\n fontSize: '36px',\r\n WebkitTextStroke: '2px ' + styles?.background?.accentColor\r\n }\">{{ i+1 | number: '2.0' }}</div>\r\n <div class=\"height-width\" [style.background]=\"styles?.background?.accentColor\" *ngIf=\" i != getLength()-1\">\r\n </div>\r\n </div>\r\n <div class=\"third-part-card w-100\">\r\n <simpo-text-editor [(value)]=\"item.inputText[1].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n <simpo-text-editor [(value)]=\"item.inputText[2].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid h-100\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.container_card .card-section{display:flex;align-items:center;justify-content:center;gap:30px;padding:20px;border:1px solid rgba(116,33,252,.1);border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}@media only screen and (max-width: 475px){.col-10{width:100%;height:32vh;padding-right:13px;padding-left:13px}.container_card .card-section{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:10px;border:1px solid rgba(116,33,252,.1);border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}}.text-element{inline-size:100%;overflow-wrap:break-word}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content;text-align:left}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:40px;height:40px;border-radius:50%;border:1px solid rgba(116,33,252,.1);padding:10px;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.second-part-card img{width:100%;height:100%;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}:host ::ng-deep .gradient-stroke-text{font-family:Arial Black,sans-serif;position:relative;bottom:4px}.height-width{width:3px;flex-grow:1;display:flex;position:relative;flex-direction:column;bottom:6px}.step-section{align-items:stretch;flex:1 1 auto}\n"] }]
|
|
10117
10117
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
10118
10118
|
type: Input
|
|
10119
10119
|
}], index: [{
|
|
@@ -10135,6 +10135,11 @@ class ProcessModernComponent extends BaseSection {
|
|
|
10135
10135
|
constructor(_eventService) {
|
|
10136
10136
|
super();
|
|
10137
10137
|
this._eventService = _eventService;
|
|
10138
|
+
this.scrWidth = 0;
|
|
10139
|
+
this.getScreenSize();
|
|
10140
|
+
}
|
|
10141
|
+
getScreenSize() {
|
|
10142
|
+
this.scrWidth = window.innerWidth;
|
|
10138
10143
|
}
|
|
10139
10144
|
ngOnInit() {
|
|
10140
10145
|
this.deleteSelected = this.delete;
|
|
@@ -10159,7 +10164,7 @@ class ProcessModernComponent extends BaseSection {
|
|
|
10159
10164
|
}, 100);
|
|
10160
10165
|
}
|
|
10161
10166
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProcessModernComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10162
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProcessModernComponent, isStandalone: true, selector: "simpo-process-modern", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"col-xxl-8 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"container-fluid d-flex flex-column content-side\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <!-- <div class=\"heading-large lh-2 mb-3 content-side\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n <!-- starting -->\r\n <div *ngFor=\"let item of content?.listItem?.data ;let i = index\" class=\"single_card content-side d-flex justify-content-center\">\r\n <div class=\"rowFlexContainer w-100\" [ngClass]=\"{'flex-row-reverse': i % 2 === 1}\">\r\n <div class=\"imageContainer\" [ngClass]=\"{'no-image': item.image.url===''}\">\r\n <img loading=\"lazy\" class=\"section_image\" [src]=\"item.image.url\" [alt]=\"item.image.altText\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\" [simpoObjectPosition]=\"item?.image?.position\" [simpoImageDirective]=\"styles?.image\">\r\n </div>\r\n <div class=\"content\" [ngClass]=\"{'no-image-content': item.image.url===''}\">\r\n <div class=\"numberStyle\">\r\n {{ i + 1}}\r\n </div>\r\n <!-- <div class=\"contentHeading content-side\" [innerHTML]=\" item.inputText[0].value | sanitizeHtml\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n <!-- <div class=\"contentDescription content-side\" [innerHTML]=\" item.inputText[1].value | sanitizeHtml\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- ending -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>\r\n", styles: [".single_card{width:100%}.rowFlexContainer{display:flex;flex-direction:row;margin:3% 0 0;justify-content:space-between!important}.flex-row-reverse{flex-direction:row-reverse}.imageContainer{width:40%!important;height:250px;line-height:30px}.section_image{width:100%;height:100%;object-fit:cover;border-radius:10px}.img{vertical-align:middle}.content{width:55%!important;height:100%;display:flex;flex-direction:column;justify-content:flex-start;font-size:18px;font-weight:600}.numberStyle{height:50px;padding:10px!important;border-radius:50%;border:1px solid black;width:50px!important;display:flex;align-items:center;justify-content:center}.contentHeading{margin-bottom:0;margin-top:20px;font-size:24px;font-weight:400}.contentDescription{padding-top:10px;line-height:28px;width:90%!important;text-overflow:ellipsis;overflow:hidden;font-size:18px;font-weight:400}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.no-image{display:none}.no-image-content{width:40%!important;margin-left:auto;margin-right:auto}.no-image-content .contentDescription{width:100%!important}@media only screen and (max-width: 475px){.rowFlexContainer{flex-direction:column!important;width:100%!important;height:auto!important}.imageContainer{width:100%!important;height:auto!important}.section_image{width:100%;height:auto;object-fit:cover;border-radius:10px}.content{width:100%!important;margin-top:15px;margin-right:0}.numberStyle{margin-bottom:15px;width:50px;height:50px}.contentDescription{width:100%!important}.row{margin-left:.2px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
|
10167
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProcessModernComponent, isStandalone: true, selector: "simpo-process-modern", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"col-xxl-8 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"container-fluid d-flex flex-column content-side\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <!-- <div class=\"heading-large lh-2 mb-3 content-side\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n <!-- starting -->\r\n <div *ngFor=\"let item of content?.listItem?.data ;let i = index\" class=\"single_card content-side d-flex justify-content-center\">\r\n <div class=\"rowFlexContainer w-100\" [ngClass]=\"{'flex-row-reverse': i % 2 === 1}\">\r\n <div class=\"imageContainer\" [ngClass]=\"{'no-image': item.image.url===''}\">\r\n <div *ngIf=\"scrWidth <= 500\" class=\"numberStyle\">\r\n {{ i + 1}}\r\n </div>\r\n <img loading=\"lazy\" class=\"section_image\" [src]=\"item.image.url\" [alt]=\"item.image.altText\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\" [simpoObjectPosition]=\"item?.image?.position\" [simpoImageDirective]=\"styles?.image\">\r\n </div>\r\n <div class=\"content\" [ngClass]=\"{'no-image-content': item.image.url===''}\">\r\n <div *ngIf=\"scrWidth > 500\" class=\"numberStyle\">\r\n {{ i + 1}}\r\n </div>\r\n <!-- <div class=\"contentHeading content-side\" [innerHTML]=\" item.inputText[0].value | sanitizeHtml\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n <!-- <div class=\"contentDescription content-side\" [innerHTML]=\" item.inputText[1].value | sanitizeHtml\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- ending -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>\r\n", styles: [".single_card{width:100%}.rowFlexContainer{display:flex;flex-direction:row;margin:3% 0 0;justify-content:space-between!important}.flex-row-reverse{flex-direction:row-reverse}.imageContainer{width:40%!important;height:250px;line-height:30px}.section_image{width:100%;height:100%;object-fit:cover;border-radius:10px}.img{vertical-align:middle}.content{width:55%!important;height:100%;display:flex;flex-direction:column;justify-content:flex-start;font-size:18px;font-weight:600}.numberStyle{height:50px;padding:10px!important;border-radius:50%;border:1px solid black;width:50px!important;display:flex;align-items:center;justify-content:center}.contentHeading{margin-bottom:0;margin-top:20px;font-size:24px;font-weight:400}.contentDescription{padding-top:10px;line-height:28px;width:90%!important;text-overflow:ellipsis;overflow:hidden;font-size:18px;font-weight:400}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.no-image{display:none}.no-image-content{width:40%!important;margin-left:auto;margin-right:auto}.no-image-content .contentDescription{width:100%!important}@media only screen and (max-width: 475px){.rowFlexContainer{flex-direction:column!important;width:100%!important;height:auto!important}.imageContainer{width:100%!important;height:auto!important}.section_image{width:100%;height:auto;object-fit:cover;border-radius:10px}.content{width:100%!important;margin-top:15px;margin-right:0}.numberStyle{margin-bottom:15px;width:50px;height:50px}.contentDescription{width:100%!important}.row{margin-left:.2px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
|
10163
10168
|
}
|
|
10164
10169
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProcessModernComponent, decorators: [{
|
|
10165
10170
|
type: Component,
|
|
@@ -10195,7 +10200,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
10195
10200
|
ImageEditorDirective,
|
|
10196
10201
|
ObjectPositionDirective,
|
|
10197
10202
|
SpacingHorizontalDirective
|
|
10198
|
-
], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"col-xxl-8 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"container-fluid d-flex flex-column content-side\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <!-- <div class=\"heading-large lh-2 mb-3 content-side\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n <!-- starting -->\r\n <div *ngFor=\"let item of content?.listItem?.data ;let i = index\" class=\"single_card content-side d-flex justify-content-center\">\r\n <div class=\"rowFlexContainer w-100\" [ngClass]=\"{'flex-row-reverse': i % 2 === 1}\">\r\n <div class=\"imageContainer\" [ngClass]=\"{'no-image': item.image.url===''}\">\r\n <img loading=\"lazy\" class=\"section_image\" [src]=\"item.image.url\" [alt]=\"item.image.altText\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\" [simpoObjectPosition]=\"item?.image?.position\" [simpoImageDirective]=\"styles?.image\">\r\n </div>\r\n <div class=\"content\" [ngClass]=\"{'no-image-content': item.image.url===''}\">\r\n <div class=\"numberStyle\">\r\n {{ i + 1}}\r\n </div>\r\n <!-- <div class=\"contentHeading content-side\" [innerHTML]=\" item.inputText[0].value | sanitizeHtml\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n <!-- <div class=\"contentDescription content-side\" [innerHTML]=\" item.inputText[1].value | sanitizeHtml\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- ending -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>\r\n", styles: [".single_card{width:100%}.rowFlexContainer{display:flex;flex-direction:row;margin:3% 0 0;justify-content:space-between!important}.flex-row-reverse{flex-direction:row-reverse}.imageContainer{width:40%!important;height:250px;line-height:30px}.section_image{width:100%;height:100%;object-fit:cover;border-radius:10px}.img{vertical-align:middle}.content{width:55%!important;height:100%;display:flex;flex-direction:column;justify-content:flex-start;font-size:18px;font-weight:600}.numberStyle{height:50px;padding:10px!important;border-radius:50%;border:1px solid black;width:50px!important;display:flex;align-items:center;justify-content:center}.contentHeading{margin-bottom:0;margin-top:20px;font-size:24px;font-weight:400}.contentDescription{padding-top:10px;line-height:28px;width:90%!important;text-overflow:ellipsis;overflow:hidden;font-size:18px;font-weight:400}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.no-image{display:none}.no-image-content{width:40%!important;margin-left:auto;margin-right:auto}.no-image-content .contentDescription{width:100%!important}@media only screen and (max-width: 475px){.rowFlexContainer{flex-direction:column!important;width:100%!important;height:auto!important}.imageContainer{width:100%!important;height:auto!important}.section_image{width:100%;height:auto;object-fit:cover;border-radius:10px}.content{width:100%!important;margin-top:15px;margin-right:0}.numberStyle{margin-bottom:15px;width:50px;height:50px}.contentDescription{width:100%!important}.row{margin-left:.2px}}\n"] }]
|
|
10203
|
+
], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"col-xxl-8 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"container-fluid d-flex flex-column content-side\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <!-- <div class=\"heading-large lh-2 mb-3 content-side\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n <!-- starting -->\r\n <div *ngFor=\"let item of content?.listItem?.data ;let i = index\" class=\"single_card content-side d-flex justify-content-center\">\r\n <div class=\"rowFlexContainer w-100\" [ngClass]=\"{'flex-row-reverse': i % 2 === 1}\">\r\n <div class=\"imageContainer\" [ngClass]=\"{'no-image': item.image.url===''}\">\r\n <div *ngIf=\"scrWidth <= 500\" class=\"numberStyle\">\r\n {{ i + 1}}\r\n </div>\r\n <img loading=\"lazy\" class=\"section_image\" [src]=\"item.image.url\" [alt]=\"item.image.altText\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\" [simpoObjectPosition]=\"item?.image?.position\" [simpoImageDirective]=\"styles?.image\">\r\n </div>\r\n <div class=\"content\" [ngClass]=\"{'no-image-content': item.image.url===''}\">\r\n <div *ngIf=\"scrWidth > 500\" class=\"numberStyle\">\r\n {{ i + 1}}\r\n </div>\r\n <!-- <div class=\"contentHeading content-side\" [innerHTML]=\" item.inputText[0].value | sanitizeHtml\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n <!-- <div class=\"contentDescription content-side\" [innerHTML]=\" item.inputText[1].value | sanitizeHtml\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- ending -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>\r\n", styles: [".single_card{width:100%}.rowFlexContainer{display:flex;flex-direction:row;margin:3% 0 0;justify-content:space-between!important}.flex-row-reverse{flex-direction:row-reverse}.imageContainer{width:40%!important;height:250px;line-height:30px}.section_image{width:100%;height:100%;object-fit:cover;border-radius:10px}.img{vertical-align:middle}.content{width:55%!important;height:100%;display:flex;flex-direction:column;justify-content:flex-start;font-size:18px;font-weight:600}.numberStyle{height:50px;padding:10px!important;border-radius:50%;border:1px solid black;width:50px!important;display:flex;align-items:center;justify-content:center}.contentHeading{margin-bottom:0;margin-top:20px;font-size:24px;font-weight:400}.contentDescription{padding-top:10px;line-height:28px;width:90%!important;text-overflow:ellipsis;overflow:hidden;font-size:18px;font-weight:400}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.no-image{display:none}.no-image-content{width:40%!important;margin-left:auto;margin-right:auto}.no-image-content .contentDescription{width:100%!important}@media only screen and (max-width: 475px){.rowFlexContainer{flex-direction:column!important;width:100%!important;height:auto!important}.imageContainer{width:100%!important;height:auto!important}.section_image{width:100%;height:auto;object-fit:cover;border-radius:10px}.content{width:100%!important;margin-top:15px;margin-right:0}.numberStyle{margin-bottom:15px;width:50px;height:50px}.contentDescription{width:100%!important}.row{margin-left:.2px}}\n"] }]
|
|
10199
10204
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
10200
10205
|
type: Input
|
|
10201
10206
|
}], index: [{
|
|
@@ -10208,6 +10213,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
10208
10213
|
type: Input
|
|
10209
10214
|
}], nextComponentColor: [{
|
|
10210
10215
|
type: Input
|
|
10216
|
+
}], getScreenSize: [{
|
|
10217
|
+
type: HostListener,
|
|
10218
|
+
args: ["window: resize", ["$event"]]
|
|
10211
10219
|
}] } });
|
|
10212
10220
|
|
|
10213
10221
|
class FeaturesSectionComponent extends BaseSection {
|
|
@@ -10246,7 +10254,7 @@ class FeaturesSectionComponent extends BaseSection {
|
|
|
10246
10254
|
}, 100);
|
|
10247
10255
|
}
|
|
10248
10256
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturesSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10249
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FeaturesSectionComponent, isStandalone: true, selector: "simpo-features-section", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [simpoBorder]=\"styles?.border\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"row\" *ngIf=\"screenWidth > 475\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <!-- <div class=\"heading-medium mb-1 content-side\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n <div class=\" box justify-center d-flex g-25 mt-5 mb-5\">\r\n <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\r\n <div [ngClass]=\"{'tab': styles?.tabStyling == 'UNDERLINE' , 'tab1' : styles?.tabStyling == 'BOXED' , 'tab2' : styles?.tabStyling == 'NONE' }\" [ngClass]=\"{'active': index === selectedTabIndex && styles?.tabStyling == 'UNDERLINE' , 'active1' : index === selectedTabIndex && styles?.tabStyling == 'BOXED' , 'active2' : index === selectedTabIndex && styles?.tabStyling == 'NONE' }\" [style.borderColor]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" [style.color]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" (click)=\"changetab(index)\">\r\n <!-- {{ tab.inputText[0].value }} -->\r\n <simpo-text-editor [(value)]=\"tab.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row-container\" *ngIf=\"screenWidth <= 475\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <!-- <div class=\"heading-medium mb-1 content-side\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\" box d-flex g-25 mt-5 mb-5\">\r\n <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\r\n <div class=\"tab\" [ngClass]=\"{'active': index === selectedTabIndex}\" [style.borderColor]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" [style.color]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" (click)=\"changetab(index)\">\r\n <!-- {{ tab.inputText[0].value }} -->\r\n <simpo-text-editor [(value)]=\"tab.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"content d-flex g-15 mt-5\" *ngIf=\"currentData?.image?.url\">\r\n <div class=\"image\">\r\n <img loading=\"lazy\" [src]=\"currentData?.image?.url\" alt=\"\" [id]=\"data?.id\"\r\n [simpoImageDirective]=\"styles?.image\" [simpoObjectPosition]=\"currentData?.image?.position\"\r\n [simpoCorner]=\"styles?.corners\"\r\n class=\"d-block mx-lg-auto img-fluid h-100 \" [class]=\"data?.id+(currentData?.image?.id || '')\"\r\n loading=\"lazy\" [appImageEditor]=\"true\" [imageData]=\"currentData?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"content-heading\">\r\n <div class=\"heading-large content-side\" >\r\n <ng-container *ngIf=\"currentData?.inputText?.[1] as textItem\">\r\n <simpo-text-editor [(value)]=\"textItem.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div class=\"content-description body-large mt-1 content-side\" >\r\n <ng-container *ngIf=\"currentData?.inputText?.[2] as textitem\">\r\n <simpo-text-editor [(value)]=\"textitem.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"content justify-center d-flex g-15 mt-5\" *ngIf=\"!currentData?.image?.url\">\r\n <div class=\"content-heading text-center\">\r\n <div class=\"heading-large content-side\" [innerHtml]=\"currentData?.inputText?.[1]?.value\" [id]=\"data?.id\">\r\n </div>\r\n <div class=\"content-description body-large mt-1 text-center\" [innerHtml]=\"currentData?.inputText?.[2]?.value\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</section>\r\n", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.content{padding:0px 10rem;width:90%;gap:3rem;margin-bottom:4%}.image{width:40%;flex:1}.image img{width:100%}.content-heading{width:60%;text-align:start}.content-description{width:100%;text-align:start}.active{font-weight:700;letter-spacing:.8px;border-bottom:2px solid!important;padding-bottom:20px}.active1{font-weight:700;letter-spacing:.8px;border:2px solid!important;border-radius:7px}.active2{font-weight:700;letter-spacing:.8px;border:unset!important;padding-bottom:20px}.tab{letter-spacing:.8px;border-bottom:2px solid;padding-bottom:20px;cursor:pointer}.tab1{letter-spacing:.8px;border:2px solid;cursor:pointer}.tab2{letter-spacing:.8px;border:unset;padding-bottom:20px;cursor:pointer}@media only screen and (max-width: 768px){.content{flex-direction:column;padding:0 2rem;width:100%;gap:2rem}.image{order:-1;width:100%}.image img,.content-heading{width:100%}.box{overflow-x:scroll;gap:10%;margin:auto!important;padding:10px;width:85%!important}.row-container{width:100%!important}.tab{letter-spacing:.5px;border-bottom:1px solid;padding-bottom:10px;cursor:pointer}.image{width:100%}}@media screen and (max-width: 475px){.content{padding:0;margin-bottom:30px}}.g-25{gap:55px}.mt-1{margin-top:1rem}.justify-center{justify-content:center}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { 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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { 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: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
|
10257
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FeaturesSectionComponent, isStandalone: true, selector: "simpo-features-section", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [simpoBorder]=\"styles?.border\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"row\" *ngIf=\"screenWidth > 475\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <!-- <div class=\"heading-medium mb-1 content-side\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n <div class=\" box justify-center d-flex g-25 mt-5 mb-5\">\r\n <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\r\n <div [ngClass]=\"{'tab': styles?.tabStyling == 'UNDERLINE' , 'tab1' : styles?.tabStyling == 'BOXED' , 'tab2' : styles?.tabStyling == 'NONE' }\" [ngClass]=\"{'active': index === selectedTabIndex && styles?.tabStyling == 'UNDERLINE' , 'active1' : index === selectedTabIndex && styles?.tabStyling == 'BOXED' , 'active2' : index === selectedTabIndex && styles?.tabStyling == 'NONE' }\" [style.borderColor]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" [style.color]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" (click)=\"changetab(index)\">\r\n <!-- {{ tab.inputText[0].value }} -->\r\n <simpo-text-editor [(value)]=\"tab.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row-container\" *ngIf=\"screenWidth <= 475\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <!-- <div class=\"heading-medium mb-1 content-side\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\" box d-flex g-25 mt-5 mb-5\">\r\n <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\r\n <div class=\"tab\" [ngClass]=\"{'active': index === selectedTabIndex}\" [style.borderColor]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" [style.color]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" (click)=\"changetab(index)\">\r\n <!-- {{ tab.inputText[0].value }} -->\r\n <simpo-text-editor [(value)]=\"tab.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"content d-flex g-15 mt-5\" *ngIf=\"currentData?.image?.url\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\">\r\n <div class=\"image\">\r\n <img loading=\"lazy\" [src]=\"currentData?.image?.url\" alt=\"\" [id]=\"data?.id\"\r\n [simpoImageDirective]=\"styles?.image\" [simpoObjectPosition]=\"currentData?.image?.position\"\r\n [simpoCorner]=\"styles?.corners\"\r\n class=\"d-block mx-lg-auto img-fluid h-100 \" [class]=\"data?.id+(currentData?.image?.id || '')\"\r\n loading=\"lazy\" [appImageEditor]=\"true\" [imageData]=\"currentData?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"content-heading\">\r\n <div class=\"heading-large content-side\" >\r\n <ng-container *ngIf=\"currentData?.inputText?.[1] as textItem\">\r\n <simpo-text-editor [(value)]=\"textItem.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div class=\"content-description body-large mt-1 content-side\" >\r\n <ng-container *ngIf=\"currentData?.inputText?.[2] as textitem\">\r\n <simpo-text-editor [(value)]=\"textitem.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"content justify-center d-flex g-15 mt-5\" *ngIf=\"!currentData?.image?.url\">\r\n <div class=\"content-heading text-center\">\r\n <div class=\"heading-large content-side\" [innerHtml]=\"currentData?.inputText?.[1]?.value\" [id]=\"data?.id\">\r\n </div>\r\n <div class=\"content-description body-large mt-1 text-center\" [innerHtml]=\"currentData?.inputText?.[2]?.value\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</section>\r\n", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.content{padding:0px 10rem;width:90%;gap:3rem;margin-bottom:4%}.image{width:40%;flex:1}.image img{width:100%}.content-heading{width:60%;text-align:start}.content-description{width:100%;text-align:start}.active{font-weight:700;letter-spacing:.8px;border-bottom:2px solid!important;padding-bottom:20px}.active1{font-weight:700;letter-spacing:.8px;border:2px solid!important;border-radius:7px}.active2{font-weight:700;letter-spacing:.8px;border:unset!important;padding-bottom:20px}.tab{letter-spacing:.8px;border-bottom:2px solid;padding-bottom:20px;cursor:pointer}.tab1{letter-spacing:.8px;border:2px solid;cursor:pointer}.tab2{letter-spacing:.8px;border:unset;padding-bottom:20px;cursor:pointer}@media only screen and (max-width: 768px){.content{flex-direction:column;padding:0 2rem;width:100%;gap:2rem}.image{order:-1;width:100%}.image img,.content-heading{width:100%}.box{overflow-x:scroll;gap:10%;margin:auto!important;padding:10px;width:85%!important}.row-container{width:100%!important}.tab{letter-spacing:.5px;border-bottom:1px solid;padding-bottom:10px;cursor:pointer}.image{width:100%}}@media screen and (max-width: 475px){.content{padding:0;margin-bottom:30px}}.g-25{gap:55px}.mt-1{margin-top:1rem}.justify-center{justify-content:center}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { 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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { 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: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }] }); }
|
|
10250
10258
|
}
|
|
10251
10259
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturesSectionComponent, decorators: [{
|
|
10252
10260
|
type: Component,
|
|
@@ -10267,8 +10275,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
10267
10275
|
SanitizeHtmlPipe, SvgDividerComponent,
|
|
10268
10276
|
TextEditorComponent,
|
|
10269
10277
|
ImageEditorDirective,
|
|
10270
|
-
SpacingHorizontalDirective
|
|
10271
|
-
|
|
10278
|
+
SpacingHorizontalDirective,
|
|
10279
|
+
PositionLayoutDirectiveDirective
|
|
10280
|
+
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [simpoBorder]=\"styles?.border\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"row\" *ngIf=\"screenWidth > 475\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <!-- <div class=\"heading-medium mb-1 content-side\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n <div class=\" box justify-center d-flex g-25 mt-5 mb-5\">\r\n <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\r\n <div [ngClass]=\"{'tab': styles?.tabStyling == 'UNDERLINE' , 'tab1' : styles?.tabStyling == 'BOXED' , 'tab2' : styles?.tabStyling == 'NONE' }\" [ngClass]=\"{'active': index === selectedTabIndex && styles?.tabStyling == 'UNDERLINE' , 'active1' : index === selectedTabIndex && styles?.tabStyling == 'BOXED' , 'active2' : index === selectedTabIndex && styles?.tabStyling == 'NONE' }\" [style.borderColor]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" [style.color]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" (click)=\"changetab(index)\">\r\n <!-- {{ tab.inputText[0].value }} -->\r\n <simpo-text-editor [(value)]=\"tab.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row-container\" *ngIf=\"screenWidth <= 475\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <!-- <div class=\"heading-medium mb-1 content-side\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\" box d-flex g-25 mt-5 mb-5\">\r\n <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\r\n <div class=\"tab\" [ngClass]=\"{'active': index === selectedTabIndex}\" [style.borderColor]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" [style.color]=\"index === selectedTabIndex ? styles?.background?.accentColor : ''\" (click)=\"changetab(index)\">\r\n <!-- {{ tab.inputText[0].value }} -->\r\n <simpo-text-editor [(value)]=\"tab.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"content d-flex g-15 mt-5\" *ngIf=\"currentData?.image?.url\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\">\r\n <div class=\"image\">\r\n <img loading=\"lazy\" [src]=\"currentData?.image?.url\" alt=\"\" [id]=\"data?.id\"\r\n [simpoImageDirective]=\"styles?.image\" [simpoObjectPosition]=\"currentData?.image?.position\"\r\n [simpoCorner]=\"styles?.corners\"\r\n class=\"d-block mx-lg-auto img-fluid h-100 \" [class]=\"data?.id+(currentData?.image?.id || '')\"\r\n loading=\"lazy\" [appImageEditor]=\"true\" [imageData]=\"currentData?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"content-heading\">\r\n <div class=\"heading-large content-side\" >\r\n <ng-container *ngIf=\"currentData?.inputText?.[1] as textItem\">\r\n <simpo-text-editor [(value)]=\"textItem.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div class=\"content-description body-large mt-1 content-side\" >\r\n <ng-container *ngIf=\"currentData?.inputText?.[2] as textitem\">\r\n <simpo-text-editor [(value)]=\"textitem.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"content justify-center d-flex g-15 mt-5\" *ngIf=\"!currentData?.image?.url\">\r\n <div class=\"content-heading text-center\">\r\n <div class=\"heading-large content-side\" [innerHtml]=\"currentData?.inputText?.[1]?.value\" [id]=\"data?.id\">\r\n </div>\r\n <div class=\"content-description body-large mt-1 text-center\" [innerHtml]=\"currentData?.inputText?.[2]?.value\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</section>\r\n", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.content{padding:0px 10rem;width:90%;gap:3rem;margin-bottom:4%}.image{width:40%;flex:1}.image img{width:100%}.content-heading{width:60%;text-align:start}.content-description{width:100%;text-align:start}.active{font-weight:700;letter-spacing:.8px;border-bottom:2px solid!important;padding-bottom:20px}.active1{font-weight:700;letter-spacing:.8px;border:2px solid!important;border-radius:7px}.active2{font-weight:700;letter-spacing:.8px;border:unset!important;padding-bottom:20px}.tab{letter-spacing:.8px;border-bottom:2px solid;padding-bottom:20px;cursor:pointer}.tab1{letter-spacing:.8px;border:2px solid;cursor:pointer}.tab2{letter-spacing:.8px;border:unset;padding-bottom:20px;cursor:pointer}@media only screen and (max-width: 768px){.content{flex-direction:column;padding:0 2rem;width:100%;gap:2rem}.image{order:-1;width:100%}.image img,.content-heading{width:100%}.box{overflow-x:scroll;gap:10%;margin:auto!important;padding:10px;width:85%!important}.row-container{width:100%!important}.tab{letter-spacing:.5px;border-bottom:1px solid;padding-bottom:10px;cursor:pointer}.image{width:100%}}@media screen and (max-width: 475px){.content{padding:0;margin-bottom:30px}}.g-25{gap:55px}.mt-1{margin-top:1rem}.justify-center{justify-content:center}\n"] }]
|
|
10272
10281
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
10273
10282
|
type: Input
|
|
10274
10283
|
}], edit: [{
|
|
@@ -10418,11 +10427,11 @@ class LogoShowcaseComponent extends BaseSection {
|
|
|
10418
10427
|
}, 100);
|
|
10419
10428
|
}
|
|
10420
10429
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: LogoShowcaseComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10421
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", 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'\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"col-xxl-8 py-5 w-100 \" [ngClass]=\"styles?.fullWidth === true ? 'px-0' : 'px-4'\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row g-5 gridtext\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\r\n\r\n <div class=\"col-5 gridimg w-full mb-20 content-side\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-7 d-flex flex-wrap flex-1 w-full\">\r\n <div class=\"slider flex overflow-hidden w-full\">\r\n <div class=\"slider-track\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\">\r\n </div>\r\n </div>\r\n </div>\r\n <!-- </div> -->\r\n </div>\r\n </div>\r\n <div class=\"flex-column row g-2\" [id]=\"data?.id\"\r\n [simpoLayout]=\"styles?.layout\" *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\r\n <div class=\"px-5 mb-20 content-side\" [id]=\"data?.id\"\r\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n\r\n <div class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"[backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\r\n <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\r\n <div class=\"slider flex overflow-hidden w-full\">\r\n <div class=\"slider-track w-full\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data; let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n </div>\r\n </div>\r\n <!-- </div> -->\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\">\r\n\r\n <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\">\r\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\">\r\n <div class=\"mainsec px-5 content-side\" [id]=\"data?.id\"\r\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n\r\n <div class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"gap-2 d-md-flex mt-15\" [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{\r\n 'fullwidth flex-1 inline-edit ': styles?.fullWidth,\r\n 'nofullwidth flex-1 inline-edit ': !styles?.fullWidth\r\n }\">\r\n <div class=\"masking\">\r\n\r\n <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\r\n [style.animationDirection]=\"animationDirection\">\r\n <div class=\"slider-track2\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides2\" [simpoCorner]=\"styles?.corners\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" \r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'\r\n }\" *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </div>\r\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;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}.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.img{border-style:solid;max-width:100%;height:100%}@media only screen and (min-width: 375px) 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%}}.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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"] }] }); }
|
|
10430
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", 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'\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"col-xxl-8 py-5 w-100 \" [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row g-5 gridtext\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\r\n\r\n <div class=\"col-5 gridimg w-full mb-20 content-side\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-7 d-flex flex-wrap flex-1 w-full\">\r\n <div class=\"slider flex overflow-hidden w-full\">\r\n <div class=\"slider-track\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\">\r\n </div>\r\n </div>\r\n </div>\r\n <!-- </div> -->\r\n </div>\r\n </div>\r\n <div class=\"flex-column row g-2\" [id]=\"data?.id\"\r\n [simpoLayout]=\"styles?.layout\" *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\r\n <div class=\"px-5 mb-20 content-side\" [id]=\"data?.id\"\r\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n\r\n <div class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"[backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\r\n <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\r\n <div class=\"slider flex overflow-hidden w-full\">\r\n <div class=\"slider-track w-full\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data; let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n </div>\r\n </div>\r\n <!-- </div> -->\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\">\r\n\r\n <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\">\r\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\">\r\n <div class=\"mainsec px-5 content-side\" [id]=\"data?.id\"\r\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n\r\n <div class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"gap-2 d-md-flex mt-15\" [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{\r\n 'fullwidth flex-1 inline-edit ': styles?.fullWidth,\r\n 'nofullwidth flex-1 inline-edit ': !styles?.fullWidth\r\n }\">\r\n <div class=\"masking\">\r\n\r\n <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\r\n [style.animationDirection]=\"animationDirection\">\r\n <div class=\"slider-track2\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides2\" [simpoCorner]=\"styles?.corners\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" \r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'\r\n }\" *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </div>\r\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;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}.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.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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"] }] }); }
|
|
10422
10431
|
}
|
|
10423
10432
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: LogoShowcaseComponent, decorators: [{
|
|
10424
10433
|
type: Component,
|
|
10425
|
-
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'\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"col-xxl-8 py-5 w-100 \" [ngClass]=\"styles?.fullWidth === true ? 'px-0' : 'px-4'\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row g-5 gridtext\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\r\n\r\n <div class=\"col-5 gridimg w-full mb-20 content-side\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-7 d-flex flex-wrap flex-1 w-full\">\r\n <div class=\"slider flex overflow-hidden w-full\">\r\n <div class=\"slider-track\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\">\r\n </div>\r\n </div>\r\n </div>\r\n <!-- </div> -->\r\n </div>\r\n </div>\r\n <div class=\"flex-column row g-2\" [id]=\"data?.id\"\r\n [simpoLayout]=\"styles?.layout\" *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\r\n <div class=\"px-5 mb-20 content-side\" [id]=\"data?.id\"\r\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n\r\n <div class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"[backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\r\n <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\r\n <div class=\"slider flex overflow-hidden w-full\">\r\n <div class=\"slider-track w-full\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data; let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n </div>\r\n </div>\r\n <!-- </div> -->\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\">\r\n\r\n <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\">\r\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\">\r\n <div class=\"mainsec px-5 content-side\" [id]=\"data?.id\"\r\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n\r\n <div class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"gap-2 d-md-flex mt-15\" [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{\r\n 'fullwidth flex-1 inline-edit ': styles?.fullWidth,\r\n 'nofullwidth flex-1 inline-edit ': !styles?.fullWidth\r\n }\">\r\n <div class=\"masking\">\r\n\r\n <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\r\n [style.animationDirection]=\"animationDirection\">\r\n <div class=\"slider-track2\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides2\" [simpoCorner]=\"styles?.corners\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" \r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'\r\n }\" *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </div>\r\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;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}.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.img{border-style:solid;max-width:100%;height:100%}@media only screen and (min-width: 375px) 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%}}.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"] }]
|
|
10434
|
+
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'\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"col-xxl-8 py-5 w-100 \" [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row g-5 gridtext\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\r\n\r\n <div class=\"col-5 gridimg w-full mb-20 content-side\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-7 d-flex flex-wrap flex-1 w-full\">\r\n <div class=\"slider flex overflow-hidden w-full\">\r\n <div class=\"slider-track\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\">\r\n </div>\r\n </div>\r\n </div>\r\n <!-- </div> -->\r\n </div>\r\n </div>\r\n <div class=\"flex-column row g-2\" [id]=\"data?.id\"\r\n [simpoLayout]=\"styles?.layout\" *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\r\n <div class=\"px-5 mb-20 content-side\" [id]=\"data?.id\"\r\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n\r\n <div class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"[backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\r\n <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\r\n <div class=\"slider flex overflow-hidden w-full\">\r\n <div class=\"slider-track w-full\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data; let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n </div>\r\n </div>\r\n <!-- </div> -->\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\">\r\n\r\n <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\">\r\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\">\r\n <div class=\"mainsec px-5 content-side\" [id]=\"data?.id\"\r\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n\r\n <div class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"gap-2 d-md-flex mt-15\" [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{\r\n 'fullwidth flex-1 inline-edit ': styles?.fullWidth,\r\n 'nofullwidth flex-1 inline-edit ': !styles?.fullWidth\r\n }\">\r\n <div class=\"masking\">\r\n\r\n <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\r\n [style.animationDirection]=\"animationDirection\">\r\n <div class=\"slider-track2\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides2\" [simpoCorner]=\"styles?.corners\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" \r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'\r\n }\" *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </div>\r\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;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}.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.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"] }]
|
|
10426
10435
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
10427
10436
|
type: Input
|
|
10428
10437
|
}], index: [{
|
|
@@ -10892,6 +10901,8 @@ class AppointmentFormComponent extends BaseSection {
|
|
|
10892
10901
|
this.matDialog.open(template, {
|
|
10893
10902
|
width: '100vw', // Full viewport width
|
|
10894
10903
|
height: '100vh', // Full viewport height
|
|
10904
|
+
maxWidth: '100vw',
|
|
10905
|
+
panelClass: 'appointment-form'
|
|
10895
10906
|
});
|
|
10896
10907
|
}
|
|
10897
10908
|
}
|
|
@@ -11276,7 +11287,7 @@ class AppointmentFormComponent extends BaseSection {
|
|
|
11276
11287
|
this.CreateData.scheduledTime !== '';
|
|
11277
11288
|
}
|
|
11278
11289
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AppointmentFormComponent, deps: [{ token: EventsService }, { token: i2$1.MatDialog }, { token: RestService }, { token: i2$2.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11279
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AppointmentFormComponent, isStandalone: true, selector: "simpo-appointment-form", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage , 'd-block': isBorderlessImage}\"\r\n class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\">\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row\"\r\n [ngClass]=\"{'row' : isBorderlessImage}\" [simpoCorner]=\"styles?.corners\"\r\n [ngClass]=\"{'flex-column-reverse': isBorderlessImage && styles?.positionLayout?.value === 'top' , 'flex-column': isBorderlessImage && styles?.positionLayout?.value === 'bottom'}\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"py-5\"\r\n [ngClass]=\"{'col-lg-6 col-xxl-6': content?.image?.showImage && isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage || !content?.image?.showImage , 'col-lg-12 col-md-12 col-12 width-100': isBorderlessImage && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')}\"\r\n [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"row g-5 justify-content-start mlr-0 h-auto\" [id]=\"data?.id\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage && !isBorderlessImage\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n [ngClass]=\"{'col-lg-12': content?.image?.showImage && isBorderlessImage, 'col-lg-6':!isBorderlessImage || !content?.image?.showImage}\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 card-container\"\r\n [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n </div>\r\n <div class=\"first-part-card d-flex align-items-center\"\r\n [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img loading=\"lazy\" class=\"tick-img\" [src]=\"item?.icon?.url\" alt=\"something\" />\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" (click)=\"opendailogbox(dialogBox)\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngClass]=\"{'w-100' : content?.image?.showImage && isBorderlessImage && styles?.positionLayout?.value == 'top' || styles?.positionLayout?.value == 'bottom'}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<!-- Dialog template -->\r\n<ng-template #dialogBox class=\"dialogbox\">\r\n <div class=\"appointment-form\">\r\n <div class=\"header-section\">\r\n <div class=\"header-left-side\">\r\n <h2 style=\"text-align: left;\">Book an Appointment</h2>\r\n </div>\r\n <div class=\"header-right-side\">\r\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <form>\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Name</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input class=\"inputStyle\" matInput placeholder=\"Enter Your Name\" pattern=\"[a-zA-Z ]*\"\r\n [(ngModel)]=\"CreateData.clientName\" (ngModelChange)=\"onUserNameChange($event)\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Mobile Number</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input type=\"text\" class=\"inputStyle\" matInput placeholder=\"Enter Your Mobile Number\"\r\n pattern=\"^[0-9]{10,15}$\" maxlength=\"15\" (focus)=\"onFocus()\" (keypress)=\"restrictNonNumeric($event)\"\r\n [(ngModel)]=\"CreateData.mobile\" [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Location</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Location\" [(ngModel)]=\"selectedLocation\"\r\n (ngModelChange)=\"changeLocation()\" [ngModelOptions]=\"{standalone: true}\">\r\n <ng-container *ngFor=\"let location of locationData\">\r\n <mat-option [value]=\"location.id\">\r\n {{ location.name }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Service</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Service\" [(ngModel)]=\"selectedServices\"\r\n (ngModelChange)=\"getAllStaff()\" [ngModelOptions]=\"{standalone: true}\">\r\n <ng-container *ngFor=\"let service of serviceData\">\r\n <mat-option [value]=\"service.id\">\r\n {{ service.name }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Staff</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Staff\" [(ngModel)]=\"selectedStaff\"\r\n (ngModelChange)=\"getAvailableSlots()\" [ngModelOptions]=\"{standalone: true}\">\r\n <ng-container *ngFor=\"let staff of staffData\">\r\n <mat-option [value]=\"staff.id\">\r\n {{ staff.name }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Date</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input class=\"inputStyle\" matInput [matDatepicker]=\"picker\" placeholder=\"Select Date\"\r\n [(ngModel)]=\"CreateData.scheduledDate\" (ngModelChange)=\"changeDate()\" [min]=\"minDate\"\r\n [matDatepickerFilter]=\"dateFilter\" [ngModelOptions]=\"{standalone: true}\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Time</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Location\" [(ngModel)]=\"CreateData.scheduledTime\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n <mat-option *ngFor=\"let time of locationTiming\" [value]=\"time\" [disabled]=\"bookedSlots.has(time)\">\r\n {{ time }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"full-message-section\">\r\n <div class=\"business-field-section\">\r\n <div class=\"input-text\">Message</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input class=\"inputStyle\" matInput placeholder=\"Enter Your Name\" pattern=\"[a-zA-Z ]*\"\r\n [(ngModel)]=\"CreateData.message\" [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"bottom-section\">\r\n <div class=\"button-section\">\r\n <button class=\"booking-button\" [disabled]=\"!isFormValid()\" (click)=\"createAppointment()\">\r\n Book Appointment\r\n </button>\r\n </div>\r\n </div>\r\n\r\n\r\n </form>\r\n </div>\r\n</ng-template>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.width-100{width:100%!important}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.box{background:#fff;border:8px solid rgb(232 232 232 / 80%);box-shadow:#63636333 0 2px 8px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}.card-container{flex-direction:column}}.text-element{inline-size:100%;overflow-wrap:break-word}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}.ml-5{margin-left:5px}.mlr-0{margin-left:0;margin-right:0}.d-block{display:block!important}appointment-form{width:65vw;background-color:#fff;border-radius:8px;padding:20px;box-shadow:0 4px 8px #0000001a}h2{text-align:center;margin-bottom:20px}.form-group{display:flex;flex-direction:column;margin-bottom:15px;width:100%}label{font-weight:700;margin-bottom:5px}input,select,textarea{padding:8px;border:1px solid #ccc;border-radius:4px;font-size:14px}input::placeholder,textarea::placeholder{color:#888}.name-mobile,.date-time{display:flex;justify-content:space-between}textarea{resize:vertical}.book-btn{width:100%;background-color:#007bff;color:#fff;border:none;padding:10px;border-radius:4px;font-size:16px;cursor:pointer}.book-btn:hover{background-color:#0056b3}.bottom-section{width:100%;display:flex;justify-content:right}.button-section{width:30%}.booking-button{background:#0496ff;color:#fff;border:1px solid#0496FF;border-radius:10px;padding:7px 5px}.header-section{display:flex;width:100%;justify-content:space-between}.header-left-side{width:50%}.header-right-side{width:5%;cursor:pointer}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}.button-section{width:100%!important}.appointment-form{width:100vw}}.appointment-form{width:65vw;background-color:#fff;border-radius:8px;padding:20px;box-shadow:0 4px 8px #0000001a}.sfull-width{width:49%;height:75px}.input-text{margin-bottom:5px}.full-width{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i13.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i14.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i14.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i14.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i10.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type:
|
|
11290
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AppointmentFormComponent, isStandalone: true, selector: "simpo-appointment-form", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage , 'd-block': isBorderlessImage}\"\r\n class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\">\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row\"\r\n [ngClass]=\"{'row' : isBorderlessImage}\" [simpoCorner]=\"styles?.corners\"\r\n [ngClass]=\"{'flex-column-reverse': isBorderlessImage && styles?.positionLayout?.value === 'top' , 'flex-column': isBorderlessImage && styles?.positionLayout?.value === 'bottom'}\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"py-5\"\r\n [ngClass]=\"{'col-lg-6 col-xxl-6': content?.image?.showImage && isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage || !content?.image?.showImage , 'col-lg-12 col-md-12 col-12 width-100': isBorderlessImage && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')}\"\r\n [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"row g-5 justify-content-start mlr-0 h-auto\" [id]=\"data?.id\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage && !isBorderlessImage\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n [ngClass]=\"{'col-lg-12': content?.image?.showImage && isBorderlessImage, 'col-lg-6':!isBorderlessImage || !content?.image?.showImage}\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 card-container\"\r\n [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n </div>\r\n <div class=\"first-part-card d-flex align-items-center\"\r\n [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img loading=\"lazy\" class=\"tick-img\" [src]=\"item?.icon?.url\" alt=\"something\" />\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" (click)=\"opendailogbox(dialogBox)\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngClass]=\"{'w-100' : content?.image?.showImage && isBorderlessImage && styles?.positionLayout?.value == 'top' || styles?.positionLayout?.value == 'bottom'}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<!-- Dialog template -->\r\n<ng-template #dialogBox class=\"dialogbox\">\r\n <div class=\"appointment-form\">\r\n <div class=\"header-section\">\r\n <div class=\"header-left-side\">\r\n <h2 style=\"text-align: left;\">Book an Appointment</h2>\r\n </div>\r\n <div class=\"header-right-side\">\r\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <form>\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Name</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input class=\"inputStyle\" matInput placeholder=\"Enter Your Name\" pattern=\"[a-zA-Z ]*\"\r\n [(ngModel)]=\"CreateData.clientName\" (ngModelChange)=\"onUserNameChange($event)\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Mobile Number</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input type=\"text\" class=\"inputStyle\" matInput placeholder=\"Enter Your Mobile Number\"\r\n pattern=\"^[0-9]{10,15}$\" maxlength=\"15\" (focus)=\"onFocus()\" (keypress)=\"restrictNonNumeric($event)\"\r\n [(ngModel)]=\"CreateData.mobile\" [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Location</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Location\" [(ngModel)]=\"selectedLocation\"\r\n (ngModelChange)=\"changeLocation()\" [ngModelOptions]=\"{standalone: true}\">\r\n <ng-container *ngFor=\"let location of locationData\">\r\n <mat-option [value]=\"location.id\">\r\n {{ location.name }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Service</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Service\" [(ngModel)]=\"selectedServices\"\r\n (ngModelChange)=\"getAllStaff()\" [ngModelOptions]=\"{standalone: true}\">\r\n <ng-container *ngFor=\"let service of serviceData\">\r\n <mat-option [value]=\"service.id\">\r\n {{ service.name }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Staff</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Staff\" [(ngModel)]=\"selectedStaff\"\r\n (ngModelChange)=\"getAvailableSlots()\" [ngModelOptions]=\"{standalone: true}\">\r\n <ng-container *ngFor=\"let staff of staffData\">\r\n <mat-option [value]=\"staff.id\">\r\n {{ staff.name }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Date</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input class=\"inputStyle\" matInput [matDatepicker]=\"picker\" placeholder=\"Select Date\"\r\n [(ngModel)]=\"CreateData.scheduledDate\" (ngModelChange)=\"changeDate()\" [min]=\"minDate\"\r\n [matDatepickerFilter]=\"dateFilter\" [ngModelOptions]=\"{standalone: true}\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Time</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Location\" [(ngModel)]=\"CreateData.scheduledTime\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n <mat-option *ngFor=\"let time of locationTiming\" [value]=\"time\" [disabled]=\"bookedSlots.has(time)\">\r\n {{ time }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"full-message-section\">\r\n <div class=\"business-field-section\">\r\n <div class=\"input-text\">Message</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input class=\"inputStyle\" matInput placeholder=\"Enter Your Name\" pattern=\"[a-zA-Z ]*\"\r\n [(ngModel)]=\"CreateData.message\" [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"bottom-section\">\r\n <div class=\"button-section\">\r\n <button class=\"booking-button\" [disabled]=\"!isFormValid()\" (click)=\"createAppointment()\">\r\n Book Appointment\r\n </button>\r\n </div>\r\n </div>\r\n\r\n\r\n </form>\r\n </div>\r\n</ng-template>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.width-100{width:100%!important}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.box{background:#fff;border:8px solid rgb(232 232 232 / 80%);box-shadow:#63636333 0 2px 8px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}.card-container,.name-mobile{flex-direction:column}.sfull-width{width:100%!important}.appointment-form{box-shadow:none!important}}.text-element{inline-size:100%;overflow-wrap:break-word}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}.ml-5{margin-left:5px}.mlr-0{margin-left:0;margin-right:0}.d-block{display:block!important}appointment-form{width:65vw;background-color:#fff;border-radius:8px;padding:20px;box-shadow:0 4px 8px #0000001a}h2{text-align:center;margin-bottom:20px}.form-group{display:flex;flex-direction:column;margin-bottom:15px;width:100%}label{font-weight:700;margin-bottom:5px}input,select,textarea{padding:8px;border:1px solid #ccc;border-radius:4px;font-size:14px}input::placeholder,textarea::placeholder{color:#888}.name-mobile,.date-time{display:flex;justify-content:space-between}textarea{resize:vertical}.book-btn{width:100%;background-color:#007bff;color:#fff;border:none;padding:10px;border-radius:4px;font-size:16px;cursor:pointer}.book-btn:hover{background-color:#0056b3}.bottom-section{width:100%;display:flex;justify-content:right}.button-section{width:30%;margin:10px 0}.booking-button{background:#0496ff;color:#fff;border:1px solid#0496FF;border-radius:10px;padding:7px 5px}.header-section{display:flex;width:100%;justify-content:space-between}.header-left-side{width:50%;white-space:nowrap}.header-right-side{width:5%;cursor:pointer}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}.button-section{width:100%!important}.appointment-form{width:100vw}}.appointment-form{width:65vw;background-color:#fff;border-radius:8px;padding:20px;box-shadow:0 4px 8px #0000001a}.sfull-width{width:49%;height:75px}.input-text{margin-bottom:5px}.full-width{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i13.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i14.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i14.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i14.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i10.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type:
|
|
11280
11291
|
//directive
|
|
11281
11292
|
SimpoBorderlessDirective, selector: "[simpoBorderless]", inputs: ["simpoBorderless"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround"] }] }); }
|
|
11282
11293
|
}
|
|
@@ -11326,7 +11337,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
11326
11337
|
SpacingHorizontalDirective,
|
|
11327
11338
|
ImageEditorDirective,
|
|
11328
11339
|
SpacingAroundDirective
|
|
11329
|
-
], template: "<div [id]=\"data?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage , 'd-block': isBorderlessImage}\"\r\n class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\">\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row\"\r\n [ngClass]=\"{'row' : isBorderlessImage}\" [simpoCorner]=\"styles?.corners\"\r\n [ngClass]=\"{'flex-column-reverse': isBorderlessImage && styles?.positionLayout?.value === 'top' , 'flex-column': isBorderlessImage && styles?.positionLayout?.value === 'bottom'}\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"py-5\"\r\n [ngClass]=\"{'col-lg-6 col-xxl-6': content?.image?.showImage && isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage || !content?.image?.showImage , 'col-lg-12 col-md-12 col-12 width-100': isBorderlessImage && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')}\"\r\n [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"row g-5 justify-content-start mlr-0 h-auto\" [id]=\"data?.id\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage && !isBorderlessImage\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n [ngClass]=\"{'col-lg-12': content?.image?.showImage && isBorderlessImage, 'col-lg-6':!isBorderlessImage || !content?.image?.showImage}\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 card-container\"\r\n [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n </div>\r\n <div class=\"first-part-card d-flex align-items-center\"\r\n [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img loading=\"lazy\" class=\"tick-img\" [src]=\"item?.icon?.url\" alt=\"something\" />\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" (click)=\"opendailogbox(dialogBox)\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngClass]=\"{'w-100' : content?.image?.showImage && isBorderlessImage && styles?.positionLayout?.value == 'top' || styles?.positionLayout?.value == 'bottom'}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<!-- Dialog template -->\r\n<ng-template #dialogBox class=\"dialogbox\">\r\n <div class=\"appointment-form\">\r\n <div class=\"header-section\">\r\n <div class=\"header-left-side\">\r\n <h2 style=\"text-align: left;\">Book an Appointment</h2>\r\n </div>\r\n <div class=\"header-right-side\">\r\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <form>\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Name</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input class=\"inputStyle\" matInput placeholder=\"Enter Your Name\" pattern=\"[a-zA-Z ]*\"\r\n [(ngModel)]=\"CreateData.clientName\" (ngModelChange)=\"onUserNameChange($event)\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Mobile Number</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input type=\"text\" class=\"inputStyle\" matInput placeholder=\"Enter Your Mobile Number\"\r\n pattern=\"^[0-9]{10,15}$\" maxlength=\"15\" (focus)=\"onFocus()\" (keypress)=\"restrictNonNumeric($event)\"\r\n [(ngModel)]=\"CreateData.mobile\" [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Location</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Location\" [(ngModel)]=\"selectedLocation\"\r\n (ngModelChange)=\"changeLocation()\" [ngModelOptions]=\"{standalone: true}\">\r\n <ng-container *ngFor=\"let location of locationData\">\r\n <mat-option [value]=\"location.id\">\r\n {{ location.name }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Service</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Service\" [(ngModel)]=\"selectedServices\"\r\n (ngModelChange)=\"getAllStaff()\" [ngModelOptions]=\"{standalone: true}\">\r\n <ng-container *ngFor=\"let service of serviceData\">\r\n <mat-option [value]=\"service.id\">\r\n {{ service.name }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Staff</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Staff\" [(ngModel)]=\"selectedStaff\"\r\n (ngModelChange)=\"getAvailableSlots()\" [ngModelOptions]=\"{standalone: true}\">\r\n <ng-container *ngFor=\"let staff of staffData\">\r\n <mat-option [value]=\"staff.id\">\r\n {{ staff.name }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Date</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input class=\"inputStyle\" matInput [matDatepicker]=\"picker\" placeholder=\"Select Date\"\r\n [(ngModel)]=\"CreateData.scheduledDate\" (ngModelChange)=\"changeDate()\" [min]=\"minDate\"\r\n [matDatepickerFilter]=\"dateFilter\" [ngModelOptions]=\"{standalone: true}\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Time</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Location\" [(ngModel)]=\"CreateData.scheduledTime\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n <mat-option *ngFor=\"let time of locationTiming\" [value]=\"time\" [disabled]=\"bookedSlots.has(time)\">\r\n {{ time }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"full-message-section\">\r\n <div class=\"business-field-section\">\r\n <div class=\"input-text\">Message</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input class=\"inputStyle\" matInput placeholder=\"Enter Your Name\" pattern=\"[a-zA-Z ]*\"\r\n [(ngModel)]=\"CreateData.message\" [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"bottom-section\">\r\n <div class=\"button-section\">\r\n <button class=\"booking-button\" [disabled]=\"!isFormValid()\" (click)=\"createAppointment()\">\r\n Book Appointment\r\n </button>\r\n </div>\r\n </div>\r\n\r\n\r\n </form>\r\n </div>\r\n</ng-template>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.width-100{width:100%!important}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.box{background:#fff;border:8px solid rgb(232 232 232 / 80%);box-shadow:#63636333 0 2px 8px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}.card-container{flex-direction:column}}.text-element{inline-size:100%;overflow-wrap:break-word}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}.ml-5{margin-left:5px}.mlr-0{margin-left:0;margin-right:0}.d-block{display:block!important}appointment-form{width:65vw;background-color:#fff;border-radius:8px;padding:20px;box-shadow:0 4px 8px #0000001a}h2{text-align:center;margin-bottom:20px}.form-group{display:flex;flex-direction:column;margin-bottom:15px;width:100%}label{font-weight:700;margin-bottom:5px}input,select,textarea{padding:8px;border:1px solid #ccc;border-radius:4px;font-size:14px}input::placeholder,textarea::placeholder{color:#888}.name-mobile,.date-time{display:flex;justify-content:space-between}textarea{resize:vertical}.book-btn{width:100%;background-color:#007bff;color:#fff;border:none;padding:10px;border-radius:4px;font-size:16px;cursor:pointer}.book-btn:hover{background-color:#0056b3}.bottom-section{width:100%;display:flex;justify-content:right}.button-section{width:30%}.booking-button{background:#0496ff;color:#fff;border:1px solid#0496FF;border-radius:10px;padding:7px 5px}.header-section{display:flex;width:100%;justify-content:space-between}.header-left-side{width:50%}.header-right-side{width:5%;cursor:pointer}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}.button-section{width:100%!important}.appointment-form{width:100vw}}.appointment-form{width:65vw;background-color:#fff;border-radius:8px;padding:20px;box-shadow:0 4px 8px #0000001a}.sfull-width{width:49%;height:75px}.input-text{margin-bottom:5px}.full-width{width:100%}\n"] }]
|
|
11340
|
+
], template: "<div [id]=\"data?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage , 'd-block': isBorderlessImage}\"\r\n class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\">\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row\"\r\n [ngClass]=\"{'row' : isBorderlessImage}\" [simpoCorner]=\"styles?.corners\"\r\n [ngClass]=\"{'flex-column-reverse': isBorderlessImage && styles?.positionLayout?.value === 'top' , 'flex-column': isBorderlessImage && styles?.positionLayout?.value === 'bottom'}\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"py-5\"\r\n [ngClass]=\"{'col-lg-6 col-xxl-6': content?.image?.showImage && isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage || !content?.image?.showImage , 'col-lg-12 col-md-12 col-12 width-100': isBorderlessImage && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')}\"\r\n [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"row g-5 justify-content-start mlr-0 h-auto\" [id]=\"data?.id\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage && !isBorderlessImage\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n [ngClass]=\"{'col-lg-12': content?.image?.showImage && isBorderlessImage, 'col-lg-6':!isBorderlessImage || !content?.image?.showImage}\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 card-container\"\r\n [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n </div>\r\n <div class=\"first-part-card d-flex align-items-center\"\r\n [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img loading=\"lazy\" class=\"tick-img\" [src]=\"item?.icon?.url\" alt=\"something\" />\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" (click)=\"opendailogbox(dialogBox)\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngClass]=\"{'w-100' : content?.image?.showImage && isBorderlessImage && styles?.positionLayout?.value == 'top' || styles?.positionLayout?.value == 'bottom'}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<!-- Dialog template -->\r\n<ng-template #dialogBox class=\"dialogbox\">\r\n <div class=\"appointment-form\">\r\n <div class=\"header-section\">\r\n <div class=\"header-left-side\">\r\n <h2 style=\"text-align: left;\">Book an Appointment</h2>\r\n </div>\r\n <div class=\"header-right-side\">\r\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <form>\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Name</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input class=\"inputStyle\" matInput placeholder=\"Enter Your Name\" pattern=\"[a-zA-Z ]*\"\r\n [(ngModel)]=\"CreateData.clientName\" (ngModelChange)=\"onUserNameChange($event)\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Mobile Number</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input type=\"text\" class=\"inputStyle\" matInput placeholder=\"Enter Your Mobile Number\"\r\n pattern=\"^[0-9]{10,15}$\" maxlength=\"15\" (focus)=\"onFocus()\" (keypress)=\"restrictNonNumeric($event)\"\r\n [(ngModel)]=\"CreateData.mobile\" [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Location</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Location\" [(ngModel)]=\"selectedLocation\"\r\n (ngModelChange)=\"changeLocation()\" [ngModelOptions]=\"{standalone: true}\">\r\n <ng-container *ngFor=\"let location of locationData\">\r\n <mat-option [value]=\"location.id\">\r\n {{ location.name }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Service</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Service\" [(ngModel)]=\"selectedServices\"\r\n (ngModelChange)=\"getAllStaff()\" [ngModelOptions]=\"{standalone: true}\">\r\n <ng-container *ngFor=\"let service of serviceData\">\r\n <mat-option [value]=\"service.id\">\r\n {{ service.name }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Staff</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Staff\" [(ngModel)]=\"selectedStaff\"\r\n (ngModelChange)=\"getAvailableSlots()\" [ngModelOptions]=\"{standalone: true}\">\r\n <ng-container *ngFor=\"let staff of staffData\">\r\n <mat-option [value]=\"staff.id\">\r\n {{ staff.name }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Date</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input class=\"inputStyle\" matInput [matDatepicker]=\"picker\" placeholder=\"Select Date\"\r\n [(ngModel)]=\"CreateData.scheduledDate\" (ngModelChange)=\"changeDate()\" [min]=\"minDate\"\r\n [matDatepickerFilter]=\"dateFilter\" [ngModelOptions]=\"{standalone: true}\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Time</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Location\" [(ngModel)]=\"CreateData.scheduledTime\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n <mat-option *ngFor=\"let time of locationTiming\" [value]=\"time\" [disabled]=\"bookedSlots.has(time)\">\r\n {{ time }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"full-message-section\">\r\n <div class=\"business-field-section\">\r\n <div class=\"input-text\">Message</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input class=\"inputStyle\" matInput placeholder=\"Enter Your Name\" pattern=\"[a-zA-Z ]*\"\r\n [(ngModel)]=\"CreateData.message\" [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"bottom-section\">\r\n <div class=\"button-section\">\r\n <button class=\"booking-button\" [disabled]=\"!isFormValid()\" (click)=\"createAppointment()\">\r\n Book Appointment\r\n </button>\r\n </div>\r\n </div>\r\n\r\n\r\n </form>\r\n </div>\r\n</ng-template>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.width-100{width:100%!important}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.box{background:#fff;border:8px solid rgb(232 232 232 / 80%);box-shadow:#63636333 0 2px 8px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}.card-container,.name-mobile{flex-direction:column}.sfull-width{width:100%!important}.appointment-form{box-shadow:none!important}}.text-element{inline-size:100%;overflow-wrap:break-word}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}.ml-5{margin-left:5px}.mlr-0{margin-left:0;margin-right:0}.d-block{display:block!important}appointment-form{width:65vw;background-color:#fff;border-radius:8px;padding:20px;box-shadow:0 4px 8px #0000001a}h2{text-align:center;margin-bottom:20px}.form-group{display:flex;flex-direction:column;margin-bottom:15px;width:100%}label{font-weight:700;margin-bottom:5px}input,select,textarea{padding:8px;border:1px solid #ccc;border-radius:4px;font-size:14px}input::placeholder,textarea::placeholder{color:#888}.name-mobile,.date-time{display:flex;justify-content:space-between}textarea{resize:vertical}.book-btn{width:100%;background-color:#007bff;color:#fff;border:none;padding:10px;border-radius:4px;font-size:16px;cursor:pointer}.book-btn:hover{background-color:#0056b3}.bottom-section{width:100%;display:flex;justify-content:right}.button-section{width:30%;margin:10px 0}.booking-button{background:#0496ff;color:#fff;border:1px solid#0496FF;border-radius:10px;padding:7px 5px}.header-section{display:flex;width:100%;justify-content:space-between}.header-left-side{width:50%;white-space:nowrap}.header-right-side{width:5%;cursor:pointer}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}.button-section{width:100%!important}.appointment-form{width:100vw}}.appointment-form{width:65vw;background-color:#fff;border-radius:8px;padding:20px;box-shadow:0 4px 8px #0000001a}.sfull-width{width:49%;height:75px}.input-text{margin-bottom:5px}.full-width{width:100%}\n"] }]
|
|
11330
11341
|
}], ctorParameters: () => [{ type: EventsService }, { type: i2$1.MatDialog }, { type: RestService }, { type: i2$2.MatSnackBar }], propDecorators: { data: [{
|
|
11331
11342
|
type: Input
|
|
11332
11343
|
}], index: [{
|
|
@@ -11470,7 +11481,7 @@ class LogoGalleryComponent extends BaseSection {
|
|
|
11470
11481
|
event.stopPropagation();
|
|
11471
11482
|
}
|
|
11472
11483
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: LogoGalleryComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11473
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: LogoGalleryComponent, isStandalone: true, selector: "simpo-logo-gallery", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", nextComponentColor: "nextComponentColor", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n [ngStyle]=\"style?.removeGaps && style?.fullWidth ? {'padding': '0px'} : style?.removeGaps ? {'padding': '0px 15px'} : style?.fullWidth ? {'padding': '0px'} : {}\">\r\n <div *ngFor=\"let text of data?.content?.inputText;let i = index\"\r\n [simpoContentTitleSpace]=\"i == 0 ? style?.layout?.headingSpacing : undefined\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <!-- <div class=\"mt-2 text-center d-flex gap-3 align-items-center justify-content-center\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/869189c1729848816795akar-icons_arrow-back.png\"\r\n alt=\"left curved arrow\" loading=\"eager\" width=\"20\" class=\"left-arrow\">\r\n <div class=\"static-text\">\r\n Curate startup\u2019s by industry\r\n </div>\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/445281c1729848833765akar-icons_arrow-back-1.png\"\r\n alt=\"right curved arrow\" loading=\"eager\" width=\"20\" class=\"right-arrow\">\r\n </div> -->\r\n <!-- <div class=\"main-image-section d-flex flex-wrap mt-5\" [id]=\"data?.id\">\r\n <ng-container *ngFor=\"let img of content?.listItem?.data;let i = index\">\r\n <div class=\"image-section\">\r\n <img\r\n [id]=\"data?.id\" [class]=\"data?.id+img.image.id\" \r\n [src]=\"img.image.url\" [alt]=\"img.image.altText\" loading=\"lazy\" />\r\n </div>\r\n </ng-container>\r\n </div> -->\r\n <div class=\"main-image-section mb-2 d-flex flex-wrap mt-5\" [id]=\"data?.id\" *ngIf=\"screenWidth > 475\">\r\n <ng-container *ngFor=\"let img of content?.listItem?.data; let i = index\">\r\n <div class=\"image-section\" [ngClass]=\"{'even-row': isEvenRow(i), 'odd-row': !isEvenRow(i)}\">\r\n <img [id]=\"data?.id\" [class]=\"data?.id + img.image.id\" [src]=\"img.image.url\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\"\r\n [alt]=\"img.image.altText\" loading=\"lazy\" [simpoCorner]=\"style?.corners\" />\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"mob-container\" *ngIf=\"screenWidth <= 475\">\r\n <ng-container *ngFor=\"let img of content?.listItem?.data; let i = index\">\r\n <div class=\"d-flex logo-box justify-content-center\">\r\n <img [id]=\"data?.id\" [class]=\"data?.id + img.image.id\" [src]=\"img.image.url\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\"\r\n [alt]=\"img.image.altText\" loading=\"lazy\" [simpoCorner]=\"style?.corners\" />\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n</section>", styles: [".text-alignment{text-align:center;margin-bottom:10px}.total-container{height:auto;position:relative}.main-image-section{padding:0px 5rem}.image-section{padding:5px}.image-section img{width:100%;object-fit:cover}.even-row{flex-basis:calc(100% / 7);max-width:calc(100% / 7)}.odd-row{flex-basis:12.5%;max-width:12.5%}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset!important;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}.left-arrow,.right-arrow{position:relative;top:10px}.static-text{font-size:16px;font-weight:900}.mob-container{display:grid;grid-template-columns:45% 45%;justify-content:center}.logo-box{padding-top
|
|
11484
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: LogoGalleryComponent, isStandalone: true, selector: "simpo-logo-gallery", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", nextComponentColor: "nextComponentColor", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n [ngStyle]=\"style?.removeGaps && style?.fullWidth ? {'padding': '0px'} : style?.removeGaps ? {'padding': '0px 15px'} : style?.fullWidth ? {'padding': '0px'} : {}\">\r\n <div *ngFor=\"let text of data?.content?.inputText;let i = index\"\r\n [simpoContentTitleSpace]=\"i == 0 ? style?.layout?.headingSpacing : undefined\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <!-- <div class=\"mt-2 text-center d-flex gap-3 align-items-center justify-content-center\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/869189c1729848816795akar-icons_arrow-back.png\"\r\n alt=\"left curved arrow\" loading=\"eager\" width=\"20\" class=\"left-arrow\">\r\n <div class=\"static-text\">\r\n Curate startup\u2019s by industry\r\n </div>\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/445281c1729848833765akar-icons_arrow-back-1.png\"\r\n alt=\"right curved arrow\" loading=\"eager\" width=\"20\" class=\"right-arrow\">\r\n </div> -->\r\n <!-- <div class=\"main-image-section d-flex flex-wrap mt-5\" [id]=\"data?.id\">\r\n <ng-container *ngFor=\"let img of content?.listItem?.data;let i = index\">\r\n <div class=\"image-section\">\r\n <img\r\n [id]=\"data?.id\" [class]=\"data?.id+img.image.id\" \r\n [src]=\"img.image.url\" [alt]=\"img.image.altText\" loading=\"lazy\" />\r\n </div>\r\n </ng-container>\r\n </div> -->\r\n <div class=\"main-image-section mb-2 d-flex flex-wrap mt-5\" [ngClass]=\"{'px-0': style?.fullWidth}\" [id]=\"data?.id\" *ngIf=\"screenWidth > 475\">\r\n <ng-container *ngFor=\"let img of content?.listItem?.data; let i = index\">\r\n <div class=\"image-section\" [ngClass]=\"{'even-row': isEvenRow(i), 'odd-row': !isEvenRow(i)}\">\r\n <img [id]=\"data?.id\" [class]=\"data?.id + img.image.id\" [src]=\"img.image.url\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\"\r\n [alt]=\"img.image.altText\" loading=\"lazy\" [simpoCorner]=\"style?.corners\" />\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"mob-container\" *ngIf=\"screenWidth <= 475\">\r\n <ng-container *ngFor=\"let img of content?.listItem?.data; let i = index\">\r\n <div class=\"d-flex logo-box justify-content-center\">\r\n <img [id]=\"data?.id\" [class]=\"data?.id + img.image.id\" [src]=\"img.image.url\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\"\r\n [alt]=\"img.image.altText\" loading=\"lazy\" [simpoCorner]=\"style?.corners\" />\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n</section>", styles: [".text-alignment{text-align:center;margin-bottom:10px}.total-container{height:auto;position:relative}.main-image-section{padding:0px 5rem}.image-section{padding:5px}.image-section img{width:100%;object-fit:cover}.even-row{flex-basis:calc(100% / 7);max-width:calc(100% / 7)}.odd-row{flex-basis:12.5%;max-width:12.5%}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset!important;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}.left-arrow,.right-arrow{position:relative;top:10px}.static-text{font-size:16px;font-weight:900}.mob-container{display:grid;grid-template-columns:45% 45%;justify-content:center;margin-top:8px}.logo-box{padding-top:.25rem;width:100%;height:8rem}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
|
|
11474
11485
|
//directive
|
|
11475
11486
|
AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
|
11476
11487
|
}
|
|
@@ -11505,7 +11516,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
11505
11516
|
ImageEditorDirective,
|
|
11506
11517
|
TextEditorComponent,
|
|
11507
11518
|
SpacingHorizontalDirective
|
|
11508
|
-
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n [ngStyle]=\"style?.removeGaps && style?.fullWidth ? {'padding': '0px'} : style?.removeGaps ? {'padding': '0px 15px'} : style?.fullWidth ? {'padding': '0px'} : {}\">\r\n <div *ngFor=\"let text of data?.content?.inputText;let i = index\"\r\n [simpoContentTitleSpace]=\"i == 0 ? style?.layout?.headingSpacing : undefined\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <!-- <div class=\"mt-2 text-center d-flex gap-3 align-items-center justify-content-center\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/869189c1729848816795akar-icons_arrow-back.png\"\r\n alt=\"left curved arrow\" loading=\"eager\" width=\"20\" class=\"left-arrow\">\r\n <div class=\"static-text\">\r\n Curate startup\u2019s by industry\r\n </div>\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/445281c1729848833765akar-icons_arrow-back-1.png\"\r\n alt=\"right curved arrow\" loading=\"eager\" width=\"20\" class=\"right-arrow\">\r\n </div> -->\r\n <!-- <div class=\"main-image-section d-flex flex-wrap mt-5\" [id]=\"data?.id\">\r\n <ng-container *ngFor=\"let img of content?.listItem?.data;let i = index\">\r\n <div class=\"image-section\">\r\n <img\r\n [id]=\"data?.id\" [class]=\"data?.id+img.image.id\" \r\n [src]=\"img.image.url\" [alt]=\"img.image.altText\" loading=\"lazy\" />\r\n </div>\r\n </ng-container>\r\n </div> -->\r\n <div class=\"main-image-section mb-2 d-flex flex-wrap mt-5\" [id]=\"data?.id\" *ngIf=\"screenWidth > 475\">\r\n <ng-container *ngFor=\"let img of content?.listItem?.data; let i = index\">\r\n <div class=\"image-section\" [ngClass]=\"{'even-row': isEvenRow(i), 'odd-row': !isEvenRow(i)}\">\r\n <img [id]=\"data?.id\" [class]=\"data?.id + img.image.id\" [src]=\"img.image.url\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\"\r\n [alt]=\"img.image.altText\" loading=\"lazy\" [simpoCorner]=\"style?.corners\" />\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"mob-container\" *ngIf=\"screenWidth <= 475\">\r\n <ng-container *ngFor=\"let img of content?.listItem?.data; let i = index\">\r\n <div class=\"d-flex logo-box justify-content-center\">\r\n <img [id]=\"data?.id\" [class]=\"data?.id + img.image.id\" [src]=\"img.image.url\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\"\r\n [alt]=\"img.image.altText\" loading=\"lazy\" [simpoCorner]=\"style?.corners\" />\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n</section>", styles: [".text-alignment{text-align:center;margin-bottom:10px}.total-container{height:auto;position:relative}.main-image-section{padding:0px 5rem}.image-section{padding:5px}.image-section img{width:100%;object-fit:cover}.even-row{flex-basis:calc(100% / 7);max-width:calc(100% / 7)}.odd-row{flex-basis:12.5%;max-width:12.5%}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset!important;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}.left-arrow,.right-arrow{position:relative;top:10px}.static-text{font-size:16px;font-weight:900}.mob-container{display:grid;grid-template-columns:45% 45%;justify-content:center}.logo-box{padding-top
|
|
11519
|
+
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n [ngStyle]=\"style?.removeGaps && style?.fullWidth ? {'padding': '0px'} : style?.removeGaps ? {'padding': '0px 15px'} : style?.fullWidth ? {'padding': '0px'} : {}\">\r\n <div *ngFor=\"let text of data?.content?.inputText;let i = index\"\r\n [simpoContentTitleSpace]=\"i == 0 ? style?.layout?.headingSpacing : undefined\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <!-- <div class=\"mt-2 text-center d-flex gap-3 align-items-center justify-content-center\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/869189c1729848816795akar-icons_arrow-back.png\"\r\n alt=\"left curved arrow\" loading=\"eager\" width=\"20\" class=\"left-arrow\">\r\n <div class=\"static-text\">\r\n Curate startup\u2019s by industry\r\n </div>\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/445281c1729848833765akar-icons_arrow-back-1.png\"\r\n alt=\"right curved arrow\" loading=\"eager\" width=\"20\" class=\"right-arrow\">\r\n </div> -->\r\n <!-- <div class=\"main-image-section d-flex flex-wrap mt-5\" [id]=\"data?.id\">\r\n <ng-container *ngFor=\"let img of content?.listItem?.data;let i = index\">\r\n <div class=\"image-section\">\r\n <img\r\n [id]=\"data?.id\" [class]=\"data?.id+img.image.id\" \r\n [src]=\"img.image.url\" [alt]=\"img.image.altText\" loading=\"lazy\" />\r\n </div>\r\n </ng-container>\r\n </div> -->\r\n <div class=\"main-image-section mb-2 d-flex flex-wrap mt-5\" [ngClass]=\"{'px-0': style?.fullWidth}\" [id]=\"data?.id\" *ngIf=\"screenWidth > 475\">\r\n <ng-container *ngFor=\"let img of content?.listItem?.data; let i = index\">\r\n <div class=\"image-section\" [ngClass]=\"{'even-row': isEvenRow(i), 'odd-row': !isEvenRow(i)}\">\r\n <img [id]=\"data?.id\" [class]=\"data?.id + img.image.id\" [src]=\"img.image.url\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\"\r\n [alt]=\"img.image.altText\" loading=\"lazy\" [simpoCorner]=\"style?.corners\" />\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"mob-container\" *ngIf=\"screenWidth <= 475\">\r\n <ng-container *ngFor=\"let img of content?.listItem?.data; let i = index\">\r\n <div class=\"d-flex logo-box justify-content-center\">\r\n <img [id]=\"data?.id\" [class]=\"data?.id + img.image.id\" [src]=\"img.image.url\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\"\r\n [alt]=\"img.image.altText\" loading=\"lazy\" [simpoCorner]=\"style?.corners\" />\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n</section>", styles: [".text-alignment{text-align:center;margin-bottom:10px}.total-container{height:auto;position:relative}.main-image-section{padding:0px 5rem}.image-section{padding:5px}.image-section img{width:100%;object-fit:cover}.even-row{flex-basis:calc(100% / 7);max-width:calc(100% / 7)}.odd-row{flex-basis:12.5%;max-width:12.5%}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset!important;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}.left-arrow,.right-arrow{position:relative;top:10px}.static-text{font-size:16px;font-weight:900}.mob-container{display:grid;grid-template-columns:45% 45%;justify-content:center;margin-top:8px}.logo-box{padding-top:.25rem;width:100%;height:8rem}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"] }]
|
|
11509
11520
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
11510
11521
|
type: Input
|
|
11511
11522
|
}], index: [{
|