simpo-component-library 1.4.230 → 1.4.232
Sign up to get free protection for your applications and to get access to all the features.
- package/esm2022/lib/ecommerce/sections/cart/cart.component.mjs +5 -30
- package/esm2022/lib/ecommerce/sections/checkout/checkout.component.mjs +3 -3
- package/esm2022/lib/ecommerce/sections/featured-category/featured-category.component.mjs +3 -3
- package/esm2022/lib/ecommerce/sections/featured-products/featured-products.component.mjs +3 -3
- package/esm2022/lib/ecommerce/sections/order-details/order-details.component.mjs +3 -3
- package/esm2022/lib/ecommerce/sections/pagnination/pagnination.component.mjs +1 -3
- package/esm2022/lib/ecommerce/sections/product-desc/product-desc.component.mjs +25 -3
- package/esm2022/lib/ecommerce/sections/product-list/product-list.component.mjs +3 -6
- package/esm2022/lib/ecommerce/sections/user-basic-info/user-basic-info.component.mjs +3 -3
- package/esm2022/lib/ecommerce/sections/user-profile/user-profile.component.mjs +8 -5
- package/esm2022/lib/ecommerce/sections/verify-payment/verify-payment.component.mjs +3 -3
- package/esm2022/lib/ecommerce/sections/whislist/whislist.component.mjs +4 -21
- package/esm2022/lib/elements/below-image-card/below-image-card.component.mjs +3 -3
- package/esm2022/lib/elements/covering-image-card/covering-image-card.component.mjs +3 -3
- package/esm2022/lib/elements/top-of-image-card/top-of-image-card.component.mjs +3 -3
- package/esm2022/lib/sections/banner-carousel/banner-carousel.component.mjs +3 -3
- package/esm2022/lib/sections/banner-grid-section/banner-grid-section.component.mjs +3 -3
- package/esm2022/lib/sections/banner-section/banner-section.component.mjs +3 -3
- package/esm2022/lib/sections/blog-list/blog-list.component.mjs +3 -3
- package/esm2022/lib/sections/carousel-banner/carousel-banner.component.mjs +3 -3
- package/esm2022/lib/sections/contact-us/contact-us.component.mjs +3 -3
- package/esm2022/lib/sections/faq-section/faq-section.component.mjs +3 -3
- package/esm2022/lib/sections/features-section/features-section.component.mjs +3 -3
- package/esm2022/lib/sections/footer-section/footer-section.component.mjs +3 -3
- package/esm2022/lib/sections/image-carousel-section/image-carousel-section.component.mjs +3 -3
- package/esm2022/lib/sections/image-grid-section/image-grid-section.component.mjs +3 -3
- package/esm2022/lib/sections/image-section/image-section.component.mjs +3 -3
- package/esm2022/lib/sections/logo-showcase/logo-showcase.component.mjs +3 -3
- package/esm2022/lib/sections/navbar-section/navbar-section.component.mjs +3 -3
- package/esm2022/lib/sections/pricing-section/pricing-section.component.mjs +3 -3
- package/esm2022/lib/sections/process-modern/process-modern.component.mjs +3 -3
- package/esm2022/lib/sections/process-section/process-section.component.mjs +3 -3
- package/esm2022/lib/sections/recent-blog-post-section/recent-blog-post-section.component.mjs +3 -3
- package/esm2022/lib/sections/testimonial-fullwidth/testimonial-fullwidth.component.mjs +3 -3
- package/esm2022/lib/sections/testimonial-section/testimonial-section.component.mjs +3 -3
- package/esm2022/lib/sections/text-image-section/text-image-section.component.mjs +3 -3
- package/esm2022/lib/sections/view-blog/view-blog.component.mjs +3 -3
- package/fesm2022/simpo-component-library.mjs +101 -124
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/ecommerce/sections/cart/cart.component.d.ts +0 -2
- package/package.json +1 -1
- package/simpo-component-library-1.4.232.tgz +0 -0
- package/simpo-component-library-1.4.226.tgz +0 -0
- package/simpo-component-library-1.4.227.tgz +0 -0
- package/simpo-component-library-1.4.228.tgz +0 -0
- package/simpo-component-library-1.4.230.tgz +0 -0
|
@@ -732,7 +732,7 @@ class BelowImageCardComponent {
|
|
|
732
732
|
return { ...this.styles.image };
|
|
733
733
|
}
|
|
734
734
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: BelowImageCardComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
735
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: BelowImageCardComponent, isStandalone: true, selector: "simpo-below-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button" }, ngImport: i0, template: "<div (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\">\r\n <!-- <div [simpoImageContainerDirective]=\"getAspectRatio\" class=\"w-100\"> -->\r\n <img [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\" [simpoObjectPosition]=\"data.image?.position\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 h-100\" [class]=\"componentId+data.image.id\" *ngIf=\"content.display.showImage\"\r\n loading=\"lazy\">\r\n <!-- </div> -->\r\n <div class=\"ptb-1\">\r\n <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\r\n <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\r\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\r\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\"\r\n [color]=\"styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".w-100{width:100%}.ptb-1{padding-top:1.5rem;padding-bottom:1.5rem}.mb-1{margin-bottom:1rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }] }); }
|
|
735
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: BelowImageCardComponent, isStandalone: true, selector: "simpo-below-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button" }, ngImport: i0, template: "<div (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\">\r\n <!-- <div [simpoImageContainerDirective]=\"getAspectRatio\" class=\"w-100\"> -->\r\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\" [simpoObjectPosition]=\"data.image?.position\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 h-100\" [class]=\"componentId+data.image.id\" *ngIf=\"content.display.showImage\"\r\n loading=\"lazy\">\r\n <!-- </div> -->\r\n <div class=\"ptb-1\">\r\n <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\r\n <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\r\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\r\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\"\r\n [color]=\"styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".w-100{width:100%}.ptb-1{padding-top:1.5rem;padding-bottom:1.5rem}.mb-1{margin-bottom:1rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }] }); }
|
|
736
736
|
}
|
|
737
737
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: BelowImageCardComponent, decorators: [{
|
|
738
738
|
type: Component,
|
|
@@ -743,7 +743,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
743
743
|
SimpoButtonComponent,
|
|
744
744
|
ObjectPositionDirective,
|
|
745
745
|
ImageContainerDirective
|
|
746
|
-
], template: "<div (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\">\r\n <!-- <div [simpoImageContainerDirective]=\"getAspectRatio\" class=\"w-100\"> -->\r\n <img [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\" [simpoObjectPosition]=\"data.image?.position\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 h-100\" [class]=\"componentId+data.image.id\" *ngIf=\"content.display.showImage\"\r\n loading=\"lazy\">\r\n <!-- </div> -->\r\n <div class=\"ptb-1\">\r\n <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\r\n <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\r\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\r\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\"\r\n [color]=\"styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".w-100{width:100%}.ptb-1{padding-top:1.5rem;padding-bottom:1.5rem}.mb-1{margin-bottom:1rem!important}\n"] }]
|
|
746
|
+
], template: "<div (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\">\r\n <!-- <div [simpoImageContainerDirective]=\"getAspectRatio\" class=\"w-100\"> -->\r\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\" [simpoObjectPosition]=\"data.image?.position\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 h-100\" [class]=\"componentId+data.image.id\" *ngIf=\"content.display.showImage\"\r\n loading=\"lazy\">\r\n <!-- </div> -->\r\n <div class=\"ptb-1\">\r\n <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\r\n <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\r\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\r\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\"\r\n [color]=\"styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".w-100{width:100%}.ptb-1{padding-top:1.5rem;padding-bottom:1.5rem}.mb-1{margin-bottom:1rem!important}\n"] }]
|
|
747
747
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
748
748
|
type: Input
|
|
749
749
|
}], styles: [{
|
|
@@ -872,11 +872,11 @@ class TopOfImageCardComponent {
|
|
|
872
872
|
this._eventService.buttonRedirection.emit({ data: this.data.button });
|
|
873
873
|
}
|
|
874
874
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: TopOfImageCardComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
875
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: TopOfImageCardComponent, isStandalone: true, selector: "simpo-top-of-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button" }, ngImport: i0, template: "<!-- <div style=\"position: relative;\">\r\n\r\n <img [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.showImage\">\r\n\r\n <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\r\n <div style=\"color: white;\" class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\"\r\n *ngIf=\"content.showHeading\"></div>\r\n <div style=\"color: white;\" class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.showContent\">\r\n </div>\r\n <app-button-element [buttonData]=\"data?.button\" [sectionId]=\"componentId\" [buttonStyle]=\"styles?.button\" [color]=\"styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n</div>\r\n -->\r\n<div class=\"top-container\" (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\r\n [ngStyle]=\"{'background-image' : content.display.showImage ? 'url('+data.image.url+')' : ''}\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\">\r\n <div [simpoImageDirective]=\"styles?.image\" [id]=\"componentId\" *ngIf=\"content.display.showImage\"></div>\r\n <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\"\r\n [simpoTextBackgroundDirective]=\"content.display.showImage ? styles?.textBackground : ''\">\r\n <div class=\"heading-medium mb-1 lh-40\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\">\r\n </div>\r\n <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\">\r\n </div>\r\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\r\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\"\r\n [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\"></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{padding:3rem 1.5rem 1.5rem;min-height:256px;display:flex;flex-direction:column;justify-content:end;bottom:0}.top-container{background-position:center center;background-size:cover;height:100%;position:relative;display:flex;flex-direction:column;justify-content:flex-end}.lh-40{line-height:40px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: TextBackgroundDirectiveDirective, selector: "[simpoTextBackgroundDirective]", inputs: ["simpoTextBackgroundDirective"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }] }); }
|
|
875
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: TopOfImageCardComponent, isStandalone: true, selector: "simpo-top-of-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button" }, ngImport: i0, template: "<!-- <div style=\"position: relative;\">\r\n\r\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.showImage\">\r\n\r\n <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\r\n <div style=\"color: white;\" class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\"\r\n *ngIf=\"content.showHeading\"></div>\r\n <div style=\"color: white;\" class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.showContent\">\r\n </div>\r\n <app-button-element [buttonData]=\"data?.button\" [sectionId]=\"componentId\" [buttonStyle]=\"styles?.button\" [color]=\"styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n</div>\r\n -->\r\n<div class=\"top-container\" (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\r\n [ngStyle]=\"{'background-image' : content.display.showImage ? 'url('+data.image.url+')' : ''}\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\">\r\n <div [simpoImageDirective]=\"styles?.image\" [id]=\"componentId\" *ngIf=\"content.display.showImage\"></div>\r\n <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\"\r\n [simpoTextBackgroundDirective]=\"content.display.showImage ? styles?.textBackground : ''\">\r\n <div class=\"heading-medium mb-1 lh-40\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\">\r\n </div>\r\n <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\">\r\n </div>\r\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\r\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\"\r\n [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\"></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{padding:3rem 1.5rem 1.5rem;min-height:256px;display:flex;flex-direction:column;justify-content:end;bottom:0}.top-container{background-position:center center;background-size:cover;height:100%;position:relative;display:flex;flex-direction:column;justify-content:flex-end}.lh-40{line-height:40px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: TextBackgroundDirectiveDirective, selector: "[simpoTextBackgroundDirective]", inputs: ["simpoTextBackgroundDirective"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }] }); }
|
|
876
876
|
}
|
|
877
877
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: TopOfImageCardComponent, decorators: [{
|
|
878
878
|
type: Component,
|
|
879
|
-
args: [{ selector: 'simpo-top-of-image-card', standalone: true, imports: [CommonModule, ImageDirectiveDirective, CornerDirective, TextBackgroundDirectiveDirective, SimpoButtonComponent], template: "<!-- <div style=\"position: relative;\">\r\n\r\n <img [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.showImage\">\r\n\r\n <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\r\n <div style=\"color: white;\" class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\"\r\n *ngIf=\"content.showHeading\"></div>\r\n <div style=\"color: white;\" class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.showContent\">\r\n </div>\r\n <app-button-element [buttonData]=\"data?.button\" [sectionId]=\"componentId\" [buttonStyle]=\"styles?.button\" [color]=\"styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n</div>\r\n -->\r\n<div class=\"top-container\" (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\r\n [ngStyle]=\"{'background-image' : content.display.showImage ? 'url('+data.image.url+')' : ''}\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\">\r\n <div [simpoImageDirective]=\"styles?.image\" [id]=\"componentId\" *ngIf=\"content.display.showImage\"></div>\r\n <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\"\r\n [simpoTextBackgroundDirective]=\"content.display.showImage ? styles?.textBackground : ''\">\r\n <div class=\"heading-medium mb-1 lh-40\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\">\r\n </div>\r\n <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\">\r\n </div>\r\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\r\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\"\r\n [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\"></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{padding:3rem 1.5rem 1.5rem;min-height:256px;display:flex;flex-direction:column;justify-content:end;bottom:0}.top-container{background-position:center center;background-size:cover;height:100%;position:relative;display:flex;flex-direction:column;justify-content:flex-end}.lh-40{line-height:40px}\n"] }]
|
|
879
|
+
args: [{ selector: 'simpo-top-of-image-card', standalone: true, imports: [CommonModule, ImageDirectiveDirective, CornerDirective, TextBackgroundDirectiveDirective, SimpoButtonComponent], template: "<!-- <div style=\"position: relative;\">\r\n\r\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.showImage\">\r\n\r\n <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\r\n <div style=\"color: white;\" class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\"\r\n *ngIf=\"content.showHeading\"></div>\r\n <div style=\"color: white;\" class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.showContent\">\r\n </div>\r\n <app-button-element [buttonData]=\"data?.button\" [sectionId]=\"componentId\" [buttonStyle]=\"styles?.button\" [color]=\"styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n</div>\r\n -->\r\n<div class=\"top-container\" (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\r\n [ngStyle]=\"{'background-image' : content.display.showImage ? 'url('+data.image.url+')' : ''}\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\">\r\n <div [simpoImageDirective]=\"styles?.image\" [id]=\"componentId\" *ngIf=\"content.display.showImage\"></div>\r\n <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\"\r\n [simpoTextBackgroundDirective]=\"content.display.showImage ? styles?.textBackground : ''\">\r\n <div class=\"heading-medium mb-1 lh-40\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\">\r\n </div>\r\n <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\">\r\n </div>\r\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\r\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\"\r\n [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\"></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{padding:3rem 1.5rem 1.5rem;min-height:256px;display:flex;flex-direction:column;justify-content:end;bottom:0}.top-container{background-position:center center;background-size:cover;height:100%;position:relative;display:flex;flex-direction:column;justify-content:flex-end}.lh-40{line-height:40px}\n"] }]
|
|
880
880
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
881
881
|
type: Input
|
|
882
882
|
}], styles: [{
|
|
@@ -899,11 +899,11 @@ class CoveringImageCardComponent {
|
|
|
899
899
|
this._eventService.buttonRedirection.emit({ data: this.data.button });
|
|
900
900
|
}
|
|
901
901
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CoveringImageCardComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
902
|
-
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" }, ngImport: i0, template: "<div class=\"parent-tab\" [id]=\"componentId\" [simpoImageDirective]=\"styles?.image\"\r\n (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\">\r\n <img [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 img\" *ngIf=\"content.display.showImage\"\r\n [simpoObjectPosition]=\"data.image?.position\" [class]=\"componentId+data.image.id\" [simpoImageDirective]=\"styles?.image\" loading=\"lazy\">\r\n <div class=\"ptb-1 content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\r\n <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\r\n <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\r\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\r\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\"></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: i2.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: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }] }); }
|
|
902
|
+
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" }, ngImport: i0, template: "<div class=\"parent-tab\" [id]=\"componentId\" [simpoImageDirective]=\"styles?.image\"\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\" *ngIf=\"content.display.showImage\"\r\n [simpoObjectPosition]=\"data.image?.position\" [class]=\"componentId+data.image.id\" [simpoImageDirective]=\"styles?.image\" loading=\"lazy\">\r\n <div class=\"ptb-1 content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\r\n <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\r\n <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\r\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\r\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\"></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: i2.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: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }] }); }
|
|
903
903
|
}
|
|
904
904
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CoveringImageCardComponent, decorators: [{
|
|
905
905
|
type: Component,
|
|
906
|
-
args: [{ selector: 'simpo-covering-image-card', standalone: true, imports: [CommonModule, ImageDirectiveDirective, CornerDirective, TextBackgroundDirectiveDirective, SimpoButtonComponent, ObjectPositionDirective], template: "<div class=\"parent-tab\" [id]=\"componentId\" [simpoImageDirective]=\"styles?.image\"\r\n (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\">\r\n <img [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 img\" *ngIf=\"content.display.showImage\"\r\n [simpoObjectPosition]=\"data.image?.position\" [class]=\"componentId+data.image.id\" [simpoImageDirective]=\"styles?.image\" loading=\"lazy\">\r\n <div class=\"ptb-1 content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\r\n <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\r\n <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\r\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\r\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\"></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"] }]
|
|
906
|
+
args: [{ selector: 'simpo-covering-image-card', standalone: true, imports: [CommonModule, ImageDirectiveDirective, CornerDirective, TextBackgroundDirectiveDirective, SimpoButtonComponent, ObjectPositionDirective], template: "<div class=\"parent-tab\" [id]=\"componentId\" [simpoImageDirective]=\"styles?.image\"\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\" *ngIf=\"content.display.showImage\"\r\n [simpoObjectPosition]=\"data.image?.position\" [class]=\"componentId+data.image.id\" [simpoImageDirective]=\"styles?.image\" loading=\"lazy\">\r\n <div class=\"ptb-1 content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\r\n <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\r\n <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\r\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\r\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\"></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"] }]
|
|
907
907
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
908
908
|
type: Input
|
|
909
909
|
}], styles: [{
|
|
@@ -2191,7 +2191,7 @@ class BannerSectionComponent extends BaseSection {
|
|
|
2191
2191
|
event.stopPropagation();
|
|
2192
2192
|
}
|
|
2193
2193
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: BannerSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2194
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: BannerSectionComponent, isStandalone: true, selector: "simpo-banner-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage}\"\r\n [simpoBackground]=\"styles?.background\" class=\"total-container\" style=\"overflow-x: hidden;\" (click)=\"editSection()\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"px-4 py-5\" [ngClass]=\"{'col-lg-6 col-xxl-6': isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage}\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"row g-5 justify-content-start\"[id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\" [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 >\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage && !isBorderlessImage\" [simpoContainerAlignment]=\"stylesLayout\">\r\n <img\r\n [src]=\"content?.image?.url\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [simpoCorner]=\"styles?.corners\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n class=\"d-block w-100 insideImg\" style=\"object-fit: cover;\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\"/>\r\n </div>\r\n <div class=\"d-flex flex-column justify-content-start gap-15\"\r\n [ngClass]=\"{'col-lg-12': isBorderlessImage, 'col-lg-6': !isBorderlessImage}\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n </div>\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\r\n </div>\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 <img class=\"tick-img\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/933997c1718790303127907598c1696063061900green_verified_image.png\"\r\n alt=\"something\" />\r\n\r\n {{ item.inputText[0].value }}\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\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div style=\" width: 100%; height: 500px;\">\r\n <img src=\"../../assets/divider.svg\" style=\"clip-path: polygon(0 55%, 100% 0, 100% 100%, 0% 100%); background-color: red;\">\r\n </div> -->\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<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\" [ngStyle]=\"{'width': styles?.positionLayout?.value === 'right' ? 'fit-content' : ''}\" style=\"padding: 0px !important;\"*ngIf=\"content?.image?.showImage && isBorderlessImage;\" [simpoBorderless]=\"getPositionLayout\">\r\n <img\r\n [src]=\"content?.image?.url\"\r\n class=\"d-block img-fluid h-100 w-100\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\"/>\r\n </div>\r\n</ng-template>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}@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}}.text-element{inline-size:100%;overflow-wrap:break-word}.mergeNavbar{margin-top:-175px;padding-top:175px}.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}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type:
|
|
2194
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: BannerSectionComponent, isStandalone: true, selector: "simpo-banner-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage}\"\r\n [simpoBackground]=\"styles?.background\" class=\"total-container\" style=\"overflow-x: hidden;\" (click)=\"editSection()\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"px-4 py-5\" [ngClass]=\"{'col-lg-6 col-xxl-6': isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage}\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"row g-5 justify-content-start\"[id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\" [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 >\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage && !isBorderlessImage\" [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" \r\n [src]=\"content?.image?.url\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [simpoCorner]=\"styles?.corners\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n class=\"d-block w-100 insideImg\" style=\"object-fit: cover;\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\"/>\r\n </div>\r\n <div class=\"d-flex flex-column justify-content-start gap-15\"\r\n [ngClass]=\"{'col-lg-12': isBorderlessImage, 'col-lg-6': !isBorderlessImage}\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n </div>\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\r\n </div>\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 <img loading=\"lazy\" class=\"tick-img\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/933997c1718790303127907598c1696063061900green_verified_image.png\"\r\n alt=\"something\" />\r\n\r\n {{ item.inputText[0].value }}\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\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div style=\" width: 100%; height: 500px;\">\r\n <img loading=\"lazy\" src=\"../../assets/divider.svg\" style=\"clip-path: polygon(0 55%, 100% 0, 100% 100%, 0% 100%); background-color: red;\">\r\n </div> -->\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<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\" [ngStyle]=\"{'width': styles?.positionLayout?.value === 'right' ? 'fit-content' : ''}\" style=\"padding: 0px !important;\"*ngIf=\"content?.image?.showImage && isBorderlessImage;\" [simpoBorderless]=\"getPositionLayout\">\r\n <img loading=\"lazy\" \r\n [src]=\"content?.image?.url\"\r\n class=\"d-block img-fluid h-100 w-100\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\"/>\r\n </div>\r\n</ng-template>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}@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}}.text-element{inline-size:100%;overflow-wrap:break-word}.mergeNavbar{margin-top:-175px;padding-top:175px}.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}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type:
|
|
2195
2195
|
//directive
|
|
2196
2196
|
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"] }] }); }
|
|
2197
2197
|
}
|
|
@@ -2226,7 +2226,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
2226
2226
|
ObjectPositionDirective,
|
|
2227
2227
|
ColorDirective,
|
|
2228
2228
|
TextSizeDirective
|
|
2229
|
-
], template: "<div [id]=\"data?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage}\"\r\n [simpoBackground]=\"styles?.background\" class=\"total-container\" style=\"overflow-x: hidden;\" (click)=\"editSection()\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"px-4 py-5\" [ngClass]=\"{'col-lg-6 col-xxl-6': isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage}\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"row g-5 justify-content-start\"[id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\" [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 >\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage && !isBorderlessImage\" [simpoContainerAlignment]=\"stylesLayout\">\r\n <img\r\n [src]=\"content?.image?.url\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [simpoCorner]=\"styles?.corners\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n class=\"d-block w-100 insideImg\" style=\"object-fit: cover;\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\"/>\r\n </div>\r\n <div class=\"d-flex flex-column justify-content-start gap-15\"\r\n [ngClass]=\"{'col-lg-12': isBorderlessImage, 'col-lg-6': !isBorderlessImage}\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n </div>\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\r\n </div>\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 <img class=\"tick-img\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/933997c1718790303127907598c1696063061900green_verified_image.png\"\r\n alt=\"something\" />\r\n\r\n {{ item.inputText[0].value }}\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\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div style=\" width: 100%; height: 500px;\">\r\n <img src=\"../../assets/divider.svg\" style=\"clip-path: polygon(0 55%, 100% 0, 100% 100%, 0% 100%); background-color: red;\">\r\n </div> -->\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<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\" [ngStyle]=\"{'width': styles?.positionLayout?.value === 'right' ? 'fit-content' : ''}\" style=\"padding: 0px !important;\"*ngIf=\"content?.image?.showImage && isBorderlessImage;\" [simpoBorderless]=\"getPositionLayout\">\r\n <img\r\n [src]=\"content?.image?.url\"\r\n class=\"d-block img-fluid h-100 w-100\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\"/>\r\n </div>\r\n</ng-template>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}@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}}.text-element{inline-size:100%;overflow-wrap:break-word}.mergeNavbar{margin-top:-175px;padding-top:175px}.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}\n"] }]
|
|
2229
|
+
], template: "<div [id]=\"data?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage}\"\r\n [simpoBackground]=\"styles?.background\" class=\"total-container\" style=\"overflow-x: hidden;\" (click)=\"editSection()\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"px-4 py-5\" [ngClass]=\"{'col-lg-6 col-xxl-6': isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage}\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"row g-5 justify-content-start\"[id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\" [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 >\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage && !isBorderlessImage\" [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" \r\n [src]=\"content?.image?.url\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [simpoCorner]=\"styles?.corners\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n class=\"d-block w-100 insideImg\" style=\"object-fit: cover;\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\"/>\r\n </div>\r\n <div class=\"d-flex flex-column justify-content-start gap-15\"\r\n [ngClass]=\"{'col-lg-12': isBorderlessImage, 'col-lg-6': !isBorderlessImage}\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n </div>\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\r\n </div>\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 <img loading=\"lazy\" class=\"tick-img\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/933997c1718790303127907598c1696063061900green_verified_image.png\"\r\n alt=\"something\" />\r\n\r\n {{ item.inputText[0].value }}\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\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div style=\" width: 100%; height: 500px;\">\r\n <img loading=\"lazy\" src=\"../../assets/divider.svg\" style=\"clip-path: polygon(0 55%, 100% 0, 100% 100%, 0% 100%); background-color: red;\">\r\n </div> -->\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<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\" [ngStyle]=\"{'width': styles?.positionLayout?.value === 'right' ? 'fit-content' : ''}\" style=\"padding: 0px !important;\"*ngIf=\"content?.image?.showImage && isBorderlessImage;\" [simpoBorderless]=\"getPositionLayout\">\r\n <img loading=\"lazy\" \r\n [src]=\"content?.image?.url\"\r\n class=\"d-block img-fluid h-100 w-100\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\"/>\r\n </div>\r\n</ng-template>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}@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}}.text-element{inline-size:100%;overflow-wrap:break-word}.mergeNavbar{margin-top:-175px;padding-top:175px}.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}\n"] }]
|
|
2230
2230
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
2231
2231
|
type: Input
|
|
2232
2232
|
}], index: [{
|
|
@@ -2311,7 +2311,7 @@ class FaqSectionComponent extends BaseSection {
|
|
|
2311
2311
|
}, 100);
|
|
2312
2312
|
}
|
|
2313
2313
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FaqSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2314
|
-
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" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" \r\n class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"col-xxl-8 px-4 py-5 w-100\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\">\r\n\r\n <div *ngIf=\"!content?.image?.showImage\">\r\n <div class=\"container-fluid flex-col\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n </div>\r\n\r\n <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\"(click)=\"toggleContent(i)\">\r\n <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative\" data-toggle=\"collapse\">\r\n <span style=\"display: block;\">{{itemData.inputText[0].value}}</span>\r\n <mat-icon *ngIf=\"unCollapsedList.includes(i)\" style=\"position: absolute; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n <mat-icon *ngIf=\"!unCollapsedList.includes(i)\" style=\"position: absolute; right: 0px;\">keyboard_arrow_down</mat-icon>\r\n </p>\r\n <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': unCollapsedList.includes(i)}\" [innerHTML]=\"itemData.inputText[1].value\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"content?.image?.showImage\" 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\"\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-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n </div>\r\n\r\n <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\" (click)=\"toggleContent(i)\">\r\n <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative\" data-toggle=\"collapse\">\r\n <span>{{itemData.inputText[0].value}}</span>\r\n <mat-icon *ngIf=\"unCollapsedList.includes(i)\"style=\"position: absolute; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n <mat-icon *ngIf=\"!unCollapsedList.includes(i)\"style=\"position: absolute; right: 0px;\">keyboard_arrow_down</mat-icon>\r\n </p>\r\n <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': unCollapsedList.includes(i)}\" [innerHTML]=\"itemData.inputText[1].value\"></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 [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 h-100\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n </div>\r\n </div>\r\n </div>\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: [".mb-2{margin-bottom:2.5rem!important}.data{display:flex;flex-direction:column;gap:1rem;padding-top:2.5rem;padding-bottom:2.5rem;box-shadow:#11182733 0 -1px inset;cursor:pointer}.flex-col{display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{height:auto;position:relative}.heading-large{margin-top:20px}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: HeadingElementComponent, selector: "simpo-heading-element", inputs: ["data"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], 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: "directive", type:
|
|
2314
|
+
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" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" \r\n class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"col-xxl-8 px-4 py-5 w-100\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\">\r\n\r\n <div *ngIf=\"!content?.image?.showImage\">\r\n <div class=\"container-fluid flex-col\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n </div>\r\n\r\n <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\"(click)=\"toggleContent(i)\">\r\n <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative\" data-toggle=\"collapse\">\r\n <span style=\"display: block;\">{{itemData.inputText[0].value}}</span>\r\n <mat-icon *ngIf=\"unCollapsedList.includes(i)\" style=\"position: absolute; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n <mat-icon *ngIf=\"!unCollapsedList.includes(i)\" style=\"position: absolute; right: 0px;\">keyboard_arrow_down</mat-icon>\r\n </p>\r\n <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': unCollapsedList.includes(i)}\" [innerHTML]=\"itemData.inputText[1].value\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"content?.image?.showImage\" 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\"\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-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n </div>\r\n\r\n <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\" (click)=\"toggleContent(i)\">\r\n <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative\" data-toggle=\"collapse\">\r\n <span>{{itemData.inputText[0].value}}</span>\r\n <mat-icon *ngIf=\"unCollapsedList.includes(i)\"style=\"position: absolute; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n <mat-icon *ngIf=\"!unCollapsedList.includes(i)\"style=\"position: absolute; right: 0px;\">keyboard_arrow_down</mat-icon>\r\n </p>\r\n <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': unCollapsedList.includes(i)}\" [innerHTML]=\"itemData.inputText[1].value\"></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 h-100\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n </div>\r\n </div>\r\n </div>\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: [".mb-2{margin-bottom:2.5rem!important}.data{display:flex;flex-direction:column;gap:1rem;padding-top:2.5rem;padding-bottom:2.5rem;box-shadow:#11182733 0 -1px inset;cursor:pointer}.flex-col{display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{height:auto;position:relative}.heading-large{margin-top:20px}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: HeadingElementComponent, selector: "simpo-heading-element", inputs: ["data"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], 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: "directive", type:
|
|
2315
2315
|
//directive
|
|
2316
2316
|
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: 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"] }] }); }
|
|
2317
2317
|
}
|
|
@@ -2343,7 +2343,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
2343
2343
|
ContentTitleDirective,
|
|
2344
2344
|
ObjectPositionDirective,
|
|
2345
2345
|
SimpoContainerAligment
|
|
2346
|
-
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" \r\n class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"col-xxl-8 px-4 py-5 w-100\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\">\r\n\r\n <div *ngIf=\"!content?.image?.showImage\">\r\n <div class=\"container-fluid flex-col\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n </div>\r\n\r\n <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\"(click)=\"toggleContent(i)\">\r\n <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative\" data-toggle=\"collapse\">\r\n <span style=\"display: block;\">{{itemData.inputText[0].value}}</span>\r\n <mat-icon *ngIf=\"unCollapsedList.includes(i)\" style=\"position: absolute; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n <mat-icon *ngIf=\"!unCollapsedList.includes(i)\" style=\"position: absolute; right: 0px;\">keyboard_arrow_down</mat-icon>\r\n </p>\r\n <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': unCollapsedList.includes(i)}\" [innerHTML]=\"itemData.inputText[1].value\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"content?.image?.showImage\" 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\"\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-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n </div>\r\n\r\n <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\" (click)=\"toggleContent(i)\">\r\n <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative\" data-toggle=\"collapse\">\r\n <span>{{itemData.inputText[0].value}}</span>\r\n <mat-icon *ngIf=\"unCollapsedList.includes(i)\"style=\"position: absolute; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n <mat-icon *ngIf=\"!unCollapsedList.includes(i)\"style=\"position: absolute; right: 0px;\">keyboard_arrow_down</mat-icon>\r\n </p>\r\n <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': unCollapsedList.includes(i)}\" [innerHTML]=\"itemData.inputText[1].value\"></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 [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 h-100\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n </div>\r\n </div>\r\n </div>\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: [".mb-2{margin-bottom:2.5rem!important}.data{display:flex;flex-direction:column;gap:1rem;padding-top:2.5rem;padding-bottom:2.5rem;box-shadow:#11182733 0 -1px inset;cursor:pointer}.flex-col{display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{height:auto;position:relative}.heading-large{margin-top:20px}\n"] }]
|
|
2346
|
+
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" \r\n class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"col-xxl-8 px-4 py-5 w-100\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\">\r\n\r\n <div *ngIf=\"!content?.image?.showImage\">\r\n <div class=\"container-fluid flex-col\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n </div>\r\n\r\n <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\"(click)=\"toggleContent(i)\">\r\n <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative\" data-toggle=\"collapse\">\r\n <span style=\"display: block;\">{{itemData.inputText[0].value}}</span>\r\n <mat-icon *ngIf=\"unCollapsedList.includes(i)\" style=\"position: absolute; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n <mat-icon *ngIf=\"!unCollapsedList.includes(i)\" style=\"position: absolute; right: 0px;\">keyboard_arrow_down</mat-icon>\r\n </p>\r\n <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': unCollapsedList.includes(i)}\" [innerHTML]=\"itemData.inputText[1].value\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"content?.image?.showImage\" 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\"\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-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n </div>\r\n\r\n <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\" (click)=\"toggleContent(i)\">\r\n <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative\" data-toggle=\"collapse\">\r\n <span>{{itemData.inputText[0].value}}</span>\r\n <mat-icon *ngIf=\"unCollapsedList.includes(i)\"style=\"position: absolute; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n <mat-icon *ngIf=\"!unCollapsedList.includes(i)\"style=\"position: absolute; right: 0px;\">keyboard_arrow_down</mat-icon>\r\n </p>\r\n <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': unCollapsedList.includes(i)}\" [innerHTML]=\"itemData.inputText[1].value\"></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 h-100\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n </div>\r\n </div>\r\n </div>\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: [".mb-2{margin-bottom:2.5rem!important}.data{display:flex;flex-direction:column;gap:1rem;padding-top:2.5rem;padding-bottom:2.5rem;box-shadow:#11182733 0 -1px inset;cursor:pointer}.flex-col{display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{height:auto;position:relative}.heading-large{margin-top:20px}\n"] }]
|
|
2347
2347
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
2348
2348
|
type: Input
|
|
2349
2349
|
}], index: [{
|
|
@@ -2375,7 +2375,7 @@ class FooterSectionComponent extends BaseSection {
|
|
|
2375
2375
|
}, 100);
|
|
2376
2376
|
}
|
|
2377
2377
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FooterSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2378
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FooterSectionComponent, isStandalone: true, selector: "simpo-footer-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\r\n <footer *ngIf=\"style?.footerType === footerTypes.SPLIT_DETAILS_RIGHT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-row flex-column justify-content-between align-items-start align-items-lg-center\">\r\n <div class=\"d-flex flex-column flex-grow\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc additional-details\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-5\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-4 mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-4 mt-0\"\r\n [ngStyle]=\"{'margin-left': content?.socialLinks?.display ? '20px' : ''}\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.SPLIT_DETAILS_LEFT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-row flex-column justify-content-between align-items-start align-items-lg-center\">\r\n <div class=\"d-flex flex-column flex-grow\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3 mt-4 mt-lg-0\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-4 mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-4 mt-4\"\r\n [ngStyle]=\"{'margin-left': content?.socialLinks?.display ? '20px' : ''}\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-2\">\r\n <div class=\"body-desc mt-lg-5 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_RIGHT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-end align-items-lg-end\">\r\n <div class=\"d-flex flex-column flex-grow align-items-end\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-5 mt-5 text-end\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4\">\r\n <div class=\"d-flex align-items-start align-items-lg-end flex-column flex-lg-colum gap-lg-0 gap-3\r\n align-items-end\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\"\r\n class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_LEFT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-start align-items-lg-start\">\r\n <div class=\"d-flex flex-column flex-grow align-items-start\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-5 mt-5 text-start\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4 align-items-start\">\r\n <div class=\"d-flex align-items-start align-items-lg-start flex-column flex-lg-colum gap-lg-0 gap-3 align-items-start justify-content-between\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\"\r\n class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_CENTER\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-center align-items-lg-center\">\r\n <div class=\"d-flex flex-column flex-grow align-items-center\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-5 mt-5 text-start\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4 align-items-center\">\r\n <div class=\"d-flex align-items-center align-items-lg-center flex-column flex-lg-colum gap-lg-0 gap-3 align-items-start justify-content-between\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\"\r\n class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.SIMPLE_DETAILS_RIGHT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-row flex-column justify-content-between align-items-center align-items-lg-center\">\r\n <div class=\"d-flex flex-column flex-lg-row flex-grow align-items-center gap-lg-3 col-lg-6\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-0 mt-5 col-lg-6\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-lg-row align-items-center gap-lg-3 flex-grow mt-lg-0 mt-5 col-lg-6 justify-content-lg-end\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-0 mt-4\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-0 mt-4\"\r\n [ngStyle]=\"{'margin': content?.socialLinks?.display ? '10px' : ''}\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4 mt-lg-0\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.SIMPLE_DETAILS_CENTER\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-column flex-column justify-content-between align-items-center align-items-lg-center\">\r\n <div class=\"d-flex flex-column flex-lg-row flex-grow align-items-center gap-lg-3\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-0 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-lg-row align-items-center gap-lg-3 flex-grow mt-lg-5 mt-5 justify-content-lg-end\">\r\n <div class=\"d-flex align-items-center align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-0 mt-4\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-0 mt-4\"\r\n [ngStyle]=\"{'margin': content?.socialLinks?.display ? '10px' : ''}\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4 mt-lg-0\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".container-fluid{margin-top:101px;color:#000!important}.card{background-color:#f8f9fb!important}p{font-size:calc(12px + (14 - 12) * ((100vw - 360px) / (1600 - 360)))!important;display:fkex}h3{font-size:calc(24px + (30 - 24) * ((100vw - 360px) / (1600 - 360)))!important}.social{font-size:21px!important}.color-text{color:#757575!important}footer{color:#caced1!important}li{margin-top:20px;margin-bottom:20px}.Careers{cursor:pointer;color:#1e88e5}.row-1{background-color:#1e242a!important}.row-2{background-color:#28323c!important}.made-with{text-align:end}.additional-details{font-size:16px}@media only screen and (max-width : 475px){.made-with{text-align:start}.button-display{margin-left:0!important}}.button-display{display:flex;gap:10px}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SimpoFooterLayoutDirective, selector: "[simpoFooterLayout]", inputs: ["simpoFooterLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
|
|
2378
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FooterSectionComponent, isStandalone: true, selector: "simpo-footer-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\r\n <footer *ngIf=\"style?.footerType === footerTypes.SPLIT_DETAILS_RIGHT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-row flex-column justify-content-between align-items-start align-items-lg-center\">\r\n <div class=\"d-flex flex-column flex-grow\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc additional-details\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-5\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-4 mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-4 mt-0\"\r\n [ngStyle]=\"{'margin-left': content?.socialLinks?.display ? '20px' : ''}\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.SPLIT_DETAILS_LEFT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-row flex-column justify-content-between align-items-start align-items-lg-center\">\r\n <div class=\"d-flex flex-column flex-grow\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3 mt-4 mt-lg-0\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-4 mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-4 mt-4\"\r\n [ngStyle]=\"{'margin-left': content?.socialLinks?.display ? '20px' : ''}\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-2\">\r\n <div class=\"body-desc mt-lg-5 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_RIGHT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-end align-items-lg-end\">\r\n <div class=\"d-flex flex-column flex-grow align-items-end\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-5 mt-5 text-end\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4\">\r\n <div class=\"d-flex align-items-start align-items-lg-end flex-column flex-lg-colum gap-lg-0 gap-3\r\n align-items-end\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\"\r\n class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_LEFT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-start align-items-lg-start\">\r\n <div class=\"d-flex flex-column flex-grow align-items-start\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-5 mt-5 text-start\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4 align-items-start\">\r\n <div class=\"d-flex align-items-start align-items-lg-start flex-column flex-lg-colum gap-lg-0 gap-3 align-items-start justify-content-between\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\"\r\n class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_CENTER\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-center align-items-lg-center\">\r\n <div class=\"d-flex flex-column flex-grow align-items-center\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-5 mt-5 text-start\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4 align-items-center\">\r\n <div class=\"d-flex align-items-center align-items-lg-center flex-column flex-lg-colum gap-lg-0 gap-3 align-items-start justify-content-between\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\"\r\n class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.SIMPLE_DETAILS_RIGHT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-row flex-column justify-content-between align-items-center align-items-lg-center\">\r\n <div class=\"d-flex flex-column flex-lg-row flex-grow align-items-center gap-lg-3 col-lg-6\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-0 mt-5 col-lg-6\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-lg-row align-items-center gap-lg-3 flex-grow mt-lg-0 mt-5 col-lg-6 justify-content-lg-end\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-0 mt-4\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-0 mt-4\"\r\n [ngStyle]=\"{'margin': content?.socialLinks?.display ? '10px' : ''}\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4 mt-lg-0\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.SIMPLE_DETAILS_CENTER\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-column flex-column justify-content-between align-items-center align-items-lg-center\">\r\n <div class=\"d-flex flex-column flex-lg-row flex-grow align-items-center gap-lg-3\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-0 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-lg-row align-items-center gap-lg-3 flex-grow mt-lg-5 mt-5 justify-content-lg-end\">\r\n <div class=\"d-flex align-items-center align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-0 mt-4\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-0 mt-4\"\r\n [ngStyle]=\"{'margin': content?.socialLinks?.display ? '10px' : ''}\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4 mt-lg-0\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".container-fluid{margin-top:101px;color:#000!important}.card{background-color:#f8f9fb!important}p{font-size:calc(12px + (14 - 12) * ((100vw - 360px) / (1600 - 360)))!important;display:fkex}h3{font-size:calc(24px + (30 - 24) * ((100vw - 360px) / (1600 - 360)))!important}.social{font-size:21px!important}.color-text{color:#757575!important}footer{color:#caced1!important}li{margin-top:20px;margin-bottom:20px}.Careers{cursor:pointer;color:#1e88e5}.row-1{background-color:#1e242a!important}.row-2{background-color:#28323c!important}.made-with{text-align:end}.additional-details{font-size:16px}@media only screen and (max-width : 475px){.made-with{text-align:start}.button-display{margin-left:0!important}}.button-display{display:flex;gap:10px}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SimpoFooterLayoutDirective, selector: "[simpoFooterLayout]", inputs: ["simpoFooterLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
|
|
2379
2379
|
}
|
|
2380
2380
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FooterSectionComponent, decorators: [{
|
|
2381
2381
|
type: Component,
|
|
@@ -2404,7 +2404,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
2404
2404
|
PositionLayoutDirectiveDirective,
|
|
2405
2405
|
TextBackgroundDirectiveDirective,
|
|
2406
2406
|
ColorDirective
|
|
2407
|
-
], template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\r\n <footer *ngIf=\"style?.footerType === footerTypes.SPLIT_DETAILS_RIGHT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-row flex-column justify-content-between align-items-start align-items-lg-center\">\r\n <div class=\"d-flex flex-column flex-grow\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc additional-details\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-5\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-4 mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-4 mt-0\"\r\n [ngStyle]=\"{'margin-left': content?.socialLinks?.display ? '20px' : ''}\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.SPLIT_DETAILS_LEFT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-row flex-column justify-content-between align-items-start align-items-lg-center\">\r\n <div class=\"d-flex flex-column flex-grow\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3 mt-4 mt-lg-0\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-4 mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-4 mt-4\"\r\n [ngStyle]=\"{'margin-left': content?.socialLinks?.display ? '20px' : ''}\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-2\">\r\n <div class=\"body-desc mt-lg-5 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_RIGHT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-end align-items-lg-end\">\r\n <div class=\"d-flex flex-column flex-grow align-items-end\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-5 mt-5 text-end\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4\">\r\n <div class=\"d-flex align-items-start align-items-lg-end flex-column flex-lg-colum gap-lg-0 gap-3\r\n align-items-end\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\"\r\n class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_LEFT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-start align-items-lg-start\">\r\n <div class=\"d-flex flex-column flex-grow align-items-start\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-5 mt-5 text-start\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4 align-items-start\">\r\n <div class=\"d-flex align-items-start align-items-lg-start flex-column flex-lg-colum gap-lg-0 gap-3 align-items-start justify-content-between\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\"\r\n class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_CENTER\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-center align-items-lg-center\">\r\n <div class=\"d-flex flex-column flex-grow align-items-center\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-5 mt-5 text-start\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4 align-items-center\">\r\n <div class=\"d-flex align-items-center align-items-lg-center flex-column flex-lg-colum gap-lg-0 gap-3 align-items-start justify-content-between\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\"\r\n class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.SIMPLE_DETAILS_RIGHT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-row flex-column justify-content-between align-items-center align-items-lg-center\">\r\n <div class=\"d-flex flex-column flex-lg-row flex-grow align-items-center gap-lg-3 col-lg-6\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-0 mt-5 col-lg-6\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-lg-row align-items-center gap-lg-3 flex-grow mt-lg-0 mt-5 col-lg-6 justify-content-lg-end\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-0 mt-4\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-0 mt-4\"\r\n [ngStyle]=\"{'margin': content?.socialLinks?.display ? '10px' : ''}\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4 mt-lg-0\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.SIMPLE_DETAILS_CENTER\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-column flex-column justify-content-between align-items-center align-items-lg-center\">\r\n <div class=\"d-flex flex-column flex-lg-row flex-grow align-items-center gap-lg-3\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-0 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-lg-row align-items-center gap-lg-3 flex-grow mt-lg-5 mt-5 justify-content-lg-end\">\r\n <div class=\"d-flex align-items-center align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-0 mt-4\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-0 mt-4\"\r\n [ngStyle]=\"{'margin': content?.socialLinks?.display ? '10px' : ''}\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4 mt-lg-0\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".container-fluid{margin-top:101px;color:#000!important}.card{background-color:#f8f9fb!important}p{font-size:calc(12px + (14 - 12) * ((100vw - 360px) / (1600 - 360)))!important;display:fkex}h3{font-size:calc(24px + (30 - 24) * ((100vw - 360px) / (1600 - 360)))!important}.social{font-size:21px!important}.color-text{color:#757575!important}footer{color:#caced1!important}li{margin-top:20px;margin-bottom:20px}.Careers{cursor:pointer;color:#1e88e5}.row-1{background-color:#1e242a!important}.row-2{background-color:#28323c!important}.made-with{text-align:end}.additional-details{font-size:16px}@media only screen and (max-width : 475px){.made-with{text-align:start}.button-display{margin-left:0!important}}.button-display{display:flex;gap:10px}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"] }]
|
|
2407
|
+
], template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\r\n <footer *ngIf=\"style?.footerType === footerTypes.SPLIT_DETAILS_RIGHT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-row flex-column justify-content-between align-items-start align-items-lg-center\">\r\n <div class=\"d-flex flex-column flex-grow\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc additional-details\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-5\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-4 mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-4 mt-0\"\r\n [ngStyle]=\"{'margin-left': content?.socialLinks?.display ? '20px' : ''}\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.SPLIT_DETAILS_LEFT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-row flex-column justify-content-between align-items-start align-items-lg-center\">\r\n <div class=\"d-flex flex-column flex-grow\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3 mt-4 mt-lg-0\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-4 mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-4 mt-4\"\r\n [ngStyle]=\"{'margin-left': content?.socialLinks?.display ? '20px' : ''}\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-2\">\r\n <div class=\"body-desc mt-lg-5 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_RIGHT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-end align-items-lg-end\">\r\n <div class=\"d-flex flex-column flex-grow align-items-end\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-5 mt-5 text-end\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4\">\r\n <div class=\"d-flex align-items-start align-items-lg-end flex-column flex-lg-colum gap-lg-0 gap-3\r\n align-items-end\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\"\r\n class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_LEFT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-start align-items-lg-start\">\r\n <div class=\"d-flex flex-column flex-grow align-items-start\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-5 mt-5 text-start\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4 align-items-start\">\r\n <div class=\"d-flex align-items-start align-items-lg-start flex-column flex-lg-colum gap-lg-0 gap-3 align-items-start justify-content-between\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\"\r\n class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_CENTER\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-center align-items-lg-center\">\r\n <div class=\"d-flex flex-column flex-grow align-items-center\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-5 mt-5 text-start\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4 align-items-center\">\r\n <div class=\"d-flex align-items-center align-items-lg-center flex-column flex-lg-colum gap-lg-0 gap-3 align-items-start justify-content-between\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\"\r\n class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.SIMPLE_DETAILS_RIGHT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-row flex-column justify-content-between align-items-center align-items-lg-center\">\r\n <div class=\"d-flex flex-column flex-lg-row flex-grow align-items-center gap-lg-3 col-lg-6\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-0 mt-5 col-lg-6\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-lg-row align-items-center gap-lg-3 flex-grow mt-lg-0 mt-5 col-lg-6 justify-content-lg-end\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-0 mt-4\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-0 mt-4\"\r\n [ngStyle]=\"{'margin': content?.socialLinks?.display ? '10px' : ''}\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4 mt-lg-0\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.SIMPLE_DETAILS_CENTER\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-column flex-column justify-content-between align-items-center align-items-lg-center\">\r\n <div class=\"d-flex flex-column flex-lg-row flex-grow align-items-center gap-lg-3\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-0 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-lg-row align-items-center gap-lg-3 flex-grow mt-lg-5 mt-5 justify-content-lg-end\">\r\n <div class=\"d-flex align-items-center align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-0 mt-4\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-0 mt-4\"\r\n [ngStyle]=\"{'margin': content?.socialLinks?.display ? '10px' : ''}\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4 mt-lg-0\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".container-fluid{margin-top:101px;color:#000!important}.card{background-color:#f8f9fb!important}p{font-size:calc(12px + (14 - 12) * ((100vw - 360px) / (1600 - 360)))!important;display:fkex}h3{font-size:calc(24px + (30 - 24) * ((100vw - 360px) / (1600 - 360)))!important}.social{font-size:21px!important}.color-text{color:#757575!important}footer{color:#caced1!important}li{margin-top:20px;margin-bottom:20px}.Careers{cursor:pointer;color:#1e88e5}.row-1{background-color:#1e242a!important}.row-2{background-color:#28323c!important}.made-with{text-align:end}.additional-details{font-size:16px}@media only screen and (max-width : 475px){.made-with{text-align:start}.button-display{margin-left:0!important}}.button-display{display:flex;gap:10px}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"] }]
|
|
2408
2408
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
2409
2409
|
type: Input
|
|
2410
2410
|
}], index: [{
|
|
@@ -2451,7 +2451,7 @@ class ImageCarouselSectionComponent extends BaseSection {
|
|
|
2451
2451
|
}, 100);
|
|
2452
2452
|
}
|
|
2453
2453
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ImageCarouselSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2454
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ImageCarouselSectionComponent, isStandalone: true, selector: "simpo-image-carousel-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\nclass=\"total-container\" (click)=\"editSection()\">\r\n <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row mlr-0\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\" >\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n\r\n <div id=\"carouselExampleCaptions\" class=\"carousel slide mb-1\" >\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#carouselExampleCaptions\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner\">\r\n <div class=\"carousel-item\" *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n <div class=\"row\">\r\n <div class=\"col d-flex\" *ngIf=\"screenWidth >= 475\">\r\n <!-- <img class=\"d-block position-relative\" style=\"width: 20%; left: -20px\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\r\n <img [simpoImageDirective]=\"style?.image\" class=\"d-block position-relative\" style=\"width: 20%; left: -20px\" [src]=\"getPrevImage(i)?.url\" [alt]=\"getPrevImage(i)?.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"getPrevImage(i)?.position\"\r\n loading=\"lazy\">\r\n <img [simpoImageDirective]=\"style?.image\" class=\"d-block image-height-80vh\" [class]=\"data?.id+img.image.id\" style=\"width: 60%;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"\r\n loading=\"lazy\">\r\n <!-- <img class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\r\n <img [simpoImageDirective]=\"style?.image\" class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"getNextImage(i)?.url\" [alt]=\"getNextImage(i)?.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"getNextImage(i)?.position\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"col d-flex\" *ngIf=\"screenWidth < 475\">\r\n <img class=\"d-block w-100 image-height-40vh\" [class]=\"data?.id+img.image.id\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"prev\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"next\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".mb-1{margin-bottom:1.5rem!important}.previous-icon{width:65px;height:65px}.image-height-40vh{height:40vh}.btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}@media only screen and (max-width: 475px){.previous-icon{width:44%}.image-height-40vh{padding:0}}.mlr-0{margin-left:0;margin-right:0}li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
|
|
2454
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ImageCarouselSectionComponent, isStandalone: true, selector: "simpo-image-carousel-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\nclass=\"total-container\" (click)=\"editSection()\">\r\n <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row mlr-0\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\" >\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n\r\n <div id=\"carouselExampleCaptions\" class=\"carousel slide mb-1\" >\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#carouselExampleCaptions\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner\">\r\n <div class=\"carousel-item\" *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n <div class=\"row\">\r\n <div class=\"col d-flex\" *ngIf=\"screenWidth >= 475\">\r\n <!-- <img loading=\"lazy\" class=\"d-block position-relative\" style=\"width: 20%; left: -20px\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\r\n <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" class=\"d-block position-relative\" style=\"width: 20%; left: -20px\" [src]=\"getPrevImage(i)?.url\" [alt]=\"getPrevImage(i)?.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"getPrevImage(i)?.position\"\r\n loading=\"lazy\">\r\n <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" class=\"d-block image-height-80vh\" [class]=\"data?.id+img.image.id\" style=\"width: 60%;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"\r\n loading=\"lazy\">\r\n <!-- <img loading=\"lazy\" class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\r\n <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"getNextImage(i)?.url\" [alt]=\"getNextImage(i)?.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"getNextImage(i)?.position\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"col d-flex\" *ngIf=\"screenWidth < 475\">\r\n <img loading=\"lazy\" class=\"d-block w-100 image-height-40vh\" [class]=\"data?.id+img.image.id\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"prev\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"next\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".mb-1{margin-bottom:1.5rem!important}.previous-icon{width:65px;height:65px}.image-height-40vh{height:40vh}.btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}@media only screen and (max-width: 475px){.previous-icon{width:44%}.image-height-40vh{padding:0}}.mlr-0{margin-left:0;margin-right:0}li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
|
|
2455
2455
|
//directive
|
|
2456
2456
|
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: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }] }); }
|
|
2457
2457
|
}
|
|
@@ -2481,7 +2481,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
2481
2481
|
TextBackgroundDirectiveDirective,
|
|
2482
2482
|
ObjectPositionDirective,
|
|
2483
2483
|
ContentTitleDirective
|
|
2484
|
-
], template: "<section class=\"container-fluid\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\nclass=\"total-container\" (click)=\"editSection()\">\r\n <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row mlr-0\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\" >\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n\r\n <div id=\"carouselExampleCaptions\" class=\"carousel slide mb-1\" >\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#carouselExampleCaptions\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner\">\r\n <div class=\"carousel-item\" *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n <div class=\"row\">\r\n <div class=\"col d-flex\" *ngIf=\"screenWidth >= 475\">\r\n <!-- <img class=\"d-block position-relative\" style=\"width: 20%; left: -20px\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\r\n <img [simpoImageDirective]=\"style?.image\" class=\"d-block position-relative\" style=\"width: 20%; left: -20px\" [src]=\"getPrevImage(i)?.url\" [alt]=\"getPrevImage(i)?.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"getPrevImage(i)?.position\"\r\n loading=\"lazy\">\r\n <img [simpoImageDirective]=\"style?.image\" class=\"d-block image-height-80vh\" [class]=\"data?.id+img.image.id\" style=\"width: 60%;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"\r\n loading=\"lazy\">\r\n <!-- <img class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\r\n <img [simpoImageDirective]=\"style?.image\" class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"getNextImage(i)?.url\" [alt]=\"getNextImage(i)?.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"getNextImage(i)?.position\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"col d-flex\" *ngIf=\"screenWidth < 475\">\r\n <img class=\"d-block w-100 image-height-40vh\" [class]=\"data?.id+img.image.id\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"prev\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"next\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".mb-1{margin-bottom:1.5rem!important}.previous-icon{width:65px;height:65px}.image-height-40vh{height:40vh}.btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}@media only screen and (max-width: 475px){.previous-icon{width:44%}.image-height-40vh{padding:0}}.mlr-0{margin-left:0;margin-right:0}li{list-style:none}\n"] }]
|
|
2484
|
+
], template: "<section class=\"container-fluid\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\nclass=\"total-container\" (click)=\"editSection()\">\r\n <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row mlr-0\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\" >\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n\r\n <div id=\"carouselExampleCaptions\" class=\"carousel slide mb-1\" >\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#carouselExampleCaptions\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner\">\r\n <div class=\"carousel-item\" *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n <div class=\"row\">\r\n <div class=\"col d-flex\" *ngIf=\"screenWidth >= 475\">\r\n <!-- <img loading=\"lazy\" class=\"d-block position-relative\" style=\"width: 20%; left: -20px\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\r\n <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" class=\"d-block position-relative\" style=\"width: 20%; left: -20px\" [src]=\"getPrevImage(i)?.url\" [alt]=\"getPrevImage(i)?.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"getPrevImage(i)?.position\"\r\n loading=\"lazy\">\r\n <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" class=\"d-block image-height-80vh\" [class]=\"data?.id+img.image.id\" style=\"width: 60%;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"\r\n loading=\"lazy\">\r\n <!-- <img loading=\"lazy\" class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\r\n <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"getNextImage(i)?.url\" [alt]=\"getNextImage(i)?.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"getNextImage(i)?.position\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"col d-flex\" *ngIf=\"screenWidth < 475\">\r\n <img loading=\"lazy\" class=\"d-block w-100 image-height-40vh\" [class]=\"data?.id+img.image.id\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"prev\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"next\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".mb-1{margin-bottom:1.5rem!important}.previous-icon{width:65px;height:65px}.image-height-40vh{height:40vh}.btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}@media only screen and (max-width: 475px){.previous-icon{width:44%}.image-height-40vh{padding:0}}.mlr-0{margin-left:0;margin-right:0}li{list-style:none}\n"] }]
|
|
2485
2485
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
2486
2486
|
type: Input
|
|
2487
2487
|
}], index: [{
|
|
@@ -2516,7 +2516,7 @@ class ImageGridSectionComponent extends BaseSection {
|
|
|
2516
2516
|
}, 100);
|
|
2517
2517
|
}
|
|
2518
2518
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ImageGridSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2519
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ImageGridSectionComponent, isStandalone: true, selector: "simpo-image-grid-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\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\">\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\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n\r\n\r\n <div class=\"main-image-section\" [simpoColumnDirective]=\"style?.size\" [id]=\"data?.id\"\r\n *ngFor=\"let img of content?.listItem?.data\"\r\n [ngStyle]=\"style?.removeGaps ? {'padding': '0px', 'margin': '0px'} : {}\">\r\n <div class=\"image-section\">\r\n <img [simpoImageDirective]=\"style?.image\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [class]=\"data?.id+img.image.id\" [simpoObjectPosition]=\"img.image.position\"\r\n [src]=\"img.image.url\" [alt]=\"img.image.altText\" loading=\"lazy\"/>\r\n </div>\r\n </div>\r\n\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 <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.main-image-section{margin-bottom:1.5rem}.image-section{width:100%}.image-section img{width:100%;object-fit:cover}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { 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"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
|
|
2519
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ImageGridSectionComponent, isStandalone: true, selector: "simpo-image-grid-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\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\">\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\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n\r\n\r\n <div class=\"main-image-section\" [simpoColumnDirective]=\"style?.size\" [id]=\"data?.id\"\r\n *ngFor=\"let img of content?.listItem?.data\"\r\n [ngStyle]=\"style?.removeGaps ? {'padding': '0px', 'margin': '0px'} : {}\">\r\n <div class=\"image-section\">\r\n <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [class]=\"data?.id+img.image.id\" [simpoObjectPosition]=\"img.image.position\"\r\n [src]=\"img.image.url\" [alt]=\"img.image.altText\" loading=\"lazy\"/>\r\n </div>\r\n </div>\r\n\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 <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.main-image-section{margin-bottom:1.5rem}.image-section{width:100%}.image-section img{width:100%;object-fit:cover}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { 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"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
|
|
2520
2520
|
//directive
|
|
2521
2521
|
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: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }] }); }
|
|
2522
2522
|
}
|
|
@@ -2548,7 +2548,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
2548
2548
|
TextBackgroundDirectiveDirective,
|
|
2549
2549
|
ObjectPositionDirective,
|
|
2550
2550
|
ContentTitleDirective
|
|
2551
|
-
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\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\">\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\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n\r\n\r\n <div class=\"main-image-section\" [simpoColumnDirective]=\"style?.size\" [id]=\"data?.id\"\r\n *ngFor=\"let img of content?.listItem?.data\"\r\n [ngStyle]=\"style?.removeGaps ? {'padding': '0px', 'margin': '0px'} : {}\">\r\n <div class=\"image-section\">\r\n <img [simpoImageDirective]=\"style?.image\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [class]=\"data?.id+img.image.id\" [simpoObjectPosition]=\"img.image.position\"\r\n [src]=\"img.image.url\" [alt]=\"img.image.altText\" loading=\"lazy\"/>\r\n </div>\r\n </div>\r\n\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 <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.main-image-section{margin-bottom:1.5rem}.image-section{width:100%}.image-section img{width:100%;object-fit:cover}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
|
|
2551
|
+
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\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\">\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\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n\r\n\r\n <div class=\"main-image-section\" [simpoColumnDirective]=\"style?.size\" [id]=\"data?.id\"\r\n *ngFor=\"let img of content?.listItem?.data\"\r\n [ngStyle]=\"style?.removeGaps ? {'padding': '0px', 'margin': '0px'} : {}\">\r\n <div class=\"image-section\">\r\n <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [class]=\"data?.id+img.image.id\" [simpoObjectPosition]=\"img.image.position\"\r\n [src]=\"img.image.url\" [alt]=\"img.image.altText\" loading=\"lazy\"/>\r\n </div>\r\n </div>\r\n\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 <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.main-image-section{margin-bottom:1.5rem}.image-section{width:100%}.image-section img{width:100%;object-fit:cover}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
|
|
2552
2552
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
2553
2553
|
type: Input
|
|
2554
2554
|
}], index: [{
|
|
@@ -2580,7 +2580,7 @@ class ImageSectionComponent extends BaseSection {
|
|
|
2580
2580
|
}, 100);
|
|
2581
2581
|
}
|
|
2582
2582
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ImageSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2583
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ImageSectionComponent, isStandalone: true, selector: "simpo-image-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div class=\"main-section\" [ngClass]=\"{'px-0 py-0': style?.fullWidth === true}\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <!-- <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\r\n </div> -->\r\n\r\n <div class=\"image-section\">\r\n <img [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'image': style?.layout?.fit === 'screen'}\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [simpoCorner]=\"style?.corners\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [id]=\"data?.id\"\r\n loading=\"lazy\"/>\r\n </div>\r\n\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 <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".image{width:100%}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.image-section img{object-fit:cover}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media only screen and (max-width: 475px){.h-80{height:50vh;border-radius:1rem}.main-section{min-height:auto!important}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
|
|
2583
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ImageSectionComponent, isStandalone: true, selector: "simpo-image-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div class=\"main-section\" [ngClass]=\"{'px-0 py-0': style?.fullWidth === true}\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <!-- <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\r\n </div> -->\r\n\r\n <div class=\"image-section\">\r\n <img loading=\"lazy\" [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'image': style?.layout?.fit === 'screen'}\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [simpoCorner]=\"style?.corners\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [id]=\"data?.id\"\r\n loading=\"lazy\"/>\r\n </div>\r\n\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 <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".image{width:100%}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.image-section img{object-fit:cover}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media only screen and (max-width: 475px){.h-80{height:50vh;border-radius:1rem}.main-section{min-height:auto!important}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
|
|
2584
2584
|
//directive
|
|
2585
2585
|
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: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }] }); }
|
|
2586
2586
|
}
|
|
@@ -2610,7 +2610,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
2610
2610
|
PositionLayoutDirectiveDirective,
|
|
2611
2611
|
TextBackgroundDirectiveDirective,
|
|
2612
2612
|
ObjectPositionDirective
|
|
2613
|
-
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div class=\"main-section\" [ngClass]=\"{'px-0 py-0': style?.fullWidth === true}\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <!-- <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\r\n </div> -->\r\n\r\n <div class=\"image-section\">\r\n <img [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'image': style?.layout?.fit === 'screen'}\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [simpoCorner]=\"style?.corners\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [id]=\"data?.id\"\r\n loading=\"lazy\"/>\r\n </div>\r\n\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 <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".image{width:100%}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.image-section img{object-fit:cover}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media only screen and (max-width: 475px){.h-80{height:50vh;border-radius:1rem}.main-section{min-height:auto!important}}\n"] }]
|
|
2613
|
+
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div class=\"main-section\" [ngClass]=\"{'px-0 py-0': style?.fullWidth === true}\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <!-- <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\r\n </div> -->\r\n\r\n <div class=\"image-section\">\r\n <img loading=\"lazy\" [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'image': style?.layout?.fit === 'screen'}\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [simpoCorner]=\"style?.corners\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [id]=\"data?.id\"\r\n loading=\"lazy\"/>\r\n </div>\r\n\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 <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".image{width:100%}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.image-section img{object-fit:cover}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media only screen and (max-width: 475px){.h-80{height:50vh;border-radius:1rem}.main-section{min-height:auto!important}}\n"] }]
|
|
2614
2614
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
2615
2615
|
type: Input
|
|
2616
2616
|
}], index: [{
|
|
@@ -2776,7 +2776,7 @@ class TestimonialSectionComponent extends BaseSection {
|
|
|
2776
2776
|
}, 100);
|
|
2777
2777
|
}
|
|
2778
2778
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: TestimonialSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2779
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: TestimonialSectionComponent, isStandalone: true, selector: "simpo-testimonial-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\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\">\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\"\r\n [ngClass]=\"text.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n\r\n <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-ride=\"carousel\" data-interval=\"10000\">\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialFullWidthCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner\">\r\n <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n [class.active]=\"i === 0\">\r\n <div style=\"width: 90%; margin: auto;\">\r\n <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n <img [src]=\"testimonial.image.url\" class=\"mb-1\" loading=\"lazy\" [simpoContainerLayout]=\"getLayout\">\r\n <p class=\"heading-medium\">{{ testimonial.inputText[0].value }}</p>\r\n <span href=\"#\" class=\"py-2 px-4 mb-1\">- {{ testimonial.inputText[1].value }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\" data-bs-slide=\"prev\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\" data-bs-slide=\"next\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:5%;margin-right:5%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;height:45px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
|
|
2779
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: TestimonialSectionComponent, isStandalone: true, selector: "simpo-testimonial-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\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\">\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\"\r\n [ngClass]=\"text.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n\r\n <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-ride=\"carousel\" data-interval=\"10000\">\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialFullWidthCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner\">\r\n <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n [class.active]=\"i === 0\">\r\n <div style=\"width: 90%; margin: auto;\">\r\n <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n <img loading=\"lazy\" [src]=\"testimonial.image.url\" class=\"mb-1\" loading=\"lazy\" [simpoContainerLayout]=\"getLayout\">\r\n <p class=\"heading-medium\">{{ testimonial.inputText[0].value }}</p>\r\n <span href=\"#\" class=\"py-2 px-4 mb-1\">- {{ testimonial.inputText[1].value }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\" data-bs-slide=\"prev\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\" data-bs-slide=\"next\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:5%;margin-right:5%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;height:45px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
|
|
2780
2780
|
//directive
|
|
2781
2781
|
AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContainerFitDirective, selector: "[simpoContainerLayout]", inputs: ["simpoContainerLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }] }); }
|
|
2782
2782
|
}
|
|
@@ -2807,7 +2807,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
2807
2807
|
TextBackgroundDirectiveDirective,
|
|
2808
2808
|
ColorDirective,
|
|
2809
2809
|
ContentTitleDirective
|
|
2810
|
-
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\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\">\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\"\r\n [ngClass]=\"text.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n\r\n <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-ride=\"carousel\" data-interval=\"10000\">\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialFullWidthCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner\">\r\n <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n [class.active]=\"i === 0\">\r\n <div style=\"width: 90%; margin: auto;\">\r\n <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n <img [src]=\"testimonial.image.url\" class=\"mb-1\" loading=\"lazy\" [simpoContainerLayout]=\"getLayout\">\r\n <p class=\"heading-medium\">{{ testimonial.inputText[0].value }}</p>\r\n <span href=\"#\" class=\"py-2 px-4 mb-1\">- {{ testimonial.inputText[1].value }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\" data-bs-slide=\"prev\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\" data-bs-slide=\"next\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:5%;margin-right:5%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;height:45px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}li{list-style:none}\n"] }]
|
|
2810
|
+
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\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\">\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\"\r\n [ngClass]=\"text.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n\r\n <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-ride=\"carousel\" data-interval=\"10000\">\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialFullWidthCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner\">\r\n <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n [class.active]=\"i === 0\">\r\n <div style=\"width: 90%; margin: auto;\">\r\n <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n <img loading=\"lazy\" [src]=\"testimonial.image.url\" class=\"mb-1\" loading=\"lazy\" [simpoContainerLayout]=\"getLayout\">\r\n <p class=\"heading-medium\">{{ testimonial.inputText[0].value }}</p>\r\n <span href=\"#\" class=\"py-2 px-4 mb-1\">- {{ testimonial.inputText[1].value }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\" data-bs-slide=\"prev\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\" data-bs-slide=\"next\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:5%;margin-right:5%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;height:45px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}li{list-style:none}\n"] }]
|
|
2811
2811
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
2812
2812
|
type: Input
|
|
2813
2813
|
}], index: [{
|
|
@@ -2841,7 +2841,7 @@ class TextImageSectionComponent extends BaseSection {
|
|
|
2841
2841
|
}, 100);
|
|
2842
2842
|
}
|
|
2843
2843
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: TextImageSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2844
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: TextImageSectionComponent, isStandalone: true, selector: "simpo-text-image-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" >\r\n <div class=\"row g-5\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [simpoAnimation]=\"styles?.animation\" [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\"\r\n >\r\n <div class=\"col-10 col-sm-8 col-lg-6\">\r\n <img\r\n [src]=\"content?.image?.url\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [simpoCorner]=\"styles?.corners\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n class=\"d-block mx-lg-auto img-fluid h-100\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"100\" loading=\"lazy\"\r\n loading=\"lazy\"/>\r\n </div>\r\n <div class=\"col-lg-6 d-flex flex-column\" [simpoContentAlignment]=\"styles?.contentAlignment\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\" [buttonId]=\"button.id\" [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"showEditors\" [ngClass]=\"{'hover_effect': edit}\">\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: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px;margin-top:15px}@media only screen and (max-width: 475px){.col-10{width:100%!important}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type:
|
|
2844
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: TextImageSectionComponent, isStandalone: true, selector: "simpo-text-image-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" >\r\n <div class=\"row g-5\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [simpoAnimation]=\"styles?.animation\" [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\"\r\n >\r\n <div class=\"col-10 col-sm-8 col-lg-6\">\r\n <img loading=\"lazy\" \r\n [src]=\"content?.image?.url\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [simpoCorner]=\"styles?.corners\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n class=\"d-block mx-lg-auto img-fluid h-100\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"100\" loading=\"lazy\"\r\n loading=\"lazy\"/>\r\n </div>\r\n <div class=\"col-lg-6 d-flex flex-column\" [simpoContentAlignment]=\"styles?.contentAlignment\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\" [buttonId]=\"button.id\" [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"showEditors\" [ngClass]=\"{'hover_effect': edit}\">\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: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px;margin-top:15px}@media only screen and (max-width: 475px){.col-10{width:100%!important}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type:
|
|
2845
2845
|
//directive
|
|
2846
2846
|
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"] }] }); }
|
|
2847
2847
|
}
|
|
@@ -2871,7 +2871,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
2871
2871
|
PositionLayoutDirectiveDirective,
|
|
2872
2872
|
TextBackgroundDirectiveDirective,
|
|
2873
2873
|
ObjectPositionDirective
|
|
2874
|
-
], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" >\r\n <div class=\"row g-5\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [simpoAnimation]=\"styles?.animation\" [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\"\r\n >\r\n <div class=\"col-10 col-sm-8 col-lg-6\">\r\n <img\r\n [src]=\"content?.image?.url\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [simpoCorner]=\"styles?.corners\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n class=\"d-block mx-lg-auto img-fluid h-100\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"100\" loading=\"lazy\"\r\n loading=\"lazy\"/>\r\n </div>\r\n <div class=\"col-lg-6 d-flex flex-column\" [simpoContentAlignment]=\"styles?.contentAlignment\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\" [buttonId]=\"button.id\" [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"showEditors\" [ngClass]=\"{'hover_effect': edit}\">\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: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px;margin-top:15px}@media only screen and (max-width: 475px){.col-10{width:100%!important}}\n"] }]
|
|
2874
|
+
], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" >\r\n <div class=\"row g-5\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [simpoAnimation]=\"styles?.animation\" [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\"\r\n >\r\n <div class=\"col-10 col-sm-8 col-lg-6\">\r\n <img loading=\"lazy\" \r\n [src]=\"content?.image?.url\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [simpoCorner]=\"styles?.corners\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n class=\"d-block mx-lg-auto img-fluid h-100\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"100\" loading=\"lazy\"\r\n loading=\"lazy\"/>\r\n </div>\r\n <div class=\"col-lg-6 d-flex flex-column\" [simpoContentAlignment]=\"styles?.contentAlignment\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\" [buttonId]=\"button.id\" [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"showEditors\" [ngClass]=\"{'hover_effect': edit}\">\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: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px;margin-top:15px}@media only screen and (max-width: 475px){.col-10{width:100%!important}}\n"] }]
|
|
2875
2875
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
2876
2876
|
type: Input
|
|
2877
2877
|
}], index: [{
|
|
@@ -3465,7 +3465,7 @@ class UserBasicInfoComponent {
|
|
|
3465
3465
|
return this.email?.includes("@") && this.email.includes(".com") || (this.email?.length == 0);
|
|
3466
3466
|
}
|
|
3467
3467
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserBasicInfoComponent, deps: [{ token: RestService }, { token: i2$3.Router }, { token: i3.MatDialogRef }, { token: StorageServiceService }, { token: i5.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3468
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: UserBasicInfoComponent, isStandalone: true, selector: "simpo-user-basic-info", providers: [MessageService], ngImport: i0, template: "<section style=\"padding: 20px\" class=\"position-relative\">\r\n <div class=\"d-flex flex-wrap justify-content-between\">\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">First Name</div>\r\n <input type=\"text\" placeholder=\"Enter first name\" [(ngModel)]=\"firstName\" (keydown)=\"validateName($event)\">\r\n </div>\r\n <!-- <div class=\"form-control-group-3\">\r\n <div class=\"label\">Middle Name</div>\r\n <input type=\"text\" placeholder=\"Enter middle name\" [(ngModel)]=\"middleName\">\r\n </div> -->\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Last Name</div>\r\n <input type=\"text\" placeholder=\"Enter last name\" [(ngModel)]=\"lastName\" (keydown)=\"validateName($event)\">\r\n </div>\r\n\r\n <div class=\"form-control-group\" *ngIf=\"isEdit\">\r\n <div class=\"label required\">Mobile</div>\r\n <input type=\"number\" placeholder=\"Enter mobile\" [(ngModel)]=\"mobile\" disabled>\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Email</div>\r\n <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"email\">\r\n <span class=\"error-msg\" [style.visibility]=\"isEmailValid ? 'hidden' : 'visible'\">Please enter valid email</span>\r\n </div>\r\n \r\n <div class=\"form-control-group-full\">\r\n <div class=\"label\">Select Gender</div>\r\n <div class=\"d-flex align-items-center\">\r\n <img src=\"https://img.icons8.com/?size=100&id=108296&format=png&color=000000\" alt=\"\"\r\n (click)=\"gender = 'MALE'\" [ngClass]=\"{'active': gender == 'MALE' }\">\r\n <img src=\"https://img.icons8.com/?size=100&id=108295&format=png&color=000000\" alt=\"\"\r\n (click)=\"gender = 'FEMALE'\" [ngClass]=\"{'active': gender == 'FEMALE'}\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"action-btn\">\r\n <span class=\"skip-btn\" (click)=\"close()\">{{!isEdit ? 'Skip' : 'Close'}}</span>\r\n <button (click)=\"saveProfile()\">Save Profile</button>\r\n </div>\r\n</section>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>", styles: [".form-control-group,.form-control-group-3,.form-control-group-full{width:48%}:is(.form-control-group,.form-control-group-3,.form-control-group-full)>input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.label{color:#000}.form-control-group-3{width:32%!important}.form-control-group-full{width:100%}img{height:60px;width:60px;object-fit:cover;margin:0 5px;border:2px solid transparent;cursor:pointer;border-radius:50%}.active{border:2px solid #0267C1}.form-control-group{margin:10px 0}.action-btn{position:absolute;bottom:-35px;right:10px;display:flex;align-items:center;gap:20px}.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}.required:after{content:\"*\";color:tomato}.error-msg{color:tomato}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i7.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: i7.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i12.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
|
|
3468
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: UserBasicInfoComponent, isStandalone: true, selector: "simpo-user-basic-info", providers: [MessageService], ngImport: i0, template: "<section style=\"padding: 20px\" class=\"position-relative\">\r\n <div class=\"d-flex flex-wrap justify-content-between\">\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">First Name</div>\r\n <input type=\"text\" placeholder=\"Enter first name\" [(ngModel)]=\"firstName\" (keydown)=\"validateName($event)\">\r\n </div>\r\n <!-- <div class=\"form-control-group-3\">\r\n <div class=\"label\">Middle Name</div>\r\n <input type=\"text\" placeholder=\"Enter middle name\" [(ngModel)]=\"middleName\">\r\n </div> -->\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Last Name</div>\r\n <input type=\"text\" placeholder=\"Enter last name\" [(ngModel)]=\"lastName\" (keydown)=\"validateName($event)\">\r\n </div>\r\n\r\n <div class=\"form-control-group\" *ngIf=\"isEdit\">\r\n <div class=\"label required\">Mobile</div>\r\n <input type=\"number\" placeholder=\"Enter mobile\" [(ngModel)]=\"mobile\" disabled>\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Email</div>\r\n <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"email\">\r\n <span class=\"error-msg\" [style.visibility]=\"isEmailValid ? 'hidden' : 'visible'\">Please enter valid email</span>\r\n </div>\r\n \r\n <div class=\"form-control-group-full\">\r\n <div class=\"label\">Select Gender</div>\r\n <div class=\"d-flex align-items-center\">\r\n <img loading=\"lazy\" src=\"https://img.icons8.com/?size=100&id=108296&format=png&color=000000\" alt=\"\"\r\n (click)=\"gender = 'MALE'\" [ngClass]=\"{'active': gender == 'MALE' }\">\r\n <img loading=\"lazy\" src=\"https://img.icons8.com/?size=100&id=108295&format=png&color=000000\" alt=\"\"\r\n (click)=\"gender = 'FEMALE'\" [ngClass]=\"{'active': gender == 'FEMALE'}\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"action-btn\">\r\n <span class=\"skip-btn\" (click)=\"close()\">{{!isEdit ? 'Skip' : 'Close'}}</span>\r\n <button (click)=\"saveProfile()\">Save Profile</button>\r\n </div>\r\n</section>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>", styles: [".form-control-group,.form-control-group-3,.form-control-group-full{width:48%}:is(.form-control-group,.form-control-group-3,.form-control-group-full)>input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.label{color:#000}.form-control-group-3{width:32%!important}.form-control-group-full{width:100%}img{height:60px;width:60px;object-fit:cover;margin:0 5px;border:2px solid transparent;cursor:pointer;border-radius:50%}.active{border:2px solid #0267C1}.form-control-group{margin:10px 0}.action-btn{position:absolute;bottom:-35px;right:10px;display:flex;align-items:center;gap:20px}.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}.required:after{content:\"*\";color:tomato}.error-msg{color:tomato}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i7.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: i7.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i12.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
|
|
3469
3469
|
}
|
|
3470
3470
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserBasicInfoComponent, decorators: [{
|
|
3471
3471
|
type: Component,
|
|
@@ -3474,7 +3474,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
3474
3474
|
MatDialogModule,
|
|
3475
3475
|
FormsModule,
|
|
3476
3476
|
ToastModule
|
|
3477
|
-
], providers: [MessageService], template: "<section style=\"padding: 20px\" class=\"position-relative\">\r\n <div class=\"d-flex flex-wrap justify-content-between\">\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">First Name</div>\r\n <input type=\"text\" placeholder=\"Enter first name\" [(ngModel)]=\"firstName\" (keydown)=\"validateName($event)\">\r\n </div>\r\n <!-- <div class=\"form-control-group-3\">\r\n <div class=\"label\">Middle Name</div>\r\n <input type=\"text\" placeholder=\"Enter middle name\" [(ngModel)]=\"middleName\">\r\n </div> -->\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Last Name</div>\r\n <input type=\"text\" placeholder=\"Enter last name\" [(ngModel)]=\"lastName\" (keydown)=\"validateName($event)\">\r\n </div>\r\n\r\n <div class=\"form-control-group\" *ngIf=\"isEdit\">\r\n <div class=\"label required\">Mobile</div>\r\n <input type=\"number\" placeholder=\"Enter mobile\" [(ngModel)]=\"mobile\" disabled>\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Email</div>\r\n <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"email\">\r\n <span class=\"error-msg\" [style.visibility]=\"isEmailValid ? 'hidden' : 'visible'\">Please enter valid email</span>\r\n </div>\r\n \r\n <div class=\"form-control-group-full\">\r\n <div class=\"label\">Select Gender</div>\r\n <div class=\"d-flex align-items-center\">\r\n <img src=\"https://img.icons8.com/?size=100&id=108296&format=png&color=000000\" alt=\"\"\r\n (click)=\"gender = 'MALE'\" [ngClass]=\"{'active': gender == 'MALE' }\">\r\n <img src=\"https://img.icons8.com/?size=100&id=108295&format=png&color=000000\" alt=\"\"\r\n (click)=\"gender = 'FEMALE'\" [ngClass]=\"{'active': gender == 'FEMALE'}\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"action-btn\">\r\n <span class=\"skip-btn\" (click)=\"close()\">{{!isEdit ? 'Skip' : 'Close'}}</span>\r\n <button (click)=\"saveProfile()\">Save Profile</button>\r\n </div>\r\n</section>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>", styles: [".form-control-group,.form-control-group-3,.form-control-group-full{width:48%}:is(.form-control-group,.form-control-group-3,.form-control-group-full)>input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.label{color:#000}.form-control-group-3{width:32%!important}.form-control-group-full{width:100%}img{height:60px;width:60px;object-fit:cover;margin:0 5px;border:2px solid transparent;cursor:pointer;border-radius:50%}.active{border:2px solid #0267C1}.form-control-group{margin:10px 0}.action-btn{position:absolute;bottom:-35px;right:10px;display:flex;align-items:center;gap:20px}.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}.required:after{content:\"*\";color:tomato}.error-msg{color:tomato}\n"] }]
|
|
3477
|
+
], providers: [MessageService], template: "<section style=\"padding: 20px\" class=\"position-relative\">\r\n <div class=\"d-flex flex-wrap justify-content-between\">\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">First Name</div>\r\n <input type=\"text\" placeholder=\"Enter first name\" [(ngModel)]=\"firstName\" (keydown)=\"validateName($event)\">\r\n </div>\r\n <!-- <div class=\"form-control-group-3\">\r\n <div class=\"label\">Middle Name</div>\r\n <input type=\"text\" placeholder=\"Enter middle name\" [(ngModel)]=\"middleName\">\r\n </div> -->\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Last Name</div>\r\n <input type=\"text\" placeholder=\"Enter last name\" [(ngModel)]=\"lastName\" (keydown)=\"validateName($event)\">\r\n </div>\r\n\r\n <div class=\"form-control-group\" *ngIf=\"isEdit\">\r\n <div class=\"label required\">Mobile</div>\r\n <input type=\"number\" placeholder=\"Enter mobile\" [(ngModel)]=\"mobile\" disabled>\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Email</div>\r\n <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"email\">\r\n <span class=\"error-msg\" [style.visibility]=\"isEmailValid ? 'hidden' : 'visible'\">Please enter valid email</span>\r\n </div>\r\n \r\n <div class=\"form-control-group-full\">\r\n <div class=\"label\">Select Gender</div>\r\n <div class=\"d-flex align-items-center\">\r\n <img loading=\"lazy\" src=\"https://img.icons8.com/?size=100&id=108296&format=png&color=000000\" alt=\"\"\r\n (click)=\"gender = 'MALE'\" [ngClass]=\"{'active': gender == 'MALE' }\">\r\n <img loading=\"lazy\" src=\"https://img.icons8.com/?size=100&id=108295&format=png&color=000000\" alt=\"\"\r\n (click)=\"gender = 'FEMALE'\" [ngClass]=\"{'active': gender == 'FEMALE'}\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"action-btn\">\r\n <span class=\"skip-btn\" (click)=\"close()\">{{!isEdit ? 'Skip' : 'Close'}}</span>\r\n <button (click)=\"saveProfile()\">Save Profile</button>\r\n </div>\r\n</section>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>", styles: [".form-control-group,.form-control-group-3,.form-control-group-full{width:48%}:is(.form-control-group,.form-control-group-3,.form-control-group-full)>input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.label{color:#000}.form-control-group-3{width:32%!important}.form-control-group-full{width:100%}img{height:60px;width:60px;object-fit:cover;margin:0 5px;border:2px solid transparent;cursor:pointer;border-radius:50%}.active{border:2px solid #0267C1}.form-control-group{margin:10px 0}.action-btn{position:absolute;bottom:-35px;right:10px;display:flex;align-items:center;gap:20px}.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}.required:after{content:\"*\";color:tomato}.error-msg{color:tomato}\n"] }]
|
|
3478
3478
|
}], ctorParameters: () => [{ type: RestService }, { type: i2$3.Router }, { type: i3.MatDialogRef }, { type: StorageServiceService }, { type: i5.MessageService }] });
|
|
3479
3479
|
|
|
3480
3480
|
class AuthenticateUserComponent extends BaseSection {
|
|
@@ -3747,7 +3747,7 @@ class NavbarSectionComponent {
|
|
|
3747
3747
|
return false;
|
|
3748
3748
|
}
|
|
3749
3749
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: NavbarSectionComponent, deps: [{ token: EventsService }, { token: i2$3.Router }, { token: i2$3.ActivatedRoute }, { token: i3.MatDialog }, { token: i2$2.CookieService }, { token: StorageServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3750
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: NavbarSectionComponent, isStandalone: true, selector: "simpo-navbar-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n <div class=\"container-fluid position-relative \">\r\n <div class=\"w-50 left-logo-text d-flex\">\r\n <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"(click)=\"goToHome()\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"isEcommerceWebsite && screenWidth > 768\">\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <a class=\"nav-link dropdown-toggle mx-2\" href=\"#\" [id]=\"'navbarDropdownMenuLink_' + idx\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">{{ link | uppercase }}</a>\r\n <ul class=\"dropdown-menu fs-6 position-absolute\" [attr.aria-labelledby]=\"'navbarDropdownMenuLink_'+idx\">\r\n <li *ngFor=\"let value of getValues(content?.ecomlinks?.[link])\"><a class=\"dropdown-item\" (click)=\"applyFilter(value, link)\">{{value}}</a></li>\r\n </ul>\r\n <!-- <button mat-button class=\"dropdown-button d-flex\" [matMenuTriggerFor]=\"menu\" href=\"javascript:void(0)\" [id]=\"'dropdownLink_' + idx\" role=\"button\" [simpoColor]=\"simpoColor\">\r\n {{ link | uppercase }}\r\n <mat-icon>expand_more</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\" [attr.aria-labelledby]=\"'dropdownLink_'+idx\">\r\n <button mat-menu-item *ngFor=\"let value of getValues(content?.ecomlinks?.[link])\" (click)=\"applyFilter(value, link)\">{{value}}</button>\r\n </mat-menu> -->\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n <div *ngIf=\"screenWidth <= 768 && isEcommerceWebsite\" class=\"d-flex align-items-center justify-content-around\">\r\n <i class=\"fa fa-search mx-2\" aria-hidden=\"true\" (click)=\"searchProducts()\"></i>\r\n <mat-icon class=\"mx-2\" [simpoColor]=\"simpoColor\" (click)=\"goToWishlist()\">favorite_border</mat-icon>\r\n <mat-icon class=\"mx-2\" [simpoColor]=\"simpoColor\" (click)=\"goToCart()\">add_shopping_cart</mat-icon>\r\n <mat-icon class=\"mx-2\" [simpoColor]=\"simpoColor\" *ngIf=\"!profileImageUrl\" (click)=\"goToAccount()\">person_outline</mat-icon>\r\n <img [src]=\"profileImageUrl\" *ngIf=\"profileImageUrl\" style=\"height: 35px;\" (click)=\"goToAccount()\">\r\n </div>\r\n <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"simpoColor\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769\"\r\n aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n <hr>\r\n <hr>\r\n <hr>\r\n </button>\r\n </div>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n <div class=\"navbar-nav align-items-center\">\r\n <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n [bgColor]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <button class=\"button\" (click)=\"redirectTo(button?.content)\" simpoButtonDirective [scrollValue]=\"scrollValue\" [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button.styles\" [color]=\"accentColor\">{{button?.content?.label}}</button>\r\n <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth <= 768\">\r\n <div class=\"inner-height p-4\">\r\n <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex flex-column w-100\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"title-row\">\r\n <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\"\r\n *ngIf=\"content?.logo?.isImage\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n\r\n </div>\r\n <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n <div class=\"d-flex flex-column gap-4 w-100\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-4\">\r\n <div *ngIf=\"action?.display\" class=\"button-display\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></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>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <div class=\"collapse navbar-collapse position-absolute pr-0\" style=\"right: 0px;\" *ngIf=\"screenWidth > 768\">\r\n <div class=\"container-fluid justify-content-between pr-0 d-flex\" style=\"max-width: 50vw;\">\r\n <div class=\"input-group\">\r\n <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center mx-3 position-relative\" style=\"width: 60px; cursor: pointer;\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">add_shopping_cart</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n <mat-icon [simpoColor]=\"simpoColor\" *ngIf=\"!profileImageUrl\">person_outline</mat-icon>\r\n <img [src]=\"profileImageUrl\" *ngIf=\"profileImageUrl\" style=\"height: 35px; margin-top: -6px\">\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Account</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </nav>\r\n </div>\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>\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important;padding-top:10px}.right-btn{width:15%!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:-10px;right:10px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: SimpoFooterLayoutDirective, selector: "[simpoFooterLayout]", inputs: ["simpoFooterLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatMenuModule }] }); }
|
|
3750
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: NavbarSectionComponent, isStandalone: true, selector: "simpo-navbar-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n <div class=\"container-fluid position-relative \">\r\n <div class=\"w-50 left-logo-text d-flex\">\r\n <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"(click)=\"goToHome()\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"isEcommerceWebsite && screenWidth > 768\">\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <a class=\"nav-link dropdown-toggle mx-2\" href=\"#\" [id]=\"'navbarDropdownMenuLink_' + idx\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">{{ link | uppercase }}</a>\r\n <ul class=\"dropdown-menu fs-6 position-absolute\" [attr.aria-labelledby]=\"'navbarDropdownMenuLink_'+idx\">\r\n <li *ngFor=\"let value of getValues(content?.ecomlinks?.[link])\"><a class=\"dropdown-item\" (click)=\"applyFilter(value, link)\">{{value}}</a></li>\r\n </ul>\r\n <!-- <button mat-button class=\"dropdown-button d-flex\" [matMenuTriggerFor]=\"menu\" href=\"javascript:void(0)\" [id]=\"'dropdownLink_' + idx\" role=\"button\" [simpoColor]=\"simpoColor\">\r\n {{ link | uppercase }}\r\n <mat-icon>expand_more</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\" [attr.aria-labelledby]=\"'dropdownLink_'+idx\">\r\n <button mat-menu-item *ngFor=\"let value of getValues(content?.ecomlinks?.[link])\" (click)=\"applyFilter(value, link)\">{{value}}</button>\r\n </mat-menu> -->\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n <div *ngIf=\"screenWidth <= 768 && isEcommerceWebsite\" class=\"d-flex align-items-center justify-content-around\">\r\n <i class=\"fa fa-search mx-2\" aria-hidden=\"true\" (click)=\"searchProducts()\"></i>\r\n <mat-icon class=\"mx-2\" [simpoColor]=\"simpoColor\" (click)=\"goToWishlist()\">favorite_border</mat-icon>\r\n <mat-icon class=\"mx-2\" [simpoColor]=\"simpoColor\" (click)=\"goToCart()\">add_shopping_cart</mat-icon>\r\n <mat-icon class=\"mx-2\" [simpoColor]=\"simpoColor\" *ngIf=\"!profileImageUrl\" (click)=\"goToAccount()\">person_outline</mat-icon>\r\n <img loading=\"lazy\" [src]=\"profileImageUrl\" *ngIf=\"profileImageUrl\" style=\"height: 35px;\" (click)=\"goToAccount()\">\r\n </div>\r\n <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"simpoColor\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769\"\r\n aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n <hr>\r\n <hr>\r\n <hr>\r\n </button>\r\n </div>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n <div class=\"navbar-nav align-items-center\">\r\n <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n [bgColor]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <button class=\"button\" (click)=\"redirectTo(button?.content)\" simpoButtonDirective [scrollValue]=\"scrollValue\" [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button.styles\" [color]=\"accentColor\">{{button?.content?.label}}</button>\r\n <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth <= 768\">\r\n <div class=\"inner-height p-4\">\r\n <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex flex-column w-100\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"title-row\">\r\n <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\"\r\n *ngIf=\"content?.logo?.isImage\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n\r\n </div>\r\n <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n <div class=\"d-flex flex-column gap-4 w-100\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-4\">\r\n <div *ngIf=\"action?.display\" class=\"button-display\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></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>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <div class=\"collapse navbar-collapse position-absolute pr-0\" style=\"right: 0px;\" *ngIf=\"screenWidth > 768\">\r\n <div class=\"container-fluid justify-content-between pr-0 d-flex\" style=\"max-width: 50vw;\">\r\n <div class=\"input-group\">\r\n <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center mx-3 position-relative\" style=\"width: 60px; cursor: pointer;\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">add_shopping_cart</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n <mat-icon [simpoColor]=\"simpoColor\" *ngIf=\"!profileImageUrl\">person_outline</mat-icon>\r\n <img loading=\"lazy\" [src]=\"profileImageUrl\" *ngIf=\"profileImageUrl\" style=\"height: 35px; margin-top: -6px\">\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Account</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </nav>\r\n </div>\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>\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important;padding-top:10px}.right-btn{width:15%!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:-10px;right:10px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: SimpoFooterLayoutDirective, selector: "[simpoFooterLayout]", inputs: ["simpoFooterLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatMenuModule }] }); }
|
|
3751
3751
|
}
|
|
3752
3752
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: NavbarSectionComponent, decorators: [{
|
|
3753
3753
|
type: Component,
|
|
@@ -3779,7 +3779,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
3779
3779
|
ColorDirective,
|
|
3780
3780
|
MatButtonModule,
|
|
3781
3781
|
MatMenuModule
|
|
3782
|
-
], template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n <div class=\"container-fluid position-relative \">\r\n <div class=\"w-50 left-logo-text d-flex\">\r\n <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"(click)=\"goToHome()\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"isEcommerceWebsite && screenWidth > 768\">\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <a class=\"nav-link dropdown-toggle mx-2\" href=\"#\" [id]=\"'navbarDropdownMenuLink_' + idx\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">{{ link | uppercase }}</a>\r\n <ul class=\"dropdown-menu fs-6 position-absolute\" [attr.aria-labelledby]=\"'navbarDropdownMenuLink_'+idx\">\r\n <li *ngFor=\"let value of getValues(content?.ecomlinks?.[link])\"><a class=\"dropdown-item\" (click)=\"applyFilter(value, link)\">{{value}}</a></li>\r\n </ul>\r\n <!-- <button mat-button class=\"dropdown-button d-flex\" [matMenuTriggerFor]=\"menu\" href=\"javascript:void(0)\" [id]=\"'dropdownLink_' + idx\" role=\"button\" [simpoColor]=\"simpoColor\">\r\n {{ link | uppercase }}\r\n <mat-icon>expand_more</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\" [attr.aria-labelledby]=\"'dropdownLink_'+idx\">\r\n <button mat-menu-item *ngFor=\"let value of getValues(content?.ecomlinks?.[link])\" (click)=\"applyFilter(value, link)\">{{value}}</button>\r\n </mat-menu> -->\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n <div *ngIf=\"screenWidth <= 768 && isEcommerceWebsite\" class=\"d-flex align-items-center justify-content-around\">\r\n <i class=\"fa fa-search mx-2\" aria-hidden=\"true\" (click)=\"searchProducts()\"></i>\r\n <mat-icon class=\"mx-2\" [simpoColor]=\"simpoColor\" (click)=\"goToWishlist()\">favorite_border</mat-icon>\r\n <mat-icon class=\"mx-2\" [simpoColor]=\"simpoColor\" (click)=\"goToCart()\">add_shopping_cart</mat-icon>\r\n <mat-icon class=\"mx-2\" [simpoColor]=\"simpoColor\" *ngIf=\"!profileImageUrl\" (click)=\"goToAccount()\">person_outline</mat-icon>\r\n <img [src]=\"profileImageUrl\" *ngIf=\"profileImageUrl\" style=\"height: 35px;\" (click)=\"goToAccount()\">\r\n </div>\r\n <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"simpoColor\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769\"\r\n aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n <hr>\r\n <hr>\r\n <hr>\r\n </button>\r\n </div>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n <div class=\"navbar-nav align-items-center\">\r\n <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n [bgColor]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <button class=\"button\" (click)=\"redirectTo(button?.content)\" simpoButtonDirective [scrollValue]=\"scrollValue\" [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button.styles\" [color]=\"accentColor\">{{button?.content?.label}}</button>\r\n <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth <= 768\">\r\n <div class=\"inner-height p-4\">\r\n <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex flex-column w-100\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"title-row\">\r\n <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\"\r\n *ngIf=\"content?.logo?.isImage\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n\r\n </div>\r\n <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n <div class=\"d-flex flex-column gap-4 w-100\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-4\">\r\n <div *ngIf=\"action?.display\" class=\"button-display\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></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>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <div class=\"collapse navbar-collapse position-absolute pr-0\" style=\"right: 0px;\" *ngIf=\"screenWidth > 768\">\r\n <div class=\"container-fluid justify-content-between pr-0 d-flex\" style=\"max-width: 50vw;\">\r\n <div class=\"input-group\">\r\n <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center mx-3 position-relative\" style=\"width: 60px; cursor: pointer;\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">add_shopping_cart</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n <mat-icon [simpoColor]=\"simpoColor\" *ngIf=\"!profileImageUrl\">person_outline</mat-icon>\r\n <img [src]=\"profileImageUrl\" *ngIf=\"profileImageUrl\" style=\"height: 35px; margin-top: -6px\">\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Account</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </nav>\r\n </div>\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>\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important;padding-top:10px}.right-btn{width:15%!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:-10px;right:10px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}\n"] }]
|
|
3782
|
+
], template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n <div class=\"container-fluid position-relative \">\r\n <div class=\"w-50 left-logo-text d-flex\">\r\n <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"(click)=\"goToHome()\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"isEcommerceWebsite && screenWidth > 768\">\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <a class=\"nav-link dropdown-toggle mx-2\" href=\"#\" [id]=\"'navbarDropdownMenuLink_' + idx\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">{{ link | uppercase }}</a>\r\n <ul class=\"dropdown-menu fs-6 position-absolute\" [attr.aria-labelledby]=\"'navbarDropdownMenuLink_'+idx\">\r\n <li *ngFor=\"let value of getValues(content?.ecomlinks?.[link])\"><a class=\"dropdown-item\" (click)=\"applyFilter(value, link)\">{{value}}</a></li>\r\n </ul>\r\n <!-- <button mat-button class=\"dropdown-button d-flex\" [matMenuTriggerFor]=\"menu\" href=\"javascript:void(0)\" [id]=\"'dropdownLink_' + idx\" role=\"button\" [simpoColor]=\"simpoColor\">\r\n {{ link | uppercase }}\r\n <mat-icon>expand_more</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\" [attr.aria-labelledby]=\"'dropdownLink_'+idx\">\r\n <button mat-menu-item *ngFor=\"let value of getValues(content?.ecomlinks?.[link])\" (click)=\"applyFilter(value, link)\">{{value}}</button>\r\n </mat-menu> -->\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n <div *ngIf=\"screenWidth <= 768 && isEcommerceWebsite\" class=\"d-flex align-items-center justify-content-around\">\r\n <i class=\"fa fa-search mx-2\" aria-hidden=\"true\" (click)=\"searchProducts()\"></i>\r\n <mat-icon class=\"mx-2\" [simpoColor]=\"simpoColor\" (click)=\"goToWishlist()\">favorite_border</mat-icon>\r\n <mat-icon class=\"mx-2\" [simpoColor]=\"simpoColor\" (click)=\"goToCart()\">add_shopping_cart</mat-icon>\r\n <mat-icon class=\"mx-2\" [simpoColor]=\"simpoColor\" *ngIf=\"!profileImageUrl\" (click)=\"goToAccount()\">person_outline</mat-icon>\r\n <img loading=\"lazy\" [src]=\"profileImageUrl\" *ngIf=\"profileImageUrl\" style=\"height: 35px;\" (click)=\"goToAccount()\">\r\n </div>\r\n <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"simpoColor\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769\"\r\n aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n <hr>\r\n <hr>\r\n <hr>\r\n </button>\r\n </div>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n <div class=\"navbar-nav align-items-center\">\r\n <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n [bgColor]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <button class=\"button\" (click)=\"redirectTo(button?.content)\" simpoButtonDirective [scrollValue]=\"scrollValue\" [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button.styles\" [color]=\"accentColor\">{{button?.content?.label}}</button>\r\n <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth <= 768\">\r\n <div class=\"inner-height p-4\">\r\n <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex flex-column w-100\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"title-row\">\r\n <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\"\r\n *ngIf=\"content?.logo?.isImage\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n\r\n </div>\r\n <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n <div class=\"d-flex flex-column gap-4 w-100\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-4\">\r\n <div *ngIf=\"action?.display\" class=\"button-display\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></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>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <div class=\"collapse navbar-collapse position-absolute pr-0\" style=\"right: 0px;\" *ngIf=\"screenWidth > 768\">\r\n <div class=\"container-fluid justify-content-between pr-0 d-flex\" style=\"max-width: 50vw;\">\r\n <div class=\"input-group\">\r\n <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center mx-3 position-relative\" style=\"width: 60px; cursor: pointer;\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">add_shopping_cart</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n <mat-icon [simpoColor]=\"simpoColor\" *ngIf=\"!profileImageUrl\">person_outline</mat-icon>\r\n <img loading=\"lazy\" [src]=\"profileImageUrl\" *ngIf=\"profileImageUrl\" style=\"height: 35px; margin-top: -6px\">\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Account</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </nav>\r\n </div>\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>\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important;padding-top:10px}.right-btn{width:15%!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:-10px;right:10px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}\n"] }]
|
|
3783
3783
|
}], ctorParameters: () => [{ type: EventsService }, { type: i2$3.Router }, { type: i2$3.ActivatedRoute }, { type: i3.MatDialog }, { type: i2$2.CookieService }, { type: StorageServiceService }], propDecorators: { data: [{
|
|
3784
3784
|
type: Input
|
|
3785
3785
|
}], nextComponent: [{
|
|
@@ -3874,7 +3874,7 @@ class ContactUsComponent extends BaseSection {
|
|
|
3874
3874
|
return Object.hasOwn(field, "status") ? field.status : true;
|
|
3875
3875
|
}
|
|
3876
3876
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ContactUsComponent, deps: [{ token: EventsService }, { token: PLATFORM_ID }, { token: i2$4.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3877
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ContactUsComponent, isStandalone: true, selector: "simpo-contact-us", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "screenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\r\n <div *ngIf=\"content?.image?.showImage === false\" 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=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"col-12 d-flex justify-content-evenly\" style=\"gap: 3rem;\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{'align-items-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"d-flex flex-column col-5 pt-5\">\r\n <div *ngFor=\"let item of content?.inputText\" [innerHTML]=\"item.value\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" >\r\n </div>\r\n </div>\r\n <div class=\"col-5 d-flex flex-wrap\" style=\"gap: 1rem;height: fit-content;\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\" [feild]=\"feild\" [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\" *ngIf=\"canShowContactField(feild)\"></simpo-input-fields>\r\n </ng-container>\r\n <div class=\"w-100\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button }}</button>\r\n </div>\r\n <!-- <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button }}</button> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"content?.image?.showImage === true\" class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"g-5 mobile-display\" [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', 'align-items-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"col-10 col-sm-8 col-lg-6 mobile-image\" *ngIf=\"content?.image?.showImage\">\r\n <img [src]=\"content?.image?.url\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [simpoCorner]=\"styles?.corners\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n class=\"d-block mx-lg-auto img-fluid h-100\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\"\r\n loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column mobile-text\" style=\"width: 46%;\" [ngClass]=\"{'pt-5': styles?.positionLayout?.value === 'top'}\" [id]=\"data?.id\">\r\n <div class=\"d-flex flex-column\">\r\n <div *ngFor=\"let item of content?.inputText\" [innerHTML]=\"item.value\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n </div>\r\n <div class=\"d-flex flex-wrap\" style=\"gap: 1rem;height: fit-content;\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\" [feild]=\"feild\"\r\n [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\"></simpo-input-fields>\r\n </ng-container>\r\n <div class=\"w-100\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button\r\n }}</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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: [".send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.w-100{width:100%}@media only screen and (max-width: 475px){.col-12{display:flex;flex-direction:column-reverse}.pt-5{width:100%}.pt-5 div{font-size:24px}.col-5{width:100%}.send-btn{margin-left:0}.mobile-display{display:flex!important;flex-direction:column!important}.mobile-image{width:100%!important;padding:0!important}.mobile-text{width:100%!important;margin-top:3rem}.mobile-text .d-flex div{font-size:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: InputFieldsComponent, selector: "simpo-input-fields", inputs: ["feild", "opacity", "bgColor", "sectionId"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type:
|
|
3877
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ContactUsComponent, isStandalone: true, selector: "simpo-contact-us", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "screenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\r\n <div *ngIf=\"content?.image?.showImage === false\" 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=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"col-12 d-flex justify-content-evenly\" style=\"gap: 3rem;\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{'align-items-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"d-flex flex-column col-5 pt-5\">\r\n <div *ngFor=\"let item of content?.inputText\" [innerHTML]=\"item.value\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" >\r\n </div>\r\n </div>\r\n <div class=\"col-5 d-flex flex-wrap\" style=\"gap: 1rem;height: fit-content;\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\" [feild]=\"feild\" [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\" *ngIf=\"canShowContactField(feild)\"></simpo-input-fields>\r\n </ng-container>\r\n <div class=\"w-100\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button }}</button>\r\n </div>\r\n <!-- <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button }}</button> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"content?.image?.showImage === true\" class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"g-5 mobile-display\" [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', 'align-items-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"col-10 col-sm-8 col-lg-6 mobile-image\" *ngIf=\"content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [simpoCorner]=\"styles?.corners\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n class=\"d-block mx-lg-auto img-fluid h-100\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\"\r\n loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column mobile-text\" style=\"width: 46%;\" [ngClass]=\"{'pt-5': styles?.positionLayout?.value === 'top'}\" [id]=\"data?.id\">\r\n <div class=\"d-flex flex-column\">\r\n <div *ngFor=\"let item of content?.inputText\" [innerHTML]=\"item.value\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n </div>\r\n <div class=\"d-flex flex-wrap\" style=\"gap: 1rem;height: fit-content;\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\" [feild]=\"feild\"\r\n [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\"></simpo-input-fields>\r\n </ng-container>\r\n <div class=\"w-100\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button\r\n }}</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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: [".send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.w-100{width:100%}@media only screen and (max-width: 475px){.col-12{display:flex;flex-direction:column-reverse}.pt-5{width:100%}.pt-5 div{font-size:24px}.col-5{width:100%}.send-btn{margin-left:0}.mobile-display{display:flex!important;flex-direction:column!important}.mobile-image{width:100%!important;padding:0!important}.mobile-text{width:100%!important;margin-top:3rem}.mobile-text .d-flex div{font-size:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: InputFieldsComponent, selector: "simpo-input-fields", inputs: ["feild", "opacity", "bgColor", "sectionId"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type:
|
|
3878
3878
|
//directive
|
|
3879
3879
|
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: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { 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: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "ngmodule", type: MatSnackBarModule }] }); }
|
|
3880
3880
|
}
|
|
@@ -3906,7 +3906,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
3906
3906
|
ObjectPositionDirective,
|
|
3907
3907
|
ButtonDirectiveDirective,
|
|
3908
3908
|
MatSnackBarModule
|
|
3909
|
-
], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\r\n <div *ngIf=\"content?.image?.showImage === false\" 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=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"col-12 d-flex justify-content-evenly\" style=\"gap: 3rem;\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{'align-items-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"d-flex flex-column col-5 pt-5\">\r\n <div *ngFor=\"let item of content?.inputText\" [innerHTML]=\"item.value\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" >\r\n </div>\r\n </div>\r\n <div class=\"col-5 d-flex flex-wrap\" style=\"gap: 1rem;height: fit-content;\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\" [feild]=\"feild\" [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\" *ngIf=\"canShowContactField(feild)\"></simpo-input-fields>\r\n </ng-container>\r\n <div class=\"w-100\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button }}</button>\r\n </div>\r\n <!-- <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button }}</button> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"content?.image?.showImage === true\" class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"g-5 mobile-display\" [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', 'align-items-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"col-10 col-sm-8 col-lg-6 mobile-image\" *ngIf=\"content?.image?.showImage\">\r\n <img [src]=\"content?.image?.url\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [simpoCorner]=\"styles?.corners\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n class=\"d-block mx-lg-auto img-fluid h-100\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\"\r\n loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column mobile-text\" style=\"width: 46%;\" [ngClass]=\"{'pt-5': styles?.positionLayout?.value === 'top'}\" [id]=\"data?.id\">\r\n <div class=\"d-flex flex-column\">\r\n <div *ngFor=\"let item of content?.inputText\" [innerHTML]=\"item.value\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n </div>\r\n <div class=\"d-flex flex-wrap\" style=\"gap: 1rem;height: fit-content;\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\" [feild]=\"feild\"\r\n [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\"></simpo-input-fields>\r\n </ng-container>\r\n <div class=\"w-100\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button\r\n }}</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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: [".send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.w-100{width:100%}@media only screen and (max-width: 475px){.col-12{display:flex;flex-direction:column-reverse}.pt-5{width:100%}.pt-5 div{font-size:24px}.col-5{width:100%}.send-btn{margin-left:0}.mobile-display{display:flex!important;flex-direction:column!important}.mobile-image{width:100%!important;padding:0!important}.mobile-text{width:100%!important;margin-top:3rem}.mobile-text .d-flex div{font-size:24px}}\n"] }]
|
|
3909
|
+
], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\r\n <div *ngIf=\"content?.image?.showImage === false\" 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=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"col-12 d-flex justify-content-evenly\" style=\"gap: 3rem;\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{'align-items-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"d-flex flex-column col-5 pt-5\">\r\n <div *ngFor=\"let item of content?.inputText\" [innerHTML]=\"item.value\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" >\r\n </div>\r\n </div>\r\n <div class=\"col-5 d-flex flex-wrap\" style=\"gap: 1rem;height: fit-content;\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\" [feild]=\"feild\" [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\" *ngIf=\"canShowContactField(feild)\"></simpo-input-fields>\r\n </ng-container>\r\n <div class=\"w-100\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button }}</button>\r\n </div>\r\n <!-- <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button }}</button> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"content?.image?.showImage === true\" class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"g-5 mobile-display\" [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', 'align-items-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"col-10 col-sm-8 col-lg-6 mobile-image\" *ngIf=\"content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [simpoCorner]=\"styles?.corners\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n class=\"d-block mx-lg-auto img-fluid h-100\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\"\r\n loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column mobile-text\" style=\"width: 46%;\" [ngClass]=\"{'pt-5': styles?.positionLayout?.value === 'top'}\" [id]=\"data?.id\">\r\n <div class=\"d-flex flex-column\">\r\n <div *ngFor=\"let item of content?.inputText\" [innerHTML]=\"item.value\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n </div>\r\n <div class=\"d-flex flex-wrap\" style=\"gap: 1rem;height: fit-content;\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\" [feild]=\"feild\"\r\n [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\"></simpo-input-fields>\r\n </ng-container>\r\n <div class=\"w-100\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button\r\n }}</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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: [".send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.w-100{width:100%}@media only screen and (max-width: 475px){.col-12{display:flex;flex-direction:column-reverse}.pt-5{width:100%}.pt-5 div{font-size:24px}.col-5{width:100%}.send-btn{margin-left:0}.mobile-display{display:flex!important;flex-direction:column!important}.mobile-image{width:100%!important;padding:0!important}.mobile-text{width:100%!important;margin-top:3rem}.mobile-text .d-flex div{font-size:24px}}\n"] }]
|
|
3910
3910
|
}], ctorParameters: () => [{ type: EventsService }, { type: Object, decorators: [{
|
|
3911
3911
|
type: Inject,
|
|
3912
3912
|
args: [PLATFORM_ID]
|
|
@@ -3957,7 +3957,7 @@ class BannerGridSectionComponent extends BaseSection {
|
|
|
3957
3957
|
}, 100);
|
|
3958
3958
|
}
|
|
3959
3959
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: BannerGridSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3960
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: BannerGridSectionComponent, isStandalone: true, selector: "simpo-banner-grid-section", inputs: { data: "data", edit: "edit", delete: "delete", index: "index" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [ngClass]=\"{'mergeNavbar': canMergeNavbar}\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\r\n <div class=\"px-5 py-4\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\">\r\n <div class=\"d-flex justify-content-between gap-5 align-items-center total-section\"[id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'right' || styles?.positionLayout?.value === 'left' }\">\r\n <div class=\"image-section\" *ngIf=\"content?.listItem?.data?.length === 3\" [ngClass]=\"{'image-position' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\">\r\n <div [id]=\"data?.id\" [simpoImageDirective]=\"styles?.image\" [ngClass]=\"{'images-top' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\">\r\n <img [src]=\"listItems[0]?.image.url\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" class=\"img\" [ngClass]=\"{'image-width-top' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\"\r\n [simpoImageDirective]=\"styles?.image\" [alt]=\"listItems[0]?.image.altText\"\r\n [class]=\"data?.id+(listItems[0]?.image.id || '')\" [simpoObjectPosition]=\"listItems[0]?.image.position\"\r\n loading=\"lazy\">\r\n </div>\r\n <div [ngClass]=\"{'images' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\">\r\n <div [id]=\"data?.id\" [simpoImageDirective]=\"styles?.image\" class=\"d-flex justify-content-between mt-4\">\r\n <img *ngFor=\"let item of listItems.slice(1); let i = index\" [src]=\"item?.image.url\" [id]=\"data?.id\" [ngClass]=\"{'image-width' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\"\r\n [alt]=\"item?.image.altText\" [simpoCorner]=\"styles?.corners\" [simpoImageDirective]=\"styles?.image\"\r\n [class]=\"data?.id+(item?.image.id || '')\" [simpoObjectPosition]=\"item?.image.position\" class=\"img-1\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"image-section-2\" *ngIf=\"content?.listItem?.data?.length === 2\">\r\n <div [ngClass]=\"{'image-width-2' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\">\r\n <div [id]=\"data?.id\" [simpoImageDirective]=\"styles?.image\" class=\"d-flex justify-content-between mt-4\">\r\n <img *ngFor=\"let item of listItems; let i = index\" [src]=\"item?.image.url\" [id]=\"data?.id\"\r\n [ngClass]=\"{'images-width-2' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\"\r\n [alt]=\"item?.image.altText\" [simpoCorner]=\"styles?.corners\" [simpoImageDirective]=\"styles?.image\"\r\n [class]=\"data?.id+(item?.image.id || '')\" [simpoObjectPosition]=\"item?.image.position\" class=\"img-1\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"image-section-3\" *ngIf=\"content?.listItem?.data?.length === 1\" [ngClass]=\"{'image-width-3' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\">\r\n <div>\r\n <div [id]=\"data?.id\" [simpoImageDirective]=\"styles?.image\" class=\"d-flex justify-content-between mt-4\">\r\n <img *ngFor=\"let item of listItems; let i = index\" [src]=\"item?.image.url\" [id]=\"data?.id\"\r\n [ngClass]=\"{'images-width-3' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\"\r\n [alt]=\"item?.image.altText\" [simpoCorner]=\"styles?.corners\" [simpoImageDirective]=\"styles?.image\"\r\n [class]=\"data?.id+(item?.image.id || '')\" [simpoObjectPosition]=\"item?.image.position\" class=\"image-1\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\" [id]=\"data?.id\" [ngClass]=\"{'col-lg-12' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\"\r\n [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let text of content?.inputText\">\r\n <div [innerHTML]=\"text.value\" [ngClass]=\"text.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <div class=\"button-section d-flex mt-4\" *ngIf=\"!data?.action?.hasOwnProperty('display') || data?.action?.display\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\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\" [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\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.float-none{float:none}.image-section{display:flex;flex-direction:column;align-items:center}.image-section .d-flex{gap:10px}.img{width:100%;height:auto}.img-1{width:48%;height:auto}.image-section-2{display:flex;align-items:center}.image-section-2 .d-flex{gap:10px}.image-1{width:100%}.image-position{display:flex;flex-direction:row;width:100%}.image-width{width:100%;margin-right:5px}.images{width:33%}.images-top{width:33%;margin-right:15px}.image-width-top{width:100%;height:100%;margin-top:17px;margin-right:15px}.col-lg-12{width:100%!important}.total-section{min-height:calc(50vh + -0px)!important;height:auto}.image-width-2{width:50%}.images-width-2{width:100%}.image-width-3,.images-width-3{width:100%;height:450px}.button-section{gap:10px}@media only screen and (max-width: 475px){.total-section{height:auto;flex-direction:column}.py-4{padding:1rem!important}.body-large{font-size:16px;line-height:21px}.image-position{overflow-y:scroll}.images-top,.images{width:100%}.image-width,.image-width-top{height:450px;width:300px;margin-right:2px}.image-section-2{display:flex;align-items:center;overflow-y:scroll!important;width:100%}.images-width-2{width:310px;height:450px}.image-width-2{width:100%}}.mergeNavbar{margin-top:-175px;padding-top:175px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }] }); }
|
|
3960
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: BannerGridSectionComponent, isStandalone: true, selector: "simpo-banner-grid-section", inputs: { data: "data", edit: "edit", delete: "delete", index: "index" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [ngClass]=\"{'mergeNavbar': canMergeNavbar}\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\r\n <div class=\"px-5 py-4\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\">\r\n <div class=\"d-flex justify-content-between gap-5 align-items-center total-section\"[id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'right' || styles?.positionLayout?.value === 'left' }\">\r\n <div class=\"image-section\" *ngIf=\"content?.listItem?.data?.length === 3\" [ngClass]=\"{'image-position' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\">\r\n <div [id]=\"data?.id\" [simpoImageDirective]=\"styles?.image\" [ngClass]=\"{'images-top' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\">\r\n <img loading=\"lazy\" [src]=\"listItems[0]?.image.url\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" class=\"img\" [ngClass]=\"{'image-width-top' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\"\r\n [simpoImageDirective]=\"styles?.image\" [alt]=\"listItems[0]?.image.altText\"\r\n [class]=\"data?.id+(listItems[0]?.image.id || '')\" [simpoObjectPosition]=\"listItems[0]?.image.position\"\r\n loading=\"lazy\">\r\n </div>\r\n <div [ngClass]=\"{'images' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\">\r\n <div [id]=\"data?.id\" [simpoImageDirective]=\"styles?.image\" class=\"d-flex justify-content-between mt-4\">\r\n <img loading=\"lazy\" *ngFor=\"let item of listItems.slice(1); let i = index\" [src]=\"item?.image.url\" [id]=\"data?.id\" [ngClass]=\"{'image-width' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\"\r\n [alt]=\"item?.image.altText\" [simpoCorner]=\"styles?.corners\" [simpoImageDirective]=\"styles?.image\"\r\n [class]=\"data?.id+(item?.image.id || '')\" [simpoObjectPosition]=\"item?.image.position\" class=\"img-1\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"image-section-2\" *ngIf=\"content?.listItem?.data?.length === 2\">\r\n <div [ngClass]=\"{'image-width-2' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\">\r\n <div [id]=\"data?.id\" [simpoImageDirective]=\"styles?.image\" class=\"d-flex justify-content-between mt-4\">\r\n <img loading=\"lazy\" *ngFor=\"let item of listItems; let i = index\" [src]=\"item?.image.url\" [id]=\"data?.id\"\r\n [ngClass]=\"{'images-width-2' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\"\r\n [alt]=\"item?.image.altText\" [simpoCorner]=\"styles?.corners\" [simpoImageDirective]=\"styles?.image\"\r\n [class]=\"data?.id+(item?.image.id || '')\" [simpoObjectPosition]=\"item?.image.position\" class=\"img-1\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"image-section-3\" *ngIf=\"content?.listItem?.data?.length === 1\" [ngClass]=\"{'image-width-3' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\">\r\n <div>\r\n <div [id]=\"data?.id\" [simpoImageDirective]=\"styles?.image\" class=\"d-flex justify-content-between mt-4\">\r\n <img loading=\"lazy\" *ngFor=\"let item of listItems; let i = index\" [src]=\"item?.image.url\" [id]=\"data?.id\"\r\n [ngClass]=\"{'images-width-3' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\"\r\n [alt]=\"item?.image.altText\" [simpoCorner]=\"styles?.corners\" [simpoImageDirective]=\"styles?.image\"\r\n [class]=\"data?.id+(item?.image.id || '')\" [simpoObjectPosition]=\"item?.image.position\" class=\"image-1\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\" [id]=\"data?.id\" [ngClass]=\"{'col-lg-12' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\"\r\n [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let text of content?.inputText\">\r\n <div [innerHTML]=\"text.value\" [ngClass]=\"text.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <div class=\"button-section d-flex mt-4\" *ngIf=\"!data?.action?.hasOwnProperty('display') || data?.action?.display\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\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\" [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\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.float-none{float:none}.image-section{display:flex;flex-direction:column;align-items:center}.image-section .d-flex{gap:10px}.img{width:100%;height:auto}.img-1{width:48%;height:auto}.image-section-2{display:flex;align-items:center}.image-section-2 .d-flex{gap:10px}.image-1{width:100%}.image-position{display:flex;flex-direction:row;width:100%}.image-width{width:100%;margin-right:5px}.images{width:33%}.images-top{width:33%;margin-right:15px}.image-width-top{width:100%;height:100%;margin-top:17px;margin-right:15px}.col-lg-12{width:100%!important}.total-section{min-height:calc(50vh + -0px)!important;height:auto}.image-width-2{width:50%}.images-width-2{width:100%}.image-width-3,.images-width-3{width:100%;height:450px}.button-section{gap:10px}@media only screen and (max-width: 475px){.total-section{height:auto;flex-direction:column}.py-4{padding:1rem!important}.body-large{font-size:16px;line-height:21px}.image-position{overflow-y:scroll}.images-top,.images{width:100%}.image-width,.image-width-top{height:450px;width:300px;margin-right:2px}.image-section-2{display:flex;align-items:center;overflow-y:scroll!important;width:100%}.images-width-2{width:310px;height:450px}.image-width-2{width:100%}}.mergeNavbar{margin-top:-175px;padding-top:175px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }] }); }
|
|
3961
3961
|
}
|
|
3962
3962
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: BannerGridSectionComponent, decorators: [{
|
|
3963
3963
|
type: Component,
|
|
@@ -3977,7 +3977,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
3977
3977
|
ObjectPositionDirective,
|
|
3978
3978
|
simpoConetenAlignmentDirective,
|
|
3979
3979
|
ContentFitDirective
|
|
3980
|
-
], template: "<section [id]=\"data?.id\" [ngClass]=\"{'mergeNavbar': canMergeNavbar}\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\r\n <div class=\"px-5 py-4\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\">\r\n <div class=\"d-flex justify-content-between gap-5 align-items-center total-section\"[id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'right' || styles?.positionLayout?.value === 'left' }\">\r\n <div class=\"image-section\" *ngIf=\"content?.listItem?.data?.length === 3\" [ngClass]=\"{'image-position' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\">\r\n <div [id]=\"data?.id\" [simpoImageDirective]=\"styles?.image\" [ngClass]=\"{'images-top' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\">\r\n <img [src]=\"listItems[0]?.image.url\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" class=\"img\" [ngClass]=\"{'image-width-top' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\"\r\n [simpoImageDirective]=\"styles?.image\" [alt]=\"listItems[0]?.image.altText\"\r\n [class]=\"data?.id+(listItems[0]?.image.id || '')\" [simpoObjectPosition]=\"listItems[0]?.image.position\"\r\n loading=\"lazy\">\r\n </div>\r\n <div [ngClass]=\"{'images' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\">\r\n <div [id]=\"data?.id\" [simpoImageDirective]=\"styles?.image\" class=\"d-flex justify-content-between mt-4\">\r\n <img *ngFor=\"let item of listItems.slice(1); let i = index\" [src]=\"item?.image.url\" [id]=\"data?.id\" [ngClass]=\"{'image-width' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\"\r\n [alt]=\"item?.image.altText\" [simpoCorner]=\"styles?.corners\" [simpoImageDirective]=\"styles?.image\"\r\n [class]=\"data?.id+(item?.image.id || '')\" [simpoObjectPosition]=\"item?.image.position\" class=\"img-1\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"image-section-2\" *ngIf=\"content?.listItem?.data?.length === 2\">\r\n <div [ngClass]=\"{'image-width-2' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\">\r\n <div [id]=\"data?.id\" [simpoImageDirective]=\"styles?.image\" class=\"d-flex justify-content-between mt-4\">\r\n <img *ngFor=\"let item of listItems; let i = index\" [src]=\"item?.image.url\" [id]=\"data?.id\"\r\n [ngClass]=\"{'images-width-2' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\"\r\n [alt]=\"item?.image.altText\" [simpoCorner]=\"styles?.corners\" [simpoImageDirective]=\"styles?.image\"\r\n [class]=\"data?.id+(item?.image.id || '')\" [simpoObjectPosition]=\"item?.image.position\" class=\"img-1\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"image-section-3\" *ngIf=\"content?.listItem?.data?.length === 1\" [ngClass]=\"{'image-width-3' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\">\r\n <div>\r\n <div [id]=\"data?.id\" [simpoImageDirective]=\"styles?.image\" class=\"d-flex justify-content-between mt-4\">\r\n <img *ngFor=\"let item of listItems; let i = index\" [src]=\"item?.image.url\" [id]=\"data?.id\"\r\n [ngClass]=\"{'images-width-3' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\"\r\n [alt]=\"item?.image.altText\" [simpoCorner]=\"styles?.corners\" [simpoImageDirective]=\"styles?.image\"\r\n [class]=\"data?.id+(item?.image.id || '')\" [simpoObjectPosition]=\"item?.image.position\" class=\"image-1\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\" [id]=\"data?.id\" [ngClass]=\"{'col-lg-12' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\"\r\n [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let text of content?.inputText\">\r\n <div [innerHTML]=\"text.value\" [ngClass]=\"text.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <div class=\"button-section d-flex mt-4\" *ngIf=\"!data?.action?.hasOwnProperty('display') || data?.action?.display\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\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\" [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\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.float-none{float:none}.image-section{display:flex;flex-direction:column;align-items:center}.image-section .d-flex{gap:10px}.img{width:100%;height:auto}.img-1{width:48%;height:auto}.image-section-2{display:flex;align-items:center}.image-section-2 .d-flex{gap:10px}.image-1{width:100%}.image-position{display:flex;flex-direction:row;width:100%}.image-width{width:100%;margin-right:5px}.images{width:33%}.images-top{width:33%;margin-right:15px}.image-width-top{width:100%;height:100%;margin-top:17px;margin-right:15px}.col-lg-12{width:100%!important}.total-section{min-height:calc(50vh + -0px)!important;height:auto}.image-width-2{width:50%}.images-width-2{width:100%}.image-width-3,.images-width-3{width:100%;height:450px}.button-section{gap:10px}@media only screen and (max-width: 475px){.total-section{height:auto;flex-direction:column}.py-4{padding:1rem!important}.body-large{font-size:16px;line-height:21px}.image-position{overflow-y:scroll}.images-top,.images{width:100%}.image-width,.image-width-top{height:450px;width:300px;margin-right:2px}.image-section-2{display:flex;align-items:center;overflow-y:scroll!important;width:100%}.images-width-2{width:310px;height:450px}.image-width-2{width:100%}}.mergeNavbar{margin-top:-175px;padding-top:175px}\n"] }]
|
|
3980
|
+
], template: "<section [id]=\"data?.id\" [ngClass]=\"{'mergeNavbar': canMergeNavbar}\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\r\n <div class=\"px-5 py-4\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\">\r\n <div class=\"d-flex justify-content-between gap-5 align-items-center total-section\"[id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'right' || styles?.positionLayout?.value === 'left' }\">\r\n <div class=\"image-section\" *ngIf=\"content?.listItem?.data?.length === 3\" [ngClass]=\"{'image-position' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\">\r\n <div [id]=\"data?.id\" [simpoImageDirective]=\"styles?.image\" [ngClass]=\"{'images-top' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\">\r\n <img loading=\"lazy\" [src]=\"listItems[0]?.image.url\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" class=\"img\" [ngClass]=\"{'image-width-top' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\"\r\n [simpoImageDirective]=\"styles?.image\" [alt]=\"listItems[0]?.image.altText\"\r\n [class]=\"data?.id+(listItems[0]?.image.id || '')\" [simpoObjectPosition]=\"listItems[0]?.image.position\"\r\n loading=\"lazy\">\r\n </div>\r\n <div [ngClass]=\"{'images' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\">\r\n <div [id]=\"data?.id\" [simpoImageDirective]=\"styles?.image\" class=\"d-flex justify-content-between mt-4\">\r\n <img loading=\"lazy\" *ngFor=\"let item of listItems.slice(1); let i = index\" [src]=\"item?.image.url\" [id]=\"data?.id\" [ngClass]=\"{'image-width' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\"\r\n [alt]=\"item?.image.altText\" [simpoCorner]=\"styles?.corners\" [simpoImageDirective]=\"styles?.image\"\r\n [class]=\"data?.id+(item?.image.id || '')\" [simpoObjectPosition]=\"item?.image.position\" class=\"img-1\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"image-section-2\" *ngIf=\"content?.listItem?.data?.length === 2\">\r\n <div [ngClass]=\"{'image-width-2' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\">\r\n <div [id]=\"data?.id\" [simpoImageDirective]=\"styles?.image\" class=\"d-flex justify-content-between mt-4\">\r\n <img loading=\"lazy\" *ngFor=\"let item of listItems; let i = index\" [src]=\"item?.image.url\" [id]=\"data?.id\"\r\n [ngClass]=\"{'images-width-2' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\"\r\n [alt]=\"item?.image.altText\" [simpoCorner]=\"styles?.corners\" [simpoImageDirective]=\"styles?.image\"\r\n [class]=\"data?.id+(item?.image.id || '')\" [simpoObjectPosition]=\"item?.image.position\" class=\"img-1\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"image-section-3\" *ngIf=\"content?.listItem?.data?.length === 1\" [ngClass]=\"{'image-width-3' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\">\r\n <div>\r\n <div [id]=\"data?.id\" [simpoImageDirective]=\"styles?.image\" class=\"d-flex justify-content-between mt-4\">\r\n <img loading=\"lazy\" *ngFor=\"let item of listItems; let i = index\" [src]=\"item?.image.url\" [id]=\"data?.id\"\r\n [ngClass]=\"{'images-width-3' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\"\r\n [alt]=\"item?.image.altText\" [simpoCorner]=\"styles?.corners\" [simpoImageDirective]=\"styles?.image\"\r\n [class]=\"data?.id+(item?.image.id || '')\" [simpoObjectPosition]=\"item?.image.position\" class=\"image-1\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\" [id]=\"data?.id\" [ngClass]=\"{'col-lg-12' : styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'}\"\r\n [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let text of content?.inputText\">\r\n <div [innerHTML]=\"text.value\" [ngClass]=\"text.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <div class=\"button-section d-flex mt-4\" *ngIf=\"!data?.action?.hasOwnProperty('display') || data?.action?.display\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\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\" [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\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.float-none{float:none}.image-section{display:flex;flex-direction:column;align-items:center}.image-section .d-flex{gap:10px}.img{width:100%;height:auto}.img-1{width:48%;height:auto}.image-section-2{display:flex;align-items:center}.image-section-2 .d-flex{gap:10px}.image-1{width:100%}.image-position{display:flex;flex-direction:row;width:100%}.image-width{width:100%;margin-right:5px}.images{width:33%}.images-top{width:33%;margin-right:15px}.image-width-top{width:100%;height:100%;margin-top:17px;margin-right:15px}.col-lg-12{width:100%!important}.total-section{min-height:calc(50vh + -0px)!important;height:auto}.image-width-2{width:50%}.images-width-2{width:100%}.image-width-3,.images-width-3{width:100%;height:450px}.button-section{gap:10px}@media only screen and (max-width: 475px){.total-section{height:auto;flex-direction:column}.py-4{padding:1rem!important}.body-large{font-size:16px;line-height:21px}.image-position{overflow-y:scroll}.images-top,.images{width:100%}.image-width,.image-width-top{height:450px;width:300px;margin-right:2px}.image-section-2{display:flex;align-items:center;overflow-y:scroll!important;width:100%}.images-width-2{width:310px;height:450px}.image-width-2{width:100%}}.mergeNavbar{margin-top:-175px;padding-top:175px}\n"] }]
|
|
3981
3981
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
3982
3982
|
type: Input
|
|
3983
3983
|
}], edit: [{
|
|
@@ -4063,7 +4063,7 @@ class PricingSectionComponent extends BaseSection {
|
|
|
4063
4063
|
}, 100);
|
|
4064
4064
|
}
|
|
4065
4065
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PricingSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4066
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PricingSectionComponent, isStandalone: true, selector: "simpo-pricing-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\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\">\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n\r\n <div class=\"pricing-options d-flex\">\r\n <div class=\"individual-options\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\" *ngFor=\"let options of content?.listItem?.data\"\r\n [ngClass]=\"{'highlighted-option': options.highlight.highlighted === true,\r\n 'individual-options-3': content?.listItem?.data?.length === 3,\r\n 'individual-options-2': content?.listItem?.data?.length === 2,\r\n 'individual-options-1': content?.listItem?.data?.length === 1\r\n }\">\r\n <img class=\"image\" *ngIf=\"content?.display?.showImage === true\"\r\n [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"options.image.position\"\r\n [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \" alt=\"\" width=\"92%\" loading=\"lazy\">\r\n <div class=\"highlight-label\" *ngIf=\"options.highlight.highlighted === true\" [ngStyle]=\"{'background-color': getTextColor()}\" [simpoColor]=\"getTextColor()\">\r\n {{options.highlight.label}}\r\n </div>\r\n <div class=\"heading-small\">{{options.inputText[0].value}}</div>\r\n <div class=\"heading-large price\">{{options.inputText[2].value}}</div>\r\n <div class=\"body-desc\">{{options.inputText[3].value}}</div>\r\n\r\n <div class=\"btn\" *ngIf=\"content?.display?.showButton === true\">\r\n <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{options?.button?.label}}</button>\r\n </div>\r\n <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">{{options.inputText[1].value}}</div>\r\n <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\r\n <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\r\n <mat-icon>check</mat-icon> {{content.content}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.pricing-options{width:100%;justify-content:center}.individual-options{border:1.5px solid;display:flex;flex-direction:column;align-items:center;padding:30px 10px;margin-top:6rem;margin-bottom:3rem;width:25%}.individual-options-3{width:32%}.individual-options-3 .btn{width:95%}.btn{width:97%}.individual-options-2{width:40%}.individual-options-1{width:75%}.individual-options-1 .btn{width:95%}.highlighted-option{margin-top:1rem;margin-bottom:0rem;height:auto;justify-content:center;border:3px solid}.highlighted-option .heading-small{padding-top:5px}.heading-small{padding:15px 5px;text-align:left;font-size:24px;width:94%}.price,.body-desc{text-align:left;width:89%}.description{line-height:30px;padding-top:11px}.content-options{padding-top:20px}.gap-15{gap:15px;padding:.75rem 0}.highlight-label{padding:5px 17px;display:flex;align-items:flex-start;flex-direction:column;width:auto;border-radius:25px;margin-top:20px;margin-right:auto;margin-left:17px;font-size:15px}.button{margin-top:2rem;margin-bottom:.25rem;font-size:17px!important;padding:.75rem 0}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options,.highlighted-option{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}.button{white-space:nowrap!important;margin-top:2.5rem;margin-bottom:2rem}.btn{width:106%}.highlight-label{margin-left:4px}.price{margin-top:10px;width:97%}.body-desc{width:97%}:is(.individual-options-1,.individual-options-2,.individual-options-3) .btn{width:100%}.image{width:100%!important}.heading-small{width:100%}.content-options{padding-top:10px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { 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: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }] }); }
|
|
4066
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PricingSectionComponent, isStandalone: true, selector: "simpo-pricing-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\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\">\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n\r\n <div class=\"pricing-options d-flex\">\r\n <div class=\"individual-options\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\" *ngFor=\"let options of content?.listItem?.data\"\r\n [ngClass]=\"{'highlighted-option': options.highlight.highlighted === true,\r\n 'individual-options-3': content?.listItem?.data?.length === 3,\r\n 'individual-options-2': content?.listItem?.data?.length === 2,\r\n 'individual-options-1': content?.listItem?.data?.length === 1\r\n }\">\r\n <img loading=\"lazy\" class=\"image\" *ngIf=\"content?.display?.showImage === true\"\r\n [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"options.image.position\"\r\n [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \" alt=\"\" width=\"92%\" loading=\"lazy\">\r\n <div class=\"highlight-label\" *ngIf=\"options.highlight.highlighted === true\" [ngStyle]=\"{'background-color': getTextColor()}\" [simpoColor]=\"getTextColor()\">\r\n {{options.highlight.label}}\r\n </div>\r\n <div class=\"heading-small\">{{options.inputText[0].value}}</div>\r\n <div class=\"heading-large price\">{{options.inputText[2].value}}</div>\r\n <div class=\"body-desc\">{{options.inputText[3].value}}</div>\r\n\r\n <div class=\"btn\" *ngIf=\"content?.display?.showButton === true\">\r\n <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{options?.button?.label}}</button>\r\n </div>\r\n <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">{{options.inputText[1].value}}</div>\r\n <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\r\n <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\r\n <mat-icon>check</mat-icon> {{content.content}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.pricing-options{width:100%;justify-content:center}.individual-options{border:1.5px solid;display:flex;flex-direction:column;align-items:center;padding:30px 10px;margin-top:6rem;margin-bottom:3rem;width:25%}.individual-options-3{width:32%}.individual-options-3 .btn{width:95%}.btn{width:97%}.individual-options-2{width:40%}.individual-options-1{width:75%}.individual-options-1 .btn{width:95%}.highlighted-option{margin-top:1rem;margin-bottom:0rem;height:auto;justify-content:center;border:3px solid}.highlighted-option .heading-small{padding-top:5px}.heading-small{padding:15px 5px;text-align:left;font-size:24px;width:94%}.price,.body-desc{text-align:left;width:89%}.description{line-height:30px;padding-top:11px}.content-options{padding-top:20px}.gap-15{gap:15px;padding:.75rem 0}.highlight-label{padding:5px 17px;display:flex;align-items:flex-start;flex-direction:column;width:auto;border-radius:25px;margin-top:20px;margin-right:auto;margin-left:17px;font-size:15px}.button{margin-top:2rem;margin-bottom:.25rem;font-size:17px!important;padding:.75rem 0}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options,.highlighted-option{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}.button{white-space:nowrap!important;margin-top:2.5rem;margin-bottom:2rem}.btn{width:106%}.highlight-label{margin-left:4px}.price{margin-top:10px;width:97%}.body-desc{width:97%}:is(.individual-options-1,.individual-options-2,.individual-options-3) .btn{width:100%}.image{width:100%!important}.heading-small{width:100%}.content-options{padding-top:10px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { 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: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }] }); }
|
|
4067
4067
|
}
|
|
4068
4068
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PricingSectionComponent, decorators: [{
|
|
4069
4069
|
type: Component,
|
|
@@ -4084,7 +4084,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
4084
4084
|
ButtonDirectiveDirective,
|
|
4085
4085
|
MatIcon, ColorDirective,
|
|
4086
4086
|
ContentTitleDirective,
|
|
4087
|
-
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\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\">\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n\r\n <div class=\"pricing-options d-flex\">\r\n <div class=\"individual-options\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\" *ngFor=\"let options of content?.listItem?.data\"\r\n [ngClass]=\"{'highlighted-option': options.highlight.highlighted === true,\r\n 'individual-options-3': content?.listItem?.data?.length === 3,\r\n 'individual-options-2': content?.listItem?.data?.length === 2,\r\n 'individual-options-1': content?.listItem?.data?.length === 1\r\n }\">\r\n <img class=\"image\" *ngIf=\"content?.display?.showImage === true\"\r\n [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"options.image.position\"\r\n [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \" alt=\"\" width=\"92%\" loading=\"lazy\">\r\n <div class=\"highlight-label\" *ngIf=\"options.highlight.highlighted === true\" [ngStyle]=\"{'background-color': getTextColor()}\" [simpoColor]=\"getTextColor()\">\r\n {{options.highlight.label}}\r\n </div>\r\n <div class=\"heading-small\">{{options.inputText[0].value}}</div>\r\n <div class=\"heading-large price\">{{options.inputText[2].value}}</div>\r\n <div class=\"body-desc\">{{options.inputText[3].value}}</div>\r\n\r\n <div class=\"btn\" *ngIf=\"content?.display?.showButton === true\">\r\n <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{options?.button?.label}}</button>\r\n </div>\r\n <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">{{options.inputText[1].value}}</div>\r\n <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\r\n <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\r\n <mat-icon>check</mat-icon> {{content.content}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.pricing-options{width:100%;justify-content:center}.individual-options{border:1.5px solid;display:flex;flex-direction:column;align-items:center;padding:30px 10px;margin-top:6rem;margin-bottom:3rem;width:25%}.individual-options-3{width:32%}.individual-options-3 .btn{width:95%}.btn{width:97%}.individual-options-2{width:40%}.individual-options-1{width:75%}.individual-options-1 .btn{width:95%}.highlighted-option{margin-top:1rem;margin-bottom:0rem;height:auto;justify-content:center;border:3px solid}.highlighted-option .heading-small{padding-top:5px}.heading-small{padding:15px 5px;text-align:left;font-size:24px;width:94%}.price,.body-desc{text-align:left;width:89%}.description{line-height:30px;padding-top:11px}.content-options{padding-top:20px}.gap-15{gap:15px;padding:.75rem 0}.highlight-label{padding:5px 17px;display:flex;align-items:flex-start;flex-direction:column;width:auto;border-radius:25px;margin-top:20px;margin-right:auto;margin-left:17px;font-size:15px}.button{margin-top:2rem;margin-bottom:.25rem;font-size:17px!important;padding:.75rem 0}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options,.highlighted-option{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}.button{white-space:nowrap!important;margin-top:2.5rem;margin-bottom:2rem}.btn{width:106%}.highlight-label{margin-left:4px}.price{margin-top:10px;width:97%}.body-desc{width:97%}:is(.individual-options-1,.individual-options-2,.individual-options-3) .btn{width:100%}.image{width:100%!important}.heading-small{width:100%}.content-options{padding-top:10px}}\n"] }]
|
|
4087
|
+
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\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\">\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n\r\n <div class=\"pricing-options d-flex\">\r\n <div class=\"individual-options\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\" *ngFor=\"let options of content?.listItem?.data\"\r\n [ngClass]=\"{'highlighted-option': options.highlight.highlighted === true,\r\n 'individual-options-3': content?.listItem?.data?.length === 3,\r\n 'individual-options-2': content?.listItem?.data?.length === 2,\r\n 'individual-options-1': content?.listItem?.data?.length === 1\r\n }\">\r\n <img loading=\"lazy\" class=\"image\" *ngIf=\"content?.display?.showImage === true\"\r\n [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"options.image.position\"\r\n [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \" alt=\"\" width=\"92%\" loading=\"lazy\">\r\n <div class=\"highlight-label\" *ngIf=\"options.highlight.highlighted === true\" [ngStyle]=\"{'background-color': getTextColor()}\" [simpoColor]=\"getTextColor()\">\r\n {{options.highlight.label}}\r\n </div>\r\n <div class=\"heading-small\">{{options.inputText[0].value}}</div>\r\n <div class=\"heading-large price\">{{options.inputText[2].value}}</div>\r\n <div class=\"body-desc\">{{options.inputText[3].value}}</div>\r\n\r\n <div class=\"btn\" *ngIf=\"content?.display?.showButton === true\">\r\n <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{options?.button?.label}}</button>\r\n </div>\r\n <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">{{options.inputText[1].value}}</div>\r\n <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\r\n <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\r\n <mat-icon>check</mat-icon> {{content.content}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.pricing-options{width:100%;justify-content:center}.individual-options{border:1.5px solid;display:flex;flex-direction:column;align-items:center;padding:30px 10px;margin-top:6rem;margin-bottom:3rem;width:25%}.individual-options-3{width:32%}.individual-options-3 .btn{width:95%}.btn{width:97%}.individual-options-2{width:40%}.individual-options-1{width:75%}.individual-options-1 .btn{width:95%}.highlighted-option{margin-top:1rem;margin-bottom:0rem;height:auto;justify-content:center;border:3px solid}.highlighted-option .heading-small{padding-top:5px}.heading-small{padding:15px 5px;text-align:left;font-size:24px;width:94%}.price,.body-desc{text-align:left;width:89%}.description{line-height:30px;padding-top:11px}.content-options{padding-top:20px}.gap-15{gap:15px;padding:.75rem 0}.highlight-label{padding:5px 17px;display:flex;align-items:flex-start;flex-direction:column;width:auto;border-radius:25px;margin-top:20px;margin-right:auto;margin-left:17px;font-size:15px}.button{margin-top:2rem;margin-bottom:.25rem;font-size:17px!important;padding:.75rem 0}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options,.highlighted-option{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}.button{white-space:nowrap!important;margin-top:2.5rem;margin-bottom:2rem}.btn{width:106%}.highlight-label{margin-left:4px}.price{margin-top:10px;width:97%}.body-desc{width:97%}:is(.individual-options-1,.individual-options-2,.individual-options-3) .btn{width:100%}.image{width:100%!important}.heading-small{width:100%}.content-options{padding-top:10px}}\n"] }]
|
|
4088
4088
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
4089
4089
|
type: Input
|
|
4090
4090
|
}], index: [{
|
|
@@ -4333,7 +4333,7 @@ class RecentBlogPostSectionComponent extends BaseSection {
|
|
|
4333
4333
|
}, 100);
|
|
4334
4334
|
}
|
|
4335
4335
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RecentBlogPostSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4336
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: RecentBlogPostSectionComponent, isStandalone: true, selector: "simpo-recent-blog-post-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", responseData: "responseData" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\r\n <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\" [ngStyle]=\"{'width' : (responseData.length || 0) == 0 ? '100%' : ''}\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n <div class=\"row\">\r\n <div (click)=\"getBlogById(content.id)\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n class=\"individual-cards\"\r\n *ngFor=\"let content of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\">\r\n <div class=\"image\">\r\n <img [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoCorner]=\"style?.corners\" class=\"d-block mx-lg-auto img-fluid h-100\" alt=\"\" *ngIf=\"content.img\"\r\n loading=\"lazy\">\r\n <img [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\r\n alt=\"\" *ngIf=\"!content.img\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium title mt-4\">\r\n {{content.postTitle}}\r\n </div>\r\n <div class=\"body-large adate mt-3\">\r\n {{content.createdTimeStamp | date:'EEEE, MMM, d, y'}}\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"responseData?.length == 0\" class=\"row\">\r\n <div class=\"no-blog-post\">\r\n <mat-icon>info</mat-icon>This section won't be visible because you have no published blog posts.\r\n </div>\r\n <div class=\"skeleton\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let i of [1,2,3]\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n <div class=\"second-section-wrapper\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '100%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px',\r\n 'display' : 'flex'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px',\r\n 'display' : 'flex'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button-section mt-3rem\">\r\n <button class=\"button\" (click)=\"openBlogList()\" simpoButtonDirective [id]=\"data?.id+(buttonData?.id || '')\"\r\n [buttonStyle]=\"buttonData?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\">{{buttonData?.content?.label}}</button>\r\n </div>\r\n\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 <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.individual-cards{padding-bottom:30px}.individual-cards img{width:100%;height:37vh}.title{font-weight:500}.mt-3rem{margin-top:3rem}@media only screen and (max-width: 475px){.cards{flex-direction:column}.individual-cards{width:100%}.title{font-size:26px}}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border-radius:10px}.second-section-wrapper{width:100%;height:auto;flex:1}.wrapper{width:100%;flex:1}.no-blog-post{color:#5185ad;text-align:left;display:flex;align-items:center;gap:15px;height:55px;background:#f6fbff;font-size:16px;font-weight:600}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i11.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
4336
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: RecentBlogPostSectionComponent, isStandalone: true, selector: "simpo-recent-blog-post-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", responseData: "responseData" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\r\n <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\" [ngStyle]=\"{'width' : (responseData.length || 0) == 0 ? '100%' : ''}\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n <div class=\"row\">\r\n <div (click)=\"getBlogById(content.id)\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n class=\"individual-cards\"\r\n *ngFor=\"let content of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\">\r\n <div class=\"image\">\r\n <img loading=\"lazy\" [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoCorner]=\"style?.corners\" class=\"d-block mx-lg-auto img-fluid h-100\" alt=\"\" *ngIf=\"content.img\"\r\n loading=\"lazy\">\r\n <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\r\n alt=\"\" *ngIf=\"!content.img\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium title mt-4\">\r\n {{content.postTitle}}\r\n </div>\r\n <div class=\"body-large adate mt-3\">\r\n {{content.createdTimeStamp | date:'EEEE, MMM, d, y'}}\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"responseData?.length == 0\" class=\"row\">\r\n <div class=\"no-blog-post\">\r\n <mat-icon>info</mat-icon>This section won't be visible because you have no published blog posts.\r\n </div>\r\n <div class=\"skeleton\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let i of [1,2,3]\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n <div class=\"second-section-wrapper\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '100%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px',\r\n 'display' : 'flex'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px',\r\n 'display' : 'flex'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button-section mt-3rem\">\r\n <button class=\"button\" (click)=\"openBlogList()\" simpoButtonDirective [id]=\"data?.id+(buttonData?.id || '')\"\r\n [buttonStyle]=\"buttonData?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\">{{buttonData?.content?.label}}</button>\r\n </div>\r\n\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 <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.individual-cards{padding-bottom:30px}.individual-cards img{width:100%;height:37vh}.title{font-weight:500}.mt-3rem{margin-top:3rem}@media only screen and (max-width: 475px){.cards{flex-direction:column}.individual-cards{width:100%}.title{font-size:26px}}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border-radius:10px}.second-section-wrapper{width:100%;height:auto;flex:1}.wrapper{width:100%;flex:1}.no-blog-post{color:#5185ad;text-align:left;display:flex;align-items:center;gap:15px;height:55px;background:#f6fbff;font-size:16px;font-weight:600}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i11.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
4337
4337
|
}
|
|
4338
4338
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RecentBlogPostSectionComponent, decorators: [{
|
|
4339
4339
|
type: Component,
|
|
@@ -4356,7 +4356,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
4356
4356
|
ColumnDirectiveDirective,
|
|
4357
4357
|
NgxSkeletonLoaderModule,
|
|
4358
4358
|
MatIcon
|
|
4359
|
-
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\r\n <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\" [ngStyle]=\"{'width' : (responseData.length || 0) == 0 ? '100%' : ''}\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n <div class=\"row\">\r\n <div (click)=\"getBlogById(content.id)\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n class=\"individual-cards\"\r\n *ngFor=\"let content of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\">\r\n <div class=\"image\">\r\n <img [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoCorner]=\"style?.corners\" class=\"d-block mx-lg-auto img-fluid h-100\" alt=\"\" *ngIf=\"content.img\"\r\n loading=\"lazy\">\r\n <img [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\r\n alt=\"\" *ngIf=\"!content.img\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium title mt-4\">\r\n {{content.postTitle}}\r\n </div>\r\n <div class=\"body-large adate mt-3\">\r\n {{content.createdTimeStamp | date:'EEEE, MMM, d, y'}}\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"responseData?.length == 0\" class=\"row\">\r\n <div class=\"no-blog-post\">\r\n <mat-icon>info</mat-icon>This section won't be visible because you have no published blog posts.\r\n </div>\r\n <div class=\"skeleton\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let i of [1,2,3]\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n <div class=\"second-section-wrapper\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '100%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px',\r\n 'display' : 'flex'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px',\r\n 'display' : 'flex'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button-section mt-3rem\">\r\n <button class=\"button\" (click)=\"openBlogList()\" simpoButtonDirective [id]=\"data?.id+(buttonData?.id || '')\"\r\n [buttonStyle]=\"buttonData?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\">{{buttonData?.content?.label}}</button>\r\n </div>\r\n\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 <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.individual-cards{padding-bottom:30px}.individual-cards img{width:100%;height:37vh}.title{font-weight:500}.mt-3rem{margin-top:3rem}@media only screen and (max-width: 475px){.cards{flex-direction:column}.individual-cards{width:100%}.title{font-size:26px}}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border-radius:10px}.second-section-wrapper{width:100%;height:auto;flex:1}.wrapper{width:100%;flex:1}.no-blog-post{color:#5185ad;text-align:left;display:flex;align-items:center;gap:15px;height:55px;background:#f6fbff;font-size:16px;font-weight:600}\n"] }]
|
|
4359
|
+
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\r\n <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\" [ngStyle]=\"{'width' : (responseData.length || 0) == 0 ? '100%' : ''}\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n <div class=\"row\">\r\n <div (click)=\"getBlogById(content.id)\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n class=\"individual-cards\"\r\n *ngFor=\"let content of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\">\r\n <div class=\"image\">\r\n <img loading=\"lazy\" [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoCorner]=\"style?.corners\" class=\"d-block mx-lg-auto img-fluid h-100\" alt=\"\" *ngIf=\"content.img\"\r\n loading=\"lazy\">\r\n <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\r\n alt=\"\" *ngIf=\"!content.img\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium title mt-4\">\r\n {{content.postTitle}}\r\n </div>\r\n <div class=\"body-large adate mt-3\">\r\n {{content.createdTimeStamp | date:'EEEE, MMM, d, y'}}\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"responseData?.length == 0\" class=\"row\">\r\n <div class=\"no-blog-post\">\r\n <mat-icon>info</mat-icon>This section won't be visible because you have no published blog posts.\r\n </div>\r\n <div class=\"skeleton\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let i of [1,2,3]\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n <div class=\"second-section-wrapper\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '100%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px',\r\n 'display' : 'flex'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px',\r\n 'display' : 'flex'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button-section mt-3rem\">\r\n <button class=\"button\" (click)=\"openBlogList()\" simpoButtonDirective [id]=\"data?.id+(buttonData?.id || '')\"\r\n [buttonStyle]=\"buttonData?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\">{{buttonData?.content?.label}}</button>\r\n </div>\r\n\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 <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.individual-cards{padding-bottom:30px}.individual-cards img{width:100%;height:37vh}.title{font-weight:500}.mt-3rem{margin-top:3rem}@media only screen and (max-width: 475px){.cards{flex-direction:column}.individual-cards{width:100%}.title{font-size:26px}}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border-radius:10px}.second-section-wrapper{width:100%;height:auto;flex:1}.wrapper{width:100%;flex:1}.no-blog-post{color:#5185ad;text-align:left;display:flex;align-items:center;gap:15px;height:55px;background:#f6fbff;font-size:16px;font-weight:600}\n"] }]
|
|
4360
4360
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
4361
4361
|
type: Input
|
|
4362
4362
|
}], index: [{
|
|
@@ -4395,7 +4395,7 @@ class BlogListComponent extends BaseSection {
|
|
|
4395
4395
|
}, 100);
|
|
4396
4396
|
}
|
|
4397
4397
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: BlogListComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4398
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: BlogListComponent, isStandalone: true, selector: "simpo-blog-list", inputs: { responseData: "responseData", index: "index", edit: "edit", data: "data" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" class=\"total-container\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" *ngIf=\"(responseData?.length || 0) > 0;else elseBlock\" (click)=\"editSection()\">\r\n <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"container-fluid\">\r\n <div class=\"row\">\r\n <div [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let content of responseData\">\r\n <div class=\"cards\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\">\r\n <img [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n alt=\"\" *ngIf=\"content.img\"\r\n loading=\"lazy\">\r\n <img [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\" alt=\"\" *ngIf=\"!content.img\"\r\n loading=\"lazy\">\r\n <div class=\"p-30\">\r\n <div class=\"heading-medium title mt-4\" *ngIf=\"blogContent?.display?.showHeading\">\r\n {{content.postTitle}}\r\n </div>\r\n <ng-container>\r\n <div class=\"body-large mt-4\" *ngIf=\"blogContent?.display?.showContent\">\r\n {{ content.postSummary.length > 250 ? content.postSummary.substring(0, 250) + '...' :\r\n content.postSummary }}\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"authors\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n <div>\r\n <mat-icon>person</mat-icon> <span class=\"body-large\">{{content?.author?.name}}</span>\r\n </div>\r\n <div class=\"calendar_today\">\r\n <mat-icon>calendar_today</mat-icon> <span class=\"body-large\">{{content.createdTimeStamp |\r\n date:'EEEE, MMM, d, y'}}</span>\r\n </div>\r\n </div>\r\n <div class=\"button heading-large\" (click)=\"getBlogById(content.id)\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n Read More <mat-icon>arrow_right_alt</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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</section>\r\n<ng-template #elseBlock>\r\n <div class=\"no-blog-text heading-medium\">Sorry there are no blog posts.</div>\r\n</ng-template>\r\n", styles: [".cards{box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.cards img{width:100%;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.p-30{padding:30px 15px 0}.authors{display:flex;gap:35px;margin-top:40px}.authors div{display:flex}.authors .calendar_today{align-items:center}.authors .calendar_today mat-icon{font-size:20px}.button{font-size:18px;display:flex;align-items:center;gap:10px;cursor:pointer}.mt-20{margin-top:20px}.total-container{position:relative;height:auto}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.no-blog-text{font-size:24px;line-height:36px;height:40vh;display:flex;align-items:center;justify-content:center}.justify-content-right{justify-content:right}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
4398
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: BlogListComponent, isStandalone: true, selector: "simpo-blog-list", inputs: { responseData: "responseData", index: "index", edit: "edit", data: "data" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" class=\"total-container\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" *ngIf=\"(responseData?.length || 0) > 0;else elseBlock\" (click)=\"editSection()\">\r\n <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"container-fluid\">\r\n <div class=\"row\">\r\n <div [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let content of responseData\">\r\n <div class=\"cards\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\">\r\n <img loading=\"lazy\" [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n alt=\"\" *ngIf=\"content.img\"\r\n loading=\"lazy\">\r\n <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\" alt=\"\" *ngIf=\"!content.img\"\r\n loading=\"lazy\">\r\n <div class=\"p-30\">\r\n <div class=\"heading-medium title mt-4\" *ngIf=\"blogContent?.display?.showHeading\">\r\n {{content.postTitle}}\r\n </div>\r\n <ng-container>\r\n <div class=\"body-large mt-4\" *ngIf=\"blogContent?.display?.showContent\">\r\n {{ content.postSummary.length > 250 ? content.postSummary.substring(0, 250) + '...' :\r\n content.postSummary }}\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"authors\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n <div>\r\n <mat-icon>person</mat-icon> <span class=\"body-large\">{{content?.author?.name}}</span>\r\n </div>\r\n <div class=\"calendar_today\">\r\n <mat-icon>calendar_today</mat-icon> <span class=\"body-large\">{{content.createdTimeStamp |\r\n date:'EEEE, MMM, d, y'}}</span>\r\n </div>\r\n </div>\r\n <div class=\"button heading-large\" (click)=\"getBlogById(content.id)\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n Read More <mat-icon>arrow_right_alt</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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</section>\r\n<ng-template #elseBlock>\r\n <div class=\"no-blog-text heading-medium\">Sorry there are no blog posts.</div>\r\n</ng-template>\r\n", styles: [".cards{box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.cards img{width:100%;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.p-30{padding:30px 15px 0}.authors{display:flex;gap:35px;margin-top:40px}.authors div{display:flex}.authors .calendar_today{align-items:center}.authors .calendar_today mat-icon{font-size:20px}.button{font-size:18px;display:flex;align-items:center;gap:10px;cursor:pointer}.mt-20{margin-top:20px}.total-container{position:relative;height:auto}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.no-blog-text{font-size:24px;line-height:36px;height:40vh;display:flex;align-items:center;justify-content:center}.justify-content-right{justify-content:right}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
4399
4399
|
}
|
|
4400
4400
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: BlogListComponent, decorators: [{
|
|
4401
4401
|
type: Component,
|
|
@@ -4412,7 +4412,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
4412
4412
|
HoverDirective,
|
|
4413
4413
|
HoverElementsComponent,
|
|
4414
4414
|
MatIcon
|
|
4415
|
-
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" class=\"total-container\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" *ngIf=\"(responseData?.length || 0) > 0;else elseBlock\" (click)=\"editSection()\">\r\n <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"container-fluid\">\r\n <div class=\"row\">\r\n <div [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let content of responseData\">\r\n <div class=\"cards\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\">\r\n <img [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n alt=\"\" *ngIf=\"content.img\"\r\n loading=\"lazy\">\r\n <img [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\" alt=\"\" *ngIf=\"!content.img\"\r\n loading=\"lazy\">\r\n <div class=\"p-30\">\r\n <div class=\"heading-medium title mt-4\" *ngIf=\"blogContent?.display?.showHeading\">\r\n {{content.postTitle}}\r\n </div>\r\n <ng-container>\r\n <div class=\"body-large mt-4\" *ngIf=\"blogContent?.display?.showContent\">\r\n {{ content.postSummary.length > 250 ? content.postSummary.substring(0, 250) + '...' :\r\n content.postSummary }}\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"authors\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n <div>\r\n <mat-icon>person</mat-icon> <span class=\"body-large\">{{content?.author?.name}}</span>\r\n </div>\r\n <div class=\"calendar_today\">\r\n <mat-icon>calendar_today</mat-icon> <span class=\"body-large\">{{content.createdTimeStamp |\r\n date:'EEEE, MMM, d, y'}}</span>\r\n </div>\r\n </div>\r\n <div class=\"button heading-large\" (click)=\"getBlogById(content.id)\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n Read More <mat-icon>arrow_right_alt</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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</section>\r\n<ng-template #elseBlock>\r\n <div class=\"no-blog-text heading-medium\">Sorry there are no blog posts.</div>\r\n</ng-template>\r\n", styles: [".cards{box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.cards img{width:100%;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.p-30{padding:30px 15px 0}.authors{display:flex;gap:35px;margin-top:40px}.authors div{display:flex}.authors .calendar_today{align-items:center}.authors .calendar_today mat-icon{font-size:20px}.button{font-size:18px;display:flex;align-items:center;gap:10px;cursor:pointer}.mt-20{margin-top:20px}.total-container{position:relative;height:auto}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.no-blog-text{font-size:24px;line-height:36px;height:40vh;display:flex;align-items:center;justify-content:center}.justify-content-right{justify-content:right}\n"] }]
|
|
4415
|
+
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" class=\"total-container\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" *ngIf=\"(responseData?.length || 0) > 0;else elseBlock\" (click)=\"editSection()\">\r\n <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"container-fluid\">\r\n <div class=\"row\">\r\n <div [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let content of responseData\">\r\n <div class=\"cards\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\">\r\n <img loading=\"lazy\" [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n alt=\"\" *ngIf=\"content.img\"\r\n loading=\"lazy\">\r\n <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\" alt=\"\" *ngIf=\"!content.img\"\r\n loading=\"lazy\">\r\n <div class=\"p-30\">\r\n <div class=\"heading-medium title mt-4\" *ngIf=\"blogContent?.display?.showHeading\">\r\n {{content.postTitle}}\r\n </div>\r\n <ng-container>\r\n <div class=\"body-large mt-4\" *ngIf=\"blogContent?.display?.showContent\">\r\n {{ content.postSummary.length > 250 ? content.postSummary.substring(0, 250) + '...' :\r\n content.postSummary }}\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"authors\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n <div>\r\n <mat-icon>person</mat-icon> <span class=\"body-large\">{{content?.author?.name}}</span>\r\n </div>\r\n <div class=\"calendar_today\">\r\n <mat-icon>calendar_today</mat-icon> <span class=\"body-large\">{{content.createdTimeStamp |\r\n date:'EEEE, MMM, d, y'}}</span>\r\n </div>\r\n </div>\r\n <div class=\"button heading-large\" (click)=\"getBlogById(content.id)\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n Read More <mat-icon>arrow_right_alt</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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</section>\r\n<ng-template #elseBlock>\r\n <div class=\"no-blog-text heading-medium\">Sorry there are no blog posts.</div>\r\n</ng-template>\r\n", styles: [".cards{box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.cards img{width:100%;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.p-30{padding:30px 15px 0}.authors{display:flex;gap:35px;margin-top:40px}.authors div{display:flex}.authors .calendar_today{align-items:center}.authors .calendar_today mat-icon{font-size:20px}.button{font-size:18px;display:flex;align-items:center;gap:10px;cursor:pointer}.mt-20{margin-top:20px}.total-container{position:relative;height:auto}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.no-blog-text{font-size:24px;line-height:36px;height:40vh;display:flex;align-items:center;justify-content:center}.justify-content-right{justify-content:right}\n"] }]
|
|
4416
4416
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { responseData: [{
|
|
4417
4417
|
type: Input
|
|
4418
4418
|
}], index: [{
|
|
@@ -4433,11 +4433,11 @@ class ViewBlogComponent {
|
|
|
4433
4433
|
// this._eventService.toggleEditorEvent.emit(false);
|
|
4434
4434
|
}
|
|
4435
4435
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ViewBlogComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4436
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ViewBlogComponent, isStandalone: true, selector: "simpo-view-blog", inputs: { responseData: "responseData" }, ngImport: i0, template: "<section class=\"main-section\">\r\n <div class=\"blog-details\">\r\n <h1 class=\"blog-title\">{{responseData.postTitle}}</h1>\r\n <div style=\"margin-top: 20px;\">\r\n <ng-container *ngFor=\"let item of responseData?.blocks\">\r\n <div *ngIf=\"item.type=='header'\">\r\n <h1 *ngIf=\"item.data.level==1\" [innerHTML]=\"item.data.text\"></h1>\r\n <h2 *ngIf=\"item.data.level==2\" [innerHTML]=\"item.data.text\"></h2>\r\n <h3 *ngIf=\"item.data.level==3\" [innerHTML]=\"item.data.text\"></h3>\r\n <h4 *ngIf=\"item.data.level==4\" [innerHTML]=\"item.data.text\"></h4>\r\n <h5 *ngIf=\"item.data.level==5\" [innerHTML]=\"item.data.text\"></h5>\r\n <h6 *ngIf=\"item.data.level==6\" [innerHTML]=\"item.data.text\"></h6>\r\n </div>\r\n <div *ngIf=\"item.type=='paragraph'\">\r\n <p class=\"inner-text\" [innerHTML]=\"item.data.text\"></p>\r\n </div>\r\n <div *ngIf=\"item.type=='list'\">\r\n <div *ngIf=\"item.type=='list'\">\r\n <div *ngIf=\"item.data.style=='ordered'\">\r\n <ol>\r\n <ng-container *ngFor=\"let list of item.data.items\">\r\n <li>{{ list }}</li>\r\n </ng-container>\r\n </ol>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"item.type=='delimiter'\" class=\"ce-delimiter\">\r\n </div>\r\n <div *ngIf=\"item.type=='image'\" class=\"image-container\">\r\n <img [src]=\"item.data.file.url\" alt=\"\" loading=\"lazy\">\r\n </div>\r\n <div *ngIf=\"item.type=='table'\">\r\n\r\n <table>\r\n <ng-container *ngFor=\"let data of item.data.content\">\r\n <tr>\r\n <ng-container *ngFor=\"let item of data\">\r\n <td>{{ item }}</td>\r\n </ng-container>\r\n </tr>\r\n </ng-container>\r\n </table>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</section>\r\n", styles: [".main-section{padding:5%;background-color:#fff}.blog-details{width:60%;margin:0 auto;font-family:jakartaMedium}.delimiter{display:flex;justify-content:center}.ce-delimiter:before{display:inline-block;content:\"***\";font-size:30px;line-height:65px;height:30px;letter-spacing:.2em}p{line-height:1.6em}.back-text{@include body16r();margin-left:9px;margin-top:1px;cursor:pointer}table{border-collapse:collapse;width:100%}th,td{border:1px solid black;text-align:center}.header{margin-top:8px;margin-bottom:14px;padding-left:20px}.header img,.configuration-tab img{cursor:pointer}.blogs-totalsection{background:#eee;position:absolute;top:55px;height:calc(100vh - 55px);width:81.7%;z-index:10;overflow-y:scroll;padding:14px}.blog-title{line-height:35px}.image-container{width:100%;margin:10px 0}.image-container img{width:100%;height:350px}h1,h2,h3,h4,h5,h6{padding:.6em 0 3px}.h1,.h2,.h3,h1,h2,h3{margin-top:0}@media only screen and (max-width :500px){.blog-details{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
4436
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ViewBlogComponent, isStandalone: true, selector: "simpo-view-blog", inputs: { responseData: "responseData" }, ngImport: i0, template: "<section class=\"main-section\">\r\n <div class=\"blog-details\">\r\n <h1 class=\"blog-title\">{{responseData.postTitle}}</h1>\r\n <div style=\"margin-top: 20px;\">\r\n <ng-container *ngFor=\"let item of responseData?.blocks\">\r\n <div *ngIf=\"item.type=='header'\">\r\n <h1 *ngIf=\"item.data.level==1\" [innerHTML]=\"item.data.text\"></h1>\r\n <h2 *ngIf=\"item.data.level==2\" [innerHTML]=\"item.data.text\"></h2>\r\n <h3 *ngIf=\"item.data.level==3\" [innerHTML]=\"item.data.text\"></h3>\r\n <h4 *ngIf=\"item.data.level==4\" [innerHTML]=\"item.data.text\"></h4>\r\n <h5 *ngIf=\"item.data.level==5\" [innerHTML]=\"item.data.text\"></h5>\r\n <h6 *ngIf=\"item.data.level==6\" [innerHTML]=\"item.data.text\"></h6>\r\n </div>\r\n <div *ngIf=\"item.type=='paragraph'\">\r\n <p class=\"inner-text\" [innerHTML]=\"item.data.text\"></p>\r\n </div>\r\n <div *ngIf=\"item.type=='list'\">\r\n <div *ngIf=\"item.type=='list'\">\r\n <div *ngIf=\"item.data.style=='ordered'\">\r\n <ol>\r\n <ng-container *ngFor=\"let list of item.data.items\">\r\n <li>{{ list }}</li>\r\n </ng-container>\r\n </ol>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"item.type=='delimiter'\" class=\"ce-delimiter\">\r\n </div>\r\n <div *ngIf=\"item.type=='image'\" class=\"image-container\">\r\n <img loading=\"lazy\" [src]=\"item.data.file.url\" alt=\"\" loading=\"lazy\">\r\n </div>\r\n <div *ngIf=\"item.type=='table'\">\r\n\r\n <table>\r\n <ng-container *ngFor=\"let data of item.data.content\">\r\n <tr>\r\n <ng-container *ngFor=\"let item of data\">\r\n <td>{{ item }}</td>\r\n </ng-container>\r\n </tr>\r\n </ng-container>\r\n </table>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</section>\r\n", styles: [".main-section{padding:5%;background-color:#fff}.blog-details{width:60%;margin:0 auto;font-family:jakartaMedium}.delimiter{display:flex;justify-content:center}.ce-delimiter:before{display:inline-block;content:\"***\";font-size:30px;line-height:65px;height:30px;letter-spacing:.2em}p{line-height:1.6em}.back-text{@include body16r();margin-left:9px;margin-top:1px;cursor:pointer}table{border-collapse:collapse;width:100%}th,td{border:1px solid black;text-align:center}.header{margin-top:8px;margin-bottom:14px;padding-left:20px}.header img,.configuration-tab img{cursor:pointer}.blogs-totalsection{background:#eee;position:absolute;top:55px;height:calc(100vh - 55px);width:81.7%;z-index:10;overflow-y:scroll;padding:14px}.blog-title{line-height:35px}.image-container{width:100%;margin:10px 0}.image-container img{width:100%;height:350px}h1,h2,h3,h4,h5,h6{padding:.6em 0 3px}.h1,.h2,.h3,h1,h2,h3{margin-top:0}@media only screen and (max-width :500px){.blog-details{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
4437
4437
|
}
|
|
4438
4438
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ViewBlogComponent, decorators: [{
|
|
4439
4439
|
type: Component,
|
|
4440
|
-
args: [{ selector: 'simpo-view-blog', standalone: true, imports: [CommonModule], template: "<section class=\"main-section\">\r\n <div class=\"blog-details\">\r\n <h1 class=\"blog-title\">{{responseData.postTitle}}</h1>\r\n <div style=\"margin-top: 20px;\">\r\n <ng-container *ngFor=\"let item of responseData?.blocks\">\r\n <div *ngIf=\"item.type=='header'\">\r\n <h1 *ngIf=\"item.data.level==1\" [innerHTML]=\"item.data.text\"></h1>\r\n <h2 *ngIf=\"item.data.level==2\" [innerHTML]=\"item.data.text\"></h2>\r\n <h3 *ngIf=\"item.data.level==3\" [innerHTML]=\"item.data.text\"></h3>\r\n <h4 *ngIf=\"item.data.level==4\" [innerHTML]=\"item.data.text\"></h4>\r\n <h5 *ngIf=\"item.data.level==5\" [innerHTML]=\"item.data.text\"></h5>\r\n <h6 *ngIf=\"item.data.level==6\" [innerHTML]=\"item.data.text\"></h6>\r\n </div>\r\n <div *ngIf=\"item.type=='paragraph'\">\r\n <p class=\"inner-text\" [innerHTML]=\"item.data.text\"></p>\r\n </div>\r\n <div *ngIf=\"item.type=='list'\">\r\n <div *ngIf=\"item.type=='list'\">\r\n <div *ngIf=\"item.data.style=='ordered'\">\r\n <ol>\r\n <ng-container *ngFor=\"let list of item.data.items\">\r\n <li>{{ list }}</li>\r\n </ng-container>\r\n </ol>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"item.type=='delimiter'\" class=\"ce-delimiter\">\r\n </div>\r\n <div *ngIf=\"item.type=='image'\" class=\"image-container\">\r\n <img [src]=\"item.data.file.url\" alt=\"\" loading=\"lazy\">\r\n </div>\r\n <div *ngIf=\"item.type=='table'\">\r\n\r\n <table>\r\n <ng-container *ngFor=\"let data of item.data.content\">\r\n <tr>\r\n <ng-container *ngFor=\"let item of data\">\r\n <td>{{ item }}</td>\r\n </ng-container>\r\n </tr>\r\n </ng-container>\r\n </table>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</section>\r\n", styles: [".main-section{padding:5%;background-color:#fff}.blog-details{width:60%;margin:0 auto;font-family:jakartaMedium}.delimiter{display:flex;justify-content:center}.ce-delimiter:before{display:inline-block;content:\"***\";font-size:30px;line-height:65px;height:30px;letter-spacing:.2em}p{line-height:1.6em}.back-text{@include body16r();margin-left:9px;margin-top:1px;cursor:pointer}table{border-collapse:collapse;width:100%}th,td{border:1px solid black;text-align:center}.header{margin-top:8px;margin-bottom:14px;padding-left:20px}.header img,.configuration-tab img{cursor:pointer}.blogs-totalsection{background:#eee;position:absolute;top:55px;height:calc(100vh - 55px);width:81.7%;z-index:10;overflow-y:scroll;padding:14px}.blog-title{line-height:35px}.image-container{width:100%;margin:10px 0}.image-container img{width:100%;height:350px}h1,h2,h3,h4,h5,h6{padding:.6em 0 3px}.h1,.h2,.h3,h1,h2,h3{margin-top:0}@media only screen and (max-width :500px){.blog-details{width:100%}}\n"] }]
|
|
4440
|
+
args: [{ selector: 'simpo-view-blog', standalone: true, imports: [CommonModule], template: "<section class=\"main-section\">\r\n <div class=\"blog-details\">\r\n <h1 class=\"blog-title\">{{responseData.postTitle}}</h1>\r\n <div style=\"margin-top: 20px;\">\r\n <ng-container *ngFor=\"let item of responseData?.blocks\">\r\n <div *ngIf=\"item.type=='header'\">\r\n <h1 *ngIf=\"item.data.level==1\" [innerHTML]=\"item.data.text\"></h1>\r\n <h2 *ngIf=\"item.data.level==2\" [innerHTML]=\"item.data.text\"></h2>\r\n <h3 *ngIf=\"item.data.level==3\" [innerHTML]=\"item.data.text\"></h3>\r\n <h4 *ngIf=\"item.data.level==4\" [innerHTML]=\"item.data.text\"></h4>\r\n <h5 *ngIf=\"item.data.level==5\" [innerHTML]=\"item.data.text\"></h5>\r\n <h6 *ngIf=\"item.data.level==6\" [innerHTML]=\"item.data.text\"></h6>\r\n </div>\r\n <div *ngIf=\"item.type=='paragraph'\">\r\n <p class=\"inner-text\" [innerHTML]=\"item.data.text\"></p>\r\n </div>\r\n <div *ngIf=\"item.type=='list'\">\r\n <div *ngIf=\"item.type=='list'\">\r\n <div *ngIf=\"item.data.style=='ordered'\">\r\n <ol>\r\n <ng-container *ngFor=\"let list of item.data.items\">\r\n <li>{{ list }}</li>\r\n </ng-container>\r\n </ol>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"item.type=='delimiter'\" class=\"ce-delimiter\">\r\n </div>\r\n <div *ngIf=\"item.type=='image'\" class=\"image-container\">\r\n <img loading=\"lazy\" [src]=\"item.data.file.url\" alt=\"\" loading=\"lazy\">\r\n </div>\r\n <div *ngIf=\"item.type=='table'\">\r\n\r\n <table>\r\n <ng-container *ngFor=\"let data of item.data.content\">\r\n <tr>\r\n <ng-container *ngFor=\"let item of data\">\r\n <td>{{ item }}</td>\r\n </ng-container>\r\n </tr>\r\n </ng-container>\r\n </table>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</section>\r\n", styles: [".main-section{padding:5%;background-color:#fff}.blog-details{width:60%;margin:0 auto;font-family:jakartaMedium}.delimiter{display:flex;justify-content:center}.ce-delimiter:before{display:inline-block;content:\"***\";font-size:30px;line-height:65px;height:30px;letter-spacing:.2em}p{line-height:1.6em}.back-text{@include body16r();margin-left:9px;margin-top:1px;cursor:pointer}table{border-collapse:collapse;width:100%}th,td{border:1px solid black;text-align:center}.header{margin-top:8px;margin-bottom:14px;padding-left:20px}.header img,.configuration-tab img{cursor:pointer}.blogs-totalsection{background:#eee;position:absolute;top:55px;height:calc(100vh - 55px);width:81.7%;z-index:10;overflow-y:scroll;padding:14px}.blog-title{line-height:35px}.image-container{width:100%;margin:10px 0}.image-container img{width:100%;height:350px}h1,h2,h3,h4,h5,h6{padding:.6em 0 3px}.h1,.h2,.h3,h1,h2,h3{margin-top:0}@media only screen and (max-width :500px){.blog-details{width:100%}}\n"] }]
|
|
4441
4441
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { responseData: [{
|
|
4442
4442
|
type: Input
|
|
4443
4443
|
}] } });
|
|
@@ -4476,7 +4476,7 @@ class ProcessSectionComponent extends BaseSection {
|
|
|
4476
4476
|
}, 100);
|
|
4477
4477
|
}
|
|
4478
4478
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProcessSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4479
|
-
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" }, 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\" (click)=\"editSection()\">\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=\"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\" [simpoContainerAlignment]=\"stylesLayout\"\r\n [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" [id]=\"data?.id\"\r\n [simpoColor]=\"styles?.background?.color\"></div>\r\n </div>\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 <div class=\"second-part-card \" *ngIf=\"item.image.url && (deviceWidth >= 475)\">\r\n <img [src]=\"item.image.url\" [alt]=\"item.image.altText\" />\r\n </div>\r\n <div class=\"third-part-card\">\r\n <div class=\"text-element heading-medium\" [innerHtml]=\"item.inputText[1].value\">\r\n </div>\r\n <div class=\"text-element\" [innerHtml]=\"item.inputText[2].value\"\r\n [ngClass]=\"item.inputText[2].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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 [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\" />\r\n </div>\r\n </div>\r\n </div>\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: [".btn-primary{border:none}.hover_effect{position:absolute;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}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { 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"] }] }); }
|
|
4479
|
+
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" }, 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\" (click)=\"editSection()\">\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=\"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\" [simpoContainerAlignment]=\"stylesLayout\"\r\n [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" [id]=\"data?.id\"\r\n [simpoColor]=\"styles?.background?.color\"></div>\r\n </div>\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 <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 </div>\r\n <div class=\"third-part-card\">\r\n <div class=\"text-element heading-medium\" [innerHtml]=\"item.inputText[1].value\">\r\n </div>\r\n <div class=\"text-element\" [innerHtml]=\"item.inputText[2].value\"\r\n [ngClass]=\"item.inputText[2].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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\" />\r\n </div>\r\n </div>\r\n </div>\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: [".btn-primary{border:none}.hover_effect{position:absolute;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}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { 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"] }] }); }
|
|
4480
4480
|
}
|
|
4481
4481
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProcessSectionComponent, decorators: [{
|
|
4482
4482
|
type: Component,
|
|
@@ -4504,7 +4504,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
4504
4504
|
TextBackgroundDirectiveDirective,
|
|
4505
4505
|
ObjectPositionDirective,
|
|
4506
4506
|
ColorDirective,
|
|
4507
|
-
TextSizeDirective], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\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=\"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\" [simpoContainerAlignment]=\"stylesLayout\"\r\n [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" [id]=\"data?.id\"\r\n [simpoColor]=\"styles?.background?.color\"></div>\r\n </div>\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 <div class=\"second-part-card \" *ngIf=\"item.image.url && (deviceWidth >= 475)\">\r\n <img [src]=\"item.image.url\" [alt]=\"item.image.altText\" />\r\n </div>\r\n <div class=\"third-part-card\">\r\n <div class=\"text-element heading-medium\" [innerHtml]=\"item.inputText[1].value\">\r\n </div>\r\n <div class=\"text-element\" [innerHtml]=\"item.inputText[2].value\"\r\n [ngClass]=\"item.inputText[2].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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 [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\" />\r\n </div>\r\n </div>\r\n </div>\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: [".btn-primary{border:none}.hover_effect{position:absolute;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}\n"] }]
|
|
4507
|
+
TextSizeDirective], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\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=\"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\" [simpoContainerAlignment]=\"stylesLayout\"\r\n [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" [id]=\"data?.id\"\r\n [simpoColor]=\"styles?.background?.color\"></div>\r\n </div>\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 <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 </div>\r\n <div class=\"third-part-card\">\r\n <div class=\"text-element heading-medium\" [innerHtml]=\"item.inputText[1].value\">\r\n </div>\r\n <div class=\"text-element\" [innerHtml]=\"item.inputText[2].value\"\r\n [ngClass]=\"item.inputText[2].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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\" />\r\n </div>\r\n </div>\r\n </div>\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: [".btn-primary{border:none}.hover_effect{position:absolute;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}\n"] }]
|
|
4508
4508
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
4509
4509
|
type: Input
|
|
4510
4510
|
}], index: [{
|
|
@@ -4544,7 +4544,7 @@ class ProcessModernComponent extends BaseSection {
|
|
|
4544
4544
|
}, 100);
|
|
4545
4545
|
}
|
|
4546
4546
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProcessModernComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4547
|
-
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" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\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=\"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\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"row\" [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\" [innerHTML]=\"text.value\"></div>\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\">\r\n <div class=\"rowFlexContainer\" [ngClass]=\"{'flex-row-reverse': i % 2 === 1}\">\r\n <div class=\"imageContainer\" [ngClass]=\"{'no-image': item.image.url===''}\">\r\n <img 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\">\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\">\r\n {{ item.inputText[0].value }}\r\n </div>\r\n <div class=\"contentDescription\">\r\n {{ item.inputText[1].value }}\r\n </div>\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 <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;width:80%!important;margin:3% auto auto;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:absolute;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: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { 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"] }] }); }
|
|
4547
|
+
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" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\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=\"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\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"row\" [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\" [innerHTML]=\"text.value\"></div>\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\">\r\n <div class=\"rowFlexContainer\" [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\">\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\">\r\n {{ item.inputText[0].value }}\r\n </div>\r\n <div class=\"contentDescription\">\r\n {{ item.inputText[1].value }}\r\n </div>\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 <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;width:80%!important;margin:3% auto auto;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:absolute;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: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { 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"] }] }); }
|
|
4548
4548
|
}
|
|
4549
4549
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProcessModernComponent, decorators: [{
|
|
4550
4550
|
type: Component,
|
|
@@ -4575,7 +4575,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
4575
4575
|
ObjectPositionDirective,
|
|
4576
4576
|
ColorDirective,
|
|
4577
4577
|
TextSizeDirective
|
|
4578
|
-
], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\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=\"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\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"row\" [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\" [innerHTML]=\"text.value\"></div>\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\">\r\n <div class=\"rowFlexContainer\" [ngClass]=\"{'flex-row-reverse': i % 2 === 1}\">\r\n <div class=\"imageContainer\" [ngClass]=\"{'no-image': item.image.url===''}\">\r\n <img 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\">\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\">\r\n {{ item.inputText[0].value }}\r\n </div>\r\n <div class=\"contentDescription\">\r\n {{ item.inputText[1].value }}\r\n </div>\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 <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;width:80%!important;margin:3% auto auto;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:absolute;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"] }]
|
|
4578
|
+
], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\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=\"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\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"row\" [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\" [innerHTML]=\"text.value\"></div>\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\">\r\n <div class=\"rowFlexContainer\" [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\">\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\">\r\n {{ item.inputText[0].value }}\r\n </div>\r\n <div class=\"contentDescription\">\r\n {{ item.inputText[1].value }}\r\n </div>\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 <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;width:80%!important;margin:3% auto auto;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:absolute;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"] }]
|
|
4579
4579
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
4580
4580
|
type: Input
|
|
4581
4581
|
}], index: [{
|
|
@@ -4617,7 +4617,7 @@ class FeaturesSectionComponent extends BaseSection {
|
|
|
4617
4617
|
}, 100);
|
|
4618
4618
|
}
|
|
4619
4619
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturesSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4620
|
-
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", delete: "delete", index: "index" }, 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\" (click)=\"editSection()\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\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\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n <div class=\" box d-flex justify-content-between 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}\" (click)=\"changetab(index)\">\r\n {{ tab.inputText[0].value }}\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\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n <div class=\" box d-flex justify-content-between 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}\" (click)=\"changetab(index)\">\r\n {{ tab.inputText[0].value }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"content d-flex g-15 mt-5\">\r\n <div class=\"image\">\r\n <img [src]=\"currentData?.image?.url\" alt=\"\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"currentData?.image?.position\"\r\n [simpoCorner]=\"styles?.corners\"\r\n class=\"d-block mx-lg-auto img-fluid h-100\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"content-heading heading-large\" [id]=\"data?.id\">\r\n {{currentData?.inputText?.[1]?.value}}\r\n <div class=\"content-description body-large mt-5\">\r\n {{currentData?.inputText?.[2]?.value}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.content{padding:0px 10rem;width:90%;gap:3rem}.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 white;padding-bottom:20px}.tab{letter-spacing:.8px;border-bottom:2px solid;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%}}\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"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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"] }] }); }
|
|
4620
|
+
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", delete: "delete", index: "index" }, 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\" (click)=\"editSection()\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\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\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n <div class=\" box d-flex justify-content-between 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}\" (click)=\"changetab(index)\">\r\n {{ tab.inputText[0].value }}\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\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n <div class=\" box d-flex justify-content-between 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}\" (click)=\"changetab(index)\">\r\n {{ tab.inputText[0].value }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"content d-flex g-15 mt-5\">\r\n <div class=\"image\">\r\n <img loading=\"lazy\" [src]=\"currentData?.image?.url\" alt=\"\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"currentData?.image?.position\"\r\n [simpoCorner]=\"styles?.corners\"\r\n class=\"d-block mx-lg-auto img-fluid h-100\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"content-heading heading-large\" [id]=\"data?.id\">\r\n {{currentData?.inputText?.[1]?.value}}\r\n <div class=\"content-description body-large mt-5\">\r\n {{currentData?.inputText?.[2]?.value}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.content{padding:0px 10rem;width:90%;gap:3rem}.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 white;padding-bottom:20px}.tab{letter-spacing:.8px;border-bottom:2px solid;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%}}\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"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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"] }] }); }
|
|
4621
4621
|
}
|
|
4622
4622
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturesSectionComponent, decorators: [{
|
|
4623
4623
|
type: Component,
|
|
@@ -4635,7 +4635,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
4635
4635
|
ImageDirectiveDirective,
|
|
4636
4636
|
ObjectPositionDirective,
|
|
4637
4637
|
CornerDirective
|
|
4638
|
-
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [simpoBorder]=\"styles?.border\" (click)=\"editSection()\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\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\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n <div class=\" box d-flex justify-content-between 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}\" (click)=\"changetab(index)\">\r\n {{ tab.inputText[0].value }}\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\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n <div class=\" box d-flex justify-content-between 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}\" (click)=\"changetab(index)\">\r\n {{ tab.inputText[0].value }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"content d-flex g-15 mt-5\">\r\n <div class=\"image\">\r\n <img [src]=\"currentData?.image?.url\" alt=\"\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"currentData?.image?.position\"\r\n [simpoCorner]=\"styles?.corners\"\r\n class=\"d-block mx-lg-auto img-fluid h-100\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"content-heading heading-large\" [id]=\"data?.id\">\r\n {{currentData?.inputText?.[1]?.value}}\r\n <div class=\"content-description body-large mt-5\">\r\n {{currentData?.inputText?.[2]?.value}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.content{padding:0px 10rem;width:90%;gap:3rem}.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 white;padding-bottom:20px}.tab{letter-spacing:.8px;border-bottom:2px solid;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%}}\n"] }]
|
|
4638
|
+
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [simpoBorder]=\"styles?.border\" (click)=\"editSection()\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\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\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n <div class=\" box d-flex justify-content-between 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}\" (click)=\"changetab(index)\">\r\n {{ tab.inputText[0].value }}\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\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n <div class=\" box d-flex justify-content-between 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}\" (click)=\"changetab(index)\">\r\n {{ tab.inputText[0].value }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"content d-flex g-15 mt-5\">\r\n <div class=\"image\">\r\n <img loading=\"lazy\" [src]=\"currentData?.image?.url\" alt=\"\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"currentData?.image?.position\"\r\n [simpoCorner]=\"styles?.corners\"\r\n class=\"d-block mx-lg-auto img-fluid h-100\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"content-heading heading-large\" [id]=\"data?.id\">\r\n {{currentData?.inputText?.[1]?.value}}\r\n <div class=\"content-description body-large mt-5\">\r\n {{currentData?.inputText?.[2]?.value}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.content{padding:0px 10rem;width:90%;gap:3rem}.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 white;padding-bottom:20px}.tab{letter-spacing:.8px;border-bottom:2px solid;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%}}\n"] }]
|
|
4639
4639
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
4640
4640
|
type: Input
|
|
4641
4641
|
}], edit: [{
|
|
@@ -4667,7 +4667,7 @@ class TestimonialFullwidthComponent extends BaseSection {
|
|
|
4667
4667
|
}, 100);
|
|
4668
4668
|
}
|
|
4669
4669
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: TestimonialFullwidthComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4670
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: TestimonialFullwidthComponent, isStandalone: true, selector: "simpo-testimonial-fullwidth", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\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\">\r\n <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-ride=\"carousel\" data-interval=\"2000\">\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner\">\r\n <div class=\"single_card carousel-item\"\r\n *ngFor=\"let item of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n <!-- this is testimonial cards start-->\r\n\r\n <div class=\"main-section\">\r\n <div class=\"left\">\r\n <div class=\"heading\">\r\n <div class=\"text-element\"\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 </div>\r\n <div class=\"subtext\">\r\n <div class=\"text-element\" [innerHtml]=\"item.inputText[1].value\"\r\n [ngClass]=\"item.inputText[1].label === 'Subtext' ? 'body-large' : 'heading-large lh-2 mb-3'\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right\">\r\n <img [src]=\"item.image.url\" [alt]=\"item.image.altText\" class=\"person-img\"\r\n [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoCorner]=\"style?.corners\">\r\n <div class=\"person-details\">\r\n <div>\r\n <div class=\"person-name\"\r\n [ngClass]=\"item.inputText[2].label === 'Person-Name' ? 'body-large' : 'heading-large '\">\r\n {{ item.inputText[2].value }}\r\n </div>\r\n <div class=\"person-type\"\r\n [ngClass]=\"item.inputText[3].label === 'Person-Type' ? 'body-large' : 'heading-large lh-2 mb-3'\">\r\n {{ item.inputText[3].value }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- this is testimonial cards start-->\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n data-bs-slide=\"prev\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n data-bs-slide=\"next\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n\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: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:center;margin:auto;align-items:center;width:80%}.left{width:65%;display:flex;flex-direction:column;justify-content:left}.heading{padding:20px 0 6px;width:90%}.heading-large{font-size:2.5rem;font-weight:700;line-height:3rem}.subtext{font-size:14px;font-weight:400;line-height:1.6;width:90%;margin-top:10px}.body-large{font-size:16px;font-weight:400;font-family:desc}.right{width:28%;position:relative}.person-img{width:100%;height:250px;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 375px) and (max-width: 500px){.left{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 375px) and (max-width: 500px){.right{width:100%;display:flex;flex-direction:column}}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;height:45px}li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
|
|
4670
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: TestimonialFullwidthComponent, isStandalone: true, selector: "simpo-testimonial-fullwidth", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\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\">\r\n <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-ride=\"carousel\" data-interval=\"2000\">\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner\">\r\n <div class=\"single_card carousel-item\"\r\n *ngFor=\"let item of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n <!-- this is testimonial cards start-->\r\n\r\n <div class=\"main-section\">\r\n <div class=\"left\">\r\n <div class=\"heading\">\r\n <div class=\"text-element\"\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 </div>\r\n <div class=\"subtext\">\r\n <div class=\"text-element\" [innerHtml]=\"item.inputText[1].value\"\r\n [ngClass]=\"item.inputText[1].label === 'Subtext' ? 'body-large' : 'heading-large lh-2 mb-3'\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right\">\r\n <img loading=\"lazy\" [src]=\"item.image.url\" [alt]=\"item.image.altText\" class=\"person-img\"\r\n [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoCorner]=\"style?.corners\">\r\n <div class=\"person-details\">\r\n <div>\r\n <div class=\"person-name\"\r\n [ngClass]=\"item.inputText[2].label === 'Person-Name' ? 'body-large' : 'heading-large '\">\r\n {{ item.inputText[2].value }}\r\n </div>\r\n <div class=\"person-type\"\r\n [ngClass]=\"item.inputText[3].label === 'Person-Type' ? 'body-large' : 'heading-large lh-2 mb-3'\">\r\n {{ item.inputText[3].value }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- this is testimonial cards start-->\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n data-bs-slide=\"prev\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n data-bs-slide=\"next\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n\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: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:center;margin:auto;align-items:center;width:80%}.left{width:65%;display:flex;flex-direction:column;justify-content:left}.heading{padding:20px 0 6px;width:90%}.heading-large{font-size:2.5rem;font-weight:700;line-height:3rem}.subtext{font-size:14px;font-weight:400;line-height:1.6;width:90%;margin-top:10px}.body-large{font-size:16px;font-weight:400;font-family:desc}.right{width:28%;position:relative}.person-img{width:100%;height:250px;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 375px) and (max-width: 500px){.left{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 375px) and (max-width: 500px){.right{width:100%;display:flex;flex-direction:column}}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;height:45px}li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
|
|
4671
4671
|
//directive
|
|
4672
4672
|
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"] }] }); }
|
|
4673
4673
|
}
|
|
@@ -4696,7 +4696,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
4696
4696
|
PositionLayoutDirectiveDirective,
|
|
4697
4697
|
TextBackgroundDirectiveDirective,
|
|
4698
4698
|
ContentTitleDirective
|
|
4699
|
-
], template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\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\">\r\n <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-ride=\"carousel\" data-interval=\"2000\">\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner\">\r\n <div class=\"single_card carousel-item\"\r\n *ngFor=\"let item of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n <!-- this is testimonial cards start-->\r\n\r\n <div class=\"main-section\">\r\n <div class=\"left\">\r\n <div class=\"heading\">\r\n <div class=\"text-element\"\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 </div>\r\n <div class=\"subtext\">\r\n <div class=\"text-element\" [innerHtml]=\"item.inputText[1].value\"\r\n [ngClass]=\"item.inputText[1].label === 'Subtext' ? 'body-large' : 'heading-large lh-2 mb-3'\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right\">\r\n <img [src]=\"item.image.url\" [alt]=\"item.image.altText\" class=\"person-img\"\r\n [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoCorner]=\"style?.corners\">\r\n <div class=\"person-details\">\r\n <div>\r\n <div class=\"person-name\"\r\n [ngClass]=\"item.inputText[2].label === 'Person-Name' ? 'body-large' : 'heading-large '\">\r\n {{ item.inputText[2].value }}\r\n </div>\r\n <div class=\"person-type\"\r\n [ngClass]=\"item.inputText[3].label === 'Person-Type' ? 'body-large' : 'heading-large lh-2 mb-3'\">\r\n {{ item.inputText[3].value }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- this is testimonial cards start-->\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n data-bs-slide=\"prev\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n data-bs-slide=\"next\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n\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: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:center;margin:auto;align-items:center;width:80%}.left{width:65%;display:flex;flex-direction:column;justify-content:left}.heading{padding:20px 0 6px;width:90%}.heading-large{font-size:2.5rem;font-weight:700;line-height:3rem}.subtext{font-size:14px;font-weight:400;line-height:1.6;width:90%;margin-top:10px}.body-large{font-size:16px;font-weight:400;font-family:desc}.right{width:28%;position:relative}.person-img{width:100%;height:250px;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 375px) and (max-width: 500px){.left{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 375px) and (max-width: 500px){.right{width:100%;display:flex;flex-direction:column}}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;height:45px}li{list-style:none}\n"] }]
|
|
4699
|
+
], template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\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\">\r\n <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-ride=\"carousel\" data-interval=\"2000\">\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner\">\r\n <div class=\"single_card carousel-item\"\r\n *ngFor=\"let item of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n <!-- this is testimonial cards start-->\r\n\r\n <div class=\"main-section\">\r\n <div class=\"left\">\r\n <div class=\"heading\">\r\n <div class=\"text-element\"\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 </div>\r\n <div class=\"subtext\">\r\n <div class=\"text-element\" [innerHtml]=\"item.inputText[1].value\"\r\n [ngClass]=\"item.inputText[1].label === 'Subtext' ? 'body-large' : 'heading-large lh-2 mb-3'\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right\">\r\n <img loading=\"lazy\" [src]=\"item.image.url\" [alt]=\"item.image.altText\" class=\"person-img\"\r\n [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoCorner]=\"style?.corners\">\r\n <div class=\"person-details\">\r\n <div>\r\n <div class=\"person-name\"\r\n [ngClass]=\"item.inputText[2].label === 'Person-Name' ? 'body-large' : 'heading-large '\">\r\n {{ item.inputText[2].value }}\r\n </div>\r\n <div class=\"person-type\"\r\n [ngClass]=\"item.inputText[3].label === 'Person-Type' ? 'body-large' : 'heading-large lh-2 mb-3'\">\r\n {{ item.inputText[3].value }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- this is testimonial cards start-->\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n data-bs-slide=\"prev\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n data-bs-slide=\"next\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n\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: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:center;margin:auto;align-items:center;width:80%}.left{width:65%;display:flex;flex-direction:column;justify-content:left}.heading{padding:20px 0 6px;width:90%}.heading-large{font-size:2.5rem;font-weight:700;line-height:3rem}.subtext{font-size:14px;font-weight:400;line-height:1.6;width:90%;margin-top:10px}.body-large{font-size:16px;font-weight:400;font-family:desc}.right{width:28%;position:relative}.person-img{width:100%;height:250px;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 375px) and (max-width: 500px){.left{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 375px) and (max-width: 500px){.right{width:100%;display:flex;flex-direction:column}}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;height:45px}li{list-style:none}\n"] }]
|
|
4700
4700
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
4701
4701
|
type: Input
|
|
4702
4702
|
}], index: [{
|
|
@@ -4768,11 +4768,11 @@ class LogoShowcaseComponent extends BaseSection {
|
|
|
4768
4768
|
}, 100);
|
|
4769
4769
|
}
|
|
4770
4770
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: LogoShowcaseComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4771
|
-
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" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"styles?.showCaseType==='Grid'\" (click)=\"editSection()\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\">\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=\"row g-5 gridtext\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [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\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\">\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\"\r\n [color]=\"data?.styles?.background?.accentColor\"></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'}\">\r\n <div class=\"slides\"\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 [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\">\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\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\r\n <div class=\" px-5\" [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 [innerHTML]=\"item.value\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\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'}\">\r\n <div class=\"slides\"\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 [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\">\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 <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'\" (click)=\"editSection()\">\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\" [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 [innerHTML]=\"item.value\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"d-flex 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\"\r\n [color]=\"data?.styles?.background?.accentColor\"></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'}\">\r\n <div class=\"slides2\"\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 [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\">\r\n </div>\r\n <div class=\"slides\"\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 [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\">\r\n </div>\r\n <div class=\"slides\" [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 [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\">\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 <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", 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-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}\n"], dependencies: [{ kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }] }); }
|
|
4771
|
+
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" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"styles?.showCaseType==='Grid'\" (click)=\"editSection()\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\">\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=\"row g-5 gridtext\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [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\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\">\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\"\r\n [color]=\"data?.styles?.background?.accentColor\"></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'}\">\r\n <div class=\"slides\"\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\" [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\">\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\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\r\n <div class=\" px-5\" [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 [innerHTML]=\"item.value\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\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'}\">\r\n <div class=\"slides\"\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\" [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\">\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 <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'\" (click)=\"editSection()\">\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\" [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 [innerHTML]=\"item.value\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"d-flex 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\"\r\n [color]=\"data?.styles?.background?.accentColor\"></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'}\">\r\n <div class=\"slides2\"\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\" [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\">\r\n </div>\r\n <div class=\"slides\"\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\" [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\">\r\n </div>\r\n <div class=\"slides\" [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\" [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\">\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 <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", 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-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}\n"], dependencies: [{ kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }] }); }
|
|
4772
4772
|
}
|
|
4773
4773
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: LogoShowcaseComponent, decorators: [{
|
|
4774
4774
|
type: Component,
|
|
4775
|
-
args: [{ selector: 'simpo-logo-showcase', standalone: true, imports: [SimpoButtonComponent, SimpoElementsModule, SimpoComponentModule, CommonModule, MatGridListModule, AnimationDirective, BackgroundDirective, ContentFitDirective, BorderDirective, BannerContentFitDirective, ButtonDirectiveDirective, ColumnDirectiveDirective, ContainerFitDirective, CornerDirective, simpoConetenAlignmentDirective, SimpoFooterLayoutDirective, HoverDirective, ImageDirectiveDirective, OverlayDirective, PositionLayoutDirectiveDirective, TextBackgroundDirectiveDirective, ObjectPositionDirective], template: "<div *ngIf=\"styles?.showCaseType==='Grid'\" (click)=\"editSection()\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\">\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=\"row g-5 gridtext\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [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\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\">\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\"\r\n [color]=\"data?.styles?.background?.accentColor\"></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'}\">\r\n <div class=\"slides\"\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 [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\">\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\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\r\n <div class=\" px-5\" [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 [innerHTML]=\"item.value\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\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'}\">\r\n <div class=\"slides\"\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 [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\">\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 <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'\" (click)=\"editSection()\">\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\" [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 [innerHTML]=\"item.value\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"d-flex 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\"\r\n [color]=\"data?.styles?.background?.accentColor\"></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'}\">\r\n <div class=\"slides2\"\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 [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\">\r\n </div>\r\n <div class=\"slides\"\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 [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\">\r\n </div>\r\n <div class=\"slides\" [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 [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\">\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 <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", 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-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}\n"] }]
|
|
4775
|
+
args: [{ selector: 'simpo-logo-showcase', standalone: true, imports: [SimpoButtonComponent, SimpoElementsModule, SimpoComponentModule, CommonModule, MatGridListModule, AnimationDirective, BackgroundDirective, ContentFitDirective, BorderDirective, BannerContentFitDirective, ButtonDirectiveDirective, ColumnDirectiveDirective, ContainerFitDirective, CornerDirective, simpoConetenAlignmentDirective, SimpoFooterLayoutDirective, HoverDirective, ImageDirectiveDirective, OverlayDirective, PositionLayoutDirectiveDirective, TextBackgroundDirectiveDirective, ObjectPositionDirective], template: "<div *ngIf=\"styles?.showCaseType==='Grid'\" (click)=\"editSection()\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\">\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=\"row g-5 gridtext\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [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\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\">\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\"\r\n [color]=\"data?.styles?.background?.accentColor\"></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'}\">\r\n <div class=\"slides\"\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\" [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\">\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\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\r\n <div class=\" px-5\" [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 [innerHTML]=\"item.value\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\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'}\">\r\n <div class=\"slides\"\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\" [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\">\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 <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'\" (click)=\"editSection()\">\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\" [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 [innerHTML]=\"item.value\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"d-flex 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\"\r\n [color]=\"data?.styles?.background?.accentColor\"></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'}\">\r\n <div class=\"slides2\"\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\" [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\">\r\n </div>\r\n <div class=\"slides\"\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\" [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\">\r\n </div>\r\n <div class=\"slides\" [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\" [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\">\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 <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", 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-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}\n"] }]
|
|
4776
4776
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
4777
4777
|
type: Input
|
|
4778
4778
|
}], index: [{
|
|
@@ -4883,7 +4883,7 @@ class BannerCarouselComponent extends BaseSection {
|
|
|
4883
4883
|
}, 100);
|
|
4884
4884
|
}
|
|
4885
4885
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: BannerCarouselComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4886
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: BannerCarouselComponent, isStandalone: true, selector: "simpo-banner-carousel", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\r\n <div class=\"flex relative fix-safari-flickering\" [ngStyle]=\"{\r\n 'min-height': styles?.layout?.fit === 'content' ? 'calc(134px)' :\r\n styles?.layout?.fit === 'screen' ? 'calc(134px+ 100vh)' : '',\r\n 'padding-top': '0px',\r\n 'padding-bottom': '0px'\r\n }\">\r\n <div class=\"flex break-word w-full items-center\">\r\n\r\n <div id=\"carouselExampleInterval\" class=\"carousel slide carousel-fade \" data-ride=\"carousel\" data-interval=\"2000\">\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner\">\r\n <div *ngFor=\"let item of content?.listItem?.data; let i = index\" class=\"carousel-item \"\r\n [ngClass]=\"{'active': i === currentIndex}\">\r\n <img [src]=\"item.image.url\" [simpoBlurContent]=\"getBlurValue\" class=\"imgclass w-100\"\r\n alt=\"item.image.alt || 'Carousel image'\">\r\n <div class=\"overlay\" [style.opacity]=\"getBackgroundOpacity\"\r\n [style.backgroundColor]=\"styles?.background?.color ?? '#fff'\"></div>\r\n </div>\r\n <div class=\"col-xxl-8 px-5 mx-auto relative pb-20 pt-20 w-100 opacity-100 position-relative\"\r\n style=\"z-index: 1;\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\">\r\n\r\n <div class=\"row g-5 justify-content-start\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\"\r\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n <div class=\"col-lg-6 w-full max-w-2xl items-start cursor-pointer d-flex flex-column \"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"customclass w-full\" [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\" class=\"btn-container \">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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: [".total-container{height:auto;position:relative}.carousel-indicators li{width:10px;height:10px;background-color:#332e2e;border-radius:50%}.carousel-indicators .active{width:20px;height:10px;background-color:#fff;margin:1px;border-radius:0}.carousel-inner{height:80vh;position:relative;width:100%}.overlay{position:absolute;top:0;left:0;height:100%;width:100%;opacity:0}.carousel-item{position:relative;width:100%;height:100%}.carousel-item img{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.75;object-fit:cover}.carousel-indicators{bottom:0!important}.carousel-indicators .circle{width:10px;height:10px;border-radius:50%;background-color:gray}.heading-large{margin-left:1%;margin-right:1%}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}li{list-style:none}.heading-large{margin-left:0%!important}@media (min-width: 860px){.md\\:flex-row{flex-direction:row}}@media (min-width: 860px){.md\\:w-max{width:max-content}}@media (min-width: 860px){.md\\:inline-flex{display:inline-flex}}.btn-container{display:flex;justify-content:center;width:auto}.btn{padding:1rem 1.5rem}.customclass{display:inline-flex;flex-direction:row;gap:1rem;width:100%;margin-top:2rem}@media (max-width: 800px){.customclass{flex-direction:column;align-items:center}.btn-container{width:100%}.btn{width:100%;padding:1rem}}.pb-20{padding-bottom:50px}.pt-20{padding-top:50px}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { 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: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: SimpoBlurContentDirective, selector: "[simpoBlurContent]", inputs: ["simpoBlurContent"] }] }); }
|
|
4886
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: BannerCarouselComponent, isStandalone: true, selector: "simpo-banner-carousel", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\r\n <div class=\"flex relative fix-safari-flickering\" [ngStyle]=\"{\r\n 'min-height': styles?.layout?.fit === 'content' ? 'calc(134px)' :\r\n styles?.layout?.fit === 'screen' ? 'calc(134px+ 100vh)' : '',\r\n 'padding-top': '0px',\r\n 'padding-bottom': '0px'\r\n }\">\r\n <div class=\"flex break-word w-full items-center\">\r\n\r\n <div id=\"carouselExampleInterval\" class=\"carousel slide carousel-fade \" data-ride=\"carousel\" data-interval=\"2000\">\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner\">\r\n <div *ngFor=\"let item of content?.listItem?.data; let i = index\" class=\"carousel-item \"\r\n [ngClass]=\"{'active': i === currentIndex}\">\r\n <img loading=\"lazy\" [src]=\"item.image.url\" [simpoBlurContent]=\"getBlurValue\" class=\"imgclass w-100\"\r\n alt=\"item.image.alt || 'Carousel image'\">\r\n <div class=\"overlay\" [style.opacity]=\"getBackgroundOpacity\"\r\n [style.backgroundColor]=\"styles?.background?.color ?? '#fff'\"></div>\r\n </div>\r\n <div class=\"col-xxl-8 px-5 mx-auto relative pb-20 pt-20 w-100 opacity-100 position-relative\"\r\n style=\"z-index: 1;\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\">\r\n\r\n <div class=\"row g-5 justify-content-start\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\"\r\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n <div class=\"col-lg-6 w-full max-w-2xl items-start cursor-pointer d-flex flex-column \"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"customclass w-full\" [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\" class=\"btn-container \">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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: [".total-container{height:auto;position:relative}.carousel-indicators li{width:10px;height:10px;background-color:#332e2e;border-radius:50%}.carousel-indicators .active{width:20px;height:10px;background-color:#fff;margin:1px;border-radius:0}.carousel-inner{height:80vh;position:relative;width:100%}.overlay{position:absolute;top:0;left:0;height:100%;width:100%;opacity:0}.carousel-item{position:relative;width:100%;height:100%}.carousel-item img{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.75;object-fit:cover}.carousel-indicators{bottom:0!important}.carousel-indicators .circle{width:10px;height:10px;border-radius:50%;background-color:gray}.heading-large{margin-left:1%;margin-right:1%}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}li{list-style:none}.heading-large{margin-left:0%!important}@media (min-width: 860px){.md\\:flex-row{flex-direction:row}}@media (min-width: 860px){.md\\:w-max{width:max-content}}@media (min-width: 860px){.md\\:inline-flex{display:inline-flex}}.btn-container{display:flex;justify-content:center;width:auto}.btn{padding:1rem 1.5rem}.customclass{display:inline-flex;flex-direction:row;gap:1rem;width:100%;margin-top:2rem}@media (max-width: 800px){.customclass{flex-direction:column;align-items:center}.btn-container{width:100%}.btn{width:100%;padding:1rem}}.pb-20{padding-bottom:50px}.pt-20{padding-top:50px}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { 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: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: SimpoBlurContentDirective, selector: "[simpoBlurContent]", inputs: ["simpoBlurContent"] }] }); }
|
|
4887
4887
|
}
|
|
4888
4888
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: BannerCarouselComponent, decorators: [{
|
|
4889
4889
|
type: Component,
|
|
@@ -4914,7 +4914,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
4914
4914
|
ColorDirective,
|
|
4915
4915
|
SimpoContainerAligment,
|
|
4916
4916
|
SimpoBlurContentDirective
|
|
4917
|
-
], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\r\n <div class=\"flex relative fix-safari-flickering\" [ngStyle]=\"{\r\n 'min-height': styles?.layout?.fit === 'content' ? 'calc(134px)' :\r\n styles?.layout?.fit === 'screen' ? 'calc(134px+ 100vh)' : '',\r\n 'padding-top': '0px',\r\n 'padding-bottom': '0px'\r\n }\">\r\n <div class=\"flex break-word w-full items-center\">\r\n\r\n <div id=\"carouselExampleInterval\" class=\"carousel slide carousel-fade \" data-ride=\"carousel\" data-interval=\"2000\">\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner\">\r\n <div *ngFor=\"let item of content?.listItem?.data; let i = index\" class=\"carousel-item \"\r\n [ngClass]=\"{'active': i === currentIndex}\">\r\n <img [src]=\"item.image.url\" [simpoBlurContent]=\"getBlurValue\" class=\"imgclass w-100\"\r\n alt=\"item.image.alt || 'Carousel image'\">\r\n <div class=\"overlay\" [style.opacity]=\"getBackgroundOpacity\"\r\n [style.backgroundColor]=\"styles?.background?.color ?? '#fff'\"></div>\r\n </div>\r\n <div class=\"col-xxl-8 px-5 mx-auto relative pb-20 pt-20 w-100 opacity-100 position-relative\"\r\n style=\"z-index: 1;\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\">\r\n\r\n <div class=\"row g-5 justify-content-start\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\"\r\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n <div class=\"col-lg-6 w-full max-w-2xl items-start cursor-pointer d-flex flex-column \"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"customclass w-full\" [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\" class=\"btn-container \">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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: [".total-container{height:auto;position:relative}.carousel-indicators li{width:10px;height:10px;background-color:#332e2e;border-radius:50%}.carousel-indicators .active{width:20px;height:10px;background-color:#fff;margin:1px;border-radius:0}.carousel-inner{height:80vh;position:relative;width:100%}.overlay{position:absolute;top:0;left:0;height:100%;width:100%;opacity:0}.carousel-item{position:relative;width:100%;height:100%}.carousel-item img{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.75;object-fit:cover}.carousel-indicators{bottom:0!important}.carousel-indicators .circle{width:10px;height:10px;border-radius:50%;background-color:gray}.heading-large{margin-left:1%;margin-right:1%}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}li{list-style:none}.heading-large{margin-left:0%!important}@media (min-width: 860px){.md\\:flex-row{flex-direction:row}}@media (min-width: 860px){.md\\:w-max{width:max-content}}@media (min-width: 860px){.md\\:inline-flex{display:inline-flex}}.btn-container{display:flex;justify-content:center;width:auto}.btn{padding:1rem 1.5rem}.customclass{display:inline-flex;flex-direction:row;gap:1rem;width:100%;margin-top:2rem}@media (max-width: 800px){.customclass{flex-direction:column;align-items:center}.btn-container{width:100%}.btn{width:100%;padding:1rem}}.pb-20{padding-bottom:50px}.pt-20{padding-top:50px}\n"] }]
|
|
4917
|
+
], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\r\n <div class=\"flex relative fix-safari-flickering\" [ngStyle]=\"{\r\n 'min-height': styles?.layout?.fit === 'content' ? 'calc(134px)' :\r\n styles?.layout?.fit === 'screen' ? 'calc(134px+ 100vh)' : '',\r\n 'padding-top': '0px',\r\n 'padding-bottom': '0px'\r\n }\">\r\n <div class=\"flex break-word w-full items-center\">\r\n\r\n <div id=\"carouselExampleInterval\" class=\"carousel slide carousel-fade \" data-ride=\"carousel\" data-interval=\"2000\">\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner\">\r\n <div *ngFor=\"let item of content?.listItem?.data; let i = index\" class=\"carousel-item \"\r\n [ngClass]=\"{'active': i === currentIndex}\">\r\n <img loading=\"lazy\" [src]=\"item.image.url\" [simpoBlurContent]=\"getBlurValue\" class=\"imgclass w-100\"\r\n alt=\"item.image.alt || 'Carousel image'\">\r\n <div class=\"overlay\" [style.opacity]=\"getBackgroundOpacity\"\r\n [style.backgroundColor]=\"styles?.background?.color ?? '#fff'\"></div>\r\n </div>\r\n <div class=\"col-xxl-8 px-5 mx-auto relative pb-20 pt-20 w-100 opacity-100 position-relative\"\r\n style=\"z-index: 1;\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\">\r\n\r\n <div class=\"row g-5 justify-content-start\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\"\r\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n <div class=\"col-lg-6 w-full max-w-2xl items-start cursor-pointer d-flex flex-column \"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"customclass w-full\" [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\" class=\"btn-container \">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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: [".total-container{height:auto;position:relative}.carousel-indicators li{width:10px;height:10px;background-color:#332e2e;border-radius:50%}.carousel-indicators .active{width:20px;height:10px;background-color:#fff;margin:1px;border-radius:0}.carousel-inner{height:80vh;position:relative;width:100%}.overlay{position:absolute;top:0;left:0;height:100%;width:100%;opacity:0}.carousel-item{position:relative;width:100%;height:100%}.carousel-item img{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.75;object-fit:cover}.carousel-indicators{bottom:0!important}.carousel-indicators .circle{width:10px;height:10px;border-radius:50%;background-color:gray}.heading-large{margin-left:1%;margin-right:1%}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}li{list-style:none}.heading-large{margin-left:0%!important}@media (min-width: 860px){.md\\:flex-row{flex-direction:row}}@media (min-width: 860px){.md\\:w-max{width:max-content}}@media (min-width: 860px){.md\\:inline-flex{display:inline-flex}}.btn-container{display:flex;justify-content:center;width:auto}.btn{padding:1rem 1.5rem}.customclass{display:inline-flex;flex-direction:row;gap:1rem;width:100%;margin-top:2rem}@media (max-width: 800px){.customclass{flex-direction:column;align-items:center}.btn-container{width:100%}.btn{width:100%;padding:1rem}}.pb-20{padding-bottom:50px}.pt-20{padding-top:50px}\n"] }]
|
|
4918
4918
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
4919
4919
|
type: Input
|
|
4920
4920
|
}], index: [{
|
|
@@ -5079,7 +5079,7 @@ class CarouselBannerComponent extends BaseSection {
|
|
|
5079
5079
|
}, 100);
|
|
5080
5080
|
}
|
|
5081
5081
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CarouselBannerComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5082
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CarouselBannerComponent, isStandalone: true, selector: "simpo-carousel-banner", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "carouselElement1", first: true, predicate: ["carouselExampleInterval1"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n <div id=\"carouselExampleInterval1\" class=\"carousel slide\" data-ride=\"carousel\" data-interval=\"false\"\r\n #carouselExampleInterval1\r\n [ngClass]=\"data?.styles?.bannerAnimation?.value === 'Horizontal' ? '' : 'carousel-fade'\">\r\n <!-- <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of data?.listBanners; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol> -->\r\n <div class=\"carousel-inner\">\r\n <ng-container *ngFor=\"let item of data?.listBanners ;let i = index\">\r\n <div [id]=\"item?.id\" class=\"carousel-item total-container\" [simpoBackground]=\"item?.styles?.background\"\r\n class=\"h-100 d-flex\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <!-- <div [ngClass]=\"{'justify-content-between d-flex': isBorderlessImage(item)}\" class=\"w-100 h-100\"> -->\r\n <div class=\"px-4 py-5\"\r\n [ngClass]=\"{'col-lg-6 col-xxl-6': isBorderlessImage(item), 'w-100 col-xxl-8': !isBorderlessImage(item)}\"\r\n [id]=\"item?.id\" #mainContainer [simpoOverlay]=\"item?.styles?.background\"\r\n [simpoBorder]=\"item?.styles?.border\">\r\n <div class=\"row g-5 justify-content-start\" [id]=\"item?.id\"\r\n [simpoAnimation]=\"item?.styles?.animation\" [simpoLayout]=\"item?.styles?.layout\"\r\n [simpoPositionLayoutDirective]=\"item?.styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': item?.styles?.positionLayout?.value === 'left' || item?.styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n *ngIf=\"item?.content?.image?.showImage && !isBorderlessImage(item)\"\r\n [simpoContainerAlignment]=\"stylesLayout(item)\">\r\n <img [src]=\"item?.content?.image?.url\" [simpoImageDirective]=\"item?.styles?.image\"\r\n [id]=\"item?.id\" [simpoObjectPosition]=\"item?.content?.image?.position\"\r\n [simpoCorner]=\"item?.styles?.corners\"\r\n [class]=\"item?.id+(item?.content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n style=\"object-fit: cover;\" [alt]=\"item?.content?.image?.altText\" width=\"700\"\r\n height=\"500\" loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column justify-content-start gap-15\"\r\n [ngClass]=\"{'col-lg-12': isBorderlessImage(item), 'col-lg-6': !isBorderlessImage(item)}\"\r\n [simpoContainerAlignment]=\"stylesLayout(item)\" [id]=\"item?.id\"\r\n [simpoContentAlignment]=\"item?.styles?.contentAlignment\">\r\n <div *ngFor=\"let text of item?.content?.inputText\">\r\n <div [innerHTML]=\"text.value\" class=\"text-element\"\r\n [ngClass]=\"text.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <div *ngFor=\"let extraList of item?.content?.listItem?.data\" class=\"carder\">\r\n <ng-container *ngFor=\"let listItem of extraList?.inputText\">\r\n <div class=\"card_wrapper\" *ngIf=\"listItem.value != ''\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n\r\n </div>\r\n <div class=\"first-part-card\"\r\n [ngClass]=\"listItem.label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img class=\"tick-img\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/933997c1718790303127907598c1696063061900green_verified_image.png\"\r\n alt=\"something\"\r\n style=\"width: 5%;height: 5%;position:relative\" />\r\n\r\n {{ listItem.value }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"item?.action && item?.action?.display\"\r\n class=\"button-display d-flex gap-3\"\r\n [simpoContainerAlignment]=\"stylesLayout(item)\">\r\n <div *ngFor=\"let button of item?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\"\r\n [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n [sectionId]=\"item?.id\"\r\n [color]=\"item?.styles?.background?.accentColor\"></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-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngStyle]=\"{'width': item?.styles?.positionLayout?.value === 'right' ? 'fit-content' : ''}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"item?.content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout(item)\">\r\n <img [src]=\"item?.content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [alt]=\"item?.content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".total-container{height:auto;position:relative}.carousel-indicators li{width:10px;height:10px;background-color:#332e2e;border-radius:50%}.carousel-indicators .active{width:20px;height:10px;background-color:#fff;margin:1px;border-radius:0}.carousel-inner{height:80vh;position:relative;width:100%}.overlay{position:absolute;top:0;left:0;height:100%;width:100%;opacity:0}.carousel-item{position:relative;width:100%;height:100%}.carousel-item img{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.75;object-fit:cover}.carousel-indicators{bottom:0!important}.carousel-indicators .circle{width:10px;height:10px;border-radius:50%;background-color:gray}.heading-large{margin-left:1%;margin-right:1%}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}li{list-style:none}.heading-large{margin-left:0%!important}@media (min-width: 860px){.md\\:flex-row{flex-direction:row}}@media (min-width: 860px){.md\\:w-max{width:max-content}}@media (min-width: 860px){.md\\:inline-flex{display:inline-flex}}.btn-container{display:flex;justify-content:center;width:auto}.btn{padding:1rem 1.5rem}.customclass{display:inline-flex;flex-direction:row;gap:1rem;width:100%;margin-top:2rem}@media (max-width: 800px){.customclass{flex-direction:column;align-items:center}.btn-container{width:100%}.btn{width:100%;padding:1rem}}.pb-20{padding-bottom:50px}.pt-20{padding-top:50px}.d-flex-important{display:flex!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: SimpoBorderlessDirective, selector: "[simpoBorderless]", inputs: ["simpoBorderless"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { 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: 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: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }] }); }
|
|
5082
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CarouselBannerComponent, isStandalone: true, selector: "simpo-carousel-banner", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "carouselElement1", first: true, predicate: ["carouselExampleInterval1"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n <div id=\"carouselExampleInterval1\" class=\"carousel slide\" data-ride=\"carousel\" data-interval=\"false\"\r\n #carouselExampleInterval1\r\n [ngClass]=\"data?.styles?.bannerAnimation?.value === 'Horizontal' ? '' : 'carousel-fade'\">\r\n <!-- <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of data?.listBanners; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol> -->\r\n <div class=\"carousel-inner\">\r\n <ng-container *ngFor=\"let item of data?.listBanners ;let i = index\">\r\n <div [id]=\"item?.id\" class=\"carousel-item total-container\" [simpoBackground]=\"item?.styles?.background\"\r\n class=\"h-100 d-flex\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <!-- <div [ngClass]=\"{'justify-content-between d-flex': isBorderlessImage(item)}\" class=\"w-100 h-100\"> -->\r\n <div class=\"px-4 py-5\"\r\n [ngClass]=\"{'col-lg-6 col-xxl-6': isBorderlessImage(item), 'w-100 col-xxl-8': !isBorderlessImage(item)}\"\r\n [id]=\"item?.id\" #mainContainer [simpoOverlay]=\"item?.styles?.background\"\r\n [simpoBorder]=\"item?.styles?.border\">\r\n <div class=\"row g-5 justify-content-start\" [id]=\"item?.id\"\r\n [simpoAnimation]=\"item?.styles?.animation\" [simpoLayout]=\"item?.styles?.layout\"\r\n [simpoPositionLayoutDirective]=\"item?.styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': item?.styles?.positionLayout?.value === 'left' || item?.styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n *ngIf=\"item?.content?.image?.showImage && !isBorderlessImage(item)\"\r\n [simpoContainerAlignment]=\"stylesLayout(item)\">\r\n <img loading=\"lazy\" [src]=\"item?.content?.image?.url\" [simpoImageDirective]=\"item?.styles?.image\"\r\n [id]=\"item?.id\" [simpoObjectPosition]=\"item?.content?.image?.position\"\r\n [simpoCorner]=\"item?.styles?.corners\"\r\n [class]=\"item?.id+(item?.content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n style=\"object-fit: cover;\" [alt]=\"item?.content?.image?.altText\" width=\"700\"\r\n height=\"500\" loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column justify-content-start gap-15\"\r\n [ngClass]=\"{'col-lg-12': isBorderlessImage(item), 'col-lg-6': !isBorderlessImage(item)}\"\r\n [simpoContainerAlignment]=\"stylesLayout(item)\" [id]=\"item?.id\"\r\n [simpoContentAlignment]=\"item?.styles?.contentAlignment\">\r\n <div *ngFor=\"let text of item?.content?.inputText\">\r\n <div [innerHTML]=\"text.value\" class=\"text-element\"\r\n [ngClass]=\"text.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <div *ngFor=\"let extraList of item?.content?.listItem?.data\" class=\"carder\">\r\n <ng-container *ngFor=\"let listItem of extraList?.inputText\">\r\n <div class=\"card_wrapper\" *ngIf=\"listItem.value != ''\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n\r\n </div>\r\n <div class=\"first-part-card\"\r\n [ngClass]=\"listItem.label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img loading=\"lazy\" class=\"tick-img\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/933997c1718790303127907598c1696063061900green_verified_image.png\"\r\n alt=\"something\"\r\n style=\"width: 5%;height: 5%;position:relative\" />\r\n\r\n {{ listItem.value }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"item?.action && item?.action?.display\"\r\n class=\"button-display d-flex gap-3\"\r\n [simpoContainerAlignment]=\"stylesLayout(item)\">\r\n <div *ngFor=\"let button of item?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\"\r\n [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n [sectionId]=\"item?.id\"\r\n [color]=\"item?.styles?.background?.accentColor\"></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-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngStyle]=\"{'width': item?.styles?.positionLayout?.value === 'right' ? 'fit-content' : ''}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"item?.content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout(item)\">\r\n <img loading=\"lazy\" [src]=\"item?.content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [alt]=\"item?.content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".total-container{height:auto;position:relative}.carousel-indicators li{width:10px;height:10px;background-color:#332e2e;border-radius:50%}.carousel-indicators .active{width:20px;height:10px;background-color:#fff;margin:1px;border-radius:0}.carousel-inner{height:80vh;position:relative;width:100%}.overlay{position:absolute;top:0;left:0;height:100%;width:100%;opacity:0}.carousel-item{position:relative;width:100%;height:100%}.carousel-item img{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.75;object-fit:cover}.carousel-indicators{bottom:0!important}.carousel-indicators .circle{width:10px;height:10px;border-radius:50%;background-color:gray}.heading-large{margin-left:1%;margin-right:1%}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}li{list-style:none}.heading-large{margin-left:0%!important}@media (min-width: 860px){.md\\:flex-row{flex-direction:row}}@media (min-width: 860px){.md\\:w-max{width:max-content}}@media (min-width: 860px){.md\\:inline-flex{display:inline-flex}}.btn-container{display:flex;justify-content:center;width:auto}.btn{padding:1rem 1.5rem}.customclass{display:inline-flex;flex-direction:row;gap:1rem;width:100%;margin-top:2rem}@media (max-width: 800px){.customclass{flex-direction:column;align-items:center}.btn-container{width:100%}.btn{width:100%;padding:1rem}}.pb-20{padding-bottom:50px}.pt-20{padding-top:50px}.d-flex-important{display:flex!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: SimpoBorderlessDirective, selector: "[simpoBorderless]", inputs: ["simpoBorderless"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { 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: 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: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }] }); }
|
|
5083
5083
|
}
|
|
5084
5084
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CarouselBannerComponent, decorators: [{
|
|
5085
5085
|
type: Component,
|
|
@@ -5113,7 +5113,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
5113
5113
|
SimpoBlurContentDirective,
|
|
5114
5114
|
RemoveCarouselDirective,
|
|
5115
5115
|
BannerSectionComponent
|
|
5116
|
-
], template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n <div id=\"carouselExampleInterval1\" class=\"carousel slide\" data-ride=\"carousel\" data-interval=\"false\"\r\n #carouselExampleInterval1\r\n [ngClass]=\"data?.styles?.bannerAnimation?.value === 'Horizontal' ? '' : 'carousel-fade'\">\r\n <!-- <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of data?.listBanners; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol> -->\r\n <div class=\"carousel-inner\">\r\n <ng-container *ngFor=\"let item of data?.listBanners ;let i = index\">\r\n <div [id]=\"item?.id\" class=\"carousel-item total-container\" [simpoBackground]=\"item?.styles?.background\"\r\n class=\"h-100 d-flex\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <!-- <div [ngClass]=\"{'justify-content-between d-flex': isBorderlessImage(item)}\" class=\"w-100 h-100\"> -->\r\n <div class=\"px-4 py-5\"\r\n [ngClass]=\"{'col-lg-6 col-xxl-6': isBorderlessImage(item), 'w-100 col-xxl-8': !isBorderlessImage(item)}\"\r\n [id]=\"item?.id\" #mainContainer [simpoOverlay]=\"item?.styles?.background\"\r\n [simpoBorder]=\"item?.styles?.border\">\r\n <div class=\"row g-5 justify-content-start\" [id]=\"item?.id\"\r\n [simpoAnimation]=\"item?.styles?.animation\" [simpoLayout]=\"item?.styles?.layout\"\r\n [simpoPositionLayoutDirective]=\"item?.styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': item?.styles?.positionLayout?.value === 'left' || item?.styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n *ngIf=\"item?.content?.image?.showImage && !isBorderlessImage(item)\"\r\n [simpoContainerAlignment]=\"stylesLayout(item)\">\r\n <img [src]=\"item?.content?.image?.url\" [simpoImageDirective]=\"item?.styles?.image\"\r\n [id]=\"item?.id\" [simpoObjectPosition]=\"item?.content?.image?.position\"\r\n [simpoCorner]=\"item?.styles?.corners\"\r\n [class]=\"item?.id+(item?.content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n style=\"object-fit: cover;\" [alt]=\"item?.content?.image?.altText\" width=\"700\"\r\n height=\"500\" loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column justify-content-start gap-15\"\r\n [ngClass]=\"{'col-lg-12': isBorderlessImage(item), 'col-lg-6': !isBorderlessImage(item)}\"\r\n [simpoContainerAlignment]=\"stylesLayout(item)\" [id]=\"item?.id\"\r\n [simpoContentAlignment]=\"item?.styles?.contentAlignment\">\r\n <div *ngFor=\"let text of item?.content?.inputText\">\r\n <div [innerHTML]=\"text.value\" class=\"text-element\"\r\n [ngClass]=\"text.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <div *ngFor=\"let extraList of item?.content?.listItem?.data\" class=\"carder\">\r\n <ng-container *ngFor=\"let listItem of extraList?.inputText\">\r\n <div class=\"card_wrapper\" *ngIf=\"listItem.value != ''\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n\r\n </div>\r\n <div class=\"first-part-card\"\r\n [ngClass]=\"listItem.label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img class=\"tick-img\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/933997c1718790303127907598c1696063061900green_verified_image.png\"\r\n alt=\"something\"\r\n style=\"width: 5%;height: 5%;position:relative\" />\r\n\r\n {{ listItem.value }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"item?.action && item?.action?.display\"\r\n class=\"button-display d-flex gap-3\"\r\n [simpoContainerAlignment]=\"stylesLayout(item)\">\r\n <div *ngFor=\"let button of item?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\"\r\n [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n [sectionId]=\"item?.id\"\r\n [color]=\"item?.styles?.background?.accentColor\"></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-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngStyle]=\"{'width': item?.styles?.positionLayout?.value === 'right' ? 'fit-content' : ''}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"item?.content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout(item)\">\r\n <img [src]=\"item?.content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [alt]=\"item?.content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".total-container{height:auto;position:relative}.carousel-indicators li{width:10px;height:10px;background-color:#332e2e;border-radius:50%}.carousel-indicators .active{width:20px;height:10px;background-color:#fff;margin:1px;border-radius:0}.carousel-inner{height:80vh;position:relative;width:100%}.overlay{position:absolute;top:0;left:0;height:100%;width:100%;opacity:0}.carousel-item{position:relative;width:100%;height:100%}.carousel-item img{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.75;object-fit:cover}.carousel-indicators{bottom:0!important}.carousel-indicators .circle{width:10px;height:10px;border-radius:50%;background-color:gray}.heading-large{margin-left:1%;margin-right:1%}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}li{list-style:none}.heading-large{margin-left:0%!important}@media (min-width: 860px){.md\\:flex-row{flex-direction:row}}@media (min-width: 860px){.md\\:w-max{width:max-content}}@media (min-width: 860px){.md\\:inline-flex{display:inline-flex}}.btn-container{display:flex;justify-content:center;width:auto}.btn{padding:1rem 1.5rem}.customclass{display:inline-flex;flex-direction:row;gap:1rem;width:100%;margin-top:2rem}@media (max-width: 800px){.customclass{flex-direction:column;align-items:center}.btn-container{width:100%}.btn{width:100%;padding:1rem}}.pb-20{padding-bottom:50px}.pt-20{padding-top:50px}.d-flex-important{display:flex!important}\n"] }]
|
|
5116
|
+
], template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n <div id=\"carouselExampleInterval1\" class=\"carousel slide\" data-ride=\"carousel\" data-interval=\"false\"\r\n #carouselExampleInterval1\r\n [ngClass]=\"data?.styles?.bannerAnimation?.value === 'Horizontal' ? '' : 'carousel-fade'\">\r\n <!-- <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of data?.listBanners; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol> -->\r\n <div class=\"carousel-inner\">\r\n <ng-container *ngFor=\"let item of data?.listBanners ;let i = index\">\r\n <div [id]=\"item?.id\" class=\"carousel-item total-container\" [simpoBackground]=\"item?.styles?.background\"\r\n class=\"h-100 d-flex\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <!-- <div [ngClass]=\"{'justify-content-between d-flex': isBorderlessImage(item)}\" class=\"w-100 h-100\"> -->\r\n <div class=\"px-4 py-5\"\r\n [ngClass]=\"{'col-lg-6 col-xxl-6': isBorderlessImage(item), 'w-100 col-xxl-8': !isBorderlessImage(item)}\"\r\n [id]=\"item?.id\" #mainContainer [simpoOverlay]=\"item?.styles?.background\"\r\n [simpoBorder]=\"item?.styles?.border\">\r\n <div class=\"row g-5 justify-content-start\" [id]=\"item?.id\"\r\n [simpoAnimation]=\"item?.styles?.animation\" [simpoLayout]=\"item?.styles?.layout\"\r\n [simpoPositionLayoutDirective]=\"item?.styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': item?.styles?.positionLayout?.value === 'left' || item?.styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n *ngIf=\"item?.content?.image?.showImage && !isBorderlessImage(item)\"\r\n [simpoContainerAlignment]=\"stylesLayout(item)\">\r\n <img loading=\"lazy\" [src]=\"item?.content?.image?.url\" [simpoImageDirective]=\"item?.styles?.image\"\r\n [id]=\"item?.id\" [simpoObjectPosition]=\"item?.content?.image?.position\"\r\n [simpoCorner]=\"item?.styles?.corners\"\r\n [class]=\"item?.id+(item?.content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n style=\"object-fit: cover;\" [alt]=\"item?.content?.image?.altText\" width=\"700\"\r\n height=\"500\" loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column justify-content-start gap-15\"\r\n [ngClass]=\"{'col-lg-12': isBorderlessImage(item), 'col-lg-6': !isBorderlessImage(item)}\"\r\n [simpoContainerAlignment]=\"stylesLayout(item)\" [id]=\"item?.id\"\r\n [simpoContentAlignment]=\"item?.styles?.contentAlignment\">\r\n <div *ngFor=\"let text of item?.content?.inputText\">\r\n <div [innerHTML]=\"text.value\" class=\"text-element\"\r\n [ngClass]=\"text.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <div *ngFor=\"let extraList of item?.content?.listItem?.data\" class=\"carder\">\r\n <ng-container *ngFor=\"let listItem of extraList?.inputText\">\r\n <div class=\"card_wrapper\" *ngIf=\"listItem.value != ''\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n\r\n </div>\r\n <div class=\"first-part-card\"\r\n [ngClass]=\"listItem.label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img loading=\"lazy\" class=\"tick-img\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/933997c1718790303127907598c1696063061900green_verified_image.png\"\r\n alt=\"something\"\r\n style=\"width: 5%;height: 5%;position:relative\" />\r\n\r\n {{ listItem.value }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"item?.action && item?.action?.display\"\r\n class=\"button-display d-flex gap-3\"\r\n [simpoContainerAlignment]=\"stylesLayout(item)\">\r\n <div *ngFor=\"let button of item?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\"\r\n [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n [sectionId]=\"item?.id\"\r\n [color]=\"item?.styles?.background?.accentColor\"></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-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngStyle]=\"{'width': item?.styles?.positionLayout?.value === 'right' ? 'fit-content' : ''}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"item?.content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout(item)\">\r\n <img loading=\"lazy\" [src]=\"item?.content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [alt]=\"item?.content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".total-container{height:auto;position:relative}.carousel-indicators li{width:10px;height:10px;background-color:#332e2e;border-radius:50%}.carousel-indicators .active{width:20px;height:10px;background-color:#fff;margin:1px;border-radius:0}.carousel-inner{height:80vh;position:relative;width:100%}.overlay{position:absolute;top:0;left:0;height:100%;width:100%;opacity:0}.carousel-item{position:relative;width:100%;height:100%}.carousel-item img{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.75;object-fit:cover}.carousel-indicators{bottom:0!important}.carousel-indicators .circle{width:10px;height:10px;border-radius:50%;background-color:gray}.heading-large{margin-left:1%;margin-right:1%}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}li{list-style:none}.heading-large{margin-left:0%!important}@media (min-width: 860px){.md\\:flex-row{flex-direction:row}}@media (min-width: 860px){.md\\:w-max{width:max-content}}@media (min-width: 860px){.md\\:inline-flex{display:inline-flex}}.btn-container{display:flex;justify-content:center;width:auto}.btn{padding:1rem 1.5rem}.customclass{display:inline-flex;flex-direction:row;gap:1rem;width:100%;margin-top:2rem}@media (max-width: 800px){.customclass{flex-direction:column;align-items:center}.btn-container{width:100%}.btn{width:100%;padding:1rem}}.pb-20{padding-bottom:50px}.pt-20{padding-top:50px}.d-flex-important{display:flex!important}\n"] }]
|
|
5117
5117
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { carouselElement1: [{
|
|
5118
5118
|
type: ViewChild,
|
|
5119
5119
|
args: ['carouselExampleInterval1']
|
|
@@ -5488,7 +5488,7 @@ class FeaturedProductsComponent extends BaseSection {
|
|
|
5488
5488
|
return present;
|
|
5489
5489
|
}
|
|
5490
5490
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturedProductsComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$3.Router }, { token: CartService }, { token: i5$1.MatBottomSheet }, { token: StorageServiceService }, { token: i5.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5491
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FeaturedProductsComponent, isStandalone: true, selector: "simpo-featured-products", inputs: { data: "data", responseData: "responseData", index: "index", isRelatedProduct: "isRelatedProduct", edit: "edit", delete: "delete" }, outputs: { changeDetailProduct: "changeDetailProduct" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <img src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <ng-container *ngIf=\"!filterLoading\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData?.length\">\r\n <div *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\" class=\"product\"\r\n [style.width]=\"getProductWidth()\">\r\n <div *ngIf=\"!(product.itemImages?.length && product.itemImages[0].imgUrl)\" class=\"default-image\" (click)=\"proceedToProductDesc(product)\">\r\n <img src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n </div>\r\n <div *ngIf=\"product.itemImages?.length && product.itemImages[0].imgUrl\" (click)=\"proceedToProductDesc(product)\" class=\"position-relative\">\r\n <div class=\"tags\">\r\n <div class=\"tag\" *ngIf=\"product.itemInventory && product.itemInventory.lowStockQuantity < 5\">Selling Fast</div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <img [id]=\"'preview_'+idx\" [src]=\"product.itemImages[product.prviewIdx]?.imgUrl\" alt=\"\" class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\" (mouseleave)=\"product.prviewIdx = 0\">\r\n </div>\r\n <div class=\"mt-15\">\r\n <div class=\"product-name heading-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n {{product.name.length > 30 ? (product.name | slice: 0:27) + '...' : product.name }}</div>\r\n <div class=\"varient-list\" *ngIf=\"product.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product.itemVariant; let idx = index\">\r\n <img [src]=\"varient.variantImages?.[0]?.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\" [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\" (click)=\"selectVarient(product, varient)\">\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"price body-large d-flex\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.value}}\r\n </div>\r\n <div class=\"discounted-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.discountedPrice}}\r\n </div>\r\n </div>\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n <div class=\"quantity\" *ngIf=\"product.quantity\">\r\n <span (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n <span>{{product.quantity}}</span>\r\n <span (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n </div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"action-btn\">\r\n <a [href]=\"data?.action?.buttons?.[1]?.content?.redirectionUrl\" simpoButtonDirective [id]=\"data?.id+(data?.action?.buttons?.[1]?.id || '')\" [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"styles?.background?.accentColor\" >{{data?.action?.buttons?.[1]?.content?.label }}</a>\r\n </div>\r\n </ng-container>\r\n </div>\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</ng-container>\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading || filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer;position:relative}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width: 475px){.product-img{height:220px}.default-image img{height:250px}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i11.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type:
|
|
5491
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FeaturedProductsComponent, isStandalone: true, selector: "simpo-featured-products", inputs: { data: "data", responseData: "responseData", index: "index", isRelatedProduct: "isRelatedProduct", edit: "edit", delete: "delete" }, outputs: { changeDetailProduct: "changeDetailProduct" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <img loading=\"lazy\" src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <ng-container *ngIf=\"!filterLoading\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData?.length\">\r\n <div *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\" class=\"product\"\r\n [style.width]=\"getProductWidth()\">\r\n <div *ngIf=\"!(product.itemImages?.length && product.itemImages[0].imgUrl)\" class=\"default-image\" (click)=\"proceedToProductDesc(product)\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n </div>\r\n <div *ngIf=\"product.itemImages?.length && product.itemImages[0].imgUrl\" (click)=\"proceedToProductDesc(product)\" class=\"position-relative\">\r\n <div class=\"tags\">\r\n <div class=\"tag\" *ngIf=\"product.itemInventory && product.itemInventory.lowStockQuantity < 5\">Selling Fast</div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <img loading=\"lazy\" [id]=\"'preview_'+idx\" [src]=\"product.itemImages[product.prviewIdx]?.imgUrl\" alt=\"\" class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\" (mouseleave)=\"product.prviewIdx = 0\">\r\n </div>\r\n <div class=\"mt-15\">\r\n <div class=\"product-name heading-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n {{product.name.length > 30 ? (product.name | slice: 0:27) + '...' : product.name }}</div>\r\n <div class=\"varient-list\" *ngIf=\"product.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product.itemVariant; let idx = index\">\r\n <img loading=\"lazy\" [src]=\"varient.variantImages?.[0]?.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\" [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\" (click)=\"selectVarient(product, varient)\">\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"price body-large d-flex\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.value}}\r\n </div>\r\n <div class=\"discounted-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.discountedPrice}}\r\n </div>\r\n </div>\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n <div class=\"quantity\" *ngIf=\"product.quantity\">\r\n <span (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n <span>{{product.quantity}}</span>\r\n <span (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n </div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"action-btn\">\r\n <a [href]=\"data?.action?.buttons?.[1]?.content?.redirectionUrl\" simpoButtonDirective [id]=\"data?.id+(data?.action?.buttons?.[1]?.id || '')\" [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"styles?.background?.accentColor\" >{{data?.action?.buttons?.[1]?.content?.label }}</a>\r\n </div>\r\n </ng-container>\r\n </div>\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</ng-container>\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading || filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer;position:relative}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width: 475px){.product-img{height:220px}.default-image img{height:250px}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i11.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type:
|
|
5492
5492
|
//directive
|
|
5493
5493
|
MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i12.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
|
|
5494
5494
|
}
|
|
@@ -5512,7 +5512,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
5512
5512
|
MatBottomSheetModule,
|
|
5513
5513
|
ButtonDirectiveDirective,
|
|
5514
5514
|
ToastModule
|
|
5515
|
-
], providers: [MessageService], template: "\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <img src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <ng-container *ngIf=\"!filterLoading\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData?.length\">\r\n <div *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\" class=\"product\"\r\n [style.width]=\"getProductWidth()\">\r\n <div *ngIf=\"!(product.itemImages?.length && product.itemImages[0].imgUrl)\" class=\"default-image\" (click)=\"proceedToProductDesc(product)\">\r\n <img src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n </div>\r\n <div *ngIf=\"product.itemImages?.length && product.itemImages[0].imgUrl\" (click)=\"proceedToProductDesc(product)\" class=\"position-relative\">\r\n <div class=\"tags\">\r\n <div class=\"tag\" *ngIf=\"product.itemInventory && product.itemInventory.lowStockQuantity < 5\">Selling Fast</div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <img [id]=\"'preview_'+idx\" [src]=\"product.itemImages[product.prviewIdx]?.imgUrl\" alt=\"\" class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\" (mouseleave)=\"product.prviewIdx = 0\">\r\n </div>\r\n <div class=\"mt-15\">\r\n <div class=\"product-name heading-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n {{product.name.length > 30 ? (product.name | slice: 0:27) + '...' : product.name }}</div>\r\n <div class=\"varient-list\" *ngIf=\"product.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product.itemVariant; let idx = index\">\r\n <img [src]=\"varient.variantImages?.[0]?.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\" [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\" (click)=\"selectVarient(product, varient)\">\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"price body-large d-flex\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.value}}\r\n </div>\r\n <div class=\"discounted-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.discountedPrice}}\r\n </div>\r\n </div>\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n <div class=\"quantity\" *ngIf=\"product.quantity\">\r\n <span (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n <span>{{product.quantity}}</span>\r\n <span (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n </div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"action-btn\">\r\n <a [href]=\"data?.action?.buttons?.[1]?.content?.redirectionUrl\" simpoButtonDirective [id]=\"data?.id+(data?.action?.buttons?.[1]?.id || '')\" [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"styles?.background?.accentColor\" >{{data?.action?.buttons?.[1]?.content?.label }}</a>\r\n </div>\r\n </ng-container>\r\n </div>\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</ng-container>\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading || filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer;position:relative}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width: 475px){.product-img{height:220px}.default-image img{height:250px}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}\n"] }]
|
|
5515
|
+
], providers: [MessageService], template: "\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <img loading=\"lazy\" src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <ng-container *ngIf=\"!filterLoading\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData?.length\">\r\n <div *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\" class=\"product\"\r\n [style.width]=\"getProductWidth()\">\r\n <div *ngIf=\"!(product.itemImages?.length && product.itemImages[0].imgUrl)\" class=\"default-image\" (click)=\"proceedToProductDesc(product)\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n </div>\r\n <div *ngIf=\"product.itemImages?.length && product.itemImages[0].imgUrl\" (click)=\"proceedToProductDesc(product)\" class=\"position-relative\">\r\n <div class=\"tags\">\r\n <div class=\"tag\" *ngIf=\"product.itemInventory && product.itemInventory.lowStockQuantity < 5\">Selling Fast</div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <img loading=\"lazy\" [id]=\"'preview_'+idx\" [src]=\"product.itemImages[product.prviewIdx]?.imgUrl\" alt=\"\" class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\" (mouseleave)=\"product.prviewIdx = 0\">\r\n </div>\r\n <div class=\"mt-15\">\r\n <div class=\"product-name heading-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n {{product.name.length > 30 ? (product.name | slice: 0:27) + '...' : product.name }}</div>\r\n <div class=\"varient-list\" *ngIf=\"product.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product.itemVariant; let idx = index\">\r\n <img loading=\"lazy\" [src]=\"varient.variantImages?.[0]?.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\" [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\" (click)=\"selectVarient(product, varient)\">\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"price body-large d-flex\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.value}}\r\n </div>\r\n <div class=\"discounted-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.discountedPrice}}\r\n </div>\r\n </div>\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n <div class=\"quantity\" *ngIf=\"product.quantity\">\r\n <span (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n <span>{{product.quantity}}</span>\r\n <span (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n </div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"action-btn\">\r\n <a [href]=\"data?.action?.buttons?.[1]?.content?.redirectionUrl\" simpoButtonDirective [id]=\"data?.id+(data?.action?.buttons?.[1]?.id || '')\" [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"styles?.background?.accentColor\" >{{data?.action?.buttons?.[1]?.content?.label }}</a>\r\n </div>\r\n </ng-container>\r\n </div>\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</ng-container>\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading || filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer;position:relative}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width: 475px){.product-img{height:220px}.default-image img{height:250px}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}\n"] }]
|
|
5516
5516
|
}], ctorParameters: () => [{ type: Object, decorators: [{
|
|
5517
5517
|
type: Inject,
|
|
5518
5518
|
args: [PLATFORM_ID]
|
|
@@ -5566,7 +5566,7 @@ class FeaturedCategoryComponent extends BaseSection {
|
|
|
5566
5566
|
});
|
|
5567
5567
|
}
|
|
5568
5568
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturedCategoryComponent, deps: [{ token: PLATFORM_ID }, { token: i2$3.Router }, { token: RestService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5569
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FeaturedCategoryComponent, isStandalone: true, selector: "simpo-featured-category", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <img src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <div class=\"category-parent\">\r\n <div *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\" (click)=\"redirectToListPage(data.categoryName)\">\r\n <img [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"category-image\">\r\n <div class=\"category-name body-large\">{{data.categoryName}}</div>\r\n </div>\r\n </div>\r\n </div>\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</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: [".mt-15{margin-top:15px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{display:flex;margin-top:25px;gap:25px;overflow-x:scroll;justify-content:center;cursor:pointer}.category-image{height:230px;width:230px;border-radius:100%;margin-bottom:15px}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important}.category-image{height:100px;width:100px}.header{gap:7px}.category-parent{gap:15px;margin-top:15px;padding-left:0!important;padding-right:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i11.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type:
|
|
5569
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FeaturedCategoryComponent, isStandalone: true, selector: "simpo-featured-category", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <img loading=\"lazy\" src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <div class=\"category-parent\">\r\n <div *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\" (click)=\"redirectToListPage(data.categoryName)\">\r\n <img loading=\"lazy\" [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"category-image\">\r\n <div class=\"category-name body-large\">{{data.categoryName}}</div>\r\n </div>\r\n </div>\r\n </div>\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</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: [".mt-15{margin-top:15px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{display:flex;margin-top:25px;gap:25px;overflow-x:scroll;justify-content:center;cursor:pointer}.category-image{height:230px;width:230px;border-radius:100%;margin-bottom:15px}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important}.category-image{height:100px;width:100px}.header{gap:7px}.category-parent{gap:15px;margin-top:15px;padding-left:0!important;padding-right:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i11.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type:
|
|
5570
5570
|
//directive
|
|
5571
5571
|
AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }] }); }
|
|
5572
5572
|
}
|
|
@@ -5584,7 +5584,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
5584
5584
|
OverlayDirective,
|
|
5585
5585
|
TextBackgroundDirectiveDirective,
|
|
5586
5586
|
ColorDirective
|
|
5587
|
-
], template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <img src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <div class=\"category-parent\">\r\n <div *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\" (click)=\"redirectToListPage(data.categoryName)\">\r\n <img [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"category-image\">\r\n <div class=\"category-name body-large\">{{data.categoryName}}</div>\r\n </div>\r\n </div>\r\n </div>\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</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: [".mt-15{margin-top:15px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{display:flex;margin-top:25px;gap:25px;overflow-x:scroll;justify-content:center;cursor:pointer}.category-image{height:230px;width:230px;border-radius:100%;margin-bottom:15px}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important}.category-image{height:100px;width:100px}.header{gap:7px}.category-parent{gap:15px;margin-top:15px;padding-left:0!important;padding-right:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"] }]
|
|
5587
|
+
], template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <img loading=\"lazy\" src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <div class=\"category-parent\">\r\n <div *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\" (click)=\"redirectToListPage(data.categoryName)\">\r\n <img loading=\"lazy\" [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"category-image\">\r\n <div class=\"category-name body-large\">{{data.categoryName}}</div>\r\n </div>\r\n </div>\r\n </div>\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</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: [".mt-15{margin-top:15px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{display:flex;margin-top:25px;gap:25px;overflow-x:scroll;justify-content:center;cursor:pointer}.category-image{height:230px;width:230px;border-radius:100%;margin-bottom:15px}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important}.category-image{height:100px;width:100px}.header{gap:7px}.category-parent{gap:15px;margin-top:15px;padding-left:0!important;padding-right:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"] }]
|
|
5588
5588
|
}], ctorParameters: () => [{ type: Object, decorators: [{
|
|
5589
5589
|
type: Inject,
|
|
5590
5590
|
args: [PLATFORM_ID]
|
|
@@ -5738,6 +5738,7 @@ class ProductDescComponent extends BaseSection {
|
|
|
5738
5738
|
this.responseData.price.discountedPrice = varient.itemVariantPrice.discountedPrice;
|
|
5739
5739
|
this.responseData.price.sellingPrice = varient.itemVariantPrice.sellingPrice;
|
|
5740
5740
|
this.responseData.itemInventory = varient.itemInventory;
|
|
5741
|
+
this.responseData.varientId = varient.variantId;
|
|
5741
5742
|
this.responseData.quantity = this.getVarientQuantity(varient);
|
|
5742
5743
|
this.isItemAsFavorite = this.isVarientPresentInWishtlist(varient);
|
|
5743
5744
|
}
|
|
@@ -5790,6 +5791,20 @@ class ProductDescComponent extends BaseSection {
|
|
|
5790
5791
|
this.responseData.itemInventory = itemVarient.itemInventory;
|
|
5791
5792
|
this.responseData.itemImages = itemVarient.variantImages;
|
|
5792
5793
|
}
|
|
5794
|
+
if (this.responseData.quantity) {
|
|
5795
|
+
let isPresent = false;
|
|
5796
|
+
this.USER_CART?.forEach((item) => {
|
|
5797
|
+
if (item.varientId == this.responseData.varientId) {
|
|
5798
|
+
item.quantity = this.responseData.quantity;
|
|
5799
|
+
isPresent = true;
|
|
5800
|
+
}
|
|
5801
|
+
});
|
|
5802
|
+
if (!isPresent)
|
|
5803
|
+
this.USER_CART?.push(new OrderedItems(this.responseData, this.responseData.varientId));
|
|
5804
|
+
}
|
|
5805
|
+
else {
|
|
5806
|
+
this.USER_CART = this.USER_CART?.filter((item) => item.varientId != this.responseData.varientId) ?? [];
|
|
5807
|
+
}
|
|
5793
5808
|
this.cartService.addItemToCart(this.responseData, itemVarient?.variantId);
|
|
5794
5809
|
}
|
|
5795
5810
|
else {
|
|
@@ -5823,6 +5838,12 @@ class ProductDescComponent extends BaseSection {
|
|
|
5823
5838
|
else {
|
|
5824
5839
|
this.cartService.addItemToFavourite(this.responseData);
|
|
5825
5840
|
}
|
|
5841
|
+
if (this.isItemAsFavorite) {
|
|
5842
|
+
this.USER_WISHLIST?.push(new OrderedItems(this.responseData, this.responseData.varientId));
|
|
5843
|
+
}
|
|
5844
|
+
else {
|
|
5845
|
+
this.USER_WISHLIST = this.USER_WISHLIST?.filter((item) => item.varientId != this.responseData.varientId) ?? [];
|
|
5846
|
+
}
|
|
5826
5847
|
}
|
|
5827
5848
|
removeToFavourite() {
|
|
5828
5849
|
this.isItemAsFavorite = false;
|
|
@@ -5884,7 +5905,7 @@ class ProductDescComponent extends BaseSection {
|
|
|
5884
5905
|
return this.responseData?.itemInventory?.openingStock < 5;
|
|
5885
5906
|
}
|
|
5886
5907
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductDescComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$3.Router }, { token: i2$3.ActivatedRoute }, { token: RestService }, { token: CartService }, { token: StorageServiceService }, { token: i5.MessageService }, { token: i7$1.Meta }, { token: i7$1.Title }, { token: i5$1.MatBottomSheet }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5887
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"></p-toast>\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> / <span>{{ responseData?.name | titlecase }}</span></div>\r\n <div class=\"row\">\r\n <div class=\"col-lg-6 col-12\">\r\n <div class=\"prod-img-block\">\r\n <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n <ng-container *ngFor=\"let img of itemImages\">\r\n <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\" [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n <img src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" *ngIf=\"!img.imgUrl\">\r\n </ng-container>\r\n </div>\r\n <div class=\"item-img\">\r\n <ng-container *ngIf=\"currentImg\">\r\n <lib-ngx-image-zoom\r\n [thumbImage]=\"currentImg\" \r\n [fullImage]=\"currentImg\" \r\n [zoomMode]=\"'hover'\"\r\n [magnification]=\"2\" \r\n [lensHeight]=\"100\"\r\n [lensWidth]=\"100\"\r\n style=\"height: 100%; width: 100%;\"\r\n ></lib-ngx-image-zoom>\r\n </ng-container>\r\n <ng-container *ngIf=\"!currentImg\">\r\n <img src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n </ng-container>\r\n <div *ngIf=\"isItemLowStock\" class=\"fast-checkout\">\r\n <img src=\"https://i.imghippo.com/files/x2OGD1723815513.png\" alt=\"\" style=\"height: 30px !important; width: 30px !important;\" title=\"Fast Checkout\" (click)=\"goToCart()\">\r\n <div class=\"selling-fast-tag\">Selling Fast</div>\r\n </div>\r\n <img src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" *ngIf=\"!currentImg\">\r\n </div>\r\n <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n <ng-container *ngFor=\"let img of itemImages\">\r\n <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n <img src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" *ngIf=\"!img.imgUrl\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 col-12 product-detail\">\r\n <div class=\"heading-large\">{{responseData?.name}}</div>\r\n <div class=\"d-flex\" style=\"gap: 10px; align-items: center; margin-top: 15px;\">\r\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\" *ngIf=\"responseData?.price?.discountedPrice != responseData?.price?.value\"><span [innerHTML]='currency'></span> {{responseData?.price?.value}}</div>\r\n <div class=\"price\" *ngIf=\"responseData?.price?.discountedPrice\"><span [innerHTML]='currency'></span> {{responseData?.price?.discountedPrice}}</div>\r\n <div class=\"tax-text\">(excluding all taxes)</div>\r\n </div>\r\n <div class=\"product-desc body-large\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n\r\n <div class=\"button-parent\">\r\n <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n <!-- <input type=\"number\" (keyup)=\"changeQuantity(quantity.value)\" [value]=\"addedQuantity\" #quantity> -->\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n </div>\r\n <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"favourite\">\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\" *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n <div>\r\n <div class=\"varient-key\">{{varient.key}}</div>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\" [ngClass]=\"{'varient-selected': selectedVarient.get(varient.key) == varientValue}\" (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue}}</div>\r\n </div>\r\n </div> \r\n </ng-container>\r\n\r\n <div class=\"product-sku\">\r\n <div *ngIf=\"responseData?.itemInventory\">SKU :\r\n {{responseData.itemInventory?.openingStock}}</div>\r\n <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName | titlecase}} <ng-container *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n </a></div>\r\n <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n </span></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row prod-desc\" *ngIf=\"responseData?.descriptor?.name\">\r\n <div class=\"tab-group\">\r\n <div class=\"tab\">Description</div>\r\n </div>\r\n <div style=\"margin-top: 10px;\" class=\"body-large\" *ngIf=\"responseData?.descriptor\" [innerHTML]=\"responseData?.descriptor?.name\"></div>\r\n </div>\r\n </section>\r\n <ng-container *ngIf=\"relatedProductData?.length\">\r\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\" [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n<!-- <div class=\"modal fade\" id=\"itemVarients\" tabindex=\"-1\" aria-labelledby=\"itemVarients\" aria-hidden=\"true\">\r\n <div class=\"modal-dialog\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h5 class=\"modal-title\">Right-to-Left Modal</h5>\r\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n </div>\r\n <div class=\"modal-body\">\r\n This content is aligned from right to left.\r\n </div>\r\n <div class=\"modal-footer\">\r\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>\r\n <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div> -->\r\n", styles: [".product-desc{display:flex}.row{margin-top:25px}.prod-img-block{display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px;height:460px;overflow:scroll}.img-list img{height:100px;width:100%;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:500px;height:460px;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.price{font-weight:600;font-family:Poppins;font-size:20px}.product-desc{margin-top:15px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;color:#848484;font-family:Poppins;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-family:Poppins;font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;padding:15px 20px;border-radius:5px;margin-top:15px}.varient-selected{background-color:#00f!important;color:#fff!important}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#fff;color:#000;border-radius:3px;box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;margin-right:5px;padding:5px 15px;cursor:pointer}@media only screen and (max-width: 475px){.item-img{width:100%!important}.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column}.img-list{flex-direction:row;overflow-y:scroll}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}.send-btn{padding:.5rem 1rem!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.favourite .mat-icon{min-height:55px;min-width:55px;font-size:35px;display:flex;align-items:center;justify-content:center;border:1.5px solid lightgray;border-radius:5px;padding:30px 25px 25px;position:relative;top:5px;cursor:pointer}a{text-decoration:none}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.modal-dialog{height:100vh;position:absolute;top:0;margin:0;right:0;border:none}.modal-content{height:100%;border:none;border-radius:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i11.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type:
|
|
5908
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"></p-toast>\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> / <span>{{ responseData?.name | titlecase }}</span></div>\r\n <div class=\"row\">\r\n <div class=\"col-lg-6 col-12\">\r\n <div class=\"prod-img-block\">\r\n <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n <ng-container *ngFor=\"let img of itemImages\">\r\n <img loading=\"lazy\" [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\" [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" *ngIf=\"!img.imgUrl\">\r\n </ng-container>\r\n </div>\r\n <div class=\"item-img\">\r\n <ng-container *ngIf=\"currentImg\">\r\n <lib-ngx-image-zoom\r\n [thumbImage]=\"currentImg\" \r\n [fullImage]=\"currentImg\" \r\n [zoomMode]=\"'hover'\"\r\n [magnification]=\"2\" \r\n [lensHeight]=\"100\"\r\n [lensWidth]=\"100\"\r\n style=\"height: 100%; width: 100%;\"\r\n ></lib-ngx-image-zoom>\r\n </ng-container>\r\n <ng-container *ngIf=\"!currentImg\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n </ng-container>\r\n <div *ngIf=\"isItemLowStock\" class=\"fast-checkout\">\r\n <img loading=\"lazy\" src=\"https://i.imghippo.com/files/x2OGD1723815513.png\" alt=\"\" style=\"height: 30px !important; width: 30px !important;\" title=\"Fast Checkout\" (click)=\"goToCart()\">\r\n <div class=\"selling-fast-tag\">Selling Fast</div>\r\n </div>\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" *ngIf=\"!currentImg\">\r\n </div>\r\n <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n <ng-container *ngFor=\"let img of itemImages\">\r\n <img loading=\"lazy\" [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" *ngIf=\"!img.imgUrl\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 col-12 product-detail\">\r\n <div class=\"heading-large\">{{responseData?.name}}</div>\r\n <div class=\"d-flex\" style=\"gap: 10px; align-items: center; margin-top: 15px;\">\r\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\" *ngIf=\"responseData?.price?.discountedPrice != responseData?.price?.value\"><span [innerHTML]='currency'></span> {{responseData?.price?.value}}</div>\r\n <div class=\"price\" *ngIf=\"responseData?.price?.discountedPrice\"><span [innerHTML]='currency'></span> {{responseData?.price?.discountedPrice}}</div>\r\n <div class=\"tax-text\">(excluding all taxes)</div>\r\n </div>\r\n <div class=\"product-desc body-large\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n\r\n <div class=\"button-parent\">\r\n <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n <!-- <input type=\"number\" (keyup)=\"changeQuantity(quantity.value)\" [value]=\"addedQuantity\" #quantity> -->\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n </div>\r\n <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"favourite\">\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\" *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n <div>\r\n <div class=\"varient-key\">{{varient.key}}</div>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\" [ngClass]=\"{'varient-selected': selectedVarient.get(varient.key) == varientValue}\" (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue}}</div>\r\n </div>\r\n </div> \r\n </ng-container>\r\n\r\n <div class=\"product-sku\">\r\n <div *ngIf=\"responseData?.itemInventory\">SKU :\r\n {{responseData.itemInventory?.openingStock}}</div>\r\n <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName | titlecase}} <ng-container *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n </a></div>\r\n <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n </span></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row prod-desc\" *ngIf=\"responseData?.descriptor?.name\">\r\n <div class=\"tab-group\">\r\n <div class=\"tab\">Description</div>\r\n </div>\r\n <div style=\"margin-top: 10px;\" class=\"body-large\" *ngIf=\"responseData?.descriptor\" [innerHTML]=\"responseData?.descriptor?.name\"></div>\r\n </div>\r\n </section>\r\n <ng-container *ngIf=\"relatedProductData?.length\">\r\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\" [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n<!-- <div class=\"modal fade\" id=\"itemVarients\" tabindex=\"-1\" aria-labelledby=\"itemVarients\" aria-hidden=\"true\">\r\n <div class=\"modal-dialog\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h5 class=\"modal-title\">Right-to-Left Modal</h5>\r\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n </div>\r\n <div class=\"modal-body\">\r\n This content is aligned from right to left.\r\n </div>\r\n <div class=\"modal-footer\">\r\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>\r\n <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div> -->\r\n", styles: [".product-desc{display:flex}.row{margin-top:25px}.prod-img-block{display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px;height:460px;overflow:scroll}.img-list img{height:100px;width:100%;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:500px;height:460px;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.price{font-weight:600;font-family:Poppins;font-size:20px}.product-desc{margin-top:15px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;color:#848484;font-family:Poppins;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-family:Poppins;font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;padding:15px 20px;border-radius:5px;margin-top:15px}.varient-selected{background-color:#00f!important;color:#fff!important}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#fff;color:#000;border-radius:3px;box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;margin-right:5px;padding:5px 15px;cursor:pointer}@media only screen and (max-width: 475px){.item-img{width:100%!important}.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column}.img-list{flex-direction:row;overflow-y:scroll}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}.send-btn{padding:.5rem 1rem!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.favourite .mat-icon{min-height:55px;min-width:55px;font-size:35px;display:flex;align-items:center;justify-content:center;border:1.5px solid lightgray;border-radius:5px;padding:30px 25px 25px;position:relative;top:5px;cursor:pointer}a{text-decoration:none}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.modal-dialog{height:100vh;position:absolute;top:0;margin:0;right:0;border:none}.modal-content{height:100%;border:none;border-radius:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i11.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type:
|
|
5888
5909
|
//DIRECTIVE
|
|
5889
5910
|
ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: NgxImageZoomModule }, { kind: "component", type: i13.NgxImageZoomComponent, selector: "lib-ngx-image-zoom", inputs: ["thumbImage", "fullImage", "zoomMode", "magnification", "minZoomRatio", "maxZoomRatio", "scrollStepSize", "enableLens", "lensWidth", "lensHeight", "circularLens", "enableScrollZoom", "altText", "titleText"], outputs: ["zoomScroll", "zoomPosition", "imagesLoaded"] }, { kind: "component", type: FeaturedProductsComponent, selector: "simpo-featured-products", inputs: ["data", "responseData", "index", "isRelatedProduct", "edit", "delete"], outputs: ["changeDetailProduct"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i12.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
|
|
5890
5911
|
}
|
|
@@ -5904,7 +5925,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
5904
5925
|
FeaturedProductsComponent,
|
|
5905
5926
|
MatBottomSheetModule,
|
|
5906
5927
|
ToastModule
|
|
5907
|
-
], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"></p-toast>\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> / <span>{{ responseData?.name | titlecase }}</span></div>\r\n <div class=\"row\">\r\n <div class=\"col-lg-6 col-12\">\r\n <div class=\"prod-img-block\">\r\n <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n <ng-container *ngFor=\"let img of itemImages\">\r\n <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\" [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n <img src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" *ngIf=\"!img.imgUrl\">\r\n </ng-container>\r\n </div>\r\n <div class=\"item-img\">\r\n <ng-container *ngIf=\"currentImg\">\r\n <lib-ngx-image-zoom\r\n [thumbImage]=\"currentImg\" \r\n [fullImage]=\"currentImg\" \r\n [zoomMode]=\"'hover'\"\r\n [magnification]=\"2\" \r\n [lensHeight]=\"100\"\r\n [lensWidth]=\"100\"\r\n style=\"height: 100%; width: 100%;\"\r\n ></lib-ngx-image-zoom>\r\n </ng-container>\r\n <ng-container *ngIf=\"!currentImg\">\r\n <img src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n </ng-container>\r\n <div *ngIf=\"isItemLowStock\" class=\"fast-checkout\">\r\n <img src=\"https://i.imghippo.com/files/x2OGD1723815513.png\" alt=\"\" style=\"height: 30px !important; width: 30px !important;\" title=\"Fast Checkout\" (click)=\"goToCart()\">\r\n <div class=\"selling-fast-tag\">Selling Fast</div>\r\n </div>\r\n <img src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" *ngIf=\"!currentImg\">\r\n </div>\r\n <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n <ng-container *ngFor=\"let img of itemImages\">\r\n <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n <img src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" *ngIf=\"!img.imgUrl\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 col-12 product-detail\">\r\n <div class=\"heading-large\">{{responseData?.name}}</div>\r\n <div class=\"d-flex\" style=\"gap: 10px; align-items: center; margin-top: 15px;\">\r\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\" *ngIf=\"responseData?.price?.discountedPrice != responseData?.price?.value\"><span [innerHTML]='currency'></span> {{responseData?.price?.value}}</div>\r\n <div class=\"price\" *ngIf=\"responseData?.price?.discountedPrice\"><span [innerHTML]='currency'></span> {{responseData?.price?.discountedPrice}}</div>\r\n <div class=\"tax-text\">(excluding all taxes)</div>\r\n </div>\r\n <div class=\"product-desc body-large\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n\r\n <div class=\"button-parent\">\r\n <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n <!-- <input type=\"number\" (keyup)=\"changeQuantity(quantity.value)\" [value]=\"addedQuantity\" #quantity> -->\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n </div>\r\n <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"favourite\">\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\" *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n <div>\r\n <div class=\"varient-key\">{{varient.key}}</div>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\" [ngClass]=\"{'varient-selected': selectedVarient.get(varient.key) == varientValue}\" (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue}}</div>\r\n </div>\r\n </div> \r\n </ng-container>\r\n\r\n <div class=\"product-sku\">\r\n <div *ngIf=\"responseData?.itemInventory\">SKU :\r\n {{responseData.itemInventory?.openingStock}}</div>\r\n <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName | titlecase}} <ng-container *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n </a></div>\r\n <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n </span></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row prod-desc\" *ngIf=\"responseData?.descriptor?.name\">\r\n <div class=\"tab-group\">\r\n <div class=\"tab\">Description</div>\r\n </div>\r\n <div style=\"margin-top: 10px;\" class=\"body-large\" *ngIf=\"responseData?.descriptor\" [innerHTML]=\"responseData?.descriptor?.name\"></div>\r\n </div>\r\n </section>\r\n <ng-container *ngIf=\"relatedProductData?.length\">\r\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\" [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n<!-- <div class=\"modal fade\" id=\"itemVarients\" tabindex=\"-1\" aria-labelledby=\"itemVarients\" aria-hidden=\"true\">\r\n <div class=\"modal-dialog\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h5 class=\"modal-title\">Right-to-Left Modal</h5>\r\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n </div>\r\n <div class=\"modal-body\">\r\n This content is aligned from right to left.\r\n </div>\r\n <div class=\"modal-footer\">\r\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>\r\n <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div> -->\r\n", styles: [".product-desc{display:flex}.row{margin-top:25px}.prod-img-block{display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px;height:460px;overflow:scroll}.img-list img{height:100px;width:100%;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:500px;height:460px;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.price{font-weight:600;font-family:Poppins;font-size:20px}.product-desc{margin-top:15px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;color:#848484;font-family:Poppins;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-family:Poppins;font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;padding:15px 20px;border-radius:5px;margin-top:15px}.varient-selected{background-color:#00f!important;color:#fff!important}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#fff;color:#000;border-radius:3px;box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;margin-right:5px;padding:5px 15px;cursor:pointer}@media only screen and (max-width: 475px){.item-img{width:100%!important}.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column}.img-list{flex-direction:row;overflow-y:scroll}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}.send-btn{padding:.5rem 1rem!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.favourite .mat-icon{min-height:55px;min-width:55px;font-size:35px;display:flex;align-items:center;justify-content:center;border:1.5px solid lightgray;border-radius:5px;padding:30px 25px 25px;position:relative;top:5px;cursor:pointer}a{text-decoration:none}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.modal-dialog{height:100vh;position:absolute;top:0;margin:0;right:0;border:none}.modal-content{height:100%;border:none;border-radius:0!important}\n"] }]
|
|
5928
|
+
], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"></p-toast>\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> / <span>{{ responseData?.name | titlecase }}</span></div>\r\n <div class=\"row\">\r\n <div class=\"col-lg-6 col-12\">\r\n <div class=\"prod-img-block\">\r\n <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n <ng-container *ngFor=\"let img of itemImages\">\r\n <img loading=\"lazy\" [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\" [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" *ngIf=\"!img.imgUrl\">\r\n </ng-container>\r\n </div>\r\n <div class=\"item-img\">\r\n <ng-container *ngIf=\"currentImg\">\r\n <lib-ngx-image-zoom\r\n [thumbImage]=\"currentImg\" \r\n [fullImage]=\"currentImg\" \r\n [zoomMode]=\"'hover'\"\r\n [magnification]=\"2\" \r\n [lensHeight]=\"100\"\r\n [lensWidth]=\"100\"\r\n style=\"height: 100%; width: 100%;\"\r\n ></lib-ngx-image-zoom>\r\n </ng-container>\r\n <ng-container *ngIf=\"!currentImg\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n </ng-container>\r\n <div *ngIf=\"isItemLowStock\" class=\"fast-checkout\">\r\n <img loading=\"lazy\" src=\"https://i.imghippo.com/files/x2OGD1723815513.png\" alt=\"\" style=\"height: 30px !important; width: 30px !important;\" title=\"Fast Checkout\" (click)=\"goToCart()\">\r\n <div class=\"selling-fast-tag\">Selling Fast</div>\r\n </div>\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" *ngIf=\"!currentImg\">\r\n </div>\r\n <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n <ng-container *ngFor=\"let img of itemImages\">\r\n <img loading=\"lazy\" [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" *ngIf=\"!img.imgUrl\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 col-12 product-detail\">\r\n <div class=\"heading-large\">{{responseData?.name}}</div>\r\n <div class=\"d-flex\" style=\"gap: 10px; align-items: center; margin-top: 15px;\">\r\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\" *ngIf=\"responseData?.price?.discountedPrice != responseData?.price?.value\"><span [innerHTML]='currency'></span> {{responseData?.price?.value}}</div>\r\n <div class=\"price\" *ngIf=\"responseData?.price?.discountedPrice\"><span [innerHTML]='currency'></span> {{responseData?.price?.discountedPrice}}</div>\r\n <div class=\"tax-text\">(excluding all taxes)</div>\r\n </div>\r\n <div class=\"product-desc body-large\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n\r\n <div class=\"button-parent\">\r\n <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n <!-- <input type=\"number\" (keyup)=\"changeQuantity(quantity.value)\" [value]=\"addedQuantity\" #quantity> -->\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n </div>\r\n <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"favourite\">\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\" *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n <div>\r\n <div class=\"varient-key\">{{varient.key}}</div>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\" [ngClass]=\"{'varient-selected': selectedVarient.get(varient.key) == varientValue}\" (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue}}</div>\r\n </div>\r\n </div> \r\n </ng-container>\r\n\r\n <div class=\"product-sku\">\r\n <div *ngIf=\"responseData?.itemInventory\">SKU :\r\n {{responseData.itemInventory?.openingStock}}</div>\r\n <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName | titlecase}} <ng-container *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n </a></div>\r\n <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n </span></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row prod-desc\" *ngIf=\"responseData?.descriptor?.name\">\r\n <div class=\"tab-group\">\r\n <div class=\"tab\">Description</div>\r\n </div>\r\n <div style=\"margin-top: 10px;\" class=\"body-large\" *ngIf=\"responseData?.descriptor\" [innerHTML]=\"responseData?.descriptor?.name\"></div>\r\n </div>\r\n </section>\r\n <ng-container *ngIf=\"relatedProductData?.length\">\r\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\" [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n<!-- <div class=\"modal fade\" id=\"itemVarients\" tabindex=\"-1\" aria-labelledby=\"itemVarients\" aria-hidden=\"true\">\r\n <div class=\"modal-dialog\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h5 class=\"modal-title\">Right-to-Left Modal</h5>\r\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n </div>\r\n <div class=\"modal-body\">\r\n This content is aligned from right to left.\r\n </div>\r\n <div class=\"modal-footer\">\r\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>\r\n <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div> -->\r\n", styles: [".product-desc{display:flex}.row{margin-top:25px}.prod-img-block{display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px;height:460px;overflow:scroll}.img-list img{height:100px;width:100%;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:500px;height:460px;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.price{font-weight:600;font-family:Poppins;font-size:20px}.product-desc{margin-top:15px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;color:#848484;font-family:Poppins;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-family:Poppins;font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;padding:15px 20px;border-radius:5px;margin-top:15px}.varient-selected{background-color:#00f!important;color:#fff!important}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#fff;color:#000;border-radius:3px;box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;margin-right:5px;padding:5px 15px;cursor:pointer}@media only screen and (max-width: 475px){.item-img{width:100%!important}.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column}.img-list{flex-direction:row;overflow-y:scroll}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}.send-btn{padding:.5rem 1rem!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.favourite .mat-icon{min-height:55px;min-width:55px;font-size:35px;display:flex;align-items:center;justify-content:center;border:1.5px solid lightgray;border-radius:5px;padding:30px 25px 25px;position:relative;top:5px;cursor:pointer}a{text-decoration:none}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.modal-dialog{height:100vh;position:absolute;top:0;margin:0;right:0;border:none}.modal-content{height:100%;border:none;border-radius:0!important}\n"] }]
|
|
5908
5929
|
}], ctorParameters: () => [{ type: Object, decorators: [{
|
|
5909
5930
|
type: Inject,
|
|
5910
5931
|
args: [PLATFORM_ID]
|
|
@@ -5932,8 +5953,6 @@ class PagninationComponent {
|
|
|
5932
5953
|
this.bound = 5;
|
|
5933
5954
|
}
|
|
5934
5955
|
ngOnInit() {
|
|
5935
|
-
console.log(this.totalPages, this.currentPage);
|
|
5936
|
-
debugger;
|
|
5937
5956
|
}
|
|
5938
5957
|
goToNext() {
|
|
5939
5958
|
this.paginationChange.emit(this.currentPage + 1);
|
|
@@ -6160,7 +6179,6 @@ class ProductListComponent extends BaseSection {
|
|
|
6160
6179
|
else {
|
|
6161
6180
|
this.cartService.addItemToCart(product);
|
|
6162
6181
|
}
|
|
6163
|
-
debugger;
|
|
6164
6182
|
if (product.quantity) {
|
|
6165
6183
|
let isPresent = false;
|
|
6166
6184
|
this.USER_CART?.forEach((item) => {
|
|
@@ -6191,7 +6209,6 @@ class ProductListComponent extends BaseSection {
|
|
|
6191
6209
|
getVarientQuantity(productVarient) {
|
|
6192
6210
|
let itemQuantity = 0;
|
|
6193
6211
|
this.USER_CART?.forEach((item) => {
|
|
6194
|
-
debugger;
|
|
6195
6212
|
if (productVarient.variantId == item.varientId)
|
|
6196
6213
|
itemQuantity = item.quantity;
|
|
6197
6214
|
});
|
|
@@ -6241,7 +6258,6 @@ class ProductListComponent extends BaseSection {
|
|
|
6241
6258
|
this.responseData = response.data;
|
|
6242
6259
|
this.totalCount = response.count;
|
|
6243
6260
|
this.totalPages = Math.ceil(response.count / this.size);
|
|
6244
|
-
debugger;
|
|
6245
6261
|
this.storageService.getUserCart().then((cartResponse) => {
|
|
6246
6262
|
cartResponse.onsuccess = (cartData) => {
|
|
6247
6263
|
this.USER_CART = cartData.target.result;
|
|
@@ -6328,7 +6344,7 @@ class ProductListComponent extends BaseSection {
|
|
|
6328
6344
|
return Math.min(this.totalCount, (((this.pageNo - 1) * this.size + 1) + this.size));
|
|
6329
6345
|
}
|
|
6330
6346
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductListComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$3.Router }, { token: i2$3.ActivatedRoute }, { token: StorageServiceService }, { token: i5$1.MatBottomSheet }, { token: i3.MatDialog }, { token: CartService }, { token: i5.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6331
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n\r\n<div class=\"input-group\" *ngIf=\"isMobile\">\r\n <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div>\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n <section [id]=\"data?.id\" class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\">\r\n\r\n <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\r\n <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 20%;\">\r\n <div class=\"filter body-large\" [style.color]=\"styles?.background?.accentColor\">\r\n Filters\r\n </div>\r\n <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\r\n Clear all\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center justify-content-between\" style=\"width: 80%;margin-left: 10px;\">\r\n <div class=\"fs-6 fw-normal\" [style.color]=\"styles?.background?.accentColor\">Showing {{(pageNo -1)*size +1}}-{{minSize}} of {{ totalCount }} Results</div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 10px;\" [style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n <select (change)=\"applyFilter($event, 'SORT')\">\r\n <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{filter.name}}</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex w-100 onlyMobile\" style=\"gap: 5px; overflow-x: auto;\" [style.color]=\"styles?.background?.accentColor\">\r\n <ng-container *ngFor=\"let filter of filterList\">\r\n <div class=\"d-flex justify-content-between w-100 chip\" [style.color]=\"styles?.background?.accentColor\">\r\n <span>{{filter.name}}</span>\r\n <span style=\"cursor: pointer; margin-left: 5px;\" (click)=\"removeFilter(filter)\">X</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"filter-side onlyDesktop\">\r\n <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n </div>\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n <ng-container *ngIf=\"!filterLoading\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"getProductWidth()\" style=\"cursor: pointer;\">\r\n <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image position-relative\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n <img src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n </div>\r\n <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\" class=\"position-relative\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n <img [src]=\"product?.itemImages?.[0]?.imgUrl\" alt=\"\" class=\"product-img\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n </div>\r\n <div class=\"mt-2\">\r\n <div class=\"product-name heading-large text-left\" [style.color]=\"styles?.background?.accentColor\">{{product.name.length > 30 ? (product.name | slice: 0:27) + '...' : product.name }}</div>\r\n <div class=\"varient-list\" *ngIf=\"product.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product.itemVariant; let idx = index\">\r\n <img [src]=\"varient.variantImages?.[0]?.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\" [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\" (click)=\"selectVarient(product, varient)\">\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex align-item-center justify-content-between\">\r\n <div class=\"price body-large text-left d-flex align-items-center\">\r\n <!-- <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.value}}\r\n </div> -->\r\n <div class=\"discounted-price\"[style.color]=\"styles?.background?.accentColor\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.discountedPrice}}\r\n </div>\r\n </div>\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart($event, product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n <div class=\"quantity\" *ngIf=\"product.quantity\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\">\r\n <span (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n <span>{{product.quantity}}</span>\r\n <span (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n </div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <simpo-pagnination style=\"width: 100%;\" class=\"mt-15\" [totalPages]=\"totalPages\" [currentPage]=\"pageNo\" (paginationChange)=\"paginationChange($event)\"></simpo-pagnination>\r\n </div>\r\n\r\n <section class=\"empty-cart\" *ngIf=\"responseData?.length == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img style=\"height: 150px; width: 150px;\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <div class=\"heading-medium d-flex justify-content-center\" [style.color]=\"styles?.background?.accentColor\">\r\n Product list is empty\r\n </div>\r\n <div class=\"description d-flex justify-content-center mt-4\" [style.color]=\"styles?.background?.accentColor\">\r\n Looks like no item is present with filter. Go ahead & explore top categories.\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"bottom-filter\"[style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n <mat-icon>sort</mat-icon>\r\n <span>Sort by</span>\r\n </div>\r\n <div class=\"divider\"></div>\r\n <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n <mat-icon>filter_list</mat-icon>\r\n <span>Filter</span>\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 <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </section>\r\n</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading || filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #FilterSection>\r\n <section>\r\n <div class=\"d-flex flex-column m-auto\" style=\"width: 95%;\">\r\n <ng-container *ngFor=\"let filter of filterList\">\r\n <div class=\"d-flex justify-content-between w-100 chip\" [style.color]=\"styles?.background?.accentColor\">\r\n <span>{{filter.name}}</span>\r\n <span style=\"cursor: pointer;\" (click)=\"removeFilter(filter)\">X</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"categories-section\" *ngIf=\"categories?.length\">\r\n <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\r\n Shop by categories\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let category of categories\" (click)=\"applyFilter(category, 'FILTER')\" [style.color]=\"styles?.background?.accentColor\">\r\n <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"category.status\" />\r\n <div>{{category.option | uppercase}}</div>\r\n </div>\r\n </div>\r\n <div class=\"categories-section\" *ngIf=\"collections?.length\" [style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"categories heading-small\">\r\n Shop by collections\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let collection of collections\" (click)=\"applyFilter(collection, 'FILTER')\">\r\n <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"collection.status\" />\r\n <div>{{collection.option | uppercase}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"price-section\">\r\n <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\r\n Shop by price\r\n </div>\r\n <div>\r\n <mat-slider class=\"mat-slider\" [min]=\"minProductPrice\" [max]=\"maxProductPrice\" style=\"width: 250px;\">\r\n <input matSliderStartThumb [(ngModel)]=\"pricingMin\">\r\n <input matSliderEndThumb [(ngModel)]=\"pricingMax\">\r\n </mat-slider>\r\n </div>\r\n <div class=\"price-button-section\">\r\n <div class=\"button-section\">\r\n <button (click)=\"applyFilter()\">Filter</button>\r\n </div>\r\n <div class=\"price-range\">\r\n Price: <span [innerHtml]='currency'></span>{{ pricingMin }} - <span [innerHtml]='currency'></span>{{ pricingMax | formateAmount }}\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #SortingSection>\r\n <section style=\"padding: 10px\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n <span>Sort by</span>\r\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n </div>\r\n <mat-radio-group class=\"d-flex flex-column\">\r\n <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"applyFilter($event, 'SORT')\">{{sortingType.name}}</mat-radio-button>\r\n </mat-radio-group>\r\n </section>\r\n</ng-template>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal;text-align:left}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;text-align:left}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.add-to-cart-btn button{height:35px;font-size:16px!important}.fav-icon{position:absolute;z-index:1000;padding:5px;right:3px;top:3px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.discounted-price{margin-top:-3px}.filter-side{width:19%;position:sticky;top:0;height:fit-content}.filter-top-section{padding:0 2rem}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.categories{display:flex;padding:1rem 2rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;background:#0267c1;color:#fff;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{background:#0267c1;padding:8px 15px;border-radius:3px;margin:3px 0;color:#fff;transition:.3s opacity ease}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;justify-content:space-between}.price-range{padding-right:22px;color:#93959e;font-size:15px}.right-side{width:80%;margin-left:10px}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:30px;width:30px;border-radius:50%;cursor:pointer;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:block!important}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:1000;width:100%;margin-left:-12px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:220px}.default-image img{height:220px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group{position:relative;width:95%;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i7.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i7.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i11.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i14.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i14.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "component", type: PagninationComponent, selector: "simpo-pagnination", inputs: ["totalPages", "currentPage"], outputs: ["paginationChange"] }, { kind: "directive", type:
|
|
6347
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n\r\n<div class=\"input-group\" *ngIf=\"isMobile\">\r\n <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div>\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n <section [id]=\"data?.id\" class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\">\r\n\r\n <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\r\n <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 20%;\">\r\n <div class=\"filter body-large\" [style.color]=\"styles?.background?.accentColor\">\r\n Filters\r\n </div>\r\n <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\r\n Clear all\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center justify-content-between\" style=\"width: 80%;margin-left: 10px;\">\r\n <div class=\"fs-6 fw-normal\" [style.color]=\"styles?.background?.accentColor\">Showing {{(pageNo -1)*size +1}}-{{minSize}} of {{ totalCount }} Results</div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 10px;\" [style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n <select (change)=\"applyFilter($event, 'SORT')\">\r\n <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{filter.name}}</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex w-100 onlyMobile\" style=\"gap: 5px; overflow-x: auto;\" [style.color]=\"styles?.background?.accentColor\">\r\n <ng-container *ngFor=\"let filter of filterList\">\r\n <div class=\"d-flex justify-content-between w-100 chip\" [style.color]=\"styles?.background?.accentColor\">\r\n <span>{{filter.name}}</span>\r\n <span style=\"cursor: pointer; margin-left: 5px;\" (click)=\"removeFilter(filter)\">X</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"filter-side onlyDesktop\">\r\n <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n </div>\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n <ng-container *ngIf=\"!filterLoading\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"getProductWidth()\" style=\"cursor: pointer;\">\r\n <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image position-relative\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n </div>\r\n <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\" class=\"position-relative\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n <img loading=\"lazy\" [src]=\"product?.itemImages?.[0]?.imgUrl\" alt=\"\" class=\"product-img\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n </div>\r\n <div class=\"mt-2\">\r\n <div class=\"product-name heading-large text-left\" [style.color]=\"styles?.background?.accentColor\">{{product.name.length > 30 ? (product.name | slice: 0:27) + '...' : product.name }}</div>\r\n <div class=\"varient-list\" *ngIf=\"product.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product.itemVariant; let idx = index\">\r\n <img loading=\"lazy\" [src]=\"varient.variantImages?.[0]?.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\" [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\" (click)=\"selectVarient(product, varient)\">\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex align-item-center justify-content-between\">\r\n <div class=\"price body-large text-left d-flex align-items-center\">\r\n <!-- <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.value}}\r\n </div> -->\r\n <div class=\"discounted-price\"[style.color]=\"styles?.background?.accentColor\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.discountedPrice}}\r\n </div>\r\n </div>\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart($event, product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n <div class=\"quantity\" *ngIf=\"product.quantity\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\">\r\n <span (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n <span>{{product.quantity}}</span>\r\n <span (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n </div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <simpo-pagnination style=\"width: 100%;\" class=\"mt-15\" [totalPages]=\"totalPages\" [currentPage]=\"pageNo\" (paginationChange)=\"paginationChange($event)\"></simpo-pagnination>\r\n </div>\r\n\r\n <section class=\"empty-cart\" *ngIf=\"responseData?.length == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" style=\"height: 150px; width: 150px;\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <div class=\"heading-medium d-flex justify-content-center\" [style.color]=\"styles?.background?.accentColor\">\r\n Product list is empty\r\n </div>\r\n <div class=\"description d-flex justify-content-center mt-4\" [style.color]=\"styles?.background?.accentColor\">\r\n Looks like no item is present with filter. Go ahead & explore top categories.\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"bottom-filter\"[style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n <mat-icon>sort</mat-icon>\r\n <span>Sort by</span>\r\n </div>\r\n <div class=\"divider\"></div>\r\n <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n <mat-icon>filter_list</mat-icon>\r\n <span>Filter</span>\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 <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </section>\r\n</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading || filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #FilterSection>\r\n <section>\r\n <div class=\"d-flex flex-column m-auto\" style=\"width: 95%;\">\r\n <ng-container *ngFor=\"let filter of filterList\">\r\n <div class=\"d-flex justify-content-between w-100 chip\" [style.color]=\"styles?.background?.accentColor\">\r\n <span>{{filter.name}}</span>\r\n <span style=\"cursor: pointer;\" (click)=\"removeFilter(filter)\">X</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"categories-section\" *ngIf=\"categories?.length\">\r\n <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\r\n Shop by categories\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let category of categories\" (click)=\"applyFilter(category, 'FILTER')\" [style.color]=\"styles?.background?.accentColor\">\r\n <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"category.status\" />\r\n <div>{{category.option | uppercase}}</div>\r\n </div>\r\n </div>\r\n <div class=\"categories-section\" *ngIf=\"collections?.length\" [style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"categories heading-small\">\r\n Shop by collections\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let collection of collections\" (click)=\"applyFilter(collection, 'FILTER')\">\r\n <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"collection.status\" />\r\n <div>{{collection.option | uppercase}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"price-section\">\r\n <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\r\n Shop by price\r\n </div>\r\n <div>\r\n <mat-slider class=\"mat-slider\" [min]=\"minProductPrice\" [max]=\"maxProductPrice\" style=\"width: 250px;\">\r\n <input matSliderStartThumb [(ngModel)]=\"pricingMin\">\r\n <input matSliderEndThumb [(ngModel)]=\"pricingMax\">\r\n </mat-slider>\r\n </div>\r\n <div class=\"price-button-section\">\r\n <div class=\"button-section\">\r\n <button (click)=\"applyFilter()\">Filter</button>\r\n </div>\r\n <div class=\"price-range\">\r\n Price: <span [innerHtml]='currency'></span>{{ pricingMin }} - <span [innerHtml]='currency'></span>{{ pricingMax | formateAmount }}\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #SortingSection>\r\n <section style=\"padding: 10px\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n <span>Sort by</span>\r\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n </div>\r\n <mat-radio-group class=\"d-flex flex-column\">\r\n <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"applyFilter($event, 'SORT')\">{{sortingType.name}}</mat-radio-button>\r\n </mat-radio-group>\r\n </section>\r\n</ng-template>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal;text-align:left}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;text-align:left}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.add-to-cart-btn button{height:35px;font-size:16px!important}.fav-icon{position:absolute;z-index:1000;padding:5px;right:3px;top:3px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.discounted-price{margin-top:-3px}.filter-side{width:19%;position:sticky;top:0;height:fit-content}.filter-top-section{padding:0 2rem}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.categories{display:flex;padding:1rem 2rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;background:#0267c1;color:#fff;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{background:#0267c1;padding:8px 15px;border-radius:3px;margin:3px 0;color:#fff;transition:.3s opacity ease}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;justify-content:space-between}.price-range{padding-right:22px;color:#93959e;font-size:15px}.right-side{width:80%;margin-left:10px}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:30px;width:30px;border-radius:50%;cursor:pointer;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:block!important}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:1000;width:100%;margin-left:-12px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:220px}.default-image img{height:220px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group{position:relative;width:95%;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i7.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i7.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i11.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i14.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i14.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "component", type: PagninationComponent, selector: "simpo-pagnination", inputs: ["totalPages", "currentPage"], outputs: ["paginationChange"] }, { kind: "directive", type:
|
|
6332
6348
|
//directive
|
|
6333
6349
|
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: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i15.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i15.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "pipe", type: FormateAmount, name: "formateAmount" }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i12.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
|
|
6334
6350
|
}
|
|
@@ -6352,7 +6368,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
6352
6368
|
MatRadioModule,
|
|
6353
6369
|
FormateAmount,
|
|
6354
6370
|
ToastModule
|
|
6355
|
-
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n\r\n<div class=\"input-group\" *ngIf=\"isMobile\">\r\n <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div>\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n <section [id]=\"data?.id\" class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\">\r\n\r\n <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\r\n <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 20%;\">\r\n <div class=\"filter body-large\" [style.color]=\"styles?.background?.accentColor\">\r\n Filters\r\n </div>\r\n <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\r\n Clear all\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center justify-content-between\" style=\"width: 80%;margin-left: 10px;\">\r\n <div class=\"fs-6 fw-normal\" [style.color]=\"styles?.background?.accentColor\">Showing {{(pageNo -1)*size +1}}-{{minSize}} of {{ totalCount }} Results</div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 10px;\" [style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n <select (change)=\"applyFilter($event, 'SORT')\">\r\n <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{filter.name}}</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex w-100 onlyMobile\" style=\"gap: 5px; overflow-x: auto;\" [style.color]=\"styles?.background?.accentColor\">\r\n <ng-container *ngFor=\"let filter of filterList\">\r\n <div class=\"d-flex justify-content-between w-100 chip\" [style.color]=\"styles?.background?.accentColor\">\r\n <span>{{filter.name}}</span>\r\n <span style=\"cursor: pointer; margin-left: 5px;\" (click)=\"removeFilter(filter)\">X</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"filter-side onlyDesktop\">\r\n <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n </div>\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n <ng-container *ngIf=\"!filterLoading\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"getProductWidth()\" style=\"cursor: pointer;\">\r\n <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image position-relative\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n <img src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n </div>\r\n <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\" class=\"position-relative\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n <img [src]=\"product?.itemImages?.[0]?.imgUrl\" alt=\"\" class=\"product-img\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n </div>\r\n <div class=\"mt-2\">\r\n <div class=\"product-name heading-large text-left\" [style.color]=\"styles?.background?.accentColor\">{{product.name.length > 30 ? (product.name | slice: 0:27) + '...' : product.name }}</div>\r\n <div class=\"varient-list\" *ngIf=\"product.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product.itemVariant; let idx = index\">\r\n <img [src]=\"varient.variantImages?.[0]?.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\" [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\" (click)=\"selectVarient(product, varient)\">\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex align-item-center justify-content-between\">\r\n <div class=\"price body-large text-left d-flex align-items-center\">\r\n <!-- <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.value}}\r\n </div> -->\r\n <div class=\"discounted-price\"[style.color]=\"styles?.background?.accentColor\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.discountedPrice}}\r\n </div>\r\n </div>\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart($event, product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n <div class=\"quantity\" *ngIf=\"product.quantity\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\">\r\n <span (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n <span>{{product.quantity}}</span>\r\n <span (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n </div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <simpo-pagnination style=\"width: 100%;\" class=\"mt-15\" [totalPages]=\"totalPages\" [currentPage]=\"pageNo\" (paginationChange)=\"paginationChange($event)\"></simpo-pagnination>\r\n </div>\r\n\r\n <section class=\"empty-cart\" *ngIf=\"responseData?.length == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img style=\"height: 150px; width: 150px;\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <div class=\"heading-medium d-flex justify-content-center\" [style.color]=\"styles?.background?.accentColor\">\r\n Product list is empty\r\n </div>\r\n <div class=\"description d-flex justify-content-center mt-4\" [style.color]=\"styles?.background?.accentColor\">\r\n Looks like no item is present with filter. Go ahead & explore top categories.\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"bottom-filter\"[style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n <mat-icon>sort</mat-icon>\r\n <span>Sort by</span>\r\n </div>\r\n <div class=\"divider\"></div>\r\n <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n <mat-icon>filter_list</mat-icon>\r\n <span>Filter</span>\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 <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </section>\r\n</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading || filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #FilterSection>\r\n <section>\r\n <div class=\"d-flex flex-column m-auto\" style=\"width: 95%;\">\r\n <ng-container *ngFor=\"let filter of filterList\">\r\n <div class=\"d-flex justify-content-between w-100 chip\" [style.color]=\"styles?.background?.accentColor\">\r\n <span>{{filter.name}}</span>\r\n <span style=\"cursor: pointer;\" (click)=\"removeFilter(filter)\">X</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"categories-section\" *ngIf=\"categories?.length\">\r\n <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\r\n Shop by categories\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let category of categories\" (click)=\"applyFilter(category, 'FILTER')\" [style.color]=\"styles?.background?.accentColor\">\r\n <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"category.status\" />\r\n <div>{{category.option | uppercase}}</div>\r\n </div>\r\n </div>\r\n <div class=\"categories-section\" *ngIf=\"collections?.length\" [style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"categories heading-small\">\r\n Shop by collections\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let collection of collections\" (click)=\"applyFilter(collection, 'FILTER')\">\r\n <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"collection.status\" />\r\n <div>{{collection.option | uppercase}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"price-section\">\r\n <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\r\n Shop by price\r\n </div>\r\n <div>\r\n <mat-slider class=\"mat-slider\" [min]=\"minProductPrice\" [max]=\"maxProductPrice\" style=\"width: 250px;\">\r\n <input matSliderStartThumb [(ngModel)]=\"pricingMin\">\r\n <input matSliderEndThumb [(ngModel)]=\"pricingMax\">\r\n </mat-slider>\r\n </div>\r\n <div class=\"price-button-section\">\r\n <div class=\"button-section\">\r\n <button (click)=\"applyFilter()\">Filter</button>\r\n </div>\r\n <div class=\"price-range\">\r\n Price: <span [innerHtml]='currency'></span>{{ pricingMin }} - <span [innerHtml]='currency'></span>{{ pricingMax | formateAmount }}\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #SortingSection>\r\n <section style=\"padding: 10px\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n <span>Sort by</span>\r\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n </div>\r\n <mat-radio-group class=\"d-flex flex-column\">\r\n <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"applyFilter($event, 'SORT')\">{{sortingType.name}}</mat-radio-button>\r\n </mat-radio-group>\r\n </section>\r\n</ng-template>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal;text-align:left}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;text-align:left}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.add-to-cart-btn button{height:35px;font-size:16px!important}.fav-icon{position:absolute;z-index:1000;padding:5px;right:3px;top:3px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.discounted-price{margin-top:-3px}.filter-side{width:19%;position:sticky;top:0;height:fit-content}.filter-top-section{padding:0 2rem}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.categories{display:flex;padding:1rem 2rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;background:#0267c1;color:#fff;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{background:#0267c1;padding:8px 15px;border-radius:3px;margin:3px 0;color:#fff;transition:.3s opacity ease}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;justify-content:space-between}.price-range{padding-right:22px;color:#93959e;font-size:15px}.right-side{width:80%;margin-left:10px}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:30px;width:30px;border-radius:50%;cursor:pointer;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:block!important}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:1000;width:100%;margin-left:-12px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:220px}.default-image img{height:220px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group{position:relative;width:95%;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}\n"] }]
|
|
6371
|
+
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n\r\n<div class=\"input-group\" *ngIf=\"isMobile\">\r\n <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div>\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n <section [id]=\"data?.id\" class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\">\r\n\r\n <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\r\n <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 20%;\">\r\n <div class=\"filter body-large\" [style.color]=\"styles?.background?.accentColor\">\r\n Filters\r\n </div>\r\n <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\r\n Clear all\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center justify-content-between\" style=\"width: 80%;margin-left: 10px;\">\r\n <div class=\"fs-6 fw-normal\" [style.color]=\"styles?.background?.accentColor\">Showing {{(pageNo -1)*size +1}}-{{minSize}} of {{ totalCount }} Results</div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 10px;\" [style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n <select (change)=\"applyFilter($event, 'SORT')\">\r\n <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{filter.name}}</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex w-100 onlyMobile\" style=\"gap: 5px; overflow-x: auto;\" [style.color]=\"styles?.background?.accentColor\">\r\n <ng-container *ngFor=\"let filter of filterList\">\r\n <div class=\"d-flex justify-content-between w-100 chip\" [style.color]=\"styles?.background?.accentColor\">\r\n <span>{{filter.name}}</span>\r\n <span style=\"cursor: pointer; margin-left: 5px;\" (click)=\"removeFilter(filter)\">X</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"filter-side onlyDesktop\">\r\n <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n </div>\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n <ng-container *ngIf=\"!filterLoading\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"getProductWidth()\" style=\"cursor: pointer;\">\r\n <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image position-relative\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n </div>\r\n <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\" class=\"position-relative\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n <img loading=\"lazy\" [src]=\"product?.itemImages?.[0]?.imgUrl\" alt=\"\" class=\"product-img\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n </div>\r\n <div class=\"mt-2\">\r\n <div class=\"product-name heading-large text-left\" [style.color]=\"styles?.background?.accentColor\">{{product.name.length > 30 ? (product.name | slice: 0:27) + '...' : product.name }}</div>\r\n <div class=\"varient-list\" *ngIf=\"product.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product.itemVariant; let idx = index\">\r\n <img loading=\"lazy\" [src]=\"varient.variantImages?.[0]?.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\" [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\" (click)=\"selectVarient(product, varient)\">\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex align-item-center justify-content-between\">\r\n <div class=\"price body-large text-left d-flex align-items-center\">\r\n <!-- <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.value}}\r\n </div> -->\r\n <div class=\"discounted-price\"[style.color]=\"styles?.background?.accentColor\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.discountedPrice}}\r\n </div>\r\n </div>\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart($event, product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n <div class=\"quantity\" *ngIf=\"product.quantity\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\">\r\n <span (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n <span>{{product.quantity}}</span>\r\n <span (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n </div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <simpo-pagnination style=\"width: 100%;\" class=\"mt-15\" [totalPages]=\"totalPages\" [currentPage]=\"pageNo\" (paginationChange)=\"paginationChange($event)\"></simpo-pagnination>\r\n </div>\r\n\r\n <section class=\"empty-cart\" *ngIf=\"responseData?.length == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" style=\"height: 150px; width: 150px;\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <div class=\"heading-medium d-flex justify-content-center\" [style.color]=\"styles?.background?.accentColor\">\r\n Product list is empty\r\n </div>\r\n <div class=\"description d-flex justify-content-center mt-4\" [style.color]=\"styles?.background?.accentColor\">\r\n Looks like no item is present with filter. Go ahead & explore top categories.\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"bottom-filter\"[style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n <mat-icon>sort</mat-icon>\r\n <span>Sort by</span>\r\n </div>\r\n <div class=\"divider\"></div>\r\n <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n <mat-icon>filter_list</mat-icon>\r\n <span>Filter</span>\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 <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </section>\r\n</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading || filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #FilterSection>\r\n <section>\r\n <div class=\"d-flex flex-column m-auto\" style=\"width: 95%;\">\r\n <ng-container *ngFor=\"let filter of filterList\">\r\n <div class=\"d-flex justify-content-between w-100 chip\" [style.color]=\"styles?.background?.accentColor\">\r\n <span>{{filter.name}}</span>\r\n <span style=\"cursor: pointer;\" (click)=\"removeFilter(filter)\">X</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"categories-section\" *ngIf=\"categories?.length\">\r\n <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\r\n Shop by categories\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let category of categories\" (click)=\"applyFilter(category, 'FILTER')\" [style.color]=\"styles?.background?.accentColor\">\r\n <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"category.status\" />\r\n <div>{{category.option | uppercase}}</div>\r\n </div>\r\n </div>\r\n <div class=\"categories-section\" *ngIf=\"collections?.length\" [style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"categories heading-small\">\r\n Shop by collections\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let collection of collections\" (click)=\"applyFilter(collection, 'FILTER')\">\r\n <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"collection.status\" />\r\n <div>{{collection.option | uppercase}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"price-section\">\r\n <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\r\n Shop by price\r\n </div>\r\n <div>\r\n <mat-slider class=\"mat-slider\" [min]=\"minProductPrice\" [max]=\"maxProductPrice\" style=\"width: 250px;\">\r\n <input matSliderStartThumb [(ngModel)]=\"pricingMin\">\r\n <input matSliderEndThumb [(ngModel)]=\"pricingMax\">\r\n </mat-slider>\r\n </div>\r\n <div class=\"price-button-section\">\r\n <div class=\"button-section\">\r\n <button (click)=\"applyFilter()\">Filter</button>\r\n </div>\r\n <div class=\"price-range\">\r\n Price: <span [innerHtml]='currency'></span>{{ pricingMin }} - <span [innerHtml]='currency'></span>{{ pricingMax | formateAmount }}\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #SortingSection>\r\n <section style=\"padding: 10px\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n <span>Sort by</span>\r\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n </div>\r\n <mat-radio-group class=\"d-flex flex-column\">\r\n <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"applyFilter($event, 'SORT')\">{{sortingType.name}}</mat-radio-button>\r\n </mat-radio-group>\r\n </section>\r\n</ng-template>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal;text-align:left}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;text-align:left}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.add-to-cart-btn button{height:35px;font-size:16px!important}.fav-icon{position:absolute;z-index:1000;padding:5px;right:3px;top:3px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.discounted-price{margin-top:-3px}.filter-side{width:19%;position:sticky;top:0;height:fit-content}.filter-top-section{padding:0 2rem}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.categories{display:flex;padding:1rem 2rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;background:#0267c1;color:#fff;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{background:#0267c1;padding:8px 15px;border-radius:3px;margin:3px 0;color:#fff;transition:.3s opacity ease}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;justify-content:space-between}.price-range{padding-right:22px;color:#93959e;font-size:15px}.right-side{width:80%;margin-left:10px}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:30px;width:30px;border-radius:50%;cursor:pointer;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:block!important}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:1000;width:100%;margin-left:-12px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:220px}.default-image img{height:220px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group{position:relative;width:95%;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}\n"] }]
|
|
6356
6372
|
}], ctorParameters: () => [{ type: Object, decorators: [{
|
|
6357
6373
|
type: Inject,
|
|
6358
6374
|
args: [PLATFORM_ID]
|
|
@@ -6584,7 +6600,6 @@ class CartComponent extends BaseSection {
|
|
|
6584
6600
|
this.edit = false;
|
|
6585
6601
|
this.isLoading = false;
|
|
6586
6602
|
this.currentTab = "BAG";
|
|
6587
|
-
this.loadingItems = [];
|
|
6588
6603
|
this.userDetails = null;
|
|
6589
6604
|
this.USER_CART_ITEMS = null;
|
|
6590
6605
|
this.selectedAddressIdx = 0;
|
|
@@ -6600,24 +6615,7 @@ class CartComponent extends BaseSection {
|
|
|
6600
6615
|
},
|
|
6601
6616
|
platform: "WEB",
|
|
6602
6617
|
cartType: "CART",
|
|
6603
|
-
addressDetails:
|
|
6604
|
-
"addressType": "",
|
|
6605
|
-
"receiverName": "",
|
|
6606
|
-
"receiverPhone": "",
|
|
6607
|
-
"countryName": "",
|
|
6608
|
-
"stateName": "",
|
|
6609
|
-
"cityName": "",
|
|
6610
|
-
"localityName": "",
|
|
6611
|
-
"addressLine1": "",
|
|
6612
|
-
"addressLine2": "",
|
|
6613
|
-
"landmark": "",
|
|
6614
|
-
"zipCode": "",
|
|
6615
|
-
"geolocation": {
|
|
6616
|
-
"latitude": 0,
|
|
6617
|
-
"longitude": 0
|
|
6618
|
-
},
|
|
6619
|
-
"stateCode": ""
|
|
6620
|
-
},
|
|
6618
|
+
addressDetails: null,
|
|
6621
6619
|
userDetails: {
|
|
6622
6620
|
"userId": "",
|
|
6623
6621
|
"userName": "",
|
|
@@ -6775,13 +6773,11 @@ class CartComponent extends BaseSection {
|
|
|
6775
6773
|
}
|
|
6776
6774
|
removeItemFromCart(item) {
|
|
6777
6775
|
item.quantity = 0;
|
|
6778
|
-
this.loadingItems.push(item.varientId);
|
|
6779
6776
|
if (this.USER_CART_ITEMS)
|
|
6780
6777
|
this.USER_CART_ITEMS = this.USER_CART_ITEMS.filter((product) => product.varientId != item.varientId);
|
|
6781
6778
|
this.cartInfo.orderedItems = this.USER_CART_ITEMS;
|
|
6782
6779
|
this.responseData = this.cartInfo;
|
|
6783
6780
|
this.cartService.addItemFromCartPage(item, this.responseData).subscribe((response) => {
|
|
6784
|
-
this.loadingItems = this.loadingItems.filter((idx) => idx != item.varientId);
|
|
6785
6781
|
// this.responseData = this.storageService.calculateBillingDetails();
|
|
6786
6782
|
this.cartInfo.billdetails.totalGrossValue = 0;
|
|
6787
6783
|
this.cartInfo.billdetails.totalTax = 0;
|
|
@@ -6803,10 +6799,8 @@ class CartComponent extends BaseSection {
|
|
|
6803
6799
|
else {
|
|
6804
6800
|
item.quantity -= 1;
|
|
6805
6801
|
}
|
|
6806
|
-
this.loadingItems.push(item.varientId);
|
|
6807
6802
|
if (item.quantity) {
|
|
6808
6803
|
this.cartService.addItemFromCartPage(item, this.responseData).subscribe((response) => {
|
|
6809
|
-
this.loadingItems = this.loadingItems.filter((idx) => idx != item.varientId);
|
|
6810
6804
|
this.cartInfo.billdetails.totalGrossValue = 0;
|
|
6811
6805
|
this.cartInfo.billdetails.totalTax = 0;
|
|
6812
6806
|
this.cartInfo.billdetails.totalNetValue = 0;
|
|
@@ -6821,7 +6815,6 @@ class CartComponent extends BaseSection {
|
|
|
6821
6815
|
});
|
|
6822
6816
|
}
|
|
6823
6817
|
else {
|
|
6824
|
-
this.loadingItems = this.loadingItems.filter((idx) => idx != item.varientId);
|
|
6825
6818
|
this.removeItem(item);
|
|
6826
6819
|
}
|
|
6827
6820
|
}
|
|
@@ -6836,6 +6829,7 @@ class CartComponent extends BaseSection {
|
|
|
6836
6829
|
this.messageService.add({ severity: 'error', summary: 'Payment Failure', detail: 'Please provide address details' });
|
|
6837
6830
|
return;
|
|
6838
6831
|
}
|
|
6832
|
+
this.cartInfo["cartId"] = localStorage.getItem("cartId");
|
|
6839
6833
|
this.cartInfo["orderedItems"]?.forEach((item) => item.itemVariant = null);
|
|
6840
6834
|
this.cartInfo["addressDetails"] = address;
|
|
6841
6835
|
const updateAddress = await this.restService.addItemToDB(this.cartInfo).toPromise();
|
|
@@ -6856,9 +6850,6 @@ class CartComponent extends BaseSection {
|
|
|
6856
6850
|
this.messageService.add({ severity: 'error', summary: 'Payment Failure', detail: 'Please try again' });
|
|
6857
6851
|
});
|
|
6858
6852
|
}
|
|
6859
|
-
isItemLoading(varientId) {
|
|
6860
|
-
return this.loadingItems.includes(varientId);
|
|
6861
|
-
}
|
|
6862
6853
|
addressSelected(index) {
|
|
6863
6854
|
this.selectedAddressIdx = index;
|
|
6864
6855
|
}
|
|
@@ -6880,7 +6871,7 @@ class CartComponent extends BaseSection {
|
|
|
6880
6871
|
return BUSINESS_CONSTANTS.CURRENCY;
|
|
6881
6872
|
}
|
|
6882
6873
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CartComponent, deps: [{ token: EventsService }, { token: CartService }, { token: i2$3.Router }, { token: RestService }, { token: i3.MatDialog }, { token: StorageServiceService }, { token: i5.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6883
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\" [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\" *ngIf=\"responseData?.orderedItems?.length\">\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"currentTab = 'ADDRESS'\">Address</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" style=\"cursor: auto;\">Payment</span>\r\n </div>\r\n <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container [ngSwitch]=\"currentTab\">\r\n <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\r\n <div class=\"my-bag\">\r\n My Bag <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n </div>\r\n <div class=\"cart-items\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <div class=\"item-parent d-flex\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: 10px;\">\r\n <div class=\"lh-23\">\r\n <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n </div>\r\n <ng-container *ngIf=\"item.itemVariant\"> \r\n <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n <div class=\"fw-bold\">{{ varient }} : </div>\r\n <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\r\n <div class=\"fw-normal\" style=\"margin-left: 5px;\"> {{ item.itemVariant.properties[varient] | uppercase }}</div>\r\n </div>\r\n </ng-container>\r\n <div class=\"item-quantity\">\r\n <ng-container *ngIf=\"!isItemLoading(item.varientId)\">\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n </ng-container>\r\n <ng-container *ngIf=\"isItemLoading(item.varientId)\">\r\n <div class=\"d-flex\"> <i class=\"fa fa-spinner fa-spin\" style=\"font-size:24px; margin-right: 10px;\"></i> <span>Loading...</span></div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 position-relative\" style=\"margin-left: auto;\">\r\n <div class=\"item-price\"><span [innerHTML]='currency'></span> {{((item.discountedPrice) * item.quantity) | number: '1.0-2'}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\" [style.right.px]=\"isMobile ? '5' : '0'\">delete</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\r\n <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\" [data]=\"data\" (selectedAddress)=\"addressSelected($event)\"></simpo-address>\r\n </div>\r\n <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\r\n </ng-container>\r\n <div class=\"right-panel\">\r\n <div class=\"my-bag\">\r\n Price Details\r\n </div>\r\n <div class=\"price-details\">\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\">Total Price</div>\r\n <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\">Total Tax</div>\r\n <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalTax ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n <div class=\"price-parent-block\"\r\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <div class=\"price-type\">Delivery Charge</div>\r\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges | number: '1.0-2'}}</div>\r\n </div>\r\n <hr>\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n\r\n <div class=\"button-parent\">\r\n <ng-container *ngIf=\"currentTab == 'BAG'\">\r\n <div class=\"btn mobile-fixed\" (click)=\"proceedToCheckout()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout Cart'}}</div>\r\n <div class=\"btn\" (click)=\"proceedToListPage()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue Shopping'}}</div>\r\n </ng-container>\r\n \r\n <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\r\n <div class=\"btn mobile-fixed\" (click)=\"proceedToPayment()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[2]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[2]?.content?.label ?? 'Place Order'}}</div>\r\n </ng-container>\r\n <!-- <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\r\n <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{text.value}}</div>\r\n </ng-container>\r\n <!-- <div class=\"description d-flex mt-4\">\r\n Looks like you have not added anything to your cart. Go ahead & explore top categories.\r\n </div> -->\r\n </div>\r\n </div>\r\n </section>\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</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important;border:1px solid lightgray}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel,.right-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap}.product-img{width:82px}.col-md-6{margin-left:18px!important}.mobile-fixed{width:87%;position:fixed;bottom:10px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i11.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type:
|
|
6874
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\" [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\" *ngIf=\"responseData?.orderedItems?.length\">\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"currentTab = 'ADDRESS'\">Address</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" style=\"cursor: auto;\">Payment</span>\r\n </div>\r\n <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container [ngSwitch]=\"currentTab\">\r\n <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\r\n <div class=\"my-bag\">\r\n My Bag <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n </div>\r\n <div class=\"cart-items\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <div class=\"item-parent d-flex\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img loading=\"lazy\" class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: 10px;\">\r\n <div class=\"lh-23\">\r\n <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n </div>\r\n <ng-container *ngIf=\"item.itemVariant\"> \r\n <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n <div class=\"fw-bold\">{{ varient }} : </div>\r\n <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\r\n <div class=\"fw-normal\" style=\"margin-left: 5px;\"> {{ item.itemVariant.properties[varient] | uppercase }}</div>\r\n </div>\r\n </ng-container>\r\n <div class=\"item-quantity\">\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 position-relative\" style=\"margin-left: auto;\">\r\n <div class=\"item-price\"><span [innerHTML]='currency'></span> {{((item.discountedPrice) * item.quantity) | number: '1.0-2'}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\" [style.right.px]=\"isMobile ? '5' : '0'\">delete</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\r\n <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\" [data]=\"data\" (selectedAddress)=\"addressSelected($event)\"></simpo-address>\r\n </div>\r\n <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\r\n </ng-container>\r\n <div class=\"right-panel\">\r\n <div class=\"my-bag\">\r\n Price Details\r\n </div>\r\n <div class=\"price-details\">\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\">Total Price</div>\r\n <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\">Total Tax</div>\r\n <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalTax ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n <div class=\"price-parent-block\"\r\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <div class=\"price-type\">Delivery Charge</div>\r\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges | number: '1.0-2'}}</div>\r\n </div>\r\n <hr>\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n\r\n <div class=\"button-parent\">\r\n <ng-container *ngIf=\"currentTab == 'BAG'\">\r\n <div class=\"btn mobile-fixed\" (click)=\"proceedToCheckout()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout Cart'}}</div>\r\n <div class=\"btn\" (click)=\"proceedToListPage()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue Shopping'}}</div>\r\n </ng-container>\r\n \r\n <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\r\n <div class=\"btn mobile-fixed\" (click)=\"proceedToPayment()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[2]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[2]?.content?.label ?? 'Place Order'}}</div>\r\n </ng-container>\r\n <!-- <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\r\n <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{text.value}}</div>\r\n </ng-container>\r\n <!-- <div class=\"description d-flex mt-4\">\r\n Looks like you have not added anything to your cart. Go ahead & explore top categories.\r\n </div> -->\r\n </div>\r\n </div>\r\n </section>\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</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important;border:1px solid lightgray}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel,.right-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap}.product-img{width:82px}.col-md-6{margin-left:18px!important}.mobile-fixed{width:87%;position:fixed;bottom:10px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i11.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type:
|
|
6884
6875
|
//DIRECTIVE
|
|
6885
6876
|
ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: AddressComponent, selector: "simpo-address", inputs: ["responseData", "data", "isCart"], outputs: ["selectedAddress"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i12.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
|
|
6886
6877
|
}
|
|
@@ -6899,7 +6890,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
6899
6890
|
HoverDirective,
|
|
6900
6891
|
AddressComponent,
|
|
6901
6892
|
ToastModule
|
|
6902
|
-
], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\" [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\" *ngIf=\"responseData?.orderedItems?.length\">\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"currentTab = 'ADDRESS'\">Address</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" style=\"cursor: auto;\">Payment</span>\r\n </div>\r\n <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container [ngSwitch]=\"currentTab\">\r\n <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\r\n <div class=\"my-bag\">\r\n My Bag <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n </div>\r\n <div class=\"cart-items\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <div class=\"item-parent d-flex\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: 10px;\">\r\n <div class=\"lh-23\">\r\n <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n </div>\r\n <ng-container *ngIf=\"item.itemVariant\"> \r\n <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n <div class=\"fw-bold\">{{ varient }} : </div>\r\n <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\r\n <div class=\"fw-normal\" style=\"margin-left: 5px;\"> {{ item.itemVariant.properties[varient] | uppercase }}</div>\r\n </div>\r\n </ng-container>\r\n <div class=\"item-quantity\">\r\n <ng-container *ngIf=\"!isItemLoading(item.varientId)\">\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n </ng-container>\r\n <ng-container *ngIf=\"isItemLoading(item.varientId)\">\r\n <div class=\"d-flex\"> <i class=\"fa fa-spinner fa-spin\" style=\"font-size:24px; margin-right: 10px;\"></i> <span>Loading...</span></div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 position-relative\" style=\"margin-left: auto;\">\r\n <div class=\"item-price\"><span [innerHTML]='currency'></span> {{((item.discountedPrice) * item.quantity) | number: '1.0-2'}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\" [style.right.px]=\"isMobile ? '5' : '0'\">delete</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\r\n <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\" [data]=\"data\" (selectedAddress)=\"addressSelected($event)\"></simpo-address>\r\n </div>\r\n <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\r\n </ng-container>\r\n <div class=\"right-panel\">\r\n <div class=\"my-bag\">\r\n Price Details\r\n </div>\r\n <div class=\"price-details\">\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\">Total Price</div>\r\n <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\">Total Tax</div>\r\n <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalTax ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n <div class=\"price-parent-block\"\r\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <div class=\"price-type\">Delivery Charge</div>\r\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges | number: '1.0-2'}}</div>\r\n </div>\r\n <hr>\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n\r\n <div class=\"button-parent\">\r\n <ng-container *ngIf=\"currentTab == 'BAG'\">\r\n <div class=\"btn mobile-fixed\" (click)=\"proceedToCheckout()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout Cart'}}</div>\r\n <div class=\"btn\" (click)=\"proceedToListPage()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue Shopping'}}</div>\r\n </ng-container>\r\n \r\n <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\r\n <div class=\"btn mobile-fixed\" (click)=\"proceedToPayment()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[2]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[2]?.content?.label ?? 'Place Order'}}</div>\r\n </ng-container>\r\n <!-- <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\r\n <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{text.value}}</div>\r\n </ng-container>\r\n <!-- <div class=\"description d-flex mt-4\">\r\n Looks like you have not added anything to your cart. Go ahead & explore top categories.\r\n </div> -->\r\n </div>\r\n </div>\r\n </section>\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</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important;border:1px solid lightgray}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel,.right-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap}.product-img{width:82px}.col-md-6{margin-left:18px!important}.mobile-fixed{width:87%;position:fixed;bottom:10px}}\n"] }]
|
|
6893
|
+
], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\" [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\" *ngIf=\"responseData?.orderedItems?.length\">\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"currentTab = 'ADDRESS'\">Address</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" style=\"cursor: auto;\">Payment</span>\r\n </div>\r\n <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container [ngSwitch]=\"currentTab\">\r\n <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\r\n <div class=\"my-bag\">\r\n My Bag <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n </div>\r\n <div class=\"cart-items\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <div class=\"item-parent d-flex\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img loading=\"lazy\" class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: 10px;\">\r\n <div class=\"lh-23\">\r\n <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n </div>\r\n <ng-container *ngIf=\"item.itemVariant\"> \r\n <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n <div class=\"fw-bold\">{{ varient }} : </div>\r\n <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\r\n <div class=\"fw-normal\" style=\"margin-left: 5px;\"> {{ item.itemVariant.properties[varient] | uppercase }}</div>\r\n </div>\r\n </ng-container>\r\n <div class=\"item-quantity\">\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 position-relative\" style=\"margin-left: auto;\">\r\n <div class=\"item-price\"><span [innerHTML]='currency'></span> {{((item.discountedPrice) * item.quantity) | number: '1.0-2'}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\" [style.right.px]=\"isMobile ? '5' : '0'\">delete</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\r\n <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\" [data]=\"data\" (selectedAddress)=\"addressSelected($event)\"></simpo-address>\r\n </div>\r\n <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\r\n </ng-container>\r\n <div class=\"right-panel\">\r\n <div class=\"my-bag\">\r\n Price Details\r\n </div>\r\n <div class=\"price-details\">\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\">Total Price</div>\r\n <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\">Total Tax</div>\r\n <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalTax ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n <div class=\"price-parent-block\"\r\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <div class=\"price-type\">Delivery Charge</div>\r\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges | number: '1.0-2'}}</div>\r\n </div>\r\n <hr>\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n\r\n <div class=\"button-parent\">\r\n <ng-container *ngIf=\"currentTab == 'BAG'\">\r\n <div class=\"btn mobile-fixed\" (click)=\"proceedToCheckout()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout Cart'}}</div>\r\n <div class=\"btn\" (click)=\"proceedToListPage()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue Shopping'}}</div>\r\n </ng-container>\r\n \r\n <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\r\n <div class=\"btn mobile-fixed\" (click)=\"proceedToPayment()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[2]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[2]?.content?.label ?? 'Place Order'}}</div>\r\n </ng-container>\r\n <!-- <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\r\n <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{text.value}}</div>\r\n </ng-container>\r\n <!-- <div class=\"description d-flex mt-4\">\r\n Looks like you have not added anything to your cart. Go ahead & explore top categories.\r\n </div> -->\r\n </div>\r\n </div>\r\n </section>\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</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important;border:1px solid lightgray}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel,.right-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap}.product-img{width:82px}.col-md-6{margin-left:18px!important}.mobile-fixed{width:87%;position:fixed;bottom:10px}}\n"] }]
|
|
6903
6894
|
}], ctorParameters: () => [{ type: EventsService }, { type: CartService }, { type: i2$3.Router }, { type: RestService }, { type: i3.MatDialog }, { type: StorageServiceService }, { type: i5.MessageService }], propDecorators: { data: [{
|
|
6904
6895
|
type: Input
|
|
6905
6896
|
}], responseData: [{
|
|
@@ -6935,7 +6926,7 @@ class CheckoutComponent extends BaseSection {
|
|
|
6935
6926
|
return BUSINESS_CONSTANTS.CURRENCY;
|
|
6936
6927
|
}
|
|
6937
6928
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CheckoutComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6938
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CheckoutComponent, isStandalone: true, selector: "simpo-checkout", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div class=\"row\">\r\n <div class=\"col-md-7 col-12\" *ngIf=\"editDeliveryAddress\">\r\n <div class=\"shipping-label heading-large\">Shipping To</div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Name</label>\r\n <input [(ngModel)]=\"responseData.userDetails.userName\" type=\"text\" placeholder=\"Enter Name\"\r\n class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Mobile Number</label>\r\n <input [(ngModel)]=\"responseData.userDetails.mobile\" type=\"number\" placeholder=\"Enter number\"\r\n class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Email</label>\r\n <input [(ngModel)]=\"responseData.userDetails.email\" type=\"email\" placeholder=\"Enter email\"\r\n class=\"input-field\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"shipping-label\" style=\"margin-top: 15px;\">Shipping Address</div>\r\n <div class=\"row\">\r\n <div class=\"col-12 input-parent\">\r\n <label for=\"\">Address</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.addressLine1\" type=\"text\"\r\n placeholder=\"Flat/House No, Building, Colony\" class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Locality/Area</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.localityName\" type=\"text\"\r\n placeholder=\"Eg: Jaybheri Enclave, Gachibowli\" class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Landmark</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.landmark\" type=\"text\"\r\n placeholder=\"Eg: Near SBI Bank\" class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Pincode</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.zipCode\" type=\"number\" placeholder=\"Eg: 500032\"\r\n class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">City</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.cityName\" type=\"text\"\r\n placeholder=\"Eg: Hyderabad\" class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">State</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.stateName\" type=\"text\"\r\n placeholder=\"Eg: Telangana\" class=\"input-field\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-7 col-12\" *ngIf=\"!editDeliveryAddress\">\r\n <div class=\"shipping-label\">Delivery Address</div>\r\n <div class=\"delivery-address\">\r\n <div style=\"position: absolute;right: 15px;\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/library-media/813827c1709186499689edit%201.png\"\r\n alt=\"\" style=\"cursor: pointer;\" (click)=\"editDeliveryAddress = true\">\r\n </div>\r\n <div class=\"userName\">{{responseData?.userDetails.userName}}</div>\r\n <div class=\"user-details\" style=\"margin-top: 5px;\">\r\n {{responseData?.userDetails.deliveryAddress?.addressLine1}},\r\n {{responseData?.userDetails.deliveryAddress?.localityName}}</div>\r\n <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.cityName}},\r\n {{responseData?.userDetails.deliveryAddress?.stateName}}</div>\r\n <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.countryName}} -\r\n {{responseData?.userDetails.deliveryAddress?.zipCode}}</div>\r\n <div class=\"user-details\" style=\"margin-top: 5px;\">Phone : <span\r\n style=\"font-weight: 500;\">{{responseData?.userDetails.mobile}}</span></div>\r\n </div>\r\n </div>\r\n <div class=\"offset-md-1 col-md-4 col-12 right-section\">\r\n <div class=\"shipping-label heading-large lh-normal\">\r\n Price Details\r\n </div>\r\n <div class=\"price-details\">\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\r\n <div class=\"price-type\">Total MRP</div>\r\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.totalNetValue}}</div>\r\n </div>\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\r\n <div class=\"price-type\">Total Tax</div>\r\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData?.billdetails?.totalTax}}</div>\r\n </div>\r\n <div class=\"price-parent-block\"\r\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <div class=\"price-type\">Delivery Charge</div>\r\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges}}</div>\r\n </div>\r\n <hr>\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.totalAmount\">\r\n <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{responseData.totalAmount}}</div>\r\n </div>\r\n\r\n <div class=\"button-parent\">\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" (click)=\"placeOrder()\">{{content?.button}}</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n", styles: [".container{margin-top:30px}.shipping-label{font-weight:600;font-size:18px;color:#141514;margin-bottom:5px}.input-parent{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}.input-label{font-family:Inter;font-weight:400;font-size:14px;color:#141514}.input-field{height:40px;border:2px solid#D0D5DD;border-radius:5px;padding-left:10px;font-size:14px;outline:none}.my-bag{font-size:16px;font-weight:600;font-family:Poppins;color:#000}.my-bag span{color:#939393}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px;font-family:Poppins}.coupon-desc{color:#939393;font-size:12px;font-family:Poppins;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600;font-family:Poppins}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:14px;font-family:Poppins;color:#434443}.price-value{font-weight:500;font-family:Poppins;font-size:16px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}.button-parent button{padding-top:7px!important;padding-bottom:7px!important;font-size:16px!important}.delivery-address{border:1px solid#D0D5DD;padding:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;position:relative}.userName{font-size:18px;font-weight:500;font-family:Poppins;color:#000}.user-details{font-weight:400;font-size:16px;font-family:Poppins}.lh-normal{line-height:normal}hr{border:1px solid #E8E8E8}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media only screen and (max-width : 475px){.right-section{margin-top:15px}label{margin-bottom:6px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i7.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: i7.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i11.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type:
|
|
6929
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CheckoutComponent, isStandalone: true, selector: "simpo-checkout", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div class=\"row\">\r\n <div class=\"col-md-7 col-12\" *ngIf=\"editDeliveryAddress\">\r\n <div class=\"shipping-label heading-large\">Shipping To</div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Name</label>\r\n <input [(ngModel)]=\"responseData.userDetails.userName\" type=\"text\" placeholder=\"Enter Name\"\r\n class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Mobile Number</label>\r\n <input [(ngModel)]=\"responseData.userDetails.mobile\" type=\"number\" placeholder=\"Enter number\"\r\n class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Email</label>\r\n <input [(ngModel)]=\"responseData.userDetails.email\" type=\"email\" placeholder=\"Enter email\"\r\n class=\"input-field\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"shipping-label\" style=\"margin-top: 15px;\">Shipping Address</div>\r\n <div class=\"row\">\r\n <div class=\"col-12 input-parent\">\r\n <label for=\"\">Address</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.addressLine1\" type=\"text\"\r\n placeholder=\"Flat/House No, Building, Colony\" class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Locality/Area</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.localityName\" type=\"text\"\r\n placeholder=\"Eg: Jaybheri Enclave, Gachibowli\" class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Landmark</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.landmark\" type=\"text\"\r\n placeholder=\"Eg: Near SBI Bank\" class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Pincode</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.zipCode\" type=\"number\" placeholder=\"Eg: 500032\"\r\n class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">City</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.cityName\" type=\"text\"\r\n placeholder=\"Eg: Hyderabad\" class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">State</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.stateName\" type=\"text\"\r\n placeholder=\"Eg: Telangana\" class=\"input-field\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-7 col-12\" *ngIf=\"!editDeliveryAddress\">\r\n <div class=\"shipping-label\">Delivery Address</div>\r\n <div class=\"delivery-address\">\r\n <div style=\"position: absolute;right: 15px;\">\r\n <img loading=\"lazy\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/library-media/813827c1709186499689edit%201.png\"\r\n alt=\"\" style=\"cursor: pointer;\" (click)=\"editDeliveryAddress = true\">\r\n </div>\r\n <div class=\"userName\">{{responseData?.userDetails.userName}}</div>\r\n <div class=\"user-details\" style=\"margin-top: 5px;\">\r\n {{responseData?.userDetails.deliveryAddress?.addressLine1}},\r\n {{responseData?.userDetails.deliveryAddress?.localityName}}</div>\r\n <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.cityName}},\r\n {{responseData?.userDetails.deliveryAddress?.stateName}}</div>\r\n <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.countryName}} -\r\n {{responseData?.userDetails.deliveryAddress?.zipCode}}</div>\r\n <div class=\"user-details\" style=\"margin-top: 5px;\">Phone : <span\r\n style=\"font-weight: 500;\">{{responseData?.userDetails.mobile}}</span></div>\r\n </div>\r\n </div>\r\n <div class=\"offset-md-1 col-md-4 col-12 right-section\">\r\n <div class=\"shipping-label heading-large lh-normal\">\r\n Price Details\r\n </div>\r\n <div class=\"price-details\">\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\r\n <div class=\"price-type\">Total MRP</div>\r\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.totalNetValue}}</div>\r\n </div>\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\r\n <div class=\"price-type\">Total Tax</div>\r\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData?.billdetails?.totalTax}}</div>\r\n </div>\r\n <div class=\"price-parent-block\"\r\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <div class=\"price-type\">Delivery Charge</div>\r\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges}}</div>\r\n </div>\r\n <hr>\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.totalAmount\">\r\n <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{responseData.totalAmount}}</div>\r\n </div>\r\n\r\n <div class=\"button-parent\">\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" (click)=\"placeOrder()\">{{content?.button}}</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n", styles: [".container{margin-top:30px}.shipping-label{font-weight:600;font-size:18px;color:#141514;margin-bottom:5px}.input-parent{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}.input-label{font-family:Inter;font-weight:400;font-size:14px;color:#141514}.input-field{height:40px;border:2px solid#D0D5DD;border-radius:5px;padding-left:10px;font-size:14px;outline:none}.my-bag{font-size:16px;font-weight:600;font-family:Poppins;color:#000}.my-bag span{color:#939393}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px;font-family:Poppins}.coupon-desc{color:#939393;font-size:12px;font-family:Poppins;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600;font-family:Poppins}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:14px;font-family:Poppins;color:#434443}.price-value{font-weight:500;font-family:Poppins;font-size:16px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}.button-parent button{padding-top:7px!important;padding-bottom:7px!important;font-size:16px!important}.delivery-address{border:1px solid#D0D5DD;padding:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;position:relative}.userName{font-size:18px;font-weight:500;font-family:Poppins;color:#000}.user-details{font-weight:400;font-size:16px;font-family:Poppins}.lh-normal{line-height:normal}hr{border:1px solid #E8E8E8}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media only screen and (max-width : 475px){.right-section{margin-top:15px}label{margin-bottom:6px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i7.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: i7.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i11.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type:
|
|
6939
6930
|
//DIRECTIVE
|
|
6940
6931
|
ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }] }); }
|
|
6941
6932
|
}
|
|
@@ -6948,7 +6939,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
6948
6939
|
AnimationDirective,
|
|
6949
6940
|
ContentFitDirective,
|
|
6950
6941
|
HoverDirective
|
|
6951
|
-
], template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div class=\"row\">\r\n <div class=\"col-md-7 col-12\" *ngIf=\"editDeliveryAddress\">\r\n <div class=\"shipping-label heading-large\">Shipping To</div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Name</label>\r\n <input [(ngModel)]=\"responseData.userDetails.userName\" type=\"text\" placeholder=\"Enter Name\"\r\n class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Mobile Number</label>\r\n <input [(ngModel)]=\"responseData.userDetails.mobile\" type=\"number\" placeholder=\"Enter number\"\r\n class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Email</label>\r\n <input [(ngModel)]=\"responseData.userDetails.email\" type=\"email\" placeholder=\"Enter email\"\r\n class=\"input-field\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"shipping-label\" style=\"margin-top: 15px;\">Shipping Address</div>\r\n <div class=\"row\">\r\n <div class=\"col-12 input-parent\">\r\n <label for=\"\">Address</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.addressLine1\" type=\"text\"\r\n placeholder=\"Flat/House No, Building, Colony\" class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Locality/Area</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.localityName\" type=\"text\"\r\n placeholder=\"Eg: Jaybheri Enclave, Gachibowli\" class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Landmark</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.landmark\" type=\"text\"\r\n placeholder=\"Eg: Near SBI Bank\" class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Pincode</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.zipCode\" type=\"number\" placeholder=\"Eg: 500032\"\r\n class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">City</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.cityName\" type=\"text\"\r\n placeholder=\"Eg: Hyderabad\" class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">State</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.stateName\" type=\"text\"\r\n placeholder=\"Eg: Telangana\" class=\"input-field\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-7 col-12\" *ngIf=\"!editDeliveryAddress\">\r\n <div class=\"shipping-label\">Delivery Address</div>\r\n <div class=\"delivery-address\">\r\n <div style=\"position: absolute;right: 15px;\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/library-media/813827c1709186499689edit%201.png\"\r\n alt=\"\" style=\"cursor: pointer;\" (click)=\"editDeliveryAddress = true\">\r\n </div>\r\n <div class=\"userName\">{{responseData?.userDetails.userName}}</div>\r\n <div class=\"user-details\" style=\"margin-top: 5px;\">\r\n {{responseData?.userDetails.deliveryAddress?.addressLine1}},\r\n {{responseData?.userDetails.deliveryAddress?.localityName}}</div>\r\n <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.cityName}},\r\n {{responseData?.userDetails.deliveryAddress?.stateName}}</div>\r\n <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.countryName}} -\r\n {{responseData?.userDetails.deliveryAddress?.zipCode}}</div>\r\n <div class=\"user-details\" style=\"margin-top: 5px;\">Phone : <span\r\n style=\"font-weight: 500;\">{{responseData?.userDetails.mobile}}</span></div>\r\n </div>\r\n </div>\r\n <div class=\"offset-md-1 col-md-4 col-12 right-section\">\r\n <div class=\"shipping-label heading-large lh-normal\">\r\n Price Details\r\n </div>\r\n <div class=\"price-details\">\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\r\n <div class=\"price-type\">Total MRP</div>\r\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.totalNetValue}}</div>\r\n </div>\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\r\n <div class=\"price-type\">Total Tax</div>\r\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData?.billdetails?.totalTax}}</div>\r\n </div>\r\n <div class=\"price-parent-block\"\r\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <div class=\"price-type\">Delivery Charge</div>\r\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges}}</div>\r\n </div>\r\n <hr>\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.totalAmount\">\r\n <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{responseData.totalAmount}}</div>\r\n </div>\r\n\r\n <div class=\"button-parent\">\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" (click)=\"placeOrder()\">{{content?.button}}</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n", styles: [".container{margin-top:30px}.shipping-label{font-weight:600;font-size:18px;color:#141514;margin-bottom:5px}.input-parent{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}.input-label{font-family:Inter;font-weight:400;font-size:14px;color:#141514}.input-field{height:40px;border:2px solid#D0D5DD;border-radius:5px;padding-left:10px;font-size:14px;outline:none}.my-bag{font-size:16px;font-weight:600;font-family:Poppins;color:#000}.my-bag span{color:#939393}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px;font-family:Poppins}.coupon-desc{color:#939393;font-size:12px;font-family:Poppins;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600;font-family:Poppins}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:14px;font-family:Poppins;color:#434443}.price-value{font-weight:500;font-family:Poppins;font-size:16px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}.button-parent button{padding-top:7px!important;padding-bottom:7px!important;font-size:16px!important}.delivery-address{border:1px solid#D0D5DD;padding:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;position:relative}.userName{font-size:18px;font-weight:500;font-family:Poppins;color:#000}.user-details{font-weight:400;font-size:16px;font-family:Poppins}.lh-normal{line-height:normal}hr{border:1px solid #E8E8E8}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media only screen and (max-width : 475px){.right-section{margin-top:15px}label{margin-bottom:6px}}\n"] }]
|
|
6942
|
+
], template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div class=\"row\">\r\n <div class=\"col-md-7 col-12\" *ngIf=\"editDeliveryAddress\">\r\n <div class=\"shipping-label heading-large\">Shipping To</div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Name</label>\r\n <input [(ngModel)]=\"responseData.userDetails.userName\" type=\"text\" placeholder=\"Enter Name\"\r\n class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Mobile Number</label>\r\n <input [(ngModel)]=\"responseData.userDetails.mobile\" type=\"number\" placeholder=\"Enter number\"\r\n class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Email</label>\r\n <input [(ngModel)]=\"responseData.userDetails.email\" type=\"email\" placeholder=\"Enter email\"\r\n class=\"input-field\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"shipping-label\" style=\"margin-top: 15px;\">Shipping Address</div>\r\n <div class=\"row\">\r\n <div class=\"col-12 input-parent\">\r\n <label for=\"\">Address</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.addressLine1\" type=\"text\"\r\n placeholder=\"Flat/House No, Building, Colony\" class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Locality/Area</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.localityName\" type=\"text\"\r\n placeholder=\"Eg: Jaybheri Enclave, Gachibowli\" class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Landmark</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.landmark\" type=\"text\"\r\n placeholder=\"Eg: Near SBI Bank\" class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Pincode</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.zipCode\" type=\"number\" placeholder=\"Eg: 500032\"\r\n class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">City</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.cityName\" type=\"text\"\r\n placeholder=\"Eg: Hyderabad\" class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">State</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.stateName\" type=\"text\"\r\n placeholder=\"Eg: Telangana\" class=\"input-field\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-7 col-12\" *ngIf=\"!editDeliveryAddress\">\r\n <div class=\"shipping-label\">Delivery Address</div>\r\n <div class=\"delivery-address\">\r\n <div style=\"position: absolute;right: 15px;\">\r\n <img loading=\"lazy\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/library-media/813827c1709186499689edit%201.png\"\r\n alt=\"\" style=\"cursor: pointer;\" (click)=\"editDeliveryAddress = true\">\r\n </div>\r\n <div class=\"userName\">{{responseData?.userDetails.userName}}</div>\r\n <div class=\"user-details\" style=\"margin-top: 5px;\">\r\n {{responseData?.userDetails.deliveryAddress?.addressLine1}},\r\n {{responseData?.userDetails.deliveryAddress?.localityName}}</div>\r\n <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.cityName}},\r\n {{responseData?.userDetails.deliveryAddress?.stateName}}</div>\r\n <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.countryName}} -\r\n {{responseData?.userDetails.deliveryAddress?.zipCode}}</div>\r\n <div class=\"user-details\" style=\"margin-top: 5px;\">Phone : <span\r\n style=\"font-weight: 500;\">{{responseData?.userDetails.mobile}}</span></div>\r\n </div>\r\n </div>\r\n <div class=\"offset-md-1 col-md-4 col-12 right-section\">\r\n <div class=\"shipping-label heading-large lh-normal\">\r\n Price Details\r\n </div>\r\n <div class=\"price-details\">\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\r\n <div class=\"price-type\">Total MRP</div>\r\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.totalNetValue}}</div>\r\n </div>\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\r\n <div class=\"price-type\">Total Tax</div>\r\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData?.billdetails?.totalTax}}</div>\r\n </div>\r\n <div class=\"price-parent-block\"\r\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <div class=\"price-type\">Delivery Charge</div>\r\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges}}</div>\r\n </div>\r\n <hr>\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.totalAmount\">\r\n <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{responseData.totalAmount}}</div>\r\n </div>\r\n\r\n <div class=\"button-parent\">\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" (click)=\"placeOrder()\">{{content?.button}}</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n", styles: [".container{margin-top:30px}.shipping-label{font-weight:600;font-size:18px;color:#141514;margin-bottom:5px}.input-parent{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}.input-label{font-family:Inter;font-weight:400;font-size:14px;color:#141514}.input-field{height:40px;border:2px solid#D0D5DD;border-radius:5px;padding-left:10px;font-size:14px;outline:none}.my-bag{font-size:16px;font-weight:600;font-family:Poppins;color:#000}.my-bag span{color:#939393}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px;font-family:Poppins}.coupon-desc{color:#939393;font-size:12px;font-family:Poppins;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600;font-family:Poppins}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:14px;font-family:Poppins;color:#434443}.price-value{font-weight:500;font-family:Poppins;font-size:16px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}.button-parent button{padding-top:7px!important;padding-bottom:7px!important;font-size:16px!important}.delivery-address{border:1px solid#D0D5DD;padding:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;position:relative}.userName{font-size:18px;font-weight:500;font-family:Poppins;color:#000}.user-details{font-weight:400;font-size:16px;font-family:Poppins}.lh-normal{line-height:normal}hr{border:1px solid #E8E8E8}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media only screen and (max-width : 475px){.right-section{margin-top:15px}label{margin-bottom:6px}}\n"] }]
|
|
6952
6943
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
6953
6944
|
type: Input
|
|
6954
6945
|
}], responseData: [{
|
|
@@ -6982,24 +6973,7 @@ class WhislistComponent extends BaseSection {
|
|
|
6982
6973
|
"totalOfferedValue": 0,
|
|
6983
6974
|
"deliveryCharges": 0
|
|
6984
6975
|
},
|
|
6985
|
-
addressDetails:
|
|
6986
|
-
"addressType": "",
|
|
6987
|
-
"receiverName": "",
|
|
6988
|
-
"receiverPhone": "",
|
|
6989
|
-
"countryName": "",
|
|
6990
|
-
"stateName": "",
|
|
6991
|
-
"cityName": "",
|
|
6992
|
-
"localityName": "",
|
|
6993
|
-
"addressLine1": "",
|
|
6994
|
-
"addressLine2": "",
|
|
6995
|
-
"landmark": "",
|
|
6996
|
-
"zipCode": "",
|
|
6997
|
-
"geolocation": {
|
|
6998
|
-
"latitude": 0,
|
|
6999
|
-
"longitude": 0
|
|
7000
|
-
},
|
|
7001
|
-
"stateCode": ""
|
|
7002
|
-
},
|
|
6976
|
+
addressDetails: null,
|
|
7003
6977
|
platform: "WEB",
|
|
7004
6978
|
cartType: "WISHLIST",
|
|
7005
6979
|
userDetails: {
|
|
@@ -7151,7 +7125,7 @@ class WhislistComponent extends BaseSection {
|
|
|
7151
7125
|
return BUSINESS_CONSTANTS.CURRENCY;
|
|
7152
7126
|
}
|
|
7153
7127
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: WhislistComponent, deps: [{ token: CartService }, { token: EventsService }, { token: StorageServiceService }, { token: RestService }, { token: i5.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7154
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: WhislistComponent, isStandalone: true, selector: "simpo-whislist", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <div class=\"left-panel\">\r\n <div class=\"my-bag\"[style.color]=\"styles?.background?.accentColor\">\r\n My Wishlist <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n </div>\r\n\r\n <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <div class=\"cart-items\">\r\n <div class=\"row item-parent\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"col-md-6 h-100 item-desc\">\r\n <div class=\"lh-23\">\r\n <div class=\"item-name heading-large\" [style.color]=\"styles?.background?.accentColor\">{{item.itemName}}</div>\r\n <div class=\"price-with-tax\" [style.color]=\"styles?.background?.accentColor\">\r\n <span [innerHTML]='currency'></span> {{item.discountedPrice}}\r\n </div>\r\n <ng-container *ngIf=\"item.itemVariant\"> \r\n <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n <div class=\"fw-bold\"[style.color]=\"styles?.background?.accentColor\">{{ varient }} : </div>\r\n <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\r\n <div class=\"fw-normal\" style=\"margin-left: 5px;\"[style.color]=\"styles?.background?.accentColor\"> {{ item.itemVariant.properties[varient] | uppercase }}</div>\r\n </div>\r\n </ng-container>\r\n <div class=\"d-flex action-btn\" style=\"gap: 5px;\">\r\n <div class=\"item-quantity\" *ngIf=\"item.quantity\" [style.color]=\"styles?.background?.accentColor\">\r\n <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\r\n </div>\r\n <div class=\"item-quantity\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\">Add Quantity\r\n </div>\r\n <div class=\"item-quantity\" (click)=\"moveToCart(item)\" [style.color]=\"styles?.background?.accentColor\">Move to Cart</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"position-relative itemPrice\" style=\"margin-left: auto; width: 30%;\">\r\n <div class=\"item-price\" *ngIf=\"item.quantity\"><span [innerHTML]='currency'></span>\r\n {{(item.discountedPrice) * item.quantity}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\">delete</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <div class=\"heading-medium d-flex justify-content-center\" [style.color]=\"styles.background.accentColor\">\r\n Your Whislist is empty\r\n </div>\r\n <div class=\"description d-flex mt-4\" [style.color]=\"styles.background.accentColor\">\r\n Looks like you have not added anything to your Whislist. Go ahead & explore top categories.\r\n </div>\r\n </div>\r\n </div>\r\n </section>\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</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>", styles: [".cart-parent{display:flex;flex-wrap:wrap;margin-top:15px;gap:20px}.left-panel{width:100%}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media only screen and (max-width: 475px){.cart-parent{flex-direction:column}.item-parent{flex-direction:row!important;flex-wrap:nowrap!important}.cart-items,.left-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-desc{width:73%}.itemPrice{width:24%!important}.action-btn{flex-wrap:wrap}.action-btn .item-quantity{width:100%;text-align:center;justify-content:center!important}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i11.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "directive", type:
|
|
7128
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: WhislistComponent, isStandalone: true, selector: "simpo-whislist", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <div class=\"left-panel\">\r\n <div class=\"my-bag\"[style.color]=\"styles?.background?.accentColor\">\r\n My Wishlist <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n </div>\r\n\r\n <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <div class=\"cart-items\">\r\n <div class=\"row item-parent\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img loading=\"lazy\" class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"col-md-6 h-100 item-desc\">\r\n <div class=\"lh-23\">\r\n <div class=\"item-name heading-large\" [style.color]=\"styles?.background?.accentColor\">{{item.itemName}}</div>\r\n <div class=\"price-with-tax\" [style.color]=\"styles?.background?.accentColor\">\r\n <span [innerHTML]='currency'></span> {{item.discountedPrice}}\r\n </div>\r\n <ng-container *ngIf=\"item.itemVariant\"> \r\n <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n <div class=\"fw-bold\"[style.color]=\"styles?.background?.accentColor\">{{ varient }} : </div>\r\n <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\r\n <div class=\"fw-normal\" style=\"margin-left: 5px;\"[style.color]=\"styles?.background?.accentColor\"> {{ item.itemVariant.properties[varient] | uppercase }}</div>\r\n </div>\r\n </ng-container>\r\n <div class=\"d-flex action-btn\" style=\"gap: 5px;\">\r\n <div class=\"item-quantity\" *ngIf=\"item.quantity\" [style.color]=\"styles?.background?.accentColor\">\r\n <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\r\n </div>\r\n <div class=\"item-quantity\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\">Add Quantity\r\n </div>\r\n <div class=\"item-quantity\" (click)=\"moveToCart(item)\" [style.color]=\"styles?.background?.accentColor\">Move to Cart</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"position-relative itemPrice\" style=\"margin-left: auto; width: 30%;\">\r\n <div class=\"item-price\" *ngIf=\"item.quantity\"><span [innerHTML]='currency'></span>\r\n {{(item.discountedPrice) * item.quantity}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\">delete</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <div class=\"heading-medium d-flex justify-content-center\" [style.color]=\"styles.background.accentColor\">\r\n Your Whislist is empty\r\n </div>\r\n <div class=\"description d-flex mt-4\" [style.color]=\"styles.background.accentColor\">\r\n Looks like you have not added anything to your Whislist. Go ahead & explore top categories.\r\n </div>\r\n </div>\r\n </div>\r\n </section>\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</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>", styles: [".cart-parent{display:flex;flex-wrap:wrap;margin-top:15px;gap:20px}.left-panel{width:100%}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media only screen and (max-width: 475px){.cart-parent{flex-direction:column}.item-parent{flex-direction:row!important;flex-wrap:nowrap!important}.cart-items,.left-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-desc{width:73%}.itemPrice{width:24%!important}.action-btn{flex-wrap:wrap}.action-btn .item-quantity{width:100%;text-align:center;justify-content:center!important}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i11.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "directive", type:
|
|
7155
7129
|
//DIRECTIVE
|
|
7156
7130
|
BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i12.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
|
|
7157
7131
|
}
|
|
@@ -7168,7 +7142,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
7168
7142
|
ContentFitDirective,
|
|
7169
7143
|
HoverDirective,
|
|
7170
7144
|
ToastModule
|
|
7171
|
-
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <div class=\"left-panel\">\r\n <div class=\"my-bag\"[style.color]=\"styles?.background?.accentColor\">\r\n My Wishlist <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n </div>\r\n\r\n <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <div class=\"cart-items\">\r\n <div class=\"row item-parent\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"col-md-6 h-100 item-desc\">\r\n <div class=\"lh-23\">\r\n <div class=\"item-name heading-large\" [style.color]=\"styles?.background?.accentColor\">{{item.itemName}}</div>\r\n <div class=\"price-with-tax\" [style.color]=\"styles?.background?.accentColor\">\r\n <span [innerHTML]='currency'></span> {{item.discountedPrice}}\r\n </div>\r\n <ng-container *ngIf=\"item.itemVariant\"> \r\n <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n <div class=\"fw-bold\"[style.color]=\"styles?.background?.accentColor\">{{ varient }} : </div>\r\n <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\r\n <div class=\"fw-normal\" style=\"margin-left: 5px;\"[style.color]=\"styles?.background?.accentColor\"> {{ item.itemVariant.properties[varient] | uppercase }}</div>\r\n </div>\r\n </ng-container>\r\n <div class=\"d-flex action-btn\" style=\"gap: 5px;\">\r\n <div class=\"item-quantity\" *ngIf=\"item.quantity\" [style.color]=\"styles?.background?.accentColor\">\r\n <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\r\n </div>\r\n <div class=\"item-quantity\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\">Add Quantity\r\n </div>\r\n <div class=\"item-quantity\" (click)=\"moveToCart(item)\" [style.color]=\"styles?.background?.accentColor\">Move to Cart</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"position-relative itemPrice\" style=\"margin-left: auto; width: 30%;\">\r\n <div class=\"item-price\" *ngIf=\"item.quantity\"><span [innerHTML]='currency'></span>\r\n {{(item.discountedPrice) * item.quantity}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\">delete</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <div class=\"heading-medium d-flex justify-content-center\" [style.color]=\"styles.background.accentColor\">\r\n Your Whislist is empty\r\n </div>\r\n <div class=\"description d-flex mt-4\" [style.color]=\"styles.background.accentColor\">\r\n Looks like you have not added anything to your Whislist. Go ahead & explore top categories.\r\n </div>\r\n </div>\r\n </div>\r\n </section>\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</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>", styles: [".cart-parent{display:flex;flex-wrap:wrap;margin-top:15px;gap:20px}.left-panel{width:100%}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media only screen and (max-width: 475px){.cart-parent{flex-direction:column}.item-parent{flex-direction:row!important;flex-wrap:nowrap!important}.cart-items,.left-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-desc{width:73%}.itemPrice{width:24%!important}.action-btn{flex-wrap:wrap}.action-btn .item-quantity{width:100%;text-align:center;justify-content:center!important}}\n"] }]
|
|
7145
|
+
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <div class=\"left-panel\">\r\n <div class=\"my-bag\"[style.color]=\"styles?.background?.accentColor\">\r\n My Wishlist <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n </div>\r\n\r\n <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <div class=\"cart-items\">\r\n <div class=\"row item-parent\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img loading=\"lazy\" class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"col-md-6 h-100 item-desc\">\r\n <div class=\"lh-23\">\r\n <div class=\"item-name heading-large\" [style.color]=\"styles?.background?.accentColor\">{{item.itemName}}</div>\r\n <div class=\"price-with-tax\" [style.color]=\"styles?.background?.accentColor\">\r\n <span [innerHTML]='currency'></span> {{item.discountedPrice}}\r\n </div>\r\n <ng-container *ngIf=\"item.itemVariant\"> \r\n <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n <div class=\"fw-bold\"[style.color]=\"styles?.background?.accentColor\">{{ varient }} : </div>\r\n <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\r\n <div class=\"fw-normal\" style=\"margin-left: 5px;\"[style.color]=\"styles?.background?.accentColor\"> {{ item.itemVariant.properties[varient] | uppercase }}</div>\r\n </div>\r\n </ng-container>\r\n <div class=\"d-flex action-btn\" style=\"gap: 5px;\">\r\n <div class=\"item-quantity\" *ngIf=\"item.quantity\" [style.color]=\"styles?.background?.accentColor\">\r\n <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\r\n </div>\r\n <div class=\"item-quantity\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\">Add Quantity\r\n </div>\r\n <div class=\"item-quantity\" (click)=\"moveToCart(item)\" [style.color]=\"styles?.background?.accentColor\">Move to Cart</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"position-relative itemPrice\" style=\"margin-left: auto; width: 30%;\">\r\n <div class=\"item-price\" *ngIf=\"item.quantity\"><span [innerHTML]='currency'></span>\r\n {{(item.discountedPrice) * item.quantity}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\">delete</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <div class=\"heading-medium d-flex justify-content-center\" [style.color]=\"styles.background.accentColor\">\r\n Your Whislist is empty\r\n </div>\r\n <div class=\"description d-flex mt-4\" [style.color]=\"styles.background.accentColor\">\r\n Looks like you have not added anything to your Whislist. Go ahead & explore top categories.\r\n </div>\r\n </div>\r\n </div>\r\n </section>\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</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>", styles: [".cart-parent{display:flex;flex-wrap:wrap;margin-top:15px;gap:20px}.left-panel{width:100%}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media only screen and (max-width: 475px){.cart-parent{flex-direction:column}.item-parent{flex-direction:row!important;flex-wrap:nowrap!important}.cart-items,.left-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-desc{width:73%}.itemPrice{width:24%!important}.action-btn{flex-wrap:wrap}.action-btn .item-quantity{width:100%;text-align:center;justify-content:center!important}}\n"] }]
|
|
7172
7146
|
}], ctorParameters: () => [{ type: CartService }, { type: EventsService }, { type: StorageServiceService }, { type: RestService }, { type: i5.MessageService }], propDecorators: { responseData: [{
|
|
7173
7147
|
type: Input
|
|
7174
7148
|
}], data: [{
|
|
@@ -7256,7 +7230,7 @@ class OrderDetailsComponent {
|
|
|
7256
7230
|
return this.orderTimiline?.length == 1;
|
|
7257
7231
|
}
|
|
7258
7232
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: OrderDetailsComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7259
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: OrderDetailsComponent, isStandalone: true, selector: "simpo-order-details", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", orderDetailData: "orderDetailData" }, outputs: { goBackEmitter: "goBackEmitter" }, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"d-flex justify-content-between main-section\" [style.flexDirection]=\"isMobile ? 'column' : 'row'\" [style.width.vw]=\"isMobile ? '100' : '65'\" style=\"margin: auto;\">\r\n <div class=\"left\" [style.width.%]=\"isMobile ? '90' : '70'\">\r\n <h1 class=\"fs-3 fw-normal mb-3 d-flex align-items-center onlyDesktop position-relative\" style=\"left: -35px;\">\r\n <mat-icon style=\"cursor: pointer;\" (click)=\"goBack()\">keyboard_arrow_left</mat-icon>\r\n <span>Order Details</span>\r\n </h1>\r\n <div class=\"d-flex justify-content-between align-items-end\">\r\n <div class=\"d-flex flex-column\">\r\n <span class=\"fs-5\">Order {{ orderDetailData?.orderNum }}</span>\r\n <span class=\"fs-6\">{{ orderDetailData?.createdTimeStamp | date: 'medium' }}, {{ orderDetailData?.brandOrderDetails?.[0]?.orderedItems.length }} items | <span [innerHTML]=\"currency\"></span> {{orderDetailData?.brandOrderDetails?.[0]?.billDetails?.totalGrossValue}}</span>\r\n </div>\r\n <span class=\"fw-bold fs-5\">{{orderDetailData?.brandOrderDetails?.[0]?.businessName | titlecase}}</span>\r\n </div>\r\n <hr />\r\n <div class=\"timeline\">\r\n <p-timeline [value]=\"orderTimiline\">\r\n <ng-template pTemplate=\"content\" let-event>\r\n <div class=\"d-flex time-line\">\r\n <mat-icon style=\"margin-right: 10px;\">{{ event.icon }}</mat-icon>\r\n <div class=\"d-flex flex-column ml-2\">\r\n <span class=\"fw-normal fs-6\">{{ event.name }}</span>\r\n <div class=\"fs-6 \">{{event.desc.replaceAll(\"_\", \" \")}}</div>\r\n <div class=\"action-btn\">\r\n <button *ngIf=\"canCancelOrder\">Cancel Order</button>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-timeline>\r\n </div>\r\n <hr />\r\n <div>\r\n <div *ngFor=\"let item of orderDetailData?.brandOrderDetails?.[0]?.orderedItems\" class=\"d-flex mb-2\" style=\"gap: 10px; width: 100%;\">\r\n <img [src]=\"item.imgUrl\" alt=\"\" style=\"height: 85px;width: 85px; border-radius: 5px;\">\r\n <div class=\"d-flex flex-column justify-content-center\" style=\"gap: 6px; width: 89%;\">\r\n <span class=\"fw-bold fs-6\">{{item.itemName}}</span>\r\n <!-- <span class=\"fs-6\">Size: XS</span> -->\r\n <div class=\"d-flex justify-content-between fs-6\">\r\n <span>{{item.quantity}} X <span [innerHTML]=\"currency\"></span> <span class=\"fw-bold\">{{(item.discountedPrice) | number: '1.0-2'}}</span></span>\r\n <span> <span [innerHTML]=\"currency\"></span> <span class=\"fw-bold\">{{(item.discountedPrice * item.quantity) | number: '1.0-2'}}</span></span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <hr />\r\n <div class=\"fs-6\">\r\n <div class=\"d-flex justify-content-between my-2\">\r\n <span class=\"fw-normal\">Item Total</span>\r\n <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span> {{orderDetailData?.billDetails?.totalNetValue | number:'1.0-2'}}</span>\r\n </div>\r\n\r\n <!-- <div class=\"d-flex justify-content-between my-2\">\r\n <span>Delivery</span>\r\n <span>FREE</span>\r\n </div> -->\r\n\r\n <div class=\"d-flex justify-content-between my-2\">\r\n <span class=\"fw-normal\">Grand Total</span>\r\n <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span> {{orderDetailData?.billDetails?.totalNetValue | number:'1.0-2'}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right\" style=\"width: 28%;\" [style.width.%]=\"isMobile ? '90' : '28'\" [style.background]=\"getCardBGColor\">\r\n <h1 class=\"mb-3 fs-5\">User Details</h1>\r\n <div class=\"my-2 fs-6\">\r\n <span style=\"margin-right: 10px;\" [style.color]=\"getSupportingColor(getCardBGColor)\">Name:</span>\r\n <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{orderDetailData?.addressDetails?.receiverName}}</span>\r\n </div>\r\n <div class=\"my-2 fs-6\">\r\n <span style=\"margin-right: 10px\" [style.color]=\"getSupportingColor(getCardBGColor)\">Phone:</span>\r\n <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{ orderDetailData?.addressDetails?.receiverPhone }}</span>\r\n </div>\r\n <div class=\"my-2 fs-6\">\r\n <span style=\"margin-right: 10px\" [style.color]=\"getSupportingColor(getCardBGColor)\">Address:</span>\r\n <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{ orderDetailData?.addressDetails?.addressLine1 }}</span>\r\n </div>\r\n <!-- <div class=\"my-2 fs-6\">\r\n <span style=\"margin-right: 10px\" [style.color]=\"getSupportingColor(getCardBGColor)\">Payment:</span>\r\n <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">Manual Payment</span>\r\n </div> -->\r\n </div>\r\n </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n", styles: [".right{height:240px;padding:15px;background-color:#f8f8f8;border-radius:8px}hr{border-top-width:2px;margin:15px 0}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:92%!important;margin-bottom:4px!important;height:auto!important;padding:15px 0!important}.main-section{width:100%!important;padding:10px 20px}.left{width:100%!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i11.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i4.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "directive", type: i5.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
7233
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: OrderDetailsComponent, isStandalone: true, selector: "simpo-order-details", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", orderDetailData: "orderDetailData" }, outputs: { goBackEmitter: "goBackEmitter" }, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"d-flex justify-content-between main-section\" [style.flexDirection]=\"isMobile ? 'column' : 'row'\" [style.width.vw]=\"isMobile ? '100' : '65'\" style=\"margin: auto;\">\r\n <div class=\"left\" [style.width.%]=\"isMobile ? '90' : '70'\">\r\n <h1 class=\"fs-3 fw-normal mb-3 d-flex align-items-center onlyDesktop position-relative\" style=\"left: -35px;\">\r\n <mat-icon style=\"cursor: pointer;\" (click)=\"goBack()\">keyboard_arrow_left</mat-icon>\r\n <span>Order Details</span>\r\n </h1>\r\n <div class=\"d-flex justify-content-between align-items-end\">\r\n <div class=\"d-flex flex-column\">\r\n <span class=\"fs-5\">Order {{ orderDetailData?.orderNum }}</span>\r\n <span class=\"fs-6\">{{ orderDetailData?.createdTimeStamp | date: 'medium' }}, {{ orderDetailData?.brandOrderDetails?.[0]?.orderedItems.length }} items | <span [innerHTML]=\"currency\"></span> {{orderDetailData?.brandOrderDetails?.[0]?.billDetails?.totalGrossValue}}</span>\r\n </div>\r\n <span class=\"fw-bold fs-5\">{{orderDetailData?.brandOrderDetails?.[0]?.businessName | titlecase}}</span>\r\n </div>\r\n <hr />\r\n <div class=\"timeline\">\r\n <p-timeline [value]=\"orderTimiline\">\r\n <ng-template pTemplate=\"content\" let-event>\r\n <div class=\"d-flex time-line\">\r\n <mat-icon style=\"margin-right: 10px;\">{{ event.icon }}</mat-icon>\r\n <div class=\"d-flex flex-column ml-2\">\r\n <span class=\"fw-normal fs-6\">{{ event.name }}</span>\r\n <div class=\"fs-6 \">{{event.desc.replaceAll(\"_\", \" \")}}</div>\r\n <div class=\"action-btn\">\r\n <button *ngIf=\"canCancelOrder\">Cancel Order</button>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-timeline>\r\n </div>\r\n <hr />\r\n <div>\r\n <div *ngFor=\"let item of orderDetailData?.brandOrderDetails?.[0]?.orderedItems\" class=\"d-flex mb-2\" style=\"gap: 10px; width: 100%;\">\r\n <img loading=\"lazy\" [src]=\"item.imgUrl\" alt=\"\" style=\"height: 85px;width: 85px; border-radius: 5px;\">\r\n <div class=\"d-flex flex-column justify-content-center\" style=\"gap: 6px; width: 89%;\">\r\n <span class=\"fw-bold fs-6\">{{item.itemName}}</span>\r\n <!-- <span class=\"fs-6\">Size: XS</span> -->\r\n <div class=\"d-flex justify-content-between fs-6\">\r\n <span>{{item.quantity}} X <span [innerHTML]=\"currency\"></span> <span class=\"fw-bold\">{{(item.discountedPrice) | number: '1.0-2'}}</span></span>\r\n <span> <span [innerHTML]=\"currency\"></span> <span class=\"fw-bold\">{{(item.discountedPrice * item.quantity) | number: '1.0-2'}}</span></span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <hr />\r\n <div class=\"fs-6\">\r\n <div class=\"d-flex justify-content-between my-2\">\r\n <span class=\"fw-normal\">Item Total</span>\r\n <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span> {{orderDetailData?.billDetails?.totalNetValue | number:'1.0-2'}}</span>\r\n </div>\r\n\r\n <!-- <div class=\"d-flex justify-content-between my-2\">\r\n <span>Delivery</span>\r\n <span>FREE</span>\r\n </div> -->\r\n\r\n <div class=\"d-flex justify-content-between my-2\">\r\n <span class=\"fw-normal\">Grand Total</span>\r\n <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span> {{orderDetailData?.billDetails?.totalNetValue | number:'1.0-2'}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right\" style=\"width: 28%;\" [style.width.%]=\"isMobile ? '90' : '28'\" [style.background]=\"getCardBGColor\">\r\n <h1 class=\"mb-3 fs-5\">User Details</h1>\r\n <div class=\"my-2 fs-6\">\r\n <span style=\"margin-right: 10px;\" [style.color]=\"getSupportingColor(getCardBGColor)\">Name:</span>\r\n <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{orderDetailData?.addressDetails?.receiverName}}</span>\r\n </div>\r\n <div class=\"my-2 fs-6\">\r\n <span style=\"margin-right: 10px\" [style.color]=\"getSupportingColor(getCardBGColor)\">Phone:</span>\r\n <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{ orderDetailData?.addressDetails?.receiverPhone }}</span>\r\n </div>\r\n <div class=\"my-2 fs-6\">\r\n <span style=\"margin-right: 10px\" [style.color]=\"getSupportingColor(getCardBGColor)\">Address:</span>\r\n <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{ orderDetailData?.addressDetails?.addressLine1 }}</span>\r\n </div>\r\n <!-- <div class=\"my-2 fs-6\">\r\n <span style=\"margin-right: 10px\" [style.color]=\"getSupportingColor(getCardBGColor)\">Payment:</span>\r\n <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">Manual Payment</span>\r\n </div> -->\r\n </div>\r\n </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n", styles: [".right{height:240px;padding:15px;background-color:#f8f8f8;border-radius:8px}hr{border-top-width:2px;margin:15px 0}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:92%!important;margin-bottom:4px!important;height:auto!important;padding:15px 0!important}.main-section{width:100%!important;padding:10px 20px}.left{width:100%!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i11.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i4.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "directive", type: i5.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
7260
7234
|
}
|
|
7261
7235
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: OrderDetailsComponent, decorators: [{
|
|
7262
7236
|
type: Component,
|
|
@@ -7265,7 +7239,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
7265
7239
|
SimpoComponentModule,
|
|
7266
7240
|
TimelineModule,
|
|
7267
7241
|
MatIcon
|
|
7268
|
-
], template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"d-flex justify-content-between main-section\" [style.flexDirection]=\"isMobile ? 'column' : 'row'\" [style.width.vw]=\"isMobile ? '100' : '65'\" style=\"margin: auto;\">\r\n <div class=\"left\" [style.width.%]=\"isMobile ? '90' : '70'\">\r\n <h1 class=\"fs-3 fw-normal mb-3 d-flex align-items-center onlyDesktop position-relative\" style=\"left: -35px;\">\r\n <mat-icon style=\"cursor: pointer;\" (click)=\"goBack()\">keyboard_arrow_left</mat-icon>\r\n <span>Order Details</span>\r\n </h1>\r\n <div class=\"d-flex justify-content-between align-items-end\">\r\n <div class=\"d-flex flex-column\">\r\n <span class=\"fs-5\">Order {{ orderDetailData?.orderNum }}</span>\r\n <span class=\"fs-6\">{{ orderDetailData?.createdTimeStamp | date: 'medium' }}, {{ orderDetailData?.brandOrderDetails?.[0]?.orderedItems.length }} items | <span [innerHTML]=\"currency\"></span> {{orderDetailData?.brandOrderDetails?.[0]?.billDetails?.totalGrossValue}}</span>\r\n </div>\r\n <span class=\"fw-bold fs-5\">{{orderDetailData?.brandOrderDetails?.[0]?.businessName | titlecase}}</span>\r\n </div>\r\n <hr />\r\n <div class=\"timeline\">\r\n <p-timeline [value]=\"orderTimiline\">\r\n <ng-template pTemplate=\"content\" let-event>\r\n <div class=\"d-flex time-line\">\r\n <mat-icon style=\"margin-right: 10px;\">{{ event.icon }}</mat-icon>\r\n <div class=\"d-flex flex-column ml-2\">\r\n <span class=\"fw-normal fs-6\">{{ event.name }}</span>\r\n <div class=\"fs-6 \">{{event.desc.replaceAll(\"_\", \" \")}}</div>\r\n <div class=\"action-btn\">\r\n <button *ngIf=\"canCancelOrder\">Cancel Order</button>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-timeline>\r\n </div>\r\n <hr />\r\n <div>\r\n <div *ngFor=\"let item of orderDetailData?.brandOrderDetails?.[0]?.orderedItems\" class=\"d-flex mb-2\" style=\"gap: 10px; width: 100%;\">\r\n <img [src]=\"item.imgUrl\" alt=\"\" style=\"height: 85px;width: 85px; border-radius: 5px;\">\r\n <div class=\"d-flex flex-column justify-content-center\" style=\"gap: 6px; width: 89%;\">\r\n <span class=\"fw-bold fs-6\">{{item.itemName}}</span>\r\n <!-- <span class=\"fs-6\">Size: XS</span> -->\r\n <div class=\"d-flex justify-content-between fs-6\">\r\n <span>{{item.quantity}} X <span [innerHTML]=\"currency\"></span> <span class=\"fw-bold\">{{(item.discountedPrice) | number: '1.0-2'}}</span></span>\r\n <span> <span [innerHTML]=\"currency\"></span> <span class=\"fw-bold\">{{(item.discountedPrice * item.quantity) | number: '1.0-2'}}</span></span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <hr />\r\n <div class=\"fs-6\">\r\n <div class=\"d-flex justify-content-between my-2\">\r\n <span class=\"fw-normal\">Item Total</span>\r\n <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span> {{orderDetailData?.billDetails?.totalNetValue | number:'1.0-2'}}</span>\r\n </div>\r\n\r\n <!-- <div class=\"d-flex justify-content-between my-2\">\r\n <span>Delivery</span>\r\n <span>FREE</span>\r\n </div> -->\r\n\r\n <div class=\"d-flex justify-content-between my-2\">\r\n <span class=\"fw-normal\">Grand Total</span>\r\n <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span> {{orderDetailData?.billDetails?.totalNetValue | number:'1.0-2'}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right\" style=\"width: 28%;\" [style.width.%]=\"isMobile ? '90' : '28'\" [style.background]=\"getCardBGColor\">\r\n <h1 class=\"mb-3 fs-5\">User Details</h1>\r\n <div class=\"my-2 fs-6\">\r\n <span style=\"margin-right: 10px;\" [style.color]=\"getSupportingColor(getCardBGColor)\">Name:</span>\r\n <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{orderDetailData?.addressDetails?.receiverName}}</span>\r\n </div>\r\n <div class=\"my-2 fs-6\">\r\n <span style=\"margin-right: 10px\" [style.color]=\"getSupportingColor(getCardBGColor)\">Phone:</span>\r\n <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{ orderDetailData?.addressDetails?.receiverPhone }}</span>\r\n </div>\r\n <div class=\"my-2 fs-6\">\r\n <span style=\"margin-right: 10px\" [style.color]=\"getSupportingColor(getCardBGColor)\">Address:</span>\r\n <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{ orderDetailData?.addressDetails?.addressLine1 }}</span>\r\n </div>\r\n <!-- <div class=\"my-2 fs-6\">\r\n <span style=\"margin-right: 10px\" [style.color]=\"getSupportingColor(getCardBGColor)\">Payment:</span>\r\n <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">Manual Payment</span>\r\n </div> -->\r\n </div>\r\n </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n", styles: [".right{height:240px;padding:15px;background-color:#f8f8f8;border-radius:8px}hr{border-top-width:2px;margin:15px 0}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:92%!important;margin-bottom:4px!important;height:auto!important;padding:15px 0!important}.main-section{width:100%!important;padding:10px 20px}.left{width:100%!important}}\n"] }]
|
|
7242
|
+
], template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"d-flex justify-content-between main-section\" [style.flexDirection]=\"isMobile ? 'column' : 'row'\" [style.width.vw]=\"isMobile ? '100' : '65'\" style=\"margin: auto;\">\r\n <div class=\"left\" [style.width.%]=\"isMobile ? '90' : '70'\">\r\n <h1 class=\"fs-3 fw-normal mb-3 d-flex align-items-center onlyDesktop position-relative\" style=\"left: -35px;\">\r\n <mat-icon style=\"cursor: pointer;\" (click)=\"goBack()\">keyboard_arrow_left</mat-icon>\r\n <span>Order Details</span>\r\n </h1>\r\n <div class=\"d-flex justify-content-between align-items-end\">\r\n <div class=\"d-flex flex-column\">\r\n <span class=\"fs-5\">Order {{ orderDetailData?.orderNum }}</span>\r\n <span class=\"fs-6\">{{ orderDetailData?.createdTimeStamp | date: 'medium' }}, {{ orderDetailData?.brandOrderDetails?.[0]?.orderedItems.length }} items | <span [innerHTML]=\"currency\"></span> {{orderDetailData?.brandOrderDetails?.[0]?.billDetails?.totalGrossValue}}</span>\r\n </div>\r\n <span class=\"fw-bold fs-5\">{{orderDetailData?.brandOrderDetails?.[0]?.businessName | titlecase}}</span>\r\n </div>\r\n <hr />\r\n <div class=\"timeline\">\r\n <p-timeline [value]=\"orderTimiline\">\r\n <ng-template pTemplate=\"content\" let-event>\r\n <div class=\"d-flex time-line\">\r\n <mat-icon style=\"margin-right: 10px;\">{{ event.icon }}</mat-icon>\r\n <div class=\"d-flex flex-column ml-2\">\r\n <span class=\"fw-normal fs-6\">{{ event.name }}</span>\r\n <div class=\"fs-6 \">{{event.desc.replaceAll(\"_\", \" \")}}</div>\r\n <div class=\"action-btn\">\r\n <button *ngIf=\"canCancelOrder\">Cancel Order</button>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-timeline>\r\n </div>\r\n <hr />\r\n <div>\r\n <div *ngFor=\"let item of orderDetailData?.brandOrderDetails?.[0]?.orderedItems\" class=\"d-flex mb-2\" style=\"gap: 10px; width: 100%;\">\r\n <img loading=\"lazy\" [src]=\"item.imgUrl\" alt=\"\" style=\"height: 85px;width: 85px; border-radius: 5px;\">\r\n <div class=\"d-flex flex-column justify-content-center\" style=\"gap: 6px; width: 89%;\">\r\n <span class=\"fw-bold fs-6\">{{item.itemName}}</span>\r\n <!-- <span class=\"fs-6\">Size: XS</span> -->\r\n <div class=\"d-flex justify-content-between fs-6\">\r\n <span>{{item.quantity}} X <span [innerHTML]=\"currency\"></span> <span class=\"fw-bold\">{{(item.discountedPrice) | number: '1.0-2'}}</span></span>\r\n <span> <span [innerHTML]=\"currency\"></span> <span class=\"fw-bold\">{{(item.discountedPrice * item.quantity) | number: '1.0-2'}}</span></span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <hr />\r\n <div class=\"fs-6\">\r\n <div class=\"d-flex justify-content-between my-2\">\r\n <span class=\"fw-normal\">Item Total</span>\r\n <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span> {{orderDetailData?.billDetails?.totalNetValue | number:'1.0-2'}}</span>\r\n </div>\r\n\r\n <!-- <div class=\"d-flex justify-content-between my-2\">\r\n <span>Delivery</span>\r\n <span>FREE</span>\r\n </div> -->\r\n\r\n <div class=\"d-flex justify-content-between my-2\">\r\n <span class=\"fw-normal\">Grand Total</span>\r\n <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span> {{orderDetailData?.billDetails?.totalNetValue | number:'1.0-2'}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right\" style=\"width: 28%;\" [style.width.%]=\"isMobile ? '90' : '28'\" [style.background]=\"getCardBGColor\">\r\n <h1 class=\"mb-3 fs-5\">User Details</h1>\r\n <div class=\"my-2 fs-6\">\r\n <span style=\"margin-right: 10px;\" [style.color]=\"getSupportingColor(getCardBGColor)\">Name:</span>\r\n <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{orderDetailData?.addressDetails?.receiverName}}</span>\r\n </div>\r\n <div class=\"my-2 fs-6\">\r\n <span style=\"margin-right: 10px\" [style.color]=\"getSupportingColor(getCardBGColor)\">Phone:</span>\r\n <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{ orderDetailData?.addressDetails?.receiverPhone }}</span>\r\n </div>\r\n <div class=\"my-2 fs-6\">\r\n <span style=\"margin-right: 10px\" [style.color]=\"getSupportingColor(getCardBGColor)\">Address:</span>\r\n <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{ orderDetailData?.addressDetails?.addressLine1 }}</span>\r\n </div>\r\n <!-- <div class=\"my-2 fs-6\">\r\n <span style=\"margin-right: 10px\" [style.color]=\"getSupportingColor(getCardBGColor)\">Payment:</span>\r\n <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">Manual Payment</span>\r\n </div> -->\r\n </div>\r\n </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n", styles: [".right{height:240px;padding:15px;background-color:#f8f8f8;border-radius:8px}hr{border-top-width:2px;margin:15px 0}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:92%!important;margin-bottom:4px!important;height:auto!important;padding:15px 0!important}.main-section{width:100%!important;padding:10px 20px}.left{width:100%!important}}\n"] }]
|
|
7269
7243
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { responseData: [{
|
|
7270
7244
|
type: Input
|
|
7271
7245
|
}], data: [{
|
|
@@ -7497,8 +7471,11 @@ class UserProfileComponent extends BaseSection {
|
|
|
7497
7471
|
width: '35vw',
|
|
7498
7472
|
data: { data: this.data, addressList: this.userDetails?.addressDetailsList }
|
|
7499
7473
|
}).afterClosed().subscribe((response) => {
|
|
7500
|
-
if (response)
|
|
7474
|
+
if (response) {
|
|
7501
7475
|
this.userDetails?.addressDetailsList.push(response);
|
|
7476
|
+
if (this.userDetails)
|
|
7477
|
+
this.userDetails.addressDetailsList = { ...this.userDetails?.addressDetailsList };
|
|
7478
|
+
}
|
|
7502
7479
|
});
|
|
7503
7480
|
}
|
|
7504
7481
|
goToHome() {
|
|
@@ -7539,7 +7516,7 @@ class UserProfileComponent extends BaseSection {
|
|
|
7539
7516
|
}
|
|
7540
7517
|
saveProfile() {
|
|
7541
7518
|
const payload = {
|
|
7542
|
-
|
|
7519
|
+
...this.storageService.getUser(),
|
|
7543
7520
|
addressDetailsList: this.userDetails?.addressDetailsList
|
|
7544
7521
|
};
|
|
7545
7522
|
this.restService.updateProfile(payload).subscribe((response) => {
|
|
@@ -7589,7 +7566,7 @@ class UserProfileComponent extends BaseSection {
|
|
|
7589
7566
|
return BUSINESS_CONSTANTS.CURRENCY;
|
|
7590
7567
|
}
|
|
7591
7568
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserProfileComponent, deps: [{ token: i2$3.Router }, { token: EventsService }, { token: RestService }, { token: StorageServiceService }, { token: CartService }, { token: i3.MatDialog }, { token: i2$2.CookieService }, { token: i5.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7592
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100\" style=\"margin: auto; overflow-y: auto;\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"styles?.layout\" [simpoBackground]=\"styles?.background\" [style.color]=\"styles?.background?.accentColor\" [style.height.vh]=\"isMobile ? '100':'90'\" [style.zIndex]=\"isMobile ? '100000' : ''\" [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"p-3 profile-box\" style=\"width: 25%; border-radius: 10px; height: fit-content;\" [style.backgroundColor]=\"getCardBGColor\" [style.order]=\"styles?.swap ? '1' : '0'\">\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\r\n <img [src]=\"getUserProfile\" alt=\"\" class=\"rounded-circle h-100\" style=\"width: 70px;\">\r\n <div>\r\n <h4 class=\"font-weight-bold\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"d-flex align-items-center font-weight-normal position-relative\" [style.color]=\"getSupportingColor(getCardBGColor)\">\r\n <mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span> \r\n <!-- <mat-icon class=\"edit-icon\" (click)=\"editProfileData('MOBILE')\">edit</mat-icon> -->\r\n </h6>\r\n <h6 class=\"d-flex align-items-center font-weight-normal position-relative\" [style.color]=\"getSupportingColor(getCardBGColor)\">\r\n <mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span> \r\n <!-- <mat-icon class=\"edit-icon\" (click)=\"editProfileData('EMAIL')\">edit</mat-icon> -->\r\n </h6>\r\n </div>\r\n </div>\r\n <div class=\"tabs\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\">\r\n <mat-icon [style.color]=\"getSupportingColor(getCardBGColor)\">{{tab.icon}}</mat-icon>\r\n <div class=\"tab font-weight-normal\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{tab.value}}</div>\r\n </div>\r\n </ng-container>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <button class=\"edit-btn\" [style.borderColor]=\"getSupportingColor(getCardBGColor)\" [style.color]=\"getSupportingColor(getCardBGColor)\" (click)=\"editProfile()\">Edit</button>\r\n <button class=\"logout-btn\" [style.backgroundColor]=\"getSupportingColor(getCardBGColor)\" [style.color]=\"getCardBGColor\" (click)=\"logout()\">Logout</button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"orders-sec\" [simpoBorder]=\"styles?.border\" [style.order]=\"styles?.swap ? '0' : '1'\" [simpoBackground]=\"styles?.background\">\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <div class=\"w-100 position-relative\" style=\"height: 80vh;\">\r\n <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\r\n <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\" (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n </div>\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"''\">\r\n <section class=\"top-sec\">\r\n <img [src]=\"getUserProfile\" alt=\"\" class=\"rounded-circle\" style=\"width: 50px; height: 50px;\">\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n </div>\r\n </section>\r\n <section class=\"list-sec\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n <mat-icon>{{tab.icon}}</mat-icon>\r\n <div class=\"tab font-weight-normal\">{{tab.value}}</div>\r\n </div>\r\n </ng-container>\r\n </section>\r\n </ng-container>\r\n \r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n \r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n <h1 class=\"onlyDesktop\">My Orders</h1>\r\n <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n <ng-container *ngFor=\"let tab of tabs\">\r\n <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">{{tab.value}}</div>\r\n </ng-container>\r\n </div>\r\n <div class=\"order-list\">\r\n <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <div class=\"heading-medium d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{ text.value }}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\" (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n <div class=\"d-flex justify-content-between mb-2 onlyDesktop\">\r\n <h1>My Address</h1>\r\n <button class=\"address-btn\" (click)=\"addNewAddress()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"address-list\">\r\n <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n <div class=\"address\" [style.width]=\"getProductWidth\">\r\n <div class=\"address-left\">\r\n <div class=\"top\">\r\n <span class=\"fw-bold mr-2\">{{address.receiverName}}</span>\r\n <span class=\"address-type\">{{address.addressType}}</span>\r\n </div>\r\n <div class=\"address-det\">{{address.addressLine1}}</div>\r\n <div class=\"phone\">\r\n <span>Phone:</span>\r\n <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n </div>\r\n </div>\r\n <div class=\"address-right\">\r\n <mat-icon (click)=\"editAddress(idx)\">edit</mat-icon>\r\n <mat-icon (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #showEmptyAddress>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery</div>\r\n <!-- </ng-container> -->\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n <h1 class=\"onlyDesktop\">My Accounts</h1>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n <h1 class=\"onlyDesktop\">Logout</h1>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n <div (click)=\"goToOrderDetails(order)\" class=\"cursor-pointer\">\r\n <div class=\"top\">\r\n <span class=\"font-weight-normal\">{{order.orderNum}}</span>\r\n <mat-icon>arrow_forward_ios</mat-icon>\r\n </div>\r\n <div class=\"middle my-2\">\r\n <span>{{order.createdTimeStamp | date: 'medium'}}</span>\r\n <span class=\"font-weight-bold\">{{order?.brandOrderDetails?.[0]?.brandName | titlecase}}</span>\r\n </div>\r\n <hr />\r\n <div class=\"bottom\">\r\n <span class=\"font-weight-normal\">Amount: <span> <span [innerHTML]=\"currency\"></span> {{ order.billDetails.totalNetValue }}</span></span>\r\n <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">{{ order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | uppercase }}</span>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #WishlistDetails>\r\n <h1 class=\"onlyDesktop\">My Wishlist</h1>\r\n <div class=\"wishlist-list\">\r\n <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n <div class=\"cart-items\">\r\n <div class=\"d-flex item-parent\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"col-md-9 h-100 item-desc\">\r\n <div class=\"lh-23\">\r\n <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{item.discountedPrice}}\r\n </div>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div class=\"item-quantity\" *ngIf=\"item.quantity\">\r\n <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\r\n </div>\r\n <div class=\"item-quantity\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\">Add to Quantity</div>\r\n <div class=\"item-quantity\" (click)=\"moveToCart(item)\">Move to Cart</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"position-relative itemPrice\" style=\"margin-top: auto; right: 5px\">\r\n <div class=\"item-price\" *ngIf=\"item.quantity\"><span [innerHTML]='currency'></span> {{(item.discountedPrice) * item.quantity}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\">delete</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-template #showEmptyWishlistScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <div class=\"heading-medium d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{ text.value }}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>", styles: [".mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{color:#000!important;font-weight:600!important}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;margin-right:20px;padding:15px;overflow-y:auto;border:1px solid #d3d3d324;box-shadow:#0000000d 0 0 0 1px}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order{border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:#0000000d 0 0 0 1px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;min-height:40vh;max-height:71vh;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:fit-content}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;background-color:#0267c1;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{border:1px solid lightgray;box-shadow:#00000029 0 1px 4px}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}@media screen and (max-width: 475px){.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d3;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:40px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i11.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete", "orderDetailData"], outputs: ["goBackEmitter"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i12.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
|
|
7569
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100\" style=\"margin: auto; overflow-y: auto;\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"styles?.layout\" [simpoBackground]=\"styles?.background\" [style.color]=\"styles?.background?.accentColor\" [style.height.vh]=\"isMobile ? '100':'90'\" [style.zIndex]=\"isMobile ? '100000' : ''\" [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"p-3 profile-box\" style=\"width: 25%; border-radius: 10px; height: fit-content;\" [style.backgroundColor]=\"getCardBGColor\" [style.order]=\"styles?.swap ? '1' : '0'\">\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\r\n <img loading=\"lazy\" [src]=\"getUserProfile\" alt=\"\" class=\"rounded-circle h-100\" style=\"width: 70px;\">\r\n <div>\r\n <h4 class=\"font-weight-bold\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"d-flex align-items-center font-weight-normal position-relative\" [style.color]=\"getSupportingColor(getCardBGColor)\">\r\n <mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span> \r\n <!-- <mat-icon class=\"edit-icon\" (click)=\"editProfileData('MOBILE')\">edit</mat-icon> -->\r\n </h6>\r\n <h6 class=\"d-flex align-items-center font-weight-normal position-relative\" [style.color]=\"getSupportingColor(getCardBGColor)\">\r\n <mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span> \r\n <!-- <mat-icon class=\"edit-icon\" (click)=\"editProfileData('EMAIL')\">edit</mat-icon> -->\r\n </h6>\r\n </div>\r\n </div>\r\n <div class=\"tabs\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\">\r\n <mat-icon [style.color]=\"getSupportingColor(getCardBGColor)\">{{tab.icon}}</mat-icon>\r\n <div class=\"tab font-weight-normal\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{tab.value}}</div>\r\n </div>\r\n </ng-container>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <button class=\"edit-btn\" [style.borderColor]=\"getSupportingColor(getCardBGColor)\" [style.color]=\"getSupportingColor(getCardBGColor)\" (click)=\"editProfile()\">Edit</button>\r\n <button class=\"logout-btn\" [style.backgroundColor]=\"getSupportingColor(getCardBGColor)\" [style.color]=\"getCardBGColor\" (click)=\"logout()\">Logout</button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"orders-sec\" [simpoBorder]=\"styles?.border\" [style.order]=\"styles?.swap ? '0' : '1'\" [simpoBackground]=\"styles?.background\">\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <div class=\"w-100 position-relative\" style=\"height: 80vh;\">\r\n <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\r\n <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\" (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n </div>\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"''\">\r\n <section class=\"top-sec\">\r\n <img loading=\"lazy\" [src]=\"getUserProfile\" alt=\"\" class=\"rounded-circle\" style=\"width: 50px; height: 50px;\">\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n </div>\r\n </section>\r\n <section class=\"list-sec\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n <mat-icon>{{tab.icon}}</mat-icon>\r\n <div class=\"tab font-weight-normal\">{{tab.value}}</div>\r\n </div>\r\n </ng-container>\r\n </section>\r\n </ng-container>\r\n \r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n \r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n <h1 class=\"onlyDesktop\">My Orders</h1>\r\n <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n <ng-container *ngFor=\"let tab of tabs\">\r\n <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">{{tab.value}}</div>\r\n </ng-container>\r\n </div>\r\n <div class=\"order-list\">\r\n <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <div class=\"heading-medium d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{ text.value }}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\" (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n <div class=\"d-flex justify-content-between mb-2 onlyDesktop\">\r\n <h1>My Address</h1>\r\n <button class=\"address-btn\" (click)=\"addNewAddress()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"address-list\">\r\n <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n <div class=\"address\" [style.width]=\"getProductWidth\">\r\n <div class=\"address-left\">\r\n <div class=\"top\">\r\n <span class=\"fw-bold mr-2\">{{address.receiverName}}</span>\r\n <span class=\"address-type\">{{address.addressType}}</span>\r\n </div>\r\n <div class=\"address-det\">{{address.addressLine1}}</div>\r\n <div class=\"phone\">\r\n <span>Phone:</span>\r\n <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n </div>\r\n </div>\r\n <div class=\"address-right\">\r\n <mat-icon (click)=\"editAddress(idx)\">edit</mat-icon>\r\n <mat-icon (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #showEmptyAddress>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery</div>\r\n <!-- </ng-container> -->\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n <h1 class=\"onlyDesktop\">My Accounts</h1>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n <h1 class=\"onlyDesktop\">Logout</h1>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n <div (click)=\"goToOrderDetails(order)\" class=\"cursor-pointer\">\r\n <div class=\"top\">\r\n <span class=\"font-weight-normal\">{{order.orderNum}}</span>\r\n <mat-icon>arrow_forward_ios</mat-icon>\r\n </div>\r\n <div class=\"middle my-2\">\r\n <span>{{order.createdTimeStamp | date: 'medium'}}</span>\r\n <span class=\"font-weight-bold\">{{order?.brandOrderDetails?.[0]?.brandName | titlecase}}</span>\r\n </div>\r\n <hr />\r\n <div class=\"bottom\">\r\n <span class=\"font-weight-normal\">Amount: <span> <span [innerHTML]=\"currency\"></span> {{ order.billDetails.totalNetValue }}</span></span>\r\n <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">{{ order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | uppercase }}</span>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #WishlistDetails>\r\n <h1 class=\"onlyDesktop\">My Wishlist</h1>\r\n <div class=\"wishlist-list\">\r\n <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n <div class=\"cart-items\">\r\n <div class=\"d-flex item-parent\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img loading=\"lazy\" class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"col-md-9 h-100 item-desc\">\r\n <div class=\"lh-23\">\r\n <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{item.discountedPrice}}\r\n </div>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div class=\"item-quantity\" *ngIf=\"item.quantity\">\r\n <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\r\n </div>\r\n <div class=\"item-quantity\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\">Add to Quantity</div>\r\n <div class=\"item-quantity\" (click)=\"moveToCart(item)\">Move to Cart</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"position-relative itemPrice\" style=\"margin-top: auto; right: 5px\">\r\n <div class=\"item-price\" *ngIf=\"item.quantity\"><span [innerHTML]='currency'></span> {{(item.discountedPrice) * item.quantity}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\">delete</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-template #showEmptyWishlistScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <div class=\"heading-medium d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{ text.value }}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>", styles: [".mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{color:#000!important;font-weight:600!important}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;margin-right:20px;padding:15px;overflow-y:auto;border:1px solid #d3d3d324;box-shadow:#0000000d 0 0 0 1px}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order{border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:#0000000d 0 0 0 1px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;min-height:40vh;max-height:71vh;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:fit-content}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;background-color:#0267c1;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{border:1px solid lightgray;box-shadow:#00000029 0 1px 4px}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}@media screen and (max-width: 475px){.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d3;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:40px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i11.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete", "orderDetailData"], outputs: ["goBackEmitter"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i12.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
|
|
7593
7570
|
}
|
|
7594
7571
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserProfileComponent, decorators: [{
|
|
7595
7572
|
type: Component,
|
|
@@ -7608,7 +7585,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
7608
7585
|
ColorDirective,
|
|
7609
7586
|
BorderDirective,
|
|
7610
7587
|
ToastModule
|
|
7611
|
-
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100\" style=\"margin: auto; overflow-y: auto;\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"styles?.layout\" [simpoBackground]=\"styles?.background\" [style.color]=\"styles?.background?.accentColor\" [style.height.vh]=\"isMobile ? '100':'90'\" [style.zIndex]=\"isMobile ? '100000' : ''\" [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"p-3 profile-box\" style=\"width: 25%; border-radius: 10px; height: fit-content;\" [style.backgroundColor]=\"getCardBGColor\" [style.order]=\"styles?.swap ? '1' : '0'\">\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\r\n <img [src]=\"getUserProfile\" alt=\"\" class=\"rounded-circle h-100\" style=\"width: 70px;\">\r\n <div>\r\n <h4 class=\"font-weight-bold\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"d-flex align-items-center font-weight-normal position-relative\" [style.color]=\"getSupportingColor(getCardBGColor)\">\r\n <mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span> \r\n <!-- <mat-icon class=\"edit-icon\" (click)=\"editProfileData('MOBILE')\">edit</mat-icon> -->\r\n </h6>\r\n <h6 class=\"d-flex align-items-center font-weight-normal position-relative\" [style.color]=\"getSupportingColor(getCardBGColor)\">\r\n <mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span> \r\n <!-- <mat-icon class=\"edit-icon\" (click)=\"editProfileData('EMAIL')\">edit</mat-icon> -->\r\n </h6>\r\n </div>\r\n </div>\r\n <div class=\"tabs\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\">\r\n <mat-icon [style.color]=\"getSupportingColor(getCardBGColor)\">{{tab.icon}}</mat-icon>\r\n <div class=\"tab font-weight-normal\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{tab.value}}</div>\r\n </div>\r\n </ng-container>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <button class=\"edit-btn\" [style.borderColor]=\"getSupportingColor(getCardBGColor)\" [style.color]=\"getSupportingColor(getCardBGColor)\" (click)=\"editProfile()\">Edit</button>\r\n <button class=\"logout-btn\" [style.backgroundColor]=\"getSupportingColor(getCardBGColor)\" [style.color]=\"getCardBGColor\" (click)=\"logout()\">Logout</button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"orders-sec\" [simpoBorder]=\"styles?.border\" [style.order]=\"styles?.swap ? '0' : '1'\" [simpoBackground]=\"styles?.background\">\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <div class=\"w-100 position-relative\" style=\"height: 80vh;\">\r\n <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\r\n <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\" (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n </div>\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"''\">\r\n <section class=\"top-sec\">\r\n <img [src]=\"getUserProfile\" alt=\"\" class=\"rounded-circle\" style=\"width: 50px; height: 50px;\">\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n </div>\r\n </section>\r\n <section class=\"list-sec\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n <mat-icon>{{tab.icon}}</mat-icon>\r\n <div class=\"tab font-weight-normal\">{{tab.value}}</div>\r\n </div>\r\n </ng-container>\r\n </section>\r\n </ng-container>\r\n \r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n \r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n <h1 class=\"onlyDesktop\">My Orders</h1>\r\n <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n <ng-container *ngFor=\"let tab of tabs\">\r\n <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">{{tab.value}}</div>\r\n </ng-container>\r\n </div>\r\n <div class=\"order-list\">\r\n <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <div class=\"heading-medium d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{ text.value }}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\" (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n <div class=\"d-flex justify-content-between mb-2 onlyDesktop\">\r\n <h1>My Address</h1>\r\n <button class=\"address-btn\" (click)=\"addNewAddress()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"address-list\">\r\n <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n <div class=\"address\" [style.width]=\"getProductWidth\">\r\n <div class=\"address-left\">\r\n <div class=\"top\">\r\n <span class=\"fw-bold mr-2\">{{address.receiverName}}</span>\r\n <span class=\"address-type\">{{address.addressType}}</span>\r\n </div>\r\n <div class=\"address-det\">{{address.addressLine1}}</div>\r\n <div class=\"phone\">\r\n <span>Phone:</span>\r\n <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n </div>\r\n </div>\r\n <div class=\"address-right\">\r\n <mat-icon (click)=\"editAddress(idx)\">edit</mat-icon>\r\n <mat-icon (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #showEmptyAddress>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery</div>\r\n <!-- </ng-container> -->\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n <h1 class=\"onlyDesktop\">My Accounts</h1>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n <h1 class=\"onlyDesktop\">Logout</h1>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n <div (click)=\"goToOrderDetails(order)\" class=\"cursor-pointer\">\r\n <div class=\"top\">\r\n <span class=\"font-weight-normal\">{{order.orderNum}}</span>\r\n <mat-icon>arrow_forward_ios</mat-icon>\r\n </div>\r\n <div class=\"middle my-2\">\r\n <span>{{order.createdTimeStamp | date: 'medium'}}</span>\r\n <span class=\"font-weight-bold\">{{order?.brandOrderDetails?.[0]?.brandName | titlecase}}</span>\r\n </div>\r\n <hr />\r\n <div class=\"bottom\">\r\n <span class=\"font-weight-normal\">Amount: <span> <span [innerHTML]=\"currency\"></span> {{ order.billDetails.totalNetValue }}</span></span>\r\n <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">{{ order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | uppercase }}</span>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #WishlistDetails>\r\n <h1 class=\"onlyDesktop\">My Wishlist</h1>\r\n <div class=\"wishlist-list\">\r\n <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n <div class=\"cart-items\">\r\n <div class=\"d-flex item-parent\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"col-md-9 h-100 item-desc\">\r\n <div class=\"lh-23\">\r\n <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{item.discountedPrice}}\r\n </div>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div class=\"item-quantity\" *ngIf=\"item.quantity\">\r\n <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\r\n </div>\r\n <div class=\"item-quantity\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\">Add to Quantity</div>\r\n <div class=\"item-quantity\" (click)=\"moveToCart(item)\">Move to Cart</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"position-relative itemPrice\" style=\"margin-top: auto; right: 5px\">\r\n <div class=\"item-price\" *ngIf=\"item.quantity\"><span [innerHTML]='currency'></span> {{(item.discountedPrice) * item.quantity}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\">delete</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-template #showEmptyWishlistScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <div class=\"heading-medium d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{ text.value }}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>", styles: [".mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{color:#000!important;font-weight:600!important}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;margin-right:20px;padding:15px;overflow-y:auto;border:1px solid #d3d3d324;box-shadow:#0000000d 0 0 0 1px}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order{border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:#0000000d 0 0 0 1px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;min-height:40vh;max-height:71vh;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:fit-content}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;background-color:#0267c1;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{border:1px solid lightgray;box-shadow:#00000029 0 1px 4px}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}@media screen and (max-width: 475px){.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d3;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:40px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}\n"] }]
|
|
7588
|
+
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100\" style=\"margin: auto; overflow-y: auto;\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"styles?.layout\" [simpoBackground]=\"styles?.background\" [style.color]=\"styles?.background?.accentColor\" [style.height.vh]=\"isMobile ? '100':'90'\" [style.zIndex]=\"isMobile ? '100000' : ''\" [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"p-3 profile-box\" style=\"width: 25%; border-radius: 10px; height: fit-content;\" [style.backgroundColor]=\"getCardBGColor\" [style.order]=\"styles?.swap ? '1' : '0'\">\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\r\n <img loading=\"lazy\" [src]=\"getUserProfile\" alt=\"\" class=\"rounded-circle h-100\" style=\"width: 70px;\">\r\n <div>\r\n <h4 class=\"font-weight-bold\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"d-flex align-items-center font-weight-normal position-relative\" [style.color]=\"getSupportingColor(getCardBGColor)\">\r\n <mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span> \r\n <!-- <mat-icon class=\"edit-icon\" (click)=\"editProfileData('MOBILE')\">edit</mat-icon> -->\r\n </h6>\r\n <h6 class=\"d-flex align-items-center font-weight-normal position-relative\" [style.color]=\"getSupportingColor(getCardBGColor)\">\r\n <mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span> \r\n <!-- <mat-icon class=\"edit-icon\" (click)=\"editProfileData('EMAIL')\">edit</mat-icon> -->\r\n </h6>\r\n </div>\r\n </div>\r\n <div class=\"tabs\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\">\r\n <mat-icon [style.color]=\"getSupportingColor(getCardBGColor)\">{{tab.icon}}</mat-icon>\r\n <div class=\"tab font-weight-normal\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{tab.value}}</div>\r\n </div>\r\n </ng-container>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <button class=\"edit-btn\" [style.borderColor]=\"getSupportingColor(getCardBGColor)\" [style.color]=\"getSupportingColor(getCardBGColor)\" (click)=\"editProfile()\">Edit</button>\r\n <button class=\"logout-btn\" [style.backgroundColor]=\"getSupportingColor(getCardBGColor)\" [style.color]=\"getCardBGColor\" (click)=\"logout()\">Logout</button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"orders-sec\" [simpoBorder]=\"styles?.border\" [style.order]=\"styles?.swap ? '0' : '1'\" [simpoBackground]=\"styles?.background\">\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <div class=\"w-100 position-relative\" style=\"height: 80vh;\">\r\n <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\r\n <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\" (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n </div>\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"''\">\r\n <section class=\"top-sec\">\r\n <img loading=\"lazy\" [src]=\"getUserProfile\" alt=\"\" class=\"rounded-circle\" style=\"width: 50px; height: 50px;\">\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n </div>\r\n </section>\r\n <section class=\"list-sec\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n <mat-icon>{{tab.icon}}</mat-icon>\r\n <div class=\"tab font-weight-normal\">{{tab.value}}</div>\r\n </div>\r\n </ng-container>\r\n </section>\r\n </ng-container>\r\n \r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n \r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n <h1 class=\"onlyDesktop\">My Orders</h1>\r\n <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n <ng-container *ngFor=\"let tab of tabs\">\r\n <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">{{tab.value}}</div>\r\n </ng-container>\r\n </div>\r\n <div class=\"order-list\">\r\n <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <div class=\"heading-medium d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{ text.value }}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\" (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n <div class=\"d-flex justify-content-between mb-2 onlyDesktop\">\r\n <h1>My Address</h1>\r\n <button class=\"address-btn\" (click)=\"addNewAddress()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"address-list\">\r\n <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n <div class=\"address\" [style.width]=\"getProductWidth\">\r\n <div class=\"address-left\">\r\n <div class=\"top\">\r\n <span class=\"fw-bold mr-2\">{{address.receiverName}}</span>\r\n <span class=\"address-type\">{{address.addressType}}</span>\r\n </div>\r\n <div class=\"address-det\">{{address.addressLine1}}</div>\r\n <div class=\"phone\">\r\n <span>Phone:</span>\r\n <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n </div>\r\n </div>\r\n <div class=\"address-right\">\r\n <mat-icon (click)=\"editAddress(idx)\">edit</mat-icon>\r\n <mat-icon (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #showEmptyAddress>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery</div>\r\n <!-- </ng-container> -->\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n <h1 class=\"onlyDesktop\">My Accounts</h1>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n <h1 class=\"onlyDesktop\">Logout</h1>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n <div (click)=\"goToOrderDetails(order)\" class=\"cursor-pointer\">\r\n <div class=\"top\">\r\n <span class=\"font-weight-normal\">{{order.orderNum}}</span>\r\n <mat-icon>arrow_forward_ios</mat-icon>\r\n </div>\r\n <div class=\"middle my-2\">\r\n <span>{{order.createdTimeStamp | date: 'medium'}}</span>\r\n <span class=\"font-weight-bold\">{{order?.brandOrderDetails?.[0]?.brandName | titlecase}}</span>\r\n </div>\r\n <hr />\r\n <div class=\"bottom\">\r\n <span class=\"font-weight-normal\">Amount: <span> <span [innerHTML]=\"currency\"></span> {{ order.billDetails.totalNetValue }}</span></span>\r\n <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">{{ order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | uppercase }}</span>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #WishlistDetails>\r\n <h1 class=\"onlyDesktop\">My Wishlist</h1>\r\n <div class=\"wishlist-list\">\r\n <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n <div class=\"cart-items\">\r\n <div class=\"d-flex item-parent\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img loading=\"lazy\" class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"col-md-9 h-100 item-desc\">\r\n <div class=\"lh-23\">\r\n <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{item.discountedPrice}}\r\n </div>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div class=\"item-quantity\" *ngIf=\"item.quantity\">\r\n <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\r\n </div>\r\n <div class=\"item-quantity\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\">Add to Quantity</div>\r\n <div class=\"item-quantity\" (click)=\"moveToCart(item)\">Move to Cart</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"position-relative itemPrice\" style=\"margin-top: auto; right: 5px\">\r\n <div class=\"item-price\" *ngIf=\"item.quantity\"><span [innerHTML]='currency'></span> {{(item.discountedPrice) * item.quantity}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\">delete</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-template #showEmptyWishlistScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <div class=\"heading-medium d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{ text.value }}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>", styles: [".mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{color:#000!important;font-weight:600!important}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;margin-right:20px;padding:15px;overflow-y:auto;border:1px solid #d3d3d324;box-shadow:#0000000d 0 0 0 1px}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order{border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:#0000000d 0 0 0 1px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;min-height:40vh;max-height:71vh;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:fit-content}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;background-color:#0267c1;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{border:1px solid lightgray;box-shadow:#00000029 0 1px 4px}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}@media screen and (max-width: 475px){.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d3;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:40px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}\n"] }]
|
|
7612
7589
|
}], ctorParameters: () => [{ type: i2$3.Router }, { type: EventsService }, { type: RestService }, { type: StorageServiceService }, { type: CartService }, { type: i3.MatDialog }, { type: i2$2.CookieService }, { type: i5.MessageService }], propDecorators: { data: [{
|
|
7613
7590
|
type: Input
|
|
7614
7591
|
}], index: [{
|
|
@@ -7693,13 +7670,13 @@ class VerifyComponent {
|
|
|
7693
7670
|
});
|
|
7694
7671
|
}
|
|
7695
7672
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: VerifyComponent, deps: [{ token: RestService }, { token: i2$3.Router }, { token: StorageServiceService }, { token: i5.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7696
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: VerifyComponent, isStandalone: true, selector: "simpo-verify-payment", inputs: { data: "data", responseData: "responseData" }, providers: [MessageService], ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n<section class=\"d-flex flex-column align-items-center justify-content-center\" style=\"height: 100vh;\">\r\n <img [src]=\"getImageUrl\" style=\"height: 200px; width: 200px;\" [alt]=\"content?.image?.altText\">\r\n <span class=\"font-bold\">{{loadingText}}</span>\r\n</section>", styles: ["span{color:#000;font-weight:600;font-size:larger}\n"], dependencies: [{ kind: "ngmodule", type: ToastModule }, { kind: "component", type: i12.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
|
|
7673
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: VerifyComponent, isStandalone: true, selector: "simpo-verify-payment", inputs: { data: "data", responseData: "responseData" }, providers: [MessageService], ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n<section class=\"d-flex flex-column align-items-center justify-content-center\" style=\"height: 100vh;\">\r\n <img loading=\"lazy\" [src]=\"getImageUrl\" style=\"height: 200px; width: 200px;\" [alt]=\"content?.image?.altText\">\r\n <span class=\"font-bold\">{{loadingText}}</span>\r\n</section>", styles: ["span{color:#000;font-weight:600;font-size:larger}\n"], dependencies: [{ kind: "ngmodule", type: ToastModule }, { kind: "component", type: i12.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
|
|
7697
7674
|
}
|
|
7698
7675
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: VerifyComponent, decorators: [{
|
|
7699
7676
|
type: Component,
|
|
7700
7677
|
args: [{ selector: 'simpo-verify-payment', standalone: true, imports: [
|
|
7701
7678
|
ToastModule
|
|
7702
|
-
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n<section class=\"d-flex flex-column align-items-center justify-content-center\" style=\"height: 100vh;\">\r\n <img [src]=\"getImageUrl\" style=\"height: 200px; width: 200px;\" [alt]=\"content?.image?.altText\">\r\n <span class=\"font-bold\">{{loadingText}}</span>\r\n</section>", styles: ["span{color:#000;font-weight:600;font-size:larger}\n"] }]
|
|
7679
|
+
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n<section class=\"d-flex flex-column align-items-center justify-content-center\" style=\"height: 100vh;\">\r\n <img loading=\"lazy\" [src]=\"getImageUrl\" style=\"height: 200px; width: 200px;\" [alt]=\"content?.image?.altText\">\r\n <span class=\"font-bold\">{{loadingText}}</span>\r\n</section>", styles: ["span{color:#000;font-weight:600;font-size:larger}\n"] }]
|
|
7703
7680
|
}], ctorParameters: () => [{ type: RestService }, { type: i2$3.Router }, { type: StorageServiceService }, { type: i5.MessageService }], propDecorators: { data: [{
|
|
7704
7681
|
type: Input
|
|
7705
7682
|
}], responseData: [{
|