simpo-component-library 3.6.917 → 3.6.919
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/directive/background-directive.mjs +16 -5
- package/esm2022/lib/ecommerce/sections/cart/cart.component.mjs +5 -60
- package/esm2022/lib/ecommerce/sections/featured-products/featured-products.component.mjs +58 -60
- package/esm2022/lib/ecommerce/sections/product-desc/product-desc.component.mjs +1 -56
- 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/simpo-button/simpo-button.component.mjs +5 -3
- package/esm2022/lib/elements/top-of-image-card/top-of-image-card.component.mjs +3 -3
- package/esm2022/lib/sections/appointment-form/appointment-form.component.mjs +2 -2
- package/esm2022/lib/sections/banner-carousel/banner-carousel.component.mjs +2 -2
- package/esm2022/lib/sections/banner-grid-section/banner-grid-section.component.mjs +2 -2
- package/esm2022/lib/sections/banner-section/banner-section.component.mjs +2 -2
- package/esm2022/lib/sections/button-grid-section/button-grid-section.component.mjs +2 -2
- package/esm2022/lib/sections/carousel-banner/carousel-banner.component.mjs +2 -2
- package/esm2022/lib/sections/condensed-and-gradient/condensed-and-gradient.component.mjs +2 -2
- package/esm2022/lib/sections/countdown-banner/countdown-banner.component.mjs +2 -2
- package/esm2022/lib/sections/footer-section/footer-section.component.mjs +2 -2
- package/esm2022/lib/sections/header-section/header-section.component.mjs +2 -2
- package/esm2022/lib/sections/header-text/header-text.component.mjs +2 -2
- package/esm2022/lib/sections/image-background/image-background/image-background.component.mjs +2 -2
- package/esm2022/lib/sections/image-section/image-section.component.mjs +2 -2
- package/esm2022/lib/sections/logo-showcase/logo-showcase.component.mjs +18 -8
- package/esm2022/lib/sections/navbar-section/navbar-section.component.mjs +2 -2
- package/esm2022/lib/sections/new-services/new-services.component.mjs +2 -2
- package/esm2022/lib/sections/new-testimonials/new-testimonials.component.mjs +2 -2
- package/esm2022/lib/sections/overlapping-image/overlapping-image.component.mjs +2 -2
- package/esm2022/lib/sections/pricing-section/pricing-section.component.mjs +2 -2
- package/esm2022/lib/sections/product-info-section/product-info-section.component.mjs +2 -2
- package/esm2022/lib/sections/service-section/service-section.component.mjs +2 -2
- package/esm2022/lib/sections/team-member-section/team-member-section.component.mjs +2 -2
- package/esm2022/lib/sections/text-image-section/text-image-section.component.mjs +2 -2
- package/esm2022/lib/sections/text-section/text-section.component.mjs +2 -2
- package/esm2022/lib/sections/video-section/video-section.component.mjs +3 -3
- package/esm2022/lib/services/rest.service.mjs +4 -17
- package/esm2022/lib/tokens/api-token.mjs +2 -2
- package/fesm2022/simpo-component-library.mjs +130 -233
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/directive/background-directive.d.ts +2 -1
- package/lib/ecommerce/sections/cart/cart.component.d.ts +0 -1
- package/lib/ecommerce/sections/product-desc/product-desc.component.d.ts +0 -1
- package/lib/elements/simpo-button/simpo-button.component.d.ts +2 -1
- package/lib/sections/logo-showcase/logo-showcase.component.d.ts +4 -1
- package/lib/services/rest.service.d.ts +1 -5
- package/lib/tokens/api-token.d.ts +0 -1
- package/package.json +1 -1
- package/simpo-component-library-3.6.919.tgz +0 -0
- package/simpo-component-library-3.6.917.tgz +0 -0
|
@@ -915,11 +915,11 @@ class SimpoButtonComponent {
|
|
|
915
915
|
this._eventService.buttonRedirection.emit({ data: this.buttonContent });
|
|
916
916
|
}
|
|
917
917
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SimpoButtonComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
918
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SimpoButtonComponent, isStandalone: true, selector: "app-button-element", inputs: { buttonContent: "buttonContent", buttonStyle: "buttonStyle", buttonId: "buttonId", color: "color", sectionId: "sectionId", edit: "edit", backgroundInfo: "backgroundInfo", disabled: "disabled", loading: "loading", isFullWidth: "isFullWidth" }, ngImport: i0, template: "<button class=\"button gap-2\" (click)=\"redirectTo()\" simpoButtonDirective [id]=\"sectionId+buttonId\"\
|
|
918
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SimpoButtonComponent, isStandalone: true, selector: "app-button-element", inputs: { buttonContent: "buttonContent", buttonStyle: "buttonStyle", buttonId: "buttonId", color: "color", sectionId: "sectionId", edit: "edit", backgroundInfo: "backgroundInfo", disabled: "disabled", loading: "loading", isFullWidth: "isFullWidth", itemIndex: "itemIndex" }, ngImport: i0, template: "<button class=\"button gap-2\" (click)=\"redirectTo()\" simpoButtonDirective [id]=\"sectionId+buttonId\"\n [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\"\n [backgroundInfo]=\"backgroundInfo\" [sectionId]=\"sectionId\" [buttonId]=\"buttonId\" [itemIndex]=\"itemIndex\"\n [class.flex-row-reverse]=\"buttonContent?.icon?.iconPosition === 'left'\" [ngClass]=\"{'w-max-content':!isFullWidth}\">\n <div>{{loading ? \"Loading...\" : buttonContent?.label}}</div>\n <div class=\"btn-icon\" *ngIf=\"buttonContent?.showIcon\" [ngStyle]=\"{\n 'background': buttonStyle?.type == 'Text' ? buttonStyle?.background : buttonStyle?.textColor,\n 'mask-image': 'url(' + buttonContent?.icon?.url + ')',\n 'mask-repeat': 'no-repeat',\n 'mask-size': 'cover',\n 'width': '26px',\n 'height': '26px',\n }\">\n </div>\n</button>", styles: [".button{font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--website-font-family);height:43px}.w-max-content{width:max-content!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.button:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px);transition:all .3s ease-in-out}\n"], dependencies: [{ kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId", "itemIndex"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
919
919
|
}
|
|
920
920
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SimpoButtonComponent, decorators: [{
|
|
921
921
|
type: Component,
|
|
922
|
-
args: [{ selector: 'app-button-element', standalone: true, imports: [ButtonDirectiveDirective, ButtonEditorDirective, CommonModule], template: "<button class=\"button gap-2\" (click)=\"redirectTo()\" simpoButtonDirective [id]=\"sectionId+buttonId\"\
|
|
922
|
+
args: [{ selector: 'app-button-element', standalone: true, imports: [ButtonDirectiveDirective, ButtonEditorDirective, CommonModule], template: "<button class=\"button gap-2\" (click)=\"redirectTo()\" simpoButtonDirective [id]=\"sectionId+buttonId\"\n [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\"\n [backgroundInfo]=\"backgroundInfo\" [sectionId]=\"sectionId\" [buttonId]=\"buttonId\" [itemIndex]=\"itemIndex\"\n [class.flex-row-reverse]=\"buttonContent?.icon?.iconPosition === 'left'\" [ngClass]=\"{'w-max-content':!isFullWidth}\">\n <div>{{loading ? \"Loading...\" : buttonContent?.label}}</div>\n <div class=\"btn-icon\" *ngIf=\"buttonContent?.showIcon\" [ngStyle]=\"{\n 'background': buttonStyle?.type == 'Text' ? buttonStyle?.background : buttonStyle?.textColor,\n 'mask-image': 'url(' + buttonContent?.icon?.url + ')',\n 'mask-repeat': 'no-repeat',\n 'mask-size': 'cover',\n 'width': '26px',\n 'height': '26px',\n }\">\n </div>\n</button>", styles: [".button{font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--website-font-family);height:43px}.w-max-content{width:max-content!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.button:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px);transition:all .3s ease-in-out}\n"] }]
|
|
923
923
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { buttonContent: [{
|
|
924
924
|
type: Input
|
|
925
925
|
}], buttonStyle: [{
|
|
@@ -940,6 +940,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
940
940
|
type: Input
|
|
941
941
|
}], isFullWidth: [{
|
|
942
942
|
type: Input
|
|
943
|
+
}], itemIndex: [{
|
|
944
|
+
type: Input
|
|
943
945
|
}] } });
|
|
944
946
|
|
|
945
947
|
class ObjectPositionDirective {
|
|
@@ -2027,7 +2029,7 @@ class BelowImageCardComponent {
|
|
|
2027
2029
|
}
|
|
2028
2030
|
}
|
|
2029
2031
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BelowImageCardComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2030
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BelowImageCardComponent, isStandalone: true, selector: "simpo-below-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button", edit: "edit", positionLayout: "positionLayout", itemIndex: "itemIndex" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"card-container\"\n (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\n [ngClass]=\"{'box-shadow' : content.display.showCard, 'px-0 py-0': styles?.borderLessImage && !content?.display?.showIcon ,'py-14' : content?.display?.showCardBackground && !styles?.borderLessImage}\"\n [style.background]=\"getBackground()\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" [backgroundColor]=\"styles?.background?.color\"\n [simpoSetDynamicBackground]=\"content?.display?.showCardBackground\" [class]=\"getAlignment()\">\n\n <ng-container *ngIf=\"positionLayout == 'bottom'\">\n <ng-container *ngTemplateOutlet=\"headingDescription\"></ng-container>\n <ng-container *ngTemplateOutlet=\"iconAndImage\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"positionLayout == 'top'\">\n <ng-container *ngTemplateOutlet=\"iconAndImage\"></ng-container>\n <ng-container *ngTemplateOutlet=\"headingDescription\"></ng-container>\n </ng-container>\n\n <div class=\"ptb-1 w-100\">\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\" class=\"card-button\"\n [simpoHoverAnimation]=\"getContentAnimation()\">\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\"\n [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\" [color]=\"styles?.background?.accentColor\"\n [backgroundInfo]=\"styles?.background\" [edit]=\"edit\">\n </app-button-element>\n </div>\n </div>\n</div>\n<ng-template #iconAndImage>\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\n [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.display.showImage\"\n [appImageEditor]=\"edit || false\" [imageData]=\"data.image\" [sectionId]=\"componentId\"\n [simpoObjectPosition]=\"data?.image?.position\" [class]=\"data?.id+data.image.id\" [itemIndex]=\"itemIndex\">\n\n\n <ng-container *ngIf=\"content.display.showIcon && (data.icon.url.includes('.png') || data.icon.url.includes('.svg'))\">\n <div [simpoCorner]=\"styles?.corners\" [class.hovering-effect]=\"content?.display?.showHoverEffect\" [id]=\"componentId\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"data?.icon?.showBackground ? getIconBackground : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\" [sectionId]=\"componentId\"\n [showIcon]=\"content.display.showIcon\" [itemIndex]=\"itemIndex\">\n <div [id]=\"componentId\" [iconId]=\"componentId + data?.icon?.id\" [simpoIconDirective]=\"data?.icon\"\n class=\"w-65 h-100\" [class.w-100]=\"!data?.icon?.showBackground\">\n </div>\n </div>\n </ng-container>\n\n <img loading=\"lazy\" class=\"logo-img\" [src]=\"data.icon.url\" [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\"\n [sectionId]=\"componentId\" [showIcon]=\"content.display.showIcon\" [itemIndex]=\"itemIndex\"\n *ngIf=\"content.display.showIcon && !data.icon.url.includes('.png') && !data.icon.url.includes('.svg')\"\n class=\"logo-img\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n [class.hovering-effect]=\"content?.display?.showHoverEffect\">\n</ng-template>\n\n<ng-template #headingDescription>\n\n <div class=\"ptb-1 content-side w-100\">\n <div class=\"heading-medium mb-1\" *ngIf=\"content.display.showHeading\">\n <div class=\"d-flex justify-content-between align-items-start\">\n <simpo-text-editor class=\"w-100\" [(value)]=\"data.inputText[0].value\" [editable]=\"edit || false\"\n [sectionId]=\"componentId\" [inputTextIndex]=\"0\" [itemIndex]=\"itemIndex\" [isRTE]=\"data.inputText[0]?.isRTE\">\n </simpo-text-editor>\n <div class=\"indexing\" *ngIf=\"styles?.showIndexing\" [style.color]=\"styles?.background?.accentColor\"\n [style.background]=\"getGlassyBackground(styles?.background?.accentColor)\">\n 0{{ currentIndex }}\n </div>\n </div>\n </div>\n\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\n <simpo-text-editor class=\"w-100\" [(value)]=\"data.inputText[01].value \" [editable]=\"edit || false\"\n [sectionId]=\"componentId\" [inputTextIndex]=\"1\" [itemIndex]=\"itemIndex\"\n [isRTE]=\"data.inputText[1]?.isRTE\"></simpo-text-editor>\n </div>\n </div>\n</ng-template>", styles: [".w-100{width:100%}.card-container{display:flex;flex-direction:column;height:100%;position:relative}.card-inner{display:flex;flex-direction:column;width:100%}.justify-items-start{align-items:flex-start;text-align:left}.justify-items-end{align-items:flex-end;text-align:right}.justify-items-center{align-items:center;text-align:center}.content-side{display:flex;flex-direction:column;flex:1;padding:14px 18px}.card-button{margin-top:auto;padding-top:12px;padding-bottom:10px}.ptb-1{padding-top:1rem}.mb-1{margin-bottom:1rem!important}.box-shadow{box-shadow:0 10px 40px #0a32231a;padding:12px 20px;color:#000!important}.logo-img{width:70px;height:70px;margin-top:.25rem;margin:0 18px}.w-65{width:65%}.justify-items-start{justify-items:flex-start}.justify-items-end{justify-items:flex-end}.justify-items-center{justify-items:center}.indexing{font-size:14px;padding:6px 8px;border-radius:50px}@media screen and (max-width: 475px){.mt-4{margin-top:unset!important}}\n"], dependencies: [{ kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { kind: "directive", type: HoverAnimationDirective, selector: "[simpoHoverAnimation]", inputs: ["simpoHoverAnimation"] }, { kind: "directive", type: TranslateOnhoverDirective, selector: "[simpoTranslateOnhover]", inputs: ["simpoTranslateOnhover"] }, { kind: "directive", type: SetDynamicBackgroundDirective, selector: "[simpoSetDynamicBackground]", inputs: ["backgroundColor", "simpoSetDynamicBackground"] }, { kind: "directive", type: IconDirectiveDirective, selector: "[simpoIconDirective]", inputs: ["simpoIconDirective", "iconId"] }] }); }
|
|
2032
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BelowImageCardComponent, isStandalone: true, selector: "simpo-below-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button", edit: "edit", positionLayout: "positionLayout", itemIndex: "itemIndex" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"card-container\"\n (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\n [ngClass]=\"{'box-shadow' : content.display.showCard, 'px-0 py-0': styles?.borderLessImage && !content?.display?.showIcon ,'py-14' : content?.display?.showCardBackground && !styles?.borderLessImage}\"\n [style.background]=\"getBackground()\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" [backgroundColor]=\"styles?.background?.color\"\n [simpoSetDynamicBackground]=\"content?.display?.showCardBackground\" [class]=\"getAlignment()\">\n\n <ng-container *ngIf=\"positionLayout == 'bottom'\">\n <ng-container *ngTemplateOutlet=\"headingDescription\"></ng-container>\n <ng-container *ngTemplateOutlet=\"iconAndImage\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"positionLayout == 'top'\">\n <ng-container *ngTemplateOutlet=\"iconAndImage\"></ng-container>\n <ng-container *ngTemplateOutlet=\"headingDescription\"></ng-container>\n </ng-container>\n\n <div class=\"ptb-1 w-100\">\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\" class=\"card-button\"\n [simpoHoverAnimation]=\"getContentAnimation()\">\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\"\n [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\" [color]=\"styles?.background?.accentColor\"\n [backgroundInfo]=\"styles?.background\" [edit]=\"edit\" [itemIndex]=\"itemIndex\">\n </app-button-element>\n </div>\n </div>\n</div>\n<ng-template #iconAndImage>\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\n [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.display.showImage\"\n [appImageEditor]=\"edit || false\" [imageData]=\"data.image\" [sectionId]=\"componentId\"\n [simpoObjectPosition]=\"data?.image?.position\" [class]=\"data?.id+data.image.id\" [itemIndex]=\"itemIndex\">\n\n\n <ng-container *ngIf=\"content.display.showIcon && (data.icon.url.includes('.png') || data.icon.url.includes('.svg'))\">\n <div [simpoCorner]=\"styles?.corners\" [class.hovering-effect]=\"content?.display?.showHoverEffect\" [id]=\"componentId\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"data?.icon?.showBackground ? getIconBackground : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\" [sectionId]=\"componentId\"\n [showIcon]=\"content.display.showIcon\" [itemIndex]=\"itemIndex\">\n <div [id]=\"componentId\" [iconId]=\"componentId + data?.icon?.id\" [simpoIconDirective]=\"data?.icon\"\n class=\"w-65 h-100\" [class.w-100]=\"!data?.icon?.showBackground\">\n </div>\n </div>\n </ng-container>\n\n <img loading=\"lazy\" class=\"logo-img\" [src]=\"data.icon.url\" [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\"\n [sectionId]=\"componentId\" [showIcon]=\"content.display.showIcon\" [itemIndex]=\"itemIndex\"\n *ngIf=\"content.display.showIcon && !data.icon.url.includes('.png') && !data.icon.url.includes('.svg')\"\n class=\"logo-img\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n [class.hovering-effect]=\"content?.display?.showHoverEffect\">\n</ng-template>\n\n<ng-template #headingDescription>\n\n <div class=\"ptb-1 content-side w-100\">\n <div class=\"heading-medium mb-1\" *ngIf=\"content.display.showHeading\">\n <div class=\"d-flex justify-content-between align-items-start\">\n <simpo-text-editor class=\"w-100\" [(value)]=\"data.inputText[0].value\" [editable]=\"edit || false\"\n [sectionId]=\"componentId\" [inputTextIndex]=\"0\" [itemIndex]=\"itemIndex\" [isRTE]=\"data.inputText[0]?.isRTE\">\n </simpo-text-editor>\n <div class=\"indexing\" *ngIf=\"styles?.showIndexing\" [style.color]=\"styles?.background?.accentColor\"\n [style.background]=\"getGlassyBackground(styles?.background?.accentColor)\">\n 0{{ currentIndex }}\n </div>\n </div>\n </div>\n\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\n <simpo-text-editor class=\"w-100\" [(value)]=\"data.inputText[01].value \" [editable]=\"edit || false\"\n [sectionId]=\"componentId\" [inputTextIndex]=\"1\" [itemIndex]=\"itemIndex\"\n [isRTE]=\"data.inputText[1]?.isRTE\"></simpo-text-editor>\n </div>\n </div>\n</ng-template>", styles: [".w-100{width:100%}.card-container{display:flex;flex-direction:column;height:100%;position:relative}.card-inner{display:flex;flex-direction:column;width:100%}.justify-items-start{align-items:flex-start;text-align:left}.justify-items-end{align-items:flex-end;text-align:right}.justify-items-center{align-items:center;text-align:center}.content-side{display:flex;flex-direction:column;flex:1;padding:14px 18px}.card-button{margin-top:auto;padding-top:12px;padding-bottom:10px}.ptb-1{padding-top:1rem}.mb-1{margin-bottom:1rem!important}.box-shadow{box-shadow:0 10px 40px #0a32231a;padding:12px 20px;color:#000!important}.logo-img{width:70px;height:70px;margin-top:.25rem;margin:0 18px}.w-65{width:65%}.justify-items-start{justify-items:flex-start}.justify-items-end{justify-items:flex-end}.justify-items-center{justify-items:center}.indexing{font-size:14px;padding:6px 8px;border-radius:50px}@media screen and (max-width: 475px){.mt-4{margin-top:unset!important}}\n"], dependencies: [{ kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth", "itemIndex"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { kind: "directive", type: HoverAnimationDirective, selector: "[simpoHoverAnimation]", inputs: ["simpoHoverAnimation"] }, { kind: "directive", type: TranslateOnhoverDirective, selector: "[simpoTranslateOnhover]", inputs: ["simpoTranslateOnhover"] }, { kind: "directive", type: SetDynamicBackgroundDirective, selector: "[simpoSetDynamicBackground]", inputs: ["backgroundColor", "simpoSetDynamicBackground"] }, { kind: "directive", type: IconDirectiveDirective, selector: "[simpoIconDirective]", inputs: ["simpoIconDirective", "iconId"] }] }); }
|
|
2031
2033
|
}
|
|
2032
2034
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BelowImageCardComponent, decorators: [{
|
|
2033
2035
|
type: Component,
|
|
@@ -2044,7 +2046,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2044
2046
|
SetDynamicBackgroundDirective,
|
|
2045
2047
|
IconDirectiveDirective,
|
|
2046
2048
|
CdkDragPlaceholder
|
|
2047
|
-
], template: "<div class=\"card-container\"\n (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\n [ngClass]=\"{'box-shadow' : content.display.showCard, 'px-0 py-0': styles?.borderLessImage && !content?.display?.showIcon ,'py-14' : content?.display?.showCardBackground && !styles?.borderLessImage}\"\n [style.background]=\"getBackground()\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" [backgroundColor]=\"styles?.background?.color\"\n [simpoSetDynamicBackground]=\"content?.display?.showCardBackground\" [class]=\"getAlignment()\">\n\n <ng-container *ngIf=\"positionLayout == 'bottom'\">\n <ng-container *ngTemplateOutlet=\"headingDescription\"></ng-container>\n <ng-container *ngTemplateOutlet=\"iconAndImage\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"positionLayout == 'top'\">\n <ng-container *ngTemplateOutlet=\"iconAndImage\"></ng-container>\n <ng-container *ngTemplateOutlet=\"headingDescription\"></ng-container>\n </ng-container>\n\n <div class=\"ptb-1 w-100\">\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\" class=\"card-button\"\n [simpoHoverAnimation]=\"getContentAnimation()\">\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\"\n [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\" [color]=\"styles?.background?.accentColor\"\n [backgroundInfo]=\"styles?.background\" [edit]=\"edit\">\n </app-button-element>\n </div>\n </div>\n</div>\n<ng-template #iconAndImage>\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\n [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.display.showImage\"\n [appImageEditor]=\"edit || false\" [imageData]=\"data.image\" [sectionId]=\"componentId\"\n [simpoObjectPosition]=\"data?.image?.position\" [class]=\"data?.id+data.image.id\" [itemIndex]=\"itemIndex\">\n\n\n <ng-container *ngIf=\"content.display.showIcon && (data.icon.url.includes('.png') || data.icon.url.includes('.svg'))\">\n <div [simpoCorner]=\"styles?.corners\" [class.hovering-effect]=\"content?.display?.showHoverEffect\" [id]=\"componentId\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"data?.icon?.showBackground ? getIconBackground : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\" [sectionId]=\"componentId\"\n [showIcon]=\"content.display.showIcon\" [itemIndex]=\"itemIndex\">\n <div [id]=\"componentId\" [iconId]=\"componentId + data?.icon?.id\" [simpoIconDirective]=\"data?.icon\"\n class=\"w-65 h-100\" [class.w-100]=\"!data?.icon?.showBackground\">\n </div>\n </div>\n </ng-container>\n\n <img loading=\"lazy\" class=\"logo-img\" [src]=\"data.icon.url\" [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\"\n [sectionId]=\"componentId\" [showIcon]=\"content.display.showIcon\" [itemIndex]=\"itemIndex\"\n *ngIf=\"content.display.showIcon && !data.icon.url.includes('.png') && !data.icon.url.includes('.svg')\"\n class=\"logo-img\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n [class.hovering-effect]=\"content?.display?.showHoverEffect\">\n</ng-template>\n\n<ng-template #headingDescription>\n\n <div class=\"ptb-1 content-side w-100\">\n <div class=\"heading-medium mb-1\" *ngIf=\"content.display.showHeading\">\n <div class=\"d-flex justify-content-between align-items-start\">\n <simpo-text-editor class=\"w-100\" [(value)]=\"data.inputText[0].value\" [editable]=\"edit || false\"\n [sectionId]=\"componentId\" [inputTextIndex]=\"0\" [itemIndex]=\"itemIndex\" [isRTE]=\"data.inputText[0]?.isRTE\">\n </simpo-text-editor>\n <div class=\"indexing\" *ngIf=\"styles?.showIndexing\" [style.color]=\"styles?.background?.accentColor\"\n [style.background]=\"getGlassyBackground(styles?.background?.accentColor)\">\n 0{{ currentIndex }}\n </div>\n </div>\n </div>\n\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\n <simpo-text-editor class=\"w-100\" [(value)]=\"data.inputText[01].value \" [editable]=\"edit || false\"\n [sectionId]=\"componentId\" [inputTextIndex]=\"1\" [itemIndex]=\"itemIndex\"\n [isRTE]=\"data.inputText[1]?.isRTE\"></simpo-text-editor>\n </div>\n </div>\n</ng-template>", styles: [".w-100{width:100%}.card-container{display:flex;flex-direction:column;height:100%;position:relative}.card-inner{display:flex;flex-direction:column;width:100%}.justify-items-start{align-items:flex-start;text-align:left}.justify-items-end{align-items:flex-end;text-align:right}.justify-items-center{align-items:center;text-align:center}.content-side{display:flex;flex-direction:column;flex:1;padding:14px 18px}.card-button{margin-top:auto;padding-top:12px;padding-bottom:10px}.ptb-1{padding-top:1rem}.mb-1{margin-bottom:1rem!important}.box-shadow{box-shadow:0 10px 40px #0a32231a;padding:12px 20px;color:#000!important}.logo-img{width:70px;height:70px;margin-top:.25rem;margin:0 18px}.w-65{width:65%}.justify-items-start{justify-items:flex-start}.justify-items-end{justify-items:flex-end}.justify-items-center{justify-items:center}.indexing{font-size:14px;padding:6px 8px;border-radius:50px}@media screen and (max-width: 475px){.mt-4{margin-top:unset!important}}\n"] }]
|
|
2049
|
+
], template: "<div class=\"card-container\"\n (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\n [ngClass]=\"{'box-shadow' : content.display.showCard, 'px-0 py-0': styles?.borderLessImage && !content?.display?.showIcon ,'py-14' : content?.display?.showCardBackground && !styles?.borderLessImage}\"\n [style.background]=\"getBackground()\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" [backgroundColor]=\"styles?.background?.color\"\n [simpoSetDynamicBackground]=\"content?.display?.showCardBackground\" [class]=\"getAlignment()\">\n\n <ng-container *ngIf=\"positionLayout == 'bottom'\">\n <ng-container *ngTemplateOutlet=\"headingDescription\"></ng-container>\n <ng-container *ngTemplateOutlet=\"iconAndImage\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"positionLayout == 'top'\">\n <ng-container *ngTemplateOutlet=\"iconAndImage\"></ng-container>\n <ng-container *ngTemplateOutlet=\"headingDescription\"></ng-container>\n </ng-container>\n\n <div class=\"ptb-1 w-100\">\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\" class=\"card-button\"\n [simpoHoverAnimation]=\"getContentAnimation()\">\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\"\n [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\" [color]=\"styles?.background?.accentColor\"\n [backgroundInfo]=\"styles?.background\" [edit]=\"edit\" [itemIndex]=\"itemIndex\">\n </app-button-element>\n </div>\n </div>\n</div>\n<ng-template #iconAndImage>\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\n [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.display.showImage\"\n [appImageEditor]=\"edit || false\" [imageData]=\"data.image\" [sectionId]=\"componentId\"\n [simpoObjectPosition]=\"data?.image?.position\" [class]=\"data?.id+data.image.id\" [itemIndex]=\"itemIndex\">\n\n\n <ng-container *ngIf=\"content.display.showIcon && (data.icon.url.includes('.png') || data.icon.url.includes('.svg'))\">\n <div [simpoCorner]=\"styles?.corners\" [class.hovering-effect]=\"content?.display?.showHoverEffect\" [id]=\"componentId\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"data?.icon?.showBackground ? getIconBackground : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\" [sectionId]=\"componentId\"\n [showIcon]=\"content.display.showIcon\" [itemIndex]=\"itemIndex\">\n <div [id]=\"componentId\" [iconId]=\"componentId + data?.icon?.id\" [simpoIconDirective]=\"data?.icon\"\n class=\"w-65 h-100\" [class.w-100]=\"!data?.icon?.showBackground\">\n </div>\n </div>\n </ng-container>\n\n <img loading=\"lazy\" class=\"logo-img\" [src]=\"data.icon.url\" [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\"\n [sectionId]=\"componentId\" [showIcon]=\"content.display.showIcon\" [itemIndex]=\"itemIndex\"\n *ngIf=\"content.display.showIcon && !data.icon.url.includes('.png') && !data.icon.url.includes('.svg')\"\n class=\"logo-img\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n [class.hovering-effect]=\"content?.display?.showHoverEffect\">\n</ng-template>\n\n<ng-template #headingDescription>\n\n <div class=\"ptb-1 content-side w-100\">\n <div class=\"heading-medium mb-1\" *ngIf=\"content.display.showHeading\">\n <div class=\"d-flex justify-content-between align-items-start\">\n <simpo-text-editor class=\"w-100\" [(value)]=\"data.inputText[0].value\" [editable]=\"edit || false\"\n [sectionId]=\"componentId\" [inputTextIndex]=\"0\" [itemIndex]=\"itemIndex\" [isRTE]=\"data.inputText[0]?.isRTE\">\n </simpo-text-editor>\n <div class=\"indexing\" *ngIf=\"styles?.showIndexing\" [style.color]=\"styles?.background?.accentColor\"\n [style.background]=\"getGlassyBackground(styles?.background?.accentColor)\">\n 0{{ currentIndex }}\n </div>\n </div>\n </div>\n\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\n <simpo-text-editor class=\"w-100\" [(value)]=\"data.inputText[01].value \" [editable]=\"edit || false\"\n [sectionId]=\"componentId\" [inputTextIndex]=\"1\" [itemIndex]=\"itemIndex\"\n [isRTE]=\"data.inputText[1]?.isRTE\"></simpo-text-editor>\n </div>\n </div>\n</ng-template>", styles: [".w-100{width:100%}.card-container{display:flex;flex-direction:column;height:100%;position:relative}.card-inner{display:flex;flex-direction:column;width:100%}.justify-items-start{align-items:flex-start;text-align:left}.justify-items-end{align-items:flex-end;text-align:right}.justify-items-center{align-items:center;text-align:center}.content-side{display:flex;flex-direction:column;flex:1;padding:14px 18px}.card-button{margin-top:auto;padding-top:12px;padding-bottom:10px}.ptb-1{padding-top:1rem}.mb-1{margin-bottom:1rem!important}.box-shadow{box-shadow:0 10px 40px #0a32231a;padding:12px 20px;color:#000!important}.logo-img{width:70px;height:70px;margin-top:.25rem;margin:0 18px}.w-65{width:65%}.justify-items-start{justify-items:flex-start}.justify-items-end{justify-items:flex-end}.justify-items-center{justify-items:center}.indexing{font-size:14px;padding:6px 8px;border-radius:50px}@media screen and (max-width: 475px){.mt-4{margin-top:unset!important}}\n"] }]
|
|
2048
2050
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
2049
2051
|
type: Input
|
|
2050
2052
|
}], styles: [{
|
|
@@ -2194,7 +2196,7 @@ class TopOfImageCardComponent {
|
|
|
2194
2196
|
}
|
|
2195
2197
|
}
|
|
2196
2198
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TopOfImageCardComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2197
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TopOfImageCardComponent, isStandalone: true, selector: "simpo-top-of-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button", edit: "edit", itemIndex: "itemIndex" }, ngImport: i0, template: "<!-- <div style=\"position: relative;\">\
|
|
2199
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TopOfImageCardComponent, isStandalone: true, selector: "simpo-top-of-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button", edit: "edit", itemIndex: "itemIndex" }, ngImport: i0, template: "<!-- <div style=\"position: relative;\">\n\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.showImage\">\n\n <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n <div style=\"color: white;\" class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\"\n *ngIf=\"content.showHeading\"></div>\n <div style=\"color: white;\" class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.showContent\">\n </div>\n <app-button-element [buttonData]=\"data?.button\" [sectionId]=\"componentId\" [buttonStyle]=\"styles?.button\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n </div>\n</div>\n -->\n<div class=\"top-container\" (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\n [ngStyle]=\"{'background-image' : content.display.showImage ? 'url('+data.image.url+')' : ''}\"\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\">\n <div class=\"popular-tag\" [simpoCorner]=\"styles?.corners\"\n [ngStyle]=\"{'background-color': styles?.background?.accentColor}\" \n *ngIf=\"data?.highlight?.highlighted === true\">\n <simpo-text-editor [(value)]=\"data.highlight.label\" [editable]=\"edit || false\" [sectionId]=\"componentId\" [itemIndex]=\"itemIndex\"></simpo-text-editor>\n </div>\n <div [simpoImageDirective]=\"styles?.image\" [id]=\"componentId\" *ngIf=\"content.display.showImage\" \n [simpoObjectPosition]=\"data?.image?.position\"></div>\n <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\"\n [simpoTextBackgroundDirective]=\"content.display.showImage ? styles?.textBackground : ''\">\n <div class=\"heading-medium mb-1 lh-40\" *ngIf=\"content.display.showHeading\">\n <simpo-text-editor [(value)]=\"data.inputText[0].value \" [editable]=\"edit || false\" [sectionId]=\"componentId\" [inputTextIndex]=\"0\" [itemIndex]=\"itemIndex\" [isRTE]=\"data.inputText[0]?.isRTE\"></simpo-text-editor>\n\n </div>\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\n <simpo-text-editor [(value)]=\"data.inputText[1].value \" [editable]=\"edit || false\" [sectionId]=\"componentId\" [inputTextIndex]=\"1\" [itemIndex]=\"itemIndex\" [isRTE]=\"data.inputText[1]?.isRTE\"></simpo-text-editor>\n </div>\n <div class=\"button-wrapper w-100\" [ngClass]=\"getButtonAlignmentClass()\">\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\"\n [simpoHoverAnimation]=\"getContentAnimation()\" class=\"button-inner\">\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\"\n [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\"\n [backgroundInfo]=\"styles?.background\" [edit]=\"edit\" [itemIndex]=\"itemIndex\">\n </app-button-element>\n </div>\n </div>\n </div>\n</div>\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{padding:0 15px 16px;padding-top:1rem;display:flex;flex-direction:column;height:100%}.top-container{background-position:center center;background-size:cover;height:100%;position:relative;display:flex;flex-direction:column}.button-wrapper{margin-top:auto;padding-top:12px;display:flex;width:100%}.button-inner{width:max-content}.popular-tag{position:absolute;top:-1px;right:-2px;padding:1px 20px 3px;border-top-left-radius:0!important;border-bottom-right-radius:0!important}.lh-40{line-height:40px}.body-desc{margin-bottom:10px}.justify-items-start{align-items:flex-start;text-align:left}.justify-items-end{align-items:flex-end;text-align:right}.justify-items-center{align-items:center;text-align:center}.button-left{justify-content:flex-start}.button-center{justify-content:center}.button-right{justify-content:flex-end}@media screen and (max-width: 475px){.box-shadow{box-shadow:unset!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: TextBackgroundDirectiveDirective, selector: "[simpoTextBackgroundDirective]", inputs: ["simpoTextBackgroundDirective"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth", "itemIndex"] }, { kind: "directive", type: HoverAnimationDirective, selector: "[simpoHoverAnimation]", inputs: ["simpoHoverAnimation"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }] }); }
|
|
2198
2200
|
}
|
|
2199
2201
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TopOfImageCardComponent, decorators: [{
|
|
2200
2202
|
type: Component,
|
|
@@ -2207,7 +2209,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2207
2209
|
SimpoButtonComponent,
|
|
2208
2210
|
HoverAnimationDirective,
|
|
2209
2211
|
ObjectPositionDirective
|
|
2210
|
-
], template: "<!-- <div style=\"position: relative;\">\
|
|
2212
|
+
], template: "<!-- <div style=\"position: relative;\">\n\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.showImage\">\n\n <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n <div style=\"color: white;\" class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\"\n *ngIf=\"content.showHeading\"></div>\n <div style=\"color: white;\" class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.showContent\">\n </div>\n <app-button-element [buttonData]=\"data?.button\" [sectionId]=\"componentId\" [buttonStyle]=\"styles?.button\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n </div>\n</div>\n -->\n<div class=\"top-container\" (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\n [ngStyle]=\"{'background-image' : content.display.showImage ? 'url('+data.image.url+')' : ''}\"\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\">\n <div class=\"popular-tag\" [simpoCorner]=\"styles?.corners\"\n [ngStyle]=\"{'background-color': styles?.background?.accentColor}\" \n *ngIf=\"data?.highlight?.highlighted === true\">\n <simpo-text-editor [(value)]=\"data.highlight.label\" [editable]=\"edit || false\" [sectionId]=\"componentId\" [itemIndex]=\"itemIndex\"></simpo-text-editor>\n </div>\n <div [simpoImageDirective]=\"styles?.image\" [id]=\"componentId\" *ngIf=\"content.display.showImage\" \n [simpoObjectPosition]=\"data?.image?.position\"></div>\n <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\"\n [simpoTextBackgroundDirective]=\"content.display.showImage ? styles?.textBackground : ''\">\n <div class=\"heading-medium mb-1 lh-40\" *ngIf=\"content.display.showHeading\">\n <simpo-text-editor [(value)]=\"data.inputText[0].value \" [editable]=\"edit || false\" [sectionId]=\"componentId\" [inputTextIndex]=\"0\" [itemIndex]=\"itemIndex\" [isRTE]=\"data.inputText[0]?.isRTE\"></simpo-text-editor>\n\n </div>\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\n <simpo-text-editor [(value)]=\"data.inputText[1].value \" [editable]=\"edit || false\" [sectionId]=\"componentId\" [inputTextIndex]=\"1\" [itemIndex]=\"itemIndex\" [isRTE]=\"data.inputText[1]?.isRTE\"></simpo-text-editor>\n </div>\n <div class=\"button-wrapper w-100\" [ngClass]=\"getButtonAlignmentClass()\">\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\"\n [simpoHoverAnimation]=\"getContentAnimation()\" class=\"button-inner\">\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\"\n [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\"\n [backgroundInfo]=\"styles?.background\" [edit]=\"edit\" [itemIndex]=\"itemIndex\">\n </app-button-element>\n </div>\n </div>\n </div>\n</div>\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{padding:0 15px 16px;padding-top:1rem;display:flex;flex-direction:column;height:100%}.top-container{background-position:center center;background-size:cover;height:100%;position:relative;display:flex;flex-direction:column}.button-wrapper{margin-top:auto;padding-top:12px;display:flex;width:100%}.button-inner{width:max-content}.popular-tag{position:absolute;top:-1px;right:-2px;padding:1px 20px 3px;border-top-left-radius:0!important;border-bottom-right-radius:0!important}.lh-40{line-height:40px}.body-desc{margin-bottom:10px}.justify-items-start{align-items:flex-start;text-align:left}.justify-items-end{align-items:flex-end;text-align:right}.justify-items-center{align-items:center;text-align:center}.button-left{justify-content:flex-start}.button-center{justify-content:center}.button-right{justify-content:flex-end}@media screen and (max-width: 475px){.box-shadow{box-shadow:unset!important}}\n"] }]
|
|
2211
2213
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
2212
2214
|
type: Input
|
|
2213
2215
|
}], styles: [{
|
|
@@ -2237,7 +2239,7 @@ class CoveringImageCardComponent {
|
|
|
2237
2239
|
return { contentAnimation: this.styles?.contentAnimation };
|
|
2238
2240
|
}
|
|
2239
2241
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CoveringImageCardComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2240
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CoveringImageCardComponent, isStandalone: true, selector: "simpo-covering-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button", edit: "edit", itemIndex: "itemIndex" }, ngImport: i0, template: "<div class=\"parent-tab\" [id]=\"componentId\"\
|
|
2242
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CoveringImageCardComponent, isStandalone: true, selector: "simpo-covering-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button", edit: "edit", itemIndex: "itemIndex" }, ngImport: i0, template: "<div class=\"parent-tab\" [id]=\"componentId\"\n (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\">\n <div class=\"popular-tag\" [simpoCorner]=\"styles?.corners\"\n [ngStyle]=\"{'background-color': styles?.background?.accentColor}\" *ngIf=\"data?.highlight?.highlighted === true\">\n <simpo-text-editor [(value)]=\"data.highlight.label\" [editable]=\"edit || false\" [sectionId]=\"componentId\" [itemIndex]=\"itemIndex\"></simpo-text-editor>\n </div>\n <ng-container *ngIf=\"content.display.showImage\">\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoCorner]=\"styles?.corners\"\n [id]=\"componentId\" class=\"w-100 img\"\n [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\n [class]=\"componentId+data.image.id\" [simpoImageDirective]=\"styles?.image\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\n [imageData]=\"data?.image\" [sectionId]=\"componentId\" [simpoObjectPosition]=\"data?.image?.position\" [itemIndex]=\"itemIndex\">\n <!-- <img loading=\"lazy\" [simpoImageDirective]=\"styles?.image\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n [class]=\"data?.id+data.image.id\" [simpoObjectPosition]=\"data.image.position\" [src]=\"data.image.url\"\n [alt]=\"data.image.altText\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"data?.image\"\n [sectionId]=\"data?.id\" class=\"w-100 h-100\" />\n </ng-container> -->\n </ng-container>\n <div class=\"ptb-1 content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\"\n [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n <div class=\"heading-medium mb-1\" *ngIf=\"content.display.showHeading\">\n <simpo-text-editor [(value)]=\"data.inputText[0].value \" [editable]=\"edit || false\" [sectionId]=\"componentId\" [inputTextIndex]=\"0\" [itemIndex]=\"itemIndex\" [isRTE]=\"data.inputText[0]?.isRTE\"></simpo-text-editor>\n </div>\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\n <simpo-text-editor [(value)]=\"data.inputText[1].value \" [editable]=\"edit || false\" [sectionId]=\"componentId\" [inputTextIndex]=\"1\" [itemIndex]=\"itemIndex\" [isRTE]=\"data.inputText[1]?.isRTE\"></simpo-text-editor>\n </div>\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\"\n [simpoHoverAnimation]=\"getContentAnimation()\">\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\"\n [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\" [edit]=\"edit\"\n [backgroundInfo]=\"styles?.background\" [itemIndex]=\"itemIndex\"></app-button-element>\n </div>\n </div>\n</div>", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{position:relative;bottom:0;padding:1.5rem;display:flex;flex-direction:column;min-height:100%}.content>div:last-child{margin-top:auto}.parent-tab{position:relative;height:100%;width:100%;display:flex;flex-direction:column}.img{position:absolute;height:100%;display:flex}.popular-tag{position:absolute;top:0;right:0;padding:1px 20px 3px;border-top-left-radius:0!important;border-bottom-right-radius:0!important;z-index:10}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: TextBackgroundDirectiveDirective, selector: "[simpoTextBackgroundDirective]", inputs: ["simpoTextBackgroundDirective"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth", "itemIndex"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { kind: "directive", type: HoverAnimationDirective, selector: "[simpoHoverAnimation]", inputs: ["simpoHoverAnimation"] }] }); }
|
|
2241
2243
|
}
|
|
2242
2244
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CoveringImageCardComponent, decorators: [{
|
|
2243
2245
|
type: Component,
|
|
@@ -2252,7 +2254,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2252
2254
|
ImageEditorDirective,
|
|
2253
2255
|
HoverAnimationDirective,
|
|
2254
2256
|
ButtonDirectiveDirective
|
|
2255
|
-
], template: "<div class=\"parent-tab\" [id]=\"componentId\"\
|
|
2257
|
+
], template: "<div class=\"parent-tab\" [id]=\"componentId\"\n (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\">\n <div class=\"popular-tag\" [simpoCorner]=\"styles?.corners\"\n [ngStyle]=\"{'background-color': styles?.background?.accentColor}\" *ngIf=\"data?.highlight?.highlighted === true\">\n <simpo-text-editor [(value)]=\"data.highlight.label\" [editable]=\"edit || false\" [sectionId]=\"componentId\" [itemIndex]=\"itemIndex\"></simpo-text-editor>\n </div>\n <ng-container *ngIf=\"content.display.showImage\">\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoCorner]=\"styles?.corners\"\n [id]=\"componentId\" class=\"w-100 img\"\n [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\n [class]=\"componentId+data.image.id\" [simpoImageDirective]=\"styles?.image\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\n [imageData]=\"data?.image\" [sectionId]=\"componentId\" [simpoObjectPosition]=\"data?.image?.position\" [itemIndex]=\"itemIndex\">\n <!-- <img loading=\"lazy\" [simpoImageDirective]=\"styles?.image\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n [class]=\"data?.id+data.image.id\" [simpoObjectPosition]=\"data.image.position\" [src]=\"data.image.url\"\n [alt]=\"data.image.altText\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"data?.image\"\n [sectionId]=\"data?.id\" class=\"w-100 h-100\" />\n </ng-container> -->\n </ng-container>\n <div class=\"ptb-1 content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\"\n [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n <div class=\"heading-medium mb-1\" *ngIf=\"content.display.showHeading\">\n <simpo-text-editor [(value)]=\"data.inputText[0].value \" [editable]=\"edit || false\" [sectionId]=\"componentId\" [inputTextIndex]=\"0\" [itemIndex]=\"itemIndex\" [isRTE]=\"data.inputText[0]?.isRTE\"></simpo-text-editor>\n </div>\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\n <simpo-text-editor [(value)]=\"data.inputText[1].value \" [editable]=\"edit || false\" [sectionId]=\"componentId\" [inputTextIndex]=\"1\" [itemIndex]=\"itemIndex\" [isRTE]=\"data.inputText[1]?.isRTE\"></simpo-text-editor>\n </div>\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\"\n [simpoHoverAnimation]=\"getContentAnimation()\">\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\"\n [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\" [edit]=\"edit\"\n [backgroundInfo]=\"styles?.background\" [itemIndex]=\"itemIndex\"></app-button-element>\n </div>\n </div>\n</div>", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{position:relative;bottom:0;padding:1.5rem;display:flex;flex-direction:column;min-height:100%}.content>div:last-child{margin-top:auto}.parent-tab{position:relative;height:100%;width:100%;display:flex;flex-direction:column}.img{position:absolute;height:100%;display:flex}.popular-tag{position:absolute;top:0;right:0;padding:1px 20px 3px;border-top-left-radius:0!important;border-bottom-right-radius:0!important;z-index:10}\n"] }]
|
|
2256
2258
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
2257
2259
|
type: Input
|
|
2258
2260
|
}], styles: [{
|
|
@@ -2425,7 +2427,7 @@ const CMIS_URL = new InjectionToken('cmisURL');
|
|
|
2425
2427
|
const BUCKET_URL = new InjectionToken('bucketURL');
|
|
2426
2428
|
const PASSBOOK_URL = new InjectionToken('passbookURL');
|
|
2427
2429
|
const APPOINTMENT_URL = new InjectionToken('appointmentUrl');
|
|
2428
|
-
const RECOMMENDATION_URL = new InjectionToken('recommendationUrl')
|
|
2430
|
+
// export const RECOMMENDATION_URL = new InjectionToken<String>('recommendationUrl')
|
|
2429
2431
|
|
|
2430
2432
|
class BaseCollection {
|
|
2431
2433
|
constructor(json) {
|
|
@@ -2668,7 +2670,7 @@ class checkItemAlreadyAdded {
|
|
|
2668
2670
|
}
|
|
2669
2671
|
|
|
2670
2672
|
class RestService {
|
|
2671
|
-
constructor(http, BASE_URL, ECOMMERCE_URL, CMIS_URL, cookieService, storage, PASSBOOK_URL, APPOINTMENT_URL
|
|
2673
|
+
constructor(http, BASE_URL, ECOMMERCE_URL, CMIS_URL, cookieService, storage, PASSBOOK_URL, APPOINTMENT_URL) {
|
|
2672
2674
|
this.http = http;
|
|
2673
2675
|
this.BASE_URL = BASE_URL;
|
|
2674
2676
|
this.ECOMMERCE_URL = ECOMMERCE_URL;
|
|
@@ -2677,7 +2679,6 @@ class RestService {
|
|
|
2677
2679
|
this.storage = storage;
|
|
2678
2680
|
this.PASSBOOK_URL = PASSBOOK_URL;
|
|
2679
2681
|
this.APPOINTMENT_URL = APPOINTMENT_URL;
|
|
2680
|
-
this.RECOMMENDATION_URL = RECOMMENDATION_URL;
|
|
2681
2682
|
// private BASE_URL: string = "https://dev-api.simpo.ai/";
|
|
2682
2683
|
// private ECOMMERCE_URL: string = "https://dev-ecommerce.simpo.ai/";
|
|
2683
2684
|
// private CMIS_URL: string = "https://api-cmis.tejsoft.com/"; //production
|
|
@@ -3229,16 +3230,7 @@ class RestService {
|
|
|
3229
3230
|
getMenuItems(menuId) {
|
|
3230
3231
|
return this.http.get(this.BASE_URL + `ecommerce/menu/${menuId}`);
|
|
3231
3232
|
}
|
|
3232
|
-
|
|
3233
|
-
return this.http.get(this.RECOMMENDATION_URL + `api/v1/recommendations/${UserId}/home?businessId=${businessId}&page=1&pageSize=20`);
|
|
3234
|
-
}
|
|
3235
|
-
getCartRecommendations(businessId, UserId) {
|
|
3236
|
-
return this.http.get(this.RECOMMENDATION_URL + `api/v1/recommendations/${UserId}/cart?businessId=${businessId}&page=1&pageSize=15`);
|
|
3237
|
-
}
|
|
3238
|
-
getProductDescriptionRecommendations(businessId, UserId) {
|
|
3239
|
-
return this.http.get(this.RECOMMENDATION_URL + `api/v1/recommendations/${UserId}/pdp?businessId=${businessId}&page=1&pageSize=10`);
|
|
3240
|
-
}
|
|
3241
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestService, deps: [{ token: i1$1.HttpClient }, { token: API_URL }, { token: ECOMMERCE_URL }, { token: CMIS_URL }, { token: i2$1.CookieService }, { token: LOCAL_STORAGE }, { token: PASSBOOK_URL }, { token: APPOINTMENT_URL }, { token: RECOMMENDATION_URL }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3233
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestService, deps: [{ token: i1$1.HttpClient }, { token: API_URL }, { token: ECOMMERCE_URL }, { token: CMIS_URL }, { token: i2$1.CookieService }, { token: LOCAL_STORAGE }, { token: PASSBOOK_URL }, { token: APPOINTMENT_URL }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3242
3234
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestService, providedIn: 'root' }); }
|
|
3243
3235
|
}
|
|
3244
3236
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestService, decorators: [{
|
|
@@ -3264,9 +3256,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3264
3256
|
}] }, { type: undefined, decorators: [{
|
|
3265
3257
|
type: Inject,
|
|
3266
3258
|
args: [APPOINTMENT_URL]
|
|
3267
|
-
}] }, { type: undefined, decorators: [{
|
|
3268
|
-
type: Inject,
|
|
3269
|
-
args: [RECOMMENDATION_URL]
|
|
3270
3259
|
}] }] });
|
|
3271
3260
|
|
|
3272
3261
|
class AddSectionComponent {
|
|
@@ -4847,9 +4836,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
4847
4836
|
}] } });
|
|
4848
4837
|
|
|
4849
4838
|
class BackgroundDirective {
|
|
4850
|
-
constructor(el, eventService) {
|
|
4839
|
+
constructor(el, eventService, platformId) {
|
|
4851
4840
|
this.el = el;
|
|
4852
4841
|
this.eventService = eventService;
|
|
4842
|
+
this.platformId = platformId;
|
|
4853
4843
|
this.scrollValue = 0;
|
|
4854
4844
|
// Ensure the host element is positioned so the absolute video fills it correctly
|
|
4855
4845
|
this.el.nativeElement.style.setProperty('position', 'relative');
|
|
@@ -4953,6 +4943,9 @@ class BackgroundDirective {
|
|
|
4953
4943
|
}
|
|
4954
4944
|
/** Removes any existing background video element from the host */
|
|
4955
4945
|
removeVideo() {
|
|
4946
|
+
if (!isPlatformBrowser(this.platformId)) {
|
|
4947
|
+
return;
|
|
4948
|
+
}
|
|
4956
4949
|
const existing = this.el.nativeElement.querySelector(`#${this.videoElementId}`);
|
|
4957
4950
|
if (existing) {
|
|
4958
4951
|
existing.pause?.();
|
|
@@ -4961,6 +4954,9 @@ class BackgroundDirective {
|
|
|
4961
4954
|
}
|
|
4962
4955
|
/** Creates and appends a full-cover autoplay video as the background */
|
|
4963
4956
|
applyVideo(src) {
|
|
4957
|
+
if (!isPlatformBrowser(this.platformId)) {
|
|
4958
|
+
return;
|
|
4959
|
+
}
|
|
4964
4960
|
// Remove stale video first (prevents duplicates)
|
|
4965
4961
|
this.removeVideo();
|
|
4966
4962
|
// Clear any background-image that may still be set
|
|
@@ -5014,7 +5010,7 @@ class BackgroundDirective {
|
|
|
5014
5010
|
// For gradients, rgba(), or anything non-hex — default to white
|
|
5015
5011
|
return '#ffffff';
|
|
5016
5012
|
}
|
|
5017
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BackgroundDirective, deps: [{ token: i0.ElementRef }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5013
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BackgroundDirective, deps: [{ token: i0.ElementRef }, { token: EventsService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5018
5014
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: BackgroundDirective, isStandalone: true, selector: "[simpoBackground]", inputs: { simpoBackground: "simpoBackground", scrollValue: "scrollValue" }, usesOnChanges: true, ngImport: i0 }); }
|
|
5019
5015
|
}
|
|
5020
5016
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BackgroundDirective, decorators: [{
|
|
@@ -5023,7 +5019,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
5023
5019
|
selector: '[simpoBackground]',
|
|
5024
5020
|
standalone: true,
|
|
5025
5021
|
}]
|
|
5026
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: EventsService }
|
|
5022
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: EventsService }, { type: Object, decorators: [{
|
|
5023
|
+
type: Inject,
|
|
5024
|
+
args: [PLATFORM_ID]
|
|
5025
|
+
}] }], propDecorators: { simpoBackground: [{
|
|
5027
5026
|
type: Input,
|
|
5028
5027
|
args: ['simpoBackground']
|
|
5029
5028
|
}], scrollValue: [{
|
|
@@ -5340,7 +5339,7 @@ class TextSectionComponent extends BaseSection {
|
|
|
5340
5339
|
}, 100);
|
|
5341
5340
|
}
|
|
5342
5341
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextSectionComponent, deps: [{ token: i1$2.MatDialog }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5343
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextSectionComponent, isStandalone: true, selector: "simpo-text-section", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"main-section\"\r\n [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\"\r\n [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag\r\n [cdkDragFreeDragPosition]=\"point\" (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\"\r\n [cdkDragDisabled]=\"!edit\" [style.color]=\"styles?.background?.accentColor\"\r\n [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.background]=\"getGlassyBackground(styles?.background?.accentColor)\">\r\n {{ content?.tag?.label }}\r\n </div>\r\n <div class=\"body-section w-100\">\r\n <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText; let i = index\">\r\n <!-- <simpo-text-element [textData]=\"item.value\" [textLabel]=\"item.label\"></simpo-text-element> -->\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\"\r\n class=\"w-100 scroll-mob\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-2 d-md-flex mt-15 w-100 flex-wrap\" *ngIf=\"data?.action?.display\" [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 <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [edit]=\"edit\" [color]=\"styles?.background?.accentColor\" [sectionId]=\"data?.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.overflow-scroll{overflow-x:scroll}.draggable{background:#fff3;border-radius:32px!important;box-shadow:0 4px 30px #0000001a!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3)!important;z-index:1;position:absolute;width:max-content;padding:8px 10px;font-weight:400;font-size:12px!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:center;margin-bottom:25px}.scroll-mob{overflow-x:scroll}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type:
|
|
5342
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextSectionComponent, isStandalone: true, selector: "simpo-text-section", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"main-section\"\r\n [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\"\r\n [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag\r\n [cdkDragFreeDragPosition]=\"point\" (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\"\r\n [cdkDragDisabled]=\"!edit\" [style.color]=\"styles?.background?.accentColor\"\r\n [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.background]=\"getGlassyBackground(styles?.background?.accentColor)\">\r\n {{ content?.tag?.label }}\r\n </div>\r\n <div class=\"body-section w-100\">\r\n <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText; let i = index\">\r\n <!-- <simpo-text-element [textData]=\"item.value\" [textLabel]=\"item.label\"></simpo-text-element> -->\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\"\r\n class=\"w-100 scroll-mob\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-2 d-md-flex mt-15 w-100 flex-wrap\" *ngIf=\"data?.action?.display\" [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 <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [edit]=\"edit\" [color]=\"styles?.background?.accentColor\" [sectionId]=\"data?.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.overflow-scroll{overflow-x:scroll}.draggable{background:#fff3;border-radius:32px!important;box-shadow:0 4px 30px #0000001a!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3)!important;z-index:1;position:absolute;width:max-content;padding:8px 10px;font-weight:400;font-size:12px!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:center;margin-bottom:25px}.scroll-mob{overflow-x:scroll}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth", "itemIndex"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type:
|
|
5344
5343
|
//directive
|
|
5345
5344
|
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: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }] }); }
|
|
5346
5345
|
}
|
|
@@ -5778,7 +5777,7 @@ class BannerSectionComponent extends BaseSection {
|
|
|
5778
5777
|
return `${r}, ${g}, ${b}`;
|
|
5779
5778
|
}
|
|
5780
5779
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BannerSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5781
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BannerSectionComponent, isStandalone: true, selector: "simpo-banner-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage , 'd-block': isBorderlessImage}\"\r\n class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\" [simpoMergeHeader]=\"styles?.merge\">\r\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\"\r\n class=\"d-flex justify-content-center\" [backgroundInfo]=\"styles?.background\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag [cdkDragFreeDragPosition]=\"point\"\r\n (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\" [cdkDragDisabled]=\"!edit\"\r\n [style.color]=\"styles?.background?.accentColor\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.background]=\"getGlassyBackground(styles?.background?.accentColor)\">\r\n {{ content?.tag?.label }}\r\n </div>\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row w-100\"\r\n [ngClass]=\"{'wrap-reverse' : styles?.positionLayout?.value == 'bottom'}\">\r\n <!-- overflow-hidden -->\r\n <!-- [ngClass]=\"{'flex-column': isBorderlessImage && styles?.positionLayout?.value === 'top' , 'flex-column-reverse': isBorderlessImage && styles?.positionLayout?.value === 'bottom'}\" -->\r\n <!-- [simpoMergeHeader]=\"styles?.merge\" -->\r\n <!-- [backgroundInfo]=\"styles?.background?.image\" -->\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"\"\r\n [ngClass]=\"{'col-lg-6 col-xxl-6': content?.image?.showImage && isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage || !content?.image?.showImage , 'col-lg-12 col-md-12 col-12 width-100': (isBorderlessImage && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')) || !content?.image?.showImage}\"\r\n [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"row g-5 justify-content-start mlr-0 h-auto\" [id]=\"data?.id\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage && !isBorderlessImage\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n </div>\r\n <!-- 'col-lg-12': content?.image?.showImage && isBorderlessImage, 'col-lg-12':!isBorderlessImage || !content?.image?.showImage, -->\r\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n [ngClass]=\"{'box p-3': content?.display?.showCard , 'col-lg-6' : content?.image?.showImage && !isBorderlessImage }\"\r\n [style.background]=\"content?.display?.showCard ? getColor() : 'transparent'\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div *ngFor=\"let item of content?.inputText; let i = index\">\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 card-container flex-wrap\"\r\n [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n <div *ngFor=\"let item of content?.listItem?.data; let i = index\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n </div>\r\n <div class=\"first-part-card d-flex align-items-center\"\r\n [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img loading=\"lazy\" class=\"tick-img\"\r\n src=\"https://png.pngtree.com/png-vector/20230910/ourmid/pngtree-3d-tick-sign-icon-png-image_9225323.png\"\r\n alt=\"something\" />\r\n <!-- <div [innerHTML]=\"item.inputText[0].value | sanitizeHtml\" class=\"ml-5\"></div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i\" [isRTE]=\"item.inputText[0]?.isRTE\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n [edit]=\"edit\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>\r\n<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngClass]=\"{'w-100' : content?.image?.showImage && isBorderlessImage && styles?.positionLayout?.value == 'top' || styles?.positionLayout?.value == 'bottom'}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n </div>\r\n</ng-template>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.width-100{width:100%!important}.button-display{display:flex;flex-wrap:wrap;gap:10px}.draggable{background:#fff3;border-radius:32px!important;box-shadow:0 4px 30px #0000001a!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3)!important;z-index:1;position:absolute;width:max-content;padding:8px 10px;font-weight:400;font-size:12px!important}.gap-15{gap:15px}.box{border:8px solid rgba(240,240,240,.8);box-shadow:#63636333 0 2px 8px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.wrap-reverse{flex-wrap:wrap-reverse!important}.insideImg{height:100%!important}.card-container{flex-direction:column}}.text-element{inline-size:100%;overflow-wrap:break-word}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}.ml-5{margin-left:5px}.mlr-0{margin-left:0;margin-right:0}.d-block{display:block!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type:
|
|
5780
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BannerSectionComponent, isStandalone: true, selector: "simpo-banner-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage , 'd-block': isBorderlessImage}\"\r\n class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\" [simpoMergeHeader]=\"styles?.merge\">\r\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\"\r\n class=\"d-flex justify-content-center\" [backgroundInfo]=\"styles?.background\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag [cdkDragFreeDragPosition]=\"point\"\r\n (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\" [cdkDragDisabled]=\"!edit\"\r\n [style.color]=\"styles?.background?.accentColor\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.background]=\"getGlassyBackground(styles?.background?.accentColor)\">\r\n {{ content?.tag?.label }}\r\n </div>\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row w-100\"\r\n [ngClass]=\"{'wrap-reverse' : styles?.positionLayout?.value == 'bottom'}\">\r\n <!-- overflow-hidden -->\r\n <!-- [ngClass]=\"{'flex-column': isBorderlessImage && styles?.positionLayout?.value === 'top' , 'flex-column-reverse': isBorderlessImage && styles?.positionLayout?.value === 'bottom'}\" -->\r\n <!-- [simpoMergeHeader]=\"styles?.merge\" -->\r\n <!-- [backgroundInfo]=\"styles?.background?.image\" -->\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"\"\r\n [ngClass]=\"{'col-lg-6 col-xxl-6': content?.image?.showImage && isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage || !content?.image?.showImage , 'col-lg-12 col-md-12 col-12 width-100': (isBorderlessImage && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')) || !content?.image?.showImage}\"\r\n [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"row g-5 justify-content-start mlr-0 h-auto\" [id]=\"data?.id\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage && !isBorderlessImage\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n </div>\r\n <!-- 'col-lg-12': content?.image?.showImage && isBorderlessImage, 'col-lg-12':!isBorderlessImage || !content?.image?.showImage, -->\r\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n [ngClass]=\"{'box p-3': content?.display?.showCard , 'col-lg-6' : content?.image?.showImage && !isBorderlessImage }\"\r\n [style.background]=\"content?.display?.showCard ? getColor() : 'transparent'\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div *ngFor=\"let item of content?.inputText; let i = index\">\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 card-container flex-wrap\"\r\n [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n <div *ngFor=\"let item of content?.listItem?.data; let i = index\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n </div>\r\n <div class=\"first-part-card d-flex align-items-center\"\r\n [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img loading=\"lazy\" class=\"tick-img\"\r\n src=\"https://png.pngtree.com/png-vector/20230910/ourmid/pngtree-3d-tick-sign-icon-png-image_9225323.png\"\r\n alt=\"something\" />\r\n <!-- <div [innerHTML]=\"item.inputText[0].value | sanitizeHtml\" class=\"ml-5\"></div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i\" [isRTE]=\"item.inputText[0]?.isRTE\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n [edit]=\"edit\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>\r\n<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngClass]=\"{'w-100' : content?.image?.showImage && isBorderlessImage && styles?.positionLayout?.value == 'top' || styles?.positionLayout?.value == 'bottom'}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n </div>\r\n</ng-template>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.width-100{width:100%!important}.button-display{display:flex;flex-wrap:wrap;gap:10px}.draggable{background:#fff3;border-radius:32px!important;box-shadow:0 4px 30px #0000001a!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3)!important;z-index:1;position:absolute;width:max-content;padding:8px 10px;font-weight:400;font-size:12px!important}.gap-15{gap:15px}.box{border:8px solid rgba(240,240,240,.8);box-shadow:#63636333 0 2px 8px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.wrap-reverse{flex-wrap:wrap-reverse!important}.insideImg{height:100%!important}.card-container{flex-direction:column}}.text-element{inline-size:100%;overflow-wrap:break-word}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}.ml-5{margin-left:5px}.mlr-0{margin-left:0;margin-right:0}.d-block{display:block!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth", "itemIndex"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type:
|
|
5782
5781
|
// SimpoHoverBorderDirective,
|
|
5783
5782
|
//directive
|
|
5784
5783
|
SimpoBorderlessDirective, selector: "[simpoBorderless]", inputs: ["simpoBorderless"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { kind: "directive", type: MergeHeaderDirective, selector: "[simpoMergeHeader]", inputs: ["simpoMergeHeader", "backgroundInfo"] }] }); }
|
|
@@ -6240,7 +6239,7 @@ class FooterSectionComponent extends BaseSection {
|
|
|
6240
6239
|
return showHeading;
|
|
6241
6240
|
}
|
|
6242
6241
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FooterSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6243
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FooterSectionComponent, isStandalone: true, selector: "simpo-footer-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <footer *ngIf=\"style?.footerType === footerTypes.SPLIT_DETAILS_RIGHT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\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-start\">\r\n <div class=\"d-flex flex-column flex-grow info_icon\">\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?.image?.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?.image?.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=\"mt-2\">\r\n <div class=\"body-desc additional-details\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n <!-- {{content?.additionalDetails?.value}} -->\r\n <div [innerHtml]=\"content?.additionalDetails?.value\"></div>\r\n </div>\r\n <div class=\"mt-2 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;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [iconColor]=\"data?.styles?.background?.accentColor\" [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>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column get-in-touch-center\" *ngIf=\"content?.getInTouch?.display\">\r\n <ng-container *ngFor=\"let item of content?.getInTouch?.inputText\">\r\n <div [ngClass]=\"item.label.includes('Title') ? 'sectionTitle' : ''\" class=\"center_group mb-3\" [simpoColor]=\"style?.background?.color\">\r\n {{item?.value}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex split-details-right\">\r\n <ng-container *ngTemplateOutlet=\"navbarLinksTemplate\"></ng-container>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-5 justify-space\" *ngIf=\"data?.action && data?.action?.display\">\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 *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\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small\">Powered by <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo.ai</a></div>\r\n </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\" [spacingHorizontal]=\"stylesLayout\">\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?.image?.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?.image?.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 [iconColor]=\"data?.styles?.background?.accentColor\" [socialIconData]=\"item\" [color]=\"style?.background?.accentColor\" [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\" [backgroundInfo]=\"data?.styles?.background\"></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\" [spacingHorizontal]=\"stylesLayout\">\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?.image?.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?.image?.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 [iconColor]=\"data?.styles?.background?.accentColor\" [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\" [backgroundInfo]=\"data?.styles?.background\"></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\" [spacingHorizontal]=\"stylesLayout\">\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?.image?.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?.image?.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 [iconColor]=\"data?.styles?.background?.accentColor\" [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\" [backgroundInfo]=\"data?.styles?.background\"></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\" [spacingHorizontal]=\"stylesLayout\">\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?.image?.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?.image?.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 [iconColor]=\"data?.styles?.background?.accentColor\" [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\" [backgroundInfo]=\"data?.styles?.background\"></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\" [spacingHorizontal]=\"stylesLayout\">\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?.image?.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?.image?.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 [iconColor]=\"data?.styles?.background?.accentColor\" [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\" [backgroundInfo]=\"data?.styles?.background\"></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\" [spacingHorizontal]=\"stylesLayout\">\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?.image?.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?.image?.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 [iconColor]=\"data?.styles?.background?.accentColor\" [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\" [backgroundInfo]=\"data?.styles?.background\"></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 \r\n <!-- <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container> -->\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [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\r\n<ng-template #navbarLinksTemplate>\r\n <div style=\"margin-top: 10px;\">\r\n <p class=\"page-heading\" [simpoColor]=\"style?.background?.color\" *ngIf=\"checkFooter\" [innerHTML]=\"content?.linksTitle?.value || 'Pages'\"></p>\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <p class=\"page-data\" [simpoColor]=\"style?.background?.color\" (click)=\"changePage(item)\"\r\n style=\"cursor: pointer;\">{{item?.label}}</p>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\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}.split-details-right{display:block!important;margin-top:15px}}.button-display{display:flex;gap:10px}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.page-heading{font-size:18px!important;font-weight:600}.page-data{line-height:normal;font-size:16px!important;font-weight:500}.split-details-right{gap:55px}.justify-space{justify-content:space-between}.sectionTitle{font-size:20px;font-weight:600}.get-in-touch-center{width:20%}.touch_text{font-size:16px;font-weight:400}.center_group{line-height:25px}@media only screen and (min-width: 320px) and (max-width: 1000px){.get-in-touch-center{width:100%;margin-top:10px}.info_icon{order:1}.get-in-touch-center{order:3}.split-details-right{order:2}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 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"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
|
6242
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FooterSectionComponent, isStandalone: true, selector: "simpo-footer-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <footer *ngIf=\"style?.footerType === footerTypes.SPLIT_DETAILS_RIGHT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\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-start\">\r\n <div class=\"d-flex flex-column flex-grow info_icon\">\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?.image?.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?.image?.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=\"mt-2\">\r\n <div class=\"body-desc additional-details\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n <!-- {{content?.additionalDetails?.value}} -->\r\n <div [innerHtml]=\"content?.additionalDetails?.value\"></div>\r\n </div>\r\n <div class=\"mt-2 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;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [iconColor]=\"data?.styles?.background?.accentColor\" [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>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column get-in-touch-center\" *ngIf=\"content?.getInTouch?.display\">\r\n <ng-container *ngFor=\"let item of content?.getInTouch?.inputText\">\r\n <div [ngClass]=\"item.label.includes('Title') ? 'sectionTitle' : ''\" class=\"center_group mb-3\" [simpoColor]=\"style?.background?.color\">\r\n {{item?.value}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex split-details-right\">\r\n <ng-container *ngTemplateOutlet=\"navbarLinksTemplate\"></ng-container>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-5 justify-space\" *ngIf=\"data?.action && data?.action?.display\">\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 *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\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small\">Powered by <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo.ai</a></div>\r\n </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\" [spacingHorizontal]=\"stylesLayout\">\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?.image?.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?.image?.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 [iconColor]=\"data?.styles?.background?.accentColor\" [socialIconData]=\"item\" [color]=\"style?.background?.accentColor\" [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\" [backgroundInfo]=\"data?.styles?.background\"></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\" [spacingHorizontal]=\"stylesLayout\">\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?.image?.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?.image?.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 [iconColor]=\"data?.styles?.background?.accentColor\" [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\" [backgroundInfo]=\"data?.styles?.background\"></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\" [spacingHorizontal]=\"stylesLayout\">\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?.image?.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?.image?.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 [iconColor]=\"data?.styles?.background?.accentColor\" [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\" [backgroundInfo]=\"data?.styles?.background\"></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\" [spacingHorizontal]=\"stylesLayout\">\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?.image?.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?.image?.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 [iconColor]=\"data?.styles?.background?.accentColor\" [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\" [backgroundInfo]=\"data?.styles?.background\"></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\" [spacingHorizontal]=\"stylesLayout\">\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?.image?.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?.image?.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 [iconColor]=\"data?.styles?.background?.accentColor\" [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\" [backgroundInfo]=\"data?.styles?.background\"></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\" [spacingHorizontal]=\"stylesLayout\">\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?.image?.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?.image?.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 [iconColor]=\"data?.styles?.background?.accentColor\" [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\" [backgroundInfo]=\"data?.styles?.background\"></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 \r\n <!-- <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container> -->\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [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\r\n<ng-template #navbarLinksTemplate>\r\n <div style=\"margin-top: 10px;\">\r\n <p class=\"page-heading\" [simpoColor]=\"style?.background?.color\" *ngIf=\"checkFooter\" [innerHTML]=\"content?.linksTitle?.value || 'Pages'\"></p>\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <p class=\"page-data\" [simpoColor]=\"style?.background?.color\" (click)=\"changePage(item)\"\r\n style=\"cursor: pointer;\">{{item?.label}}</p>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\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}.split-details-right{display:block!important;margin-top:15px}}.button-display{display:flex;gap:10px}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.page-heading{font-size:18px!important;font-weight:600}.page-data{line-height:normal;font-size:16px!important;font-weight:500}.split-details-right{gap:55px}.justify-space{justify-content:space-between}.sectionTitle{font-size:20px;font-weight:600}.get-in-touch-center{width:20%}.touch_text{font-size:16px;font-weight:400}.center_group{line-height:25px}@media only screen and (min-width: 320px) and (max-width: 1000px){.get-in-touch-center{width:100%;margin-top:10px}.info_icon{order:1}.get-in-touch-center{order:3}.split-details-right{order:2}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth", "itemIndex"] }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 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"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
|
6244
6243
|
}
|
|
6245
6244
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FooterSectionComponent, decorators: [{
|
|
6246
6245
|
type: Component,
|
|
@@ -6621,7 +6620,7 @@ class ImageSectionComponent extends BaseSection {
|
|
|
6621
6620
|
this._eventService.buttonRedirection.emit({ data: this.buttonContent });
|
|
6622
6621
|
}
|
|
6623
6622
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6624
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageSectionComponent, isStandalone: true, selector: "simpo-image-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [ngClass]=\"{'mergeNavbar':canMergeNavbar}\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div class=\"main-section\" [ngClass]=\"{'px-0 py-0': style?.fullWidth}\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div class=\"img-text-card\" [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 w-100\" (click)=\"redirectTo()\">\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\" [ngStyle]=\"{'opacity': (canMergeNavbar ? '0' : getBackgroundOpacity)}\" [alt]=\"content?.image?.altText\" [simpoCorner]=\"style?.corners\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [id]=\"data?.id\"\r\n loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n\r\n </div>\r\n <div *ngIf=\"style?.showText\" class=\"col-lg-9 d-flex flex-column content-side\" class=\"text-mobile\" style=\"position: absolute;\" [simpoPositionLayoutDirective]=\"style?.positionLayout\" [simpoContentAlignment]=\"style?.contentAlignment\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText; let i = index\" [spacingHorizontal]=\"stylesLayout\">\r\n <!-- <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\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\" [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\"[backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isMerged]=\"style?.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</section>\r\n", styles: [".image{width:100%}.main-section{width:100%;height:100%!important;display:block!important}.img-text-card{display:flex;align-items:center;justify-content:center}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.mergeNavbar{margin-top:-175px}.total-container{height:auto;position:relative}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.image-section img{object-fit:cover}.text-content-card{justify-content:center;align-items:center}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media only screen and (max-width: 475px){.h-80{height:15rem;border-radius:1rem;margin-bottom:10%}.main-section{min-height:auto!important}.text-image{position:absolute;height:14rem}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
|
|
6623
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageSectionComponent, isStandalone: true, selector: "simpo-image-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [ngClass]=\"{'mergeNavbar':canMergeNavbar}\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div class=\"main-section\" [ngClass]=\"{'px-0 py-0': style?.fullWidth}\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div class=\"img-text-card\" [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 w-100\" (click)=\"redirectTo()\">\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\" [ngStyle]=\"{'opacity': (canMergeNavbar ? '0' : getBackgroundOpacity)}\" [alt]=\"content?.image?.altText\" [simpoCorner]=\"style?.corners\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [id]=\"data?.id\"\r\n loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n\r\n </div>\r\n <div *ngIf=\"style?.showText\" class=\"col-lg-9 d-flex flex-column content-side\" class=\"text-mobile\" style=\"position: absolute;\" [simpoPositionLayoutDirective]=\"style?.positionLayout\" [simpoContentAlignment]=\"style?.contentAlignment\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText; let i = index\" [spacingHorizontal]=\"stylesLayout\">\r\n <!-- <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\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\" [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\"[backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isMerged]=\"style?.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</section>\r\n", styles: [".image{width:100%}.main-section{width:100%;height:100%!important;display:block!important}.img-text-card{display:flex;align-items:center;justify-content:center}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.mergeNavbar{margin-top:-175px}.total-container{height:auto;position:relative}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.image-section img{object-fit:cover}.text-content-card{justify-content:center;align-items:center}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media only screen and (max-width: 475px){.h-80{height:15rem;border-radius:1rem;margin-bottom:10%}.main-section{min-height:auto!important}.text-image{position:absolute;height:14rem}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth", "itemIndex"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
|
|
6625
6624
|
//directive
|
|
6626
6625
|
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: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
|
6627
6626
|
}
|
|
@@ -6723,7 +6722,7 @@ class ServiceSectionComponent extends BaseSection {
|
|
|
6723
6722
|
}, 100);
|
|
6724
6723
|
}
|
|
6725
6724
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ServiceSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6726
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ServiceSectionComponent, isStandalone: true, selector: "simpo-service-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize()" } }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag [cdkDragFreeDragPosition]=\"point\"\r\n (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\" [cdkDragDisabled]=\"!edit\"\r\n [style.color]=\"style?.background?.accentColor\" [style.borderColor]=\"style?.background?.accentColor\"\r\n [style.background]=\"getGlassyBackground(style?.background?.accentColor)\">\r\n {{ content?.tag?.label }}\r\n </div>\r\n <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\">\r\n <div #mainContainer [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" class=\"w-100\"\r\n [simpoOverlay]=\"style?.background\">\r\n <div class=\"container-fluid d-flex flex-column w-100\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n\r\n <!-- <div class=\"w-100\" *ngFor=\"let text of data?.content?.inputText\">\r\n <div [simpoContentTitleSpace]=\"headingSpace\" class=\"w-100\"\r\n [ngClass]=\"text.label.includes('Heading') ? 'heading-large lh-2 mb-1' : 'body-large mb-4'\">\r\n <simpo-text-editor class=\"w-100\" [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div> -->\r\n <div class=\"w-100\" *ngFor=\"let text of data?.content?.inputText; let i = index\">\r\n <!-- Heading -->\r\n <div *ngIf=\"text.label === 'Heading'\" [simpoContentTitleSpace]=\"headingSpace\"\r\n class=\"w-100 heading-large lh-2\">\r\n <simpo-text-editor class=\"w-100\" [(value)]=\"text.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"text.isRTE\">\r\n </simpo-text-editor>\r\n </div>\r\n\r\n </div>\r\n <div class=\"service-cards-wrapper\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div class=\"row-scroll-wrapper\" [class.is-row]=\"style?.direction === 'ROW'\">\r\n <div class=\"row-scroll-inner\">\r\n <div class=\"row mx-0 service-row\" [class.row-scroll]=\"style?.direction === 'ROW'\" #container>\r\n <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n *ngFor=\"let service of content?.listItem?.data; let i = index\">\r\n <ng-container class=\"w-100\" *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n class=\"w-100\" [componentId]=\"data?.id\" [edit]=\"edit\" [itemIndex]=\"i\"\r\n [positionLayout]=\"style?.positionLayout?.value\"></simpo-below-image-card>\r\n </ng-container>\r\n <ng-container class=\"w-100\" *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n class=\"w-100\" [componentId]=\"data?.id\" [edit]=\"edit\" [itemIndex]=\"i\"></simpo-top-of-image-card>\r\n </ng-container>\r\n <ng-container class=\"w-100\" *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n class=\"w-100\" [componentId]=\"data?.id\" [edit]=\"edit\" [itemIndex]=\"i\"></simpo-covering-image-card>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.direction === 'ROW'\">\r\n <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\"\r\n *ngFor=\"let service of content?.listItem?.data; let i = index\">\r\n <ng-container class=\"w-100\" *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n class=\"w-100\" [componentId]=\"data?.id\" [edit]=\"edit\" [itemIndex]=\"i\"></simpo-below-image-card>\r\n </ng-container>\r\n <ng-container class=\"w-100\" *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n class=\"w-100\" [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-top-of-image-card>\r\n </ng-container>\r\n <ng-container class=\"w-100\" *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\"\r\n [button]=\"button\" class=\"w-100\" [componentId]=\"data?.id\"\r\n [edit]=\"edit\" [itemIndex]=\"i\"></simpo-covering-image-card>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display d-flex mt-3 gap-2\"\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\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.service-cards-wrapper{width:100%;max-width:100%}@keyframes scrollCards{0%{transform:translate(0)}to{transform:translate(-50%)}}.row-scroll-wrapper.is-row{overflow:hidden}.row-scroll-wrapper.is-row .row-scroll-inner{padding-top:25px;padding-bottom:18px;overflow:hidden}.row-scroll-wrapper.is-row .service-row{display:flex;flex-wrap:nowrap!important;width:max-content;animation:scrollCards 25s linear infinite}.row-scroll-wrapper.is-row:hover .service-row{animation-play-state:paused}.row-scroll-wrapper.is-row .cards{flex:0 0 400px;max-width:400px}.button-display{display:flex;flex-wrap:wrap;gap:10px}.draggable{background:#fff3;border-radius:32px!important;box-shadow:0 4px 30px #0000001a!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border-width:1px!important;border-style:solid!important;z-index:1;position:absolute;width:max-content;padding:8px 10px;font-weight:400;font-size:12px!important;font-family:var(--website-font-family)}@media screen and (min-width: 760px){.cards{padding-bottom:24px;margin-bottom:10px}}@media screen and (max-width: 475px){.cards{padding:5px 8px 10px!important}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: BelowImageCardComponent, selector: "simpo-below-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit", "positionLayout", "itemIndex"] }, { kind: "component", type: TopOfImageCardComponent, selector: "simpo-top-of-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit", "itemIndex"] }, { kind: "component", type: CoveringImageCardComponent, selector: "simpo-covering-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit", "itemIndex"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type:
|
|
6725
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ServiceSectionComponent, isStandalone: true, selector: "simpo-service-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize()" } }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag [cdkDragFreeDragPosition]=\"point\"\r\n (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\" [cdkDragDisabled]=\"!edit\"\r\n [style.color]=\"style?.background?.accentColor\" [style.borderColor]=\"style?.background?.accentColor\"\r\n [style.background]=\"getGlassyBackground(style?.background?.accentColor)\">\r\n {{ content?.tag?.label }}\r\n </div>\r\n <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\">\r\n <div #mainContainer [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" class=\"w-100\"\r\n [simpoOverlay]=\"style?.background\">\r\n <div class=\"container-fluid d-flex flex-column w-100\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n\r\n <!-- <div class=\"w-100\" *ngFor=\"let text of data?.content?.inputText\">\r\n <div [simpoContentTitleSpace]=\"headingSpace\" class=\"w-100\"\r\n [ngClass]=\"text.label.includes('Heading') ? 'heading-large lh-2 mb-1' : 'body-large mb-4'\">\r\n <simpo-text-editor class=\"w-100\" [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div> -->\r\n <div class=\"w-100\" *ngFor=\"let text of data?.content?.inputText; let i = index\">\r\n <!-- Heading -->\r\n <div *ngIf=\"text.label === 'Heading'\" [simpoContentTitleSpace]=\"headingSpace\"\r\n class=\"w-100 heading-large lh-2\">\r\n <simpo-text-editor class=\"w-100\" [(value)]=\"text.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"text.isRTE\">\r\n </simpo-text-editor>\r\n </div>\r\n\r\n </div>\r\n <div class=\"service-cards-wrapper\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div class=\"row-scroll-wrapper\" [class.is-row]=\"style?.direction === 'ROW'\">\r\n <div class=\"row-scroll-inner\">\r\n <div class=\"row mx-0 service-row\" [class.row-scroll]=\"style?.direction === 'ROW'\" #container>\r\n <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n *ngFor=\"let service of content?.listItem?.data; let i = index\">\r\n <ng-container class=\"w-100\" *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n class=\"w-100\" [componentId]=\"data?.id\" [edit]=\"edit\" [itemIndex]=\"i\"\r\n [positionLayout]=\"style?.positionLayout?.value\"></simpo-below-image-card>\r\n </ng-container>\r\n <ng-container class=\"w-100\" *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n class=\"w-100\" [componentId]=\"data?.id\" [edit]=\"edit\" [itemIndex]=\"i\"></simpo-top-of-image-card>\r\n </ng-container>\r\n <ng-container class=\"w-100\" *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n class=\"w-100\" [componentId]=\"data?.id\" [edit]=\"edit\" [itemIndex]=\"i\"></simpo-covering-image-card>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.direction === 'ROW'\">\r\n <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\"\r\n *ngFor=\"let service of content?.listItem?.data; let i = index\">\r\n <ng-container class=\"w-100\" *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n class=\"w-100\" [componentId]=\"data?.id\" [edit]=\"edit\" [itemIndex]=\"i\"></simpo-below-image-card>\r\n </ng-container>\r\n <ng-container class=\"w-100\" *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n class=\"w-100\" [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-top-of-image-card>\r\n </ng-container>\r\n <ng-container class=\"w-100\" *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\"\r\n [button]=\"button\" class=\"w-100\" [componentId]=\"data?.id\"\r\n [edit]=\"edit\" [itemIndex]=\"i\"></simpo-covering-image-card>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display d-flex mt-3 gap-2\"\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\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.service-cards-wrapper{width:100%;max-width:100%}@keyframes scrollCards{0%{transform:translate(0)}to{transform:translate(-50%)}}.row-scroll-wrapper.is-row{overflow:hidden}.row-scroll-wrapper.is-row .row-scroll-inner{padding-top:25px;padding-bottom:18px;overflow:hidden}.row-scroll-wrapper.is-row .service-row{display:flex;flex-wrap:nowrap!important;width:max-content;animation:scrollCards 25s linear infinite}.row-scroll-wrapper.is-row:hover .service-row{animation-play-state:paused}.row-scroll-wrapper.is-row .cards{flex:0 0 400px;max-width:400px}.button-display{display:flex;flex-wrap:wrap;gap:10px}.draggable{background:#fff3;border-radius:32px!important;box-shadow:0 4px 30px #0000001a!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border-width:1px!important;border-style:solid!important;z-index:1;position:absolute;width:max-content;padding:8px 10px;font-weight:400;font-size:12px!important;font-family:var(--website-font-family)}@media screen and (min-width: 760px){.cards{padding-bottom:24px;margin-bottom:10px}}@media screen and (max-width: 475px){.cards{padding:5px 8px 10px!important}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: BelowImageCardComponent, selector: "simpo-below-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit", "positionLayout", "itemIndex"] }, { kind: "component", type: TopOfImageCardComponent, selector: "simpo-top-of-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit", "itemIndex"] }, { kind: "component", type: CoveringImageCardComponent, selector: "simpo-covering-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit", "itemIndex"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth", "itemIndex"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type:
|
|
6727
6726
|
//directive
|
|
6728
6727
|
ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { 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: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { 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: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }] }); }
|
|
6729
6728
|
}
|
|
@@ -6806,7 +6805,7 @@ class TeamMemberSectionComponent extends BaseSection {
|
|
|
6806
6805
|
}, 100);
|
|
6807
6806
|
}
|
|
6808
6807
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TeamMemberSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6809
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TeamMemberSectionComponent, isStandalone: true, selector: "simpo-team-member-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoBorder]=\"style?.border\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText; let i = index\">\r\n <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\"\r\n [inputTextIndex]=\"i\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n *ngFor=\"let service of content?.listItem?.data; let i = index\">\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n <simpo-below-image-card style=\"height: 100%; display: block;\" [data]=\"service\" [styles]=\"style\"\r\n [content]=\"content\" [button]=\"button\" [componentId]=\"data?.id\" [edit]=\"edit\" [itemIndex]=\"i\"\r\n [positionLayout]=\"this.style?.positionLayout?.value\"></simpo-below-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n <simpo-top-of-image-card style=\"height: 100%; display: block;\" [data]=\"service\" [styles]=\"style\"\r\n [content]=\"content\" [button]=\"button\" [componentId]=\"data?.id\" [edit]=\"edit\"\r\n [itemIndex]=\"i\"></simpo-top-of-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n <simpo-covering-image-card style=\"height: 100%; display: block;\" [data]=\"service\" [styles]=\"style\"\r\n [content]=\"content\" [button]=\"button\" [componentId]=\"data?.id\" [edit]=\"edit\"\r\n [itemIndex]=\"i\"></simpo-covering-image-card>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n <div *ngIf=\"data?.action && data?.action?.display\"\r\n class=\"button-display d-flex mt-3 gap-2 w-100 justify-content-center\">\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\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.d-flex{display:block!important}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: BelowImageCardComponent, selector: "simpo-below-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit", "positionLayout", "itemIndex"] }, { kind: "component", type: TopOfImageCardComponent, selector: "simpo-top-of-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit", "itemIndex"] }, { kind: "component", type: CoveringImageCardComponent, selector: "simpo-covering-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit", "itemIndex"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type:
|
|
6808
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TeamMemberSectionComponent, isStandalone: true, selector: "simpo-team-member-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoBorder]=\"style?.border\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText; let i = index\">\r\n <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\"\r\n [inputTextIndex]=\"i\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n *ngFor=\"let service of content?.listItem?.data; let i = index\">\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n <simpo-below-image-card style=\"height: 100%; display: block;\" [data]=\"service\" [styles]=\"style\"\r\n [content]=\"content\" [button]=\"button\" [componentId]=\"data?.id\" [edit]=\"edit\" [itemIndex]=\"i\"\r\n [positionLayout]=\"this.style?.positionLayout?.value\"></simpo-below-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n <simpo-top-of-image-card style=\"height: 100%; display: block;\" [data]=\"service\" [styles]=\"style\"\r\n [content]=\"content\" [button]=\"button\" [componentId]=\"data?.id\" [edit]=\"edit\"\r\n [itemIndex]=\"i\"></simpo-top-of-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n <simpo-covering-image-card style=\"height: 100%; display: block;\" [data]=\"service\" [styles]=\"style\"\r\n [content]=\"content\" [button]=\"button\" [componentId]=\"data?.id\" [edit]=\"edit\"\r\n [itemIndex]=\"i\"></simpo-covering-image-card>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n <div *ngIf=\"data?.action && data?.action?.display\"\r\n class=\"button-display d-flex mt-3 gap-2 w-100 justify-content-center\">\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\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.d-flex{display:block!important}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: BelowImageCardComponent, selector: "simpo-below-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit", "positionLayout", "itemIndex"] }, { kind: "component", type: TopOfImageCardComponent, selector: "simpo-top-of-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit", "itemIndex"] }, { kind: "component", type: CoveringImageCardComponent, selector: "simpo-covering-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit", "itemIndex"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth", "itemIndex"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type:
|
|
6810
6809
|
//directive
|
|
6811
6810
|
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: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
|
6812
6811
|
}
|
|
@@ -7099,7 +7098,7 @@ class TextImageSectionComponent extends BaseSection {
|
|
|
7099
7098
|
return this.styles?.merge;
|
|
7100
7099
|
}
|
|
7101
7100
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextImageSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7102
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextImageSectionComponent, isStandalone: true, selector: "simpo-text-image-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [ngClass]=\"{'mergeNavbar':canMergeNavbar}\" [simpoBackground]=\"styles?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\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\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row g-5\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\">\r\n <div *ngIf=\"styles?.showImage === true\" class=\"col-10 col-sm-8 col-lg-6\">\r\n <img loading=\"lazy\" [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\" loading=\"lazy\" loading=\"lazy\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class.borderLess]=\"styles?.showImage && styles?.borderLessImage\" />\r\n </div>\r\n <div class=\"col-lg-6 d-flex flex-column content-side\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText; let i = index\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\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\"\r\n [edit]=\"edit\" [buttonId]=\"button.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"showEditors\" [ngClass]=\"{'hover_effect': edit}\">\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>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px;margin-top:15px}.mergeNavbar{margin-top:-75px;padding-top:75px}.borderLess{height:100%}@media only screen and (max-width: 475px){.col-10{width:100%!important}}.row{margin-left:0;margin-right:0}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type:
|
|
7101
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextImageSectionComponent, isStandalone: true, selector: "simpo-text-image-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [ngClass]=\"{'mergeNavbar':canMergeNavbar}\" [simpoBackground]=\"styles?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\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\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row g-5\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\">\r\n <div *ngIf=\"styles?.showImage === true\" class=\"col-10 col-sm-8 col-lg-6\">\r\n <img loading=\"lazy\" [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\" loading=\"lazy\" loading=\"lazy\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class.borderLess]=\"styles?.showImage && styles?.borderLessImage\" />\r\n </div>\r\n <div class=\"col-lg-6 d-flex flex-column content-side\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText; let i = index\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\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\"\r\n [edit]=\"edit\" [buttonId]=\"button.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"showEditors\" [ngClass]=\"{'hover_effect': edit}\">\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>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px;margin-top:15px}.mergeNavbar{margin-top:-75px;padding-top:75px}.borderLess{height:100%}@media only screen and (max-width: 475px){.col-10{width:100%!important}}.row{margin-left:0;margin-right:0}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth", "itemIndex"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type:
|
|
7103
7102
|
//directive
|
|
7104
7103
|
AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
|
7105
7104
|
}
|
|
@@ -7186,7 +7185,7 @@ class VideoSectionComponent extends BaseSection {
|
|
|
7186
7185
|
}, 100);
|
|
7187
7186
|
}
|
|
7188
7187
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: VideoSectionComponent, deps: [{ token: i1.DomSanitizer }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7189
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: VideoSectionComponent, isStandalone: true, selector: "simpo-video-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, 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)\"\n class=\"total-container\" [attr.style]=\"customClass\">\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\n [simpoLayout]=\"style?.layout\" [spacingHorizontal]=\"stylesLayout\" [ngClass]=\"{'px-0 py-0': style?.fullWidth}\">\n <div class=\"row mob-mx-0\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n\n <!-- <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large content-side\"\n [simpoContentTitleSpace]=\"headingSpace\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div> -->\n\n\n <div class=\"video-section\" [ngClass]=\"{'h-100 w-100': style?.layout?.fit === 'screen'}\">\n <iframe class=\"video\" [ngClass]=\"{\n 'vh-60 w-100': style?.layout?.fit === 'content', \n 'h-100 w-100': style?.layout?.fit === 'screen'\n }\" [src]=\"getVideoUrl(content?.videoLink?.url ?? '')\" frameborder=\"0\" allowfullscreen *ngIf=\"!content?.videoLink?.url?.includes('.mp4')\"></iframe>\n <ng-container *ngIf=\"content?.videoLink?.url?.includes('.mp4')\">\n <video class=\"video w-100\" [ngClass]=\"{\n 'vh-60 w-100': style?.layout?.fit === 'content',\n 'h-100 w-100': style?.layout?.fit === 'screen' }\" controls autoplay infinite>\n <source [src]=\"content?.videoLink?.url\" type=\"video/mp4\">\n </video>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <ng-container *ngIf=\"style?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</section>", styles: [".total-container{height:auto;position:relative}.video{width:100%;height:100vh}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.video{
|
|
7188
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: VideoSectionComponent, isStandalone: true, selector: "simpo-video-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, 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)\"\n class=\"total-container\" [attr.style]=\"customClass\">\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\n [simpoLayout]=\"style?.layout\" [spacingHorizontal]=\"stylesLayout\" [ngClass]=\"{'px-0 py-0': style?.fullWidth}\">\n <div class=\"row mob-mx-0\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n\n <!-- <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large content-side\"\n [simpoContentTitleSpace]=\"headingSpace\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div> -->\n\n\n <div class=\"video-section\" [ngClass]=\"{'h-100 w-100': style?.layout?.fit === 'screen'}\">\n <iframe class=\"video\" [ngClass]=\"{\n 'vh-60 w-100': style?.layout?.fit === 'content', \n 'h-100 w-100': style?.layout?.fit === 'screen'\n }\" [src]=\"getVideoUrl(content?.videoLink?.url ?? '')\" frameborder=\"0\" allowfullscreen *ngIf=\"!content?.videoLink?.url?.includes('.mp4')\"></iframe>\n <ng-container *ngIf=\"content?.videoLink?.url?.includes('.mp4')\">\n <video class=\"video w-100\" [ngClass]=\"{\n 'vh-60 w-100': style?.layout?.fit === 'content',\n 'h-100 w-100': style?.layout?.fit === 'screen' }\" controls autoplay infinite>\n <source [src]=\"content?.videoLink?.url\" type=\"video/mp4\">\n </video>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <ng-container *ngIf=\"style?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</section>", styles: [".total-container{height:auto;position:relative}.video{width:100%;height:100vh}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.video{height:max-content!important}.mob-mx-0{margin-left:0!important;margin-right:0!important}.video-section{padding-left:0!important;padding-right:0!important}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.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", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { 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: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
|
7190
7189
|
}
|
|
7191
7190
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: VideoSectionComponent, decorators: [{
|
|
7192
7191
|
type: Component,
|
|
@@ -7216,7 +7215,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
7216
7215
|
PositionLayoutDirectiveDirective,
|
|
7217
7216
|
TextBackgroundDirectiveDirective,
|
|
7218
7217
|
SpacingHorizontalDirective
|
|
7219
|
-
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n class=\"total-container\" [attr.style]=\"customClass\">\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\n [simpoLayout]=\"style?.layout\" [spacingHorizontal]=\"stylesLayout\" [ngClass]=\"{'px-0 py-0': style?.fullWidth}\">\n <div class=\"row mob-mx-0\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n\n <!-- <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large content-side\"\n [simpoContentTitleSpace]=\"headingSpace\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div> -->\n\n\n <div class=\"video-section\" [ngClass]=\"{'h-100 w-100': style?.layout?.fit === 'screen'}\">\n <iframe class=\"video\" [ngClass]=\"{\n 'vh-60 w-100': style?.layout?.fit === 'content', \n 'h-100 w-100': style?.layout?.fit === 'screen'\n }\" [src]=\"getVideoUrl(content?.videoLink?.url ?? '')\" frameborder=\"0\" allowfullscreen *ngIf=\"!content?.videoLink?.url?.includes('.mp4')\"></iframe>\n <ng-container *ngIf=\"content?.videoLink?.url?.includes('.mp4')\">\n <video class=\"video w-100\" [ngClass]=\"{\n 'vh-60 w-100': style?.layout?.fit === 'content',\n 'h-100 w-100': style?.layout?.fit === 'screen' }\" controls autoplay infinite>\n <source [src]=\"content?.videoLink?.url\" type=\"video/mp4\">\n </video>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <ng-container *ngIf=\"style?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</section>", styles: [".total-container{height:auto;position:relative}.video{width:100%;height:100vh}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.video{
|
|
7218
|
+
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n class=\"total-container\" [attr.style]=\"customClass\">\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\n [simpoLayout]=\"style?.layout\" [spacingHorizontal]=\"stylesLayout\" [ngClass]=\"{'px-0 py-0': style?.fullWidth}\">\n <div class=\"row mob-mx-0\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n\n <!-- <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large content-side\"\n [simpoContentTitleSpace]=\"headingSpace\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div> -->\n\n\n <div class=\"video-section\" [ngClass]=\"{'h-100 w-100': style?.layout?.fit === 'screen'}\">\n <iframe class=\"video\" [ngClass]=\"{\n 'vh-60 w-100': style?.layout?.fit === 'content', \n 'h-100 w-100': style?.layout?.fit === 'screen'\n }\" [src]=\"getVideoUrl(content?.videoLink?.url ?? '')\" frameborder=\"0\" allowfullscreen *ngIf=\"!content?.videoLink?.url?.includes('.mp4')\"></iframe>\n <ng-container *ngIf=\"content?.videoLink?.url?.includes('.mp4')\">\n <video class=\"video w-100\" [ngClass]=\"{\n 'vh-60 w-100': style?.layout?.fit === 'content',\n 'h-100 w-100': style?.layout?.fit === 'screen' }\" controls autoplay infinite>\n <source [src]=\"content?.videoLink?.url\" type=\"video/mp4\">\n </video>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <ng-container *ngIf=\"style?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</section>", styles: [".total-container{height:auto;position:relative}.video{width:100%;height:100vh}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.video{height:max-content!important}.mob-mx-0{margin-left:0!important;margin-right:0!important}.video-section{padding-left:0!important;padding-right:0!important}}\n"] }]
|
|
7220
7219
|
}], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: EventsService }], propDecorators: { data: [{
|
|
7221
7220
|
type: Input
|
|
7222
7221
|
}], index: [{
|
|
@@ -8978,12 +8977,17 @@ class FeaturedProductsComponent extends BaseSection {
|
|
|
8978
8977
|
ngOnInit() {
|
|
8979
8978
|
if (isPlatformBrowser(this.platformId)) {
|
|
8980
8979
|
this.getScreenSize();
|
|
8980
|
+
this.IsEcommerce = localStorage.getItem("websiteType") != 'STATIC' ? true : false;
|
|
8981
|
+
let userDetails = localStorage.getItem('user') || '';
|
|
8982
|
+
if (userDetails) {
|
|
8983
|
+
this.userDetails = JSON.parse(userDetails);
|
|
8984
|
+
this.userId = this.userDetails?.userId;
|
|
8985
|
+
}
|
|
8981
8986
|
}
|
|
8982
8987
|
this.content = this.data?.content;
|
|
8983
8988
|
this.styles = this.data?.styles;
|
|
8984
8989
|
this.button = this.data?.action.buttons[0];
|
|
8985
8990
|
this.viewAllButton = this.data?.action.buttons[1];
|
|
8986
|
-
this.IsEcommerce = localStorage.getItem("websiteType") != 'STATIC' ? true : false;
|
|
8987
8991
|
if (!this.isRelatedProduct && !this.isBrowseProduct)
|
|
8988
8992
|
this.getFeatureProduct();
|
|
8989
8993
|
this._eventSubscriber = this._eventService.featureCollectionList.subscribe((response) => {
|
|
@@ -8993,11 +8997,6 @@ class FeaturedProductsComponent extends BaseSection {
|
|
|
8993
8997
|
this._eventService.showLoadingScreen.subscribe((response) => {
|
|
8994
8998
|
this.isLoading = response;
|
|
8995
8999
|
});
|
|
8996
|
-
let userDetails = window.localStorage.getItem('user') || '';
|
|
8997
|
-
if (userDetails) {
|
|
8998
|
-
this.userDetails = JSON.parse(userDetails);
|
|
8999
|
-
this.userId = this.userDetails?.userId;
|
|
9000
|
-
}
|
|
9001
9000
|
if (this.isBrowseProduct && !this.isRelatedProduct) {
|
|
9002
9001
|
this.getBrowseProduct();
|
|
9003
9002
|
}
|
|
@@ -9114,59 +9113,57 @@ class FeaturedProductsComponent extends BaseSection {
|
|
|
9114
9113
|
});
|
|
9115
9114
|
}
|
|
9116
9115
|
getBrowseProduct() {
|
|
9117
|
-
this.apiLoading = true;
|
|
9118
|
-
const businessId = localStorage.getItem('businessId');
|
|
9119
|
-
const userId = this.userId;
|
|
9120
|
-
this.restService.getCartRecommendations(businessId, userId).subscribe((response) => {
|
|
9121
|
-
|
|
9122
|
-
|
|
9123
|
-
|
|
9124
|
-
|
|
9125
|
-
|
|
9126
|
-
|
|
9127
|
-
|
|
9128
|
-
|
|
9129
|
-
|
|
9130
|
-
|
|
9131
|
-
|
|
9132
|
-
|
|
9133
|
-
|
|
9134
|
-
|
|
9135
|
-
|
|
9136
|
-
|
|
9137
|
-
|
|
9138
|
-
|
|
9139
|
-
|
|
9140
|
-
|
|
9141
|
-
|
|
9142
|
-
|
|
9143
|
-
|
|
9144
|
-
|
|
9145
|
-
|
|
9146
|
-
|
|
9147
|
-
|
|
9148
|
-
|
|
9149
|
-
|
|
9150
|
-
|
|
9151
|
-
|
|
9152
|
-
|
|
9153
|
-
|
|
9154
|
-
|
|
9155
|
-
|
|
9156
|
-
|
|
9157
|
-
|
|
9158
|
-
|
|
9159
|
-
|
|
9160
|
-
|
|
9161
|
-
|
|
9162
|
-
|
|
9163
|
-
|
|
9164
|
-
|
|
9165
|
-
|
|
9166
|
-
|
|
9167
|
-
|
|
9168
|
-
});
|
|
9169
|
-
});
|
|
9116
|
+
// this.apiLoading = true;
|
|
9117
|
+
// const businessId = localStorage.getItem('businessId');
|
|
9118
|
+
// const userId = this.userId;
|
|
9119
|
+
// this.restService.getCartRecommendations(businessId, userId).subscribe((response: any) => {
|
|
9120
|
+
// this.responseData = response?.data;
|
|
9121
|
+
// this.storageService.getUserCart().then((cartResponse) => {
|
|
9122
|
+
// cartResponse.onsuccess = (cartData: any) => {
|
|
9123
|
+
// this.apiLoading = false;
|
|
9124
|
+
// this.USER_CART = cartData.target.result as unknown as OrderedItems[];
|
|
9125
|
+
// this.responseData?.forEach((product: Product) => {
|
|
9126
|
+
// this.USER_CART?.forEach((item: OrderedItems) => {
|
|
9127
|
+
// if (item.itemId == product.productId) {
|
|
9128
|
+
// if (product?.itemVariant?.length > 0) {
|
|
9129
|
+
// const itemVarient: ItemVariant = product?.itemVariant?.[0];
|
|
9130
|
+
// if (itemVarient.variantId == item.varientId) {
|
|
9131
|
+
// product.itemImages = itemVarient.variantImages ?? [];
|
|
9132
|
+
// product.price = itemVarient.itemVariantPrice;
|
|
9133
|
+
// product.quantity = item.quantity;
|
|
9134
|
+
// }
|
|
9135
|
+
// } else {
|
|
9136
|
+
// product.quantity = item.quantity;
|
|
9137
|
+
// }
|
|
9138
|
+
// }
|
|
9139
|
+
// })
|
|
9140
|
+
// })
|
|
9141
|
+
// }
|
|
9142
|
+
// }, (err) => {
|
|
9143
|
+
// this.apiLoading = false;
|
|
9144
|
+
// })
|
|
9145
|
+
// this.storageService.getUserWhishlist().then((wishlistResponse) => {
|
|
9146
|
+
// wishlistResponse.onsuccess = (whislistData: any) => {
|
|
9147
|
+
// this.USER_WISHLIST = whislistData.target.result as unknown as OrderedItems[];
|
|
9148
|
+
// this.responseData?.forEach((product: any) => {
|
|
9149
|
+
// this.USER_WISHLIST?.forEach((item: OrderedItems) => {
|
|
9150
|
+
// if (item.itemId == product.productId) {
|
|
9151
|
+
// if (product?.itemVariant?.length > 0) {
|
|
9152
|
+
// const itemVarient: ItemVariant = product?.itemVariant?.[0];
|
|
9153
|
+
// if (itemVarient.variantId == item.varientId) {
|
|
9154
|
+
// product.itemImages = itemVarient?.variantImages ?? [];
|
|
9155
|
+
// product.price = itemVarient.itemVariantPrice;
|
|
9156
|
+
// product.whislist = true;
|
|
9157
|
+
// }
|
|
9158
|
+
// } else {
|
|
9159
|
+
// product.whislist = true;
|
|
9160
|
+
// }
|
|
9161
|
+
// }
|
|
9162
|
+
// })
|
|
9163
|
+
// })
|
|
9164
|
+
// }
|
|
9165
|
+
// })
|
|
9166
|
+
// })
|
|
9170
9167
|
}
|
|
9171
9168
|
addItemToCart(product, type) {
|
|
9172
9169
|
if (this.isItemOutOfStock(product)) {
|
|
@@ -9611,7 +9608,7 @@ class CartComponent extends BaseSection {
|
|
|
9611
9608
|
this.getEcommerceConfigs();
|
|
9612
9609
|
this.styles = this.data?.styles;
|
|
9613
9610
|
// console.log(this.data)
|
|
9614
|
-
this.getCartRecommendations();
|
|
9611
|
+
// this.getCartRecommendations();
|
|
9615
9612
|
}
|
|
9616
9613
|
getEcommerceConfigs() {
|
|
9617
9614
|
this.restService.getEcommerceConfigs().subscribe((res) => {
|
|
@@ -10500,65 +10497,10 @@ class CartComponent extends BaseSection {
|
|
|
10500
10497
|
}
|
|
10501
10498
|
});
|
|
10502
10499
|
}
|
|
10503
|
-
getCartRecommendations() {
|
|
10504
|
-
// this.apiLoading = true;
|
|
10505
|
-
const businessId = localStorage.getItem('businessId');
|
|
10506
|
-
const userId = this.userId;
|
|
10507
|
-
this.restService.getProductDescriptionRecommendations(businessId, userId).subscribe((response) => {
|
|
10508
|
-
this.recommededData = response?.data;
|
|
10509
|
-
this.storageService.getUserCart().then((cartResponse) => {
|
|
10510
|
-
cartResponse.onsuccess = (cartData) => {
|
|
10511
|
-
// this.apiLoading = false;
|
|
10512
|
-
this.USER_CART = cartData.target.result;
|
|
10513
|
-
this.recommededData?.forEach((product) => {
|
|
10514
|
-
this.USER_CART?.forEach((item) => {
|
|
10515
|
-
if (item.itemId == product.productId) {
|
|
10516
|
-
if (product?.itemVariant?.length > 0) {
|
|
10517
|
-
const itemVarient = product?.itemVariant?.[0];
|
|
10518
|
-
if (itemVarient.variantId == item.varientId) {
|
|
10519
|
-
product.itemImages = itemVarient.variantImages ?? [];
|
|
10520
|
-
product.price = itemVarient.itemVariantPrice;
|
|
10521
|
-
product.quantity = item.quantity;
|
|
10522
|
-
}
|
|
10523
|
-
}
|
|
10524
|
-
else {
|
|
10525
|
-
product.quantity = item.quantity;
|
|
10526
|
-
}
|
|
10527
|
-
}
|
|
10528
|
-
});
|
|
10529
|
-
});
|
|
10530
|
-
};
|
|
10531
|
-
}, (err) => {
|
|
10532
|
-
// this.apiLoading = false;
|
|
10533
|
-
});
|
|
10534
|
-
this.storageService.getUserWhishlist().then((wishlistResponse) => {
|
|
10535
|
-
wishlistResponse.onsuccess = (whislistData) => {
|
|
10536
|
-
this.USER_WISHLIST = whislistData.target.result;
|
|
10537
|
-
this.recommededData?.forEach((product) => {
|
|
10538
|
-
this.USER_WISHLIST?.forEach((item) => {
|
|
10539
|
-
if (item.itemId == product.productId) {
|
|
10540
|
-
if (product?.itemVariant?.length > 0) {
|
|
10541
|
-
const itemVarient = product?.itemVariant?.[0];
|
|
10542
|
-
if (itemVarient.variantId == item.varientId) {
|
|
10543
|
-
product.itemImages = itemVarient?.variantImages ?? [];
|
|
10544
|
-
product.price = itemVarient.itemVariantPrice;
|
|
10545
|
-
product.whislist = true;
|
|
10546
|
-
}
|
|
10547
|
-
}
|
|
10548
|
-
else {
|
|
10549
|
-
product.whislist = true;
|
|
10550
|
-
}
|
|
10551
|
-
}
|
|
10552
|
-
});
|
|
10553
|
-
});
|
|
10554
|
-
};
|
|
10555
|
-
});
|
|
10556
|
-
});
|
|
10557
|
-
}
|
|
10558
10500
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CartComponent, deps: [{ token: EventsService }, { token: CartService }, { token: i2$2.Router }, { token: RestService }, { token: i1$2.MatDialog }, { token: StorageServiceService }, { token: i6$1.MessageService }, { token: i8$2.MatBottomSheet }, { token: i2$2.ActivatedRoute }, { token: MAT_DIALOG_DATA, optional: true }, { token: i1$2.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10559
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], viewQueries: [{ propertyName: "d2", first: true, predicate: ["d2"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n <ng-container *ngIf=\"data\">\n <section [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\"\n [attr.class]=\"isMobile ? 'py-5 position-relative' : 'position-relative'\" simpoHover\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\n [ngClass]=\"!responseData?.orderedItems?.length ? 'no-items' : ''\">\n <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\"\n [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\"\n *ngIf=\"responseData?.orderedItems?.length && currentTab === 'ADDRESS'\">\n <span class=\"timeline\" (click)=\"currentTab = 'BAG'\">Bag</span>\n <div class=\"bar\"></div>\n <span class=\"timeline isActive\">Address</span>\n <div class=\"bar\"></div>\n <span class=\"timeline\" style=\"cursor: auto;\">Payment</span>\n </div>\n <div class=\"cart-tab-parent w-100\" *ngIf=\"currentTab == 'BAG' && ecomConfigs?.appointmentBookingEnabled\">\n <!-- && ecomConfigs?.appointmentBookingEnabled\" -->\n <div class=\"cart-tabs\" [id]=\"data?.id\">\n <div class=\"selected-cart-tab\" [ngClass]=\"{'selected-cart-tab': cartType==='SHOPPING'}\"\n (click)=\"cartType='SHOPPING'\">Shopping Cart ({{responseData?.orderedItems?.length ?? 0}})</div>\n <div [ngClass]=\"{'selected-cart-tab': cartType==='TRIAL'}\" (click)=\"cartType='TRIAL'\">Trial Cart\n ({{trialCartItem?.length ?? 0}})</div>\n </div>\n </div>\n <div class=\"cart-parent\" [spacingHorizontal]=\"stylesLayout\" *ngIf=\"currentTab === 'BAG'\" [id]=\"data?.id\"\n [simpoAnimation]=\"styles?.animation\">\n <ng-container>\n <ng-container *ngIf=\"cartType === 'SHOPPING'\">\n <ng-container\n *ngTemplateOutlet=\"(responseData?.orderedItems?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"cartType === 'TRIAL'\">\n <ng-container *ngTemplateOutlet=\"(trialCartItem?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"d-flex checkoutPage\"\n *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && currentTab === 'ADDRESS'\">\n <ng-container *ngTemplateOutlet=\"CHECKOUTPAGE\">\n </ng-container>\n </div>\n\n\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\n [isEcommerce]=\"true\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n\n </section>\n </ng-container>\n <ng-container *ngIf=\"!data\">\n <section class=\"cart-window\">\n <div class=\"heading-large lh-2 mb-3 header-sec\">\n <div class=\"d-flex align-items-center\">\n <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\n <span>Your Cart</span>\n </div>\n <div class=\"saving\"></div>\n </div>\n <div class=\"offers\">\n <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\n <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\n <span>Avail Offers / Coupons</span>\n </div>\n <mat-icon>keyboard_arrow_right</mat-icon>\n </div>\n <div class=\"small-items\">\n <ng-container *ngFor=\"let item of responseData?.orderedItems\">\n <div class=\"small-item\">\n <div class=\"d-flex\" style=\"gap: 5px;\">\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n class=\"small-product-img\"\n [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n (click)=\"goToProductDetails(item)\">\n </div>\n <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\n <div class=\"small-item-quantity\">\n <span class=\"cursor\">-</span>\n <span>{{item.quantity}}</span>\n <span class=\"cursor\">+</span>\n </div>\n <div class=\"small-item-price\">\n <div class=\"price-with-tax\">\n <span [innerHTML]='currency'></span> {{(item.sellingPrice) | number: '1.0-2'}}\n </div>\n <!-- <div class=\"price-with-tax\">\n <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\n </div> -->\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"fotter-sec\">\n <div class=\"delivery-add d-flex\">\n <mat-icon>home</mat-icon>\n <div class=\"address\">Tetsting</div>\n </div>\n <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span\n style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span>\n {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\n </div>\n </section>\n </ng-container>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '40vh',\n 'border-radius': '10px',\n 'position': 'relative',\n 'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n<ng-template #CouponList>\n <section class=\"coupons-listing-section\">\n <div class=\"coupon-heading\">\n <div class=\"back-btn\" (click)=\"closeDialogRef()\">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </div>\n <div class=\"header-text\">Apply Coupon</div>\n </div>\n <!-- <div class=\"coupon-search-sec\">\n <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\n <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\n </div> -->\n <div class=\"coupon-listing\">\n <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\n <div class=\"coupon-details\"\n [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\"\n *ngIf=\"couponDetails?.status\">\n <div class=\"details__coupon-heading\">\n <div class=\"coupon-brief\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name\" [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\n {{ couponDetails.couponCode | uppercase }}</div>\n <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn\" [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\"\n (click)=\"applyCoupon(couponDetails)\">Apply</div>\n </div>\n </div>\n <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\n <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\n <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\n </div> -->\n </div>\n <ng-container>\n <!-- *ngIf=\"couponDetails.status\" -->\n <div class=\"details-divider\"></div>\n <ul class=\"details__coupon-terms\">\n <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\n </ul>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Coupon Available</div>\n <div class=\"empty-screen__secondary-text\">\n Looks like there are no coupons at the moment\n </div>\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\n </div>\n </ng-template>\n </div>\n </section>\n</ng-template>\n\n<ng-template #RedemptionVouchers>\n <section class=\"vouchers-listing-section d-flex flex-column\">\n <div class=\"coupon-heading d-flex align-items-center gap-2 p-3 fs-18 fw-600 border-bottom\">\n <div class=\"back-btn cursor-pointer d-flex align-items-center\" (click)=\"closeDialogRef()\">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </div>\n <div class=\"header-text\">Coupons & Vouchers</div>\n </div>\n\n <!-- <div class=\"d-flex align-items-center tab-container justify-content-between gap-2 p-3\">\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'COUPONS'}\"\n (click)=\"redemptionType = 'COUPONS'\">\n Coupons\n </div>\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'VOUCHERS'}\"\n (click)=\"redemptionType = 'VOUCHERS'\">\n Vouchers\n </div>\n </div> -->\n\n <div class=\"coupon-listing d-flex flex-column gap-3 pt-3\" *ngIf=\"redemptionType === 'COUPONS'\">\n <div class=\"d-flex align-items-center tab-container gap-3\">\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'REWARDS'}\" (click)=\"redemptionCouponType = 'REWARDS'\">\n Rewards\n </div>\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'DISCOUNTS'}\"\n (click)=\"redemptionCouponType = 'DISCOUNTS'\">\n Discounts\n </div>\n </div>\n <ng-container *ngIf=\"redemptionCouponType === 'REWARDS'\">\n <ng-container *ngIf=\"(listRedemptionCoupons?.vouchers?.length > 0) ; else showEmptyScreen\">\n <ng-container *ngFor=\"let voucher of listRedemptionCoupons?.vouchers; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%'\n }}\n off on your payment\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">\n Apply</div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\n <span class=\"separator text-secondary\">|</span>\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\n </span>\n <span class=\"separator text-secondary\" *ngIf=\"voucher.maxRedeemableAmount\">|</span>\n <span class=\"min-order\" *ngIf=\"voucher.maxRedeemableAmount\">Max Redeemable Amount: \u20B9{{\n voucher.maxRedeemableAmount | number }}</span>\n </div>\n\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"redemptionCouponType === 'DISCOUNTS'\">\n <ng-container *ngIf=\"(couponList.length > 0); else showEmptyDiscounts\">\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"couponDetails?.status\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\"\n [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\n {{ couponDetails.couponCode | uppercase }}\n </div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n {{ couponDetails.discountDescription | titlecase }}\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\"\n [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : 'not-allowed'}\"\n (click)=\"applyCoupon(couponDetails)\">\n Apply\n </div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ couponDetails.couponCode | uppercase }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}\n </span>\n </div>\n\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-template #showEmptyDiscounts>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Discount Coupons Available</div>\n <div class=\"empty-screen__secondary-text\">\n Looks like there are no discount coupons at the moment\n </div>\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\n </div>\n </ng-template>\n\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Coupons Available</div>\n <div class=\"empty-screen__secondary-text\">Looks like there are no coupons</div>\n </div>\n </ng-template>\n </div>\n\n <div class=\"coupon-listing d-flex flex-column gap-3\" *ngIf=\"redemptionType === 'VOUCHERS'\">\n <ng-container *ngIf=\"listRedemptionVouchers?.vouchers?.length > 0; else showEmptyScreen\">\n <ng-container *ngFor=\"let voucher of listRedemptionVouchers?.vouchers; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%' }}\n off on your payment\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">Apply\n </div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\n <span class=\"separator text-secondary\">|</span>\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\n </span>\n </div>\n\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\n </div>\n </ng-container>\n </ng-container>\n\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Vouchers Available</div>\n <div class=\"empty-screen__secondary-text\">Looks like there are no vouchers</div>\n </div>\n </ng-template>\n </div>\n </section>\n</ng-template>\n\n<ng-template #CARTPAGE>\n <div class=\"container\">\n <div class=\"main-content\">\n <div class=\"cart-items\">\n <div class=\"cart-header\">\n <h2>Your Cart</h2>\n </div>\n <ng-container\n *ngTemplateOutlet=\"CARTITEM;context:{data: cartType === 'SHOPPING' ? responseData?.orderedItems : trialCartItem}\"></ng-container>\n </div>\n </div>\n\n <div class=\"sidebar\">\n <div class=\"reedem-section d-flex flex-column align-items-center\" *ngIf=\"cartType != 'TRIAL' && getUrl()\">\n <div class=\"justify-content-between d-flex align-items-center w-100 redeem-section-text\">Redeem Section Amount\n <div class=\"toogle-switch\">\n <div class=\"form-check form-switch\">\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" role=\"switch\" id=\"flexSwitchCheckChecked\"\n [checked]=\"selectMatureScheme\" (change)=\"onToggleChange()\">\n </div>\n </div>\n </div>\n <!-- <div class=\"select_matured_text w-100 text-start cursor-pointer\"\n *ngIf=\"selectMatureScheme && !selectedRedemption\" (click)=\"selectScheme()\">\n Select Matured Scheme\n </div> -->\n <!-- <div class=\"select_matured_text d-flex flex-column gap-2 w-100 text-start cursor-pointer\"\n *ngIf=\"selectedRedemption\">\n Selected Scheme\n <div class=\"d-flex w-100 justify-content-between align-items-center group_invest\">Group Investment\n scheme-5000/M <span>Change</span></div>\n <div class=\"d-flex justify-content-between align-items-center w-100 redeem_amount\">Redeemable Amount\n <span>\u20B9{{selectedRedmpationData.selectedAmount}}</span>\n </div>\n </div> -->\n </div>\n <div class=\"scheme-section\" *ngIf=\"selectMatureScheme\">\n <ng-container *ngTemplateOutlet=\"SCHEME_REDEMPTION\"></ng-container>\n </div>\n <div class=\"coupon-section\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && !referEarnExist\">\n <div class=\"coupon-left\">\n <div class=\"coupon-icon\"><mat-icon>percent</mat-icon></div>\n <span class=\"coupon-text\" *ngIf=\"!responseData.billdetails?.couponId\">Apply\n Coupon</span>\n <span class=\"coupon-text\" *ngIf=\"responseData.billdetails?.couponId\">Coupon\n Applied</span>\n </div>\n <svg *ngIf=\"!responseData.billdetails?.couponId\" xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" class=\"chevron-icon\" (click)=\"openDialog(CouponList)\">\n <path d=\"m9 18 6-6-6-6\" />\n </svg>\n <span *ngIf=\"responseData.billdetails?.couponId\"\n (click)=\"removeCoupon($event)\"><mat-icon>close</mat-icon></span>\n </div>\n\n <div class=\"promo-banner mb-3\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && ecomConfigs?.videoCallEnabled\">\n <div class=\"promo-text\">\n <h3>See It Before You Buy It</h3>\n <p>Experience our designs in detail via video call</p>\n </div>\n <button class=\"see-live-btn\" (click)=\"scheduleVideoCall(responseData?.orderedItems)\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"lucide lucide-video\">\n <path d=\"m22 8-6 4 6 4V8Z\" />\n <rect width=\"14\" height=\"12\" x=\"2\" y=\"6\" rx=\"2\" ry=\"2\" />\n </svg>\n SEE IT LIVE\n </button>\n </div>\n\n <div class=\"plan-details-container p-3 rounded-4 bg-white text-dark voucher-details\"\n *ngIf=\"referEarnExist && this?.redemptionPoints?.availablePoints > 0\">\n <div class=\"fs-14 fw-500\">\n Rewards Available\n </div>\n <div class=\"d-flex justify-content-between align-items-start border-bottom pb-2\">\n <div class=\"avb_pts mt-2 mb-2\">\n <span class=\"fs-16 fw-500 total_points text-secondary\">\n <span class=\" fs-18 fw-600 text-dark\">{{(this?.redemptionPoints?.availablePoints || 0).toFixed(2)}}</span>\n pts\n </span>\n <div class=\"total_value fs-12 text-secondary\">\n = max \u20B9{{(this?.redemptionPoints?.pointsConvertedRupees || 0).toFixed(2)}} discount\n </div>\n </div>\n <div class=\"wallte_icon\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/777779c1775200561187wallet_(1).png\" alt=\"\">\n </div>\n </div>\n <div class=\"d-flex justify-content-between align-items-center mt-3\">\n <div class=\"redemable_text\">\n <div class=\"title_text\">\n <div class=\"fs-14 fw-500\">\n Redeem Points\n </div>\n <div class=\"fs-13 fs-400\">\n Use your points for discount\n </div>\n </div>\n </div>\n <div class=\"toggle_btn\">\n <label class=\"switch\">\n <input type=\"checkbox\" id=\"toggleSwitch\" [checked]=\"isPointsRedeeming\"\n (click)=\"onPointsRedeemingChange($event)\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n </div>\n <div class=\"mt-3 success_selected w-100 applied-coupon-card\" *ngIf=\"isPointsRedeeming\">\n <div class=\"d-flex align-items-start gap-2\">\n <div class=\"success_icon\">\n <mat-icon class=\"d-flex justify-content-center align-items-center text-success\">check_circle</mat-icon>\n </div>\n <div class=\"success_text\">\n <div class=\"fs-13 fw-500\">\n You're saving \u20B9\n {{totalSavingAmt || 0}}\n </div>\n <div class=\"fs-12 fs-400 text-success\">\n {{totalSavingPoints}} points remaining after redemption\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Existing coupon row (keep as-is) -->\n <div class=\"coupon-section d-flex flex-column voucher-details\" [id]=\"data?.id\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist\">\n <div class=\"d-flex justify-content-between align-items-center w-100\">\n <div class=\"coupon-left\">\n Apply Coupon\n </div>\n <div (click)=\"addRedemptionCoupon(RedemptionVouchers)\">View All</div>\n </div>\n\n <!-- Applied Coupon Success Banner -->\n <div class=\"applied-coupon-card w-100 mt-3 d-flex align-items-center justify-content-between\"\n *ngIf=\"selectedVoucherId\">\n <div class=\"applied-coupon-left d-flex align-items-center gap-3\">\n <mat-icon class=\"success-check\">check_circle</mat-icon>\n <div class=\"applied-coupon-info\">\n <div class=\"applied-coupon-code\">Coupon {{ selectedVoucherCode }} applied!</div>\n <div class=\"applied-coupon-saving\">You're saving\n <span *ngIf=\"this.couponValueType === 'AMOUNT'\">\u20B9 {{selectedVoucherAmount || 0}}</span>\n <span *ngIf=\"this.couponValueType === 'PERCENTAGE'\"> {{selectedVoucherPercentage || 0}}%</span>\n </div>\n\n </div>\n </div>\n <div class=\"remove-coupon-btn fs-14 fw-500 text-secondary cursor-pointer\"\n (click)=\"removeRedemptionCoupon($event)\">Remove</div>\n </div>\n </div>\n\n <div class=\"delivery-section\" *ngIf=\"getUrl()\">\n <div class=\"delivery-header\">\n <mat-icon>gps_fixed</mat-icon>\n <span *ngIf=\"cartType === 'SHOPPING'\">Delivering to</span>\n <span *ngIf=\"cartType === 'TRIAL'\">Trial Location at</span>\n <span class=\"pincode\">{{pincode}}</span>\n <!-- <a class=\"change-link\">Change Pincode</a> -->\n </div>\n </div>\n\n <div class=\"summary-section\">\n <div class=\"summary-title\">Summary</div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Subtotal</span>\n <span class=\"summary-value\">\u20B9{{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && referEarnExist && isPointsRedeeming\">\n <span class=\"summary-label\">Points Redeemed</span>\n <span class=\"summary-value\">- \u20B9{{ totalSavingAmt || 0 }}</span>\n </div>\n\n <div class=\"summary-row\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'AMOUNT' && appliedVoucher)\">\n <span class=\"summary-label\">Voucher Applied</span>\n <span class=\"summary-value\">- \u20B9{{ selectedVoucherAmount || 0 }}</span>\n </div>\n\n <div class=\"summary-row\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'PERCENTAGE' && appliedVoucher)\">\n <span class=\"summary-label\">Voucher Applied</span>\n <span class=\"summary-value\">- \u20B9{{ percentageReduced || 0 }}</span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.discountAmount\">\n <span class=\"summary-label\">Discount Amount</span>\n <span class=\"summary-value\">\n {{('\u20B9' + (responseData?.billdetails?.discountAmount | number: '1.0-2')) }}\n </span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Shipping</span>\n <span class=\"summary-value\"\n [ngClass]=\"{'savings': !responseData?.billdetails?.deliveryCharges || responseData.billdetails.deliveryCharges <= 0}\">\n {{ (responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0) ? ('\u20B9' +\n (responseData.billdetails.deliveryCharges | number: '1.0-2')) : 'Free' }}\n </span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Estimated Tax</span>\n <span class=\"summary-value\">\u20B9{{((!responseData.billdetails?.couponId ?\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\n number: '1.0-2'}}</span>\n </div>\n\n <div class=\"summary-row total-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Total</span>\n <!-- <span class=\"summary-value\">\u20B9{{ responseData?.totalAmount | number: '1.0-2' }}</span> -->\n <span class=\"total-value\" *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{ responseData?.totalAmount |\n number: '1.0-2' }}</span>\n\n <span class=\"total-value\" *ngIf=\"isPointsRedeeming\">\u20B9{{ (responseData?.totalAmount - (totalSavingAmt || 0)) |\n number: '1.0-2' }}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n (selectedVoucherAmount || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n (percentageReduced || 0)) | number:\n '1.0-2' }}</span>\n </div>\n\n <!-- Trial Cart Summary -->\n <ng-container *ngIf=\"cartType === 'TRIAL'\">\n <div class=\"summary-row\">\n <span class=\"summary-label\">Free Trial</span>\n <span class=\"summary-value\">\u20B90</span>\n </div>\n <div class=\"summary-row\">\n <span class=\"summary-label\">Service Charge</span>\n <span class=\"summary-value savings\">Free</span>\n </div>\n <div class=\"summary-divider\"></div>\n <div class=\"summary-row total-row\">\n <span class=\"summary-label\">Total</span>\n <span class=\"summary-value\">\u20B90</span>\n </div>\n <!-- <span class=\"total-value\" *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{ responseData?.totalAmount |\n number: '1.0-2' }}</span>\n\n <span class=\"total-value\" *ngIf=\"isPointsRedeeming\">\u20B9{{ (responseData?.totalAmount - (totalSavingAmt || 0)) |\n number: '1.0-2' }}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n (selectedVoucherAmount || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n (percentageReduced || 0)) | number:\n '1.0-2' }}</span> -->\n </ng-container>\n </div>\n <button class=\"place-order-btn\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n *ngIf=\"cartType === 'SHOPPING'\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\n Shopping'}}</button>\n <button class=\"place-order-btn mt-0\" (click)=\"edit ? '' : proceedToCheckout()\" simpoButtonDirective\n *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\n Cart'}}</button>\n <button class=\"place-order-btn mt-0\" simpoButtonDirective *ngIf=\"cartType === 'TRIAL'\"\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\" (click)=\"bookAppointment()\">BOOK\n APPOINTMENT</button>\n\n </div>\n </div>\n <ng-container *ngIf=\"recommededData?.length\">\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\"\n [responseData]=\"recommededData\"></simpo-featured-products>\n </ng-container>\n</ng-template>\n<ng-template #CHECKOUTPAGE>\n <div class=\"checkout-left-panel\">\n <div class=\"checkout-main-content\">\n <!-- <div class=\"delivery-options\">\n <div class=\"delivery-option active\">\n <div class=\"delivery-icon\"></div>\n HOME DELIVERY\n </div>\n <div class=\"delivery-option\">\n <div class=\"delivery-icon\"></div>\n STORE PICK-UP\n </div>\n </div> -->\n\n <div class=\"section-title\">Shipping Address</div>\n\n <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\n <div class=\"address-info\">\n <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\n <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\n {{defaultAddress?.stateName}}</div>\n <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\n </div>\n </div>\n\n <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\n <mat-icon>add</mat-icon>\n </div>\n\n <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\n\n <button class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective\n *ngIf=\"defaultAddress && !placeOrderLoader\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">\n Place Order\n </button>\n <button class=\"btn w-100 mt-1 payment-btn\" simpoButtonDirective *ngIf=\"defaultAddress && placeOrderLoader\"\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\">\n Loading...\n </button>\n\n </div>\n </div>\n\n <div class=\"checkout-right-panel\">\n <div class=\"order-summary\">\n <div class=\"summary-title\">Order Summary</div>\n\n <div class=\"checkout-product\">\n <div class=\"product-item\" *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\n <img [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\n alt=\"\">\n <div class=\"product-details\">\n <div class=\"product-name\">{{item.itemName}}</div>\n <div class=\"product-quantity\">Quantity: {{item.quantity}}</div>\n <div class=\"product-price\">\u20B9{{(item.sellingPrice * item.quantity) | number: '1.0-2'}}</div>\n </div>\n </div>\n\n </div>\n\n <div class=\"price-breakdown\">\n <div class=\"price-row\">\n <span>Total Price</span>\n <span>\u20B9{{(responseData?.billdetails?.totalNetValue\n ?? 0) | number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row\">\n <span>Total Tax</span>\n <span>\u20B9{{((!responseData.billdetails?.couponId ?\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\n number:\n '1.0-2'}}</span>\n </div>\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\n <span class=\"summary-label\">Redeem Amount</span>\n <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\n '1.0-2'}}</span>\n </div>\n\n <div class=\"price-row discount\" *ngIf=\"responseData?.billdetails?.discountAmount && !isJewellery\">\n <span>Coupon Discount</span>\n <span>- \u20B9{{responseData?.billdetails?.discountAmount\n | number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row\"\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\n <span>Delivery Charge</span>\n <span>{{responseData.billdetails.deliveryCharges\n |\n number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row total\" *ngIf=\"cartType === 'SHOPPING'\">\n <span>TOTAL AMOUNT</span>\n <span *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{(responseData?.totalAmount ?? 0) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"isPointsRedeeming\">\u20B9{{(responseData?.totalAmount - (totalSavingAmt || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n (selectedVoucherAmount || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n (responseData?.totalAmount * (selectedVoucherPercentage / 100) || 0)) | number:\n '1.0-2' }}</span>\n </div>\n </div>\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #CARTITEM let-products=\"data\">\n <div class=\"cart-item\" *ngFor=\"let item of products\" [style.color]=\"fontColor\">\n <div class=\"item-left\">\n <div class=\"item-image\">\n <img class=\"item-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n (click)=\"goToProductDetails(item)\" style=\"cursor: pointer;\">\n </div>\n <div class=\"item-details\">\n <h3 class=\"item-title\">{{item.itemName}}</h3>\n <div class=\"item-subtitle\" *ngIf=\"item.itemVariant\">\n <span *ngFor=\"let varient of getKeys(item.itemVariant.properties); let last = last\">\n {{ item.itemVariant.properties[varient] | titlecase }}<span *ngIf=\"!last\">, </span>\n </span>\n </div>\n </div>\n </div>\n\n <div class=\"item-right\">\n <div class=\"quantity-control\" *ngIf=\"cartType === 'SHOPPING'\">\n <button class=\"qty-btn px-2\" (click)=\"decreaseQty(item)\" [disabled]=\"item.quantity === 1\">\n <mat-icon>remove</mat-icon>\n </button>\n <span class=\"qty-value px-3\">{{item.quantity}}</span>\n <button class=\"qty-btn px-2\" (click)=\"increaseQty(item)\">\n <mat-icon>add</mat-icon>\n </button>\n </div>\n\n <div class=\"item-price\">\n \u20B9{{item.sellingPrice | number: '1.0-2'}}\n </div>\n\n <div class=\"delete-btn-circle\" (click)=\"removeItem(item)\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trash-2\">\n <path d=\"M3 6h18\" />\n <path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\" />\n <path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\" />\n <line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\" />\n <line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\" />\n </svg>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #EMPTYITEM>\n <section class=\"empty-cart w-100 d-flex align-items-center justify-content-center\">\n <div class=\"empty-cart-container d-flex flex-column\">\n <div class=\"cart-image\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\" [appImageEditor]=\"edit || false\"\n [imageData]=\"data?.content?.image\" [sectionId]=\"data?.id\">\n </div>\n <div class=\"cart-text content-side\">\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\n <div class=\"d-flex justify-content-center\"\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\n </div>\n </ng-container>\n </div>\n <button class=\"place-order-btn mx-auto w-fit\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\n [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\n Shopping'}}</button>\n </div>\n </section>\n</ng-template>\n\n<ng-template #SCHEME_REDEMPTION>\n <div class=\"modal-body\">\n <div class=\"scheme-option\" *ngFor=\"let scheme of schemeList\" (click)=\"redeemScheme(scheme, false)\"\n [style.borderColor]=\"cartInfo.billdetails.orraSchemeCode ? styles?.background?.color : ''\">\n <label for=\"individual\" class=\"scheme-card\">\n <div class=\"scheme-info d-flex gap-1\">\n <div class=\"form-check-radio\">\n <input class=\"form-check-input-radio\" type=\"radio\" name=\"flexRadioDefault\" id=\"flexRadioDefault2\">\n </div>\n <div class=\"right-side\">\n <div class=\"scheme-name\">\n <div class=\"scheme-title\">Individual Investment Scheme</div>\n <div class=\"scheme-monthly\">\u20B98000/M</div>\n </div>\n <div class=\"scheme-details\">\n <span class=\"scheme-id\">GPP Id: {{scheme.GPPId}}</span>\n <!-- <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span> -->\n </div>\n <div class=\"scheme-amount\">\u20B9{{scheme.amount}}</div>\n </div>\n </div>\n </label>\n </div>\n <div class=\"reedem_error d-flex justify-content-center align-items-center\" *ngIf=\"showReedemError\">\n Please add more \u20B9{{vaildAmount}} to reedem this scheme\n </div>\n </div>\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.reedem-section{padding:10px 15px;border-radius:15px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px;font-weight:700;font-size:13px}.redeem-section-text{font-size:.9rem;font-weight:700}.form-check-input:checked{background-color:#28a745!important;border-color:#28a745!important}.form-check-input:focus{border-color:#28a745!important;outline:0;box-shadow:none!important}.close-btn{background:none;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.close-btn:hover{color:#374151}.select_matured_text{font-size:.8rem!important;margin-top:10px;color:#05aacf}.position-relative{position:relative}.cart-parent{display:flex;margin-top:15px}.left-panel{width:65%;padding-right:5rem;border-right:1px solid #E9E9E9}.timeline{cursor:pointer}.cart-items{background:#fff;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.cart-header{padding:16px 24px;border-bottom:1px solid #e2e8f0;background:#f8fafc}.cart-header h2{margin:0;font-size:18px;font-weight:500;color:#0f172a}.cart-item{display:flex!important;align-items:center;justify-content:space-between;border-bottom:1px solid #e2e8f0;gap:20px;padding:0 8px;transition:background .2s}.cart-item:hover{background:#fbfcfe}.item-left{display:flex;align-items:center;flex:1}.item-right{display:flex;align-items:center;padding:15px;gap:32px}.item-image img{width:64px;height:64px;border-radius:12px;object-fit:cover;border:1px solid #f1f5f9}.item-details{display:flex;flex-direction:column;gap:4px}.item-title{margin:0;font-size:15px;font-weight:600;color:#0f172a;line-height:1.4}.item-subtitle{font-size:13px;color:#64748b;font-weight:400}.quantity-control{display:flex;align-items:center;border:1.5px solid #e2e8f0;border-radius:7px;overflow:hidden;height:38px;background:#fff;width:fit-content}.qty-btn{width:38px;height:100%;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#475569;transition:all .2s ease}.qty-btn:hover{background:#f8fafc;color:#0f172a}.qty-btn mat-icon{font-size:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center}.qty-value{width:32px;height:100%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;color:#0f172a;border-left:1.5px solid #e2e8f0;border-right:1.5px solid #e2e8f0}.item-price{font-size:18px;font-weight:700;color:#0f172a;min-width:60px;text-align:right;letter-spacing:-.01em}.delete-btn-circle{width:36px;height:36px;border-radius:50%;border:1px solid #fee2e2;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#ef4444;transition:all .2s ease}.delete-btn-circle:hover{background:#fef2f2;border-color:#fecaca;transform:scale(1.05);color:#dc2626}.delete-btn-circle svg{width:18px;height:18px}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%;padding-left:5rem}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;min-height:120px}.lh-23{line-height:23px;margin-left:10px}.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;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.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;font-size:18px}.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}.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;height:calc(100vh - 170px)}.hover_effect{position:unset;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;width:100%;text-align:center}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.see-live-btn{white-space:nowrap!important}.left-panel{width:100%;padding-right:0rem}.right-panel{width:100%;z-index:1000;padding-left:0rem}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap;display:none}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}.coupons-listing-section{width:100vw!important}.checkoutPage{flex-direction:column}.checkout-left-panel,.checkout-right-panel{width:100%!important}}.mobile-fixed{color:#fff}.coupons-listing-section{height:100vh;padding-top:0;position:relative;width:390px;z-index:100;background:#d3d3d354}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px;position:relative;top:-3px;right:15px;cursor:pointer}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px;cursor:pointer}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}.box-shadow{box-shadow:#00000029 0 1px 4px}.main-content{border-radius:12px;padding:0 30px 30px;width:100%;overflow:scroll;height:calc(100vh - 150px)}.delivery-options{display:flex;gap:20px;margin-bottom:30px}.delivery-option{padding:12px 24px;border:2px solid #e0e0e0;border-radius:25px;background:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:500;transition:all .2s}.delivery-option.active{background:#f0e6ff;border-color:#8b5cf6;color:#7c3aed}.delivery-option:hover{border-color:silver}.delivery-icon{width:16px;height:16px;background:#8b5cf6;border-radius:3px}.section-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.shipping-info{border-radius:10px;padding:20px;margin-bottom:20px;border:1px solid rgb(238,232,255);box-shadow:#0000000a 0 4px 8px}.delivery-date{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.delivery-date-text{color:#666;font-weight:500}.change-date-btn{color:#e91e63;background:none;border:none;font-weight:600;cursor:pointer;text-transform:uppercase;font-size:12px;letter-spacing:.5px}.address-info{margin-bottom:15px}.address-name{font-weight:700;margin-bottom:8px;color:#000}.address-details{color:#666;margin-bottom:8px}.mobile-number{font-weight:700;color:#000;font-size:15px}.change-address-btn{font-size:1rem!important;font-weight:700!important;padding:6px;background:#fff;border:1px solid rgb(229,221,255);border-radius:8px;color:#000;cursor:pointer;transition:all .2s;box-shadow:#0000000a 0 4px 8px}.change-address-btn:hover{border-color:#8b5cf6;color:#8b5cf6}.billing-section{margin-top:40px}.billing-options{display:flex;flex-direction:column;gap:15px;margin-top:20px}.billing-option{display:flex;align-items:center;gap:12px;padding:15px;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s}.billing-option.active{background:#f0e6ff;border-color:#8b5cf6}.radio-btn{width:20px;height:20px;border:2px solid #e0e0e0;border-radius:50%;position:relative}.billing-option.active .radio-btn{border-color:#8b5cf6}.billing-option.active .radio-btn:after{content:\"\";width:10px;height:10px;background:#8b5cf6;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.order-summary{border-radius:12px;padding:25px;width:75%}.summary-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.product-item{display:flex;gap:15px;margin-bottom:20px;border-bottom:1px solid #f0f0f0;border-radius:7px;background:#fff;padding:15px}.product-item:last-of-type{border-bottom:none;margin-bottom:30px;padding-bottom:0}.product-image{max-width:110px;width:100%;height:100%;border-radius:8px}.product-details{flex:1}.product-name{font-weight:500;margin-bottom:4px;color:#2d3748;font-size:14px}.product-quantity{color:#666;font-size:12px;margin-bottom:8px}.product-price{font-weight:600;color:#2d3748}.delivery-info{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:#8b5cf6}.delivery-icon-small{width:12px;height:12px;background:#8b5cf6;border-radius:2px}.price-breakdown{border-top:1px solid #f0f0f0;padding-top:20px}.price-row{display:flex;justify-content:space-between;margin-bottom:12px;color:#666}.price-row.total{font-weight:600;color:#2d3748;font-size:16px;margin-top:15px;padding-top:15px;border-top:1px solid #f0f0f0}.discount{color:#22c55e!important}@media (max-width: 768px){.container{grid-template-columns:1fr;padding:15px;gap:20px}.main-content,.order-summary{padding:20px;width:100%}.delivery-options{flex-direction:column;gap:10px}}.checkout-left-panel{width:65%;display:flex;justify-content:center}.checkout-right-panel{width:35%;display:flex;justify-content:center;background-color:#f9f9fa}.checkout-product{max-height:50vh;overflow:scroll}.mt-1{margin-top:1rem!important}.payment-btn{box-shadow:#0000000a 0 4px 8px}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px;height:25vh!important;margin-bottom:20px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.change-pincode{display:flex;gap:10px}.change-pincode mat-icon{font-size:18px;align-items:center;justify-content:center;display:flex}.change-pincode span{font-size:14px}.fs-13{font-size:13px}.fs-12{font-size:12px}.fs-18{font-size:18px}.b-1-b{border-width:0px 1px;border-style:solid;border-color:#000}.container{max-width:unset;padding:24px;display:flex;gap:24px;width:100%!important}.main-content{background:#fff;border-radius:12px;width:70%}.promo-banner{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;border-radius:8px;border:1px solid #e2e8f0}.promo-text h3{font-size:16px!important;font-weight:500;margin-bottom:4px}.promo-text p{font-size:.9rem!important;margin-bottom:0!important;color:#64748b}.see-live-btn{background:#fff;border:1px solid #e2e8f0;font-weight:600;color:#000;padding:8px 16px;border-radius:8px;font-size:12px!important;cursor:pointer;display:flex;align-items:center;gap:8px;width:max-content!important;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.see-live-btn:hover{background:#f8fafc;border-color:#cbd5e1;transform:translateY(-1px)}.see-live-btn svg{color:#6366f1}.cart-item{display:flex;gap:16px;position:relative}.cart-item:last-child{border-bottom:none}.item-image{width:15%;height:100px;border-radius:8px;object-fit:cover;display:flex;align-items:center;justify-content:center}.item-details{flex:1}.item-title{font-weight:500;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px}.current-price{font-size:1rem;font-weight:600}.original-price{font-size:1rem;text-decoration:line-through}.discount{background:#fef3c7;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-code{font-size:12px;color:#9ca3af;margin-bottom:8px}.item-options{display:flex;gap:16px;font-size:14px;color:#6b7280;margin-bottom:12px}.delivery-info{font-size:12px;color:#8b5cf6}.pickup-info{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:5px 15px;margin-top:12px;display:flex;align-items:center;cursor:pointer;width:max-content;gap:20px}.pickup-text{font-size:.9rem;color:#374151}.remove-btn{position:absolute;top:16px;right:0;width:20px!important;height:20px;background:#000;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px!important}.sidebar{display:flex;flex-direction:column;gap:16px;width:32%}.coupon-section{border-radius:8px;padding:10px 15px;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s ease}.coupon-section:hover{border-color:#cbd5e1;background-color:#f8fafc}.chevron-icon{color:#94a3b8;transition:transform .2s ease}.coupon-section:hover .chevron-icon{transform:translate(2px);color:#64748b}.scheme-section{border-radius:12px;padding:10px 15px;cursor:pointer}.coupon-left{display:flex;align-items:center;gap:12px}.coupon-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center}.coupon-icon mat-icon{font-size:17px;width:17px!important;height:19px!important}.coupon-text{font-weight:700;font-size:.9rem}.delivery-section{background:#fff;border-radius:12px;padding:10px 15px;box-shadow:#b2b2ca80 2px 2px 6px;background:#f6f3f9}.delivery-header{display:flex;align-items:center;gap:12px;margin-bottom:4px}.delivery-header span{font-size:.9rem;font-weight:700}.delivery-header mat-icon{width:20px;height:20px;font-size:17px;position:relative;top:2px}.delivery-icon{width:20px;height:20px;background:#8b5cf6;border-radius:50%}.pincode{font-weight:600;color:#111827}.change-link{color:#ec4899;font-size:.9rem;text-decoration:none;margin-left:auto}.summary-section{background:#fff;border-radius:8px;padding:20px;border:1px solid #e2e8f0}.summary-title{font-size:16px;font-weight:700;color:#0f172a;margin-bottom:20px;letter-spacing:-.01em}.summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.summary-row:last-child{margin-bottom:0}.summary-label{font-size:14px;font-weight:400;color:#64748b}.summary-value{font-size:14px;font-weight:500;color:#0f172a}.summary-divider{height:1px;background:#f1f5f9;margin:16px 0;width:100%}.total-row .summary-label{font-size:16px;font-weight:600;color:#0f172a}.total-row .summary-value{font-size:16px;font-weight:700;color:#0f172a}.total-row{border-top:1px solid #e2e8f0;padding-top:15px;margin-top:15px}.total-label{font-weight:600;font-size:16px}.total-value{font-weight:700;font-size:18px}.place-order-btn{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;border:none;border-radius:12px;padding:9px 10px;font-size:.9rem!important;font-weight:600;cursor:pointer;margin-top:10px;text-transform:uppercase}.place-order-btn:hover{opacity:.9}.chain-icon,.earring-icon{width:60px;height:60px;filter:sepia(1) hue-rotate(30deg) saturate(2)}.item-img{width:100%;height:100%;object-fit:cover}.mt-0{margin-top:0!important}select{outline:none;border-radius:5px;padding:2px;width:20%;border:none;box-shadow:#9999994d 2px 2px 6px;cursor:pointer}.cart-tab-parent{display:flex;justify-content:center}.cart-tabs{gap:10px;display:flex;justify-content:center;align-items:center;width:max-content;border-radius:8px;border:1px solid #e2e8f0}.cart-tabs div{padding:7px 10px;cursor:pointer;font-size:14px}.selected-cart-tab{margin:6px;background:#f1f5f9;border-radius:5px;color:#000!important;font-weight:500}.checkout-main-content{width:50%;padding:30px;border-radius:12px}@media screen and (max-width: 475px){.main-content{padding:0;height:auto!important}.cart-item{flex-direction:column!important;align-items:flex-start!important;padding:16px 12px!important;gap:16px!important}.item-left{width:100%!important;gap:16px!important;align-items:flex-start!important}.item-image{width:86px!important;height:86px!important;flex-shrink:0!important}.item-right{width:100%!important;justify-content:space-between!important;padding:0!important;gap:12px!important;margin-top:4px!important}.item-price{flex:1!important;text-align:right!important;margin-right:8px!important;font-size:16px!important}.item-title{font-size:14px!important;-webkit-line-clamp:2!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}.quantity-control{height:34px!important}.qty-btn{width:34px!important}.qty-value{width:28px!important;font-size:13px!important}.no-items{height:86vh;overflow:hidden;margin:0}.checkout-main-content{width:100%}.container{padding:0!important}.pickup-info{display:none}.container{display:flex;flex-direction:column}.promo-banner{gap:10px}select{width:50%}.main-content,.sidebar{width:100%}.vouchers-listing-section{min-width:unset!important;width:100vw!important}.separator{display:none!important}.coupon-meta{display:grid!important;grid-template-columns:1fr 1fr!important}}.group_invest{color:#000;font-size:.8rem}.reedem_error{color:red}.group_invest span{color:#05aacf}.redeem_amount{padding:2%;border-radius:4px;background:#fff;margin-top:2%;color:#000;font-size:.8rem}.redeem_amount span{color:#0dc577}.w-fit{width:fit-content!important}.modal-body{padding-bottom:0;overflow-y:scroll;max-height:300px;padding:0!important}.scheme-option{margin-bottom:16px}.scheme-option input[type=radio]:checked+.scheme-card{border-color:#06b6d4;background:#f0f9ff;position:relative}.scheme-option input[type=radio]:checked+.scheme-card:before{content:\"\";position:absolute;top:20px;left:20px;width:20px;height:20px;border:2px solid #06b6d4;border-radius:50%;background:#fff}.scheme-option input[type=radio]:checked+.scheme-card:after{content:\"\";position:absolute;top:26px;left:26px;width:8px;height:8px;background:#06b6d4;border-radius:50%}.scheme-card{justify-content:space-between;padding:10px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;width:100%}.scheme-card:hover{border-color:#d1d5db;background:#f9fafb}.form-check-radio{width:10%}.scheme-title{font-size:12px;font-weight:600;color:#111827;margin-bottom:8px}.scheme-details{display:flex;gap:25px;margin-bottom:20px}.scheme-name{display:flex;justify-content:space-between}.scheme-details span{font-size:12px;color:#0000004d}.scheme-monthly{font-size:14px;font-weight:600;color:#111827;min-width:100px;text-align:right}.right-side{width:90%}.scheme-amount{font-weight:700}@media screen and (min-width: 700px){.cart-items{max-height:500px;overflow:scroll}}.add-to-cart-parent{width:max-content;border:1px solid #000000;border-radius:8px}.cursor{cursor:pointer}.cart-text{max-width:600px;margin:0 auto;text-align:center}.cart-text div{word-break:break-word;overflow-wrap:break-word;white-space:normal}.switch{position:relative;display:inline-block;width:45px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:34px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:3px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#4caf50}input:checked+.slider:before{transform:translate(24px)}.vouchers-listing-section{position:relative;width:fit-content;min-width:500px;z-index:100;background:#fff;height:100vh}.vouchers-listing-section .coupon-heading{border-bottom:1px solid #eee}.vouchers-listing-section .coupon-listing{padding:12px 16px;overflow-y:auto;height:calc(97vh - 100px)}.voucher-details{background:#fff;border-radius:12px;padding:14px;box-shadow:0 1px 4px #00000042}.voucher-details .coupon-brief .apply-offer-btn{background:#111;color:#fff;border-radius:10px;padding:6px 16px}.voucher-details .coupon-code-box{border:1.5px dashed #bbb;border-radius:8px;padding:8px 12px;margin-bottom:10px}.voucher-details .coupon-code-box .code-label{font-size:11px;color:#888;margin-bottom:2px}.voucher-details .coupon-code-box .code-row .code-value{font-weight:700;font-size:15px;letter-spacing:1px}.voucher-details .coupon-meta .clock-icon{font-size:14px;height:14px;width:14px;vertical-align:middle}.applied-coupon-card{background:#f0fff8;border-radius:12px;padding:12px 16px}.applied-coupon-card .applied-coupon-left .success-check{color:#22c55e;font-size:22px}.applied-coupon-card .applied-coupon-left .applied-coupon-code{font-weight:700;font-size:14px}.applied-coupon-card .applied-coupon-left .applied-coupon-saving{font-size:13px;color:#097d5f;margin-top:2px}.active-type{background:#111!important;color:#fff!important}.redemption-type{text-align:center;border-radius:10px;padding:6px 16px;background:#d3d3d36b;width:-webkit-fill-available!important}.wallte_icon{background:#000;border-radius:50px;padding:5px 9px 7px}.wallte_icon img{width:18px;height:18px}.fw-600{font-weight:600}.coupon-type{width:fit-content!important;border-radius:26px!important;background:transparent!important;border:1px solid #afafaf;color:#393838;text-align:center;padding:6px 16px}.active-coupon{background:transparent!important;border:2px solid black!important;color:#000!important}.my-close-btn{position:absolute!important;top:10px!important;right:10px!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { 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", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "directive", type:
|
|
10501
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], viewQueries: [{ propertyName: "d2", first: true, predicate: ["d2"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n <ng-container *ngIf=\"data\">\n <section [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\"\n [attr.class]=\"isMobile ? 'py-5 position-relative' : 'position-relative'\" simpoHover\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\n [ngClass]=\"!responseData?.orderedItems?.length ? 'no-items' : ''\">\n <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\"\n [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\"\n *ngIf=\"responseData?.orderedItems?.length && currentTab === 'ADDRESS'\">\n <span class=\"timeline\" (click)=\"currentTab = 'BAG'\">Bag</span>\n <div class=\"bar\"></div>\n <span class=\"timeline isActive\">Address</span>\n <div class=\"bar\"></div>\n <span class=\"timeline\" style=\"cursor: auto;\">Payment</span>\n </div>\n <div class=\"cart-tab-parent w-100\" *ngIf=\"currentTab == 'BAG' && ecomConfigs?.appointmentBookingEnabled\">\n <!-- && ecomConfigs?.appointmentBookingEnabled\" -->\n <div class=\"cart-tabs\" [id]=\"data?.id\">\n <div class=\"selected-cart-tab\" [ngClass]=\"{'selected-cart-tab': cartType==='SHOPPING'}\"\n (click)=\"cartType='SHOPPING'\">Shopping Cart ({{responseData?.orderedItems?.length ?? 0}})</div>\n <div [ngClass]=\"{'selected-cart-tab': cartType==='TRIAL'}\" (click)=\"cartType='TRIAL'\">Trial Cart\n ({{trialCartItem?.length ?? 0}})</div>\n </div>\n </div>\n <div class=\"cart-parent\" [spacingHorizontal]=\"stylesLayout\" *ngIf=\"currentTab === 'BAG'\" [id]=\"data?.id\"\n [simpoAnimation]=\"styles?.animation\">\n <ng-container>\n <ng-container *ngIf=\"cartType === 'SHOPPING'\">\n <ng-container\n *ngTemplateOutlet=\"(responseData?.orderedItems?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"cartType === 'TRIAL'\">\n <ng-container *ngTemplateOutlet=\"(trialCartItem?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"d-flex checkoutPage\"\n *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && currentTab === 'ADDRESS'\">\n <ng-container *ngTemplateOutlet=\"CHECKOUTPAGE\">\n </ng-container>\n </div>\n\n\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\n [isEcommerce]=\"true\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n\n </section>\n </ng-container>\n <ng-container *ngIf=\"!data\">\n <section class=\"cart-window\">\n <div class=\"heading-large lh-2 mb-3 header-sec\">\n <div class=\"d-flex align-items-center\">\n <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\n <span>Your Cart</span>\n </div>\n <div class=\"saving\"></div>\n </div>\n <div class=\"offers\">\n <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\n <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\n <span>Avail Offers / Coupons</span>\n </div>\n <mat-icon>keyboard_arrow_right</mat-icon>\n </div>\n <div class=\"small-items\">\n <ng-container *ngFor=\"let item of responseData?.orderedItems\">\n <div class=\"small-item\">\n <div class=\"d-flex\" style=\"gap: 5px;\">\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n class=\"small-product-img\"\n [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n (click)=\"goToProductDetails(item)\">\n </div>\n <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\n <div class=\"small-item-quantity\">\n <span class=\"cursor\">-</span>\n <span>{{item.quantity}}</span>\n <span class=\"cursor\">+</span>\n </div>\n <div class=\"small-item-price\">\n <div class=\"price-with-tax\">\n <span [innerHTML]='currency'></span> {{(item.sellingPrice) | number: '1.0-2'}}\n </div>\n <!-- <div class=\"price-with-tax\">\n <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\n </div> -->\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"fotter-sec\">\n <div class=\"delivery-add d-flex\">\n <mat-icon>home</mat-icon>\n <div class=\"address\">Tetsting</div>\n </div>\n <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span\n style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span>\n {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\n </div>\n </section>\n </ng-container>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '40vh',\n 'border-radius': '10px',\n 'position': 'relative',\n 'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n<ng-template #CouponList>\n <section class=\"coupons-listing-section\">\n <div class=\"coupon-heading\">\n <div class=\"back-btn\" (click)=\"closeDialogRef()\">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </div>\n <div class=\"header-text\">Apply Coupon</div>\n </div>\n <!-- <div class=\"coupon-search-sec\">\n <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\n <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\n </div> -->\n <div class=\"coupon-listing\">\n <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\n <div class=\"coupon-details\"\n [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\"\n *ngIf=\"couponDetails?.status\">\n <div class=\"details__coupon-heading\">\n <div class=\"coupon-brief\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name\" [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\n {{ couponDetails.couponCode | uppercase }}</div>\n <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn\" [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\"\n (click)=\"applyCoupon(couponDetails)\">Apply</div>\n </div>\n </div>\n <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\n <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\n <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\n </div> -->\n </div>\n <ng-container>\n <!-- *ngIf=\"couponDetails.status\" -->\n <div class=\"details-divider\"></div>\n <ul class=\"details__coupon-terms\">\n <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\n </ul>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Coupon Available</div>\n <div class=\"empty-screen__secondary-text\">\n Looks like there are no coupons at the moment\n </div>\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\n </div>\n </ng-template>\n </div>\n </section>\n</ng-template>\n\n<ng-template #RedemptionVouchers>\n <section class=\"vouchers-listing-section d-flex flex-column\">\n <div class=\"coupon-heading d-flex align-items-center gap-2 p-3 fs-18 fw-600 border-bottom\">\n <div class=\"back-btn cursor-pointer d-flex align-items-center\" (click)=\"closeDialogRef()\">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </div>\n <div class=\"header-text\">Coupons & Vouchers</div>\n </div>\n\n <!-- <div class=\"d-flex align-items-center tab-container justify-content-between gap-2 p-3\">\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'COUPONS'}\"\n (click)=\"redemptionType = 'COUPONS'\">\n Coupons\n </div>\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'VOUCHERS'}\"\n (click)=\"redemptionType = 'VOUCHERS'\">\n Vouchers\n </div>\n </div> -->\n\n <div class=\"coupon-listing d-flex flex-column gap-3 pt-3\" *ngIf=\"redemptionType === 'COUPONS'\">\n <div class=\"d-flex align-items-center tab-container gap-3\">\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'REWARDS'}\" (click)=\"redemptionCouponType = 'REWARDS'\">\n Rewards\n </div>\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'DISCOUNTS'}\"\n (click)=\"redemptionCouponType = 'DISCOUNTS'\">\n Discounts\n </div>\n </div>\n <ng-container *ngIf=\"redemptionCouponType === 'REWARDS'\">\n <ng-container *ngIf=\"(listRedemptionCoupons?.vouchers?.length > 0) ; else showEmptyScreen\">\n <ng-container *ngFor=\"let voucher of listRedemptionCoupons?.vouchers; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%'\n }}\n off on your payment\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">\n Apply</div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\n <span class=\"separator text-secondary\">|</span>\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\n </span>\n <span class=\"separator text-secondary\" *ngIf=\"voucher.maxRedeemableAmount\">|</span>\n <span class=\"min-order\" *ngIf=\"voucher.maxRedeemableAmount\">Max Redeemable Amount: \u20B9{{\n voucher.maxRedeemableAmount | number }}</span>\n </div>\n\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"redemptionCouponType === 'DISCOUNTS'\">\n <ng-container *ngIf=\"(couponList.length > 0); else showEmptyDiscounts\">\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"couponDetails?.status\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\"\n [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\n {{ couponDetails.couponCode | uppercase }}\n </div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n {{ couponDetails.discountDescription | titlecase }}\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\"\n [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : 'not-allowed'}\"\n (click)=\"applyCoupon(couponDetails)\">\n Apply\n </div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ couponDetails.couponCode | uppercase }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}\n </span>\n </div>\n\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-template #showEmptyDiscounts>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Discount Coupons Available</div>\n <div class=\"empty-screen__secondary-text\">\n Looks like there are no discount coupons at the moment\n </div>\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\n </div>\n </ng-template>\n\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Coupons Available</div>\n <div class=\"empty-screen__secondary-text\">Looks like there are no coupons</div>\n </div>\n </ng-template>\n </div>\n\n <div class=\"coupon-listing d-flex flex-column gap-3\" *ngIf=\"redemptionType === 'VOUCHERS'\">\n <ng-container *ngIf=\"listRedemptionVouchers?.vouchers?.length > 0; else showEmptyScreen\">\n <ng-container *ngFor=\"let voucher of listRedemptionVouchers?.vouchers; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%' }}\n off on your payment\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">Apply\n </div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\n <span class=\"separator text-secondary\">|</span>\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\n </span>\n </div>\n\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\n </div>\n </ng-container>\n </ng-container>\n\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Vouchers Available</div>\n <div class=\"empty-screen__secondary-text\">Looks like there are no vouchers</div>\n </div>\n </ng-template>\n </div>\n </section>\n</ng-template>\n\n<ng-template #CARTPAGE>\n <div class=\"container\">\n <div class=\"main-content\">\n <div class=\"cart-items\">\n <div class=\"cart-header\">\n <h2>Your Cart</h2>\n </div>\n <ng-container\n *ngTemplateOutlet=\"CARTITEM;context:{data: cartType === 'SHOPPING' ? responseData?.orderedItems : trialCartItem}\"></ng-container>\n </div>\n </div>\n\n <div class=\"sidebar\">\n <div class=\"reedem-section d-flex flex-column align-items-center\" *ngIf=\"cartType != 'TRIAL' && getUrl()\">\n <div class=\"justify-content-between d-flex align-items-center w-100 redeem-section-text\">Redeem Section Amount\n <div class=\"toogle-switch\">\n <div class=\"form-check form-switch\">\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" role=\"switch\" id=\"flexSwitchCheckChecked\"\n [checked]=\"selectMatureScheme\" (change)=\"onToggleChange()\">\n </div>\n </div>\n </div>\n <!-- <div class=\"select_matured_text w-100 text-start cursor-pointer\"\n *ngIf=\"selectMatureScheme && !selectedRedemption\" (click)=\"selectScheme()\">\n Select Matured Scheme\n </div> -->\n <!-- <div class=\"select_matured_text d-flex flex-column gap-2 w-100 text-start cursor-pointer\"\n *ngIf=\"selectedRedemption\">\n Selected Scheme\n <div class=\"d-flex w-100 justify-content-between align-items-center group_invest\">Group Investment\n scheme-5000/M <span>Change</span></div>\n <div class=\"d-flex justify-content-between align-items-center w-100 redeem_amount\">Redeemable Amount\n <span>\u20B9{{selectedRedmpationData.selectedAmount}}</span>\n </div>\n </div> -->\n </div>\n <div class=\"scheme-section\" *ngIf=\"selectMatureScheme\">\n <ng-container *ngTemplateOutlet=\"SCHEME_REDEMPTION\"></ng-container>\n </div>\n <div class=\"coupon-section\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && !referEarnExist\">\n <div class=\"coupon-left\">\n <div class=\"coupon-icon\"><mat-icon>percent</mat-icon></div>\n <span class=\"coupon-text\" *ngIf=\"!responseData.billdetails?.couponId\">Apply\n Coupon</span>\n <span class=\"coupon-text\" *ngIf=\"responseData.billdetails?.couponId\">Coupon\n Applied</span>\n </div>\n <svg *ngIf=\"!responseData.billdetails?.couponId\" xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" class=\"chevron-icon\" (click)=\"openDialog(CouponList)\">\n <path d=\"m9 18 6-6-6-6\" />\n </svg>\n <span *ngIf=\"responseData.billdetails?.couponId\"\n (click)=\"removeCoupon($event)\"><mat-icon>close</mat-icon></span>\n </div>\n\n <div class=\"promo-banner mb-3\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && ecomConfigs?.videoCallEnabled\">\n <div class=\"promo-text\">\n <h3>See It Before You Buy It</h3>\n <p>Experience our designs in detail via video call</p>\n </div>\n <button class=\"see-live-btn\" (click)=\"scheduleVideoCall(responseData?.orderedItems)\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"lucide lucide-video\">\n <path d=\"m22 8-6 4 6 4V8Z\" />\n <rect width=\"14\" height=\"12\" x=\"2\" y=\"6\" rx=\"2\" ry=\"2\" />\n </svg>\n SEE IT LIVE\n </button>\n </div>\n\n <div class=\"plan-details-container p-3 rounded-4 bg-white text-dark voucher-details\"\n *ngIf=\"referEarnExist && this?.redemptionPoints?.availablePoints > 0\">\n <div class=\"fs-14 fw-500\">\n Rewards Available\n </div>\n <div class=\"d-flex justify-content-between align-items-start border-bottom pb-2\">\n <div class=\"avb_pts mt-2 mb-2\">\n <span class=\"fs-16 fw-500 total_points text-secondary\">\n <span class=\" fs-18 fw-600 text-dark\">{{(this?.redemptionPoints?.availablePoints || 0).toFixed(2)}}</span>\n pts\n </span>\n <div class=\"total_value fs-12 text-secondary\">\n = max \u20B9{{(this?.redemptionPoints?.pointsConvertedRupees || 0).toFixed(2)}} discount\n </div>\n </div>\n <div class=\"wallte_icon\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/777779c1775200561187wallet_(1).png\" alt=\"\">\n </div>\n </div>\n <div class=\"d-flex justify-content-between align-items-center mt-3\">\n <div class=\"redemable_text\">\n <div class=\"title_text\">\n <div class=\"fs-14 fw-500\">\n Redeem Points\n </div>\n <div class=\"fs-13 fs-400\">\n Use your points for discount\n </div>\n </div>\n </div>\n <div class=\"toggle_btn\">\n <label class=\"switch\">\n <input type=\"checkbox\" id=\"toggleSwitch\" [checked]=\"isPointsRedeeming\"\n (click)=\"onPointsRedeemingChange($event)\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n </div>\n <div class=\"mt-3 success_selected w-100 applied-coupon-card\" *ngIf=\"isPointsRedeeming\">\n <div class=\"d-flex align-items-start gap-2\">\n <div class=\"success_icon\">\n <mat-icon class=\"d-flex justify-content-center align-items-center text-success\">check_circle</mat-icon>\n </div>\n <div class=\"success_text\">\n <div class=\"fs-13 fw-500\">\n You're saving \u20B9\n {{totalSavingAmt || 0}}\n </div>\n <div class=\"fs-12 fs-400 text-success\">\n {{totalSavingPoints}} points remaining after redemption\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Existing coupon row (keep as-is) -->\n <div class=\"coupon-section d-flex flex-column voucher-details\" [id]=\"data?.id\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist\">\n <div class=\"d-flex justify-content-between align-items-center w-100\">\n <div class=\"coupon-left\">\n Apply Coupon\n </div>\n <div (click)=\"addRedemptionCoupon(RedemptionVouchers)\">View All</div>\n </div>\n\n <!-- Applied Coupon Success Banner -->\n <div class=\"applied-coupon-card w-100 mt-3 d-flex align-items-center justify-content-between\"\n *ngIf=\"selectedVoucherId\">\n <div class=\"applied-coupon-left d-flex align-items-center gap-3\">\n <mat-icon class=\"success-check\">check_circle</mat-icon>\n <div class=\"applied-coupon-info\">\n <div class=\"applied-coupon-code\">Coupon {{ selectedVoucherCode }} applied!</div>\n <div class=\"applied-coupon-saving\">You're saving\n <span *ngIf=\"this.couponValueType === 'AMOUNT'\">\u20B9 {{selectedVoucherAmount || 0}}</span>\n <span *ngIf=\"this.couponValueType === 'PERCENTAGE'\"> {{selectedVoucherPercentage || 0}}%</span>\n </div>\n\n </div>\n </div>\n <div class=\"remove-coupon-btn fs-14 fw-500 text-secondary cursor-pointer\"\n (click)=\"removeRedemptionCoupon($event)\">Remove</div>\n </div>\n </div>\n\n <div class=\"delivery-section\" *ngIf=\"getUrl()\">\n <div class=\"delivery-header\">\n <mat-icon>gps_fixed</mat-icon>\n <span *ngIf=\"cartType === 'SHOPPING'\">Delivering to</span>\n <span *ngIf=\"cartType === 'TRIAL'\">Trial Location at</span>\n <span class=\"pincode\">{{pincode}}</span>\n <!-- <a class=\"change-link\">Change Pincode</a> -->\n </div>\n </div>\n\n <div class=\"summary-section\">\n <div class=\"summary-title\">Summary</div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Subtotal</span>\n <span class=\"summary-value\">\u20B9{{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && referEarnExist && isPointsRedeeming\">\n <span class=\"summary-label\">Points Redeemed</span>\n <span class=\"summary-value\">- \u20B9{{ totalSavingAmt || 0 }}</span>\n </div>\n\n <div class=\"summary-row\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'AMOUNT' && appliedVoucher)\">\n <span class=\"summary-label\">Voucher Applied</span>\n <span class=\"summary-value\">- \u20B9{{ selectedVoucherAmount || 0 }}</span>\n </div>\n\n <div class=\"summary-row\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'PERCENTAGE' && appliedVoucher)\">\n <span class=\"summary-label\">Voucher Applied</span>\n <span class=\"summary-value\">- \u20B9{{ percentageReduced || 0 }}</span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.discountAmount\">\n <span class=\"summary-label\">Discount Amount</span>\n <span class=\"summary-value\">\n {{('\u20B9' + (responseData?.billdetails?.discountAmount | number: '1.0-2')) }}\n </span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Shipping</span>\n <span class=\"summary-value\"\n [ngClass]=\"{'savings': !responseData?.billdetails?.deliveryCharges || responseData.billdetails.deliveryCharges <= 0}\">\n {{ (responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0) ? ('\u20B9' +\n (responseData.billdetails.deliveryCharges | number: '1.0-2')) : 'Free' }}\n </span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Estimated Tax</span>\n <span class=\"summary-value\">\u20B9{{((!responseData.billdetails?.couponId ?\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\n number: '1.0-2'}}</span>\n </div>\n\n <div class=\"summary-row total-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Total</span>\n <!-- <span class=\"summary-value\">\u20B9{{ responseData?.totalAmount | number: '1.0-2' }}</span> -->\n <span class=\"total-value\" *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{ responseData?.totalAmount |\n number: '1.0-2' }}</span>\n\n <span class=\"total-value\" *ngIf=\"isPointsRedeeming\">\u20B9{{ (responseData?.totalAmount - (totalSavingAmt || 0)) |\n number: '1.0-2' }}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n (selectedVoucherAmount || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n (percentageReduced || 0)) | number:\n '1.0-2' }}</span>\n </div>\n\n <!-- Trial Cart Summary -->\n <ng-container *ngIf=\"cartType === 'TRIAL'\">\n <div class=\"summary-row\">\n <span class=\"summary-label\">Free Trial</span>\n <span class=\"summary-value\">\u20B90</span>\n </div>\n <div class=\"summary-row\">\n <span class=\"summary-label\">Service Charge</span>\n <span class=\"summary-value savings\">Free</span>\n </div>\n <div class=\"summary-divider\"></div>\n <div class=\"summary-row total-row\">\n <span class=\"summary-label\">Total</span>\n <span class=\"summary-value\">\u20B90</span>\n </div>\n <!-- <span class=\"total-value\" *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{ responseData?.totalAmount |\n number: '1.0-2' }}</span>\n\n <span class=\"total-value\" *ngIf=\"isPointsRedeeming\">\u20B9{{ (responseData?.totalAmount - (totalSavingAmt || 0)) |\n number: '1.0-2' }}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n (selectedVoucherAmount || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n (percentageReduced || 0)) | number:\n '1.0-2' }}</span> -->\n </ng-container>\n </div>\n <button class=\"place-order-btn\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n *ngIf=\"cartType === 'SHOPPING'\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\n Shopping'}}</button>\n <button class=\"place-order-btn mt-0\" (click)=\"edit ? '' : proceedToCheckout()\" simpoButtonDirective\n *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\n Cart'}}</button>\n <button class=\"place-order-btn mt-0\" simpoButtonDirective *ngIf=\"cartType === 'TRIAL'\"\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\" (click)=\"bookAppointment()\">BOOK\n APPOINTMENT</button>\n\n </div>\n </div>\n <!-- <ng-container *ngIf=\"recommededData?.length\">\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\"\n [responseData]=\"recommededData\"></simpo-featured-products>\n </ng-container> -->\n</ng-template>\n<ng-template #CHECKOUTPAGE>\n <div class=\"checkout-left-panel\">\n <div class=\"checkout-main-content\">\n <!-- <div class=\"delivery-options\">\n <div class=\"delivery-option active\">\n <div class=\"delivery-icon\"></div>\n HOME DELIVERY\n </div>\n <div class=\"delivery-option\">\n <div class=\"delivery-icon\"></div>\n STORE PICK-UP\n </div>\n </div> -->\n\n <div class=\"section-title\">Shipping Address</div>\n\n <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\n <div class=\"address-info\">\n <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\n <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\n {{defaultAddress?.stateName}}</div>\n <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\n </div>\n </div>\n\n <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\n <mat-icon>add</mat-icon>\n </div>\n\n <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\n\n <button class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective\n *ngIf=\"defaultAddress && !placeOrderLoader\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">\n Place Order\n </button>\n <button class=\"btn w-100 mt-1 payment-btn\" simpoButtonDirective *ngIf=\"defaultAddress && placeOrderLoader\"\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\">\n Loading...\n </button>\n\n </div>\n </div>\n\n <div class=\"checkout-right-panel\">\n <div class=\"order-summary\">\n <div class=\"summary-title\">Order Summary</div>\n\n <div class=\"checkout-product\">\n <div class=\"product-item\" *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\n <img [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\n alt=\"\">\n <div class=\"product-details\">\n <div class=\"product-name\">{{item.itemName}}</div>\n <div class=\"product-quantity\">Quantity: {{item.quantity}}</div>\n <div class=\"product-price\">\u20B9{{(item.sellingPrice * item.quantity) | number: '1.0-2'}}</div>\n </div>\n </div>\n\n </div>\n\n <div class=\"price-breakdown\">\n <div class=\"price-row\">\n <span>Total Price</span>\n <span>\u20B9{{(responseData?.billdetails?.totalNetValue\n ?? 0) | number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row\">\n <span>Total Tax</span>\n <span>\u20B9{{((!responseData.billdetails?.couponId ?\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\n number:\n '1.0-2'}}</span>\n </div>\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\n <span class=\"summary-label\">Redeem Amount</span>\n <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\n '1.0-2'}}</span>\n </div>\n\n <div class=\"price-row discount\" *ngIf=\"responseData?.billdetails?.discountAmount && !isJewellery\">\n <span>Coupon Discount</span>\n <span>- \u20B9{{responseData?.billdetails?.discountAmount\n | number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row\"\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\n <span>Delivery Charge</span>\n <span>{{responseData.billdetails.deliveryCharges\n |\n number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row total\" *ngIf=\"cartType === 'SHOPPING'\">\n <span>TOTAL AMOUNT</span>\n <span *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{(responseData?.totalAmount ?? 0) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"isPointsRedeeming\">\u20B9{{(responseData?.totalAmount - (totalSavingAmt || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n (selectedVoucherAmount || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n (responseData?.totalAmount * (selectedVoucherPercentage / 100) || 0)) | number:\n '1.0-2' }}</span>\n </div>\n </div>\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #CARTITEM let-products=\"data\">\n <div class=\"cart-item\" *ngFor=\"let item of products\" [style.color]=\"fontColor\">\n <div class=\"item-left\">\n <div class=\"item-image\">\n <img class=\"item-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n (click)=\"goToProductDetails(item)\" style=\"cursor: pointer;\">\n </div>\n <div class=\"item-details\">\n <h3 class=\"item-title\">{{item.itemName}}</h3>\n <div class=\"item-subtitle\" *ngIf=\"item.itemVariant\">\n <span *ngFor=\"let varient of getKeys(item.itemVariant.properties); let last = last\">\n {{ item.itemVariant.properties[varient] | titlecase }}<span *ngIf=\"!last\">, </span>\n </span>\n </div>\n </div>\n </div>\n\n <div class=\"item-right\">\n <div class=\"quantity-control\" *ngIf=\"cartType === 'SHOPPING'\">\n <button class=\"qty-btn px-2\" (click)=\"decreaseQty(item)\" [disabled]=\"item.quantity === 1\">\n <mat-icon>remove</mat-icon>\n </button>\n <span class=\"qty-value px-3\">{{item.quantity}}</span>\n <button class=\"qty-btn px-2\" (click)=\"increaseQty(item)\">\n <mat-icon>add</mat-icon>\n </button>\n </div>\n\n <div class=\"item-price\">\n \u20B9{{item.sellingPrice | number: '1.0-2'}}\n </div>\n\n <div class=\"delete-btn-circle\" (click)=\"removeItem(item)\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trash-2\">\n <path d=\"M3 6h18\" />\n <path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\" />\n <path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\" />\n <line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\" />\n <line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\" />\n </svg>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #EMPTYITEM>\n <section class=\"empty-cart w-100 d-flex align-items-center justify-content-center\">\n <div class=\"empty-cart-container d-flex flex-column\">\n <div class=\"cart-image\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\" [appImageEditor]=\"edit || false\"\n [imageData]=\"data?.content?.image\" [sectionId]=\"data?.id\">\n </div>\n <div class=\"cart-text content-side\">\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\n <div class=\"d-flex justify-content-center\"\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\n </div>\n </ng-container>\n </div>\n <button class=\"place-order-btn mx-auto w-fit\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\n [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\n Shopping'}}</button>\n </div>\n </section>\n</ng-template>\n\n<ng-template #SCHEME_REDEMPTION>\n <div class=\"modal-body\">\n <div class=\"scheme-option\" *ngFor=\"let scheme of schemeList\" (click)=\"redeemScheme(scheme, false)\"\n [style.borderColor]=\"cartInfo.billdetails.orraSchemeCode ? styles?.background?.color : ''\">\n <label for=\"individual\" class=\"scheme-card\">\n <div class=\"scheme-info d-flex gap-1\">\n <div class=\"form-check-radio\">\n <input class=\"form-check-input-radio\" type=\"radio\" name=\"flexRadioDefault\" id=\"flexRadioDefault2\">\n </div>\n <div class=\"right-side\">\n <div class=\"scheme-name\">\n <div class=\"scheme-title\">Individual Investment Scheme</div>\n <div class=\"scheme-monthly\">\u20B98000/M</div>\n </div>\n <div class=\"scheme-details\">\n <span class=\"scheme-id\">GPP Id: {{scheme.GPPId}}</span>\n <!-- <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span> -->\n </div>\n <div class=\"scheme-amount\">\u20B9{{scheme.amount}}</div>\n </div>\n </div>\n </label>\n </div>\n <div class=\"reedem_error d-flex justify-content-center align-items-center\" *ngIf=\"showReedemError\">\n Please add more \u20B9{{vaildAmount}} to reedem this scheme\n </div>\n </div>\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.reedem-section{padding:10px 15px;border-radius:15px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px;font-weight:700;font-size:13px}.redeem-section-text{font-size:.9rem;font-weight:700}.form-check-input:checked{background-color:#28a745!important;border-color:#28a745!important}.form-check-input:focus{border-color:#28a745!important;outline:0;box-shadow:none!important}.close-btn{background:none;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.close-btn:hover{color:#374151}.select_matured_text{font-size:.8rem!important;margin-top:10px;color:#05aacf}.position-relative{position:relative}.cart-parent{display:flex;margin-top:15px}.left-panel{width:65%;padding-right:5rem;border-right:1px solid #E9E9E9}.timeline{cursor:pointer}.cart-items{background:#fff;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.cart-header{padding:16px 24px;border-bottom:1px solid #e2e8f0;background:#f8fafc}.cart-header h2{margin:0;font-size:18px;font-weight:500;color:#0f172a}.cart-item{display:flex!important;align-items:center;justify-content:space-between;border-bottom:1px solid #e2e8f0;gap:20px;padding:0 8px;transition:background .2s}.cart-item:hover{background:#fbfcfe}.item-left{display:flex;align-items:center;flex:1}.item-right{display:flex;align-items:center;padding:15px;gap:32px}.item-image img{width:64px;height:64px;border-radius:12px;object-fit:cover;border:1px solid #f1f5f9}.item-details{display:flex;flex-direction:column;gap:4px}.item-title{margin:0;font-size:15px;font-weight:600;color:#0f172a;line-height:1.4}.item-subtitle{font-size:13px;color:#64748b;font-weight:400}.quantity-control{display:flex;align-items:center;border:1.5px solid #e2e8f0;border-radius:7px;overflow:hidden;height:38px;background:#fff;width:fit-content}.qty-btn{width:38px;height:100%;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#475569;transition:all .2s ease}.qty-btn:hover{background:#f8fafc;color:#0f172a}.qty-btn mat-icon{font-size:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center}.qty-value{width:32px;height:100%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;color:#0f172a;border-left:1.5px solid #e2e8f0;border-right:1.5px solid #e2e8f0}.item-price{font-size:18px;font-weight:700;color:#0f172a;min-width:60px;text-align:right;letter-spacing:-.01em}.delete-btn-circle{width:36px;height:36px;border-radius:50%;border:1px solid #fee2e2;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#ef4444;transition:all .2s ease}.delete-btn-circle:hover{background:#fef2f2;border-color:#fecaca;transform:scale(1.05);color:#dc2626}.delete-btn-circle svg{width:18px;height:18px}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%;padding-left:5rem}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;min-height:120px}.lh-23{line-height:23px;margin-left:10px}.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;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.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;font-size:18px}.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}.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;height:calc(100vh - 170px)}.hover_effect{position:unset;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;width:100%;text-align:center}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.see-live-btn{white-space:nowrap!important}.left-panel{width:100%;padding-right:0rem}.right-panel{width:100%;z-index:1000;padding-left:0rem}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap;display:none}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}.coupons-listing-section{width:100vw!important}.checkoutPage{flex-direction:column}.checkout-left-panel,.checkout-right-panel{width:100%!important}}.mobile-fixed{color:#fff}.coupons-listing-section{height:100vh;padding-top:0;position:relative;width:390px;z-index:100;background:#d3d3d354}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px;position:relative;top:-3px;right:15px;cursor:pointer}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px;cursor:pointer}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}.box-shadow{box-shadow:#00000029 0 1px 4px}.main-content{border-radius:12px;padding:0 30px 30px;width:100%;overflow:scroll;height:calc(100vh - 150px)}.delivery-options{display:flex;gap:20px;margin-bottom:30px}.delivery-option{padding:12px 24px;border:2px solid #e0e0e0;border-radius:25px;background:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:500;transition:all .2s}.delivery-option.active{background:#f0e6ff;border-color:#8b5cf6;color:#7c3aed}.delivery-option:hover{border-color:silver}.delivery-icon{width:16px;height:16px;background:#8b5cf6;border-radius:3px}.section-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.shipping-info{border-radius:10px;padding:20px;margin-bottom:20px;border:1px solid rgb(238,232,255);box-shadow:#0000000a 0 4px 8px}.delivery-date{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.delivery-date-text{color:#666;font-weight:500}.change-date-btn{color:#e91e63;background:none;border:none;font-weight:600;cursor:pointer;text-transform:uppercase;font-size:12px;letter-spacing:.5px}.address-info{margin-bottom:15px}.address-name{font-weight:700;margin-bottom:8px;color:#000}.address-details{color:#666;margin-bottom:8px}.mobile-number{font-weight:700;color:#000;font-size:15px}.change-address-btn{font-size:1rem!important;font-weight:700!important;padding:6px;background:#fff;border:1px solid rgb(229,221,255);border-radius:8px;color:#000;cursor:pointer;transition:all .2s;box-shadow:#0000000a 0 4px 8px}.change-address-btn:hover{border-color:#8b5cf6;color:#8b5cf6}.billing-section{margin-top:40px}.billing-options{display:flex;flex-direction:column;gap:15px;margin-top:20px}.billing-option{display:flex;align-items:center;gap:12px;padding:15px;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s}.billing-option.active{background:#f0e6ff;border-color:#8b5cf6}.radio-btn{width:20px;height:20px;border:2px solid #e0e0e0;border-radius:50%;position:relative}.billing-option.active .radio-btn{border-color:#8b5cf6}.billing-option.active .radio-btn:after{content:\"\";width:10px;height:10px;background:#8b5cf6;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.order-summary{border-radius:12px;padding:25px;width:75%}.summary-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.product-item{display:flex;gap:15px;margin-bottom:20px;border-bottom:1px solid #f0f0f0;border-radius:7px;background:#fff;padding:15px}.product-item:last-of-type{border-bottom:none;margin-bottom:30px;padding-bottom:0}.product-image{max-width:110px;width:100%;height:100%;border-radius:8px}.product-details{flex:1}.product-name{font-weight:500;margin-bottom:4px;color:#2d3748;font-size:14px}.product-quantity{color:#666;font-size:12px;margin-bottom:8px}.product-price{font-weight:600;color:#2d3748}.delivery-info{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:#8b5cf6}.delivery-icon-small{width:12px;height:12px;background:#8b5cf6;border-radius:2px}.price-breakdown{border-top:1px solid #f0f0f0;padding-top:20px}.price-row{display:flex;justify-content:space-between;margin-bottom:12px;color:#666}.price-row.total{font-weight:600;color:#2d3748;font-size:16px;margin-top:15px;padding-top:15px;border-top:1px solid #f0f0f0}.discount{color:#22c55e!important}@media (max-width: 768px){.container{grid-template-columns:1fr;padding:15px;gap:20px}.main-content,.order-summary{padding:20px;width:100%}.delivery-options{flex-direction:column;gap:10px}}.checkout-left-panel{width:65%;display:flex;justify-content:center}.checkout-right-panel{width:35%;display:flex;justify-content:center;background-color:#f9f9fa}.checkout-product{max-height:50vh;overflow:scroll}.mt-1{margin-top:1rem!important}.payment-btn{box-shadow:#0000000a 0 4px 8px}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px;height:25vh!important;margin-bottom:20px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.change-pincode{display:flex;gap:10px}.change-pincode mat-icon{font-size:18px;align-items:center;justify-content:center;display:flex}.change-pincode span{font-size:14px}.fs-13{font-size:13px}.fs-12{font-size:12px}.fs-18{font-size:18px}.b-1-b{border-width:0px 1px;border-style:solid;border-color:#000}.container{max-width:unset;padding:24px;display:flex;gap:24px;width:100%!important}.main-content{background:#fff;border-radius:12px;width:70%}.promo-banner{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;border-radius:8px;border:1px solid #e2e8f0}.promo-text h3{font-size:16px!important;font-weight:500;margin-bottom:4px}.promo-text p{font-size:.9rem!important;margin-bottom:0!important;color:#64748b}.see-live-btn{background:#fff;border:1px solid #e2e8f0;font-weight:600;color:#000;padding:8px 16px;border-radius:8px;font-size:12px!important;cursor:pointer;display:flex;align-items:center;gap:8px;width:max-content!important;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.see-live-btn:hover{background:#f8fafc;border-color:#cbd5e1;transform:translateY(-1px)}.see-live-btn svg{color:#6366f1}.cart-item{display:flex;gap:16px;position:relative}.cart-item:last-child{border-bottom:none}.item-image{width:15%;height:100px;border-radius:8px;object-fit:cover;display:flex;align-items:center;justify-content:center}.item-details{flex:1}.item-title{font-weight:500;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px}.current-price{font-size:1rem;font-weight:600}.original-price{font-size:1rem;text-decoration:line-through}.discount{background:#fef3c7;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-code{font-size:12px;color:#9ca3af;margin-bottom:8px}.item-options{display:flex;gap:16px;font-size:14px;color:#6b7280;margin-bottom:12px}.delivery-info{font-size:12px;color:#8b5cf6}.pickup-info{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:5px 15px;margin-top:12px;display:flex;align-items:center;cursor:pointer;width:max-content;gap:20px}.pickup-text{font-size:.9rem;color:#374151}.remove-btn{position:absolute;top:16px;right:0;width:20px!important;height:20px;background:#000;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px!important}.sidebar{display:flex;flex-direction:column;gap:16px;width:32%}.coupon-section{border-radius:8px;padding:10px 15px;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s ease}.coupon-section:hover{border-color:#cbd5e1;background-color:#f8fafc}.chevron-icon{color:#94a3b8;transition:transform .2s ease}.coupon-section:hover .chevron-icon{transform:translate(2px);color:#64748b}.scheme-section{border-radius:12px;padding:10px 15px;cursor:pointer}.coupon-left{display:flex;align-items:center;gap:12px}.coupon-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center}.coupon-icon mat-icon{font-size:17px;width:17px!important;height:19px!important}.coupon-text{font-weight:700;font-size:.9rem}.delivery-section{background:#fff;border-radius:12px;padding:10px 15px;box-shadow:#b2b2ca80 2px 2px 6px;background:#f6f3f9}.delivery-header{display:flex;align-items:center;gap:12px;margin-bottom:4px}.delivery-header span{font-size:.9rem;font-weight:700}.delivery-header mat-icon{width:20px;height:20px;font-size:17px;position:relative;top:2px}.delivery-icon{width:20px;height:20px;background:#8b5cf6;border-radius:50%}.pincode{font-weight:600;color:#111827}.change-link{color:#ec4899;font-size:.9rem;text-decoration:none;margin-left:auto}.summary-section{background:#fff;border-radius:8px;padding:20px;border:1px solid #e2e8f0}.summary-title{font-size:16px;font-weight:700;color:#0f172a;margin-bottom:20px;letter-spacing:-.01em}.summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.summary-row:last-child{margin-bottom:0}.summary-label{font-size:14px;font-weight:400;color:#64748b}.summary-value{font-size:14px;font-weight:500;color:#0f172a}.summary-divider{height:1px;background:#f1f5f9;margin:16px 0;width:100%}.total-row .summary-label{font-size:16px;font-weight:600;color:#0f172a}.total-row .summary-value{font-size:16px;font-weight:700;color:#0f172a}.total-row{border-top:1px solid #e2e8f0;padding-top:15px;margin-top:15px}.total-label{font-weight:600;font-size:16px}.total-value{font-weight:700;font-size:18px}.place-order-btn{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;border:none;border-radius:12px;padding:9px 10px;font-size:.9rem!important;font-weight:600;cursor:pointer;margin-top:10px;text-transform:uppercase}.place-order-btn:hover{opacity:.9}.chain-icon,.earring-icon{width:60px;height:60px;filter:sepia(1) hue-rotate(30deg) saturate(2)}.item-img{width:100%;height:100%;object-fit:cover}.mt-0{margin-top:0!important}select{outline:none;border-radius:5px;padding:2px;width:20%;border:none;box-shadow:#9999994d 2px 2px 6px;cursor:pointer}.cart-tab-parent{display:flex;justify-content:center}.cart-tabs{gap:10px;display:flex;justify-content:center;align-items:center;width:max-content;border-radius:8px;border:1px solid #e2e8f0}.cart-tabs div{padding:7px 10px;cursor:pointer;font-size:14px}.selected-cart-tab{margin:6px;background:#f1f5f9;border-radius:5px;color:#000!important;font-weight:500}.checkout-main-content{width:50%;padding:30px;border-radius:12px}@media screen and (max-width: 475px){.main-content{padding:0;height:auto!important}.cart-item{flex-direction:column!important;align-items:flex-start!important;padding:16px 12px!important;gap:16px!important}.item-left{width:100%!important;gap:16px!important;align-items:flex-start!important}.item-image{width:86px!important;height:86px!important;flex-shrink:0!important}.item-right{width:100%!important;justify-content:space-between!important;padding:0!important;gap:12px!important;margin-top:4px!important}.item-price{flex:1!important;text-align:right!important;margin-right:8px!important;font-size:16px!important}.item-title{font-size:14px!important;-webkit-line-clamp:2!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}.quantity-control{height:34px!important}.qty-btn{width:34px!important}.qty-value{width:28px!important;font-size:13px!important}.no-items{height:86vh;overflow:hidden;margin:0}.checkout-main-content{width:100%}.container{padding:0!important}.pickup-info{display:none}.container{display:flex;flex-direction:column}.promo-banner{gap:10px}select{width:50%}.main-content,.sidebar{width:100%}.vouchers-listing-section{min-width:unset!important;width:100vw!important}.separator{display:none!important}.coupon-meta{display:grid!important;grid-template-columns:1fr 1fr!important}}.group_invest{color:#000;font-size:.8rem}.reedem_error{color:red}.group_invest span{color:#05aacf}.redeem_amount{padding:2%;border-radius:4px;background:#fff;margin-top:2%;color:#000;font-size:.8rem}.redeem_amount span{color:#0dc577}.w-fit{width:fit-content!important}.modal-body{padding-bottom:0;overflow-y:scroll;max-height:300px;padding:0!important}.scheme-option{margin-bottom:16px}.scheme-option input[type=radio]:checked+.scheme-card{border-color:#06b6d4;background:#f0f9ff;position:relative}.scheme-option input[type=radio]:checked+.scheme-card:before{content:\"\";position:absolute;top:20px;left:20px;width:20px;height:20px;border:2px solid #06b6d4;border-radius:50%;background:#fff}.scheme-option input[type=radio]:checked+.scheme-card:after{content:\"\";position:absolute;top:26px;left:26px;width:8px;height:8px;background:#06b6d4;border-radius:50%}.scheme-card{justify-content:space-between;padding:10px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;width:100%}.scheme-card:hover{border-color:#d1d5db;background:#f9fafb}.form-check-radio{width:10%}.scheme-title{font-size:12px;font-weight:600;color:#111827;margin-bottom:8px}.scheme-details{display:flex;gap:25px;margin-bottom:20px}.scheme-name{display:flex;justify-content:space-between}.scheme-details span{font-size:12px;color:#0000004d}.scheme-monthly{font-size:14px;font-weight:600;color:#111827;min-width:100px;text-align:right}.right-side{width:90%}.scheme-amount{font-weight:700}@media screen and (min-width: 700px){.cart-items{max-height:500px;overflow:scroll}}.add-to-cart-parent{width:max-content;border:1px solid #000000;border-radius:8px}.cursor{cursor:pointer}.cart-text{max-width:600px;margin:0 auto;text-align:center}.cart-text div{word-break:break-word;overflow-wrap:break-word;white-space:normal}.switch{position:relative;display:inline-block;width:45px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:34px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:3px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#4caf50}input:checked+.slider:before{transform:translate(24px)}.vouchers-listing-section{position:relative;width:fit-content;min-width:500px;z-index:100;background:#fff;height:100vh}.vouchers-listing-section .coupon-heading{border-bottom:1px solid #eee}.vouchers-listing-section .coupon-listing{padding:12px 16px;overflow-y:auto;height:calc(97vh - 100px)}.voucher-details{background:#fff;border-radius:12px;padding:14px;box-shadow:0 1px 4px #00000042}.voucher-details .coupon-brief .apply-offer-btn{background:#111;color:#fff;border-radius:10px;padding:6px 16px}.voucher-details .coupon-code-box{border:1.5px dashed #bbb;border-radius:8px;padding:8px 12px;margin-bottom:10px}.voucher-details .coupon-code-box .code-label{font-size:11px;color:#888;margin-bottom:2px}.voucher-details .coupon-code-box .code-row .code-value{font-weight:700;font-size:15px;letter-spacing:1px}.voucher-details .coupon-meta .clock-icon{font-size:14px;height:14px;width:14px;vertical-align:middle}.applied-coupon-card{background:#f0fff8;border-radius:12px;padding:12px 16px}.applied-coupon-card .applied-coupon-left .success-check{color:#22c55e;font-size:22px}.applied-coupon-card .applied-coupon-left .applied-coupon-code{font-weight:700;font-size:14px}.applied-coupon-card .applied-coupon-left .applied-coupon-saving{font-size:13px;color:#097d5f;margin-top:2px}.active-type{background:#111!important;color:#fff!important}.redemption-type{text-align:center;border-radius:10px;padding:6px 16px;background:#d3d3d36b;width:-webkit-fill-available!important}.wallte_icon{background:#000;border-radius:50px;padding:5px 9px 7px}.wallte_icon img{width:18px;height:18px}.fw-600{font-weight:600}.coupon-type{width:fit-content!important;border-radius:26px!important;background:transparent!important;border:1px solid #afafaf;color:#393838;text-align:center;padding:6px 16px}.active-coupon{background:transparent!important;border:2px solid black!important;color:#000!important}.my-close-btn{position:absolute!important;top:10px!important;right:10px!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { 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", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "directive", type:
|
|
10560
10502
|
//DIRECTIVE
|
|
10561
|
-
ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { 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: i8$3.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId", "itemIndex"] }
|
|
10503
|
+
ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { 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: i8$3.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId", "itemIndex"] }] }); }
|
|
10562
10504
|
}
|
|
10563
10505
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CartComponent, decorators: [{
|
|
10564
10506
|
type: Component,
|
|
@@ -10586,7 +10528,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
10586
10528
|
ColorDirective,
|
|
10587
10529
|
FeaturedProductsComponent,
|
|
10588
10530
|
MatSpinner
|
|
10589
|
-
], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n <ng-container *ngIf=\"data\">\n <section [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\"\n [attr.class]=\"isMobile ? 'py-5 position-relative' : 'position-relative'\" simpoHover\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\n [ngClass]=\"!responseData?.orderedItems?.length ? 'no-items' : ''\">\n <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\"\n [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\"\n *ngIf=\"responseData?.orderedItems?.length && currentTab === 'ADDRESS'\">\n <span class=\"timeline\" (click)=\"currentTab = 'BAG'\">Bag</span>\n <div class=\"bar\"></div>\n <span class=\"timeline isActive\">Address</span>\n <div class=\"bar\"></div>\n <span class=\"timeline\" style=\"cursor: auto;\">Payment</span>\n </div>\n <div class=\"cart-tab-parent w-100\" *ngIf=\"currentTab == 'BAG' && ecomConfigs?.appointmentBookingEnabled\">\n <!-- && ecomConfigs?.appointmentBookingEnabled\" -->\n <div class=\"cart-tabs\" [id]=\"data?.id\">\n <div class=\"selected-cart-tab\" [ngClass]=\"{'selected-cart-tab': cartType==='SHOPPING'}\"\n (click)=\"cartType='SHOPPING'\">Shopping Cart ({{responseData?.orderedItems?.length ?? 0}})</div>\n <div [ngClass]=\"{'selected-cart-tab': cartType==='TRIAL'}\" (click)=\"cartType='TRIAL'\">Trial Cart\n ({{trialCartItem?.length ?? 0}})</div>\n </div>\n </div>\n <div class=\"cart-parent\" [spacingHorizontal]=\"stylesLayout\" *ngIf=\"currentTab === 'BAG'\" [id]=\"data?.id\"\n [simpoAnimation]=\"styles?.animation\">\n <ng-container>\n <ng-container *ngIf=\"cartType === 'SHOPPING'\">\n <ng-container\n *ngTemplateOutlet=\"(responseData?.orderedItems?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"cartType === 'TRIAL'\">\n <ng-container *ngTemplateOutlet=\"(trialCartItem?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"d-flex checkoutPage\"\n *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && currentTab === 'ADDRESS'\">\n <ng-container *ngTemplateOutlet=\"CHECKOUTPAGE\">\n </ng-container>\n </div>\n\n\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\n [isEcommerce]=\"true\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n\n </section>\n </ng-container>\n <ng-container *ngIf=\"!data\">\n <section class=\"cart-window\">\n <div class=\"heading-large lh-2 mb-3 header-sec\">\n <div class=\"d-flex align-items-center\">\n <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\n <span>Your Cart</span>\n </div>\n <div class=\"saving\"></div>\n </div>\n <div class=\"offers\">\n <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\n <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\n <span>Avail Offers / Coupons</span>\n </div>\n <mat-icon>keyboard_arrow_right</mat-icon>\n </div>\n <div class=\"small-items\">\n <ng-container *ngFor=\"let item of responseData?.orderedItems\">\n <div class=\"small-item\">\n <div class=\"d-flex\" style=\"gap: 5px;\">\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n class=\"small-product-img\"\n [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n (click)=\"goToProductDetails(item)\">\n </div>\n <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\n <div class=\"small-item-quantity\">\n <span class=\"cursor\">-</span>\n <span>{{item.quantity}}</span>\n <span class=\"cursor\">+</span>\n </div>\n <div class=\"small-item-price\">\n <div class=\"price-with-tax\">\n <span [innerHTML]='currency'></span> {{(item.sellingPrice) | number: '1.0-2'}}\n </div>\n <!-- <div class=\"price-with-tax\">\n <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\n </div> -->\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"fotter-sec\">\n <div class=\"delivery-add d-flex\">\n <mat-icon>home</mat-icon>\n <div class=\"address\">Tetsting</div>\n </div>\n <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span\n style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span>\n {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\n </div>\n </section>\n </ng-container>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '40vh',\n 'border-radius': '10px',\n 'position': 'relative',\n 'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n<ng-template #CouponList>\n <section class=\"coupons-listing-section\">\n <div class=\"coupon-heading\">\n <div class=\"back-btn\" (click)=\"closeDialogRef()\">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </div>\n <div class=\"header-text\">Apply Coupon</div>\n </div>\n <!-- <div class=\"coupon-search-sec\">\n <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\n <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\n </div> -->\n <div class=\"coupon-listing\">\n <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\n <div class=\"coupon-details\"\n [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\"\n *ngIf=\"couponDetails?.status\">\n <div class=\"details__coupon-heading\">\n <div class=\"coupon-brief\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name\" [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\n {{ couponDetails.couponCode | uppercase }}</div>\n <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn\" [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\"\n (click)=\"applyCoupon(couponDetails)\">Apply</div>\n </div>\n </div>\n <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\n <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\n <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\n </div> -->\n </div>\n <ng-container>\n <!-- *ngIf=\"couponDetails.status\" -->\n <div class=\"details-divider\"></div>\n <ul class=\"details__coupon-terms\">\n <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\n </ul>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Coupon Available</div>\n <div class=\"empty-screen__secondary-text\">\n Looks like there are no coupons at the moment\n </div>\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\n </div>\n </ng-template>\n </div>\n </section>\n</ng-template>\n\n<ng-template #RedemptionVouchers>\n <section class=\"vouchers-listing-section d-flex flex-column\">\n <div class=\"coupon-heading d-flex align-items-center gap-2 p-3 fs-18 fw-600 border-bottom\">\n <div class=\"back-btn cursor-pointer d-flex align-items-center\" (click)=\"closeDialogRef()\">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </div>\n <div class=\"header-text\">Coupons & Vouchers</div>\n </div>\n\n <!-- <div class=\"d-flex align-items-center tab-container justify-content-between gap-2 p-3\">\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'COUPONS'}\"\n (click)=\"redemptionType = 'COUPONS'\">\n Coupons\n </div>\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'VOUCHERS'}\"\n (click)=\"redemptionType = 'VOUCHERS'\">\n Vouchers\n </div>\n </div> -->\n\n <div class=\"coupon-listing d-flex flex-column gap-3 pt-3\" *ngIf=\"redemptionType === 'COUPONS'\">\n <div class=\"d-flex align-items-center tab-container gap-3\">\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'REWARDS'}\" (click)=\"redemptionCouponType = 'REWARDS'\">\n Rewards\n </div>\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'DISCOUNTS'}\"\n (click)=\"redemptionCouponType = 'DISCOUNTS'\">\n Discounts\n </div>\n </div>\n <ng-container *ngIf=\"redemptionCouponType === 'REWARDS'\">\n <ng-container *ngIf=\"(listRedemptionCoupons?.vouchers?.length > 0) ; else showEmptyScreen\">\n <ng-container *ngFor=\"let voucher of listRedemptionCoupons?.vouchers; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%'\n }}\n off on your payment\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">\n Apply</div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\n <span class=\"separator text-secondary\">|</span>\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\n </span>\n <span class=\"separator text-secondary\" *ngIf=\"voucher.maxRedeemableAmount\">|</span>\n <span class=\"min-order\" *ngIf=\"voucher.maxRedeemableAmount\">Max Redeemable Amount: \u20B9{{\n voucher.maxRedeemableAmount | number }}</span>\n </div>\n\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"redemptionCouponType === 'DISCOUNTS'\">\n <ng-container *ngIf=\"(couponList.length > 0); else showEmptyDiscounts\">\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"couponDetails?.status\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\"\n [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\n {{ couponDetails.couponCode | uppercase }}\n </div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n {{ couponDetails.discountDescription | titlecase }}\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\"\n [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : 'not-allowed'}\"\n (click)=\"applyCoupon(couponDetails)\">\n Apply\n </div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ couponDetails.couponCode | uppercase }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}\n </span>\n </div>\n\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-template #showEmptyDiscounts>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Discount Coupons Available</div>\n <div class=\"empty-screen__secondary-text\">\n Looks like there are no discount coupons at the moment\n </div>\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\n </div>\n </ng-template>\n\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Coupons Available</div>\n <div class=\"empty-screen__secondary-text\">Looks like there are no coupons</div>\n </div>\n </ng-template>\n </div>\n\n <div class=\"coupon-listing d-flex flex-column gap-3\" *ngIf=\"redemptionType === 'VOUCHERS'\">\n <ng-container *ngIf=\"listRedemptionVouchers?.vouchers?.length > 0; else showEmptyScreen\">\n <ng-container *ngFor=\"let voucher of listRedemptionVouchers?.vouchers; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%' }}\n off on your payment\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">Apply\n </div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\n <span class=\"separator text-secondary\">|</span>\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\n </span>\n </div>\n\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\n </div>\n </ng-container>\n </ng-container>\n\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Vouchers Available</div>\n <div class=\"empty-screen__secondary-text\">Looks like there are no vouchers</div>\n </div>\n </ng-template>\n </div>\n </section>\n</ng-template>\n\n<ng-template #CARTPAGE>\n <div class=\"container\">\n <div class=\"main-content\">\n <div class=\"cart-items\">\n <div class=\"cart-header\">\n <h2>Your Cart</h2>\n </div>\n <ng-container\n *ngTemplateOutlet=\"CARTITEM;context:{data: cartType === 'SHOPPING' ? responseData?.orderedItems : trialCartItem}\"></ng-container>\n </div>\n </div>\n\n <div class=\"sidebar\">\n <div class=\"reedem-section d-flex flex-column align-items-center\" *ngIf=\"cartType != 'TRIAL' && getUrl()\">\n <div class=\"justify-content-between d-flex align-items-center w-100 redeem-section-text\">Redeem Section Amount\n <div class=\"toogle-switch\">\n <div class=\"form-check form-switch\">\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" role=\"switch\" id=\"flexSwitchCheckChecked\"\n [checked]=\"selectMatureScheme\" (change)=\"onToggleChange()\">\n </div>\n </div>\n </div>\n <!-- <div class=\"select_matured_text w-100 text-start cursor-pointer\"\n *ngIf=\"selectMatureScheme && !selectedRedemption\" (click)=\"selectScheme()\">\n Select Matured Scheme\n </div> -->\n <!-- <div class=\"select_matured_text d-flex flex-column gap-2 w-100 text-start cursor-pointer\"\n *ngIf=\"selectedRedemption\">\n Selected Scheme\n <div class=\"d-flex w-100 justify-content-between align-items-center group_invest\">Group Investment\n scheme-5000/M <span>Change</span></div>\n <div class=\"d-flex justify-content-between align-items-center w-100 redeem_amount\">Redeemable Amount\n <span>\u20B9{{selectedRedmpationData.selectedAmount}}</span>\n </div>\n </div> -->\n </div>\n <div class=\"scheme-section\" *ngIf=\"selectMatureScheme\">\n <ng-container *ngTemplateOutlet=\"SCHEME_REDEMPTION\"></ng-container>\n </div>\n <div class=\"coupon-section\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && !referEarnExist\">\n <div class=\"coupon-left\">\n <div class=\"coupon-icon\"><mat-icon>percent</mat-icon></div>\n <span class=\"coupon-text\" *ngIf=\"!responseData.billdetails?.couponId\">Apply\n Coupon</span>\n <span class=\"coupon-text\" *ngIf=\"responseData.billdetails?.couponId\">Coupon\n Applied</span>\n </div>\n <svg *ngIf=\"!responseData.billdetails?.couponId\" xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" class=\"chevron-icon\" (click)=\"openDialog(CouponList)\">\n <path d=\"m9 18 6-6-6-6\" />\n </svg>\n <span *ngIf=\"responseData.billdetails?.couponId\"\n (click)=\"removeCoupon($event)\"><mat-icon>close</mat-icon></span>\n </div>\n\n <div class=\"promo-banner mb-3\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && ecomConfigs?.videoCallEnabled\">\n <div class=\"promo-text\">\n <h3>See It Before You Buy It</h3>\n <p>Experience our designs in detail via video call</p>\n </div>\n <button class=\"see-live-btn\" (click)=\"scheduleVideoCall(responseData?.orderedItems)\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"lucide lucide-video\">\n <path d=\"m22 8-6 4 6 4V8Z\" />\n <rect width=\"14\" height=\"12\" x=\"2\" y=\"6\" rx=\"2\" ry=\"2\" />\n </svg>\n SEE IT LIVE\n </button>\n </div>\n\n <div class=\"plan-details-container p-3 rounded-4 bg-white text-dark voucher-details\"\n *ngIf=\"referEarnExist && this?.redemptionPoints?.availablePoints > 0\">\n <div class=\"fs-14 fw-500\">\n Rewards Available\n </div>\n <div class=\"d-flex justify-content-between align-items-start border-bottom pb-2\">\n <div class=\"avb_pts mt-2 mb-2\">\n <span class=\"fs-16 fw-500 total_points text-secondary\">\n <span class=\" fs-18 fw-600 text-dark\">{{(this?.redemptionPoints?.availablePoints || 0).toFixed(2)}}</span>\n pts\n </span>\n <div class=\"total_value fs-12 text-secondary\">\n = max \u20B9{{(this?.redemptionPoints?.pointsConvertedRupees || 0).toFixed(2)}} discount\n </div>\n </div>\n <div class=\"wallte_icon\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/777779c1775200561187wallet_(1).png\" alt=\"\">\n </div>\n </div>\n <div class=\"d-flex justify-content-between align-items-center mt-3\">\n <div class=\"redemable_text\">\n <div class=\"title_text\">\n <div class=\"fs-14 fw-500\">\n Redeem Points\n </div>\n <div class=\"fs-13 fs-400\">\n Use your points for discount\n </div>\n </div>\n </div>\n <div class=\"toggle_btn\">\n <label class=\"switch\">\n <input type=\"checkbox\" id=\"toggleSwitch\" [checked]=\"isPointsRedeeming\"\n (click)=\"onPointsRedeemingChange($event)\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n </div>\n <div class=\"mt-3 success_selected w-100 applied-coupon-card\" *ngIf=\"isPointsRedeeming\">\n <div class=\"d-flex align-items-start gap-2\">\n <div class=\"success_icon\">\n <mat-icon class=\"d-flex justify-content-center align-items-center text-success\">check_circle</mat-icon>\n </div>\n <div class=\"success_text\">\n <div class=\"fs-13 fw-500\">\n You're saving \u20B9\n {{totalSavingAmt || 0}}\n </div>\n <div class=\"fs-12 fs-400 text-success\">\n {{totalSavingPoints}} points remaining after redemption\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Existing coupon row (keep as-is) -->\n <div class=\"coupon-section d-flex flex-column voucher-details\" [id]=\"data?.id\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist\">\n <div class=\"d-flex justify-content-between align-items-center w-100\">\n <div class=\"coupon-left\">\n Apply Coupon\n </div>\n <div (click)=\"addRedemptionCoupon(RedemptionVouchers)\">View All</div>\n </div>\n\n <!-- Applied Coupon Success Banner -->\n <div class=\"applied-coupon-card w-100 mt-3 d-flex align-items-center justify-content-between\"\n *ngIf=\"selectedVoucherId\">\n <div class=\"applied-coupon-left d-flex align-items-center gap-3\">\n <mat-icon class=\"success-check\">check_circle</mat-icon>\n <div class=\"applied-coupon-info\">\n <div class=\"applied-coupon-code\">Coupon {{ selectedVoucherCode }} applied!</div>\n <div class=\"applied-coupon-saving\">You're saving\n <span *ngIf=\"this.couponValueType === 'AMOUNT'\">\u20B9 {{selectedVoucherAmount || 0}}</span>\n <span *ngIf=\"this.couponValueType === 'PERCENTAGE'\"> {{selectedVoucherPercentage || 0}}%</span>\n </div>\n\n </div>\n </div>\n <div class=\"remove-coupon-btn fs-14 fw-500 text-secondary cursor-pointer\"\n (click)=\"removeRedemptionCoupon($event)\">Remove</div>\n </div>\n </div>\n\n <div class=\"delivery-section\" *ngIf=\"getUrl()\">\n <div class=\"delivery-header\">\n <mat-icon>gps_fixed</mat-icon>\n <span *ngIf=\"cartType === 'SHOPPING'\">Delivering to</span>\n <span *ngIf=\"cartType === 'TRIAL'\">Trial Location at</span>\n <span class=\"pincode\">{{pincode}}</span>\n <!-- <a class=\"change-link\">Change Pincode</a> -->\n </div>\n </div>\n\n <div class=\"summary-section\">\n <div class=\"summary-title\">Summary</div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Subtotal</span>\n <span class=\"summary-value\">\u20B9{{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && referEarnExist && isPointsRedeeming\">\n <span class=\"summary-label\">Points Redeemed</span>\n <span class=\"summary-value\">- \u20B9{{ totalSavingAmt || 0 }}</span>\n </div>\n\n <div class=\"summary-row\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'AMOUNT' && appliedVoucher)\">\n <span class=\"summary-label\">Voucher Applied</span>\n <span class=\"summary-value\">- \u20B9{{ selectedVoucherAmount || 0 }}</span>\n </div>\n\n <div class=\"summary-row\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'PERCENTAGE' && appliedVoucher)\">\n <span class=\"summary-label\">Voucher Applied</span>\n <span class=\"summary-value\">- \u20B9{{ percentageReduced || 0 }}</span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.discountAmount\">\n <span class=\"summary-label\">Discount Amount</span>\n <span class=\"summary-value\">\n {{('\u20B9' + (responseData?.billdetails?.discountAmount | number: '1.0-2')) }}\n </span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Shipping</span>\n <span class=\"summary-value\"\n [ngClass]=\"{'savings': !responseData?.billdetails?.deliveryCharges || responseData.billdetails.deliveryCharges <= 0}\">\n {{ (responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0) ? ('\u20B9' +\n (responseData.billdetails.deliveryCharges | number: '1.0-2')) : 'Free' }}\n </span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Estimated Tax</span>\n <span class=\"summary-value\">\u20B9{{((!responseData.billdetails?.couponId ?\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\n number: '1.0-2'}}</span>\n </div>\n\n <div class=\"summary-row total-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Total</span>\n <!-- <span class=\"summary-value\">\u20B9{{ responseData?.totalAmount | number: '1.0-2' }}</span> -->\n <span class=\"total-value\" *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{ responseData?.totalAmount |\n number: '1.0-2' }}</span>\n\n <span class=\"total-value\" *ngIf=\"isPointsRedeeming\">\u20B9{{ (responseData?.totalAmount - (totalSavingAmt || 0)) |\n number: '1.0-2' }}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n (selectedVoucherAmount || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n (percentageReduced || 0)) | number:\n '1.0-2' }}</span>\n </div>\n\n <!-- Trial Cart Summary -->\n <ng-container *ngIf=\"cartType === 'TRIAL'\">\n <div class=\"summary-row\">\n <span class=\"summary-label\">Free Trial</span>\n <span class=\"summary-value\">\u20B90</span>\n </div>\n <div class=\"summary-row\">\n <span class=\"summary-label\">Service Charge</span>\n <span class=\"summary-value savings\">Free</span>\n </div>\n <div class=\"summary-divider\"></div>\n <div class=\"summary-row total-row\">\n <span class=\"summary-label\">Total</span>\n <span class=\"summary-value\">\u20B90</span>\n </div>\n <!-- <span class=\"total-value\" *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{ responseData?.totalAmount |\n number: '1.0-2' }}</span>\n\n <span class=\"total-value\" *ngIf=\"isPointsRedeeming\">\u20B9{{ (responseData?.totalAmount - (totalSavingAmt || 0)) |\n number: '1.0-2' }}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n (selectedVoucherAmount || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n (percentageReduced || 0)) | number:\n '1.0-2' }}</span> -->\n </ng-container>\n </div>\n <button class=\"place-order-btn\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n *ngIf=\"cartType === 'SHOPPING'\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\n Shopping'}}</button>\n <button class=\"place-order-btn mt-0\" (click)=\"edit ? '' : proceedToCheckout()\" simpoButtonDirective\n *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\n Cart'}}</button>\n <button class=\"place-order-btn mt-0\" simpoButtonDirective *ngIf=\"cartType === 'TRIAL'\"\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\" (click)=\"bookAppointment()\">BOOK\n APPOINTMENT</button>\n\n </div>\n </div>\n <ng-container *ngIf=\"recommededData?.length\">\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\"\n [responseData]=\"recommededData\"></simpo-featured-products>\n </ng-container>\n</ng-template>\n<ng-template #CHECKOUTPAGE>\n <div class=\"checkout-left-panel\">\n <div class=\"checkout-main-content\">\n <!-- <div class=\"delivery-options\">\n <div class=\"delivery-option active\">\n <div class=\"delivery-icon\"></div>\n HOME DELIVERY\n </div>\n <div class=\"delivery-option\">\n <div class=\"delivery-icon\"></div>\n STORE PICK-UP\n </div>\n </div> -->\n\n <div class=\"section-title\">Shipping Address</div>\n\n <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\n <div class=\"address-info\">\n <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\n <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\n {{defaultAddress?.stateName}}</div>\n <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\n </div>\n </div>\n\n <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\n <mat-icon>add</mat-icon>\n </div>\n\n <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\n\n <button class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective\n *ngIf=\"defaultAddress && !placeOrderLoader\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">\n Place Order\n </button>\n <button class=\"btn w-100 mt-1 payment-btn\" simpoButtonDirective *ngIf=\"defaultAddress && placeOrderLoader\"\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\">\n Loading...\n </button>\n\n </div>\n </div>\n\n <div class=\"checkout-right-panel\">\n <div class=\"order-summary\">\n <div class=\"summary-title\">Order Summary</div>\n\n <div class=\"checkout-product\">\n <div class=\"product-item\" *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\n <img [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\n alt=\"\">\n <div class=\"product-details\">\n <div class=\"product-name\">{{item.itemName}}</div>\n <div class=\"product-quantity\">Quantity: {{item.quantity}}</div>\n <div class=\"product-price\">\u20B9{{(item.sellingPrice * item.quantity) | number: '1.0-2'}}</div>\n </div>\n </div>\n\n </div>\n\n <div class=\"price-breakdown\">\n <div class=\"price-row\">\n <span>Total Price</span>\n <span>\u20B9{{(responseData?.billdetails?.totalNetValue\n ?? 0) | number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row\">\n <span>Total Tax</span>\n <span>\u20B9{{((!responseData.billdetails?.couponId ?\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\n number:\n '1.0-2'}}</span>\n </div>\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\n <span class=\"summary-label\">Redeem Amount</span>\n <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\n '1.0-2'}}</span>\n </div>\n\n <div class=\"price-row discount\" *ngIf=\"responseData?.billdetails?.discountAmount && !isJewellery\">\n <span>Coupon Discount</span>\n <span>- \u20B9{{responseData?.billdetails?.discountAmount\n | number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row\"\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\n <span>Delivery Charge</span>\n <span>{{responseData.billdetails.deliveryCharges\n |\n number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row total\" *ngIf=\"cartType === 'SHOPPING'\">\n <span>TOTAL AMOUNT</span>\n <span *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{(responseData?.totalAmount ?? 0) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"isPointsRedeeming\">\u20B9{{(responseData?.totalAmount - (totalSavingAmt || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n (selectedVoucherAmount || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n (responseData?.totalAmount * (selectedVoucherPercentage / 100) || 0)) | number:\n '1.0-2' }}</span>\n </div>\n </div>\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #CARTITEM let-products=\"data\">\n <div class=\"cart-item\" *ngFor=\"let item of products\" [style.color]=\"fontColor\">\n <div class=\"item-left\">\n <div class=\"item-image\">\n <img class=\"item-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n (click)=\"goToProductDetails(item)\" style=\"cursor: pointer;\">\n </div>\n <div class=\"item-details\">\n <h3 class=\"item-title\">{{item.itemName}}</h3>\n <div class=\"item-subtitle\" *ngIf=\"item.itemVariant\">\n <span *ngFor=\"let varient of getKeys(item.itemVariant.properties); let last = last\">\n {{ item.itemVariant.properties[varient] | titlecase }}<span *ngIf=\"!last\">, </span>\n </span>\n </div>\n </div>\n </div>\n\n <div class=\"item-right\">\n <div class=\"quantity-control\" *ngIf=\"cartType === 'SHOPPING'\">\n <button class=\"qty-btn px-2\" (click)=\"decreaseQty(item)\" [disabled]=\"item.quantity === 1\">\n <mat-icon>remove</mat-icon>\n </button>\n <span class=\"qty-value px-3\">{{item.quantity}}</span>\n <button class=\"qty-btn px-2\" (click)=\"increaseQty(item)\">\n <mat-icon>add</mat-icon>\n </button>\n </div>\n\n <div class=\"item-price\">\n \u20B9{{item.sellingPrice | number: '1.0-2'}}\n </div>\n\n <div class=\"delete-btn-circle\" (click)=\"removeItem(item)\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trash-2\">\n <path d=\"M3 6h18\" />\n <path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\" />\n <path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\" />\n <line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\" />\n <line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\" />\n </svg>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #EMPTYITEM>\n <section class=\"empty-cart w-100 d-flex align-items-center justify-content-center\">\n <div class=\"empty-cart-container d-flex flex-column\">\n <div class=\"cart-image\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\" [appImageEditor]=\"edit || false\"\n [imageData]=\"data?.content?.image\" [sectionId]=\"data?.id\">\n </div>\n <div class=\"cart-text content-side\">\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\n <div class=\"d-flex justify-content-center\"\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\n </div>\n </ng-container>\n </div>\n <button class=\"place-order-btn mx-auto w-fit\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\n [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\n Shopping'}}</button>\n </div>\n </section>\n</ng-template>\n\n<ng-template #SCHEME_REDEMPTION>\n <div class=\"modal-body\">\n <div class=\"scheme-option\" *ngFor=\"let scheme of schemeList\" (click)=\"redeemScheme(scheme, false)\"\n [style.borderColor]=\"cartInfo.billdetails.orraSchemeCode ? styles?.background?.color : ''\">\n <label for=\"individual\" class=\"scheme-card\">\n <div class=\"scheme-info d-flex gap-1\">\n <div class=\"form-check-radio\">\n <input class=\"form-check-input-radio\" type=\"radio\" name=\"flexRadioDefault\" id=\"flexRadioDefault2\">\n </div>\n <div class=\"right-side\">\n <div class=\"scheme-name\">\n <div class=\"scheme-title\">Individual Investment Scheme</div>\n <div class=\"scheme-monthly\">\u20B98000/M</div>\n </div>\n <div class=\"scheme-details\">\n <span class=\"scheme-id\">GPP Id: {{scheme.GPPId}}</span>\n <!-- <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span> -->\n </div>\n <div class=\"scheme-amount\">\u20B9{{scheme.amount}}</div>\n </div>\n </div>\n </label>\n </div>\n <div class=\"reedem_error d-flex justify-content-center align-items-center\" *ngIf=\"showReedemError\">\n Please add more \u20B9{{vaildAmount}} to reedem this scheme\n </div>\n </div>\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.reedem-section{padding:10px 15px;border-radius:15px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px;font-weight:700;font-size:13px}.redeem-section-text{font-size:.9rem;font-weight:700}.form-check-input:checked{background-color:#28a745!important;border-color:#28a745!important}.form-check-input:focus{border-color:#28a745!important;outline:0;box-shadow:none!important}.close-btn{background:none;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.close-btn:hover{color:#374151}.select_matured_text{font-size:.8rem!important;margin-top:10px;color:#05aacf}.position-relative{position:relative}.cart-parent{display:flex;margin-top:15px}.left-panel{width:65%;padding-right:5rem;border-right:1px solid #E9E9E9}.timeline{cursor:pointer}.cart-items{background:#fff;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.cart-header{padding:16px 24px;border-bottom:1px solid #e2e8f0;background:#f8fafc}.cart-header h2{margin:0;font-size:18px;font-weight:500;color:#0f172a}.cart-item{display:flex!important;align-items:center;justify-content:space-between;border-bottom:1px solid #e2e8f0;gap:20px;padding:0 8px;transition:background .2s}.cart-item:hover{background:#fbfcfe}.item-left{display:flex;align-items:center;flex:1}.item-right{display:flex;align-items:center;padding:15px;gap:32px}.item-image img{width:64px;height:64px;border-radius:12px;object-fit:cover;border:1px solid #f1f5f9}.item-details{display:flex;flex-direction:column;gap:4px}.item-title{margin:0;font-size:15px;font-weight:600;color:#0f172a;line-height:1.4}.item-subtitle{font-size:13px;color:#64748b;font-weight:400}.quantity-control{display:flex;align-items:center;border:1.5px solid #e2e8f0;border-radius:7px;overflow:hidden;height:38px;background:#fff;width:fit-content}.qty-btn{width:38px;height:100%;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#475569;transition:all .2s ease}.qty-btn:hover{background:#f8fafc;color:#0f172a}.qty-btn mat-icon{font-size:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center}.qty-value{width:32px;height:100%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;color:#0f172a;border-left:1.5px solid #e2e8f0;border-right:1.5px solid #e2e8f0}.item-price{font-size:18px;font-weight:700;color:#0f172a;min-width:60px;text-align:right;letter-spacing:-.01em}.delete-btn-circle{width:36px;height:36px;border-radius:50%;border:1px solid #fee2e2;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#ef4444;transition:all .2s ease}.delete-btn-circle:hover{background:#fef2f2;border-color:#fecaca;transform:scale(1.05);color:#dc2626}.delete-btn-circle svg{width:18px;height:18px}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%;padding-left:5rem}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;min-height:120px}.lh-23{line-height:23px;margin-left:10px}.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;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.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;font-size:18px}.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}.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;height:calc(100vh - 170px)}.hover_effect{position:unset;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;width:100%;text-align:center}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.see-live-btn{white-space:nowrap!important}.left-panel{width:100%;padding-right:0rem}.right-panel{width:100%;z-index:1000;padding-left:0rem}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap;display:none}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}.coupons-listing-section{width:100vw!important}.checkoutPage{flex-direction:column}.checkout-left-panel,.checkout-right-panel{width:100%!important}}.mobile-fixed{color:#fff}.coupons-listing-section{height:100vh;padding-top:0;position:relative;width:390px;z-index:100;background:#d3d3d354}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px;position:relative;top:-3px;right:15px;cursor:pointer}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px;cursor:pointer}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}.box-shadow{box-shadow:#00000029 0 1px 4px}.main-content{border-radius:12px;padding:0 30px 30px;width:100%;overflow:scroll;height:calc(100vh - 150px)}.delivery-options{display:flex;gap:20px;margin-bottom:30px}.delivery-option{padding:12px 24px;border:2px solid #e0e0e0;border-radius:25px;background:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:500;transition:all .2s}.delivery-option.active{background:#f0e6ff;border-color:#8b5cf6;color:#7c3aed}.delivery-option:hover{border-color:silver}.delivery-icon{width:16px;height:16px;background:#8b5cf6;border-radius:3px}.section-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.shipping-info{border-radius:10px;padding:20px;margin-bottom:20px;border:1px solid rgb(238,232,255);box-shadow:#0000000a 0 4px 8px}.delivery-date{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.delivery-date-text{color:#666;font-weight:500}.change-date-btn{color:#e91e63;background:none;border:none;font-weight:600;cursor:pointer;text-transform:uppercase;font-size:12px;letter-spacing:.5px}.address-info{margin-bottom:15px}.address-name{font-weight:700;margin-bottom:8px;color:#000}.address-details{color:#666;margin-bottom:8px}.mobile-number{font-weight:700;color:#000;font-size:15px}.change-address-btn{font-size:1rem!important;font-weight:700!important;padding:6px;background:#fff;border:1px solid rgb(229,221,255);border-radius:8px;color:#000;cursor:pointer;transition:all .2s;box-shadow:#0000000a 0 4px 8px}.change-address-btn:hover{border-color:#8b5cf6;color:#8b5cf6}.billing-section{margin-top:40px}.billing-options{display:flex;flex-direction:column;gap:15px;margin-top:20px}.billing-option{display:flex;align-items:center;gap:12px;padding:15px;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s}.billing-option.active{background:#f0e6ff;border-color:#8b5cf6}.radio-btn{width:20px;height:20px;border:2px solid #e0e0e0;border-radius:50%;position:relative}.billing-option.active .radio-btn{border-color:#8b5cf6}.billing-option.active .radio-btn:after{content:\"\";width:10px;height:10px;background:#8b5cf6;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.order-summary{border-radius:12px;padding:25px;width:75%}.summary-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.product-item{display:flex;gap:15px;margin-bottom:20px;border-bottom:1px solid #f0f0f0;border-radius:7px;background:#fff;padding:15px}.product-item:last-of-type{border-bottom:none;margin-bottom:30px;padding-bottom:0}.product-image{max-width:110px;width:100%;height:100%;border-radius:8px}.product-details{flex:1}.product-name{font-weight:500;margin-bottom:4px;color:#2d3748;font-size:14px}.product-quantity{color:#666;font-size:12px;margin-bottom:8px}.product-price{font-weight:600;color:#2d3748}.delivery-info{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:#8b5cf6}.delivery-icon-small{width:12px;height:12px;background:#8b5cf6;border-radius:2px}.price-breakdown{border-top:1px solid #f0f0f0;padding-top:20px}.price-row{display:flex;justify-content:space-between;margin-bottom:12px;color:#666}.price-row.total{font-weight:600;color:#2d3748;font-size:16px;margin-top:15px;padding-top:15px;border-top:1px solid #f0f0f0}.discount{color:#22c55e!important}@media (max-width: 768px){.container{grid-template-columns:1fr;padding:15px;gap:20px}.main-content,.order-summary{padding:20px;width:100%}.delivery-options{flex-direction:column;gap:10px}}.checkout-left-panel{width:65%;display:flex;justify-content:center}.checkout-right-panel{width:35%;display:flex;justify-content:center;background-color:#f9f9fa}.checkout-product{max-height:50vh;overflow:scroll}.mt-1{margin-top:1rem!important}.payment-btn{box-shadow:#0000000a 0 4px 8px}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px;height:25vh!important;margin-bottom:20px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.change-pincode{display:flex;gap:10px}.change-pincode mat-icon{font-size:18px;align-items:center;justify-content:center;display:flex}.change-pincode span{font-size:14px}.fs-13{font-size:13px}.fs-12{font-size:12px}.fs-18{font-size:18px}.b-1-b{border-width:0px 1px;border-style:solid;border-color:#000}.container{max-width:unset;padding:24px;display:flex;gap:24px;width:100%!important}.main-content{background:#fff;border-radius:12px;width:70%}.promo-banner{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;border-radius:8px;border:1px solid #e2e8f0}.promo-text h3{font-size:16px!important;font-weight:500;margin-bottom:4px}.promo-text p{font-size:.9rem!important;margin-bottom:0!important;color:#64748b}.see-live-btn{background:#fff;border:1px solid #e2e8f0;font-weight:600;color:#000;padding:8px 16px;border-radius:8px;font-size:12px!important;cursor:pointer;display:flex;align-items:center;gap:8px;width:max-content!important;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.see-live-btn:hover{background:#f8fafc;border-color:#cbd5e1;transform:translateY(-1px)}.see-live-btn svg{color:#6366f1}.cart-item{display:flex;gap:16px;position:relative}.cart-item:last-child{border-bottom:none}.item-image{width:15%;height:100px;border-radius:8px;object-fit:cover;display:flex;align-items:center;justify-content:center}.item-details{flex:1}.item-title{font-weight:500;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px}.current-price{font-size:1rem;font-weight:600}.original-price{font-size:1rem;text-decoration:line-through}.discount{background:#fef3c7;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-code{font-size:12px;color:#9ca3af;margin-bottom:8px}.item-options{display:flex;gap:16px;font-size:14px;color:#6b7280;margin-bottom:12px}.delivery-info{font-size:12px;color:#8b5cf6}.pickup-info{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:5px 15px;margin-top:12px;display:flex;align-items:center;cursor:pointer;width:max-content;gap:20px}.pickup-text{font-size:.9rem;color:#374151}.remove-btn{position:absolute;top:16px;right:0;width:20px!important;height:20px;background:#000;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px!important}.sidebar{display:flex;flex-direction:column;gap:16px;width:32%}.coupon-section{border-radius:8px;padding:10px 15px;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s ease}.coupon-section:hover{border-color:#cbd5e1;background-color:#f8fafc}.chevron-icon{color:#94a3b8;transition:transform .2s ease}.coupon-section:hover .chevron-icon{transform:translate(2px);color:#64748b}.scheme-section{border-radius:12px;padding:10px 15px;cursor:pointer}.coupon-left{display:flex;align-items:center;gap:12px}.coupon-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center}.coupon-icon mat-icon{font-size:17px;width:17px!important;height:19px!important}.coupon-text{font-weight:700;font-size:.9rem}.delivery-section{background:#fff;border-radius:12px;padding:10px 15px;box-shadow:#b2b2ca80 2px 2px 6px;background:#f6f3f9}.delivery-header{display:flex;align-items:center;gap:12px;margin-bottom:4px}.delivery-header span{font-size:.9rem;font-weight:700}.delivery-header mat-icon{width:20px;height:20px;font-size:17px;position:relative;top:2px}.delivery-icon{width:20px;height:20px;background:#8b5cf6;border-radius:50%}.pincode{font-weight:600;color:#111827}.change-link{color:#ec4899;font-size:.9rem;text-decoration:none;margin-left:auto}.summary-section{background:#fff;border-radius:8px;padding:20px;border:1px solid #e2e8f0}.summary-title{font-size:16px;font-weight:700;color:#0f172a;margin-bottom:20px;letter-spacing:-.01em}.summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.summary-row:last-child{margin-bottom:0}.summary-label{font-size:14px;font-weight:400;color:#64748b}.summary-value{font-size:14px;font-weight:500;color:#0f172a}.summary-divider{height:1px;background:#f1f5f9;margin:16px 0;width:100%}.total-row .summary-label{font-size:16px;font-weight:600;color:#0f172a}.total-row .summary-value{font-size:16px;font-weight:700;color:#0f172a}.total-row{border-top:1px solid #e2e8f0;padding-top:15px;margin-top:15px}.total-label{font-weight:600;font-size:16px}.total-value{font-weight:700;font-size:18px}.place-order-btn{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;border:none;border-radius:12px;padding:9px 10px;font-size:.9rem!important;font-weight:600;cursor:pointer;margin-top:10px;text-transform:uppercase}.place-order-btn:hover{opacity:.9}.chain-icon,.earring-icon{width:60px;height:60px;filter:sepia(1) hue-rotate(30deg) saturate(2)}.item-img{width:100%;height:100%;object-fit:cover}.mt-0{margin-top:0!important}select{outline:none;border-radius:5px;padding:2px;width:20%;border:none;box-shadow:#9999994d 2px 2px 6px;cursor:pointer}.cart-tab-parent{display:flex;justify-content:center}.cart-tabs{gap:10px;display:flex;justify-content:center;align-items:center;width:max-content;border-radius:8px;border:1px solid #e2e8f0}.cart-tabs div{padding:7px 10px;cursor:pointer;font-size:14px}.selected-cart-tab{margin:6px;background:#f1f5f9;border-radius:5px;color:#000!important;font-weight:500}.checkout-main-content{width:50%;padding:30px;border-radius:12px}@media screen and (max-width: 475px){.main-content{padding:0;height:auto!important}.cart-item{flex-direction:column!important;align-items:flex-start!important;padding:16px 12px!important;gap:16px!important}.item-left{width:100%!important;gap:16px!important;align-items:flex-start!important}.item-image{width:86px!important;height:86px!important;flex-shrink:0!important}.item-right{width:100%!important;justify-content:space-between!important;padding:0!important;gap:12px!important;margin-top:4px!important}.item-price{flex:1!important;text-align:right!important;margin-right:8px!important;font-size:16px!important}.item-title{font-size:14px!important;-webkit-line-clamp:2!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}.quantity-control{height:34px!important}.qty-btn{width:34px!important}.qty-value{width:28px!important;font-size:13px!important}.no-items{height:86vh;overflow:hidden;margin:0}.checkout-main-content{width:100%}.container{padding:0!important}.pickup-info{display:none}.container{display:flex;flex-direction:column}.promo-banner{gap:10px}select{width:50%}.main-content,.sidebar{width:100%}.vouchers-listing-section{min-width:unset!important;width:100vw!important}.separator{display:none!important}.coupon-meta{display:grid!important;grid-template-columns:1fr 1fr!important}}.group_invest{color:#000;font-size:.8rem}.reedem_error{color:red}.group_invest span{color:#05aacf}.redeem_amount{padding:2%;border-radius:4px;background:#fff;margin-top:2%;color:#000;font-size:.8rem}.redeem_amount span{color:#0dc577}.w-fit{width:fit-content!important}.modal-body{padding-bottom:0;overflow-y:scroll;max-height:300px;padding:0!important}.scheme-option{margin-bottom:16px}.scheme-option input[type=radio]:checked+.scheme-card{border-color:#06b6d4;background:#f0f9ff;position:relative}.scheme-option input[type=radio]:checked+.scheme-card:before{content:\"\";position:absolute;top:20px;left:20px;width:20px;height:20px;border:2px solid #06b6d4;border-radius:50%;background:#fff}.scheme-option input[type=radio]:checked+.scheme-card:after{content:\"\";position:absolute;top:26px;left:26px;width:8px;height:8px;background:#06b6d4;border-radius:50%}.scheme-card{justify-content:space-between;padding:10px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;width:100%}.scheme-card:hover{border-color:#d1d5db;background:#f9fafb}.form-check-radio{width:10%}.scheme-title{font-size:12px;font-weight:600;color:#111827;margin-bottom:8px}.scheme-details{display:flex;gap:25px;margin-bottom:20px}.scheme-name{display:flex;justify-content:space-between}.scheme-details span{font-size:12px;color:#0000004d}.scheme-monthly{font-size:14px;font-weight:600;color:#111827;min-width:100px;text-align:right}.right-side{width:90%}.scheme-amount{font-weight:700}@media screen and (min-width: 700px){.cart-items{max-height:500px;overflow:scroll}}.add-to-cart-parent{width:max-content;border:1px solid #000000;border-radius:8px}.cursor{cursor:pointer}.cart-text{max-width:600px;margin:0 auto;text-align:center}.cart-text div{word-break:break-word;overflow-wrap:break-word;white-space:normal}.switch{position:relative;display:inline-block;width:45px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:34px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:3px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#4caf50}input:checked+.slider:before{transform:translate(24px)}.vouchers-listing-section{position:relative;width:fit-content;min-width:500px;z-index:100;background:#fff;height:100vh}.vouchers-listing-section .coupon-heading{border-bottom:1px solid #eee}.vouchers-listing-section .coupon-listing{padding:12px 16px;overflow-y:auto;height:calc(97vh - 100px)}.voucher-details{background:#fff;border-radius:12px;padding:14px;box-shadow:0 1px 4px #00000042}.voucher-details .coupon-brief .apply-offer-btn{background:#111;color:#fff;border-radius:10px;padding:6px 16px}.voucher-details .coupon-code-box{border:1.5px dashed #bbb;border-radius:8px;padding:8px 12px;margin-bottom:10px}.voucher-details .coupon-code-box .code-label{font-size:11px;color:#888;margin-bottom:2px}.voucher-details .coupon-code-box .code-row .code-value{font-weight:700;font-size:15px;letter-spacing:1px}.voucher-details .coupon-meta .clock-icon{font-size:14px;height:14px;width:14px;vertical-align:middle}.applied-coupon-card{background:#f0fff8;border-radius:12px;padding:12px 16px}.applied-coupon-card .applied-coupon-left .success-check{color:#22c55e;font-size:22px}.applied-coupon-card .applied-coupon-left .applied-coupon-code{font-weight:700;font-size:14px}.applied-coupon-card .applied-coupon-left .applied-coupon-saving{font-size:13px;color:#097d5f;margin-top:2px}.active-type{background:#111!important;color:#fff!important}.redemption-type{text-align:center;border-radius:10px;padding:6px 16px;background:#d3d3d36b;width:-webkit-fill-available!important}.wallte_icon{background:#000;border-radius:50px;padding:5px 9px 7px}.wallte_icon img{width:18px;height:18px}.fw-600{font-weight:600}.coupon-type{width:fit-content!important;border-radius:26px!important;background:transparent!important;border:1px solid #afafaf;color:#393838;text-align:center;padding:6px 16px}.active-coupon{background:transparent!important;border:2px solid black!important;color:#000!important}.my-close-btn{position:absolute!important;top:10px!important;right:10px!important}\n"] }]
|
|
10531
|
+
], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n <ng-container *ngIf=\"data\">\n <section [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\"\n [attr.class]=\"isMobile ? 'py-5 position-relative' : 'position-relative'\" simpoHover\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\n [ngClass]=\"!responseData?.orderedItems?.length ? 'no-items' : ''\">\n <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\"\n [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\"\n *ngIf=\"responseData?.orderedItems?.length && currentTab === 'ADDRESS'\">\n <span class=\"timeline\" (click)=\"currentTab = 'BAG'\">Bag</span>\n <div class=\"bar\"></div>\n <span class=\"timeline isActive\">Address</span>\n <div class=\"bar\"></div>\n <span class=\"timeline\" style=\"cursor: auto;\">Payment</span>\n </div>\n <div class=\"cart-tab-parent w-100\" *ngIf=\"currentTab == 'BAG' && ecomConfigs?.appointmentBookingEnabled\">\n <!-- && ecomConfigs?.appointmentBookingEnabled\" -->\n <div class=\"cart-tabs\" [id]=\"data?.id\">\n <div class=\"selected-cart-tab\" [ngClass]=\"{'selected-cart-tab': cartType==='SHOPPING'}\"\n (click)=\"cartType='SHOPPING'\">Shopping Cart ({{responseData?.orderedItems?.length ?? 0}})</div>\n <div [ngClass]=\"{'selected-cart-tab': cartType==='TRIAL'}\" (click)=\"cartType='TRIAL'\">Trial Cart\n ({{trialCartItem?.length ?? 0}})</div>\n </div>\n </div>\n <div class=\"cart-parent\" [spacingHorizontal]=\"stylesLayout\" *ngIf=\"currentTab === 'BAG'\" [id]=\"data?.id\"\n [simpoAnimation]=\"styles?.animation\">\n <ng-container>\n <ng-container *ngIf=\"cartType === 'SHOPPING'\">\n <ng-container\n *ngTemplateOutlet=\"(responseData?.orderedItems?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"cartType === 'TRIAL'\">\n <ng-container *ngTemplateOutlet=\"(trialCartItem?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"d-flex checkoutPage\"\n *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && currentTab === 'ADDRESS'\">\n <ng-container *ngTemplateOutlet=\"CHECKOUTPAGE\">\n </ng-container>\n </div>\n\n\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\n [isEcommerce]=\"true\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n\n </section>\n </ng-container>\n <ng-container *ngIf=\"!data\">\n <section class=\"cart-window\">\n <div class=\"heading-large lh-2 mb-3 header-sec\">\n <div class=\"d-flex align-items-center\">\n <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\n <span>Your Cart</span>\n </div>\n <div class=\"saving\"></div>\n </div>\n <div class=\"offers\">\n <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\n <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\n <span>Avail Offers / Coupons</span>\n </div>\n <mat-icon>keyboard_arrow_right</mat-icon>\n </div>\n <div class=\"small-items\">\n <ng-container *ngFor=\"let item of responseData?.orderedItems\">\n <div class=\"small-item\">\n <div class=\"d-flex\" style=\"gap: 5px;\">\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n class=\"small-product-img\"\n [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n (click)=\"goToProductDetails(item)\">\n </div>\n <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\n <div class=\"small-item-quantity\">\n <span class=\"cursor\">-</span>\n <span>{{item.quantity}}</span>\n <span class=\"cursor\">+</span>\n </div>\n <div class=\"small-item-price\">\n <div class=\"price-with-tax\">\n <span [innerHTML]='currency'></span> {{(item.sellingPrice) | number: '1.0-2'}}\n </div>\n <!-- <div class=\"price-with-tax\">\n <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\n </div> -->\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"fotter-sec\">\n <div class=\"delivery-add d-flex\">\n <mat-icon>home</mat-icon>\n <div class=\"address\">Tetsting</div>\n </div>\n <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span\n style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span>\n {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\n </div>\n </section>\n </ng-container>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '40vh',\n 'border-radius': '10px',\n 'position': 'relative',\n 'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n<ng-template #CouponList>\n <section class=\"coupons-listing-section\">\n <div class=\"coupon-heading\">\n <div class=\"back-btn\" (click)=\"closeDialogRef()\">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </div>\n <div class=\"header-text\">Apply Coupon</div>\n </div>\n <!-- <div class=\"coupon-search-sec\">\n <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\n <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\n </div> -->\n <div class=\"coupon-listing\">\n <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\n <div class=\"coupon-details\"\n [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\"\n *ngIf=\"couponDetails?.status\">\n <div class=\"details__coupon-heading\">\n <div class=\"coupon-brief\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name\" [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\n {{ couponDetails.couponCode | uppercase }}</div>\n <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn\" [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\"\n (click)=\"applyCoupon(couponDetails)\">Apply</div>\n </div>\n </div>\n <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\n <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\n <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\n </div> -->\n </div>\n <ng-container>\n <!-- *ngIf=\"couponDetails.status\" -->\n <div class=\"details-divider\"></div>\n <ul class=\"details__coupon-terms\">\n <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\n </ul>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Coupon Available</div>\n <div class=\"empty-screen__secondary-text\">\n Looks like there are no coupons at the moment\n </div>\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\n </div>\n </ng-template>\n </div>\n </section>\n</ng-template>\n\n<ng-template #RedemptionVouchers>\n <section class=\"vouchers-listing-section d-flex flex-column\">\n <div class=\"coupon-heading d-flex align-items-center gap-2 p-3 fs-18 fw-600 border-bottom\">\n <div class=\"back-btn cursor-pointer d-flex align-items-center\" (click)=\"closeDialogRef()\">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </div>\n <div class=\"header-text\">Coupons & Vouchers</div>\n </div>\n\n <!-- <div class=\"d-flex align-items-center tab-container justify-content-between gap-2 p-3\">\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'COUPONS'}\"\n (click)=\"redemptionType = 'COUPONS'\">\n Coupons\n </div>\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'VOUCHERS'}\"\n (click)=\"redemptionType = 'VOUCHERS'\">\n Vouchers\n </div>\n </div> -->\n\n <div class=\"coupon-listing d-flex flex-column gap-3 pt-3\" *ngIf=\"redemptionType === 'COUPONS'\">\n <div class=\"d-flex align-items-center tab-container gap-3\">\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'REWARDS'}\" (click)=\"redemptionCouponType = 'REWARDS'\">\n Rewards\n </div>\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'DISCOUNTS'}\"\n (click)=\"redemptionCouponType = 'DISCOUNTS'\">\n Discounts\n </div>\n </div>\n <ng-container *ngIf=\"redemptionCouponType === 'REWARDS'\">\n <ng-container *ngIf=\"(listRedemptionCoupons?.vouchers?.length > 0) ; else showEmptyScreen\">\n <ng-container *ngFor=\"let voucher of listRedemptionCoupons?.vouchers; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%'\n }}\n off on your payment\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">\n Apply</div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\n <span class=\"separator text-secondary\">|</span>\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\n </span>\n <span class=\"separator text-secondary\" *ngIf=\"voucher.maxRedeemableAmount\">|</span>\n <span class=\"min-order\" *ngIf=\"voucher.maxRedeemableAmount\">Max Redeemable Amount: \u20B9{{\n voucher.maxRedeemableAmount | number }}</span>\n </div>\n\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"redemptionCouponType === 'DISCOUNTS'\">\n <ng-container *ngIf=\"(couponList.length > 0); else showEmptyDiscounts\">\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"couponDetails?.status\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\"\n [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\n {{ couponDetails.couponCode | uppercase }}\n </div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n {{ couponDetails.discountDescription | titlecase }}\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\"\n [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : 'not-allowed'}\"\n (click)=\"applyCoupon(couponDetails)\">\n Apply\n </div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ couponDetails.couponCode | uppercase }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}\n </span>\n </div>\n\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-template #showEmptyDiscounts>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Discount Coupons Available</div>\n <div class=\"empty-screen__secondary-text\">\n Looks like there are no discount coupons at the moment\n </div>\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\n </div>\n </ng-template>\n\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Coupons Available</div>\n <div class=\"empty-screen__secondary-text\">Looks like there are no coupons</div>\n </div>\n </ng-template>\n </div>\n\n <div class=\"coupon-listing d-flex flex-column gap-3\" *ngIf=\"redemptionType === 'VOUCHERS'\">\n <ng-container *ngIf=\"listRedemptionVouchers?.vouchers?.length > 0; else showEmptyScreen\">\n <ng-container *ngFor=\"let voucher of listRedemptionVouchers?.vouchers; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%' }}\n off on your payment\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">Apply\n </div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\n <span class=\"separator text-secondary\">|</span>\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\n </span>\n </div>\n\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\n </div>\n </ng-container>\n </ng-container>\n\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Vouchers Available</div>\n <div class=\"empty-screen__secondary-text\">Looks like there are no vouchers</div>\n </div>\n </ng-template>\n </div>\n </section>\n</ng-template>\n\n<ng-template #CARTPAGE>\n <div class=\"container\">\n <div class=\"main-content\">\n <div class=\"cart-items\">\n <div class=\"cart-header\">\n <h2>Your Cart</h2>\n </div>\n <ng-container\n *ngTemplateOutlet=\"CARTITEM;context:{data: cartType === 'SHOPPING' ? responseData?.orderedItems : trialCartItem}\"></ng-container>\n </div>\n </div>\n\n <div class=\"sidebar\">\n <div class=\"reedem-section d-flex flex-column align-items-center\" *ngIf=\"cartType != 'TRIAL' && getUrl()\">\n <div class=\"justify-content-between d-flex align-items-center w-100 redeem-section-text\">Redeem Section Amount\n <div class=\"toogle-switch\">\n <div class=\"form-check form-switch\">\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" role=\"switch\" id=\"flexSwitchCheckChecked\"\n [checked]=\"selectMatureScheme\" (change)=\"onToggleChange()\">\n </div>\n </div>\n </div>\n <!-- <div class=\"select_matured_text w-100 text-start cursor-pointer\"\n *ngIf=\"selectMatureScheme && !selectedRedemption\" (click)=\"selectScheme()\">\n Select Matured Scheme\n </div> -->\n <!-- <div class=\"select_matured_text d-flex flex-column gap-2 w-100 text-start cursor-pointer\"\n *ngIf=\"selectedRedemption\">\n Selected Scheme\n <div class=\"d-flex w-100 justify-content-between align-items-center group_invest\">Group Investment\n scheme-5000/M <span>Change</span></div>\n <div class=\"d-flex justify-content-between align-items-center w-100 redeem_amount\">Redeemable Amount\n <span>\u20B9{{selectedRedmpationData.selectedAmount}}</span>\n </div>\n </div> -->\n </div>\n <div class=\"scheme-section\" *ngIf=\"selectMatureScheme\">\n <ng-container *ngTemplateOutlet=\"SCHEME_REDEMPTION\"></ng-container>\n </div>\n <div class=\"coupon-section\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && !referEarnExist\">\n <div class=\"coupon-left\">\n <div class=\"coupon-icon\"><mat-icon>percent</mat-icon></div>\n <span class=\"coupon-text\" *ngIf=\"!responseData.billdetails?.couponId\">Apply\n Coupon</span>\n <span class=\"coupon-text\" *ngIf=\"responseData.billdetails?.couponId\">Coupon\n Applied</span>\n </div>\n <svg *ngIf=\"!responseData.billdetails?.couponId\" xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" class=\"chevron-icon\" (click)=\"openDialog(CouponList)\">\n <path d=\"m9 18 6-6-6-6\" />\n </svg>\n <span *ngIf=\"responseData.billdetails?.couponId\"\n (click)=\"removeCoupon($event)\"><mat-icon>close</mat-icon></span>\n </div>\n\n <div class=\"promo-banner mb-3\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && ecomConfigs?.videoCallEnabled\">\n <div class=\"promo-text\">\n <h3>See It Before You Buy It</h3>\n <p>Experience our designs in detail via video call</p>\n </div>\n <button class=\"see-live-btn\" (click)=\"scheduleVideoCall(responseData?.orderedItems)\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"lucide lucide-video\">\n <path d=\"m22 8-6 4 6 4V8Z\" />\n <rect width=\"14\" height=\"12\" x=\"2\" y=\"6\" rx=\"2\" ry=\"2\" />\n </svg>\n SEE IT LIVE\n </button>\n </div>\n\n <div class=\"plan-details-container p-3 rounded-4 bg-white text-dark voucher-details\"\n *ngIf=\"referEarnExist && this?.redemptionPoints?.availablePoints > 0\">\n <div class=\"fs-14 fw-500\">\n Rewards Available\n </div>\n <div class=\"d-flex justify-content-between align-items-start border-bottom pb-2\">\n <div class=\"avb_pts mt-2 mb-2\">\n <span class=\"fs-16 fw-500 total_points text-secondary\">\n <span class=\" fs-18 fw-600 text-dark\">{{(this?.redemptionPoints?.availablePoints || 0).toFixed(2)}}</span>\n pts\n </span>\n <div class=\"total_value fs-12 text-secondary\">\n = max \u20B9{{(this?.redemptionPoints?.pointsConvertedRupees || 0).toFixed(2)}} discount\n </div>\n </div>\n <div class=\"wallte_icon\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/777779c1775200561187wallet_(1).png\" alt=\"\">\n </div>\n </div>\n <div class=\"d-flex justify-content-between align-items-center mt-3\">\n <div class=\"redemable_text\">\n <div class=\"title_text\">\n <div class=\"fs-14 fw-500\">\n Redeem Points\n </div>\n <div class=\"fs-13 fs-400\">\n Use your points for discount\n </div>\n </div>\n </div>\n <div class=\"toggle_btn\">\n <label class=\"switch\">\n <input type=\"checkbox\" id=\"toggleSwitch\" [checked]=\"isPointsRedeeming\"\n (click)=\"onPointsRedeemingChange($event)\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n </div>\n <div class=\"mt-3 success_selected w-100 applied-coupon-card\" *ngIf=\"isPointsRedeeming\">\n <div class=\"d-flex align-items-start gap-2\">\n <div class=\"success_icon\">\n <mat-icon class=\"d-flex justify-content-center align-items-center text-success\">check_circle</mat-icon>\n </div>\n <div class=\"success_text\">\n <div class=\"fs-13 fw-500\">\n You're saving \u20B9\n {{totalSavingAmt || 0}}\n </div>\n <div class=\"fs-12 fs-400 text-success\">\n {{totalSavingPoints}} points remaining after redemption\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Existing coupon row (keep as-is) -->\n <div class=\"coupon-section d-flex flex-column voucher-details\" [id]=\"data?.id\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist\">\n <div class=\"d-flex justify-content-between align-items-center w-100\">\n <div class=\"coupon-left\">\n Apply Coupon\n </div>\n <div (click)=\"addRedemptionCoupon(RedemptionVouchers)\">View All</div>\n </div>\n\n <!-- Applied Coupon Success Banner -->\n <div class=\"applied-coupon-card w-100 mt-3 d-flex align-items-center justify-content-between\"\n *ngIf=\"selectedVoucherId\">\n <div class=\"applied-coupon-left d-flex align-items-center gap-3\">\n <mat-icon class=\"success-check\">check_circle</mat-icon>\n <div class=\"applied-coupon-info\">\n <div class=\"applied-coupon-code\">Coupon {{ selectedVoucherCode }} applied!</div>\n <div class=\"applied-coupon-saving\">You're saving\n <span *ngIf=\"this.couponValueType === 'AMOUNT'\">\u20B9 {{selectedVoucherAmount || 0}}</span>\n <span *ngIf=\"this.couponValueType === 'PERCENTAGE'\"> {{selectedVoucherPercentage || 0}}%</span>\n </div>\n\n </div>\n </div>\n <div class=\"remove-coupon-btn fs-14 fw-500 text-secondary cursor-pointer\"\n (click)=\"removeRedemptionCoupon($event)\">Remove</div>\n </div>\n </div>\n\n <div class=\"delivery-section\" *ngIf=\"getUrl()\">\n <div class=\"delivery-header\">\n <mat-icon>gps_fixed</mat-icon>\n <span *ngIf=\"cartType === 'SHOPPING'\">Delivering to</span>\n <span *ngIf=\"cartType === 'TRIAL'\">Trial Location at</span>\n <span class=\"pincode\">{{pincode}}</span>\n <!-- <a class=\"change-link\">Change Pincode</a> -->\n </div>\n </div>\n\n <div class=\"summary-section\">\n <div class=\"summary-title\">Summary</div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Subtotal</span>\n <span class=\"summary-value\">\u20B9{{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && referEarnExist && isPointsRedeeming\">\n <span class=\"summary-label\">Points Redeemed</span>\n <span class=\"summary-value\">- \u20B9{{ totalSavingAmt || 0 }}</span>\n </div>\n\n <div class=\"summary-row\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'AMOUNT' && appliedVoucher)\">\n <span class=\"summary-label\">Voucher Applied</span>\n <span class=\"summary-value\">- \u20B9{{ selectedVoucherAmount || 0 }}</span>\n </div>\n\n <div class=\"summary-row\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'PERCENTAGE' && appliedVoucher)\">\n <span class=\"summary-label\">Voucher Applied</span>\n <span class=\"summary-value\">- \u20B9{{ percentageReduced || 0 }}</span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.discountAmount\">\n <span class=\"summary-label\">Discount Amount</span>\n <span class=\"summary-value\">\n {{('\u20B9' + (responseData?.billdetails?.discountAmount | number: '1.0-2')) }}\n </span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Shipping</span>\n <span class=\"summary-value\"\n [ngClass]=\"{'savings': !responseData?.billdetails?.deliveryCharges || responseData.billdetails.deliveryCharges <= 0}\">\n {{ (responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0) ? ('\u20B9' +\n (responseData.billdetails.deliveryCharges | number: '1.0-2')) : 'Free' }}\n </span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Estimated Tax</span>\n <span class=\"summary-value\">\u20B9{{((!responseData.billdetails?.couponId ?\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\n number: '1.0-2'}}</span>\n </div>\n\n <div class=\"summary-row total-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Total</span>\n <!-- <span class=\"summary-value\">\u20B9{{ responseData?.totalAmount | number: '1.0-2' }}</span> -->\n <span class=\"total-value\" *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{ responseData?.totalAmount |\n number: '1.0-2' }}</span>\n\n <span class=\"total-value\" *ngIf=\"isPointsRedeeming\">\u20B9{{ (responseData?.totalAmount - (totalSavingAmt || 0)) |\n number: '1.0-2' }}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n (selectedVoucherAmount || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n (percentageReduced || 0)) | number:\n '1.0-2' }}</span>\n </div>\n\n <!-- Trial Cart Summary -->\n <ng-container *ngIf=\"cartType === 'TRIAL'\">\n <div class=\"summary-row\">\n <span class=\"summary-label\">Free Trial</span>\n <span class=\"summary-value\">\u20B90</span>\n </div>\n <div class=\"summary-row\">\n <span class=\"summary-label\">Service Charge</span>\n <span class=\"summary-value savings\">Free</span>\n </div>\n <div class=\"summary-divider\"></div>\n <div class=\"summary-row total-row\">\n <span class=\"summary-label\">Total</span>\n <span class=\"summary-value\">\u20B90</span>\n </div>\n <!-- <span class=\"total-value\" *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{ responseData?.totalAmount |\n number: '1.0-2' }}</span>\n\n <span class=\"total-value\" *ngIf=\"isPointsRedeeming\">\u20B9{{ (responseData?.totalAmount - (totalSavingAmt || 0)) |\n number: '1.0-2' }}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n (selectedVoucherAmount || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n (percentageReduced || 0)) | number:\n '1.0-2' }}</span> -->\n </ng-container>\n </div>\n <button class=\"place-order-btn\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n *ngIf=\"cartType === 'SHOPPING'\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\n Shopping'}}</button>\n <button class=\"place-order-btn mt-0\" (click)=\"edit ? '' : proceedToCheckout()\" simpoButtonDirective\n *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\n Cart'}}</button>\n <button class=\"place-order-btn mt-0\" simpoButtonDirective *ngIf=\"cartType === 'TRIAL'\"\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\" (click)=\"bookAppointment()\">BOOK\n APPOINTMENT</button>\n\n </div>\n </div>\n <!-- <ng-container *ngIf=\"recommededData?.length\">\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\"\n [responseData]=\"recommededData\"></simpo-featured-products>\n </ng-container> -->\n</ng-template>\n<ng-template #CHECKOUTPAGE>\n <div class=\"checkout-left-panel\">\n <div class=\"checkout-main-content\">\n <!-- <div class=\"delivery-options\">\n <div class=\"delivery-option active\">\n <div class=\"delivery-icon\"></div>\n HOME DELIVERY\n </div>\n <div class=\"delivery-option\">\n <div class=\"delivery-icon\"></div>\n STORE PICK-UP\n </div>\n </div> -->\n\n <div class=\"section-title\">Shipping Address</div>\n\n <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\n <div class=\"address-info\">\n <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\n <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\n {{defaultAddress?.stateName}}</div>\n <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\n </div>\n </div>\n\n <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\n <mat-icon>add</mat-icon>\n </div>\n\n <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\n\n <button class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective\n *ngIf=\"defaultAddress && !placeOrderLoader\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">\n Place Order\n </button>\n <button class=\"btn w-100 mt-1 payment-btn\" simpoButtonDirective *ngIf=\"defaultAddress && placeOrderLoader\"\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\">\n Loading...\n </button>\n\n </div>\n </div>\n\n <div class=\"checkout-right-panel\">\n <div class=\"order-summary\">\n <div class=\"summary-title\">Order Summary</div>\n\n <div class=\"checkout-product\">\n <div class=\"product-item\" *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\n <img [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\n alt=\"\">\n <div class=\"product-details\">\n <div class=\"product-name\">{{item.itemName}}</div>\n <div class=\"product-quantity\">Quantity: {{item.quantity}}</div>\n <div class=\"product-price\">\u20B9{{(item.sellingPrice * item.quantity) | number: '1.0-2'}}</div>\n </div>\n </div>\n\n </div>\n\n <div class=\"price-breakdown\">\n <div class=\"price-row\">\n <span>Total Price</span>\n <span>\u20B9{{(responseData?.billdetails?.totalNetValue\n ?? 0) | number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row\">\n <span>Total Tax</span>\n <span>\u20B9{{((!responseData.billdetails?.couponId ?\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\n number:\n '1.0-2'}}</span>\n </div>\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\n <span class=\"summary-label\">Redeem Amount</span>\n <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\n '1.0-2'}}</span>\n </div>\n\n <div class=\"price-row discount\" *ngIf=\"responseData?.billdetails?.discountAmount && !isJewellery\">\n <span>Coupon Discount</span>\n <span>- \u20B9{{responseData?.billdetails?.discountAmount\n | number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row\"\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\n <span>Delivery Charge</span>\n <span>{{responseData.billdetails.deliveryCharges\n |\n number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row total\" *ngIf=\"cartType === 'SHOPPING'\">\n <span>TOTAL AMOUNT</span>\n <span *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{(responseData?.totalAmount ?? 0) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"isPointsRedeeming\">\u20B9{{(responseData?.totalAmount - (totalSavingAmt || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n (selectedVoucherAmount || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n (responseData?.totalAmount * (selectedVoucherPercentage / 100) || 0)) | number:\n '1.0-2' }}</span>\n </div>\n </div>\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #CARTITEM let-products=\"data\">\n <div class=\"cart-item\" *ngFor=\"let item of products\" [style.color]=\"fontColor\">\n <div class=\"item-left\">\n <div class=\"item-image\">\n <img class=\"item-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n (click)=\"goToProductDetails(item)\" style=\"cursor: pointer;\">\n </div>\n <div class=\"item-details\">\n <h3 class=\"item-title\">{{item.itemName}}</h3>\n <div class=\"item-subtitle\" *ngIf=\"item.itemVariant\">\n <span *ngFor=\"let varient of getKeys(item.itemVariant.properties); let last = last\">\n {{ item.itemVariant.properties[varient] | titlecase }}<span *ngIf=\"!last\">, </span>\n </span>\n </div>\n </div>\n </div>\n\n <div class=\"item-right\">\n <div class=\"quantity-control\" *ngIf=\"cartType === 'SHOPPING'\">\n <button class=\"qty-btn px-2\" (click)=\"decreaseQty(item)\" [disabled]=\"item.quantity === 1\">\n <mat-icon>remove</mat-icon>\n </button>\n <span class=\"qty-value px-3\">{{item.quantity}}</span>\n <button class=\"qty-btn px-2\" (click)=\"increaseQty(item)\">\n <mat-icon>add</mat-icon>\n </button>\n </div>\n\n <div class=\"item-price\">\n \u20B9{{item.sellingPrice | number: '1.0-2'}}\n </div>\n\n <div class=\"delete-btn-circle\" (click)=\"removeItem(item)\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trash-2\">\n <path d=\"M3 6h18\" />\n <path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\" />\n <path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\" />\n <line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\" />\n <line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\" />\n </svg>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #EMPTYITEM>\n <section class=\"empty-cart w-100 d-flex align-items-center justify-content-center\">\n <div class=\"empty-cart-container d-flex flex-column\">\n <div class=\"cart-image\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\" [appImageEditor]=\"edit || false\"\n [imageData]=\"data?.content?.image\" [sectionId]=\"data?.id\">\n </div>\n <div class=\"cart-text content-side\">\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\n <div class=\"d-flex justify-content-center\"\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\n </div>\n </ng-container>\n </div>\n <button class=\"place-order-btn mx-auto w-fit\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\n [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\n Shopping'}}</button>\n </div>\n </section>\n</ng-template>\n\n<ng-template #SCHEME_REDEMPTION>\n <div class=\"modal-body\">\n <div class=\"scheme-option\" *ngFor=\"let scheme of schemeList\" (click)=\"redeemScheme(scheme, false)\"\n [style.borderColor]=\"cartInfo.billdetails.orraSchemeCode ? styles?.background?.color : ''\">\n <label for=\"individual\" class=\"scheme-card\">\n <div class=\"scheme-info d-flex gap-1\">\n <div class=\"form-check-radio\">\n <input class=\"form-check-input-radio\" type=\"radio\" name=\"flexRadioDefault\" id=\"flexRadioDefault2\">\n </div>\n <div class=\"right-side\">\n <div class=\"scheme-name\">\n <div class=\"scheme-title\">Individual Investment Scheme</div>\n <div class=\"scheme-monthly\">\u20B98000/M</div>\n </div>\n <div class=\"scheme-details\">\n <span class=\"scheme-id\">GPP Id: {{scheme.GPPId}}</span>\n <!-- <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span> -->\n </div>\n <div class=\"scheme-amount\">\u20B9{{scheme.amount}}</div>\n </div>\n </div>\n </label>\n </div>\n <div class=\"reedem_error d-flex justify-content-center align-items-center\" *ngIf=\"showReedemError\">\n Please add more \u20B9{{vaildAmount}} to reedem this scheme\n </div>\n </div>\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.reedem-section{padding:10px 15px;border-radius:15px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px;font-weight:700;font-size:13px}.redeem-section-text{font-size:.9rem;font-weight:700}.form-check-input:checked{background-color:#28a745!important;border-color:#28a745!important}.form-check-input:focus{border-color:#28a745!important;outline:0;box-shadow:none!important}.close-btn{background:none;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.close-btn:hover{color:#374151}.select_matured_text{font-size:.8rem!important;margin-top:10px;color:#05aacf}.position-relative{position:relative}.cart-parent{display:flex;margin-top:15px}.left-panel{width:65%;padding-right:5rem;border-right:1px solid #E9E9E9}.timeline{cursor:pointer}.cart-items{background:#fff;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.cart-header{padding:16px 24px;border-bottom:1px solid #e2e8f0;background:#f8fafc}.cart-header h2{margin:0;font-size:18px;font-weight:500;color:#0f172a}.cart-item{display:flex!important;align-items:center;justify-content:space-between;border-bottom:1px solid #e2e8f0;gap:20px;padding:0 8px;transition:background .2s}.cart-item:hover{background:#fbfcfe}.item-left{display:flex;align-items:center;flex:1}.item-right{display:flex;align-items:center;padding:15px;gap:32px}.item-image img{width:64px;height:64px;border-radius:12px;object-fit:cover;border:1px solid #f1f5f9}.item-details{display:flex;flex-direction:column;gap:4px}.item-title{margin:0;font-size:15px;font-weight:600;color:#0f172a;line-height:1.4}.item-subtitle{font-size:13px;color:#64748b;font-weight:400}.quantity-control{display:flex;align-items:center;border:1.5px solid #e2e8f0;border-radius:7px;overflow:hidden;height:38px;background:#fff;width:fit-content}.qty-btn{width:38px;height:100%;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#475569;transition:all .2s ease}.qty-btn:hover{background:#f8fafc;color:#0f172a}.qty-btn mat-icon{font-size:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center}.qty-value{width:32px;height:100%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;color:#0f172a;border-left:1.5px solid #e2e8f0;border-right:1.5px solid #e2e8f0}.item-price{font-size:18px;font-weight:700;color:#0f172a;min-width:60px;text-align:right;letter-spacing:-.01em}.delete-btn-circle{width:36px;height:36px;border-radius:50%;border:1px solid #fee2e2;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#ef4444;transition:all .2s ease}.delete-btn-circle:hover{background:#fef2f2;border-color:#fecaca;transform:scale(1.05);color:#dc2626}.delete-btn-circle svg{width:18px;height:18px}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%;padding-left:5rem}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;min-height:120px}.lh-23{line-height:23px;margin-left:10px}.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;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.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;font-size:18px}.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}.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;height:calc(100vh - 170px)}.hover_effect{position:unset;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;width:100%;text-align:center}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.see-live-btn{white-space:nowrap!important}.left-panel{width:100%;padding-right:0rem}.right-panel{width:100%;z-index:1000;padding-left:0rem}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap;display:none}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}.coupons-listing-section{width:100vw!important}.checkoutPage{flex-direction:column}.checkout-left-panel,.checkout-right-panel{width:100%!important}}.mobile-fixed{color:#fff}.coupons-listing-section{height:100vh;padding-top:0;position:relative;width:390px;z-index:100;background:#d3d3d354}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px;position:relative;top:-3px;right:15px;cursor:pointer}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px;cursor:pointer}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}.box-shadow{box-shadow:#00000029 0 1px 4px}.main-content{border-radius:12px;padding:0 30px 30px;width:100%;overflow:scroll;height:calc(100vh - 150px)}.delivery-options{display:flex;gap:20px;margin-bottom:30px}.delivery-option{padding:12px 24px;border:2px solid #e0e0e0;border-radius:25px;background:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:500;transition:all .2s}.delivery-option.active{background:#f0e6ff;border-color:#8b5cf6;color:#7c3aed}.delivery-option:hover{border-color:silver}.delivery-icon{width:16px;height:16px;background:#8b5cf6;border-radius:3px}.section-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.shipping-info{border-radius:10px;padding:20px;margin-bottom:20px;border:1px solid rgb(238,232,255);box-shadow:#0000000a 0 4px 8px}.delivery-date{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.delivery-date-text{color:#666;font-weight:500}.change-date-btn{color:#e91e63;background:none;border:none;font-weight:600;cursor:pointer;text-transform:uppercase;font-size:12px;letter-spacing:.5px}.address-info{margin-bottom:15px}.address-name{font-weight:700;margin-bottom:8px;color:#000}.address-details{color:#666;margin-bottom:8px}.mobile-number{font-weight:700;color:#000;font-size:15px}.change-address-btn{font-size:1rem!important;font-weight:700!important;padding:6px;background:#fff;border:1px solid rgb(229,221,255);border-radius:8px;color:#000;cursor:pointer;transition:all .2s;box-shadow:#0000000a 0 4px 8px}.change-address-btn:hover{border-color:#8b5cf6;color:#8b5cf6}.billing-section{margin-top:40px}.billing-options{display:flex;flex-direction:column;gap:15px;margin-top:20px}.billing-option{display:flex;align-items:center;gap:12px;padding:15px;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s}.billing-option.active{background:#f0e6ff;border-color:#8b5cf6}.radio-btn{width:20px;height:20px;border:2px solid #e0e0e0;border-radius:50%;position:relative}.billing-option.active .radio-btn{border-color:#8b5cf6}.billing-option.active .radio-btn:after{content:\"\";width:10px;height:10px;background:#8b5cf6;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.order-summary{border-radius:12px;padding:25px;width:75%}.summary-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.product-item{display:flex;gap:15px;margin-bottom:20px;border-bottom:1px solid #f0f0f0;border-radius:7px;background:#fff;padding:15px}.product-item:last-of-type{border-bottom:none;margin-bottom:30px;padding-bottom:0}.product-image{max-width:110px;width:100%;height:100%;border-radius:8px}.product-details{flex:1}.product-name{font-weight:500;margin-bottom:4px;color:#2d3748;font-size:14px}.product-quantity{color:#666;font-size:12px;margin-bottom:8px}.product-price{font-weight:600;color:#2d3748}.delivery-info{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:#8b5cf6}.delivery-icon-small{width:12px;height:12px;background:#8b5cf6;border-radius:2px}.price-breakdown{border-top:1px solid #f0f0f0;padding-top:20px}.price-row{display:flex;justify-content:space-between;margin-bottom:12px;color:#666}.price-row.total{font-weight:600;color:#2d3748;font-size:16px;margin-top:15px;padding-top:15px;border-top:1px solid #f0f0f0}.discount{color:#22c55e!important}@media (max-width: 768px){.container{grid-template-columns:1fr;padding:15px;gap:20px}.main-content,.order-summary{padding:20px;width:100%}.delivery-options{flex-direction:column;gap:10px}}.checkout-left-panel{width:65%;display:flex;justify-content:center}.checkout-right-panel{width:35%;display:flex;justify-content:center;background-color:#f9f9fa}.checkout-product{max-height:50vh;overflow:scroll}.mt-1{margin-top:1rem!important}.payment-btn{box-shadow:#0000000a 0 4px 8px}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px;height:25vh!important;margin-bottom:20px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.change-pincode{display:flex;gap:10px}.change-pincode mat-icon{font-size:18px;align-items:center;justify-content:center;display:flex}.change-pincode span{font-size:14px}.fs-13{font-size:13px}.fs-12{font-size:12px}.fs-18{font-size:18px}.b-1-b{border-width:0px 1px;border-style:solid;border-color:#000}.container{max-width:unset;padding:24px;display:flex;gap:24px;width:100%!important}.main-content{background:#fff;border-radius:12px;width:70%}.promo-banner{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;border-radius:8px;border:1px solid #e2e8f0}.promo-text h3{font-size:16px!important;font-weight:500;margin-bottom:4px}.promo-text p{font-size:.9rem!important;margin-bottom:0!important;color:#64748b}.see-live-btn{background:#fff;border:1px solid #e2e8f0;font-weight:600;color:#000;padding:8px 16px;border-radius:8px;font-size:12px!important;cursor:pointer;display:flex;align-items:center;gap:8px;width:max-content!important;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.see-live-btn:hover{background:#f8fafc;border-color:#cbd5e1;transform:translateY(-1px)}.see-live-btn svg{color:#6366f1}.cart-item{display:flex;gap:16px;position:relative}.cart-item:last-child{border-bottom:none}.item-image{width:15%;height:100px;border-radius:8px;object-fit:cover;display:flex;align-items:center;justify-content:center}.item-details{flex:1}.item-title{font-weight:500;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px}.current-price{font-size:1rem;font-weight:600}.original-price{font-size:1rem;text-decoration:line-through}.discount{background:#fef3c7;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-code{font-size:12px;color:#9ca3af;margin-bottom:8px}.item-options{display:flex;gap:16px;font-size:14px;color:#6b7280;margin-bottom:12px}.delivery-info{font-size:12px;color:#8b5cf6}.pickup-info{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:5px 15px;margin-top:12px;display:flex;align-items:center;cursor:pointer;width:max-content;gap:20px}.pickup-text{font-size:.9rem;color:#374151}.remove-btn{position:absolute;top:16px;right:0;width:20px!important;height:20px;background:#000;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px!important}.sidebar{display:flex;flex-direction:column;gap:16px;width:32%}.coupon-section{border-radius:8px;padding:10px 15px;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s ease}.coupon-section:hover{border-color:#cbd5e1;background-color:#f8fafc}.chevron-icon{color:#94a3b8;transition:transform .2s ease}.coupon-section:hover .chevron-icon{transform:translate(2px);color:#64748b}.scheme-section{border-radius:12px;padding:10px 15px;cursor:pointer}.coupon-left{display:flex;align-items:center;gap:12px}.coupon-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center}.coupon-icon mat-icon{font-size:17px;width:17px!important;height:19px!important}.coupon-text{font-weight:700;font-size:.9rem}.delivery-section{background:#fff;border-radius:12px;padding:10px 15px;box-shadow:#b2b2ca80 2px 2px 6px;background:#f6f3f9}.delivery-header{display:flex;align-items:center;gap:12px;margin-bottom:4px}.delivery-header span{font-size:.9rem;font-weight:700}.delivery-header mat-icon{width:20px;height:20px;font-size:17px;position:relative;top:2px}.delivery-icon{width:20px;height:20px;background:#8b5cf6;border-radius:50%}.pincode{font-weight:600;color:#111827}.change-link{color:#ec4899;font-size:.9rem;text-decoration:none;margin-left:auto}.summary-section{background:#fff;border-radius:8px;padding:20px;border:1px solid #e2e8f0}.summary-title{font-size:16px;font-weight:700;color:#0f172a;margin-bottom:20px;letter-spacing:-.01em}.summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.summary-row:last-child{margin-bottom:0}.summary-label{font-size:14px;font-weight:400;color:#64748b}.summary-value{font-size:14px;font-weight:500;color:#0f172a}.summary-divider{height:1px;background:#f1f5f9;margin:16px 0;width:100%}.total-row .summary-label{font-size:16px;font-weight:600;color:#0f172a}.total-row .summary-value{font-size:16px;font-weight:700;color:#0f172a}.total-row{border-top:1px solid #e2e8f0;padding-top:15px;margin-top:15px}.total-label{font-weight:600;font-size:16px}.total-value{font-weight:700;font-size:18px}.place-order-btn{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;border:none;border-radius:12px;padding:9px 10px;font-size:.9rem!important;font-weight:600;cursor:pointer;margin-top:10px;text-transform:uppercase}.place-order-btn:hover{opacity:.9}.chain-icon,.earring-icon{width:60px;height:60px;filter:sepia(1) hue-rotate(30deg) saturate(2)}.item-img{width:100%;height:100%;object-fit:cover}.mt-0{margin-top:0!important}select{outline:none;border-radius:5px;padding:2px;width:20%;border:none;box-shadow:#9999994d 2px 2px 6px;cursor:pointer}.cart-tab-parent{display:flex;justify-content:center}.cart-tabs{gap:10px;display:flex;justify-content:center;align-items:center;width:max-content;border-radius:8px;border:1px solid #e2e8f0}.cart-tabs div{padding:7px 10px;cursor:pointer;font-size:14px}.selected-cart-tab{margin:6px;background:#f1f5f9;border-radius:5px;color:#000!important;font-weight:500}.checkout-main-content{width:50%;padding:30px;border-radius:12px}@media screen and (max-width: 475px){.main-content{padding:0;height:auto!important}.cart-item{flex-direction:column!important;align-items:flex-start!important;padding:16px 12px!important;gap:16px!important}.item-left{width:100%!important;gap:16px!important;align-items:flex-start!important}.item-image{width:86px!important;height:86px!important;flex-shrink:0!important}.item-right{width:100%!important;justify-content:space-between!important;padding:0!important;gap:12px!important;margin-top:4px!important}.item-price{flex:1!important;text-align:right!important;margin-right:8px!important;font-size:16px!important}.item-title{font-size:14px!important;-webkit-line-clamp:2!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}.quantity-control{height:34px!important}.qty-btn{width:34px!important}.qty-value{width:28px!important;font-size:13px!important}.no-items{height:86vh;overflow:hidden;margin:0}.checkout-main-content{width:100%}.container{padding:0!important}.pickup-info{display:none}.container{display:flex;flex-direction:column}.promo-banner{gap:10px}select{width:50%}.main-content,.sidebar{width:100%}.vouchers-listing-section{min-width:unset!important;width:100vw!important}.separator{display:none!important}.coupon-meta{display:grid!important;grid-template-columns:1fr 1fr!important}}.group_invest{color:#000;font-size:.8rem}.reedem_error{color:red}.group_invest span{color:#05aacf}.redeem_amount{padding:2%;border-radius:4px;background:#fff;margin-top:2%;color:#000;font-size:.8rem}.redeem_amount span{color:#0dc577}.w-fit{width:fit-content!important}.modal-body{padding-bottom:0;overflow-y:scroll;max-height:300px;padding:0!important}.scheme-option{margin-bottom:16px}.scheme-option input[type=radio]:checked+.scheme-card{border-color:#06b6d4;background:#f0f9ff;position:relative}.scheme-option input[type=radio]:checked+.scheme-card:before{content:\"\";position:absolute;top:20px;left:20px;width:20px;height:20px;border:2px solid #06b6d4;border-radius:50%;background:#fff}.scheme-option input[type=radio]:checked+.scheme-card:after{content:\"\";position:absolute;top:26px;left:26px;width:8px;height:8px;background:#06b6d4;border-radius:50%}.scheme-card{justify-content:space-between;padding:10px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;width:100%}.scheme-card:hover{border-color:#d1d5db;background:#f9fafb}.form-check-radio{width:10%}.scheme-title{font-size:12px;font-weight:600;color:#111827;margin-bottom:8px}.scheme-details{display:flex;gap:25px;margin-bottom:20px}.scheme-name{display:flex;justify-content:space-between}.scheme-details span{font-size:12px;color:#0000004d}.scheme-monthly{font-size:14px;font-weight:600;color:#111827;min-width:100px;text-align:right}.right-side{width:90%}.scheme-amount{font-weight:700}@media screen and (min-width: 700px){.cart-items{max-height:500px;overflow:scroll}}.add-to-cart-parent{width:max-content;border:1px solid #000000;border-radius:8px}.cursor{cursor:pointer}.cart-text{max-width:600px;margin:0 auto;text-align:center}.cart-text div{word-break:break-word;overflow-wrap:break-word;white-space:normal}.switch{position:relative;display:inline-block;width:45px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:34px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:3px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#4caf50}input:checked+.slider:before{transform:translate(24px)}.vouchers-listing-section{position:relative;width:fit-content;min-width:500px;z-index:100;background:#fff;height:100vh}.vouchers-listing-section .coupon-heading{border-bottom:1px solid #eee}.vouchers-listing-section .coupon-listing{padding:12px 16px;overflow-y:auto;height:calc(97vh - 100px)}.voucher-details{background:#fff;border-radius:12px;padding:14px;box-shadow:0 1px 4px #00000042}.voucher-details .coupon-brief .apply-offer-btn{background:#111;color:#fff;border-radius:10px;padding:6px 16px}.voucher-details .coupon-code-box{border:1.5px dashed #bbb;border-radius:8px;padding:8px 12px;margin-bottom:10px}.voucher-details .coupon-code-box .code-label{font-size:11px;color:#888;margin-bottom:2px}.voucher-details .coupon-code-box .code-row .code-value{font-weight:700;font-size:15px;letter-spacing:1px}.voucher-details .coupon-meta .clock-icon{font-size:14px;height:14px;width:14px;vertical-align:middle}.applied-coupon-card{background:#f0fff8;border-radius:12px;padding:12px 16px}.applied-coupon-card .applied-coupon-left .success-check{color:#22c55e;font-size:22px}.applied-coupon-card .applied-coupon-left .applied-coupon-code{font-weight:700;font-size:14px}.applied-coupon-card .applied-coupon-left .applied-coupon-saving{font-size:13px;color:#097d5f;margin-top:2px}.active-type{background:#111!important;color:#fff!important}.redemption-type{text-align:center;border-radius:10px;padding:6px 16px;background:#d3d3d36b;width:-webkit-fill-available!important}.wallte_icon{background:#000;border-radius:50px;padding:5px 9px 7px}.wallte_icon img{width:18px;height:18px}.fw-600{font-weight:600}.coupon-type{width:fit-content!important;border-radius:26px!important;background:transparent!important;border:1px solid #afafaf;color:#393838;text-align:center;padding:6px 16px}.active-coupon{background:transparent!important;border:2px solid black!important;color:#000!important}.my-close-btn{position:absolute!important;top:10px!important;right:10px!important}\n"] }]
|
|
10590
10532
|
}], ctorParameters: () => [{ type: EventsService }, { type: CartService }, { type: i2$2.Router }, { type: RestService }, { type: i1$2.MatDialog }, { type: StorageServiceService }, { type: i6$1.MessageService }, { type: i8$2.MatBottomSheet }, { type: i2$2.ActivatedRoute }, { type: undefined, decorators: [{
|
|
10591
10533
|
type: Optional
|
|
10592
10534
|
}, {
|
|
@@ -11640,7 +11582,7 @@ class NavbarSectionComponent {
|
|
|
11640
11582
|
return page;
|
|
11641
11583
|
}
|
|
11642
11584
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavbarSectionComponent, deps: [{ token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i1$2.MatDialog }, { token: i8$2.MatBottomSheet }, { token: i2$1.CookieService }, { token: StorageServiceService }, { token: RestService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11643
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NavbarSectionComponent, isStandalone: true, selector: "simpo-navbar-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "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)\" [attr.style]=\"customClass\">\r\n <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\" [isHeader]=\"true\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"resolvedStickyType\" (stickyScrolled)=\"onStickyScrolled($event)\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\" [ngClass]=\"{'adjustePadding': !isEcommerceWebsite, 'paddingEcom': isEcommerceWebsite, 'no-shadow': isComponentMerged}\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_LEFT__MENU_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n <div class=\"d-flex align-item-center\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_RIGHT__MENU_LEFT\">\r\n <div class=\"d-flex align-items-center gap-15\">\r\n <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n\r\n </div>\r\n\r\n <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_CENTER__MENU_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n <div class=\"d-flex flex-column align-item-center\">\r\n <div class=\"d-flex justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <div class=\"d-flex justify-content-between align-items-center px-2\">\r\n <div class=\"d-flex\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"navbarLinksTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"ecommerceButtonsTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"canShowMobileFooter\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"mobileButtonsTemplate\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\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\r\n<ng-template #logoSectionTemplate>\r\n <div class=\" left-logo-text d-flex\">\r\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *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\" 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 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\" loading=\"lazy\">\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element\r\n [buttonData]=\"item\"\r\n [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\"\r\n [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\"\r\n id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | uppercase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\" (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #socialIconsTemplate>\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</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\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\r\n [buttonData]=\"item\"\r\n [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\"\r\n [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\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 <app-button-element\r\n [buttonContent]=\"button.content\"\r\n [buttonStyle]=\"button.styles\"\r\n [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative\" style=\"max-width: 50vw;\">\r\n <div class=\"search-icon\" *ngIf=\"!isMobile\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [simpoColor]=\"simpoColor\">search</mat-icon>\r\n </div>\r\n <div class=\"input-group\" *ngIf=\"!isMobile && showSearchBar\">\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 align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\" *ngIf=\"!isMobile\">\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 align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\" *ngIf=\"!isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">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 align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 30px;\">\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\" *ngIf=\"!isMobile\">Account</span>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n <div class=\"icons\" (click)=\"goToHome()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Home</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"searchProducts()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Shop</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToWishlist()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Cart</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileButtonsTemplate>\r\n <div class=\"inner-height \">\r\n <div class=\"nab-bar-mobile d-flex justify-content-between align-items-center\">\r\n\r\n <div class=\"title-row\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n\r\n <button class=\"navbar-toggler\" (click)=\"isNavbarOpen = !isNavbarOpen\" *ngIf=\"!isNavbarOpen\">\r\n <mat-icon [simpoColor]=\"style?.background?.color\">menu</mat-icon> <!-- Use \"menu\" for a hamburger icon -->\r\n </button>\r\n\r\n\r\n <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\" *ngIf=\"isNavbarOpen\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"isNavbarOpen\" class=\"navbar-content mt-3\">\r\n <div class=\"d-flex flex-column gap-2\">\r\n\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element\r\n [buttonData]=\"item\"\r\n [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <div class=\"d-flex align-items-start flex-column flex-lg-row gap-lg-0 gap-3 mt-2\">\r\n <div class=\"d-flex\" *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\r\n\r\n <div class=\"d-flex flex-column mt-2 align-items-center\">\r\n <div *ngIf=\"action?.display\" class=\"button-display\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element\r\n [buttonContent]=\"button.content\"\r\n [buttonStyle]=\"button.styles\"\r\n [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"[backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}.no-shadow{box-shadow:none!important}.container-fluid{display:flex;align-items:center}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;right:25px;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;position:relative;top:2px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.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:14px!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:38px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px;position:absolute;right:0%;top:130%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.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:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.gap-15{gap:15px}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { 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", "accentColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.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", "isEcommerce"], 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: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky", "categoryHeader"], outputs: ["stickyScrolled"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
|
11585
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NavbarSectionComponent, isStandalone: true, selector: "simpo-navbar-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "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)\" [attr.style]=\"customClass\">\r\n <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\" [isHeader]=\"true\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"resolvedStickyType\" (stickyScrolled)=\"onStickyScrolled($event)\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\" [ngClass]=\"{'adjustePadding': !isEcommerceWebsite, 'paddingEcom': isEcommerceWebsite, 'no-shadow': isComponentMerged}\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_LEFT__MENU_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n <div class=\"d-flex align-item-center\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_RIGHT__MENU_LEFT\">\r\n <div class=\"d-flex align-items-center gap-15\">\r\n <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n\r\n </div>\r\n\r\n <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_CENTER__MENU_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n <div class=\"d-flex flex-column align-item-center\">\r\n <div class=\"d-flex justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <div class=\"d-flex justify-content-between align-items-center px-2\">\r\n <div class=\"d-flex\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"navbarLinksTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"ecommerceButtonsTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"canShowMobileFooter\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"mobileButtonsTemplate\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\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\r\n<ng-template #logoSectionTemplate>\r\n <div class=\" left-logo-text d-flex\">\r\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *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\" 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 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\" loading=\"lazy\">\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element\r\n [buttonData]=\"item\"\r\n [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\"\r\n [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\"\r\n id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | uppercase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\" (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #socialIconsTemplate>\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</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\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\r\n [buttonData]=\"item\"\r\n [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\"\r\n [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\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 <app-button-element\r\n [buttonContent]=\"button.content\"\r\n [buttonStyle]=\"button.styles\"\r\n [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative\" style=\"max-width: 50vw;\">\r\n <div class=\"search-icon\" *ngIf=\"!isMobile\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [simpoColor]=\"simpoColor\">search</mat-icon>\r\n </div>\r\n <div class=\"input-group\" *ngIf=\"!isMobile && showSearchBar\">\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 align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\" *ngIf=\"!isMobile\">\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 align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\" *ngIf=\"!isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">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 align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 30px;\">\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\" *ngIf=\"!isMobile\">Account</span>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n <div class=\"icons\" (click)=\"goToHome()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Home</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"searchProducts()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Shop</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToWishlist()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Cart</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileButtonsTemplate>\r\n <div class=\"inner-height \">\r\n <div class=\"nab-bar-mobile d-flex justify-content-between align-items-center\">\r\n\r\n <div class=\"title-row\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n\r\n <button class=\"navbar-toggler\" (click)=\"isNavbarOpen = !isNavbarOpen\" *ngIf=\"!isNavbarOpen\">\r\n <mat-icon [simpoColor]=\"style?.background?.color\">menu</mat-icon> <!-- Use \"menu\" for a hamburger icon -->\r\n </button>\r\n\r\n\r\n <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\" *ngIf=\"isNavbarOpen\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"isNavbarOpen\" class=\"navbar-content mt-3\">\r\n <div class=\"d-flex flex-column gap-2\">\r\n\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element\r\n [buttonData]=\"item\"\r\n [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <div class=\"d-flex align-items-start flex-column flex-lg-row gap-lg-0 gap-3 mt-2\">\r\n <div class=\"d-flex\" *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\r\n\r\n <div class=\"d-flex flex-column mt-2 align-items-center\">\r\n <div *ngIf=\"action?.display\" class=\"button-display\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element\r\n [buttonContent]=\"button.content\"\r\n [buttonStyle]=\"button.styles\"\r\n [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"[backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}.no-shadow{box-shadow:none!important}.container-fluid{display:flex;align-items:center}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;right:25px;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;position:relative;top:2px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.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:14px!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:38px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px;position:absolute;right:0%;top:130%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.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:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.gap-15{gap:15px}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth", "itemIndex"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { 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", "accentColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.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", "isEcommerce"], 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: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky", "categoryHeader"], outputs: ["stickyScrolled"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
|
11644
11586
|
}
|
|
11645
11587
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavbarSectionComponent, decorators: [{
|
|
11646
11588
|
type: Component,
|
|
@@ -12099,7 +12041,7 @@ class BannerGridSectionComponent extends BaseSection {
|
|
|
12099
12041
|
return "#ffffff;";
|
|
12100
12042
|
}
|
|
12101
12043
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BannerGridSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12102
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BannerGridSectionComponent, isStandalone: true, selector: "simpo-banner-grid-section", inputs: { data: "data", edit: "edit", delete: "delete", customClass: "customClass", index: "index", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [id]=\"data?.id\" [simpoBorder]=\"styles?.border\" [spacingAround]=\"stylesLayout\">\r\n <div class=\"row top-parent h-100 align-justify-unset\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [simpoBackground]=\"styles?.background\" [simpoHeight]=\"fitLayout\">\r\n <div class=\"col\" [spacingHorizontal]=\"!data?.styles?.borderLessImage ? stylesLayout : undefined\"\r\n [class.p0]=\"data?.styles?.borderLessImage\" [simpoOverlay]=\"styles?.background\"\r\n [simpoSpacing]=\"!data?.styles?.borderLessImage ? spacingLayout : undefined\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"imageTemplate\"></ng-container>\r\n </div>\r\n <div class=\"col d-flex flex-column\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\"\r\n [simpoContentAlignment]=\"styles?.contentAlignment\" [simpoSpacing]=\"spacingLayout\" [id]=\"data?.id\">\r\n <div class=\"text-parent\">\r\n <ng-container *ngTemplateOutlet=\"textTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <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\r\n</section>\r\n\r\n<ng-template #buttonTemplate>\r\n <div class=\"button-display\" *ngIf=\"data?.action && data?.action?.display\" class=\"d-flex customclass w-full gap-2\"\r\n [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 screenWidth < 475 ? 'justify-content-center' : ''\r\n ]\">\r\n <ng-container *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\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textTemplate>\r\n <div [id]=\"data?.id\">\r\n <ng-container *ngFor=\"let item of content?.inputText; let i = index\">\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #imageTemplate>\r\n <div class=\"row\" [style.rowGap]=\"!data?.styles?.borderLessImage ? '15px' : '0'\">\r\n <div *ngFor=\"let item of data?.content?.listItem?.data || []; let i = index\" [class]=\"getImageClass(i)\"\r\n [class.p0]=\"data?.styles?.borderLessImage\"\r\n [class.grid-img]=\"styles?.positionLayout?.value == 'left' || styles?.positionLayout?.value == 'right'\">\r\n <img [src]=\"item?.image?.url\" [alt]=\"item?.image?.altText\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n [simpoImageDirective]=\"styles?.image\" [simpoObjectPosition]=\"item?.image?.position\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [itemIndex]=\"i\" class=\"w-100 h-100\">\r\n </div>\r\n </div>\r\n</ng-template>", 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}.col-12{max-height:300px!important}.img{width:100%;height:auto}.align-justify-unset{align-items:unset!important;justify-content:unset!important}.borderLess-image{border-radius:0!important}.borderless-width{width:50%;height:auto}.borderLess-height{height:54vh}.img-1{width:48%;height:auto}.image-section-2{display:flex;align-items:center}.image-section-2 .d-flex{gap:10px}.image-section-2-borderless,.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:-75px;padding-top:75px}.main-container{display:flex}.button-display{display:flex;gap:10px}.p0{padding:0!important}.text-parent{display:flex;flex-direction:column;gap:15px}.grid-img{min-height:464px;max-height:50vh;object-fit:cover}.row{margin:0}@media screen and (max-width: 475px){.top-parent{flex-direction:column;margin:0}.grid-img{min-height:232px;max-height:25vh}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "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: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { 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: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingDirective, selector: "[simpoSpacing]", inputs: ["simpoSpacing"] }, { kind: "directive", type: HeightDirective, selector: "[simpoHeight]", inputs: ["simpoHeight"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }] }); }
|
|
12044
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BannerGridSectionComponent, isStandalone: true, selector: "simpo-banner-grid-section", inputs: { data: "data", edit: "edit", delete: "delete", customClass: "customClass", index: "index", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [id]=\"data?.id\" [simpoBorder]=\"styles?.border\" [spacingAround]=\"stylesLayout\">\r\n <div class=\"row top-parent h-100 align-justify-unset\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [simpoBackground]=\"styles?.background\" [simpoHeight]=\"fitLayout\">\r\n <div class=\"col\" [spacingHorizontal]=\"!data?.styles?.borderLessImage ? stylesLayout : undefined\"\r\n [class.p0]=\"data?.styles?.borderLessImage\" [simpoOverlay]=\"styles?.background\"\r\n [simpoSpacing]=\"!data?.styles?.borderLessImage ? spacingLayout : undefined\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"imageTemplate\"></ng-container>\r\n </div>\r\n <div class=\"col d-flex flex-column\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\"\r\n [simpoContentAlignment]=\"styles?.contentAlignment\" [simpoSpacing]=\"spacingLayout\" [id]=\"data?.id\">\r\n <div class=\"text-parent\">\r\n <ng-container *ngTemplateOutlet=\"textTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <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\r\n</section>\r\n\r\n<ng-template #buttonTemplate>\r\n <div class=\"button-display\" *ngIf=\"data?.action && data?.action?.display\" class=\"d-flex customclass w-full gap-2\"\r\n [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 screenWidth < 475 ? 'justify-content-center' : ''\r\n ]\">\r\n <ng-container *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\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textTemplate>\r\n <div [id]=\"data?.id\">\r\n <ng-container *ngFor=\"let item of content?.inputText; let i = index\">\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #imageTemplate>\r\n <div class=\"row\" [style.rowGap]=\"!data?.styles?.borderLessImage ? '15px' : '0'\">\r\n <div *ngFor=\"let item of data?.content?.listItem?.data || []; let i = index\" [class]=\"getImageClass(i)\"\r\n [class.p0]=\"data?.styles?.borderLessImage\"\r\n [class.grid-img]=\"styles?.positionLayout?.value == 'left' || styles?.positionLayout?.value == 'right'\">\r\n <img [src]=\"item?.image?.url\" [alt]=\"item?.image?.altText\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n [simpoImageDirective]=\"styles?.image\" [simpoObjectPosition]=\"item?.image?.position\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [itemIndex]=\"i\" class=\"w-100 h-100\">\r\n </div>\r\n </div>\r\n</ng-template>", 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}.col-12{max-height:300px!important}.img{width:100%;height:auto}.align-justify-unset{align-items:unset!important;justify-content:unset!important}.borderLess-image{border-radius:0!important}.borderless-width{width:50%;height:auto}.borderLess-height{height:54vh}.img-1{width:48%;height:auto}.image-section-2{display:flex;align-items:center}.image-section-2 .d-flex{gap:10px}.image-section-2-borderless,.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:-75px;padding-top:75px}.main-container{display:flex}.button-display{display:flex;gap:10px}.p0{padding:0!important}.text-parent{display:flex;flex-direction:column;gap:15px}.grid-img{min-height:464px;max-height:50vh;object-fit:cover}.row{margin:0}@media screen and (max-width: 475px){.top-parent{flex-direction:column;margin:0}.grid-img{min-height:232px;max-height:25vh}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "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: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth", "itemIndex"] }, { 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: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingDirective, selector: "[simpoSpacing]", inputs: ["simpoSpacing"] }, { kind: "directive", type: HeightDirective, selector: "[simpoHeight]", inputs: ["simpoHeight"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }] }); }
|
|
12103
12045
|
}
|
|
12104
12046
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BannerGridSectionComponent, decorators: [{
|
|
12105
12047
|
type: Component,
|
|
@@ -12347,7 +12289,7 @@ class PricingSectionComponent extends BaseSection {
|
|
|
12347
12289
|
}
|
|
12348
12290
|
}
|
|
12349
12291
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PricingSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12350
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PricingSectionComponent, isStandalone: true, selector: "simpo-pricing-section", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\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 <div [simpoContentTitleSpace]=\"headingSpace\">\r\n <ng-container *ngFor=\"let text of data?.content?.inputText; let i = index\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\r\n </ng-container>\r\n <!-- <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\r\n </div>\r\n <div class=\"pricing-options row\" *ngIf=\"style?.pricingStyle =='STYLE1'\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"style?.corners\" *ngFor=\"let options of content?.listItem?.data; let i = index\"\r\n [ngStyle]=\"{'border': options?.highlight?.highlighted === true ? '3px solid ' + data?.styles?.background?.accentColor : ''}\"\r\n [attr.class]=\"getClass() + ' position-relative'\">\r\n <img loading=\"lazy\" class=\"image w-100\" *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=\"\" loading=\"lazy\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\" [itemIndex]=\"i\"\r\n [class]=\"data?.id+(options?.image?.id || '')\">\r\n <div class=\"highlight-label\" *ngIf=\"options?.highlight?.highlighted === true\"\r\n [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\" [simpoColor]=\"getTextColor()\"\r\n [simpoCorner]=\"style?.corners\">\r\n <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [itemIndex]=\"i\"></simpo-text-editor>\r\n </div>\r\n <div class=\"heading-small\">\r\n <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i\" [isRTE]=\"options.inputText[0]?.isRTE\"></simpo-text-editor>\r\n </div>\r\n <div class=\"heading-large price\">\r\n <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"2\" [itemIndex]=\"i\" [isRTE]=\"options.inputText[2]?.isRTE\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc\">\r\n <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"3\" [itemIndex]=\"i\" [isRTE]=\"options.inputText[3]?.isRTE\"></simpo-text-editor>\r\n </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\" [backgroundInfo]=\"style?.background\" (click)=\"redirectTo()\">{{options?.button?.label}}</button> -->\r\n <button [buttonData]=\"options?.button\" [buttonStyle]=\"button?.styles\" simpoButtonDirective\r\n [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n class=\"d-flex gap-1 align-items-center justify-content-center\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId()\" [itemIndex]=\"i\" (click)=\"redirectTo(options?.button)\"\r\n [class.flex-row-reverse]=\"options?.button?.icon?.iconPosition === 'left'\">\r\n <div>{{options?.button?.label}}</div>\r\n <div class=\"btn-icon\" *ngIf=\"options?.button?.showIcon \" [ngStyle]=\"{\r\n 'background': button?.styles?.type == 'Text' ? button?.styles?.background : button?.styles?.textColor,\r\n 'mask-image': 'url(' + options?.button?.icon?.url + ')',\r\n 'mask-repeat': 'no-repeat',\r\n 'mask-size': 'cover',\r\n 'width': '25px',\r\n 'height': '25px',\r\n }\">\r\n </div>\r\n </button>\r\n </div>\r\n <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">\r\n <simpo-text-editor [(value)]=\"options.inputText[1].value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"1\" [itemIndex]=\"i\" [isRTE]=\"options.inputText[1]?.isRTE\"></simpo-text-editor>\r\n </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; let j = index\">\r\n <mat-icon>check</mat-icon><simpo-text-editor [(value)]=\"content.content\"\r\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"j\" [itemIndex]=\"i\"></simpo-text-editor>\r\n <!-- {{content.content}} -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"style?.pricingStyle =='STYLE2'\">\r\n <simpo-pricing-s1 [data]=\"data\" [edit]=\"edit\"></simpo-pricing-s1>\r\n </div>\r\n <div [attr.class]=\"getAlignment() + ' mt-3 w-100 d-flex gap-2'\" *ngIf=\"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\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".hover_effect{position:unset;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!important}.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%;border:none;box-shadow:none}.individual-options-2{width:40%}.individual-options-1{width:75%}.individual-options-1 .btn{width:95%}.highlighted-option{margin-top:1rem;margin-bottom:0rem;padding-top:7rem;height:auto;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{right:-2px;padding:5px 17px;display:flex;align-items:flex-start;flex-direction:column;width:auto;position:absolute;top:0;border-top-left-radius:0!important;border-bottom-right-radius:0!important}.button{margin-top:2rem;margin-bottom:.25rem;font-size:17px!important;padding:.75rem 0}.pricing-package{margin-top:10px;width:90%;margin-bottom:10px}@media only screen and (max-width: 475px){.container-fluid{padding:6rem 1rem}.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: 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", "isEcommerce"], 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: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { 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"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: PricingS1Component, selector: "simpo-pricing-s1", inputs: ["data", "edit"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId", "itemIndex"] }] }); }
|
|
12292
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PricingSectionComponent, isStandalone: true, selector: "simpo-pricing-section", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\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 <div [simpoContentTitleSpace]=\"headingSpace\">\r\n <ng-container *ngFor=\"let text of data?.content?.inputText; let i = index\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\r\n </ng-container>\r\n <!-- <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\r\n </div>\r\n <div class=\"pricing-options row\" *ngIf=\"style?.pricingStyle =='STYLE1'\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"style?.corners\" *ngFor=\"let options of content?.listItem?.data; let i = index\"\r\n [ngStyle]=\"{'border': options?.highlight?.highlighted === true ? '3px solid ' + data?.styles?.background?.accentColor : ''}\"\r\n [attr.class]=\"getClass() + ' position-relative'\">\r\n <img loading=\"lazy\" class=\"image w-100\" *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=\"\" loading=\"lazy\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\" [itemIndex]=\"i\"\r\n [class]=\"data?.id+(options?.image?.id || '')\">\r\n <div class=\"highlight-label\" *ngIf=\"options?.highlight?.highlighted === true\"\r\n [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\" [simpoColor]=\"getTextColor()\"\r\n [simpoCorner]=\"style?.corners\">\r\n <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [itemIndex]=\"i\"></simpo-text-editor>\r\n </div>\r\n <div class=\"heading-small\">\r\n <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i\" [isRTE]=\"options.inputText[0]?.isRTE\"></simpo-text-editor>\r\n </div>\r\n <div class=\"heading-large price\">\r\n <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"2\" [itemIndex]=\"i\" [isRTE]=\"options.inputText[2]?.isRTE\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc\">\r\n <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"3\" [itemIndex]=\"i\" [isRTE]=\"options.inputText[3]?.isRTE\"></simpo-text-editor>\r\n </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\" [backgroundInfo]=\"style?.background\" (click)=\"redirectTo()\">{{options?.button?.label}}</button> -->\r\n <button [buttonData]=\"options?.button\" [buttonStyle]=\"button?.styles\" simpoButtonDirective\r\n [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n class=\"d-flex gap-1 align-items-center justify-content-center\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId()\" [itemIndex]=\"i\" (click)=\"redirectTo(options?.button)\"\r\n [class.flex-row-reverse]=\"options?.button?.icon?.iconPosition === 'left'\">\r\n <div>{{options?.button?.label}}</div>\r\n <div class=\"btn-icon\" *ngIf=\"options?.button?.showIcon \" [ngStyle]=\"{\r\n 'background': button?.styles?.type == 'Text' ? button?.styles?.background : button?.styles?.textColor,\r\n 'mask-image': 'url(' + options?.button?.icon?.url + ')',\r\n 'mask-repeat': 'no-repeat',\r\n 'mask-size': 'cover',\r\n 'width': '25px',\r\n 'height': '25px',\r\n }\">\r\n </div>\r\n </button>\r\n </div>\r\n <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">\r\n <simpo-text-editor [(value)]=\"options.inputText[1].value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"1\" [itemIndex]=\"i\" [isRTE]=\"options.inputText[1]?.isRTE\"></simpo-text-editor>\r\n </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; let j = index\">\r\n <mat-icon>check</mat-icon><simpo-text-editor [(value)]=\"content.content\"\r\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"j\" [itemIndex]=\"i\"></simpo-text-editor>\r\n <!-- {{content.content}} -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"style?.pricingStyle =='STYLE2'\">\r\n <simpo-pricing-s1 [data]=\"data\" [edit]=\"edit\"></simpo-pricing-s1>\r\n </div>\r\n <div [attr.class]=\"getAlignment() + ' mt-3 w-100 d-flex gap-2'\" *ngIf=\"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\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".hover_effect{position:unset;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!important}.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%;border:none;box-shadow:none}.individual-options-2{width:40%}.individual-options-1{width:75%}.individual-options-1 .btn{width:95%}.highlighted-option{margin-top:1rem;margin-bottom:0rem;padding-top:7rem;height:auto;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{right:-2px;padding:5px 17px;display:flex;align-items:flex-start;flex-direction:column;width:auto;position:absolute;top:0;border-top-left-radius:0!important;border-bottom-right-radius:0!important}.button{margin-top:2rem;margin-bottom:.25rem;font-size:17px!important;padding:.75rem 0}.pricing-package{margin-top:10px;width:90%;margin-bottom:10px}@media only screen and (max-width: 475px){.container-fluid{padding:6rem 1rem}.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: 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", "isEcommerce"], 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: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth", "itemIndex"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { 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"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: PricingS1Component, selector: "simpo-pricing-s1", inputs: ["data", "edit"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId", "itemIndex"] }] }); }
|
|
12351
12293
|
}
|
|
12352
12294
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PricingSectionComponent, decorators: [{
|
|
12353
12295
|
type: Component,
|
|
@@ -12569,7 +12511,7 @@ class HeaderTextComponent extends BaseSection {
|
|
|
12569
12511
|
this.screenWidth = window.innerWidth;
|
|
12570
12512
|
}
|
|
12571
12513
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderTextComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12572
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderTextComponent, isStandalone: true, selector: "simpo-header-text", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\"\r\n [simpoBackground]=\"styles?.background\">\r\n <div class=\"col-xxl-8 w-100 d-flex\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\" [ngClass]=\"{\r\n 'justify-content-center': styles?.layout?.align === 'center',\r\n 'justify-content-start': styles?.layout?.align === 'left',\r\n 'justify-content-end': styles?.layout?.align === 'right'\r\n }\">\r\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-center': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\"\r\n [ngStyle]=\"(styles?.devider?.display && screenWidth <= 475) ? {'margin-bottom': '45px'} : {}\">\r\n <div class=\"col px-5 content-side\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText; let i = index\">\r\n <!-- <div *ngIf=\"item.label === 'Tagline' || item.label === 'Heading'\" [innerHTML]=\"item.value | sanitizeHtml\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div> -->\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col px-5\" [id]=\"data?.id\">\r\n <!-- <div *ngFor=\"let item of content?.inputText\">\r\n <div *ngIf=\"item.label === 'Subtext'\" [innerHTML]=\"item.value | sanitizeHtml\" class=\"body-large\">\r\n </div>\r\n </div> -->\r\n\r\n\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\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n </div>\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</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px;margin-top:15px}.gap-15{gap:15px}.btn-primary{border:none}@media only screen and (max-width: 475px){.col-10{width:100%;height:32vh;padding-right:13px;padding-left:13px}.flex-column{flex-direction:column!important}.d-flex{justify-content:center}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "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: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
|
12514
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderTextComponent, isStandalone: true, selector: "simpo-header-text", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\"\r\n [simpoBackground]=\"styles?.background\">\r\n <div class=\"col-xxl-8 w-100 d-flex\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\" [ngClass]=\"{\r\n 'justify-content-center': styles?.layout?.align === 'center',\r\n 'justify-content-start': styles?.layout?.align === 'left',\r\n 'justify-content-end': styles?.layout?.align === 'right'\r\n }\">\r\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-center': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\"\r\n [ngStyle]=\"(styles?.devider?.display && screenWidth <= 475) ? {'margin-bottom': '45px'} : {}\">\r\n <div class=\"col px-5 content-side\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText; let i = index\">\r\n <!-- <div *ngIf=\"item.label === 'Tagline' || item.label === 'Heading'\" [innerHTML]=\"item.value | sanitizeHtml\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div> -->\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col px-5\" [id]=\"data?.id\">\r\n <!-- <div *ngFor=\"let item of content?.inputText\">\r\n <div *ngIf=\"item.label === 'Subtext'\" [innerHTML]=\"item.value | sanitizeHtml\" class=\"body-large\">\r\n </div>\r\n </div> -->\r\n\r\n\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\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n </div>\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</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px;margin-top:15px}.gap-15{gap:15px}.btn-primary{border:none}@media only screen and (max-width: 475px){.col-10{width:100%;height:32vh;padding-right:13px;padding-left:13px}.flex-column{flex-direction:column!important}.d-flex{justify-content:center}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth", "itemIndex"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "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: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
|
12573
12515
|
}
|
|
12574
12516
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderTextComponent, decorators: [{
|
|
12575
12517
|
type: Component,
|
|
@@ -14318,21 +14260,31 @@ class LogoShowcaseComponent extends BaseSection {
|
|
|
14318
14260
|
this.logoDirectionClass = this.styles?.logoDirection || logoDirection.Left;
|
|
14319
14261
|
this.isFullWidth = this.styles?.fullWidth || true;
|
|
14320
14262
|
}
|
|
14263
|
+
get carouselItems() {
|
|
14264
|
+
const data = this.content?.listItem?.data ?? [];
|
|
14265
|
+
return [...data, ...data];
|
|
14266
|
+
}
|
|
14267
|
+
get originalItemsLength() {
|
|
14268
|
+
return this.content?.listItem?.data?.length || 1;
|
|
14269
|
+
}
|
|
14270
|
+
trackByIndex(index) {
|
|
14271
|
+
return index;
|
|
14272
|
+
}
|
|
14321
14273
|
get stylesLayout() {
|
|
14322
14274
|
return { ...this.styles?.layout };
|
|
14323
14275
|
}
|
|
14324
14276
|
get animationDuration() {
|
|
14325
14277
|
switch (this.styles?.logoSpeed) {
|
|
14326
14278
|
case '8s':
|
|
14327
|
-
return '
|
|
14279
|
+
return '25s';
|
|
14328
14280
|
case '4s':
|
|
14329
|
-
return '
|
|
14281
|
+
return '20s';
|
|
14330
14282
|
case '3s':
|
|
14331
|
-
return '
|
|
14283
|
+
return '15s';
|
|
14332
14284
|
case '2s':
|
|
14333
|
-
return '
|
|
14285
|
+
return '10s';
|
|
14334
14286
|
case '1s':
|
|
14335
|
-
return '
|
|
14287
|
+
return '8s';
|
|
14336
14288
|
}
|
|
14337
14289
|
return logoSpeed.Normal;
|
|
14338
14290
|
}
|
|
@@ -14386,11 +14338,11 @@ class LogoShowcaseComponent extends BaseSection {
|
|
|
14386
14338
|
}
|
|
14387
14339
|
}
|
|
14388
14340
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LogoShowcaseComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14389
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LogoShowcaseComponent, isStandalone: true, selector: "simpo-logo-showcase", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"styles?.showCaseType==='Grid'\">\r\n <div [id]=\"data?.id\" #mainContainer simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [ngClass]=\"{\r\n 'four-column-colored': data?.sectionType === 'fourcoloumnwithcoloredicons',\r\n 'logo-showcase-style': data?.sectionType === 'logoshowcase'\r\n}\" [simpoBackground]=\"styles?.background\">\r\n <div class=\"py-3 w-100 \" [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\" [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row g-5 gridtext \" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\r\n\r\n <div class=\"top-texts col-6 gridimg content-side\" [id]=\"data?.id\"\r\n [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let item of content?.inputText; let i = index\">\r\n <ng-container *ngIf=\"edit || item.value\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"d-flex flex-wrap flex-1 width-max shadow\" [simpoCorner]=\"styles?.corners\"> -->\r\n <div class=\"d-flex flex-wrap flex-1 width-max\"\r\n [ngClass]=\"{ 'shadow': data?.sectionType === 'fourcoloumnwithcoloredicons' }\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div class=\"slider flex w-full\">\r\n <div class=\"slider-track\" *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides d-flex flex-column\" [id]=\"data?.id\" [class]=\"getAlignment()\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [itemIndex]=\"i\" [class]=\"data?.id+(item?.icon?.id || '')\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\" [itemIndex]=\"i\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"slider-track w-full\"\r\n *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides d-flex flex-column\" [simpoCorner]=\"styles?.corners\"\r\n [class]=\"getAlignment()\" *ngFor=\"let item of content?.listItem?.data; let i = index\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i\" [isRTE]=\"item.inputText[0]?.isRTE\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"slider-track w-full\"\r\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides d-flex flex-column\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n [class]=\"getAlignment()\" *ngFor=\"let item of content?.listItem?.data; let i = index\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [itemIndex]=\"i\" [class]=\"data?.id+(item?.icon?.id || '')\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\" [itemIndex]=\"i\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n <simpo-text-editor class=\"mt-2 w-100\" [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i\" [isRTE]=\"item.inputText[0]?.isRTE\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\r\n <div class=\"px-5 content-side d-flex flex-column\" [id]=\"data?.id\">\r\n\r\n <div *ngFor=\"let item of content?.inputText; let i = index\">\r\n <ng-container *ngIf=\"edit || item.value\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"main-coloums col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div class=\"slider flex w-full\">\r\n <div class=\"slider-track w-full\"\r\n *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides d-flex flex-column\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n [class]=\"getAlignment()\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data; let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [itemIndex]=\"i\" [class]=\"data?.id+(item?.icon?.id || '')\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\" [itemIndex]=\"i\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"slider-track w-full\"\r\n *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides d-flex flex-column\" [simpoCorner]=\"styles?.corners\"\r\n [class]=\"getAlignment()\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data; let i = index\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i\" [isRTE]=\"item.inputText[0]?.isRTE\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"slider-track w-full\"\r\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides d-flex flex-column\" [simpoCorner]=\"styles?.corners\"\r\n *ngFor=\"let item of content?.listItem?.data; let i = index\" [id]=\"data?.id\" [class]=\"getAlignment()\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [itemIndex]=\"i\" [class]=\"data?.id+(item?.icon?.id || '')\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\" [itemIndex]=\"i\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n <simpo-text-editor class=\"mt-2 w-100\" [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i\" [isRTE]=\"item.inputText[0]?.isRTE\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\r\n <div #mainContainer [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [ngClass]=\"{\r\n 'four-column-colored': data?.sectionType === 'fourcoloumnwithcoloredicons',\r\n 'logo-showcase-style': data?.sectionType === 'logoshowcase'\r\n}\">\r\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n [spacingHorizontal]=\"stylesLayout\" [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\"\r\n [simpoBackground]=\"styles?.background\">\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 content-side\" [id]=\"data?.id\"\r\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n\r\n <div *ngFor=\"let item of content?.inputText; let i = index\">\r\n <ng-container *ngIf=\"edit || item.value\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"gap-2 d-md-flex mt-15\" [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{\r\n 'fullwidth flex-1 inline-edit ': styles?.fullWidth,\r\n 'nofullwidth flex-1 inline-edit ': !styles?.fullWidth }\">\r\n <div class=\"masking\">\r\n <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\r\n [style.animationDirection]=\"animationDirection\">\r\n <div class=\"slider-track2\"\r\n *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides2\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\r\n [iconData]=\"item?.icon\" [sectionId]=\"data?.id\" [itemIndex]=\"i\"\r\n [class]=\"data?.id+(item?.icon?.id || '')\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [itemIndex]=\"i\" [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"slider-track2\"\r\n *ngIf=\"content?.display?.showText && !content?.display?.showIcon\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n *ngFor=\"let item of content?.listItem?.data; let i = index\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i\" [isRTE]=\"item.inputText[0]?.isRTE\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"slider-track2 d-flex w-full\"\r\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\"\r\n *ngFor=\"let item of content?.listItem?.data; let i = index\" [id]=\"data?.id\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'align-items-start': styles?.layout?.align === 'left', 'align-items-center': styles?.layout?.align === 'center', 'align-items-end': styles?.layout?.align === 'right' , 'flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\r\n [iconData]=\"item?.icon\" [sectionId]=\"data?.id\" [itemIndex]=\"i\"\r\n [class]=\"data?.id+(item?.icon?.id || '')\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [itemIndex]=\"i\" [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i\" [isRTE]=\"item.inputText[0]?.isRTE\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </div>\r\n</div>", styles: [".sliderdad{width:100%;display:flex}@media (min-width: 860px){.nofullwidth{overflow:hidden}}.slider-track2{min-width:max-content;translate:none;rotate:none;scale:none;gap:1rem;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.mainsec{gap:2rem;flex-direction:column;display:flex}.slider-track2.logotype-boxed{gap:1rem}.slider-track2.logotype-basic{gap:5rem}.slides2.logotype-boxed{padding:1.5rem 1.25rem;--tw-bg-opacity: .05;flex-shrink:0;width:auto;height:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 5px}.slides2.logotype-basic{flex-shrink:0;width:auto;height:auto;display:flex;position:relative}.slides2.img{height:100%;max-width:100%;border-style:solid}@keyframes scrollLeft{0%{transform:translate3d(100%,0,0)}to{transform:translate3d(-100%,0,0)}}@keyframes scrollRight{0%{transform:translate3d(-100%,0,0)}to{transform:translate3d(100%,0,0)}}.animation{animation:scrollLeft linear infinite}.slider-track{justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex;gap:30px}.slider-track.logotype-basic{gap:5rem}.slider-track.logotype-boxed{gap:1rem}.slides.logotype-basic{flex-shrink:0;width:auto;min-height:5rem;height:auto;display:flex;position:relative}.slides.logotype-boxed{padding:1.5rem .625rem;--tw-bg-opacity: .05;box-shadow:#0000002e 0 2px 4px;width:auto;height:auto;display:flex;align-items:center;margin:10px 5px}.width-max{width:max-content;max-width:50%}.slides.texttype-boxed{padding:1.5rem .625rem;justify-content:center;width:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 5px;align-items:center}.slides.texttype-boxed:hover{--tw-bg-opacity: .05;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.slides.img{border-style:solid;max-width:100%;height:100%}@media only screen and (max-width: 500px){.col-xxl-8{padding-left:0!important;padding-right:0!important}.mainsec{padding-right:2rem!important;padding-left:2rem!important}.col-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}.slides img{width:88%}.gridtext{flex-direction:column!important}.gridtext .gridimg{width:100%!important}.gridtext .width-max{max-width:100%!important}}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}.row{margin-left:0;margin-right:0}.justify-items-start{justify-content:flex-start;align-items:flex-start;text-align:left}.justify-items-center{justify-content:center;align-items:center;text-align:center}.justify-items-end{justify-content:flex-end;align-items:flex-end;text-align:right}.four-column-colored .main-coloums{box-shadow:#131d0e1a 0 0 8px;justify-content:center;width:auto;display:flex;position:relative;margin:10px 25px;align-items:center;padding:20px}.masking{mask:linear-gradient(90deg,transparent,white 5%,white 95%,transparent);overflow:hidden;width:100%}.logo-showcase-style .main-coloums,.logo-showcase-style .width-max,.logo-showcase-style .width-max.shadow{box-shadow:none!important}.four-column-colored .slider-track{display:flex!important;flex-wrap:wrap!important;gap:0!important;width:100%!important;align-items:stretch!important}.four-column-colored .slides{flex:0 0 25%!important;max-width:25%!important;padding:20px 10px!important;box-sizing:border-box!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;height:100%!important;min-height:120px!important}.four-column-colored .slider-track2{display:flex!important;flex-wrap:wrap!important;width:100%!important}.four-column-colored .slides2{flex:0 0 25%!important;max-width:25%!important;padding:10px!important;box-sizing:border-box!important}.four-column-colored .slides .logo-img,.four-column-colored .slides img{margin-bottom:12px!important;flex-shrink:0!important;display:flex!important;justify-content:center!important;align-items:center!important}.four-column-colored .slides simpo-text-editor{width:100%!important;flex:1!important}@media only screen and (max-width: 768px){.four-column-colored .slides{flex:0 0 50%!important;max-width:50%!important}}@media only screen and (max-width: 480px){.four-column-colored .slides{flex:0 0 100%!important;max-width:100%!important}}.four-column-colored .top-texts{display:flex!important;flex-direction:column!important;justify-content:center!important;width:47%!important}\n"], dependencies: [{ kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { kind: "directive", type: IconDirectiveDirective, selector: "[simpoIconDirective]", inputs: ["simpoIconDirective", "iconId"] }] }); }
|
|
14341
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LogoShowcaseComponent, isStandalone: true, selector: "simpo-logo-showcase", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"styles?.showCaseType==='Grid'\">\n <div [id]=\"data?.id\" #mainContainer simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [ngClass]=\"{\n 'four-column-colored': data?.sectionType === 'fourcoloumnwithcoloredicons',\n 'logo-showcase-style': data?.sectionType === 'logoshowcase'\n}\" [simpoBackground]=\"styles?.background\">\n <div class=\"py-3 w-100 \" [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [id]=\"data?.id\"\n [simpoAnimation]=\"styles?.animation\" [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\n [spacingHorizontal]=\"stylesLayout\">\n <div class=\"row g-5 gridtext \" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\n *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\n\n <div class=\"top-texts col-6 gridimg content-side\" [id]=\"data?.id\"\n [simpoContentAlignment]=\"styles?.contentAlignment\">\n <div *ngFor=\"let item of content?.inputText; let i = index\">\n <ng-container *ngIf=\"edit || item.value\">\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\n </ng-container>\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n [color]=\"data?.styles?.background?.accentColor\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n </div>\n <!-- <div class=\"d-flex flex-wrap flex-1 width-max shadow\" [simpoCorner]=\"styles?.corners\"> -->\n <div class=\"d-flex flex-wrap flex-1 width-max\"\n [ngClass]=\"{ 'shadow': data?.sectionType === 'fourcoloumnwithcoloredicons' }\"\n [simpoCorner]=\"styles?.corners\">\n <div class=\"slider flex w-full\">\n <div class=\"slider-track\" *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\n <div class=\"slides d-flex flex-column\" [id]=\"data?.id\" [class]=\"getAlignment()\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [itemIndex]=\"i\" [class]=\"data?.id+(item?.icon?.id || '')\"\n [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\" [itemIndex]=\"i\"\n [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"slider-track w-full\"\n *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides d-flex flex-column\" [simpoCorner]=\"styles?.corners\"\n [class]=\"getAlignment()\" *ngFor=\"let item of content?.listItem?.data; let i = index\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i\" [isRTE]=\"item.inputText[0]?.isRTE\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"slider-track w-full\"\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides d-flex flex-column\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n [class]=\"getAlignment()\" *ngFor=\"let item of content?.listItem?.data; let i = index\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [itemIndex]=\"i\" [class]=\"data?.id+(item?.icon?.id || '')\"\n [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\" [itemIndex]=\"i\"\n [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n <simpo-text-editor class=\"mt-2 w-100\" [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i\" [isRTE]=\"item.inputText[0]?.isRTE\"></simpo-text-editor>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\n *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\n <div class=\"px-5 content-side d-flex flex-column\" [id]=\"data?.id\">\n\n <div *ngFor=\"let item of content?.inputText; let i = index\">\n <ng-container *ngIf=\"edit || item.value\">\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\n </ng-container>\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n [color]=\"data?.styles?.background?.accentColor\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n </div>\n <div class=\"main-coloums col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\"\n [simpoCorner]=\"styles?.corners\">\n <div class=\"slider flex w-full\">\n <div class=\"slider-track w-full\"\n *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides d-flex flex-column\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n [class]=\"getAlignment()\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\n *ngFor=\"let item of content?.listItem?.data; let i = index\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [itemIndex]=\"i\" [class]=\"data?.id+(item?.icon?.id || '')\"\n [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\" [itemIndex]=\"i\"\n [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"slider-track w-full\"\n *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides d-flex flex-column\" [simpoCorner]=\"styles?.corners\"\n [class]=\"getAlignment()\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\n *ngFor=\"let item of content?.listItem?.data; let i = index\">\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i\" [isRTE]=\"item.inputText[0]?.isRTE\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"slider-track w-full\"\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides d-flex flex-column\" [simpoCorner]=\"styles?.corners\"\n *ngFor=\"let item of content?.listItem?.data; let i = index\" [id]=\"data?.id\" [class]=\"getAlignment()\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [itemIndex]=\"i\" [class]=\"data?.id+(item?.icon?.id || '')\"\n [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\" [itemIndex]=\"i\"\n [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n <simpo-text-editor class=\"mt-2 w-100\" [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i\" [isRTE]=\"item.inputText[0]?.isRTE\"></simpo-text-editor>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n </div>\n</div>\n\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\n <div #mainContainer [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [ngClass]=\"{\n 'four-column-colored': data?.sectionType === 'fourcoloumnwithcoloredicons',\n 'logo-showcase-style': data?.sectionType === 'logoshowcase'\n}\">\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\n [spacingHorizontal]=\"stylesLayout\" [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\"\n [simpoBackground]=\"styles?.background\">\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\n [simpoLayout]=\"styles?.layout\">\n <div class=\"mainsec content-side\" [id]=\"data?.id\"\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\n\n <div *ngFor=\"let item of content?.inputText; let i = index\">\n <ng-container *ngIf=\"edit || item.value\">\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\n </ng-container>\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"gap-2 d-md-flex mt-15\" [ngClass]=\"[\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\n ]\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n [color]=\"data?.styles?.background?.accentColor\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n\n <div [ngClass]=\"{\n 'fullwidth flex-1 inline-edit ': styles?.fullWidth,\n 'nofullwidth flex-1 inline-edit ': !styles?.fullWidth }\">\n <div class=\"masking\">\n <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\n [style.animationDirection]=\"animationDirection\">\n <div class=\"slider-track2\"\n *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\n <div class=\"slides2\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n *ngFor=\"let item of carouselItems; let i = index; trackBy: trackByIndex\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\n [iconData]=\"item?.icon\" [sectionId]=\"data?.id\" [itemIndex]=\"i % originalItemsLength\"\n [class]=\"data?.id+(item?.icon?.id || '')\"\n [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [itemIndex]=\"i % originalItemsLength\" [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"slider-track2\"\n *ngIf=\"content?.display?.showText && !content?.display?.showIcon\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n *ngFor=\"let item of carouselItems; let i = index; trackBy: trackByIndex\">\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i % originalItemsLength\" [isRTE]=\"item.inputText[0]?.isRTE\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"slider-track2 d-flex w-full\"\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\"\n *ngFor=\"let item of carouselItems; let i = index; trackBy: trackByIndex\" [id]=\"data?.id\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'align-items-start': styles?.layout?.align === 'left', 'align-items-center': styles?.layout?.align === 'center', 'align-items-end': styles?.layout?.align === 'right' , 'flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\n [iconData]=\"item?.icon\" [sectionId]=\"data?.id\" [itemIndex]=\"i % originalItemsLength\"\n [class]=\"data?.id+(item?.icon?.id || '')\"\n [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [itemIndex]=\"i % originalItemsLength\" [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i % originalItemsLength\" [isRTE]=\"item.inputText[0]?.isRTE\"></simpo-text-editor>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n </div>\n</div>", styles: [".sliderdad{width:100%;display:flex}@media (min-width: 860px){.nofullwidth{overflow:hidden}}.slider-track2{min-width:max-content;translate:none;rotate:none;scale:none;gap:1rem;justify-content:center;align-items:center;flex-wrap:nowrap;width:max-content;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:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 5px}.slides2.logotype-basic{flex-shrink:0;width:auto;height:auto;display:flex;position:relative}.slides2.img{height:100%;max-width:100%;border-style:solid}@keyframes scrollLeft{0%{transform:translateZ(0)}to{transform:translate3d(-50%,0,0)}}@keyframes scrollRight{0%{transform:translate3d(-50%,0,0)}to{transform:translateZ(0)}}.animation{animation:scrollLeft linear infinite}.slider.animation{display:flex;width:max-content;flex-wrap:nowrap}.slider-track{justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex;gap:30px}.slider-track.logotype-basic{gap:5rem}.slider-track.logotype-boxed{gap:1rem}.slides.logotype-basic{flex-shrink:0;width:auto;min-height:5rem;height:auto;display:flex;position:relative}.slides.logotype-boxed{padding:1.5rem .625rem;--tw-bg-opacity: .05;box-shadow:#0000002e 0 2px 4px;width:auto;height:auto;display:flex;align-items:center;margin:10px 5px}.width-max{width:max-content;max-width:50%}.slides.texttype-boxed{padding:1.5rem .625rem;justify-content:center;width:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 5px;align-items:center}.slides.texttype-boxed:hover{--tw-bg-opacity: .05;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.slides.img{border-style:solid;max-width:100%;height:100%}@media only screen and (max-width: 500px){.col-xxl-8{padding-left:0!important;padding-right:0!important}.mainsec{padding-right:2rem!important;padding-left:2rem!important}.col-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}.slides img{width:88%}.gridtext{flex-direction:column!important}.gridtext .gridimg{width:100%!important}.gridtext .width-max{max-width:100%!important}}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}.row{margin-left:0;margin-right:0}.justify-items-start{justify-content:flex-start;align-items:flex-start;text-align:left}.justify-items-center{justify-content:center;align-items:center;text-align:center}.justify-items-end{justify-content:flex-end;align-items:flex-end;text-align:right}.four-column-colored .main-coloums{box-shadow:#131d0e1a 0 0 8px;justify-content:center;width:auto;display:flex;position:relative;margin:10px 25px;align-items:center;padding:20px}.masking{mask:linear-gradient(90deg,transparent,white 5%,white 95%,transparent);overflow:hidden;width:100%}.logo-showcase-style .main-coloums,.logo-showcase-style .width-max,.logo-showcase-style .width-max.shadow{box-shadow:none!important}.four-column-colored .slider-track{display:flex!important;flex-wrap:wrap!important;gap:0!important;width:100%!important;align-items:stretch!important}.four-column-colored .slides{flex:0 0 25%!important;max-width:25%!important;padding:20px 10px!important;box-sizing:border-box!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;height:100%!important;min-height:120px!important}.four-column-colored .slider-track2{display:flex!important;flex-wrap:wrap!important;width:100%!important}.four-column-colored .slides2{flex:0 0 25%!important;max-width:25%!important;padding:10px!important;box-sizing:border-box!important}.four-column-colored .slides .logo-img,.four-column-colored .slides img{margin-bottom:12px!important;flex-shrink:0!important;display:flex!important;justify-content:center!important;align-items:center!important}.four-column-colored .slides simpo-text-editor{width:100%!important;flex:1!important}@media only screen and (max-width: 768px){.four-column-colored .slides{flex:0 0 50%!important;max-width:50%!important}}@media only screen and (max-width: 480px){.four-column-colored .slides{flex:0 0 100%!important;max-width:100%!important}}.four-column-colored .top-texts{display:flex!important;flex-direction:column!important;justify-content:center!important;width:47%!important}\n"], dependencies: [{ kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth", "itemIndex"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { kind: "directive", type: IconDirectiveDirective, selector: "[simpoIconDirective]", inputs: ["simpoIconDirective", "iconId"] }] }); }
|
|
14390
14342
|
}
|
|
14391
14343
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LogoShowcaseComponent, decorators: [{
|
|
14392
14344
|
type: Component,
|
|
14393
|
-
args: [{ selector: 'simpo-logo-showcase', standalone: true, imports: [SimpoButtonComponent, SimpoElementsModule, TextEditorComponent, SimpoComponentModule, CommonModule, MatGridListModule, AnimationDirective, BackgroundDirective, ContentFitDirective, BorderDirective, BannerContentFitDirective, ButtonDirectiveDirective, ColumnDirectiveDirective, ContainerFitDirective, CornerDirective, simpoConetenAlignmentDirective, SimpoFooterLayoutDirective, HoverDirective, ImageDirectiveDirective, OverlayDirective, PositionLayoutDirectiveDirective, TextBackgroundDirectiveDirective, SpacingHorizontalDirective, ObjectPositionDirective, ImageEditorDirective, IconDirectiveDirective], template: "<div *ngIf=\"styles?.showCaseType==='Grid'\">\r\n <div [id]=\"data?.id\" #mainContainer simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [ngClass]=\"{\r\n 'four-column-colored': data?.sectionType === 'fourcoloumnwithcoloredicons',\r\n 'logo-showcase-style': data?.sectionType === 'logoshowcase'\r\n}\" [simpoBackground]=\"styles?.background\">\r\n <div class=\"py-3 w-100 \" [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\" [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row g-5 gridtext \" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\r\n\r\n <div class=\"top-texts col-6 gridimg content-side\" [id]=\"data?.id\"\r\n [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let item of content?.inputText; let i = index\">\r\n <ng-container *ngIf=\"edit || item.value\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"d-flex flex-wrap flex-1 width-max shadow\" [simpoCorner]=\"styles?.corners\"> -->\r\n <div class=\"d-flex flex-wrap flex-1 width-max\"\r\n [ngClass]=\"{ 'shadow': data?.sectionType === 'fourcoloumnwithcoloredicons' }\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div class=\"slider flex w-full\">\r\n <div class=\"slider-track\" *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides d-flex flex-column\" [id]=\"data?.id\" [class]=\"getAlignment()\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [itemIndex]=\"i\" [class]=\"data?.id+(item?.icon?.id || '')\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\" [itemIndex]=\"i\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"slider-track w-full\"\r\n *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides d-flex flex-column\" [simpoCorner]=\"styles?.corners\"\r\n [class]=\"getAlignment()\" *ngFor=\"let item of content?.listItem?.data; let i = index\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i\" [isRTE]=\"item.inputText[0]?.isRTE\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"slider-track w-full\"\r\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides d-flex flex-column\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n [class]=\"getAlignment()\" *ngFor=\"let item of content?.listItem?.data; let i = index\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [itemIndex]=\"i\" [class]=\"data?.id+(item?.icon?.id || '')\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\" [itemIndex]=\"i\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n <simpo-text-editor class=\"mt-2 w-100\" [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i\" [isRTE]=\"item.inputText[0]?.isRTE\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\r\n <div class=\"px-5 content-side d-flex flex-column\" [id]=\"data?.id\">\r\n\r\n <div *ngFor=\"let item of content?.inputText; let i = index\">\r\n <ng-container *ngIf=\"edit || item.value\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"main-coloums col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div class=\"slider flex w-full\">\r\n <div class=\"slider-track w-full\"\r\n *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides d-flex flex-column\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n [class]=\"getAlignment()\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data; let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [itemIndex]=\"i\" [class]=\"data?.id+(item?.icon?.id || '')\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\" [itemIndex]=\"i\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"slider-track w-full\"\r\n *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides d-flex flex-column\" [simpoCorner]=\"styles?.corners\"\r\n [class]=\"getAlignment()\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data; let i = index\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i\" [isRTE]=\"item.inputText[0]?.isRTE\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"slider-track w-full\"\r\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides d-flex flex-column\" [simpoCorner]=\"styles?.corners\"\r\n *ngFor=\"let item of content?.listItem?.data; let i = index\" [id]=\"data?.id\" [class]=\"getAlignment()\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [itemIndex]=\"i\" [class]=\"data?.id+(item?.icon?.id || '')\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\" [itemIndex]=\"i\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n <simpo-text-editor class=\"mt-2 w-100\" [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i\" [isRTE]=\"item.inputText[0]?.isRTE\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\r\n <div #mainContainer [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [ngClass]=\"{\r\n 'four-column-colored': data?.sectionType === 'fourcoloumnwithcoloredicons',\r\n 'logo-showcase-style': data?.sectionType === 'logoshowcase'\r\n}\">\r\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n [spacingHorizontal]=\"stylesLayout\" [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\"\r\n [simpoBackground]=\"styles?.background\">\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 content-side\" [id]=\"data?.id\"\r\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n\r\n <div *ngFor=\"let item of content?.inputText; let i = index\">\r\n <ng-container *ngIf=\"edit || item.value\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"gap-2 d-md-flex mt-15\" [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{\r\n 'fullwidth flex-1 inline-edit ': styles?.fullWidth,\r\n 'nofullwidth flex-1 inline-edit ': !styles?.fullWidth }\">\r\n <div class=\"masking\">\r\n <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\r\n [style.animationDirection]=\"animationDirection\">\r\n <div class=\"slider-track2\"\r\n *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides2\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\r\n [iconData]=\"item?.icon\" [sectionId]=\"data?.id\" [itemIndex]=\"i\"\r\n [class]=\"data?.id+(item?.icon?.id || '')\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [itemIndex]=\"i\" [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"slider-track2\"\r\n *ngIf=\"content?.display?.showText && !content?.display?.showIcon\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n *ngFor=\"let item of content?.listItem?.data; let i = index\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i\" [isRTE]=\"item.inputText[0]?.isRTE\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"slider-track2 d-flex w-full\"\r\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\"\r\n *ngFor=\"let item of content?.listItem?.data; let i = index\" [id]=\"data?.id\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'align-items-start': styles?.layout?.align === 'left', 'align-items-center': styles?.layout?.align === 'center', 'align-items-end': styles?.layout?.align === 'right' , 'flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\r\n [iconData]=\"item?.icon\" [sectionId]=\"data?.id\" [itemIndex]=\"i\"\r\n [class]=\"data?.id+(item?.icon?.id || '')\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [itemIndex]=\"i\" [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i\" [isRTE]=\"item.inputText[0]?.isRTE\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </div>\r\n</div>", styles: [".sliderdad{width:100%;display:flex}@media (min-width: 860px){.nofullwidth{overflow:hidden}}.slider-track2{min-width:max-content;translate:none;rotate:none;scale:none;gap:1rem;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.mainsec{gap:2rem;flex-direction:column;display:flex}.slider-track2.logotype-boxed{gap:1rem}.slider-track2.logotype-basic{gap:5rem}.slides2.logotype-boxed{padding:1.5rem 1.25rem;--tw-bg-opacity: .05;flex-shrink:0;width:auto;height:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 5px}.slides2.logotype-basic{flex-shrink:0;width:auto;height:auto;display:flex;position:relative}.slides2.img{height:100%;max-width:100%;border-style:solid}@keyframes scrollLeft{0%{transform:translate3d(100%,0,0)}to{transform:translate3d(-100%,0,0)}}@keyframes scrollRight{0%{transform:translate3d(-100%,0,0)}to{transform:translate3d(100%,0,0)}}.animation{animation:scrollLeft linear infinite}.slider-track{justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex;gap:30px}.slider-track.logotype-basic{gap:5rem}.slider-track.logotype-boxed{gap:1rem}.slides.logotype-basic{flex-shrink:0;width:auto;min-height:5rem;height:auto;display:flex;position:relative}.slides.logotype-boxed{padding:1.5rem .625rem;--tw-bg-opacity: .05;box-shadow:#0000002e 0 2px 4px;width:auto;height:auto;display:flex;align-items:center;margin:10px 5px}.width-max{width:max-content;max-width:50%}.slides.texttype-boxed{padding:1.5rem .625rem;justify-content:center;width:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 5px;align-items:center}.slides.texttype-boxed:hover{--tw-bg-opacity: .05;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.slides.img{border-style:solid;max-width:100%;height:100%}@media only screen and (max-width: 500px){.col-xxl-8{padding-left:0!important;padding-right:0!important}.mainsec{padding-right:2rem!important;padding-left:2rem!important}.col-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}.slides img{width:88%}.gridtext{flex-direction:column!important}.gridtext .gridimg{width:100%!important}.gridtext .width-max{max-width:100%!important}}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}.row{margin-left:0;margin-right:0}.justify-items-start{justify-content:flex-start;align-items:flex-start;text-align:left}.justify-items-center{justify-content:center;align-items:center;text-align:center}.justify-items-end{justify-content:flex-end;align-items:flex-end;text-align:right}.four-column-colored .main-coloums{box-shadow:#131d0e1a 0 0 8px;justify-content:center;width:auto;display:flex;position:relative;margin:10px 25px;align-items:center;padding:20px}.masking{mask:linear-gradient(90deg,transparent,white 5%,white 95%,transparent);overflow:hidden;width:100%}.logo-showcase-style .main-coloums,.logo-showcase-style .width-max,.logo-showcase-style .width-max.shadow{box-shadow:none!important}.four-column-colored .slider-track{display:flex!important;flex-wrap:wrap!important;gap:0!important;width:100%!important;align-items:stretch!important}.four-column-colored .slides{flex:0 0 25%!important;max-width:25%!important;padding:20px 10px!important;box-sizing:border-box!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;height:100%!important;min-height:120px!important}.four-column-colored .slider-track2{display:flex!important;flex-wrap:wrap!important;width:100%!important}.four-column-colored .slides2{flex:0 0 25%!important;max-width:25%!important;padding:10px!important;box-sizing:border-box!important}.four-column-colored .slides .logo-img,.four-column-colored .slides img{margin-bottom:12px!important;flex-shrink:0!important;display:flex!important;justify-content:center!important;align-items:center!important}.four-column-colored .slides simpo-text-editor{width:100%!important;flex:1!important}@media only screen and (max-width: 768px){.four-column-colored .slides{flex:0 0 50%!important;max-width:50%!important}}@media only screen and (max-width: 480px){.four-column-colored .slides{flex:0 0 100%!important;max-width:100%!important}}.four-column-colored .top-texts{display:flex!important;flex-direction:column!important;justify-content:center!important;width:47%!important}\n"] }]
|
|
14345
|
+
args: [{ selector: 'simpo-logo-showcase', standalone: true, imports: [SimpoButtonComponent, SimpoElementsModule, TextEditorComponent, SimpoComponentModule, CommonModule, MatGridListModule, AnimationDirective, BackgroundDirective, ContentFitDirective, BorderDirective, BannerContentFitDirective, ButtonDirectiveDirective, ColumnDirectiveDirective, ContainerFitDirective, CornerDirective, simpoConetenAlignmentDirective, SimpoFooterLayoutDirective, HoverDirective, ImageDirectiveDirective, OverlayDirective, PositionLayoutDirectiveDirective, TextBackgroundDirectiveDirective, SpacingHorizontalDirective, ObjectPositionDirective, ImageEditorDirective, IconDirectiveDirective], template: "<div *ngIf=\"styles?.showCaseType==='Grid'\">\n <div [id]=\"data?.id\" #mainContainer simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [ngClass]=\"{\n 'four-column-colored': data?.sectionType === 'fourcoloumnwithcoloredicons',\n 'logo-showcase-style': data?.sectionType === 'logoshowcase'\n}\" [simpoBackground]=\"styles?.background\">\n <div class=\"py-3 w-100 \" [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [id]=\"data?.id\"\n [simpoAnimation]=\"styles?.animation\" [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\n [spacingHorizontal]=\"stylesLayout\">\n <div class=\"row g-5 gridtext \" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\n *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\n\n <div class=\"top-texts col-6 gridimg content-side\" [id]=\"data?.id\"\n [simpoContentAlignment]=\"styles?.contentAlignment\">\n <div *ngFor=\"let item of content?.inputText; let i = index\">\n <ng-container *ngIf=\"edit || item.value\">\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\n </ng-container>\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n [color]=\"data?.styles?.background?.accentColor\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n </div>\n <!-- <div class=\"d-flex flex-wrap flex-1 width-max shadow\" [simpoCorner]=\"styles?.corners\"> -->\n <div class=\"d-flex flex-wrap flex-1 width-max\"\n [ngClass]=\"{ 'shadow': data?.sectionType === 'fourcoloumnwithcoloredicons' }\"\n [simpoCorner]=\"styles?.corners\">\n <div class=\"slider flex w-full\">\n <div class=\"slider-track\" *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\n <div class=\"slides d-flex flex-column\" [id]=\"data?.id\" [class]=\"getAlignment()\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [itemIndex]=\"i\" [class]=\"data?.id+(item?.icon?.id || '')\"\n [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\" [itemIndex]=\"i\"\n [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"slider-track w-full\"\n *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides d-flex flex-column\" [simpoCorner]=\"styles?.corners\"\n [class]=\"getAlignment()\" *ngFor=\"let item of content?.listItem?.data; let i = index\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i\" [isRTE]=\"item.inputText[0]?.isRTE\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"slider-track w-full\"\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides d-flex flex-column\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n [class]=\"getAlignment()\" *ngFor=\"let item of content?.listItem?.data; let i = index\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [itemIndex]=\"i\" [class]=\"data?.id+(item?.icon?.id || '')\"\n [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\" [itemIndex]=\"i\"\n [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n <simpo-text-editor class=\"mt-2 w-100\" [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i\" [isRTE]=\"item.inputText[0]?.isRTE\"></simpo-text-editor>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\n *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\n <div class=\"px-5 content-side d-flex flex-column\" [id]=\"data?.id\">\n\n <div *ngFor=\"let item of content?.inputText; let i = index\">\n <ng-container *ngIf=\"edit || item.value\">\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\n </ng-container>\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n [color]=\"data?.styles?.background?.accentColor\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n </div>\n <div class=\"main-coloums col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\"\n [simpoCorner]=\"styles?.corners\">\n <div class=\"slider flex w-full\">\n <div class=\"slider-track w-full\"\n *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides d-flex flex-column\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n [class]=\"getAlignment()\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\n *ngFor=\"let item of content?.listItem?.data; let i = index\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [itemIndex]=\"i\" [class]=\"data?.id+(item?.icon?.id || '')\"\n [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\" [itemIndex]=\"i\"\n [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"slider-track w-full\"\n *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides d-flex flex-column\" [simpoCorner]=\"styles?.corners\"\n [class]=\"getAlignment()\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\n *ngFor=\"let item of content?.listItem?.data; let i = index\">\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i\" [isRTE]=\"item.inputText[0]?.isRTE\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"slider-track w-full\"\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides d-flex flex-column\" [simpoCorner]=\"styles?.corners\"\n *ngFor=\"let item of content?.listItem?.data; let i = index\" [id]=\"data?.id\" [class]=\"getAlignment()\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [itemIndex]=\"i\" [class]=\"data?.id+(item?.icon?.id || '')\"\n [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\" [itemIndex]=\"i\"\n [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n <simpo-text-editor class=\"mt-2 w-100\" [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i\" [isRTE]=\"item.inputText[0]?.isRTE\"></simpo-text-editor>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n </div>\n</div>\n\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\n <div #mainContainer [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [ngClass]=\"{\n 'four-column-colored': data?.sectionType === 'fourcoloumnwithcoloredicons',\n 'logo-showcase-style': data?.sectionType === 'logoshowcase'\n}\">\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\n [spacingHorizontal]=\"stylesLayout\" [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\"\n [simpoBackground]=\"styles?.background\">\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\n [simpoLayout]=\"styles?.layout\">\n <div class=\"mainsec content-side\" [id]=\"data?.id\"\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\n\n <div *ngFor=\"let item of content?.inputText; let i = index\">\n <ng-container *ngIf=\"edit || item.value\">\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\n </ng-container>\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"gap-2 d-md-flex mt-15\" [ngClass]=\"[\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\n ]\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n [color]=\"data?.styles?.background?.accentColor\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n\n <div [ngClass]=\"{\n 'fullwidth flex-1 inline-edit ': styles?.fullWidth,\n 'nofullwidth flex-1 inline-edit ': !styles?.fullWidth }\">\n <div class=\"masking\">\n <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\n [style.animationDirection]=\"animationDirection\">\n <div class=\"slider-track2\"\n *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\n <div class=\"slides2\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n *ngFor=\"let item of carouselItems; let i = index; trackBy: trackByIndex\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\n [iconData]=\"item?.icon\" [sectionId]=\"data?.id\" [itemIndex]=\"i % originalItemsLength\"\n [class]=\"data?.id+(item?.icon?.id || '')\"\n [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [itemIndex]=\"i % originalItemsLength\" [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"slider-track2\"\n *ngIf=\"content?.display?.showText && !content?.display?.showIcon\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n *ngFor=\"let item of carouselItems; let i = index; trackBy: trackByIndex\">\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i % originalItemsLength\" [isRTE]=\"item.inputText[0]?.isRTE\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"slider-track2 d-flex w-full\"\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\"\n *ngFor=\"let item of carouselItems; let i = index; trackBy: trackByIndex\" [id]=\"data?.id\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'align-items-start': styles?.layout?.align === 'left', 'align-items-center': styles?.layout?.align === 'center', 'align-items-end': styles?.layout?.align === 'right' , 'flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\n [iconData]=\"item?.icon\" [sectionId]=\"data?.id\" [itemIndex]=\"i % originalItemsLength\"\n [class]=\"data?.id+(item?.icon?.id || '')\"\n [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [itemIndex]=\"i % originalItemsLength\" [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i % originalItemsLength\" [isRTE]=\"item.inputText[0]?.isRTE\"></simpo-text-editor>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n </div>\n</div>", styles: [".sliderdad{width:100%;display:flex}@media (min-width: 860px){.nofullwidth{overflow:hidden}}.slider-track2{min-width:max-content;translate:none;rotate:none;scale:none;gap:1rem;justify-content:center;align-items:center;flex-wrap:nowrap;width:max-content;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:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 5px}.slides2.logotype-basic{flex-shrink:0;width:auto;height:auto;display:flex;position:relative}.slides2.img{height:100%;max-width:100%;border-style:solid}@keyframes scrollLeft{0%{transform:translateZ(0)}to{transform:translate3d(-50%,0,0)}}@keyframes scrollRight{0%{transform:translate3d(-50%,0,0)}to{transform:translateZ(0)}}.animation{animation:scrollLeft linear infinite}.slider.animation{display:flex;width:max-content;flex-wrap:nowrap}.slider-track{justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex;gap:30px}.slider-track.logotype-basic{gap:5rem}.slider-track.logotype-boxed{gap:1rem}.slides.logotype-basic{flex-shrink:0;width:auto;min-height:5rem;height:auto;display:flex;position:relative}.slides.logotype-boxed{padding:1.5rem .625rem;--tw-bg-opacity: .05;box-shadow:#0000002e 0 2px 4px;width:auto;height:auto;display:flex;align-items:center;margin:10px 5px}.width-max{width:max-content;max-width:50%}.slides.texttype-boxed{padding:1.5rem .625rem;justify-content:center;width:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 5px;align-items:center}.slides.texttype-boxed:hover{--tw-bg-opacity: .05;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.slides.img{border-style:solid;max-width:100%;height:100%}@media only screen and (max-width: 500px){.col-xxl-8{padding-left:0!important;padding-right:0!important}.mainsec{padding-right:2rem!important;padding-left:2rem!important}.col-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}.slides img{width:88%}.gridtext{flex-direction:column!important}.gridtext .gridimg{width:100%!important}.gridtext .width-max{max-width:100%!important}}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}.row{margin-left:0;margin-right:0}.justify-items-start{justify-content:flex-start;align-items:flex-start;text-align:left}.justify-items-center{justify-content:center;align-items:center;text-align:center}.justify-items-end{justify-content:flex-end;align-items:flex-end;text-align:right}.four-column-colored .main-coloums{box-shadow:#131d0e1a 0 0 8px;justify-content:center;width:auto;display:flex;position:relative;margin:10px 25px;align-items:center;padding:20px}.masking{mask:linear-gradient(90deg,transparent,white 5%,white 95%,transparent);overflow:hidden;width:100%}.logo-showcase-style .main-coloums,.logo-showcase-style .width-max,.logo-showcase-style .width-max.shadow{box-shadow:none!important}.four-column-colored .slider-track{display:flex!important;flex-wrap:wrap!important;gap:0!important;width:100%!important;align-items:stretch!important}.four-column-colored .slides{flex:0 0 25%!important;max-width:25%!important;padding:20px 10px!important;box-sizing:border-box!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;height:100%!important;min-height:120px!important}.four-column-colored .slider-track2{display:flex!important;flex-wrap:wrap!important;width:100%!important}.four-column-colored .slides2{flex:0 0 25%!important;max-width:25%!important;padding:10px!important;box-sizing:border-box!important}.four-column-colored .slides .logo-img,.four-column-colored .slides img{margin-bottom:12px!important;flex-shrink:0!important;display:flex!important;justify-content:center!important;align-items:center!important}.four-column-colored .slides simpo-text-editor{width:100%!important;flex:1!important}@media only screen and (max-width: 768px){.four-column-colored .slides{flex:0 0 50%!important;max-width:50%!important}}@media only screen and (max-width: 480px){.four-column-colored .slides{flex:0 0 100%!important;max-width:100%!important}}.four-column-colored .top-texts{display:flex!important;flex-direction:column!important;justify-content:center!important;width:47%!important}\n"] }]
|
|
14394
14346
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
14395
14347
|
type: Input
|
|
14396
14348
|
}], index: [{
|
|
@@ -14582,7 +14534,7 @@ class BannerCarouselComponent extends BaseSection {
|
|
|
14582
14534
|
return isMobile ? '560px' : '420px';
|
|
14583
14535
|
}
|
|
14584
14536
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BannerCarouselComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14585
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BannerCarouselComponent, isStandalone: true, selector: "simpo-banner-carousel", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "carouselElement", first: true, predicate: ["carouselElement"], descendants: true }, { propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"banner-carousel-shell flex relative fix-safari-flickering\" [ngStyle]=\"{\r\n 'min-height': getSectionMinHeight(),\r\n 'padding-top': '0px',\r\n 'padding-bottom': '0px'\r\n }\" [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"flex break-word w-full items-center overflow-hidden banner-carousel-content\" [id]=\"data?.id\">\r\n\r\n <div #carouselElement id=\"carouselExampleInterval\" class=\"carousel slide banner-carousel\"\r\n [attr.data-bs-ride]=\"!edit ? 'carousel' : null\" data-bs-pause=\"false\">\r\n\r\n <ol class=\"carousel-indicators\" *ngIf=\"(content?.listItem?.data?.length || 0) > 1\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\"\r\n [attr.data-bs-target]=\"'#carouselExampleInterval'\" [attr.data-bs-slide-to]=\"i\" [class.active]=\"i === 0\"\r\n [attr.aria-current]=\"i === 0 ? 'true' : null\">\r\n </li>\r\n </ol>\r\n\r\n <div class=\"carousel-inner banner-carousel-inner\">\r\n <div *ngFor=\"let item of content?.listItem?.data; let i = index\" class=\"carousel-item banner-carousel-item\"\r\n [class.active]=\"i === 0\">\r\n <img loading=\"lazy\" [src]=\"item.image.url\" [simpoBlurContent]=\"getBlurValue\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"item?.image?.position\" class=\"imgclass banner-carousel-image\"\r\n [alt]=\"item?.image?.altText || 'Carousel image'\" [appImageEditor]=\"edit || false\"\r\n [class]=\"data?.id+item.image.id\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [itemIndex]=\"i\"\r\n *ngIf=\"item?.image?.url\" />\r\n </div>\r\n\r\n <div class=\"col-xxl-8 mx-auto relative opacity-100 position-relative text-wrapper\" text-content-layer\r\n style=\"z-index: 1;\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\">\r\n\r\n <div class=\"row g-5 justify-content-start content-side text-container\" [id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\"\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 d-flex flex-column \"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText; let i = index\">\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\"\r\n [inputTextIndex]=\"i\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"customclass w-full mb-3\" [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\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleInterval\" role=\"button\" data-bs-slide=\"prev\"\r\n *ngIf=\"(content?.listItem?.data?.length || 0) > 1\">\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\r\n <a class=\"carousel-control-next\" data-bs-target=\"#carouselExampleInterval\" role=\"button\" data-bs-slide=\"next\"\r\n *ngIf=\"(content?.listItem?.data?.length || 0) > 1\">\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 </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\" (click)=\"editSection()\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".total-container{height:auto;position:relative;width:100%}.banner-carousel-shell{width:100%;position:relative;overflow:hidden}.banner-carousel-content{width:100%}.banner-carousel{width:100%;position:relative}.carousel-inner,.banner-carousel-inner{position:relative;width:100%;height:100%}.carousel-item,.banner-carousel-item{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;transition:transform .9s cubic-bezier(.16,1,.3,1)!important;overflow:hidden}.carousel-item.active,.banner-carousel-item.active{position:absolute;inset:0;pointer-events:auto;z-index:1}.banner-carousel-image,.carousel-item img{position:absolute;top:0;left:0;width:100%;height:100%!important;min-height:100%;min-width:100%;object-fit:cover;z-index:0;transition:object-position .25s ease}.overlay{position:absolute;inset:0;width:100%;height:100%;opacity:0;z-index:1}.text-content-layer{position:relative!important;z-index:2!important;display:flex;align-items:center;justify-content:center;min-height:inherit;width:100%;pointer-events:auto}.carousel-indicators li{width:10px;height:10px;background-color:#332e2e80;border-radius:50%;display:inline-block;margin:0 5px;border:none;transition:background-color .3s ease}.carousel-control-next,.carousel-control-prev{width:5%!important}.carousel-indicators .active{width:10px;height:10px;background-color:#fff;border-radius:50%}.carousel-indicators{bottom:0!important;z-index:3}.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:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.banner-carousel-shell,.banner-carousel,.carousel-inner,.banner-carousel-inner{min-height:560px!important;height:auto!important}.carousel-item,.banner-carousel-item,.carousel-item.active,.banner-carousel-item.active{min-height:560px!important;height:100%!important}.banner-carousel-image,.carousel-item img{width:100%!important;height:100%!important;min-height:560px!important;object-fit:cover!important}.carousel-indicators{margin-bottom:unset!important}.text-content-layer{position:relative!important;inset:unset;min-height:560px!important;padding-top:24px;padding-bottom:24px}.text-wrapper{width:100%!important;padding-left:18px;padding-right:18px}.text-container{width:100%!important;margin:0!important}}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}.text-wrapper{width:88vw!important}.text-container{width:86vw!important;padding-top:2rem}\n"], dependencies: [{ kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "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"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }] }); }
|
|
14537
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BannerCarouselComponent, isStandalone: true, selector: "simpo-banner-carousel", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "carouselElement", first: true, predicate: ["carouselElement"], descendants: true }, { propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"banner-carousel-shell flex relative fix-safari-flickering\" [ngStyle]=\"{\r\n 'min-height': getSectionMinHeight(),\r\n 'padding-top': '0px',\r\n 'padding-bottom': '0px'\r\n }\" [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"flex break-word w-full items-center overflow-hidden banner-carousel-content\" [id]=\"data?.id\">\r\n\r\n <div #carouselElement id=\"carouselExampleInterval\" class=\"carousel slide banner-carousel\"\r\n [attr.data-bs-ride]=\"!edit ? 'carousel' : null\" data-bs-pause=\"false\">\r\n\r\n <ol class=\"carousel-indicators\" *ngIf=\"(content?.listItem?.data?.length || 0) > 1\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\"\r\n [attr.data-bs-target]=\"'#carouselExampleInterval'\" [attr.data-bs-slide-to]=\"i\" [class.active]=\"i === 0\"\r\n [attr.aria-current]=\"i === 0 ? 'true' : null\">\r\n </li>\r\n </ol>\r\n\r\n <div class=\"carousel-inner banner-carousel-inner\">\r\n <div *ngFor=\"let item of content?.listItem?.data; let i = index\" class=\"carousel-item banner-carousel-item\"\r\n [class.active]=\"i === 0\">\r\n <img loading=\"lazy\" [src]=\"item.image.url\" [simpoBlurContent]=\"getBlurValue\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"item?.image?.position\" class=\"imgclass banner-carousel-image\"\r\n [alt]=\"item?.image?.altText || 'Carousel image'\" [appImageEditor]=\"edit || false\"\r\n [class]=\"data?.id+item.image.id\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [itemIndex]=\"i\"\r\n *ngIf=\"item?.image?.url\" />\r\n </div>\r\n\r\n <div class=\"col-xxl-8 mx-auto relative opacity-100 position-relative text-wrapper\" text-content-layer\r\n style=\"z-index: 1;\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\">\r\n\r\n <div class=\"row g-5 justify-content-start content-side text-container\" [id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\"\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 d-flex flex-column \"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText; let i = index\">\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\"\r\n [inputTextIndex]=\"i\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"customclass w-full mb-3\" [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\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleInterval\" role=\"button\" data-bs-slide=\"prev\"\r\n *ngIf=\"(content?.listItem?.data?.length || 0) > 1\">\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\r\n <a class=\"carousel-control-next\" data-bs-target=\"#carouselExampleInterval\" role=\"button\" data-bs-slide=\"next\"\r\n *ngIf=\"(content?.listItem?.data?.length || 0) > 1\">\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 </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\" (click)=\"editSection()\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".total-container{height:auto;position:relative;width:100%}.banner-carousel-shell{width:100%;position:relative;overflow:hidden}.banner-carousel-content{width:100%}.banner-carousel{width:100%;position:relative}.carousel-inner,.banner-carousel-inner{position:relative;width:100%;height:100%}.carousel-item,.banner-carousel-item{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;transition:transform .9s cubic-bezier(.16,1,.3,1)!important;overflow:hidden}.carousel-item.active,.banner-carousel-item.active{position:absolute;inset:0;pointer-events:auto;z-index:1}.banner-carousel-image,.carousel-item img{position:absolute;top:0;left:0;width:100%;height:100%!important;min-height:100%;min-width:100%;object-fit:cover;z-index:0;transition:object-position .25s ease}.overlay{position:absolute;inset:0;width:100%;height:100%;opacity:0;z-index:1}.text-content-layer{position:relative!important;z-index:2!important;display:flex;align-items:center;justify-content:center;min-height:inherit;width:100%;pointer-events:auto}.carousel-indicators li{width:10px;height:10px;background-color:#332e2e80;border-radius:50%;display:inline-block;margin:0 5px;border:none;transition:background-color .3s ease}.carousel-control-next,.carousel-control-prev{width:5%!important}.carousel-indicators .active{width:10px;height:10px;background-color:#fff;border-radius:50%}.carousel-indicators{bottom:0!important;z-index:3}.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:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.banner-carousel-shell,.banner-carousel,.carousel-inner,.banner-carousel-inner{min-height:560px!important;height:auto!important}.carousel-item,.banner-carousel-item,.carousel-item.active,.banner-carousel-item.active{min-height:560px!important;height:100%!important}.banner-carousel-image,.carousel-item img{width:100%!important;height:100%!important;min-height:560px!important;object-fit:cover!important}.carousel-indicators{margin-bottom:unset!important}.text-content-layer{position:relative!important;inset:unset;min-height:560px!important;padding-top:24px;padding-bottom:24px}.text-wrapper{width:100%!important;padding-left:18px;padding-right:18px}.text-container{width:100%!important;margin:0!important}}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}.text-wrapper{width:88vw!important}.text-container{width:86vw!important;padding-top:2rem}\n"], dependencies: [{ kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth", "itemIndex"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "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"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }] }); }
|
|
14586
14538
|
}
|
|
14587
14539
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BannerCarouselComponent, decorators: [{
|
|
14588
14540
|
type: Component,
|
|
@@ -14773,7 +14725,7 @@ class CarouselBannerComponent extends BaseSection {
|
|
|
14773
14725
|
}, 100);
|
|
14774
14726
|
}
|
|
14775
14727
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CarouselBannerComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14776
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CarouselBannerComponent, isStandalone: true, selector: "simpo-carousel-banner", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, 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 <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 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 <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> -->\r\n\r\n<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage}\"\r\n [attr.style]=\"customClass\">\r\n <div class=\"flex relative fix-safari-flickering\">\r\n <div class=\"flex break-word w-full items-center\">\r\n <div id=\"carouselExampleControls\" class=\"carousel slide\" data-bs-ride=\"carousel\">\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=\"#carouselExampleInterval\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol> -->\r\n <div class=\"carousel-inner\">\r\n <div *ngFor=\"let item of data?.content?.listItem?.data; let i = index\" class=\"carousel-item\"\r\n [ngClass]=\"{'active': i === currentIndex}\">\r\n <div [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"data?.styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': data?.styles?.positionLayout?.value === 'left' || data?.styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div [id]=\"item?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage}\"\r\n [simpoBackground]=\"item?.styles?.background\" style=\"height: 100%;\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div [simpoAnimation]=\"data?.styles?.animation\" [id]=\"data?.id\"\r\n [simpoLayout]=\"data?.styles?.layout\">\r\n <div class=\"px-4 py-5\"\r\n [ngClass]=\"{'col-lg-6 col-xxl-6': isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage}\"\r\n [id]=\"data?.id\" #mainContainer [simpoBorder]=\"item?.styles?.border\">\r\n <div class=\"row g-5 justify-content-start\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"data?.styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': data?.styles?.positionLayout?.value === 'left' || data?.styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n *ngIf=\"item?.image?.showImage && !isBorderlessImage\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <img [src]=\"item?.image?.url\"\r\n [simpoImageDirective]=\"item?.styles?.image\" [id]=\"item?.id\"\r\n [simpoObjectPosition]=\"item?.image?.position\"\r\n [simpoCorner]=\"item?.styles?.corners\"\r\n [class]=\"item?.id+(item?.image?.id || '')\"\r\n class=\"d-block w-100 insideImg\" style=\"object-fit: cover;\"\r\n [alt]=\"item?.image?.altText\" width=\"700\" height=\"500\"\r\n loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n [ngClass]=\"{'col-lg-12': isBorderlessImage, 'col-lg-6': !isBorderlessImage}\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"item?.id\"\r\n [simpoContentAlignment]=\"item?.styles?.contentAlignment\">\r\n <div *ngFor=\"let ipText of item?.inputText; let j = index\">\r\n <!-- <div [innerHTML]=\"ipText.value | sanitizeHtml\" class=\"text-element\"\r\n [ngClass]=\"ipText.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"ipText.value\"\r\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"j\" [itemIndex]=\"i\" [isRTE]=\"ipText.isRTE\"></simpo-text-editor>\r\n </div>\r\n <div *ngFor=\"let itemData of item?.additionalData; let k = index\" 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 d-flex align-items-center\"\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\" style=\"width: 20px;\" />\r\n <simpo-text-editor [(value)]=\"itemData.content\"\r\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"k\" [itemIndex]=\"i\"></simpo-text-editor>\r\n <!-- {{ itemData.content }} -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"item?.action && item?.action?.display\"\r\n class=\"button-display\" [simpoContainerAlignment]=\"stylesLayout\">\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\" [edit]=\"edit\"\r\n [color]=\"item?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"item?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngStyle]=\"{'width': styles?.positionLayout?.value === 'right' ? 'fit-content' : ''}\"\r\n style=\"padding: 0px !important;\"\r\n *ngIf=\"item?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout\">\r\n <img [src]=\"item?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [alt]=\"item?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n </div>\r\n </ng-template>\r\n\r\n <!-- <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".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{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-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:unset;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}.button-display{display:flex;gap:10px}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "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: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }] }); }
|
|
14728
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CarouselBannerComponent, isStandalone: true, selector: "simpo-carousel-banner", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, 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 <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 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 <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> -->\r\n\r\n<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage}\"\r\n [attr.style]=\"customClass\">\r\n <div class=\"flex relative fix-safari-flickering\">\r\n <div class=\"flex break-word w-full items-center\">\r\n <div id=\"carouselExampleControls\" class=\"carousel slide\" data-bs-ride=\"carousel\">\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=\"#carouselExampleInterval\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol> -->\r\n <div class=\"carousel-inner\">\r\n <div *ngFor=\"let item of data?.content?.listItem?.data; let i = index\" class=\"carousel-item\"\r\n [ngClass]=\"{'active': i === currentIndex}\">\r\n <div [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"data?.styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': data?.styles?.positionLayout?.value === 'left' || data?.styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div [id]=\"item?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage}\"\r\n [simpoBackground]=\"item?.styles?.background\" style=\"height: 100%;\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div [simpoAnimation]=\"data?.styles?.animation\" [id]=\"data?.id\"\r\n [simpoLayout]=\"data?.styles?.layout\">\r\n <div class=\"px-4 py-5\"\r\n [ngClass]=\"{'col-lg-6 col-xxl-6': isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage}\"\r\n [id]=\"data?.id\" #mainContainer [simpoBorder]=\"item?.styles?.border\">\r\n <div class=\"row g-5 justify-content-start\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"data?.styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': data?.styles?.positionLayout?.value === 'left' || data?.styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n *ngIf=\"item?.image?.showImage && !isBorderlessImage\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <img [src]=\"item?.image?.url\"\r\n [simpoImageDirective]=\"item?.styles?.image\" [id]=\"item?.id\"\r\n [simpoObjectPosition]=\"item?.image?.position\"\r\n [simpoCorner]=\"item?.styles?.corners\"\r\n [class]=\"item?.id+(item?.image?.id || '')\"\r\n class=\"d-block w-100 insideImg\" style=\"object-fit: cover;\"\r\n [alt]=\"item?.image?.altText\" width=\"700\" height=\"500\"\r\n loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n [ngClass]=\"{'col-lg-12': isBorderlessImage, 'col-lg-6': !isBorderlessImage}\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"item?.id\"\r\n [simpoContentAlignment]=\"item?.styles?.contentAlignment\">\r\n <div *ngFor=\"let ipText of item?.inputText; let j = index\">\r\n <!-- <div [innerHTML]=\"ipText.value | sanitizeHtml\" class=\"text-element\"\r\n [ngClass]=\"ipText.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"ipText.value\"\r\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"j\" [itemIndex]=\"i\" [isRTE]=\"ipText.isRTE\"></simpo-text-editor>\r\n </div>\r\n <div *ngFor=\"let itemData of item?.additionalData; let k = index\" 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 d-flex align-items-center\"\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\" style=\"width: 20px;\" />\r\n <simpo-text-editor [(value)]=\"itemData.content\"\r\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"k\" [itemIndex]=\"i\"></simpo-text-editor>\r\n <!-- {{ itemData.content }} -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"item?.action && item?.action?.display\"\r\n class=\"button-display\" [simpoContainerAlignment]=\"stylesLayout\">\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\" [edit]=\"edit\"\r\n [color]=\"item?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"item?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngStyle]=\"{'width': styles?.positionLayout?.value === 'right' ? 'fit-content' : ''}\"\r\n style=\"padding: 0px !important;\"\r\n *ngIf=\"item?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout\">\r\n <img [src]=\"item?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [alt]=\"item?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n </div>\r\n </ng-template>\r\n\r\n <!-- <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".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{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-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:unset;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}.button-display{display:flex;gap:10px}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth", "itemIndex"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "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: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }] }); }
|
|
14777
14729
|
}
|
|
14778
14730
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CarouselBannerComponent, decorators: [{
|
|
14779
14731
|
type: Component,
|
|
@@ -16130,7 +16082,7 @@ class AppointmentFormComponent extends BaseSection {
|
|
|
16130
16082
|
}
|
|
16131
16083
|
}
|
|
16132
16084
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppointmentFormComponent, deps: [{ token: EventsService }, { token: i1$2.MatDialog }, { token: RestService }, { token: i2$3.MatSnackBar }, { token: i3.DatePipe }, { token: i2$2.Router }, { token: LOCAL_STORAGE }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16133
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AppointmentFormComponent, isStandalone: true, selector: "simpo-appointment-form", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [DatePipe], usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage , 'd-block': isBorderlessImage}\"\r\n class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\">\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row\"\r\n [ngClass]=\"{'row' : isBorderlessImage}\" [simpoCorner]=\"styles?.corners\"\r\n [ngClass]=\"{'flex-column-reverse': isBorderlessImage && styles?.positionLayout?.value === 'top' , 'flex-column': isBorderlessImage && styles?.positionLayout?.value === 'bottom'}\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"py-5\"\r\n [ngClass]=\"{'col-lg-6 col-xxl-6': content?.image?.showImage && isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage || !content?.image?.showImage , 'col-lg-12 col-md-12 col-12 width-100': isBorderlessImage && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')}\"\r\n [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"row g-5 justify-content-start mlr-0 h-auto\" [id]=\"data?.id\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage && !isBorderlessImage\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n [ngClass]=\"{'col-lg-12': content?.image?.showImage && isBorderlessImage, 'col-lg-6':!isBorderlessImage || !content?.image?.showImage}\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div *ngFor=\"let item of content?.inputText; let i = index\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 card-container\"\r\n [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n </div>\r\n <div class=\"first-part-card d-flex align-items-center\"\r\n [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img loading=\"lazy\" class=\"tick-img\" [src]=\"item?.icon?.url\" alt=\"something\" />\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" (click)=\"opendailogbox(dialogBox)\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngClass]=\"{'w-100' : content?.image?.showImage && isBorderlessImage && styles?.positionLayout?.value == 'top' || styles?.positionLayout?.value == 'bottom'}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<!-- Dialog template -->\r\n<ng-template #dialogBox class=\"dialogbox\">\r\n <div class=\"appointment-form\">\r\n <div class=\"header-section\">\r\n <div class=\"header-left-side\">\r\n <h2 style=\"text-align: left;\">Book an Appointment</h2>\r\n </div>\r\n <div class=\"header-right-side d-flex align-item-center justify-content-center\">\r\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <form>\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Name</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input class=\"inputStyle\" matInput placeholder=\"Enter Your Name\" pattern=\"[a-zA-Z ]*\"\r\n [(ngModel)]=\"CreateData.clientName\" (ngModelChange)=\"onUserNameChange($event)\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Mobile Number</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input type=\"text\" class=\"inputStyle\" matInput placeholder=\"Enter Your Mobile Number\"\r\n pattern=\"^[0-9]{10,15}$\" maxlength=\"15\" (focus)=\"onFocus()\" (keypress)=\"restrictNonNumeric($event)\"\r\n [(ngModel)]=\"CreateData.mobile\" [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Location</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Location\" [(ngModel)]=\"selectedLocation\"\r\n (ngModelChange)=\"getFilteredServices()\" [ngModelOptions]=\"{standalone: true}\">\r\n <ng-container *ngFor=\"let store of storeList\">\r\n <mat-option [value]=\"store.id\">\r\n {{ store.storeName }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Service</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Service\" [(ngModel)]=\"selectedServices\"\r\n (ngModelChange)=\"getFilteredLocation()\" [ngModelOptions]=\"{standalone: true}\">\r\n <ng-container *ngFor=\"let service of serviceList\">\r\n <mat-option [value]=\"service\">\r\n {{ service.name }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"name-mobile\" *ngIf=\"selectedLocation && selectedServices\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Staff</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Staff\" [(ngModel)]=\"selectedStaff\"\r\n (ngModelChange)=\"getBookingSlots()\" [ngModelOptions]=\"{standalone: true}\">\r\n <ng-container *ngFor=\"let staff of staffList\">\r\n <mat-option [value]=\"staff\">\r\n {{ staff.staffName }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Date</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input class=\"inputStyle\" matInput [matDatepicker]=\"picker\" placeholder=\"Select Date\"\r\n [(ngModel)]=\"CreateData.scheduledDate\" (ngModelChange)=\"getBookingSlots()\" [min]=\"minDate\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"sfull-width\" *ngIf=\"CreateData.scheduledDate && selectedServices\">\r\n <div class=\"input-text\">Time</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Location\" [(ngModel)]=\"CreateData.scheduledTime\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n <mat-option *ngFor=\"let time of locationTiming\" [value]=\"time\">\r\n {{ time }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n </div>\r\n </div>\r\n\r\n\r\n <!-- <div class=\"full-message-section\">\r\n <div class=\"business-field-section\">\r\n <div class=\"input-text\">Message</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input class=\"inputStyle\" matInput placeholder=\"Enter Your Name\" pattern=\"[a-zA-Z ]*\"\r\n [(ngModel)]=\"CreateData.message\" [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n </div>\r\n </div> -->\r\n\r\n <div class=\"bottom-section\">\r\n <div class=\"button-section\">\r\n <button class=\"booking-button\" (click)=\"checkPayment()\" [style.background]=\"getAccentColor()\" [simpoColor]=\"styles?.background?.accentColor\" *ngIf=\"!loader\">\r\n Book Appointment\r\n </button>\r\n <button class=\"booking-button\" disabled *ngIf=\"loader\" [style.background]=\"getAccentColor()\" [simpoColor]=\"styles?.background?.accentColor\">\r\n <span class=\"spinner-border spinner-border-sm mr-2\" role=\"status\" aria-hidden=\"true\"></span>\r\n Booking...\r\n </button>\r\n </div>\r\n </div>\r\n\r\n\r\n </form>\r\n </div>\r\n</ng-template>", styles: [".btn-primary{border:none}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.width-100{width:100%!important}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.box{background:#fff;border:8px solid rgb(232 232 232 / 80%);box-shadow:#63636333 0 2px 8px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}.card-container,.name-mobile{flex-direction:column}.sfull-width{width:100%!important}.appointment-form{box-shadow:none!important}}.text-element{inline-size:100%;overflow-wrap:break-word}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}.ml-5{margin-left:5px}.mlr-0{margin-left:0;margin-right:0}.d-block{display:block!important}.appointment-form{width:50vw;background-color:#fff;border-radius:18px;padding:20px;box-shadow:0 4px 8px #0000001a}h2{text-align:center;margin-bottom:20px}.form-group{display:flex;flex-direction:column;margin-bottom:15px;width:100%}label{font-weight:700;margin-bottom:5px}input,select,textarea{padding:8px;border:1px solid #ccc;border-radius:4px;font-size:14px}input::placeholder,textarea::placeholder{color:#888}.name-mobile,.date-time{display:flex;justify-content:space-between}textarea{resize:vertical}.book-btn{width:100%;background-color:#007bff;color:#fff;border:none;padding:10px;border-radius:4px;font-size:16px;cursor:pointer}.book-btn:hover{background-color:#0056b3}.bottom-section{width:100%;display:flex;justify-content:center;margin-top:15px}.button-section{width:100%;margin:10px 0}.booking-button{border-radius:4px;padding:7px 5px;border:none}.header-section{display:flex;width:100%;justify-content:space-between}.header-left-side{width:50%;white-space:nowrap}.header-right-side{width:5%;cursor:pointer;margin-bottom:25px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}.button-section{width:100%!important}.appointment-form{width:100vw}}.sfull-width{width:49%;height:75px}.input-text{margin-bottom:5px}.full-width{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i12.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i12.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i15.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i15.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i15.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i10.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type:
|
|
16085
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AppointmentFormComponent, isStandalone: true, selector: "simpo-appointment-form", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [DatePipe], usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage , 'd-block': isBorderlessImage}\"\r\n class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\">\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row\"\r\n [ngClass]=\"{'row' : isBorderlessImage}\" [simpoCorner]=\"styles?.corners\"\r\n [ngClass]=\"{'flex-column-reverse': isBorderlessImage && styles?.positionLayout?.value === 'top' , 'flex-column': isBorderlessImage && styles?.positionLayout?.value === 'bottom'}\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"py-5\"\r\n [ngClass]=\"{'col-lg-6 col-xxl-6': content?.image?.showImage && isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage || !content?.image?.showImage , 'col-lg-12 col-md-12 col-12 width-100': isBorderlessImage && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')}\"\r\n [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"row g-5 justify-content-start mlr-0 h-auto\" [id]=\"data?.id\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage && !isBorderlessImage\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n [ngClass]=\"{'col-lg-12': content?.image?.showImage && isBorderlessImage, 'col-lg-6':!isBorderlessImage || !content?.image?.showImage}\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div *ngFor=\"let item of content?.inputText; let i = index\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 card-container\"\r\n [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n </div>\r\n <div class=\"first-part-card d-flex align-items-center\"\r\n [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img loading=\"lazy\" class=\"tick-img\" [src]=\"item?.icon?.url\" alt=\"something\" />\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" (click)=\"opendailogbox(dialogBox)\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngClass]=\"{'w-100' : content?.image?.showImage && isBorderlessImage && styles?.positionLayout?.value == 'top' || styles?.positionLayout?.value == 'bottom'}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<!-- Dialog template -->\r\n<ng-template #dialogBox class=\"dialogbox\">\r\n <div class=\"appointment-form\">\r\n <div class=\"header-section\">\r\n <div class=\"header-left-side\">\r\n <h2 style=\"text-align: left;\">Book an Appointment</h2>\r\n </div>\r\n <div class=\"header-right-side d-flex align-item-center justify-content-center\">\r\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <form>\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Name</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input class=\"inputStyle\" matInput placeholder=\"Enter Your Name\" pattern=\"[a-zA-Z ]*\"\r\n [(ngModel)]=\"CreateData.clientName\" (ngModelChange)=\"onUserNameChange($event)\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Mobile Number</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input type=\"text\" class=\"inputStyle\" matInput placeholder=\"Enter Your Mobile Number\"\r\n pattern=\"^[0-9]{10,15}$\" maxlength=\"15\" (focus)=\"onFocus()\" (keypress)=\"restrictNonNumeric($event)\"\r\n [(ngModel)]=\"CreateData.mobile\" [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Location</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Location\" [(ngModel)]=\"selectedLocation\"\r\n (ngModelChange)=\"getFilteredServices()\" [ngModelOptions]=\"{standalone: true}\">\r\n <ng-container *ngFor=\"let store of storeList\">\r\n <mat-option [value]=\"store.id\">\r\n {{ store.storeName }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Service</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Service\" [(ngModel)]=\"selectedServices\"\r\n (ngModelChange)=\"getFilteredLocation()\" [ngModelOptions]=\"{standalone: true}\">\r\n <ng-container *ngFor=\"let service of serviceList\">\r\n <mat-option [value]=\"service\">\r\n {{ service.name }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"name-mobile\" *ngIf=\"selectedLocation && selectedServices\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Staff</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Staff\" [(ngModel)]=\"selectedStaff\"\r\n (ngModelChange)=\"getBookingSlots()\" [ngModelOptions]=\"{standalone: true}\">\r\n <ng-container *ngFor=\"let staff of staffList\">\r\n <mat-option [value]=\"staff\">\r\n {{ staff.staffName }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Date</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input class=\"inputStyle\" matInput [matDatepicker]=\"picker\" placeholder=\"Select Date\"\r\n [(ngModel)]=\"CreateData.scheduledDate\" (ngModelChange)=\"getBookingSlots()\" [min]=\"minDate\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"sfull-width\" *ngIf=\"CreateData.scheduledDate && selectedServices\">\r\n <div class=\"input-text\">Time</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Location\" [(ngModel)]=\"CreateData.scheduledTime\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n <mat-option *ngFor=\"let time of locationTiming\" [value]=\"time\">\r\n {{ time }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n </div>\r\n </div>\r\n\r\n\r\n <!-- <div class=\"full-message-section\">\r\n <div class=\"business-field-section\">\r\n <div class=\"input-text\">Message</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input class=\"inputStyle\" matInput placeholder=\"Enter Your Name\" pattern=\"[a-zA-Z ]*\"\r\n [(ngModel)]=\"CreateData.message\" [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n </div>\r\n </div> -->\r\n\r\n <div class=\"bottom-section\">\r\n <div class=\"button-section\">\r\n <button class=\"booking-button\" (click)=\"checkPayment()\" [style.background]=\"getAccentColor()\" [simpoColor]=\"styles?.background?.accentColor\" *ngIf=\"!loader\">\r\n Book Appointment\r\n </button>\r\n <button class=\"booking-button\" disabled *ngIf=\"loader\" [style.background]=\"getAccentColor()\" [simpoColor]=\"styles?.background?.accentColor\">\r\n <span class=\"spinner-border spinner-border-sm mr-2\" role=\"status\" aria-hidden=\"true\"></span>\r\n Booking...\r\n </button>\r\n </div>\r\n </div>\r\n\r\n\r\n </form>\r\n </div>\r\n</ng-template>", styles: [".btn-primary{border:none}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.width-100{width:100%!important}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.box{background:#fff;border:8px solid rgb(232 232 232 / 80%);box-shadow:#63636333 0 2px 8px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}.card-container,.name-mobile{flex-direction:column}.sfull-width{width:100%!important}.appointment-form{box-shadow:none!important}}.text-element{inline-size:100%;overflow-wrap:break-word}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}.ml-5{margin-left:5px}.mlr-0{margin-left:0;margin-right:0}.d-block{display:block!important}.appointment-form{width:50vw;background-color:#fff;border-radius:18px;padding:20px;box-shadow:0 4px 8px #0000001a}h2{text-align:center;margin-bottom:20px}.form-group{display:flex;flex-direction:column;margin-bottom:15px;width:100%}label{font-weight:700;margin-bottom:5px}input,select,textarea{padding:8px;border:1px solid #ccc;border-radius:4px;font-size:14px}input::placeholder,textarea::placeholder{color:#888}.name-mobile,.date-time{display:flex;justify-content:space-between}textarea{resize:vertical}.book-btn{width:100%;background-color:#007bff;color:#fff;border:none;padding:10px;border-radius:4px;font-size:16px;cursor:pointer}.book-btn:hover{background-color:#0056b3}.bottom-section{width:100%;display:flex;justify-content:center;margin-top:15px}.button-section{width:100%;margin:10px 0}.booking-button{border-radius:4px;padding:7px 5px;border:none}.header-section{display:flex;width:100%;justify-content:space-between}.header-left-side{width:50%;white-space:nowrap}.header-right-side{width:5%;cursor:pointer;margin-bottom:25px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}.button-section{width:100%!important}.appointment-form{width:100vw}}.sfull-width{width:49%;height:75px}.input-text{margin-bottom:5px}.full-width{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth", "itemIndex"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i12.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i12.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i15.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i15.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i15.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i10.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type:
|
|
16134
16086
|
//directive
|
|
16135
16087
|
SimpoBorderlessDirective, selector: "[simpoBorderless]", inputs: ["simpoBorderless"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }] }); }
|
|
16136
16088
|
}
|
|
@@ -18313,7 +18265,7 @@ class CountdownBannerComponent extends BaseSection {
|
|
|
18313
18265
|
}
|
|
18314
18266
|
}
|
|
18315
18267
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CountdownBannerComponent, deps: [{ token: EventsService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18316
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CountdownBannerComponent, isStandalone: true, selector: "simpo-countdown-banner", inputs: { edit: "edit", data: "data", customClass: "customClass", nextComponentColor: "nextComponentColor", index: "index", delete: "delete", isHeaderRenderer: "isHeaderRenderer" }, usesInheritance: true, ngImport: i0, template: "<section>\n <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"sale-wrapper total-container\"\n [attr.style]=\"customClass\" [simpoBackground]=\"style?.background\" [simpoOverlay]=\"style?.background\">\n <div #mainContainer [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\n class=\"sale-bar\">\n <!-- LEFT TEXT -->\n <div class=\"sale-text\">\n <simpo-text-editor *ngIf=\"content?.inputText?.[0] as countdownText\" [(value)]=\"countdownText.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\"></simpo-text-editor>\n </div>\n\n <!-- TIMER -->\n <div class=\"sale-timer\" [style.color]=\"getContrastColor(style?.background?.accentColor)\">\n <div class=\"time-card\" [ngStyle]=\"{'background':getAccentBackground() }\">\n <span>{{ getDays(content?.endDate)}}</span>\n <small>DAY</small>\n </div>\n <div class=\"time-card\" [ngStyle]=\"{'background':getAccentBackground() }\">\n <span>{{ getHours(content?.endDate) }}</span>\n <small>HOUR</small>\n </div>\n <div class=\"time-card\" [ngStyle]=\"{'background':getAccentBackground() }\">\n <span>{{ getMinutes(content?.endDate) }}</span>\n <small>MIN</small>\n </div>\n <div class=\"time-card\" [ngStyle]=\"{'background':getAccentBackground() }\">\n <span>{{ getSeconds(content?.endDate) }}</span>\n <small>SEC</small>\n </div>\n </div>\n\n <!-- RIGHT ACTION -->\n <div class=\"sale-action\">\n <ng-container *ngIf=\"data?.action?.display\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\n [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Divider -->\n <ng-container *ngIf=\"style?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n\n <!-- EDIT SELECTOR -->\n <div [ngClass]=\"{ hover_effect: edit }\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n\n <!-- DELETE SELECTOR -->\n <div *ngIf=\"showDelete\" [ngClass]=\"{ hover_effect: delete }\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n </div>\n</section>", styles: [".sale-wrapper{width:100%}.total-container{height:auto;position:relative}.sale-bar{width:100%;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:8px 32px}.sale-text{font-size:18px;font-weight:700;white-space:nowrap}.sale-timer{display:flex;align-items:baseline;gap:6px}.time-card{background-color:#fff;padding:5px 12px;border-radius:20px;display:flex;align-items:baseline;gap:4px;white-space:nowrap}.time-card span{font-size:15px;font-weight:800}.time-card small{font-size:11px;font-weight:600;opacity:.85}.sale-action{display:flex;align-items:center;gap:20px}.shop-button{background-color:#fff;color:#1c2a39;border:none;padding:5px 14px;border-radius:30px;font-size:14px;font-weight:500;cursor:pointer;transition:.3s ease}.shop-button:hover{background-color:#f2f2f2}.close-icon{font-size:20px;cursor:pointer;opacity:.8}.close-icon:hover{opacity:1}@media (max-width: 768px){.sale-bar{flex-direction:column;gap:20px;text-align:center}.sale-action{justify-content:center}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }] }); }
|
|
18268
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CountdownBannerComponent, isStandalone: true, selector: "simpo-countdown-banner", inputs: { edit: "edit", data: "data", customClass: "customClass", nextComponentColor: "nextComponentColor", index: "index", delete: "delete", isHeaderRenderer: "isHeaderRenderer" }, usesInheritance: true, ngImport: i0, template: "<section>\n <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"sale-wrapper total-container\"\n [attr.style]=\"customClass\" [simpoBackground]=\"style?.background\" [simpoOverlay]=\"style?.background\">\n <div #mainContainer [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\n class=\"sale-bar\">\n <!-- LEFT TEXT -->\n <div class=\"sale-text\">\n <simpo-text-editor *ngIf=\"content?.inputText?.[0] as countdownText\" [(value)]=\"countdownText.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\"></simpo-text-editor>\n </div>\n\n <!-- TIMER -->\n <div class=\"sale-timer\" [style.color]=\"getContrastColor(style?.background?.accentColor)\">\n <div class=\"time-card\" [ngStyle]=\"{'background':getAccentBackground() }\">\n <span>{{ getDays(content?.endDate)}}</span>\n <small>DAY</small>\n </div>\n <div class=\"time-card\" [ngStyle]=\"{'background':getAccentBackground() }\">\n <span>{{ getHours(content?.endDate) }}</span>\n <small>HOUR</small>\n </div>\n <div class=\"time-card\" [ngStyle]=\"{'background':getAccentBackground() }\">\n <span>{{ getMinutes(content?.endDate) }}</span>\n <small>MIN</small>\n </div>\n <div class=\"time-card\" [ngStyle]=\"{'background':getAccentBackground() }\">\n <span>{{ getSeconds(content?.endDate) }}</span>\n <small>SEC</small>\n </div>\n </div>\n\n <!-- RIGHT ACTION -->\n <div class=\"sale-action\">\n <ng-container *ngIf=\"data?.action?.display\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\n [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Divider -->\n <ng-container *ngIf=\"style?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n\n <!-- EDIT SELECTOR -->\n <div [ngClass]=\"{ hover_effect: edit }\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n\n <!-- DELETE SELECTOR -->\n <div *ngIf=\"showDelete\" [ngClass]=\"{ hover_effect: delete }\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n </div>\n</section>", styles: [".sale-wrapper{width:100%}.total-container{height:auto;position:relative}.sale-bar{width:100%;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:8px 32px}.sale-text{font-size:18px;font-weight:700;white-space:nowrap}.sale-timer{display:flex;align-items:baseline;gap:6px}.time-card{background-color:#fff;padding:5px 12px;border-radius:20px;display:flex;align-items:baseline;gap:4px;white-space:nowrap}.time-card span{font-size:15px;font-weight:800}.time-card small{font-size:11px;font-weight:600;opacity:.85}.sale-action{display:flex;align-items:center;gap:20px}.shop-button{background-color:#fff;color:#1c2a39;border:none;padding:5px 14px;border-radius:30px;font-size:14px;font-weight:500;cursor:pointer;transition:.3s ease}.shop-button:hover{background-color:#f2f2f2}.close-icon{font-size:20px;cursor:pointer;opacity:.8}.close-icon:hover{opacity:1}@media (max-width: 768px){.sale-bar{flex-direction:column;gap:20px;text-align:center}.sale-action{justify-content:center}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth", "itemIndex"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }] }); }
|
|
18317
18269
|
}
|
|
18318
18270
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CountdownBannerComponent, decorators: [{
|
|
18319
18271
|
type: Component,
|
|
@@ -18963,7 +18915,7 @@ class HeaderSectionComponent {
|
|
|
18963
18915
|
}
|
|
18964
18916
|
}
|
|
18965
18917
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, deps: [{ token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i1$2.MatDialog }, { token: StorageServiceService }, { token: RestService }, { token: EventsService }, { token: LOCAL_STORAGE }, { token: PLATFORM_ID }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18966
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderSectionComponent, isStandalone: true, selector: "simpo-header-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }, { propertyName: "mobileOffcanvas", first: true, predicate: ["mobileOffcanvas"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\n [class.margin-bottom]=\"shouldReserveMobileHeaderSpace\">\n <div [simpoSticky]=\"resolvedStickyType\" (stickyScrolled)=\"onStickyScrolled($event)\"\n [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\n simpoHover [class.bg-transparent]=\"isComponentMerged && !isScrolled && !isMobile\"\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\" [class.dropdown-open]=\"showList\">\n <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\n <ng-container *ngIf=\"style?.headline?.display\">\n <div>\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"style?.countdown?.display\">\n <simpo-countdown-banner [data]=\"data?.content?.countdownBanner\" [edit]=\"false\" [delete]=\"false\"\n [isHeaderRenderer]=\"true\">\n </simpo-countdown-banner>\n </ng-container>\n\n <div *ngIf=\"style?.styling === 'Header1' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header2' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header3' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header4' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\n </div>\n\n <div [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" *ngIf=\"isEcommerceWebsite\"\n [simpoLayout]=\"screenWidth > 475 ? stylesLayout : undefined\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"ecommerce_header\"></ng-container>\n </div>\n\n <!-- <div class=\"input-group mx-2 mb-2 w-96\" *ngIf=\"isMobile && isEcommerceWebsite && !restrictCartBarInPages()\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search for items\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">search</mat-icon>\n </div> -->\n\n <ng-container *ngIf=\"isEcommerceWebsite && !isMobile && data?.styles?.menuType === 'MEGA_MENU'\">\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n </div>\n\n <ng-container\n *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader() && data?.styles?.enableHeaderCarousel\">\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\n </ng-container>\n </div>\n\n <!-- <ng-container *ngIf=\"isEcommerceWebsite && isMobile && !restrictInPages()\">\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\n </ng-container> -->\n\n <ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.FULL_SCREEN && isFullScreenMenuOpen\">\n <ng-container *ngTemplateOutlet=\"fullScreenMenuTemplate\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.BOTTOM_STICKY && isMobile\">\n <ng-container *ngTemplateOutlet=\"bottomStickyNavTemplate\"></ng-container>\n </ng-container>\n</section>\n\n<ng-template #header1Template>\n <div class=\"header1\">\n <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 94 : ''\">\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </div>\n <!-- HAMBURGER -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n </div>\n <!-- FULL SCREEN -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header2Template>\n <div class=\"header1\">\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n </div>\n <!-- HAMBURGER -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <!-- FULL SCREEN -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header3Template>\n <div class=\"header1\">\n <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </ng-container>\n <!-- HAMBURGER -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n </div>\n <!-- FULL SCREEN -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header4Template>\n <div class=\"header1\">\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container> </ng-container>\n <!-- HAMBURGER -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <!-- FULL SCREEN -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #logoSectionTemplate>\n <div class=\"d-flex gap-3 align-center cursor-pointer mx-1\"\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size + 80\" loading=\"lazy\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b>{{content?.siteName?.value}}</b>\n </div>\n </div>\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : \n ((content?.logo?.size >= 60 && content?.logo?.size <= 100) ? (20) : ((content?.logo?.size || 10) - 10))\"\n [class.w-75]=\"screenWidth < 475\" loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"\n (click)=\"!edit ? goToHome() : ''\">\n <!-- </div> -->\n</ng-template>\n\n<ng-template #pageLinksTemplate>\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\n <ng-container *ngIf=\"screenWidth > 475; else pageLinksDefault\">\n <div class=\"dropdown_menu_static w-100\"\n (mouseleave)=\"showList = false; selectedCategory = null; openSubmenuChild = null\">\n <div class=\"dd-nav-scroll\">\n <div class=\"dd-nav\">\n <ng-container *ngFor=\"let item of footerMenu\">\n <ng-container *ngIf=\"item.showHeader\">\n <div class=\"dd-tab-wrap\">\n <button type=\"button\" class=\"dd-tab\"\n [class.dd-tab-active]=\"showList && selectedCategory === item?.children\"\n (click)=\"item?.children?.length ? toggleChildMenu(item, $event) : redirectionsOfMenu(item)\">\n <span class=\"text-nowrap\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\n [simpoColor]=\"simpoColor\">{{item?.label | titlecase}}</span>\n <svg *ngIf=\"item?.children?.length\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\"\n viewBox=\"0 0 24 24\" fill=\"none\" [simpoColor]=\"simpoColor\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289C6.68342 7.90237 7.31658 7.90237 7.70711 8.29289L12 12.5858L16.2929 8.29289C16.6834 7.90237 17.3166 7.90237 17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071Z\"\n fill=\"#000000\" />\n </svg>\n </button>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n\n <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory?.length\" (click)=\"$event.stopPropagation()\"\n [style.left.px]=\"dropdownLeft\" [style.top.px]=\"dropdownTop\">\n <div class=\"dd-item\" *ngFor=\"let child of selectedCategory\" [class.open-submenu]=\"openSubmenuChild === child\"\n (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : toggleSubMenu(child, $event)\">\n <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\n <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">›</span>\n\n <div class=\"dd-submenu\" *ngIf=\"child?.children?.length && openSubmenuChild === child\"\n style=\"display: block;\">\n <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\n (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\n <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-template #pageLinksDefault>\n <div class=\"drawer-rows\">\n <ng-container *ngFor=\"let item of footerMenu\">\n <ng-container *ngIf=\"item.showHeader\">\n <div class=\"drawer-row\" (click)=\"redirectionsOfMenu(item)\" data-bs-dismiss=\"offcanvas\">\n <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ item?.label | titlecase }}</span>\n <mat-icon class=\"drawer-row-chevron\" *ngIf=\"item?.children?.length\"\n [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </ng-template>\n\n </div>\n\n\n</ng-template>\n\n<ng-template #buttonsTemplate>\n <div class=\"d-flex\">\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\n <div *ngFor=\"let button of action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\n (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\"\n [style.borderColor]=\"backgroundInfo?.accentColor\">\n <mat-icon>person_outline</mat-icon>\n Login\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn && !isMobile\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n </div>\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\" [style.color]=\"accentColor\"\n (click)=\"goToAccount('LOGIN')\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12 13C14.7614 13 17 10.7614 17 8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8C7 10.7614 9.23858 13 12 13Z\"\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n <path\n d=\"M20 21C20 18.8783 19.1571 16.8434 17.6569 15.3431C16.1566 13.8429 14.1217 13 12 13C9.87827 13 7.84344 13.8429 6.34315 15.3431C4.84285 16.8434 4 18.8783 4 21\"\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n </svg>\n \n Login</button>\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && loggedIn\" [style.color]=\"accentColor\"\n (click)=\"goToAccount('PROFILE')\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12 13C14.7614 13 17 10.7614 17 8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8C7 10.7614 9.23858 13 12 13Z\"\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n <path\n d=\"M20 21C20 18.8783 19.1571 16.8434 17.6569 15.3431C16.1566 13.8429 14.1217 13 12 13C9.87827 13 7.84344 13.8429 6.34315 15.3431C4.84285 16.8434 4 18.8783 4 21\"\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n </svg>\n Account</button>\n</ng-template>\n\n<ng-template #mobileFooterTemplate>\n <div class=\"cart-footer\" [style.background]=\"accentColor\" [simpoColor]=\"accentColor\"\n *ngIf=\"getCartItemsCount > 0 && !restrictCartBarInPages()\">\n <div class=\"d-flex justify-content-between px-3 py-2 h-100 align-items-center\">\n <div class=\"item-count fw-bold\">\n {{ getCartItemsCount ?? 3 }} {{ getCartItemsCount > 1 ? 'items' : 'item' }} in cart\n <!-- Total : \u20B9{{ getCartTotalAmount }} -->\n </div>\n <div class=\"d-flex align-items-center gap-2 fw-bold\" (click)=\"goToCart()\">\n View Cart <mat-icon [simpoColor]=\"accentColor\">arrow_forward</mat-icon>\n </div>\n </div>\n\n </div>\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\n <div class=\"icons\" (click)=\"goToHome()\">\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\n <span [simpoColor]=\"simpoColor\">Home</span>\n </div>\n <div class=\"icons\" (click)=\"searchProducts()\">\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\n <span [simpoColor]=\"simpoColor\">Shop</span>\n </div>\n <div class=\"icons\" (click)=\"goToWishlist()\">\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</div>\n </div>\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\n <span [simpoColor]=\"simpoColor\">Cart</span>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #ecommerceButtonsTemplate>\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\n </div> -->\n <div class=\"w-75 d-flex align-items-center\" [ngClass]=\"{'justify-content-center' : !passbookAppStatus}\">\n <div class=\"input-group w-75 ml-2\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search For Items\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\n [style.color]=\"backgroundInfo?.accentColor\">\n <!-- <span class=\"animated-placeholder position-absolute\" \n [class.animate]=\"animatePlaceholder\"\n *ngIf=\"style?.searchBarPlaceholderList.length > 1 && style?.smartSearchBar\">\n {{ currentPlaceholder }}\n </span> -->\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType === 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\n </div>\n <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\n height=\"30\" version=\"1.1\">\n <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\n <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path\n d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path\n d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\n [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n </g>\n </svg>\n <div [style.color]=\"accentColor\">Schemes</div>\n </div>\n </div>\n <div class=\"d-flex gap-3 align-items-center\">\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\n <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\n <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\n </div>\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\n Pincode\n </div>\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\n getPincode}}</div>\n\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your PIN Code unlocks\n </div>\n <div class=\"sub-text text-center f-14 pincode-text\">\n Fastest delivery date, Try-at-Home availability,\n Nearest store and In-store design!\n </div>\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\n [class.error-border]=\"pinError\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\n class=\"w-75 p-0\">\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\n </div>\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\n Please enter a valid pincode\n </div>\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\n {{getWishlistItemsCount}}</div>\n </div>\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\n {{getCartItemsCount}}</div>\n </div>\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\n stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\n </div>\n <!-- (mouseleave)=\"showLogin = false\" -->\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your Account\n </div>\n <div class=\"sub-text text-center f-14\">\n Access account & manage your orders.\n </div>\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">Sign Up</div>\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\n </div>\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n <!-- <div> -->\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\n <!-- </div> -->\n </div>\n</ng-template>\n\n<ng-template #navbarLinksTemplate>\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\n <ng-container *ngFor=\"let item of getNavbarButton\">\n <ng-container *ngIf=\"item.showHeader\">\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n </ng-container>\n </ng-container>\n\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\n <div class=\"position-relative\">\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n {{link | uppercase}}\n </button>\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.HAMBURGER\">\n <div #mobileOffcanvas class=\"offcanvas\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\n data-bs-backdrop=\"false\"\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\n\n <!-- TOP BAR -->\n <div class=\"drawer-topbar\" [simpoBackground]=\"backgroundInfo\">\n <div class=\"drawer-logo\">\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n </div>\n <button type=\"button\" class=\"drawer-close-btn\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close menu\">\n <mat-icon>chevron_left</mat-icon>\n </button>\n </div>\n\n <!-- BODY -->\n <div class=\"offcanvas-body drawer-body\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"mobileMenuListTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n </div>\n\n <!-- DIVIDER + QUICK ACTIONS -->\n <div class=\"drawer-footer\" *ngIf=\"action?.display && action?.buttons?.length\">\n <div class=\"drawer-divider\" [style.background]=\"accentColor\"></div>\n <div class=\"drawer-actions\">\n <div class=\"drawer-action\" *ngFor=\"let button of action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n [backgroundInfo]=\"data?.styles?.background\" [isFullWidth]=\"true\"></app-button-element>\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n\n<ng-template #ecomProfileTemplate>\n <!-- <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-22 px-3 py-1\"\n (click)=\"showSearchBarMobile = !showSearchBarMobile\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"backgroundInfo?.color\">search</mat-icon> -->\n\n\n <!-- <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"> -->\n\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n</ng-template>\n\n<ng-template #mobileLogoSectionTemplate>\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b>{{content?.siteName?.value}}</b>\n </div>\n </div>\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <!-- </div> -->\n</ng-template>\n\n<ng-template #categoriesHeader>\n <div class=\"categories-wrapper\" *ngIf=\"!isMobile\" (mouseleave)=\"showList = false; showCollections = false\">\n\n <div class=\"blur-overlay\" [class.active]=\"showList || showCollections\"></div>\n\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" [spacingHorizontal]=\"stylesLayout\"\n [style.background]=\"data?.styles?.background?.color\">\n\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of megaMenu; let i = index\"\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.background?.color\"\n (mouseenter)=\"setChildMenu(ele)\" (click)=\"redirectionsOfMenu(ele)\">\n {{ele?.label}}\n </div>\n </div>\n\n <!-- [class.hide-dropdown]=\"!showList\" -->\n <div class=\"list-category\" [class.show-dropdown]=\"showList\" [class.hide-dropdown]=\"!showList\">\n <div class=\"row w-100 h-100 mega-menu-scroll-row\">\n <ng-container *ngFor=\"let ele of selectedCategory; let i = index; let last = last\">\n <div class=\"mega-menu-scroll-col\" [ngClass]=\"[\n ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES') ? 'col-3' : 'col-2',\n ele?.children?.length > 0 && !last ? 'has-right-border' : ''\n ]\">\n\n <ng-container *ngIf=\"ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES' )\">\n <div class=\"mobile-submenu-card mb-3\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"ele.imageUrl\">\n <img [src]=\"ele.imageUrl\" [alt]=\"ele?.label\" class=\"mobile-submenu-image collectionImage\" />\n <div class=\"mobile-submenu-caption\">{{ele?.label | uppercase}}</div>\n </div>\n <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"!ele.imageUrl\">\n {{ele?.label | titlecase}}\n </div>\n </ng-container>\n\n <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\"\n *ngIf=\"ele?.children?.length > 0\">\n {{ele?.label | titlecase}}\n </div>\n <ng-container *ngIf=\"ele?.children && ele?.children.length > 0\">\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let child of ele?.children\">\n <div (click)=\"redirectionsOfMenu(child)\" class=\"cursor-pointer d-flex align-items-center gap-2\">\n <img *ngIf=\"child?.logoUrl\" [src]=\"child?.logoUrl\" [alt]=\"child?.label\"\n class=\"mega-menu-child-logo\" />\n <div>\n <div>{{child?.label | titlecase}}</div>\n <div *ngIf=\"child?.description\" class=\"mega-menu-child-desc\">{{child?.description}}</div>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #mobileMenuListTemplate>\n <div class=\"mobile-menu-container\">\n\n <div class=\"drawer-rows\" *ngIf=\"!selectedMobileMenu\">\n <div class=\"drawer-row\" *ngFor=\"let ele of megaMenu\"\n (click)=\"ele?.children?.length ? selectMobileMenu(ele) : redirectionsOfMenu(ele)\"\n [attr.data-bs-dismiss]=\"ele?.children?.length ? null : 'offcanvas'\">\n <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ ele?.label | titlecase }}</span>\n <mat-icon class=\"drawer-row-chevron\" *ngIf=\"ele?.children?.length\"\n [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\n </div>\n </div>\n\n <div class=\"drawer-detail\" *ngIf=\"selectedMobileMenu\">\n <div class=\"drawer-detail-back\" (click)=\"goBackMobileMenu()\">\n <mat-icon [simpoColor]=\"simpoColor\">chevron_left</mat-icon>\n <span [simpoColor]=\"simpoColor\">{{selectedMobileMenu?.label | titlecase}}</span>\n </div>\n\n <div class=\"drawer-detail-sections\">\n <ng-container *ngFor=\"let child of selectedMobileMenu?.children\">\n <div class=\"drawer-detail-section\">\n <ng-container\n *ngIf=\"child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' )\">\n <div class=\"mobile-submenu-card\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\"\n *ngIf=\"child.imageUrl\">\n <img [src]=\"child.imageUrl\" [alt]=\"child?.label\" class=\"mobile-submenu-image collectionImage\" />\n <div class=\"mobile-submenu-caption\">{{child?.label | uppercase}}</div>\n </div>\n </ng-container>\n\n <ng-container\n *ngIf=\"!(child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' ) && child.imageUrl)\">\n <div class=\"drawer-row drawer-row--sub\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\">\n <img *ngIf=\"child?.logoUrl\" [src]=\"child?.logoUrl\" [alt]=\"child?.label\" class=\"mega-menu-child-logo\" />\n <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ child?.label | titlecase }}</span>\n </div>\n\n <div class=\"drawer-detail-grid\" *ngIf=\"child?.children?.length\">\n <div class=\"drawer-chip\" *ngFor=\"let sub of child?.children\" (click)=\"redirectionsOfMenu(sub)\"\n data-bs-dismiss=\"offcanvas\">\n {{sub?.label | titlecase}}\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #mobileCategoryHeader>\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\n [spacingHorizontal]=\"stylesLayout\" [class.margin-top-mob]=\"isHeaderSticky\">\n <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\n <div class=\"cat-img d-flex justify-content-center align-items-center w-100\">\n <img [src]=\"ele?.imageUrls[0]\" [alt]=\"ele?.categoryName\" class=\"br-12 mobile-category-image\">\n </div>\n <div class=\"text-center category-name\">{{ele?.categoryName}}</div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #ecommerce_header>\n <header class=\"site-header\" [ngClass]=\"{\n 'ecom-header1': style?.styling === 'Header1',\n 'ecom-header2': style?.styling === 'Header2',\n 'ecom-header3': style?.styling === 'Header3',\n 'ecom-header4': style?.styling === 'Header4'\n }\">\n <!-- Top Bar: Logo, Search, User Actions -->\n <div class=\"top-bar\">\n\n <!-- Mobile Menu Toggle -->\n <div class=\"header-logo-area\" [ngClass]=\"{'mobile-header-left-side': screenWidth <= 475}\">\n <!-- HAMBURGER -->\n <label *ngIf=\"resolvedMobileMenuType === MobileMenuType.HAMBURGER\" for=\"mobile-menu-checkbox\"\n class=\"mobile-menu-btn\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" aria-label=\"Toggle menu\" (click)=\"goBackMobileMenu()\">\n <svg *ngIf=\"!isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\n <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\n <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\n </svg>\n <svg *ngIf=\"isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"18\" x2=\"18\" y2=\"6\"></line>\n </svg>\n </label>\n <!-- FULL SCREEN -->\n <label *ngIf=\"resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\" class=\"mobile-menu-btn\"\n aria-label=\"Toggle menu\" (click)=\"openFullScreenMenu()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\n <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\n <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\n </svg>\n </label>\n\n <!-- Logo Section -->\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\n <img [src]=\"content?.logo?.image?.url\" alt=\"Logo\" class=\"logo-img\" [width]=\"content?.logo?.size + 15\"\n [height]=\"content?.logo?.size\">\n </a>\n\n <a class=\"textPluslogo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \n && content?.logo?.text?.isText \n && content?.logo?.text?.isIcon \n && content?.logo?.text?.url\">\n\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"Icon\" class=\"logo-icon\"\n [width]=\"content?.logo?.size + 15\" [height]=\"content?.logo?.size\">\n\n <span class=\"logo-text\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 475\">\n {{ content?.siteName?.value }}\n </span>\n </a>\n\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \n && content?.logo?.text?.isText \n && !content?.logo?.text?.isIcon\">\n\n <span class=\"logo-main\" [simpoColor]=\"simpoColor\">\n {{ content?.siteName?.value }}\n </span>\n </a>\n </div>\n\n <!-- Search Bar -->\n <div class=\"search-wrapper\"\n *ngIf=\"screenWidth > 475 && content?.showSearchBar && data?.styles?.menuType !== 'DROPDOWN_MENU'\">\n <div class=\"search-bar\">\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\"\n (keydown.enter)=\"searchProducts()\" aria-label=\"Search\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"search-icon search-btn\" (click)=\"searchProducts()\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n </div>\n </div>\n\n <!-- Dropdown menu style -->\n <div class=\"dropdown_menu\" *ngIf=\"screenWidth > 475 && data?.styles?.menuType === 'DROPDOWN_MENU'\"\n (mouseleave)=\"showList = false; selectedCategory = null\">\n <div class=\"dd-nav-scroll\">\n <div class=\"dd-nav\">\n <div class=\"dd-tab-wrap\" *ngFor=\"let ele of megaMenu\">\n <button type=\"button\" class=\"dd-tab\"\n [class.dd-tab-active]=\"showList && selectedCategory === ele?.children\"\n (click)=\"ele?.children?.length ? toggleChildMenu(ele, $event) : redirectionsOfMenu(ele)\">\n <span class=\"text-nowrap\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\n [simpoColor]=\"simpoColor\">{{ele?.label | titlecase}}</span>\n <svg *ngIf=\"ele?.children?.length\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\"\n viewBox=\"0 0 24 24\" fill=\"none\" [simpoColor]=\"simpoColor\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289C6.68342 7.90237 7.31658 7.90237 7.70711 8.29289L12 12.5858L16.2929 8.29289C16.6834 7.90237 17.3166 7.90237 17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071Z\"\n fill=\"#000000\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory?.length\" (click)=\"$event.stopPropagation()\"\n [style.left.px]=\"dropdownLeft\" [style.top.px]=\"dropdownTop\">\n <div class=\"dd-item\" *ngFor=\"let child of selectedCategory\" [class.open-submenu]=\"openSubmenuChild === child\"\n (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : toggleSubMenu(child, $event)\">\n <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\n <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">›</span>\n\n <div class=\"dd-submenu\" *ngIf=\"child?.children?.length && openSubmenuChild === child\"\n style=\"display: block;\">\n <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\n (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\n <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n\n <!-- Right Actions -->\n <div class=\"user-actions\">\n\n <ng-container *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar\">\n <a class=\"action-link icon-only dropdown-search-toggle\"\n (click)=\"showDropdownDesktopSearch = !showDropdownDesktopSearch\" aria-label=\"Toggle search\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\"\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n </a>\n </ng-container>\n\n <ng-container *ngIf=\"storeAvaiable\">\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\n *ngIf=\"!getPincode\">\n <!-- <svg width=\"20\" height=\"20\" viewBox=\"0 0 17 17\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n stroke=\"currentColor\" fill=\"none\" [simpoColor]=\"simpoColor\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <path\n d=\"M8.5 0.5c-3.032 0-5.5 2.467-5.5 5.5 0 4.373 4.913 10.086 5.122 10.328l0.378 0.435 0.378-0.436c0.209-0.241 5.122-5.954 5.122-10.327 0-3.033-2.468-5.5-5.5-5.5zM8.5 15.215c-1.146-1.424-4.5-5.879-4.5-9.215 0-2.481 2.019-4.5 4.5-4.5s4.5 2.019 4.5 4.5c0 3.333-3.354 7.791-4.5 9.215zM8.5 3.139c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zM8.5 8.139c-1.103 0-2-0.897-2-2s0.897-2 2-2 2 0.897 2 2-0.897 2-2 2z\"\n fill=\"#000000\" />\n </svg> -->\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 512 512\"\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"currentColor\">\n <g>\n <path\n d=\"M341.476 338.285c54.483-85.493 47.634-74.827 49.204-77.056C410.516 233.251 421 200.322 421 166 421 74.98 347.139 0 256 0 165.158 0 91 74.832 91 166c0 34.3 10.704 68.091 31.19 96.446l48.332 75.84C118.847 346.227 31 369.892 31 422c0 18.995 12.398 46.065 71.462 67.159C143.704 503.888 198.231 512 256 512c108.025 0 225-30.472 225-90 0-52.117-87.744-75.757-139.524-83.715zm-194.227-92.34a15.57 15.57 0 0 0-.517-.758C129.685 221.735 121 193.941 121 166c0-75.018 60.406-136 135-136 74.439 0 135 61.009 135 136 0 27.986-8.521 54.837-24.646 77.671-1.445 1.906 6.094-9.806-110.354 172.918L147.249 245.945zM256 482c-117.994 0-195-34.683-195-60 0-17.016 39.568-44.995 127.248-55.901l55.102 86.463a14.998 14.998 0 0 0 25.298 0l55.101-86.463C411.431 377.005 451 404.984 451 422c0 25.102-76.313 60-195 60z\">\n </path>\n <path\n d=\"M256 91c-41.355 0-75 33.645-75 75s33.645 75 75 75 75-33.645 75-75-33.645-75-75-75zm0 120c-24.813 0-45-20.187-45-45s20.187-45 45-45 45 20.187 45 45-20.187 45-45 45z\">\n </path>\n </g>\n </svg>\n\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">Enter Pincode</span>\n\n </a>\n\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7\"></path>\n <path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"></path>\n <path d=\"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4\"></path>\n <path d=\"M2 7h20\"></path>\n <path\n d=\"M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7\">\n </path>\n </svg>\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">{{\"Delivering to: \" +\n getPincode}}</span>\n\n </a>\n\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your PIN Code unlocks\n </div>\n <div class=\"sub-text text-center f-14 pincode-text\">\n Fastest delivery date, Try-at-Home availability,\n Nearest store and In-store design!\n </div>\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\n [class.error-border]=\"pinError\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\n class=\"w-75 p-0\">\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\n </div>\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\n Please enter a valid pincode\n </div>\n </div>\n </ng-container>\n\n <a class=\"action-link icon-only login-btn\" *ngIf=\"!loggedIn\"\n (mouseenter)=\"showLogin = true;showPincodeInput = false\" (click)=\"showLogin = !showLogin\">\n <!-- User Icon SVG -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\n </svg>\n </a>\n\n <a class=\"action-link icon-only\" (click)=\"goToAccount('PROFILE')\" *ngIf=\"loggedIn\">\n <!-- User Icon SVG -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\n </svg>\n </a>\n\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your Account\n </div>\n <div class=\"sub-text text-center f-14\">\n Access account & manage your orders.\n </div>\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">Sign Up</div>\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\n </div>\n </div>\n\n <a class=\"action-link icon-only icon-container wishlist-icon\" (click)=\"goToWishlist()\">\n <!-- Heart Icon SVG -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path\n d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\">\n </path>\n </svg>\n <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\n *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</span>\n </a>\n\n <a class=\"action-link icon-only icon-container cart-icon\" (click)=\"goToCart()\">\n <!-- Shopping Bag Icon SVG -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z\"></path>\n <path d=\"M3 6h18\"></path>\n <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n </svg>\n <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\n *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</span>\n </a>\n\n <div class=\"dropdown-search-expand\"\n *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar && showDropdownDesktopSearch\">\n <div class=\"dropdown-search-box\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"dropdown-search-icon search-btn\" (click)=\"searchProducts()\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n <input type=\"text\" placeholder=\"Search for...\" [(ngModel)]=\"searchText\"\n (keydown.enter)=\"searchProducts()\" aria-label=\"Search\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"dropdown-search-close\" (click)=\"showDropdownDesktopSearch = false\" aria-label=\"Close search\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"search-wrapper\" *ngIf=\"screenWidth <= 475 && content?.showSearchBar\">\n <div class=\"search-bar\">\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\"\n (keydown.enter)=\"searchProducts()\" aria-label=\"Search\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"search-icon search-btn\" (click)=\"searchProducts()\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n </div>\n </div>\n\n </header>\n</ng-template>\n\n<ng-template #fullScreenMenuTemplate>\n <div class=\"fs-menu\">\n <div class=\"fs-menu-bg\" [simpoBackground]=\"backgroundInfo\"></div>\n <div class=\"fs-menu-inner\">\n <div class=\"fs-menu-head\">\n <div class=\"fs-menu-logo\" (click)=\"closeFullScreenMenu()\">\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n </div>\n <button class=\"fs-menu-close\" (click)=\"closeFullScreenMenu()\" aria-label=\"Close menu\">\n <mat-icon [simpoColor]=\"simpoColor\">close</mat-icon>\n </button>\n </div>\n <!-- Main level -->\n <nav class=\"fs-menu-nav\" *ngIf=\"!selectedMobileMenu\">\n <ng-container *ngFor=\"let item of footerMenu\">\n <ng-container *ngIf=\"item.showHeader\">\n <a class=\"fs-menu-link\" [class.active]=\"isNavItemActive(item)\" [style.--accent]=\"accentColor\"\n (click)=\"onFullScreenItemClick(item)\">\n <span class=\"fs-menu-dot\" [style.background]=\"accentColor\"></span>\n <span class=\"fs-menu-text\" [simpoColor]=\"simpoColor\">{{ item?.label | titlecase }}</span>\n <mat-icon class=\"fs-menu-arrow\" *ngIf=\"item?.children?.length\"\n [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\n </a>\n </ng-container>\n </ng-container>\n </nav>\n\n <!-- Submenu (drill-in) level -->\n <nav class=\"fs-menu-nav fs-menu-sub\" *ngIf=\"selectedMobileMenu\">\n <button class=\"fs-menu-back\" (click)=\"goBackMobileMenu()\">\n <mat-icon [simpoColor]=\"simpoColor\">chevron_left</mat-icon>\n <span [simpoColor]=\"simpoColor\">{{ selectedMobileMenu?.label | titlecase }}</span>\n </button>\n <ng-container *ngFor=\"let child of selectedMobileMenu?.children\">\n <a class=\"fs-menu-link\" [style.--accent]=\"accentColor\"\n (click)=\"redirectionsOfMenu(child); closeFullScreenMenu()\">\n <span class=\"fs-menu-text\" [simpoColor]=\"simpoColor\">{{ child?.label | titlecase }}</span>\n </a>\n <a class=\"fs-menu-sublink\" *ngFor=\"let sub of child?.children\" [simpoColor]=\"simpoColor\"\n (click)=\"redirectionsOfMenu(sub); closeFullScreenMenu()\">{{ sub?.label | titlecase }}</a>\n </ng-container>\n </nav>\n <div class=\"fs-menu-cta\" *ngIf=\"action?.display && action?.buttons?.length\">\n <ng-container *ngFor=\"let button of action?.buttons | slice:0:1\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n [backgroundInfo]=\"data?.styles?.background\" [isFullWidth]=\"true\"></app-button-element>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #bottomStickyNavTemplate>\n <nav class=\"bs-nav\">\n <div class=\"bs-nav-bar\" [simpoBackground]=\"backgroundInfo\">\n <button class=\"bs-tab\" *ngFor=\"let item of bottomStickyNavItems; let i = index\"\n [class.active]=\"i === activeBottomNavIndex\" (click)=\"redirectionsOfMenu(item)\">\n <span class=\"bs-tab-label\" [style.color]=\"i === activeBottomNavIndex ? accentColor : null\"\n [simpoColor]=\"i === activeBottomNavIndex ? null : simpoColor\">{{ item?.label | titlecase }}</span>\n </button>\n </div>\n </nav>\n</ng-template>", styles: [".total-container div[simpoSticky]:not(.header--scrolled){top:0!important;left:0!important;right:0!important;margin:0 auto!important;width:100%!important}.total-container div[simpoSticky].header--scrolled,.header--scrolled{top:10px!important;left:20%!important;right:20%!important;width:60%!important;overflow:hidden!important;border-radius:60px!important;box-shadow:0 10px 40px #0000001f!important;z-index:1000001!important;transition:width .4s cubic-bezier(.16,1,.3,1)}.total-container div[simpoSticky].header--scrolled.dropdown-open,.header--scrolled.dropdown-open{overflow:visible!important}@media screen and (max-width: 475px){.total-container div[simpoSticky].header--scrolled,.header--scrolled{top:10px!important;left:5%!important;right:5%!important;width:90%!important}}.simpo-transparent-type{transition:background-color .3s ease!important}@keyframes simpo-slide-down{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.simpo-sticky-revealed{animation:simpo-slide-down .3s cubic-bezier(.16,1,.3,1) forwards;box-shadow:0 2px 12px #0000001f}.w-40{width:40%!important}*{font-family:var(--website-font-family)}.animated-placeholder{left:12%;transform:translateY(-50%);transition:all .4s ease;font-size:14px;top:49%;color:#6f6f6f;font-weight:300}.animated-placeholder.animate{transform:translateY(-150%);opacity:0}.w-5{width:5%}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem;flex:0 0 auto}.category-name{text-transform:uppercase;white-space:normal;word-break:break-word;line-height:1.2;font-size:11px;letter-spacing:.4px;text-align:center;max-width:90px}.margin-bottom{margin-bottom:var(--margin-top, 0px)}@media only screen and (max-width : 475px){.w-5{width:100%!important}.logo-main,.logo-text{font-size:17px!important}.left-logo-text{padding-top:10px}.mob-form-control{width:96%;border-radius:12px!important}.input-group mat-icon{width:10%!important}.categories-header{height:unset!important}.margin-top-mob{margin-top:var(--margin-top, 0px)}.w-98{width:98%}.w-96{width:96%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important;width:100%;max-width:100%;overflow-x:visible;overflow-y:visible}.page-links-nav{flex-direction:column;align-items:flex-start;padding-bottom:0;margin-bottom:0;overflow-x:visible}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#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;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.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:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}.pageLinks{width:100%!important;max-width:100%!important}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:75%;z-index:1000000000}@media screen and (max-width: 475px){.offcanvas{top:0!important;height:100vh!important;height:100dvh!important;width:100%;display:flex;flex-direction:column}.offcanvas-body{flex:1 1 auto;height:auto}.offcanvas-footer{height:auto}}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.mobileLoginButton{width:100%;height:40px;border-radius:8px;outline:none;background:transparent;border:none;display:flex;align-items:center;justify-content:center}.pageLinks{display:flex;flex-direction:row;width:50%;max-width:50%;overflow:visible}.pageLinks .dropdown-menu{z-index:1010}.page-links-nav{display:flex;align-items:center;gap:15px;width:100%;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;padding-bottom:220px;margin-bottom:-220px;scrollbar-width:none}.page-links-nav::-webkit-scrollbar{display:none}.category-btn{font-size:16px!important}.h-70{height:70px}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:auto;max-height:50vh;overflow-y:auto;position:absolute;width:100%;z-index:1001}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:6px;height:40px}.h-45{height:45vh}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:0;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}.cart-footer{position:fixed;width:96%;height:45px;bottom:65px;z-index:100;left:8px;border-radius:10px}.item-count{align-content:center}.fs-22{font-size:22px}.w-15{width:15%!important}.site-header{width:100%;border-bottom:1px solid transparent}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1440px;margin:0 auto}.dropdown_menu_static{position:relative}.dropdown_menu{position:relative;width:55%;max-width:55%;min-width:420px;display:flex;justify-content:center;margin:0 auto}.dropdown_menu_static .dropdown_menu{position:relative;min-width:420px;max-width:55%;display:flex;justify-content:center}.dd-nav-scroll{width:100%;overflow-x:auto;overflow-y:visible;scrollbar-width:none}.dd-nav-scroll::-webkit-scrollbar{display:none}.dd-nav{display:inline-flex;align-items:flex-start;gap:18px;flex-wrap:nowrap;padding-top:5px;pointer-events:auto}.dd-tab-wrap{position:relative;display:inline-flex;pointer-events:auto}.dd-tab{border:none;background:transparent;padding:6px 2px;font-size:15px;font-weight:500;color:#30343b;line-height:1;border-bottom:3px solid transparent;display:inline-flex;align-items:center;gap:8px}.dd-tab:hover,.dd-tab.dd-tab-active{border-bottom-color:#2f3338}.dd-panel{position:absolute;top:100%;left:0;background:#fff;border:1px solid #ececef;padding:14px 0;z-index:1006;min-width:220px}.dd-item{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;font-size:16px;color:#2c2f35;transition:background-color .2s ease;cursor:pointer}.dd-item:hover{background-color:#f5f6f8}.dd-item-arrow{font-size:20px;line-height:1;color:#5a5f66}.dd-submenu{position:absolute;top:-10px;left:calc(100% + 3px);background:#fff;border:1px solid #ececef;box-shadow:0 10px 26px #1d212926;padding:10px 0;display:none;z-index:1007}.dd-item:hover .dd-submenu{display:block}.dd-sub-item{padding:10px 16px;font-size:15px;color:#2c2f35;transition:background-color .2s ease}.dd-sub-item:hover{background-color:#f5f6f8}.dropdown-search-toggle{cursor:pointer}.dropdown-search-expand{position:absolute;top:calc(100% + 10px);right:0;min-width:320px;z-index:1010}.dropdown-search-box{width:100%;background:#f3f3f3;border:1px solid #e7e7e7;display:flex;align-items:center;gap:12px;padding:10px 14px}.dropdown-search-icon{color:#1f2328;flex:0 0 auto}.dropdown-search-box input{border:none;background:transparent;width:100%;font-size:14px;color:#2f3338;outline:none}.dropdown-search-close{color:#545861;cursor:pointer;flex:0 0 auto}.logo{display:flex;flex-direction:column;align-items:flex-start;color:#5e4042;line-height:1;text-decoration:auto}.logo-img{display:block}.logo-main{font-family:Playfair Display,serif;font-size:32px;font-weight:500;letter-spacing:.5px}.logo-sub{font-family:Montserrat,sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;margin-top:2px;margin-left:2px}.search-wrapper{flex:1;display:flex;justify-content:center;max-width:600px}.search-bar{width:100%;background-color:#f3f3f3;border-radius:8px;display:flex;align-items:center;padding:10px 16px;gap:12px}.search-icon{color:#333;width:18px;height:18px}.search-btn{cursor:pointer;flex-shrink:0}.search-bar input{border:none;background:transparent;width:100%;font-family:Montserrat,sans-serif;font-size:14px;color:#1a1a1a;outline:none}.search-bar input::placeholder{color:#888;font-weight:400}.user-actions{display:flex;align-items:center;gap:24px}.action-link{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.action-link:hover{color:#5e4042}.store-text{white-space:nowrap}.icon-only svg{display:block;cursor:pointer}.main-nav{border-top:1px solid transparent;padding-bottom:15px}.nav-list{display:flex;justify-content:center;flex-wrap:wrap;gap:32px;padding:10px 40px}.nav-list li{position:relative}.nav-list a{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#333;padding:5px 0;display:inline-block}.nav-list a:hover{color:#5e4042}.has-badge{position:relative}.badge{position:absolute;top:-12px;right:-10px;background-color:#a87b7b;color:#fff;font-size:9px;font-weight:600;padding:2px 6px;border-radius:10px;line-height:1;white-space:nowrap}.mobile-menu-checkbox{display:none}.mobile-menu-btn{display:none;cursor:pointer;color:#333}.hero-placeholder{height:80vh;background-color:#f9f9f9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#5e4042}.hero-placeholder h1{font-family:Playfair Display,serif;font-size:3rem;margin-bottom:1rem}@media (max-width: 1024px){.nav-list{gap:20px}.store-text{display:none}.search-wrapper{margin:0 20px}}@media (max-width: 768px){.top-bar{padding:15px 20px;flex-wrap:wrap}.search-wrapper{order:3;padding:0 8px;width:100%;max-width:100%;margin:0 0 15px}.user-actions{gap:16px}.main-nav{display:none;width:100%;background:#fff;border-top:1px solid #eee}.nav-list{flex-direction:column;align-items:center;gap:15px;padding:20px}.badge{position:relative;top:-2px;right:auto;margin-left:8px;vertical-align:middle}.mobile-menu-btn{display:block}.mobile-menu-checkbox:checked~.main-nav{display:block}}@media screen and (max-width: 475px){.store-link{display:none}.info-container{width:100vw;top:62%}}.icon-container{position:relative}.count-badge{position:absolute;top:-8px;right:-8px;font-size:10px;font-weight:600;height:18px;width:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #ffffff}.textPluslogo{display:flex;align-items:center;gap:8px;flex-shrink:0;text-decoration:none}.logo-icon{color:#5e4042}.logo-text{font-size:28px;font-weight:600;color:#1a1a1a;letter-spacing:-.5px}.mobile-header-left-side{display:flex;align-items:center;gap:15px}.categories-wrapper{position:relative;width:100%;z-index:100}.categories-wrapper .categories-header{border-top:1px solid rgba(0,0,0,.1)}.categories-header{gap:26px!important;overflow-x:auto;margin:8px 8px 0;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;position:relative}.categories-header::-webkit-scrollbar{display:none}.category{position:relative;border-bottom:3px solid transparent;transition:border-color .35s ease,color .35s ease}.category:hover{border-bottom-color:var(--border-color)}.blur-overlay{position:fixed;top:var(--margin-top, 0px);left:0;width:100vw;height:calc(100vh - var(--margin-top, 0px));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffff47;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s ease;z-index:1000}.blur-overlay.active{opacity:1;visibility:visible}.list-category{padding:20px 30px;color:#111;background:#fff!important;height:auto;max-height:50vh;position:absolute;top:100%;left:0;width:100%;z-index:1003;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,transform .35s ease,visibility .35s ease;will-change:opacity,transform;box-shadow:0 18px 40px #0000001a;overflow-x:hidden;overflow-y:auto}.mega-menu-scroll-row{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.mega-menu-scroll-col{flex-shrink:0}.mega-menu-scroll-col.has-right-border{border-right:1px solid #e9e7e7}.collectionImage{border-radius:10px;height:70%!important}@media screen and (min-width: 476px){.list-category .mobile-submenu-card{aspect-ratio:4 / 3;overflow:hidden}.list-category .mobile-submenu-image.collectionImage{width:100%;height:100%!important;object-fit:cover;display:block}}.list-item>div{color:#585858}.list-item>div:hover{color:#000}.show-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.hide-dropdown{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px)}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px;height:auto;max-height:36vh;overflow-y:auto}.each-price{transition:transform .25s ease,font-weight .25s ease,color .25s ease}.each-price:hover{font-weight:700;transform:translate(4px)}.image-container{cursor:pointer;overflow:hidden}.image-container img{border-radius:12px;transition:transform .35s ease}.image-container:hover img{transform:scale(1.04)}.collection{height:max-content;cursor:pointer;transition:transform .25s ease}.collection:hover{transform:translateY(-2px)}.mobile-menu-container{height:100%;overflow-y:auto}.mobile-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mobile-menu-item{display:flex;align-items:center;justify-content:space-between;background:#f5f5f5;border-radius:8px;padding:14px;cursor:pointer;transition:background-color .2s ease}.mobile-menu-item:active{background:#ebebeb}.mobile-menu-label{font-size:11px;letter-spacing:.5px;color:#1a1a1a;line-height:1.3}.mobile-menu-arrow{font-size:18px!important;width:18px!important;height:18px!important;color:#999;flex-shrink:0}.mobile-menu-detail{padding:0}.mobile-menu-back{display:flex;align-items:center;gap:4px;padding:14px 0;cursor:pointer;font-size:16px;color:#1a1a1a}.mobile-menu-back mat-icon{font-size:22px!important;width:22px!important;height:22px!important;color:#1a1a1a!important}.mobile-submenu-sections{overflow-y:auto}.mobile-submenu-section{margin-bottom:20px}.mobile-submenu-card{position:relative;border-radius:12px;overflow:hidden;cursor:pointer}.mobile-submenu-image{display:block;width:100%;height:auto!important}.mobile-submenu-caption{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;font-size:14px;font-weight:700;letter-spacing:.6px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.5);background:linear-gradient(180deg,#0000,#0009)}.mobile-submenu-header{font-size:14px;font-weight:700;letter-spacing:.5px;color:#1a1a1a;margin-bottom:12px;cursor:pointer}.mobile-submenu-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mobile-submenu-item{background:#f5f5f5;border-radius:8px;padding:10px 14px;font-size:12px;font-weight:400;color:#333;cursor:pointer;text-align:center;transition:background-color .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-submenu-item:active{background:#ebebeb}.mobile-category-image{border-radius:50%;height:11vh;width:11vh;object-fit:cover}.drawer-topbar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(0,0,0,.06);flex:0 0 auto}.drawer-logo{flex:1 1 auto;display:flex;justify-content:flex-start;align-items:center;max-height:38px;overflow:hidden}.drawer-logo img{max-height:38px;width:auto}.drawer-close-btn{position:absolute;top:8px;right:8px;z-index:3;flex:none;background:#fff;border:1px solid rgba(0,0,0,.1);box-shadow:0 2px 8px #00000024;cursor:pointer;width:30px!important;min-width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;transition:background-color .18s ease}.drawer-close-btn:active{background:#0000000f}.drawer-close-btn mat-icon{color:#1a1a1a;font-size:22px;height:22px;width:22px}.drawer-body{flex:1 1 auto;overflow-y:auto;padding:4px 8px 8px}.drawer-rows{display:flex;flex-direction:column}.drawer-row{display:flex;align-items:center;gap:14px;padding:14px 12px;border-radius:12px;cursor:pointer;transition:background-color .18s ease}.drawer-row:active,.drawer-row:hover{background:#0000000b}.drawer-row+.drawer-row{border-top:1px solid rgba(0,0,0,.05)}.drawer-row-icon{font-size:22px;height:22px;width:22px;flex:0 0 auto}.drawer-row-label{flex:1 1 auto;font-size:15px;font-weight:500;line-height:1.2}.drawer-row-chevron{font-size:20px;height:20px;width:20px;flex:0 0 auto;opacity:.55}.drawer-row--sub .drawer-row-label{font-weight:600}.drawer-detail{padding:4px 4px 8px}.drawer-detail-back{display:flex;align-items:center;gap:6px;padding:10px 8px;cursor:pointer;font-size:16px;font-weight:600}.drawer-detail-back mat-icon{font-size:24px;height:24px;width:24px}.drawer-detail-section{margin-bottom:18px}.drawer-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:6px 12px 0}.drawer-chip{background:#0000000a;border-radius:10px;padding:10px 12px;font-size:13px;color:#333;text-align:center;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color .18s ease}.drawer-chip:active{background:#00000014}.drawer-footer{flex:0 0 auto;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}.drawer-divider{height:1px;width:100%;opacity:.35;margin-bottom:14px}.drawer-actions{display:flex;flex-direction:column;gap:10px}.drawer-action,.drawer-action app-button-element,.drawer-action .button{width:100%}.drawer-action .button{justify-content:center}.fs-menu{position:fixed;inset:0;z-index:1000000;display:grid;grid-template-areas:\"stack\";overflow:hidden;animation:fsMenuFade .28s cubic-bezier(.16,1,.3,1) both}.fs-menu-bg{grid-area:stack;width:100%;height:100%;z-index:0}.fs-menu-inner{grid-area:stack;position:relative;z-index:1;display:flex;flex-direction:column;max-width:560px;margin:0 auto;width:100%;height:100%;min-height:0;padding:18px 24px calc(18px + env(safe-area-inset-bottom));overflow:hidden}.fs-menu-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin-bottom:10px}.fs-menu-logo{display:flex;align-items:center;max-height:44px;overflow:hidden;cursor:pointer}.fs-menu-logo img{max-height:42px;width:auto!important}@keyframes fsMenuFade{0%{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}.fs-menu-close{flex:none;width:40px!important;min-width:40px;height:40px;border-radius:50%;background:#7f7f7f24;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background-color .2s ease}.fs-menu-close:hover{background:#7f7f7f3d}.fs-menu-close mat-icon{font-size:24px;height:24px;width:24px}.fs-menu-nav{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;margin-bottom:16px}.fs-menu-link{position:relative;display:flex;align-items:center;gap:12px;padding:13px 4px;cursor:pointer;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent, #888) 10%,transparent);animation:fsLinkIn .45s cubic-bezier(.16,1,.3,1) both}.fs-menu-link:nth-child(1){animation-delay:.05s}.fs-menu-link:nth-child(2){animation-delay:.1s}.fs-menu-link:nth-child(3){animation-delay:.15s}.fs-menu-link:nth-child(4){animation-delay:.2s}.fs-menu-link:nth-child(5){animation-delay:.25s}.fs-menu-link:nth-child(6){animation-delay:.3s}@keyframes fsLinkIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.fs-menu-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;opacity:0;transform:scale(.4);transition:opacity .2s ease,transform .2s ease}.fs-menu-link:hover .fs-menu-dot,.fs-menu-link.active .fs-menu-dot{opacity:1;transform:scale(1)}.fs-menu-text{font-size:clamp(1rem,5vw,1.6rem);font-weight:600;letter-spacing:-.3px;line-height:1.1;transition:transform .2s ease,opacity .2s ease}.fs-menu-link:hover .fs-menu-text{transform:translate(6px);opacity:.85}.fs-menu-arrow{margin-left:auto;flex:0 0 auto;font-size:22px;height:22px;width:22px;opacity:.55}.fs-menu-back{display:flex;align-items:center;gap:6px;background:transparent;border:none;cursor:pointer;padding:6px 0 14px;width:auto!important;font-size:15px;font-weight:600;opacity:.85}.fs-menu-back mat-icon{font-size:26px;height:26px;width:26px}.fs-menu-sublink{display:block;padding:9px 4px 9px 18px;font-size:1rem;font-weight:400;text-decoration:none;cursor:pointer;opacity:.78;border-bottom:1px solid color-mix(in srgb,var(--accent, #888) 16%,transparent);transition:opacity .2s ease,transform .2s ease}.fs-menu-sublink:hover{opacity:1;transform:translate(5px)}.fs-menu-cta{flex:0 0 auto;padding-top:4px}.fs-menu-cta app-button-element,.fs-menu-cta .button{width:100%;justify-content:center}.bs-nav{position:fixed;left:0;right:0;bottom:0;z-index:10001;pointer-events:none}.bs-nav-bar{pointer-events:auto;display:flex;align-items:stretch;justify-content:space-around;height:64px;padding-bottom:env(safe-area-inset-bottom);border-radius:18px 18px 0 0;box-shadow:0 -4px 20px #0000001f}.bs-tab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:transparent;border:none;cursor:pointer;padding:8px 4px;transition:transform .15s ease}.bs-tab:active{transform:translateY(1px)}.bs-tab-icon{font-size:23px;height:23px;width:23px;transition:color .2s ease}.bs-tab-label{font-size:10.5px;font-weight:500;letter-spacing:.2px;line-height:1;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s ease}.bs-tab.active .bs-tab-label{font-weight:700}@media screen and (max-width: 475px){body{padding-bottom:var(--bottom-nav-height, 0px)}}@media (min-width: 476px){.site-header.ecom-header2 .top-bar,.site-header.ecom-header4 .top-bar{flex-direction:row-reverse}}.mega-menu-child-logo{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0}.mega-menu-child-desc{font-size:11px;color:#999;margin-top:2px;line-height:1.3}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { 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", "accentColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.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", "isEcommerce"], outputs: ["edit"] }, { 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: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky", "categoryHeader"], outputs: ["stickyScrolled"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: MovingTextComponent, selector: "simpo-moving-text", inputs: ["data", "edit", "delete", "customClass", "index"] }, { kind: "component", type: CountdownBannerComponent, selector: "simpo-countdown-banner", inputs: ["edit", "data", "customClass", "nextComponentColor", "index", "delete", "isHeaderRenderer"] }] }); }
|
|
18918
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderSectionComponent, isStandalone: true, selector: "simpo-header-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }, { propertyName: "mobileOffcanvas", first: true, predicate: ["mobileOffcanvas"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\n [class.margin-bottom]=\"shouldReserveMobileHeaderSpace\">\n <div [simpoSticky]=\"resolvedStickyType\" (stickyScrolled)=\"onStickyScrolled($event)\"\n [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\n simpoHover [class.bg-transparent]=\"isComponentMerged && !isScrolled && !isMobile\"\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\" [class.dropdown-open]=\"showList\">\n <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\n <ng-container *ngIf=\"style?.headline?.display\">\n <div>\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"style?.countdown?.display\">\n <simpo-countdown-banner [data]=\"data?.content?.countdownBanner\" [edit]=\"false\" [delete]=\"false\"\n [isHeaderRenderer]=\"true\">\n </simpo-countdown-banner>\n </ng-container>\n\n <div *ngIf=\"style?.styling === 'Header1' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header2' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header3' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header4' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\n </div>\n\n <div [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" *ngIf=\"isEcommerceWebsite\"\n [simpoLayout]=\"screenWidth > 475 ? stylesLayout : undefined\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"ecommerce_header\"></ng-container>\n </div>\n\n <!-- <div class=\"input-group mx-2 mb-2 w-96\" *ngIf=\"isMobile && isEcommerceWebsite && !restrictCartBarInPages()\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search for items\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">search</mat-icon>\n </div> -->\n\n <ng-container *ngIf=\"isEcommerceWebsite && !isMobile && data?.styles?.menuType === 'MEGA_MENU'\">\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n </div>\n\n <ng-container\n *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader() && data?.styles?.enableHeaderCarousel\">\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\n </ng-container>\n </div>\n\n <!-- <ng-container *ngIf=\"isEcommerceWebsite && isMobile && !restrictInPages()\">\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\n </ng-container> -->\n\n <ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.FULL_SCREEN && isFullScreenMenuOpen\">\n <ng-container *ngTemplateOutlet=\"fullScreenMenuTemplate\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.BOTTOM_STICKY && isMobile\">\n <ng-container *ngTemplateOutlet=\"bottomStickyNavTemplate\"></ng-container>\n </ng-container>\n</section>\n\n<ng-template #header1Template>\n <div class=\"header1\">\n <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 94 : ''\">\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </div>\n <!-- HAMBURGER -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n </div>\n <!-- FULL SCREEN -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header2Template>\n <div class=\"header1\">\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n </div>\n <!-- HAMBURGER -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <!-- FULL SCREEN -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header3Template>\n <div class=\"header1\">\n <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </ng-container>\n <!-- HAMBURGER -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n </div>\n <!-- FULL SCREEN -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header4Template>\n <div class=\"header1\">\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container> </ng-container>\n <!-- HAMBURGER -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <!-- FULL SCREEN -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #logoSectionTemplate>\n <div class=\"d-flex gap-3 align-center cursor-pointer mx-1\"\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size + 80\" loading=\"lazy\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b>{{content?.siteName?.value}}</b>\n </div>\n </div>\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : \n ((content?.logo?.size >= 60 && content?.logo?.size <= 100) ? (20) : ((content?.logo?.size || 10) - 10))\"\n [class.w-75]=\"screenWidth < 475\" loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"\n (click)=\"!edit ? goToHome() : ''\">\n <!-- </div> -->\n</ng-template>\n\n<ng-template #pageLinksTemplate>\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\n <ng-container *ngIf=\"screenWidth > 475; else pageLinksDefault\">\n <div class=\"dropdown_menu_static w-100\"\n (mouseleave)=\"showList = false; selectedCategory = null; openSubmenuChild = null\">\n <div class=\"dd-nav-scroll\">\n <div class=\"dd-nav\">\n <ng-container *ngFor=\"let item of footerMenu\">\n <ng-container *ngIf=\"item.showHeader\">\n <div class=\"dd-tab-wrap\">\n <button type=\"button\" class=\"dd-tab\"\n [class.dd-tab-active]=\"showList && selectedCategory === item?.children\"\n (click)=\"item?.children?.length ? toggleChildMenu(item, $event) : redirectionsOfMenu(item)\">\n <span class=\"text-nowrap\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\n [simpoColor]=\"simpoColor\">{{item?.label | titlecase}}</span>\n <svg *ngIf=\"item?.children?.length\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\"\n viewBox=\"0 0 24 24\" fill=\"none\" [simpoColor]=\"simpoColor\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289C6.68342 7.90237 7.31658 7.90237 7.70711 8.29289L12 12.5858L16.2929 8.29289C16.6834 7.90237 17.3166 7.90237 17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071Z\"\n fill=\"#000000\" />\n </svg>\n </button>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n\n <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory?.length\" (click)=\"$event.stopPropagation()\"\n [style.left.px]=\"dropdownLeft\" [style.top.px]=\"dropdownTop\">\n <div class=\"dd-item\" *ngFor=\"let child of selectedCategory\" [class.open-submenu]=\"openSubmenuChild === child\"\n (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : toggleSubMenu(child, $event)\">\n <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\n <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">›</span>\n\n <div class=\"dd-submenu\" *ngIf=\"child?.children?.length && openSubmenuChild === child\"\n style=\"display: block;\">\n <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\n (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\n <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-template #pageLinksDefault>\n <div class=\"drawer-rows\">\n <ng-container *ngFor=\"let item of footerMenu\">\n <ng-container *ngIf=\"item.showHeader\">\n <div class=\"drawer-row\" (click)=\"redirectionsOfMenu(item)\" data-bs-dismiss=\"offcanvas\">\n <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ item?.label | titlecase }}</span>\n <mat-icon class=\"drawer-row-chevron\" *ngIf=\"item?.children?.length\"\n [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </ng-template>\n\n </div>\n\n\n</ng-template>\n\n<ng-template #buttonsTemplate>\n <div class=\"d-flex\">\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\n <div *ngFor=\"let button of action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\n (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\"\n [style.borderColor]=\"backgroundInfo?.accentColor\">\n <mat-icon>person_outline</mat-icon>\n Login\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn && !isMobile\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n </div>\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\" [style.color]=\"accentColor\"\n (click)=\"goToAccount('LOGIN')\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12 13C14.7614 13 17 10.7614 17 8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8C7 10.7614 9.23858 13 12 13Z\"\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n <path\n d=\"M20 21C20 18.8783 19.1571 16.8434 17.6569 15.3431C16.1566 13.8429 14.1217 13 12 13C9.87827 13 7.84344 13.8429 6.34315 15.3431C4.84285 16.8434 4 18.8783 4 21\"\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n </svg>\n \n Login</button>\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && loggedIn\" [style.color]=\"accentColor\"\n (click)=\"goToAccount('PROFILE')\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12 13C14.7614 13 17 10.7614 17 8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8C7 10.7614 9.23858 13 12 13Z\"\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n <path\n d=\"M20 21C20 18.8783 19.1571 16.8434 17.6569 15.3431C16.1566 13.8429 14.1217 13 12 13C9.87827 13 7.84344 13.8429 6.34315 15.3431C4.84285 16.8434 4 18.8783 4 21\"\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n </svg>\n Account</button>\n</ng-template>\n\n<ng-template #mobileFooterTemplate>\n <div class=\"cart-footer\" [style.background]=\"accentColor\" [simpoColor]=\"accentColor\"\n *ngIf=\"getCartItemsCount > 0 && !restrictCartBarInPages()\">\n <div class=\"d-flex justify-content-between px-3 py-2 h-100 align-items-center\">\n <div class=\"item-count fw-bold\">\n {{ getCartItemsCount ?? 3 }} {{ getCartItemsCount > 1 ? 'items' : 'item' }} in cart\n <!-- Total : \u20B9{{ getCartTotalAmount }} -->\n </div>\n <div class=\"d-flex align-items-center gap-2 fw-bold\" (click)=\"goToCart()\">\n View Cart <mat-icon [simpoColor]=\"accentColor\">arrow_forward</mat-icon>\n </div>\n </div>\n\n </div>\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\n <div class=\"icons\" (click)=\"goToHome()\">\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\n <span [simpoColor]=\"simpoColor\">Home</span>\n </div>\n <div class=\"icons\" (click)=\"searchProducts()\">\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\n <span [simpoColor]=\"simpoColor\">Shop</span>\n </div>\n <div class=\"icons\" (click)=\"goToWishlist()\">\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</div>\n </div>\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\n <span [simpoColor]=\"simpoColor\">Cart</span>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #ecommerceButtonsTemplate>\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\n </div> -->\n <div class=\"w-75 d-flex align-items-center\" [ngClass]=\"{'justify-content-center' : !passbookAppStatus}\">\n <div class=\"input-group w-75 ml-2\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search For Items\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\n [style.color]=\"backgroundInfo?.accentColor\">\n <!-- <span class=\"animated-placeholder position-absolute\" \n [class.animate]=\"animatePlaceholder\"\n *ngIf=\"style?.searchBarPlaceholderList.length > 1 && style?.smartSearchBar\">\n {{ currentPlaceholder }}\n </span> -->\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType === 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\n </div>\n <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\n height=\"30\" version=\"1.1\">\n <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\n <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path\n d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path\n d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\n [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n </g>\n </svg>\n <div [style.color]=\"accentColor\">Schemes</div>\n </div>\n </div>\n <div class=\"d-flex gap-3 align-items-center\">\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\n <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\n <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\n </div>\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\n Pincode\n </div>\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\n getPincode}}</div>\n\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your PIN Code unlocks\n </div>\n <div class=\"sub-text text-center f-14 pincode-text\">\n Fastest delivery date, Try-at-Home availability,\n Nearest store and In-store design!\n </div>\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\n [class.error-border]=\"pinError\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\n class=\"w-75 p-0\">\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\n </div>\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\n Please enter a valid pincode\n </div>\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\n {{getWishlistItemsCount}}</div>\n </div>\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\n {{getCartItemsCount}}</div>\n </div>\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\n stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\n </div>\n <!-- (mouseleave)=\"showLogin = false\" -->\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your Account\n </div>\n <div class=\"sub-text text-center f-14\">\n Access account & manage your orders.\n </div>\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">Sign Up</div>\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\n </div>\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n <!-- <div> -->\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\n <!-- </div> -->\n </div>\n</ng-template>\n\n<ng-template #navbarLinksTemplate>\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\n <ng-container *ngFor=\"let item of getNavbarButton\">\n <ng-container *ngIf=\"item.showHeader\">\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n </ng-container>\n </ng-container>\n\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\n <div class=\"position-relative\">\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n {{link | uppercase}}\n </button>\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.HAMBURGER\">\n <div #mobileOffcanvas class=\"offcanvas\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\n data-bs-backdrop=\"false\"\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\n\n <!-- TOP BAR -->\n <div class=\"drawer-topbar\" [simpoBackground]=\"backgroundInfo\">\n <div class=\"drawer-logo\">\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n </div>\n <button type=\"button\" class=\"drawer-close-btn\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close menu\">\n <mat-icon>chevron_left</mat-icon>\n </button>\n </div>\n\n <!-- BODY -->\n <div class=\"offcanvas-body drawer-body\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"mobileMenuListTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n </div>\n\n <!-- DIVIDER + QUICK ACTIONS -->\n <div class=\"drawer-footer\" *ngIf=\"action?.display && action?.buttons?.length\">\n <div class=\"drawer-divider\" [style.background]=\"accentColor\"></div>\n <div class=\"drawer-actions\">\n <div class=\"drawer-action\" *ngFor=\"let button of action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n [backgroundInfo]=\"data?.styles?.background\" [isFullWidth]=\"true\"></app-button-element>\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n\n<ng-template #ecomProfileTemplate>\n <!-- <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-22 px-3 py-1\"\n (click)=\"showSearchBarMobile = !showSearchBarMobile\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"backgroundInfo?.color\">search</mat-icon> -->\n\n\n <!-- <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"> -->\n\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n</ng-template>\n\n<ng-template #mobileLogoSectionTemplate>\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b>{{content?.siteName?.value}}</b>\n </div>\n </div>\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <!-- </div> -->\n</ng-template>\n\n<ng-template #categoriesHeader>\n <div class=\"categories-wrapper\" *ngIf=\"!isMobile\" (mouseleave)=\"showList = false; showCollections = false\">\n\n <div class=\"blur-overlay\" [class.active]=\"showList || showCollections\"></div>\n\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" [spacingHorizontal]=\"stylesLayout\"\n [style.background]=\"data?.styles?.background?.color\">\n\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of megaMenu; let i = index\"\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.background?.color\"\n (mouseenter)=\"setChildMenu(ele)\" (click)=\"redirectionsOfMenu(ele)\">\n {{ele?.label}}\n </div>\n </div>\n\n <!-- [class.hide-dropdown]=\"!showList\" -->\n <div class=\"list-category\" [class.show-dropdown]=\"showList\" [class.hide-dropdown]=\"!showList\">\n <div class=\"row w-100 h-100 mega-menu-scroll-row\">\n <ng-container *ngFor=\"let ele of selectedCategory; let i = index; let last = last\">\n <div class=\"mega-menu-scroll-col\" [ngClass]=\"[\n ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES') ? 'col-3' : 'col-2',\n ele?.children?.length > 0 && !last ? 'has-right-border' : ''\n ]\">\n\n <ng-container *ngIf=\"ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES' )\">\n <div class=\"mobile-submenu-card mb-3\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"ele.imageUrl\">\n <img [src]=\"ele.imageUrl\" [alt]=\"ele?.label\" class=\"mobile-submenu-image collectionImage\" />\n <div class=\"mobile-submenu-caption\">{{ele?.label | uppercase}}</div>\n </div>\n <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"!ele.imageUrl\">\n {{ele?.label | titlecase}}\n </div>\n </ng-container>\n\n <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\"\n *ngIf=\"ele?.children?.length > 0\">\n {{ele?.label | titlecase}}\n </div>\n <ng-container *ngIf=\"ele?.children && ele?.children.length > 0\">\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let child of ele?.children\">\n <div (click)=\"redirectionsOfMenu(child)\" class=\"cursor-pointer d-flex align-items-center gap-2\">\n <img *ngIf=\"child?.logoUrl\" [src]=\"child?.logoUrl\" [alt]=\"child?.label\"\n class=\"mega-menu-child-logo\" />\n <div>\n <div>{{child?.label | titlecase}}</div>\n <div *ngIf=\"child?.description\" class=\"mega-menu-child-desc\">{{child?.description}}</div>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #mobileMenuListTemplate>\n <div class=\"mobile-menu-container\">\n\n <div class=\"drawer-rows\" *ngIf=\"!selectedMobileMenu\">\n <div class=\"drawer-row\" *ngFor=\"let ele of megaMenu\"\n (click)=\"ele?.children?.length ? selectMobileMenu(ele) : redirectionsOfMenu(ele)\"\n [attr.data-bs-dismiss]=\"ele?.children?.length ? null : 'offcanvas'\">\n <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ ele?.label | titlecase }}</span>\n <mat-icon class=\"drawer-row-chevron\" *ngIf=\"ele?.children?.length\"\n [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\n </div>\n </div>\n\n <div class=\"drawer-detail\" *ngIf=\"selectedMobileMenu\">\n <div class=\"drawer-detail-back\" (click)=\"goBackMobileMenu()\">\n <mat-icon [simpoColor]=\"simpoColor\">chevron_left</mat-icon>\n <span [simpoColor]=\"simpoColor\">{{selectedMobileMenu?.label | titlecase}}</span>\n </div>\n\n <div class=\"drawer-detail-sections\">\n <ng-container *ngFor=\"let child of selectedMobileMenu?.children\">\n <div class=\"drawer-detail-section\">\n <ng-container\n *ngIf=\"child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' )\">\n <div class=\"mobile-submenu-card\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\"\n *ngIf=\"child.imageUrl\">\n <img [src]=\"child.imageUrl\" [alt]=\"child?.label\" class=\"mobile-submenu-image collectionImage\" />\n <div class=\"mobile-submenu-caption\">{{child?.label | uppercase}}</div>\n </div>\n </ng-container>\n\n <ng-container\n *ngIf=\"!(child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' ) && child.imageUrl)\">\n <div class=\"drawer-row drawer-row--sub\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\">\n <img *ngIf=\"child?.logoUrl\" [src]=\"child?.logoUrl\" [alt]=\"child?.label\" class=\"mega-menu-child-logo\" />\n <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ child?.label | titlecase }}</span>\n </div>\n\n <div class=\"drawer-detail-grid\" *ngIf=\"child?.children?.length\">\n <div class=\"drawer-chip\" *ngFor=\"let sub of child?.children\" (click)=\"redirectionsOfMenu(sub)\"\n data-bs-dismiss=\"offcanvas\">\n {{sub?.label | titlecase}}\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #mobileCategoryHeader>\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\n [spacingHorizontal]=\"stylesLayout\" [class.margin-top-mob]=\"isHeaderSticky\">\n <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\n <div class=\"cat-img d-flex justify-content-center align-items-center w-100\">\n <img [src]=\"ele?.imageUrls[0]\" [alt]=\"ele?.categoryName\" class=\"br-12 mobile-category-image\">\n </div>\n <div class=\"text-center category-name\">{{ele?.categoryName}}</div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #ecommerce_header>\n <header class=\"site-header\" [ngClass]=\"{\n 'ecom-header1': style?.styling === 'Header1',\n 'ecom-header2': style?.styling === 'Header2',\n 'ecom-header3': style?.styling === 'Header3',\n 'ecom-header4': style?.styling === 'Header4'\n }\">\n <!-- Top Bar: Logo, Search, User Actions -->\n <div class=\"top-bar\">\n\n <!-- Mobile Menu Toggle -->\n <div class=\"header-logo-area\" [ngClass]=\"{'mobile-header-left-side': screenWidth <= 475}\">\n <!-- HAMBURGER -->\n <label *ngIf=\"resolvedMobileMenuType === MobileMenuType.HAMBURGER\" for=\"mobile-menu-checkbox\"\n class=\"mobile-menu-btn\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" aria-label=\"Toggle menu\" (click)=\"goBackMobileMenu()\">\n <svg *ngIf=\"!isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\n <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\n <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\n </svg>\n <svg *ngIf=\"isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"18\" x2=\"18\" y2=\"6\"></line>\n </svg>\n </label>\n <!-- FULL SCREEN -->\n <label *ngIf=\"resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\" class=\"mobile-menu-btn\"\n aria-label=\"Toggle menu\" (click)=\"openFullScreenMenu()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\n <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\n <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\n </svg>\n </label>\n\n <!-- Logo Section -->\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\n <img [src]=\"content?.logo?.image?.url\" alt=\"Logo\" class=\"logo-img\" [width]=\"content?.logo?.size + 15\"\n [height]=\"content?.logo?.size\">\n </a>\n\n <a class=\"textPluslogo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \n && content?.logo?.text?.isText \n && content?.logo?.text?.isIcon \n && content?.logo?.text?.url\">\n\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"Icon\" class=\"logo-icon\"\n [width]=\"content?.logo?.size + 15\" [height]=\"content?.logo?.size\">\n\n <span class=\"logo-text\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 475\">\n {{ content?.siteName?.value }}\n </span>\n </a>\n\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \n && content?.logo?.text?.isText \n && !content?.logo?.text?.isIcon\">\n\n <span class=\"logo-main\" [simpoColor]=\"simpoColor\">\n {{ content?.siteName?.value }}\n </span>\n </a>\n </div>\n\n <!-- Search Bar -->\n <div class=\"search-wrapper\"\n *ngIf=\"screenWidth > 475 && content?.showSearchBar && data?.styles?.menuType !== 'DROPDOWN_MENU'\">\n <div class=\"search-bar\">\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\"\n (keydown.enter)=\"searchProducts()\" aria-label=\"Search\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"search-icon search-btn\" (click)=\"searchProducts()\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n </div>\n </div>\n\n <!-- Dropdown menu style -->\n <div class=\"dropdown_menu\" *ngIf=\"screenWidth > 475 && data?.styles?.menuType === 'DROPDOWN_MENU'\"\n (mouseleave)=\"showList = false; selectedCategory = null\">\n <div class=\"dd-nav-scroll\">\n <div class=\"dd-nav\">\n <div class=\"dd-tab-wrap\" *ngFor=\"let ele of megaMenu\">\n <button type=\"button\" class=\"dd-tab\"\n [class.dd-tab-active]=\"showList && selectedCategory === ele?.children\"\n (click)=\"ele?.children?.length ? toggleChildMenu(ele, $event) : redirectionsOfMenu(ele)\">\n <span class=\"text-nowrap\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\n [simpoColor]=\"simpoColor\">{{ele?.label | titlecase}}</span>\n <svg *ngIf=\"ele?.children?.length\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\"\n viewBox=\"0 0 24 24\" fill=\"none\" [simpoColor]=\"simpoColor\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289C6.68342 7.90237 7.31658 7.90237 7.70711 8.29289L12 12.5858L16.2929 8.29289C16.6834 7.90237 17.3166 7.90237 17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071Z\"\n fill=\"#000000\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory?.length\" (click)=\"$event.stopPropagation()\"\n [style.left.px]=\"dropdownLeft\" [style.top.px]=\"dropdownTop\">\n <div class=\"dd-item\" *ngFor=\"let child of selectedCategory\" [class.open-submenu]=\"openSubmenuChild === child\"\n (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : toggleSubMenu(child, $event)\">\n <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\n <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">›</span>\n\n <div class=\"dd-submenu\" *ngIf=\"child?.children?.length && openSubmenuChild === child\"\n style=\"display: block;\">\n <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\n (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\n <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n\n <!-- Right Actions -->\n <div class=\"user-actions\">\n\n <ng-container *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar\">\n <a class=\"action-link icon-only dropdown-search-toggle\"\n (click)=\"showDropdownDesktopSearch = !showDropdownDesktopSearch\" aria-label=\"Toggle search\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\"\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n </a>\n </ng-container>\n\n <ng-container *ngIf=\"storeAvaiable\">\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\n *ngIf=\"!getPincode\">\n <!-- <svg width=\"20\" height=\"20\" viewBox=\"0 0 17 17\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n stroke=\"currentColor\" fill=\"none\" [simpoColor]=\"simpoColor\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <path\n d=\"M8.5 0.5c-3.032 0-5.5 2.467-5.5 5.5 0 4.373 4.913 10.086 5.122 10.328l0.378 0.435 0.378-0.436c0.209-0.241 5.122-5.954 5.122-10.327 0-3.033-2.468-5.5-5.5-5.5zM8.5 15.215c-1.146-1.424-4.5-5.879-4.5-9.215 0-2.481 2.019-4.5 4.5-4.5s4.5 2.019 4.5 4.5c0 3.333-3.354 7.791-4.5 9.215zM8.5 3.139c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zM8.5 8.139c-1.103 0-2-0.897-2-2s0.897-2 2-2 2 0.897 2 2-0.897 2-2 2z\"\n fill=\"#000000\" />\n </svg> -->\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 512 512\"\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"currentColor\">\n <g>\n <path\n d=\"M341.476 338.285c54.483-85.493 47.634-74.827 49.204-77.056C410.516 233.251 421 200.322 421 166 421 74.98 347.139 0 256 0 165.158 0 91 74.832 91 166c0 34.3 10.704 68.091 31.19 96.446l48.332 75.84C118.847 346.227 31 369.892 31 422c0 18.995 12.398 46.065 71.462 67.159C143.704 503.888 198.231 512 256 512c108.025 0 225-30.472 225-90 0-52.117-87.744-75.757-139.524-83.715zm-194.227-92.34a15.57 15.57 0 0 0-.517-.758C129.685 221.735 121 193.941 121 166c0-75.018 60.406-136 135-136 74.439 0 135 61.009 135 136 0 27.986-8.521 54.837-24.646 77.671-1.445 1.906 6.094-9.806-110.354 172.918L147.249 245.945zM256 482c-117.994 0-195-34.683-195-60 0-17.016 39.568-44.995 127.248-55.901l55.102 86.463a14.998 14.998 0 0 0 25.298 0l55.101-86.463C411.431 377.005 451 404.984 451 422c0 25.102-76.313 60-195 60z\">\n </path>\n <path\n d=\"M256 91c-41.355 0-75 33.645-75 75s33.645 75 75 75 75-33.645 75-75-33.645-75-75-75zm0 120c-24.813 0-45-20.187-45-45s20.187-45 45-45 45 20.187 45 45-20.187 45-45 45z\">\n </path>\n </g>\n </svg>\n\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">Enter Pincode</span>\n\n </a>\n\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7\"></path>\n <path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"></path>\n <path d=\"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4\"></path>\n <path d=\"M2 7h20\"></path>\n <path\n d=\"M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7\">\n </path>\n </svg>\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">{{\"Delivering to: \" +\n getPincode}}</span>\n\n </a>\n\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your PIN Code unlocks\n </div>\n <div class=\"sub-text text-center f-14 pincode-text\">\n Fastest delivery date, Try-at-Home availability,\n Nearest store and In-store design!\n </div>\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\n [class.error-border]=\"pinError\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\n class=\"w-75 p-0\">\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\n </div>\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\n Please enter a valid pincode\n </div>\n </div>\n </ng-container>\n\n <a class=\"action-link icon-only login-btn\" *ngIf=\"!loggedIn\"\n (mouseenter)=\"showLogin = true;showPincodeInput = false\" (click)=\"showLogin = !showLogin\">\n <!-- User Icon SVG -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\n </svg>\n </a>\n\n <a class=\"action-link icon-only\" (click)=\"goToAccount('PROFILE')\" *ngIf=\"loggedIn\">\n <!-- User Icon SVG -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\n </svg>\n </a>\n\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your Account\n </div>\n <div class=\"sub-text text-center f-14\">\n Access account & manage your orders.\n </div>\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">Sign Up</div>\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\n </div>\n </div>\n\n <a class=\"action-link icon-only icon-container wishlist-icon\" (click)=\"goToWishlist()\">\n <!-- Heart Icon SVG -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path\n d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\">\n </path>\n </svg>\n <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\n *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</span>\n </a>\n\n <a class=\"action-link icon-only icon-container cart-icon\" (click)=\"goToCart()\">\n <!-- Shopping Bag Icon SVG -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z\"></path>\n <path d=\"M3 6h18\"></path>\n <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n </svg>\n <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\n *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</span>\n </a>\n\n <div class=\"dropdown-search-expand\"\n *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar && showDropdownDesktopSearch\">\n <div class=\"dropdown-search-box\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"dropdown-search-icon search-btn\" (click)=\"searchProducts()\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n <input type=\"text\" placeholder=\"Search for...\" [(ngModel)]=\"searchText\"\n (keydown.enter)=\"searchProducts()\" aria-label=\"Search\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"dropdown-search-close\" (click)=\"showDropdownDesktopSearch = false\" aria-label=\"Close search\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"search-wrapper\" *ngIf=\"screenWidth <= 475 && content?.showSearchBar\">\n <div class=\"search-bar\">\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\"\n (keydown.enter)=\"searchProducts()\" aria-label=\"Search\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"search-icon search-btn\" (click)=\"searchProducts()\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n </div>\n </div>\n\n </header>\n</ng-template>\n\n<ng-template #fullScreenMenuTemplate>\n <div class=\"fs-menu\">\n <div class=\"fs-menu-bg\" [simpoBackground]=\"backgroundInfo\"></div>\n <div class=\"fs-menu-inner\">\n <div class=\"fs-menu-head\">\n <div class=\"fs-menu-logo\" (click)=\"closeFullScreenMenu()\">\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n </div>\n <button class=\"fs-menu-close\" (click)=\"closeFullScreenMenu()\" aria-label=\"Close menu\">\n <mat-icon [simpoColor]=\"simpoColor\">close</mat-icon>\n </button>\n </div>\n <!-- Main level -->\n <nav class=\"fs-menu-nav\" *ngIf=\"!selectedMobileMenu\">\n <ng-container *ngFor=\"let item of footerMenu\">\n <ng-container *ngIf=\"item.showHeader\">\n <a class=\"fs-menu-link\" [class.active]=\"isNavItemActive(item)\" [style.--accent]=\"accentColor\"\n (click)=\"onFullScreenItemClick(item)\">\n <span class=\"fs-menu-dot\" [style.background]=\"accentColor\"></span>\n <span class=\"fs-menu-text\" [simpoColor]=\"simpoColor\">{{ item?.label | titlecase }}</span>\n <mat-icon class=\"fs-menu-arrow\" *ngIf=\"item?.children?.length\"\n [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\n </a>\n </ng-container>\n </ng-container>\n </nav>\n\n <!-- Submenu (drill-in) level -->\n <nav class=\"fs-menu-nav fs-menu-sub\" *ngIf=\"selectedMobileMenu\">\n <button class=\"fs-menu-back\" (click)=\"goBackMobileMenu()\">\n <mat-icon [simpoColor]=\"simpoColor\">chevron_left</mat-icon>\n <span [simpoColor]=\"simpoColor\">{{ selectedMobileMenu?.label | titlecase }}</span>\n </button>\n <ng-container *ngFor=\"let child of selectedMobileMenu?.children\">\n <a class=\"fs-menu-link\" [style.--accent]=\"accentColor\"\n (click)=\"redirectionsOfMenu(child); closeFullScreenMenu()\">\n <span class=\"fs-menu-text\" [simpoColor]=\"simpoColor\">{{ child?.label | titlecase }}</span>\n </a>\n <a class=\"fs-menu-sublink\" *ngFor=\"let sub of child?.children\" [simpoColor]=\"simpoColor\"\n (click)=\"redirectionsOfMenu(sub); closeFullScreenMenu()\">{{ sub?.label | titlecase }}</a>\n </ng-container>\n </nav>\n <div class=\"fs-menu-cta\" *ngIf=\"action?.display && action?.buttons?.length\">\n <ng-container *ngFor=\"let button of action?.buttons | slice:0:1\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n [backgroundInfo]=\"data?.styles?.background\" [isFullWidth]=\"true\"></app-button-element>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #bottomStickyNavTemplate>\n <nav class=\"bs-nav\">\n <div class=\"bs-nav-bar\" [simpoBackground]=\"backgroundInfo\">\n <button class=\"bs-tab\" *ngFor=\"let item of bottomStickyNavItems; let i = index\"\n [class.active]=\"i === activeBottomNavIndex\" (click)=\"redirectionsOfMenu(item)\">\n <span class=\"bs-tab-label\" [style.color]=\"i === activeBottomNavIndex ? accentColor : null\"\n [simpoColor]=\"i === activeBottomNavIndex ? null : simpoColor\">{{ item?.label | titlecase }}</span>\n </button>\n </div>\n </nav>\n</ng-template>", styles: [".total-container div[simpoSticky]:not(.header--scrolled){top:0!important;left:0!important;right:0!important;margin:0 auto!important;width:100%!important}.total-container div[simpoSticky].header--scrolled,.header--scrolled{top:10px!important;left:20%!important;right:20%!important;width:60%!important;overflow:hidden!important;border-radius:60px!important;box-shadow:0 10px 40px #0000001f!important;z-index:1000001!important;transition:width .4s cubic-bezier(.16,1,.3,1)}.total-container div[simpoSticky].header--scrolled.dropdown-open,.header--scrolled.dropdown-open{overflow:visible!important}@media screen and (max-width: 475px){.total-container div[simpoSticky].header--scrolled,.header--scrolled{top:10px!important;left:5%!important;right:5%!important;width:90%!important}}.simpo-transparent-type{transition:background-color .3s ease!important}@keyframes simpo-slide-down{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.simpo-sticky-revealed{animation:simpo-slide-down .3s cubic-bezier(.16,1,.3,1) forwards;box-shadow:0 2px 12px #0000001f}.w-40{width:40%!important}*{font-family:var(--website-font-family)}.animated-placeholder{left:12%;transform:translateY(-50%);transition:all .4s ease;font-size:14px;top:49%;color:#6f6f6f;font-weight:300}.animated-placeholder.animate{transform:translateY(-150%);opacity:0}.w-5{width:5%}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem;flex:0 0 auto}.category-name{text-transform:uppercase;white-space:normal;word-break:break-word;line-height:1.2;font-size:11px;letter-spacing:.4px;text-align:center;max-width:90px}.margin-bottom{margin-bottom:var(--margin-top, 0px)}@media only screen and (max-width : 475px){.w-5{width:100%!important}.logo-main,.logo-text{font-size:17px!important}.left-logo-text{padding-top:10px}.mob-form-control{width:96%;border-radius:12px!important}.input-group mat-icon{width:10%!important}.categories-header{height:unset!important}.margin-top-mob{margin-top:var(--margin-top, 0px)}.w-98{width:98%}.w-96{width:96%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important;width:100%;max-width:100%;overflow-x:visible;overflow-y:visible}.page-links-nav{flex-direction:column;align-items:flex-start;padding-bottom:0;margin-bottom:0;overflow-x:visible}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#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;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.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:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}.pageLinks{width:100%!important;max-width:100%!important}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:75%;z-index:1000000000}@media screen and (max-width: 475px){.offcanvas{top:0!important;height:100vh!important;height:100dvh!important;width:100%;display:flex;flex-direction:column}.offcanvas-body{flex:1 1 auto;height:auto}.offcanvas-footer{height:auto}}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.mobileLoginButton{width:100%;height:40px;border-radius:8px;outline:none;background:transparent;border:none;display:flex;align-items:center;justify-content:center}.pageLinks{display:flex;flex-direction:row;width:50%;max-width:50%;overflow:visible}.pageLinks .dropdown-menu{z-index:1010}.page-links-nav{display:flex;align-items:center;gap:15px;width:100%;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;padding-bottom:220px;margin-bottom:-220px;scrollbar-width:none}.page-links-nav::-webkit-scrollbar{display:none}.category-btn{font-size:16px!important}.h-70{height:70px}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:auto;max-height:50vh;overflow-y:auto;position:absolute;width:100%;z-index:1001}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:6px;height:40px}.h-45{height:45vh}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:0;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}.cart-footer{position:fixed;width:96%;height:45px;bottom:65px;z-index:100;left:8px;border-radius:10px}.item-count{align-content:center}.fs-22{font-size:22px}.w-15{width:15%!important}.site-header{width:100%;border-bottom:1px solid transparent}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1440px;margin:0 auto}.dropdown_menu_static{position:relative}.dropdown_menu{position:relative;width:55%;max-width:55%;min-width:420px;display:flex;justify-content:center;margin:0 auto}.dropdown_menu_static .dropdown_menu{position:relative;min-width:420px;max-width:55%;display:flex;justify-content:center}.dd-nav-scroll{width:100%;overflow-x:auto;overflow-y:visible;scrollbar-width:none}.dd-nav-scroll::-webkit-scrollbar{display:none}.dd-nav{display:inline-flex;align-items:flex-start;gap:18px;flex-wrap:nowrap;padding-top:5px;pointer-events:auto}.dd-tab-wrap{position:relative;display:inline-flex;pointer-events:auto}.dd-tab{border:none;background:transparent;padding:6px 2px;font-size:15px;font-weight:500;color:#30343b;line-height:1;border-bottom:3px solid transparent;display:inline-flex;align-items:center;gap:8px}.dd-tab:hover,.dd-tab.dd-tab-active{border-bottom-color:#2f3338}.dd-panel{position:absolute;top:100%;left:0;background:#fff;border:1px solid #ececef;padding:14px 0;z-index:1006;min-width:220px}.dd-item{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;font-size:16px;color:#2c2f35;transition:background-color .2s ease;cursor:pointer}.dd-item:hover{background-color:#f5f6f8}.dd-item-arrow{font-size:20px;line-height:1;color:#5a5f66}.dd-submenu{position:absolute;top:-10px;left:calc(100% + 3px);background:#fff;border:1px solid #ececef;box-shadow:0 10px 26px #1d212926;padding:10px 0;display:none;z-index:1007}.dd-item:hover .dd-submenu{display:block}.dd-sub-item{padding:10px 16px;font-size:15px;color:#2c2f35;transition:background-color .2s ease}.dd-sub-item:hover{background-color:#f5f6f8}.dropdown-search-toggle{cursor:pointer}.dropdown-search-expand{position:absolute;top:calc(100% + 10px);right:0;min-width:320px;z-index:1010}.dropdown-search-box{width:100%;background:#f3f3f3;border:1px solid #e7e7e7;display:flex;align-items:center;gap:12px;padding:10px 14px}.dropdown-search-icon{color:#1f2328;flex:0 0 auto}.dropdown-search-box input{border:none;background:transparent;width:100%;font-size:14px;color:#2f3338;outline:none}.dropdown-search-close{color:#545861;cursor:pointer;flex:0 0 auto}.logo{display:flex;flex-direction:column;align-items:flex-start;color:#5e4042;line-height:1;text-decoration:auto}.logo-img{display:block}.logo-main{font-family:Playfair Display,serif;font-size:32px;font-weight:500;letter-spacing:.5px}.logo-sub{font-family:Montserrat,sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;margin-top:2px;margin-left:2px}.search-wrapper{flex:1;display:flex;justify-content:center;max-width:600px}.search-bar{width:100%;background-color:#f3f3f3;border-radius:8px;display:flex;align-items:center;padding:10px 16px;gap:12px}.search-icon{color:#333;width:18px;height:18px}.search-btn{cursor:pointer;flex-shrink:0}.search-bar input{border:none;background:transparent;width:100%;font-family:Montserrat,sans-serif;font-size:14px;color:#1a1a1a;outline:none}.search-bar input::placeholder{color:#888;font-weight:400}.user-actions{display:flex;align-items:center;gap:24px}.action-link{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.action-link:hover{color:#5e4042}.store-text{white-space:nowrap}.icon-only svg{display:block;cursor:pointer}.main-nav{border-top:1px solid transparent;padding-bottom:15px}.nav-list{display:flex;justify-content:center;flex-wrap:wrap;gap:32px;padding:10px 40px}.nav-list li{position:relative}.nav-list a{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#333;padding:5px 0;display:inline-block}.nav-list a:hover{color:#5e4042}.has-badge{position:relative}.badge{position:absolute;top:-12px;right:-10px;background-color:#a87b7b;color:#fff;font-size:9px;font-weight:600;padding:2px 6px;border-radius:10px;line-height:1;white-space:nowrap}.mobile-menu-checkbox{display:none}.mobile-menu-btn{display:none;cursor:pointer;color:#333}.hero-placeholder{height:80vh;background-color:#f9f9f9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#5e4042}.hero-placeholder h1{font-family:Playfair Display,serif;font-size:3rem;margin-bottom:1rem}@media (max-width: 1024px){.nav-list{gap:20px}.store-text{display:none}.search-wrapper{margin:0 20px}}@media (max-width: 768px){.top-bar{padding:15px 20px;flex-wrap:wrap}.search-wrapper{order:3;padding:0 8px;width:100%;max-width:100%;margin:0 0 15px}.user-actions{gap:16px}.main-nav{display:none;width:100%;background:#fff;border-top:1px solid #eee}.nav-list{flex-direction:column;align-items:center;gap:15px;padding:20px}.badge{position:relative;top:-2px;right:auto;margin-left:8px;vertical-align:middle}.mobile-menu-btn{display:block}.mobile-menu-checkbox:checked~.main-nav{display:block}}@media screen and (max-width: 475px){.store-link{display:none}.info-container{width:100vw;top:62%}}.icon-container{position:relative}.count-badge{position:absolute;top:-8px;right:-8px;font-size:10px;font-weight:600;height:18px;width:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #ffffff}.textPluslogo{display:flex;align-items:center;gap:8px;flex-shrink:0;text-decoration:none}.logo-icon{color:#5e4042}.logo-text{font-size:28px;font-weight:600;color:#1a1a1a;letter-spacing:-.5px}.mobile-header-left-side{display:flex;align-items:center;gap:15px}.categories-wrapper{position:relative;width:100%;z-index:100}.categories-wrapper .categories-header{border-top:1px solid rgba(0,0,0,.1)}.categories-header{gap:26px!important;overflow-x:auto;margin:8px 8px 0;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;position:relative}.categories-header::-webkit-scrollbar{display:none}.category{position:relative;border-bottom:3px solid transparent;transition:border-color .35s ease,color .35s ease}.category:hover{border-bottom-color:var(--border-color)}.blur-overlay{position:fixed;top:var(--margin-top, 0px);left:0;width:100vw;height:calc(100vh - var(--margin-top, 0px));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffff47;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s ease;z-index:1000}.blur-overlay.active{opacity:1;visibility:visible}.list-category{padding:20px 30px;color:#111;background:#fff!important;height:auto;max-height:50vh;position:absolute;top:100%;left:0;width:100%;z-index:1003;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,transform .35s ease,visibility .35s ease;will-change:opacity,transform;box-shadow:0 18px 40px #0000001a;overflow-x:hidden;overflow-y:auto}.mega-menu-scroll-row{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.mega-menu-scroll-col{flex-shrink:0}.mega-menu-scroll-col.has-right-border{border-right:1px solid #e9e7e7}.collectionImage{border-radius:10px;height:70%!important}@media screen and (min-width: 476px){.list-category .mobile-submenu-card{aspect-ratio:4 / 3;overflow:hidden}.list-category .mobile-submenu-image.collectionImage{width:100%;height:100%!important;object-fit:cover;display:block}}.list-item>div{color:#585858}.list-item>div:hover{color:#000}.show-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.hide-dropdown{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px)}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px;height:auto;max-height:36vh;overflow-y:auto}.each-price{transition:transform .25s ease,font-weight .25s ease,color .25s ease}.each-price:hover{font-weight:700;transform:translate(4px)}.image-container{cursor:pointer;overflow:hidden}.image-container img{border-radius:12px;transition:transform .35s ease}.image-container:hover img{transform:scale(1.04)}.collection{height:max-content;cursor:pointer;transition:transform .25s ease}.collection:hover{transform:translateY(-2px)}.mobile-menu-container{height:100%;overflow-y:auto}.mobile-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mobile-menu-item{display:flex;align-items:center;justify-content:space-between;background:#f5f5f5;border-radius:8px;padding:14px;cursor:pointer;transition:background-color .2s ease}.mobile-menu-item:active{background:#ebebeb}.mobile-menu-label{font-size:11px;letter-spacing:.5px;color:#1a1a1a;line-height:1.3}.mobile-menu-arrow{font-size:18px!important;width:18px!important;height:18px!important;color:#999;flex-shrink:0}.mobile-menu-detail{padding:0}.mobile-menu-back{display:flex;align-items:center;gap:4px;padding:14px 0;cursor:pointer;font-size:16px;color:#1a1a1a}.mobile-menu-back mat-icon{font-size:22px!important;width:22px!important;height:22px!important;color:#1a1a1a!important}.mobile-submenu-sections{overflow-y:auto}.mobile-submenu-section{margin-bottom:20px}.mobile-submenu-card{position:relative;border-radius:12px;overflow:hidden;cursor:pointer}.mobile-submenu-image{display:block;width:100%;height:auto!important}.mobile-submenu-caption{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;font-size:14px;font-weight:700;letter-spacing:.6px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.5);background:linear-gradient(180deg,#0000,#0009)}.mobile-submenu-header{font-size:14px;font-weight:700;letter-spacing:.5px;color:#1a1a1a;margin-bottom:12px;cursor:pointer}.mobile-submenu-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mobile-submenu-item{background:#f5f5f5;border-radius:8px;padding:10px 14px;font-size:12px;font-weight:400;color:#333;cursor:pointer;text-align:center;transition:background-color .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-submenu-item:active{background:#ebebeb}.mobile-category-image{border-radius:50%;height:11vh;width:11vh;object-fit:cover}.drawer-topbar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(0,0,0,.06);flex:0 0 auto}.drawer-logo{flex:1 1 auto;display:flex;justify-content:flex-start;align-items:center;max-height:38px;overflow:hidden}.drawer-logo img{max-height:38px;width:auto}.drawer-close-btn{position:absolute;top:8px;right:8px;z-index:3;flex:none;background:#fff;border:1px solid rgba(0,0,0,.1);box-shadow:0 2px 8px #00000024;cursor:pointer;width:30px!important;min-width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;transition:background-color .18s ease}.drawer-close-btn:active{background:#0000000f}.drawer-close-btn mat-icon{color:#1a1a1a;font-size:22px;height:22px;width:22px}.drawer-body{flex:1 1 auto;overflow-y:auto;padding:4px 8px 8px}.drawer-rows{display:flex;flex-direction:column}.drawer-row{display:flex;align-items:center;gap:14px;padding:14px 12px;border-radius:12px;cursor:pointer;transition:background-color .18s ease}.drawer-row:active,.drawer-row:hover{background:#0000000b}.drawer-row+.drawer-row{border-top:1px solid rgba(0,0,0,.05)}.drawer-row-icon{font-size:22px;height:22px;width:22px;flex:0 0 auto}.drawer-row-label{flex:1 1 auto;font-size:15px;font-weight:500;line-height:1.2}.drawer-row-chevron{font-size:20px;height:20px;width:20px;flex:0 0 auto;opacity:.55}.drawer-row--sub .drawer-row-label{font-weight:600}.drawer-detail{padding:4px 4px 8px}.drawer-detail-back{display:flex;align-items:center;gap:6px;padding:10px 8px;cursor:pointer;font-size:16px;font-weight:600}.drawer-detail-back mat-icon{font-size:24px;height:24px;width:24px}.drawer-detail-section{margin-bottom:18px}.drawer-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:6px 12px 0}.drawer-chip{background:#0000000a;border-radius:10px;padding:10px 12px;font-size:13px;color:#333;text-align:center;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color .18s ease}.drawer-chip:active{background:#00000014}.drawer-footer{flex:0 0 auto;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}.drawer-divider{height:1px;width:100%;opacity:.35;margin-bottom:14px}.drawer-actions{display:flex;flex-direction:column;gap:10px}.drawer-action,.drawer-action app-button-element,.drawer-action .button{width:100%}.drawer-action .button{justify-content:center}.fs-menu{position:fixed;inset:0;z-index:1000000;display:grid;grid-template-areas:\"stack\";overflow:hidden;animation:fsMenuFade .28s cubic-bezier(.16,1,.3,1) both}.fs-menu-bg{grid-area:stack;width:100%;height:100%;z-index:0}.fs-menu-inner{grid-area:stack;position:relative;z-index:1;display:flex;flex-direction:column;max-width:560px;margin:0 auto;width:100%;height:100%;min-height:0;padding:18px 24px calc(18px + env(safe-area-inset-bottom));overflow:hidden}.fs-menu-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin-bottom:10px}.fs-menu-logo{display:flex;align-items:center;max-height:44px;overflow:hidden;cursor:pointer}.fs-menu-logo img{max-height:42px;width:auto!important}@keyframes fsMenuFade{0%{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}.fs-menu-close{flex:none;width:40px!important;min-width:40px;height:40px;border-radius:50%;background:#7f7f7f24;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background-color .2s ease}.fs-menu-close:hover{background:#7f7f7f3d}.fs-menu-close mat-icon{font-size:24px;height:24px;width:24px}.fs-menu-nav{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;margin-bottom:16px}.fs-menu-link{position:relative;display:flex;align-items:center;gap:12px;padding:13px 4px;cursor:pointer;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent, #888) 10%,transparent);animation:fsLinkIn .45s cubic-bezier(.16,1,.3,1) both}.fs-menu-link:nth-child(1){animation-delay:.05s}.fs-menu-link:nth-child(2){animation-delay:.1s}.fs-menu-link:nth-child(3){animation-delay:.15s}.fs-menu-link:nth-child(4){animation-delay:.2s}.fs-menu-link:nth-child(5){animation-delay:.25s}.fs-menu-link:nth-child(6){animation-delay:.3s}@keyframes fsLinkIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.fs-menu-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;opacity:0;transform:scale(.4);transition:opacity .2s ease,transform .2s ease}.fs-menu-link:hover .fs-menu-dot,.fs-menu-link.active .fs-menu-dot{opacity:1;transform:scale(1)}.fs-menu-text{font-size:clamp(1rem,5vw,1.6rem);font-weight:600;letter-spacing:-.3px;line-height:1.1;transition:transform .2s ease,opacity .2s ease}.fs-menu-link:hover .fs-menu-text{transform:translate(6px);opacity:.85}.fs-menu-arrow{margin-left:auto;flex:0 0 auto;font-size:22px;height:22px;width:22px;opacity:.55}.fs-menu-back{display:flex;align-items:center;gap:6px;background:transparent;border:none;cursor:pointer;padding:6px 0 14px;width:auto!important;font-size:15px;font-weight:600;opacity:.85}.fs-menu-back mat-icon{font-size:26px;height:26px;width:26px}.fs-menu-sublink{display:block;padding:9px 4px 9px 18px;font-size:1rem;font-weight:400;text-decoration:none;cursor:pointer;opacity:.78;border-bottom:1px solid color-mix(in srgb,var(--accent, #888) 16%,transparent);transition:opacity .2s ease,transform .2s ease}.fs-menu-sublink:hover{opacity:1;transform:translate(5px)}.fs-menu-cta{flex:0 0 auto;padding-top:4px}.fs-menu-cta app-button-element,.fs-menu-cta .button{width:100%;justify-content:center}.bs-nav{position:fixed;left:0;right:0;bottom:0;z-index:10001;pointer-events:none}.bs-nav-bar{pointer-events:auto;display:flex;align-items:stretch;justify-content:space-around;height:64px;padding-bottom:env(safe-area-inset-bottom);border-radius:18px 18px 0 0;box-shadow:0 -4px 20px #0000001f}.bs-tab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:transparent;border:none;cursor:pointer;padding:8px 4px;transition:transform .15s ease}.bs-tab:active{transform:translateY(1px)}.bs-tab-icon{font-size:23px;height:23px;width:23px;transition:color .2s ease}.bs-tab-label{font-size:10.5px;font-weight:500;letter-spacing:.2px;line-height:1;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s ease}.bs-tab.active .bs-tab-label{font-weight:700}@media screen and (max-width: 475px){body{padding-bottom:var(--bottom-nav-height, 0px)}}@media (min-width: 476px){.site-header.ecom-header2 .top-bar,.site-header.ecom-header4 .top-bar{flex-direction:row-reverse}}.mega-menu-child-logo{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0}.mega-menu-child-desc{font-size:11px;color:#999;margin-top:2px;line-height:1.3}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth", "itemIndex"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { 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", "accentColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.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", "isEcommerce"], outputs: ["edit"] }, { 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: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky", "categoryHeader"], outputs: ["stickyScrolled"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: MovingTextComponent, selector: "simpo-moving-text", inputs: ["data", "edit", "delete", "customClass", "index"] }, { kind: "component", type: CountdownBannerComponent, selector: "simpo-countdown-banner", inputs: ["edit", "data", "customClass", "nextComponentColor", "index", "delete", "isHeaderRenderer"] }] }); }
|
|
18967
18919
|
}
|
|
18968
18920
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, decorators: [{
|
|
18969
18921
|
type: Component,
|
|
@@ -19122,7 +19074,7 @@ class NewTestimonialsComponent extends BaseSection {
|
|
|
19122
19074
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewTestimonialsComponent, deps: [{ token: EventsService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
19123
19075
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NewTestimonialsComponent, isStandalone: true, selector: "simpo-new-testimonials", inputs: { data: "data", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor", index: "index" }, host: { listeners: { "window: resize": "getScreenSize($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "carouselInner", first: true, predicate: ["carouselInner"], descendants: true }, { propertyName: "carouselItems", predicate: ["carouselItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\" [simpoBorder]=\"styles?.border\" [id]=\"data?.id\">\r\n <div class=\"parent-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoBackground]=\"styles?.background\">\r\n <div class=\"d-flex flex-column\" [simpoOverlay]=\"styles?.background\" [simpoLayout]=\"styles?.layout\"\r\n [id]=\"data?.id\">\r\n <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container *ngFor=\"let text of content?.inputText; let i = index\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div class=\"list-items mt-3 d-flex gap-3\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\"\r\n [class.flex-column]=\"screenWidth < 475\">\r\n <div class=\"image-container w-35 height-50\" [class.w-100]=\"screenWidth < 475\" [id]=\"data?.id\"\r\n [class.h-30]=\"screenWidth < 475\" [class.bg-black]=\"getImageType() == 'Video'\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <ng-container>\r\n <ng-container *ngIf=\"getImageType() == 'Image'\">\r\n <img loading=\"lazy\" class=\"w-100 h-100\" [src]=\"getImageUrl()\" alt=\"Selected Image\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\" loading=\"lazy\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\"\r\n [sectionId]=\"data?.id\">\r\n <!-- <img [src]=\"getImageUrl()\" alt=\"Selected Image\" class=\"w-100 h-100\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"> -->\r\n </ng-container>\r\n <ng-container *ngIf=\"getImageType() == 'Video'\">\r\n <video [src]=\"getImageUrl()\" class=\"w-100 h-100\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n controls></video>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <div id=\"carouselExampleIndicators\" data-bs-keyboard=\"false\"\r\n class=\"carousel slide w-65 d-flex flex-column\"\r\n [simpoContentAlignment]=\"styles?.contentAlignment\" [class.w-100]=\"screenWidth < 475\">\r\n <div class=\"carousel-inner overflow-unset\" [class.mb-6]=\"screenWidth < 475\" #carouselInner>\r\n <ng-container *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <div class=\"carousel-item h-100\" [ngClass]=\"{'active': i === 0}\" #carouselItem>\r\n <div class=\"quote-image mb-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"31\"\r\n viewBox=\"0 0 36 31\" fill=\"none\">\r\n <path\r\n d=\"M35.3998 3.29993C35.5998 3.09993 35.7998 2.69993 35.5998 2.29993C35.3998 2.09993 34.9998 1.69993 34.5998 0.899925C33.9998 0.699925 33.5998 0.699926 32.9998 1.09993C25.3998 5.89993 21.1998 11.4999 20.3998 17.8999C18.9998 27.8999 27.9998 32.6999 32.5998 28.2999C37.1998 23.8999 34.3998 18.2999 31.1998 16.6999C27.9998 15.0999 25.9998 15.6999 26.1998 13.6999C26.5998 11.6999 31.1998 6.09993 35.3998 3.29993ZM14.7998 1.09993C14.1998 0.699926 13.5998 0.699926 13.1998 1.09993C5.59983 5.89993 1.39983 11.4999 0.599832 18.0999C-0.800168 28.0999 8.19983 32.8999 12.7998 28.4999C17.3998 24.0999 14.5998 18.4999 11.3998 16.8999C7.99983 15.4999 5.99983 16.0999 6.39983 13.8999C6.79983 11.8999 11.3998 6.29993 15.5998 3.49993C15.7998 3.29993 15.9998 2.89993 15.7998 2.49993C15.5998 2.29993 15.1998 1.89993 14.7998 1.09993Z\"\r\n [attr.fill]=\"styles?.background?.accentColor\" />\r\n </svg>\r\n </div>\r\n <div class=\"item mb-3\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i\" [isRTE]=\"item.inputText[0]?.isRTE\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"prev-next d-flex align-items-center justify-content-between\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <div class=\"carousel-control-prev\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n data-bs-slide=\"prev\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n (click)=\"idx = (idx - 1 < 0 ? getLength() - 1 : idx - 1)\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n\r\n <div class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n data-bs-slide=\"next\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n (click)=\"idx = (idx + 1 >= getLength() ? 0 : idx + 1)\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <div class=\"d-flex\">\r\n <app-button-element [buttonContent]=\"data?.action?.buttons[0]?.content \"\r\n [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n [buttonId]=\"data?.action?.buttons[0]?.id\" [edit]=\"edit\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></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: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-container{position:relative;height:auto}.bg-black{background:#000}.carousel-control-prev,.carousel-control-next{position:unset!important;width:30px;border-radius:50%!important;height:30px}.w-35{width:35%!important}.w-65{width:65%!important}.image-container{z-index:100}.prev-next{width:100%}.overflow-visible{overflow:visible!important}.overflow-unset{overflow:unset!important}@media screen and (max-width: 475px){.list-items{flex-direction:column!important}.h-30{height:30vh!important}}.height-50{height:50vh}.w-100{width:100%!important}.mb-6{margin-bottom:2.5rem!important}.flex-column{flex-direction:column!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type:
|
|
19124
19076
|
// directives
|
|
19125
|
-
SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "component", type:
|
|
19077
|
+
SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth", "itemIndex"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "component", type:
|
|
19126
19078
|
// components
|
|
19127
19079
|
TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }] }); }
|
|
19128
19080
|
}
|
|
@@ -19253,7 +19205,7 @@ class NewServicesComponent extends BaseSection {
|
|
|
19253
19205
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewServicesComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
19254
19206
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NewServicesComponent, isStandalone: true, selector: "simpo-new-services", inputs: { data: "data", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "onResize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"main-container d-block\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\"\r\n [attr.style]=\"customClass\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"main-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoBackground]=\"styles?.background\">\r\n <div [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\" class=\"d-flex flex-column\"\r\n [simpoLayout]=\"styles?.layout\">\r\n <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container *ngFor=\"let text of content?.inputText; let i = index\">\r\n <div [ngClass]=\"text.label.includes('Heading') ? 'heading-large lh-2 mb-2' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex gap-3 mt-2\" [spacingHorizontal]=\"stylesLayout\">\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <div *ngFor=\"let button of data?.action?.buttons\" [id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [edit]=\"edit\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"list-image-container mt-3 d-flex gap-3 h-100 \" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [spacingHorizontal]=\"stylesLayout\"\r\n [class.flex-mob-column-reverse]=\"styles?.positionLayout?.value === 'bottom'\"\r\n [id]=\"data?.id\" [class.flex-mob-column]=\"styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' \"\r\n [simpoAnimation]=\"styles?.animation\" [class.w-100]=\"screenWidth < 475\">\r\n <div class=\"img-container h-100\" [id]=\"data?.id\"\r\n [class.image-fit]=\"styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'\"\r\n [class.w-50]=\"styles?.positionLayout?.value === 'right' || styles?.positionLayout?.value === 'left'\"\r\n [class.w-100]=\"screenWidth < 475\">\r\n <ng-container *ngIf=\"getImageUrl()\">\r\n <img [src]=\"getImageUrl()\" alt=\"Selected Image\" class=\"d-block img-fluid w-100 h-100\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n [simpoCorner]=\"styles?.corners\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\">\r\n </ng-container>\r\n </div>\r\n <div class=\"list-items h-auto o-visible\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [class.w-50]=\"styles?.positionLayout?.value === 'right' || styles?.positionLayout?.value === 'left'\"\r\n [class.w-100]=\"screenWidth < 475\" [class.object-unset]=\"screenWidth < 475\"\r\n [class.over-y]=\"styles?.positionLayout?.value === 'right' || styles?.positionLayout?.value === 'left'\"\r\n [class.row]=\"styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'\"\r\n [class.gap-2]=\"styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'\"\r\n [class.over-x]=\"styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'\"\r\n [class.object-unset]=\"styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'\">\r\n <ng-container *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <div class=\"item mb-3 bb-3\"\r\n [class.col-md-3]=\"styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'\"\r\n [class.col-6]=\"screenWidth < 475 && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')\"\r\n (mouseenter)=\"idx = i\" [ngStyle]=\"{\r\n borderBottom: styles?.background?.accentBackgroundType === 'Solid' && idx == i\r\n ? '3px solid ' + styles?.background?.accentColor\r\n : styles?.background?.accentBackgroundType === 'Gradient' && idx == i ? '3px solid transparent' : '',\r\n borderImage: styles?.background?.accentBackgroundType === 'Gradient' && idx == i\r\n ? 'linear-gradient(' + getGradientDirection(styles?.background?.gradientDirection) + ', ' + styles?.background?.accentColor + ', ' + styles?.background?.secondaryAccentColor + ') 1'\r\n : '',\r\n borderImageSlice: styles?.background?.accentBackgroundType === 'Gradient' ? '1' : ''\r\n }\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i\" [isRTE]=\"item.inputText[0]?.isRTE\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></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: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-container{position:relative;height:auto}.item{padding-bottom:10px}.row{flex-wrap:unset!important}.col-md-3{width:24%!important;padding-left:unset!important;padding-right:unset!important}.col-6{width:50%!important}.over-x{overflow-x:scroll}.over-y{overflow-y:scroll}.w-100{width:100%!important}.object-unset{aspect-ratio:unset!important}.bb-3{border-bottom:3px solid #e0e0e0}.image-fit{object-fit:none!important;object-position:center!important;width:100%!important;height:100%!important;aspect-ratio:unset!important}.list-items::-webkit-scrollbar{display:flex!important;height:3px}.list-items::-webkit-scrollbar-thumb{background:#d4d4d4}@media screen and (max-width: 475px){.list-items{aspect-ratio:unset!important;object-fit:unset!important}.flex-mob-column-reverse{flex-direction:column-reverse!important}.flex-mob-column{flex-direction:column!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type:
|
|
19255
19207
|
// directives
|
|
19256
|
-
SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "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: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "component", type:
|
|
19208
|
+
SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth", "itemIndex"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "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: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "component", type:
|
|
19257
19209
|
// components
|
|
19258
19210
|
TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }] }); }
|
|
19259
19211
|
}
|
|
@@ -21409,61 +21361,6 @@ class ProductDescComponent extends BaseSection {
|
|
|
21409
21361
|
currentDate.setDate(currentDate.getDate() + (this.ecomConfigs?.expectedDeliveryDate ?? 7));
|
|
21410
21362
|
return currentDate;
|
|
21411
21363
|
}
|
|
21412
|
-
getProductDescriptionRecommendations() {
|
|
21413
|
-
// this.apiLoading = true;
|
|
21414
|
-
const businessId = localStorage.getItem('businessId');
|
|
21415
|
-
const userId = this.userId;
|
|
21416
|
-
this.restService.getProductDescriptionRecommendations(businessId, userId).subscribe((response) => {
|
|
21417
|
-
this.recommededData = Array.isArray(response?.data) ? response.data : [];
|
|
21418
|
-
this.storageService.getUserCart().then((cartResponse) => {
|
|
21419
|
-
cartResponse.onsuccess = (cartData) => {
|
|
21420
|
-
// this.apiLoading = false;
|
|
21421
|
-
this.USER_CART = cartData.target.result;
|
|
21422
|
-
this.recommededData?.forEach((product) => {
|
|
21423
|
-
this.USER_CART?.forEach((item) => {
|
|
21424
|
-
if (item.itemId == product.productId) {
|
|
21425
|
-
if (product?.itemVariant?.length > 0) {
|
|
21426
|
-
const itemVarient = product?.itemVariant?.[0];
|
|
21427
|
-
if (itemVarient.variantId == item.varientId) {
|
|
21428
|
-
product.itemImages = itemVarient.variantImages ?? [];
|
|
21429
|
-
product.price = itemVarient.itemVariantPrice;
|
|
21430
|
-
product.quantity = item.quantity;
|
|
21431
|
-
}
|
|
21432
|
-
}
|
|
21433
|
-
else {
|
|
21434
|
-
product.quantity = item.quantity;
|
|
21435
|
-
}
|
|
21436
|
-
}
|
|
21437
|
-
});
|
|
21438
|
-
});
|
|
21439
|
-
};
|
|
21440
|
-
}, (err) => {
|
|
21441
|
-
// this.apiLoading = false;
|
|
21442
|
-
});
|
|
21443
|
-
this.storageService.getUserWhishlist().then((wishlistResponse) => {
|
|
21444
|
-
wishlistResponse.onsuccess = (whislistData) => {
|
|
21445
|
-
this.USER_WISHLIST = whislistData.target.result;
|
|
21446
|
-
this.recommededData?.forEach((product) => {
|
|
21447
|
-
this.USER_WISHLIST?.forEach((item) => {
|
|
21448
|
-
if (item.itemId == product.productId) {
|
|
21449
|
-
if (product?.itemVariant?.length > 0) {
|
|
21450
|
-
const itemVarient = product?.itemVariant?.[0];
|
|
21451
|
-
if (itemVarient.variantId == item.varientId) {
|
|
21452
|
-
product.itemImages = itemVarient?.variantImages ?? [];
|
|
21453
|
-
product.price = itemVarient.itemVariantPrice;
|
|
21454
|
-
product.whislist = true;
|
|
21455
|
-
}
|
|
21456
|
-
}
|
|
21457
|
-
else {
|
|
21458
|
-
product.whislist = true;
|
|
21459
|
-
}
|
|
21460
|
-
}
|
|
21461
|
-
});
|
|
21462
|
-
});
|
|
21463
|
-
};
|
|
21464
|
-
});
|
|
21465
|
-
});
|
|
21466
|
-
}
|
|
21467
21364
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductDescComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: RestService }, { token: CartService }, { token: StorageServiceService }, { token: i6$1.MessageService }, { token: i1.Meta }, { token: i1.Title }, { token: i8$2.MatBottomSheet }, { token: i0.Renderer2 }, { token: i1$2.MatDialog }, { token: AnalyticsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
21468
21365
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "reviewComponent", first: true, predicate: CustomerReviewComponent, descendants: true }, { propertyName: "aboveHeight", first: true, predicate: ["aboveHeight"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "imageSection", first: true, predicate: ["imageSection"], descendants: true }, { propertyName: "detailSection", first: true, predicate: ["detailSection"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n <section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\n\n <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\n <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\n </div> -->\n <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [spacingHorizontal]=\"stylesLayout\"\n [simpoLayout]=\"styles?.layout\" #container>\n <!-- <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\n (click)=\"routeToHome()\">Home</a> /\n <span>{{ responseData?.name | titlecase }}</span>\n </div> -->\n <div class=\"row m-0 w-100 mt-lg-4 h-auto overflow-visible\" #aboveHeight>\n <div class=\"col-lg-6 col-sm-12 image-section-modern\" #imageSection>\n <div class=\"d-flex flex-column justify-content-start gap-1\">\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\n </div>\n </div>\n <div class=\"col-lg-6 col-sm-12 detail-section-modern \" #detailSection>\n <div class=\"product-hero-card-modern\">\n <ng-container *ngIf=\"isMobile\">\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n </ng-container>\n\n <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\n\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\n </ng-container>\n </div>\n\n\n <ng-container *ngIf=\"ecomConfigs?.deliveryEnabled\">\n <!-- *ngIf=\"ecomConfigs?.deliveryEnabled\" -->\n <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"ecomConfigs?.storesEnabled\">\n <!-- *ngIf=\"ecomConfigs?.storesEnabled\" -->\n <ng-container *ngTemplateOutlet=\"StoreSection\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"ecomConfigs?.appointmentBookingEnabled\">\n <!-- *ngIf=\"ecomConfigs?.appointmentBookingEnabled\" -->\n <ng-container *ngTemplateOutlet=\"TryAtHome\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"ecomConfigs?.videoCallEnabled\">\n <!-- *ngIf=\"ecomConfigs?.videoCallEnabled\" -->\n <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"ecomConfigs?.brandPromiseEnabled\">\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n </ng-container>\n\n\n\n <!-- Moved descriptors to Details tab below -->\n\n <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\n [innerHTML]=\"responseData.brief\"></div> -->\n <!-- Moved tags to Details tab below -->\n <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\n <!-- <ng-container>\n <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\n </ng-container> -->\n </div>\n </div>\n <!-- Tabs Navigation -->\n <div class=\"product-tabs-container\">\n <ul class=\"tabs-list\">\n <li class=\"tab-item\" [class.active]=\"activeTab == 'Details'\"\n [style.color]=\"activeTab == 'Details' ? styles?.background?.accentColor : ''\"\n [style.borderColor]=\"activeTab == 'Details' ? styles?.background?.accentColor : 'transparent'\"\n (click)=\"changeTab('Details')\">Details</li>\n <li class=\"tab-item\" *ngIf=\"reviewsData\" [class.active]=\"activeTab == 'Reviews'\"\n [style.color]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : ''\"\n [style.borderColor]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : 'transparent'\"\n (click)=\"changeTab('Reviews')\">Reviews</li>\n <li class=\"tab-item\" *ngIf=\"materialBasedPricing\" [class.active]=\"activeTab == 'PriceBreakup'\"\n [style.color]=\"activeTab == 'PriceBreakup' ? styles?.background?.accentColor : ''\"\n [style.borderColor]=\"activeTab == 'PriceBreakup' ? styles?.background?.accentColor : 'transparent'\"\n (click)=\"changeTab('PriceBreakup')\">Price Breakup</li>\n </ul>\n </div>\n\n <!-- Tab Content -->\n <div class=\"tab-content-pane\">\n <div *ngIf=\"activeTab == 'Details'\">\n <!-- Integrated descriptors and tags here -->\n <div class=\"mt-2\">\n <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\n </div>\n </div>\n\n <div *ngIf=\"activeTab == 'Reviews'\">\n <ng-container *ngTemplateOutlet=\"ReviewsSection\"></ng-container>\n </div>\n\n <div *ngIf=\"activeTab == 'PriceBreakup'\">\n <div class=\"pb-glass-container mt-2\">\n\n <!-- One card per material \u2014 generic, works for any material type -->\n <ng-container *ngFor=\"let ele of responseData?.materials\">\n <div class=\"pb-glass-card\">\n <div class=\"pb-glass-header\"\n [style.background]=\"styles?.background?.accentColor\"\n [style.color]=\"'#fff'\">\n {{ ele?.materialName | titlecase }}\n </div>\n <div class=\"pb-glass-row\">\n <span class=\"pb-label\">Purity</span>\n <span class=\"pb-value\">{{ ele?.purity }}</span>\n </div>\n <div class=\"pb-glass-row\">\n <span class=\"pb-label\">Net Weight</span>\n <span class=\"pb-value\">{{ ele?.quantity }} {{ ele?.unit | titlecase }}</span>\n </div>\n <div class=\"pb-glass-row\">\n <span class=\"pb-label\">Rate / {{ ele?.unit | titlecase }}</span>\n <span class=\"pb-value\">\u20B9{{ ele?.pricePerUnit | number:'1.2-2' }}</span>\n </div>\n <div class=\"pb-glass-row\">\n <span class=\"pb-label\">Value</span>\n <span class=\"pb-value\">\u20B9{{ (ele?.quantity * ele?.pricePerUnit) | number:'1.2-2' }}</span>\n </div>\n </div>\n </ng-container>\n\n <!-- Making Charges card -->\n <div class=\"pb-glass-card\">\n <div class=\"pb-glass-header\"\n [style.background]=\"styles?.background?.accentColor\"\n [style.color]=\"'#fff'\">\n Making Charges\n </div>\n <div class=\"pb-glass-row\">\n <span class=\"pb-label\">Net Weight</span>\n <span class=\"pb-value\">{{ responseData?.baseWeight }}</span>\n </div>\n <div class=\"pb-glass-row\">\n <span class=\"pb-label\">Making Charge %</span>\n <span class=\"pb-value\">{{ responseData?.makingChargePercentage }}%</span>\n </div>\n <div class=\"pb-glass-row\">\n <span class=\"pb-label\">Value</span>\n <span class=\"pb-value\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}</span>\n </div>\n </div>\n\n <!-- Summary card -->\n <div class=\"pb-summary-card\">\n <div class=\"pb-summary-row\">\n <span>Total Value</span>\n <span>\u20B9{{ responseData?.jewelryPriceBreakup?.priceWithoutTax | number:'1.2-2' }}</span>\n </div>\n <div class=\"pb-summary-row\">\n <span>Tax ({{ responseData?.jewelryPriceBreakup?.taxRef?.taxPercent }}% GST)</span>\n <span>\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}</span>\n </div>\n <div class=\"pb-grand-total\"\n [style.background]=\"styles?.background?.accentColor\"\n [style.color]=\"'#fff'\">\n <span>TOTAL</span>\n <span>\u20B9{{ (responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) | number:'1.2-2' }}</span>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n </section>\n <ng-container *ngIf=\"recentViewItemList?.length\">\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"recentViewItemList\"\n [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\n </ng-container>\n <!-- <ng-container *ngIf=\"recentViewItemList?.length\">\n <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\n [isRelatedProduct]=\"true\"></simpo-featured-products>\n </ng-container> -->\n <!-- <ng-container>\n <simpo-customer-review [data]=\"data\"></simpo-customer-review>\n </ng-container> -->\n\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n </section>\n</ng-container>\n\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '40vh',\n 'border-radius': '10px',\n 'position': 'relative',\n 'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n\n<div class=\"mobile-footer\">\n <div class=\"icons\">\n <div (click)=\"goToCart()\">\n <mat-icon>shopping_cart</mat-icon>\n </div>\n <div>\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n </div>\n </div>\n <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(0)\">Out of\n Stock</button>\n <div class=\"quantity\" *ngIf=\"responseData?.quantity && !ecomConfigs?.videoCallEnabled\"\n [style.borderColor]=\"data?.styles?.background?.accentColor\">\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\n [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\n <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\n </div>\n <button *ngIf=\"responseData?.quantity && ecomConfigs?.videoCallEnabled\" class=\"send-btn w-100\"\n [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\n <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\n <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(0)\"\n (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\n </div>\n</div>\n\n<ng-template #ReviewSection>\n <div class=\"review-sec\">\n <div class=\"title\">Customer Review</div>\n <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\n <span>Be the first to write a review</span>\n <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\n Review' : 'Cancel Review'}}</button>\n <ng-container *ngIf=\"showReview\">\n <hr />\n <div class=\"user-review\">\n <div class=\"title\">Write a review</div>\n <span class=\"secondary-text\">RATING</span>\n <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\n <div>\n <span class=\"secondary-text\">Review Title</span>\n <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\n </div>\n <div>\n <span class=\"secondary-text\">Review</span>\n <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\n </div>\n <div class=\"review-action-btn\">\n <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\n <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\n (click)=\"addProductReview()\"\n [disabled]=\"productReview == 0 && !reviewTitle?.length && !reviewDescription?.length\">Submit\n review</button>\n </div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #SocialIcons>\n <div class=\"d-flex\">\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\n [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\n <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\n <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\n <div style=\"position: relative;margin-right: 10px;\">\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\n [sectionId]=\"data?.id\"></simpo-socia-icons>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #ActionBtn>\n <div class=\"button-parent\">\n <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(0)\">Out of\n Stock</button>\n <div class=\"quantity\" *ngIf=\"responseData?.quantity && !ecomConfigs?.videoCallEnabled\"\n [style.borderColor]=\"data?.styles?.background?.accentColor\">\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\n [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\n <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\n </div>\n <button *ngIf=\"responseData?.quantity && ecomConfigs?.videoCallEnabled\" class=\"send-btn w-100\"\n [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\n [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\n (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\n <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\n <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75\">\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(0)\"\n (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\n </div>\n <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75 mt-2\">\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(0)\"\n (click)=\"!edit ? buyNow() : ''\">Buy Now</button>\n </div>\n <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && !IsEcommerce\" class=\"w-75\">\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(0)\" (click)=\"raiseLead()\"><mat-icon style=\"height:14px !important\">\n message</mat-icon>Notify Me</button>\n </div>\n <div class=\"favourite\" *ngIf=\"IsEcommerce\" (click)=\"isItemAsFavorite ? removeToFavourite() : addToFavourite()\">\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\"\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n </div>\n <div class=\"share-icon\" (click)=\"shareProduct()\">\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\">share</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #variants>\n <ng-container *ngIf=\"data?.styles?.customization == 'Style1'\">\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\n <div class=\"mb-3\">\n <div class=\"varient-key\">{{varient.key}}</div>\n <div class=\"d-flex\" style=\"gap: 5px;\">\n <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"data?.styles?.customization == 'Style2' && selectedVarient.size > 0\">\n <ng-container>\n <div class=\"row mt-2 style2-container w-100\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n <div *ngFor=\"let item of selectedVarient | keyvalue\" class=\"px-3 py-2 varient-item\"\n [class]=\"getClass(selectedVarient)\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n <div class=\"variant-head\">{{item.key | titlecase}}</div>\n <div class=\"variant-value text-start fw-semibold\">\n {{item.value |\n titlecase}}</div>\n </div>\n <div class=\"cursor-pointer p-0\" [class]=\"getClass(selectedVarient)\">\n <div class=\"custom-text d-flex align-items-center justify-content-center h-100 p-2\" data-bs-toggle=\"offcanvas\"\n data-bs-target=\"#offcanvasRightVariant\" [style.background]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">CUSTOMISE\n </div>\n </div>\n </div>\n </ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template #ProductDesc>\n <div class=\"product-info-minimal\">\n <!-- Item Code -->\n <div class=\"item-code-row\" *ngIf=\"responseData?.itemCode\">\n <span class=\"item-code-value\">{{ formatItemCode(responseData?.itemCode) }}</span>\n </div>\n\n <!-- Title and Price Row -->\n <div class=\"title-price-row-modern\">\n <h1 class=\"product-title-modern\">{{responseData?.name}}</h1>\n <div class=\"product-price-modern\">\n <span [innerHTML]=\"currency\"></span> {{responseData?.price?.sellingPrice}}\n </div>\n </div>\n\n <!-- Rating Row -->\n <div class=\"rating-row-modern\" *ngIf=\"responseData?.averageRating\">\n <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n <span class=\"rating-score\">{{responseData?.averageRating | number:'1.1-1'}}</span>\n <span class=\"separator\">|</span>\n <span class=\"reviews-link\" [style.color]=\"styles?.background?.accentColor\">\n {{responseData?.totalReviewCount}} reviews</span>\n </div>\n\n <!-- Brief Description -->\n <div class=\"product-brief-modern\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData?.brief | sanitizeHtml\">\n </div>\n </div>\n</ng-template>\n\n<ng-template #descriptors>\n <div class=\"row prod-desc mt-2\">\n <div>\n <!-- <div class=\"product-header d-flex align-items-center justify-content-between\">\n <span class=\"header-text\" *ngIf=\"responseData?.descriptor || responseData?.materials\">Product Details</span>\n <div class=\"pricebreakup-btn d-flex align-items-center justify-content-center cursor-pointer\"\n *ngIf=\"materialBasedPricing\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRightPriceBreakup\"\n [style.background]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\n <mat-icon>add</mat-icon> PRICE BREAKUP\n </div>\n </div> -->\n <div class=\"description\">\n <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\n [innerHTML]=\"responseData?.descriptor?.name | sanitizeHtml\"\n [style.background]=\"data?.styles?.background?.color\"></div>\n </div>\n <!-- <ng-container *ngIf=\"materialBasedPricing\">\n <div class=\"jewellery-table-container\">\n <ng-container *ngFor=\"let ele of responseData?.materials\">\n <div class=\"jewel-container mt-2\">\n <div class=\"jewel-header\" [style.background]=\"getHeaderColor(ele.materialType)\">\n {{ele?.materialName | titlecase}}\n </div>\n <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor(ele.materialType)\">\n <div class=\"col-6 metal-purity\">\n <div class=\"row-header\">\n Net Weight/{{ele?.unit | titlecase}}\n </div>\n <div class=\"row-content\">\n {{ele.quantity + \" \" + (ele?.unit | titlecase)}}\n </div>\n </div>\n <div class=\"col-6 metal-purity\">\n <div class=\"row-header\">\n Purity\n </div>\n <div class=\"row-content\">\n {{ele.purity |\n titlecase}}\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container> -->\n </div>\n </div>\n\n</ng-template>\n\n<ng-template #ImageSection>\n <ng-container *ngIf=\"!varientLoading && (isMobile || data?.styles?.gridStyle == 'Style1')\">\n <div class=\"style-1-vertical d-flex flex-column w-100\">\n <div class=\"main-image-container p-0\">\n <div class=\"item-img rounded-3\">\n <lib-ngx-image-zoom *ngIf=\"currentImg\" [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\"\n [magnification]=\"0.4\" [enableScrollZoom]=\"false\">\n </lib-ngx-image-zoom>\n <img *ngIf=\"!currentImg\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\"\n class=\"w-100 h-100 object-fit-cover\">\n </div>\n </div>\n <div class=\"thumbnail-row py-3 d-flex gap-2 overflow-auto hide-scroll\">\n <img class=\"img thumbnail-img\" *ngFor=\"let img of itemImages\" [src]=\"img.imgUrl\" (click)=\"changeImg(img.imgUrl)\"\n [class.active-thumb]=\"currentImg == img.imgUrl\"\n style=\"cursor: pointer; min-width: 80px; width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 2px solid transparent;\"\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!varientLoading && (!isMobile && data?.styles?.gridStyle == 'Style2')\">\n <div class=\"bento-masonry-container\">\n <div *ngFor=\"let img of itemImages; let i = index\" class=\"bento-item-modern\">\n <img [src]=\"img.imgUrl\" class=\"bento-img-modern\" (click)=\"changeImg(img.imgUrl)\">\n </div>\n </div>\n </ng-container>\n\n <div class=\"item-img\" *ngIf=\"varientLoading\">\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '100%',\n 'border-radius': '10px'\n }\">\n </ngx-skeleton-loader>\n </div>\n</ng-template>\n\n<ng-template #branding>\n <div class=\"row w-100\">\n <ng-container *ngFor=\"let brand of brandPromises\">\n <div class=\"col-4 d-flex flex-column align-items-center g-2\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"brand?.logoUrl\" alt=\"\" class=\"w-h-40 p-0 rounded-circle\">\n <div class=\"brand-text w-100 text-center py-2\">\n {{brand?.title | titlecase}}\n </div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #videoCallSchedule>\n <!-- *ngIf=\"ecomConfigs?.videoCallEnabled\" -->\n <ng-container>\n <div class=\"row w-100 video-container\">\n <div class=\"col-4 video-call-img\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/355007c175362077266611289-229221023_small.gif\"\n alt=\"\" class=\"w-100 h-100 \">\n </div>\n <div class=\"col-8 align-content-center\">\n <div class=\"video-head-text\">\n Live Video Call\n </div>\n <div class=\"sub-text\">\n Join a live video call with our consultants to see your favourite designs up close!\n </div>\n <button class=\"sch-btn text-center cursor-pointer\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getButtonStyle(2)\" [buttonId]=\"getButtonId(2)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(2)\" (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\n Schedule a Video Call\n </button>\n </div>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #DeliverySection>\n <div class=\"delivery-container\">\n <h2 class=\"delivery-title\">Delivery, Stores & Trial</h2>\n\n <!-- Location Section -->\n <div class=\"location-section mb-2\">\n <div class=\"location-container d-flex align-items-center justify-content-between\"\n [style.borderColor]=\"styles?.background?.accentColor\">\n <div class=\"d-flex align-items-center flex-grow-1 me-2\" style=\"width: calc(100% - 100px);\">\n <div class=\"d-flex mx-1\"><mat-icon\n class=\"gps d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\n </div>\n <input type=\"number\" class=\"postal-code-input flex-grow-1\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\"\n style=\"width: 100%;\">\n </div>\n <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">Submit</button>\n </div>\n <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\n </div>\n\n <ng-container *ngIf=\"(pincode?.toString().length ?? 0) == 6\">\n <!-- Free Delivery Section -->\n <div class=\"delivery-section\">\n <div class=\"d-flex align-items-center\">\n <span class=\"delivery-icon d-flex align-items-center\">\n <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\n height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" class=\"feather feather-gift\">\n <polyline points=\"20 12 20 22 4 22 4 12\"></polyline>\n <rect x=\"2\" y=\"7\" width=\"20\" height=\"5\"></rect>\n <line x1=\"12\" y1=\"22\" x2=\"12\" y2=\"7\"></line>\n <path d=\"M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z\"></path>\n <path d=\"M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z\"></path>\n </svg>\n </span>\n\n <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Expected\n Delivery by {{ getDateAfterxDays() | date:'d MMM' }}</span>\n\n <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\n expected Order will\n Deliver by {{ getDateAfterxDays() | date:'d MMM' }} with a Delivery Charge of\n \u20B9 {{ecomConfigs?.deliveryCharges | number:'1.2-2'}}</span>\n </div>\n </div>\n\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #TryAtHome>\n <!-- Try At Home Section -->\n <div class=\"try-home-section\">\n <div class=\"d-flex align-items-start try-home-item\">\n <span class=\"home-icon d-flex align-items-center\">\n <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" class=\"feather feather-home\">\n <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path>\n <polyline points=\"9 22 9 12 15 12 15 22\"></polyline>\n </svg>\n </span>\n <div class=\"try-home-details\">\n <div class=\"try-home-header\">\n <span class=\"try-home-text\">Try At Home</span>\n <span class=\"free-text\"> (It's Free)</span>\n </div>\n <div class=\"home-appointment-text\">Home Appointment <span>Available to try from 29 Jul</span></div>\n <!-- <div class=\"appointment-text\">\n Home Appointment <span class=\"appointment-available\">Available to try from 28 Jun</span>\n </div> -->\n </div>\n </div>\n <div class=\"d-flex-align-items-center justify-content-center w-100\">\n <button class=\"book-appointment-btn\" (click)=\"addToTrialCart()\" *ngIf=\"!isItemAddedAsTrial\">Try at\n HOME</button>\n <button class=\"book-appointment-btn\" *ngIf=\"isItemAddedAsTrial\">HOME APPOINTMENT BOOKED</button>\n </div>\n </div>\n\n</ng-template>\n\n<ng-template #StoreSection>\n <!-- Nearest Store Section -->\n <ng-container\n *ngIf=\"storeDetails?.nearbyStore?.storeName && storeDetails?.nearbyStore?.storeName?.length > 0\">\n <div class=\"store-section\">\n <div class=\"d-flex align-items-center store-item\">\n <span class=\"store-icon d-flex align-items-center\">\n <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\n <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\n <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n </svg>\n </span>\n <div class=\"store-details\">\n <div class=\"store-text\">\n <span class=\"store-label\">Nearest Store - </span>\n <span class=\"store-name\">{{ storeDetails?.nearbyStore?.storeName | titlecase}}</span>\n <!-- <span class=\"store-distance\"> (4km)</span> -->\n </div>\n <!-- <div class=\"availability-section\">\n <span class=\"availability-badge\">\u23F0 AVAILABLE BY 28 JUN</span>\n </div> -->\n <!-- <div class=\"other-stores-text\">\n Also Available in <span class=\"other-stores-link\">18 other stores</span>\n </div> -->\n </div>\n </div>\n <div class=\"d-flex justify-content-center w-100\">\n <button class=\"find-store-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(1)\" (click)=\"onFindInStore(storeDetails?.nearbyStore?.id)\">FIND IN\n STORE</button>\n </div>\n </div>\n </ng-container>\n <ng-template #emptyStore>\n <div class=\"delivery-section\">\n <div class=\"d-flex align-items-center\">\n <span class=\"delivery-icon d-flex align-items-center\">\n <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\n <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\n <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n </svg>\n </span>\n <span class=\"delivery-text\">No Stores are available</span>\n </div>\n </div>\n </ng-template>\n</ng-template>\n\n<div class=\"offcanvas offcanvas-end offcanvas-variant\" tabindex=\"-1\" id=\"offcanvasRightVariant\"\n aria-labelledby=\"offcanvasRightLabel\">\n <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\n <mat-icon data-bs-dismiss=\"offcanvas\"\n class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\n </div>\n <div class=\"varient-price px-3 pb-2\">\n <div class=\"price-text\">Price</div>\n <div class=\"d-flex g-3 align-items-center\">\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\n *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\n [innerHTML]='currency'></span>\n {{responseData?.price?.discountedPrice}}</div>\n <div class=\"price\"\n *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\"\n [ngClass]=\"{'text-decoration-line-through': responseData?.price?.discountedPrice}\"><span\n [innerHTML]='currency'></span>\n {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\n </div>\n </div>\n <div class=\"varient-container h-100 p-3\">\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\n <div class=\"varient-data\">\n <div class=\"varient-key\">{{varient.key}}</div>\n <div class=\"d-flex\" style=\"gap: 5px;\">\n <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"confirm-btn w-100 p-3 text-center cursor-pointer\" data-bs-dismiss=\"offcanvas\"\n [style.background]=\"data?.styles?.background?.accentColor\" style=\"color: white;\">Confirm\n Customization</div>\n</div>\n\n<ng-template #dialogBox>\n <div class=\"modal-content\">\n <div class=\"modal-header d-flex align-item-center\">\n <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\n <div class=\"schedule-header d-flex align-items-center justify-content-end p-2\">\n <mat-icon (click)=\"matCloseDialog()\"\n class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\n </div>\n </div>\n <div class=\"modal-body h-100\">\n <div class=\"row h-100 w-100 video-call-container\">\n <div class=\"col-6 h-100\" *ngIf=\"!isMobile\">\n <img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/557699c1753779503913freepik-overhead-shot-a-person-holding-a-smartphone-with-a-1029_vmg8GqHj (online-video-cutter.com).gif\"\n alt=\"\" class=\"w-100 h-100\" style=\"object-fit: cover;\">\n </div>\n <div class=\"col-6 position-relative h-100 call-details\">\n <!-- Name Input with Validation -->\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\n <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\n (input)=\"onInputChange('username')\">\n </div>\n\n <!-- <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\n <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\n (input)=\"onInputChange('email')\">\n </div> -->\n\n <!-- Mobile Number Input with Validation -->\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\n <div class=\"sub-text-call\">IN +91</div>\n <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\n (input)=\"onInputChange('mobileNumber')\" (wheel)=\"$event.preventDefault()\">\n </div>\n\n\n <!-- Pincode Input with Validation -->\n <!-- <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\n <div class=\"sub-text-call d-flex justify-content-center w-12 border-0\">\n <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\n </div>\n <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\n (input)=\"onInputChange('pincode')\">\n </div> -->\n <div class=\"language my-3\">\n <div class=\"mini-text mb-2\">Language Preference</div>\n <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\n <ng-container *ngFor=\"let lang of languages\">\n <div class=\"lang px-2 py-1 rounded cursor-pointer\"\n [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\n (click)=\"selectedLang = lang\"\n [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\n {{lang}}\n </div>\n </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"selectedLang == 'Others'\">\n <div class=\"input-field my-3\">\n <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\n </div>\n </ng-container>\n <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\" [disabled]=\"isSubmitting\" [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\n <ng-container *ngIf=\"isSubmitting\">\n <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\n <span class=\"visually-hidden\">Loading...</span>\n </div>\n SCHEDULING...\n </ng-container>\n <ng-container *ngIf=\"!isSubmitting && !scheduled\">\n <div (click)=\"scheduleVideoCall()\" class=\"d-flex align-items-center\">\n <mat-icon>video_call</mat-icon> \n SCHEDULE A VIDEO CALL\n </div>\n </ng-container>\n <ng-container *ngIf=\"scheduled\">\n <mat-icon>check_circle</mat-icon> \n SCHEDULED SUCCESSFULLY\n </ng-container>\n </button>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<div class=\"offcanvas offcanvas-end offcanvas-small overflow-scroll\" tabindex=\"-1\" id=\"offcanvasRightPriceBreakup\">\n <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\n <mat-icon data-bs-dismiss=\"offcanvas\"\n class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\n </div>\n <div class=\"varient-price p-10-20\">\n <div class=\"price-break-header\">{{responseData?.name}}</div>\n </div>\n <div class=\"price-breakup h-100 w-100\">\n <ng-container *ngFor=\"let ele of responseData?.materials\">\n <div class=\"price-container mb-3 p-10-20\">\n <div class=\"price-container-header\">\n {{ ele.materialType + \" BREAKUP\" }}\n </div>\n <div class=\"row w-100 header-row\">\n <div class=\"col-3 text-center\">COMPONENT</div>\n <div class=\"col-3 text-center\">RATE</div>\n <div class=\"col-3 text-center\">WEIGHT</div>\n <div class=\"col-3 text-center\">FINAL VALUE</div>\n </div>\n <div class=\"row w-100 value-row\">\n <div class=\"col-3 text-center\">{{ ele.purity | titlecase }}</div>\n <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.pricePerUnit,ele.materialType) |\n number:'1.2-2' }}</div>\n <div class=\"col-3 text-center\">{{ele.quantity + ' ' + (ele.unit | titlecase)}}</div>\n <div class=\"col-3 text-center total\">\u20B9{{ ele.pricePerUnit * ele.quantity | number }}</div>\n </div>\n </div>\n </ng-container>\n\n <div class=\"price-container mb-3 p-10-30 py-0 border-unset\">\n <div class=\"row w-100 summary-row\">\n <div class=\"col-6 text-start\">Making Charges</div>\n <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}\n </div>\n </div>\n <div class=\"row w-100 summary-row\">\n <div class=\"col-6 text-start\">Tax Amount</div>\n <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}\n </div>\n </div>\n <div class=\"row w-100 summary-row\">\n <div class=\"col-6 text-start\">Total Amount</div>\n <div class=\"col-6 text-end total\">\n \u20B9{{(responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) |\n number:'1.2-2'}}\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #ReviewsSection>\n <div class=\"rv-section\" *ngIf=\"reviewsData\">\n\n <!-- Header: Title + Average | Bar Chart -->\n <div class=\"rv-header\">\n <div class=\"rv-header-left\">\n <h2 class=\"rv-title\">Reviews & Ratings</h2>\n <div class=\"rv-average-row\">\n <!-- filled stars -->\n <div class=\"rv-stars\">\n <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n fill=\"#eab308\" />\n </svg>\n </ng-container>\n </div>\n <span class=\"rv-avg-num\">{{responseData?.averageRating | number:'1.1-1'}}</span>\n <span class=\"rv-avg-label\">average</span>\n </div>\n <div class=\"rv-count\" [style.color]=\"styles?.background?.accentColor || '#10b981'\">\n {{responseData?.totalReviewCount | number}} Reviews\n </div>\n </div>\n\n <div class=\"rv-bars\">\n <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\n <div class=\"rv-bar-row\">\n <span class=\"rv-bar-label\">{{rating}}</span>\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n fill=\"#eab308\" />\n </svg>\n <div class=\"rv-bar-track\">\n <div class=\"rv-bar-fill\" [style.width.%]=\"getPercentage(rating)\"></div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Review Cards Grid -->\n <div class=\"rv-grid\">\n <ng-container *ngFor=\"let review of reviewsData\">\n <ng-container *ngIf=\"review.review\">\n <div class=\"rv-card\">\n <div class=\"rv-card-top\">\n <div class=\"rv-reviewer\">\n <img [src]=\"'https://ui-avatars.com/api/?name=' + (review?.userName ?? 'U') + '&background=random'\"\n class=\"rv-avatar\" alt=\"\">\n <div class=\"rv-name-date\">\n <span class=\"rv-name\">{{review?.userName ?? 'Anonymous'}}</span>\n <span class=\"rv-date\">{{review?.createdAt | date:'d MMM y'}}</span>\n </div>\n </div>\n <!-- Star rating -->\n <div class=\"rv-card-stars\">\n <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\n <svg *ngIf=\"s <= review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n fill=\"#eab308\" />\n </svg>\n <svg *ngIf=\"s > review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\" style=\"opacity:0.25\">\n <path\n d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n fill=\"#eab308\" />\n </svg>\n </ng-container>\n </div>\n </div>\n <p class=\"rv-text\">{{review?.review ?? 'No comment provided.'}}</p>\n\n <!-- Review Images -->\n <div class=\"rv-images\" *ngIf=\"review?.reviewImages?.length\">\n <a *ngFor=\"let img of review.reviewImages\" [href]=\"img.imgUrl\" target=\"_blank\" class=\"rv-img-link\">\n <img [src]=\"img.imgUrl\" alt=\"Review image\" class=\"rv-img-thumb\" onerror=\"this.style.display='none'\">\n </a>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n\n <div class=\"text-center mt-4\" *ngIf=\"(reviewsData?.length ?? 0) > 3\">\n <button class=\"write-review-btn\" (click)=\"loadMoreReviews()\">Load More Reviews</button>\n </div>\n </div>\n</ng-template>\n\n<div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" role=\"dialog\"\n aria-hidden=\"true\">\n <div class=\"modal-dialog modal-dialog-centered video-modal\">\n <div class=\"modal-content\">\n <div class=\"modal-body\" style=\"height: 100%;\">\n <video controls muted playsinline style=\"width: 100%; height: 100%;\">\n <source\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/371647c1753962084265clideo_editor_48bc93c24e18470888c661bb09e437da (online-video-cutter.com).mp4\"\n type=\"video/mp4\">\n Your browser does not support the video tag.\n </video>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"modal fade\" id=\"reviewModal\" tabindex=\"-1\" aria-labelledby=\"reviewModalLabel\" role=\"dialog\"\n aria-hidden=\"true\">\n <div class=\"modal-dialog review-modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h1 class=\"modal-title fs-5\"></h1>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\n </div>\n <div class=\"modal-body\">\n <div class=\"detail-review-container\">\n <div class=\"image-section\">\n <div class=\"product-image\">\n <div class=\"backward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex-1\"\n *ngIf=\"currentImageIndex > 0\">\u25BC</div>\n <img [src]=\"selectedReview?.reviewImages?.[currentImageIndex]?.imgUrl\" alt=\"\">\n <div class=\"forward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex+1\"\n *ngIf=\"currentImageIndex < selectedReview?.images?.length - 1\">\u25B2</div>\n <!-- <div class=\"earbuds-container\">\n <div class=\"charging-case\"></div>\n <div class=\"earbud left\"></div>\n <div class=\"earbud right\"></div>\n </div> -->\n </div>\n <!-- <div class=\"navigation-arrows\">\n </div> -->\n </div>\n\n <div class=\"review-section\">\n <div class=\"reviewer-header\">\n <div class=\"reviewer-avatar\">\uD83D\uDC64</div>\n <div class=\"reviewer-name\">{{selectedReview?.userName ?? \"-\"}}</div>\n </div>\n\n <div class=\"detail-rating\" *ngIf=\"selectedReview?.rating\">\n <p-rating [(ngModel)]=\"selectedReview.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n </div>\n\n <div class=\"review-date\">\n Reviewed in India on 24 July 2025\n </div>\n\n <div class=\"review-text\">\n {{selectedReview?.review ?? \"-\"}}\n </div>\n\n <div class=\"images-section\">\n <h3>Images in this review</h3>\n <div class=\"review-images\">\n <div class=\"review-image\" [ngClass]=\"{'selected': currentImageIndex == i}\"\n *ngFor=\"let img of selectedReview?.reviewImages ?? [];let i = index\" (click)=\"currentImageIndex = i\">\n <img [src]=\"img.imgUrl\" alt=\"\">\n </div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n</div>", styles: [".product-desc{display:flex}::ng-deep .product-desc table,::ng-deep .brief-desc table{border-collapse:collapse;width:100%;margin:10px 0}::ng-deep .product-desc table td,::ng-deep .product-desc table th,::ng-deep .brief-desc table td,::ng-deep .brief-desc table th{border:1px solid #dddddd!important;text-align:left;padding:8px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}::ng-deep .smooth-panel .p-panel-header{cursor:pointer;background:transparent;border:unset;font-size:18px;font-weight:700;padding:0}::ng-deep .smooth-panel .p-panel-content{border:unset;padding:0}.jewel-container{border-radius:12px;box-shadow:#63636333 0 2px 8px}.jewel-header{padding:8px 10px;border-radius:12px 12px 0 0;font-size:15px;font-weight:700;color:#4f3267}.br-p{border-radius:0 0 12px 12px;padding:10px 0}.row-header{font-size:13px;font-weight:700;color:#4f3267}.row-content{color:#4e555e}.jewellery-table-container{border-radius:12px}.jewellery-table{width:100%;border-collapse:collapse;border:1px solid #ddd;transition:all .3s ease}.jewellery-table th,.jewellery-table td{border:1px solid #ddd;padding:12px;text-align:left;transition:background-color .2s ease}.material-header td{background-color:#f8f9fa;font-weight:700;font-size:16px}.column-header{background-color:#f1f1f1}.column-header th{font-weight:600}.material-row:hover{background-color:#f5f5f5}.charges-header th,.total-header th,.total-header td{background-color:#eaeaea;font-weight:700}.total-row td{font-weight:700;font-size:18px;background-color:#f8f8f8}@media screen and (max-width: 600px){.jewellery-table{font-size:14px}.jewellery-table th,.jewellery-table td{padding:8px}}.share-icon,.favourite{border-radius:50%!important;height:30px;width:30px;padding:6px;display:flex;align-items:center;justify-content:center;background-color:#f1f5f9!important;cursor:pointer;transition:all .2s ease;border:none!important}:is(.share-icon,.favourite) mat-icon{font-size:20px;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.share-icon:hover,.favourite:hover{background-color:#e2e8f0!important;transform:scale(1.05)}.header-text{font-size:17px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:8px;border-radius:8px;letter-spacing:.5px}.pricebreakup-btn mat-icon{font-size:18px;display:flex;align-items:center}.img-list{display:flex;gap:5px;max-height:460px}.img-list img{height:100px;width:100px;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:100%;aspect-ratio:1/1;overflow:hidden}.item-img img{width:100%!important;height:100%!important;object-fit:cover}.price{font-weight:600;font-size:24px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:1px solid;align-items:center;gap:15px;height:44px;width:75%;justify-content:space-between;border-radius:12px}.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}.fc{font-size:17px;font-weight:700}.tab-group{display:flex;gap:10px}.tab{font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.discount-price{font-size:1.4rem}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#f7f7f7;padding:11px 20px;border-radius:12px;margin-top:unset!important;width:70%!important;border:1px solid #d3d3d347}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#f7f7f7;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:7px 25px;cursor:pointer;font-weight:600}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:5px;height:44px!important;justify-content:space-between;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:14px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.w-h-40{width:40px!important;height:40px!important}.height{height:auto;overflow-y:visible}.mobile-footer{display:none}video{border-radius:18px}@media (min-width: 1024px){.zoom:hover{transform:scale(1.04);transition:transform .2s ease-in-out;overflow:hidden}.product-heading{font-size:20px;font-weight:600;margin-top:5px}}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:100000001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.product-desc{font-size:13px}.brief-desc{font-size:16px;margin-top:unset!important}.total-container{padding-top:10px!important;padding-bottom:4rem!important}.out-of-stock,.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important;height:348px}.item-img img{width:100%;height:348px!important}.display-none{display:none}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.input-field{margin-top:.7rem!important;margin-bottom:.7rem!important}.prod-desc{margin-top:20px}.video-call-container{margin:0!important}.product-img{height:220px}.call-details{width:100%!important;padding:3%!important}.send-btn{padding:.5rem 1rem!important}.review-sec :is(input,textarea){width:100%!important}.height{width:100%;height:auto}.product-heading{font-size:23px;font-weight:600}.discount-price{font-size:1.7rem!important}.header-text{font-size:20px!important}}.send-btn{font-size:14px!important;padding:1rem;display:flex;align-items:center;justify-content:center;text-transform:uppercase;font-weight:600}.send-btn mat-icon{height:20px;width:20px;font-size:18px}a{text-decoration:none}.brief-desc{font-size:14px;color:#4e555e}.total-container{height:auto;position:relative;display:block!important;overflow:visible}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin:unset!important}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}}@media (min-width:1024px){.product-headig{font-size:35px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}@media (min-width: 1400px){.container{max-width:unset;width:95%;height:100vh;overflow-y:auto}}.width-max{width:max-content}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}.offcanvas-variant{border-radius:30px 0 0 30px}.varient-header,.varient-price{background:#f7f7f7}.varient-header{border-radius:30px 0 0}.confirm-btn{border-radius:0 0 0 30px;position:absolute!important;bottom:0!important}.style2-container{border:1px solid;border-radius:12px;margin:0}.varient-item{border-right:1px solid;align-content:center}.variant-head{font-size:12px;color:#33363e}.varient-data{margin-bottom:25px;border-bottom:1px solid black;padding-bottom:25px}.variant-value{font-size:.9rem;color:#000}.custom-text{border-radius:0 8px 8px 0;font-size:.9rem;font-weight:600}.scroll-wrap{flex-wrap:nowrap}.brand-text{word-wrap:break-word;white-space:normal;font-size:12px;font-weight:600;line-height:20px}.video-container{border:1px solid rgb(240,240,240);margin:10px 0;border-radius:12px}.video-head-text{font-size:16px;font-weight:700}.sub-text{font-size:11px;color:#6f7377;margin-bottom:10px}.sch-btn{font-size:1.2rem!important;color:#fff;padding:3px 0;margin-top:5px}.tax-text{font-size:.7rem;color:#6f7377}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.delivery-container{margin:35px 0 15px;background-color:transparent}.delivery-title{font-size:16px;font-weight:600;margin:0 0 12px;line-height:1.2;margin-bottom:.5rem!important}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:10px;margin-bottom:5px;width:100%}.location-icon{width:20px;height:20px;background-color:#374151;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.location-icon:before{content:\"\";width:8px;height:8px;background-color:#fff;border-radius:50%;position:absolute}.postal-code-input{font-size:12px;font-weight:600;letter-spacing:.5px;border:none;outline:none;background:transparent;width:90%}.postal-code-input::placeholder{font-weight:500}.locate-btn{background:none!important;border:none!important;font-weight:600;color:#111827;font-size:13px!important;padding:0!important;box-shadow:none!important;width:auto!important;white-space:nowrap}.gps{font-size:17px}.locate-btn:focus{box-shadow:none!important}.delivery-section{margin-bottom:15px;border:1px solid rgb(240,240,240);padding:10px;border-radius:12px}.delivery-icon{font-size:18px;color:#ec4899;margin-right:14px;width:20px}.delivery-text{font-size:14px;font-weight:700}.store-section{border:1px solid rgb(240,240,240);padding:10px;border-radius:12px;margin-bottom:15px}.store-item{margin-bottom:11px}.store-icon{font-size:18px;color:#f97316;margin-right:14px;margin-top:2px;width:20px}.store-details{flex:1}.store-text{font-size:14px}.store-name{font-weight:700}.availability-section{margin-bottom:6px}.availability-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:#d97706;background-color:#fef3c7;padding:4px 8px;border-radius:12px;letter-spacing:.5px}.other-stores-text{font-size:14px;color:#6b7280;line-height:1.4}.other-stores-link{color:#6b46c1;cursor:pointer;text-decoration:underline}.other-stores-link:hover{color:#553c9a}.find-store-btn{width:100%!important;padding:8px 20px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px}.try-home-section{border-radius:12px;padding:10px;border:1px solid rgb(240,240,240)}.try-home-item{margin-bottom:10px;padding:0}.home-icon{font-size:18px;color:#6b46c1;margin-right:14px;margin-top:2px;width:20px}.try-home-details{flex:1}.try-home-text{font-size:14px;font-weight:700;color:#374151}.free-text{font-size:14px;color:#6b7280}.appointment-text{font-size:14px;color:#6b7280;line-height:1.4}.appointment-available{font-weight:500;color:#374151}.book-appointment-btn{background:#111827;color:#fff;border:none;padding:10px 20px;border-radius:12px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px;transition:all .2s ease;width:100%}.book-appointment-btn:hover{background:#000;transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}@media (max-width: 480px){.container{display:flex;align-items:center;flex-direction:column}.location-section{padding:12px 0}.try-home-section{padding:20px}}.w-90{width:90%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.w-12{width:12%!important}.w-88{width:88%!important}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;position:absolute;bottom:20px;left:10px;width:95%!important}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.error-border{border:2px solid #dc3545!important}.offcanvas-small{height:72vh;top:25%;width:35%;border-radius:50px 0 0 50px}.rating{width:max-content;border:1px solid;border-radius:20px;padding:0 10px;margin-bottom:.5rem}.rating-no{padding-right:7px;margin:0;border-right:1px solid;font-size:.75rem}.p-10-20{padding:10px 30px}.price-break-header{font-size:19px;font-weight:600}.price-container{border-bottom:1px solid rgb(233,233,233)}.price-container-header{font-size:14px;font-weight:600;color:#333}.total-ratings{font-size:.75rem}.header-row .col-3{font-size:12px;font-weight:500;color:#666}.value-row .col-3{font-size:14px;font-weight:400;color:#333}.value-row .col-3.total{font-weight:600}.summary-row .col-6{font-size:15px;font-weight:500;color:#333;padding:unset}.summary-row .col-6.total{font-weight:600;padding-right:10px}.summary-row{padding:0 42px}.error-border{border:2px solid #e74c3c!important;box-shadow:0 0 5px #e74c3c4d!important}.form-control,.input-field input{transition:border-color .3s ease,box-shadow .3s ease}.error-border:focus{border-color:#e74c3c!important;box-shadow:0 0 8px #e74c3c80!important}.input-field input:focus{transform:scale(1.02)}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:-.125em;border:.125em solid currentcolor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}.spinner-border-sm{width:.875rem;height:.875rem;border-width:.125em}@keyframes spinner-border{to{transform:rotate(360deg)}}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.rv-section{padding:2rem 0;background:transparent}.rv-header{display:flex;justify-content:space-between;align-items:flex-start;gap:3rem}.rv-header-left{flex:1}.rv-title{font-size:1.4rem;font-weight:700;color:#111827;margin-bottom:.75rem}.rv-average-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}.rv-stars{display:flex;gap:2px}.rv-avg-num{font-size:1.4rem;font-weight:700;color:#111827}.rv-avg-label{font-size:.95rem;color:#6b7280;font-weight:400}.rv-count{font-size:.9rem;font-weight:600}.rv-bars{flex:1;max-width:420px;display:flex;flex-direction:column;gap:6px}.rv-bar-row{display:flex;align-items:center;gap:3px}.rv-bar-label{font-size:15px;font-weight:600;color:#111827;width:10px;text-align:right;flex-shrink:0}.rv-bar-track{flex:1;height:10px;background-color:#f3f4f6;border-radius:3px;overflow:hidden}.rv-bar-fill{height:100%;background-color:#eab308;border-radius:3px}.rv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.rv-card{padding:12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}.rv-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.85rem}.rv-reviewer{display:flex;align-items:center;gap:.7rem}.rv-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0}.rv-name-date{display:flex;flex-direction:column;gap:2px}.rv-name{font-size:16px;font-weight:600;color:#374151}.rv-date{font-size:.75rem;color:#9ca3af}.rv-card-stars{display:flex;gap:2px;flex-shrink:0}.rv-text{font-size:.88rem;line-height:1.65;color:#4b5563;margin:0}.rv-images{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.rv-img-link{display:block;flex-shrink:0;border-radius:8px;overflow:hidden;border:1px solid #e5e7eb}.rv-img-thumb{width:72px;height:72px;object-fit:cover;display:block;transition:transform .2s ease}.rv-img-link:hover .rv-img-thumb{transform:scale(1.05)}@media (max-width: 768px){.rv-header{flex-direction:column;gap:1.5rem}.rv-bars{max-width:100%}.rv-grid{grid-template-columns:1fr}}.review-section{padding:4rem 1rem;border-top:1px solid #f3f4f6;margin-top:4rem;background:transparent!important}.review-summary-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4rem;gap:3rem}.rating-summary-left{flex:1}.rating-summary-left h2.reviews-header-title{font-size:1.75rem;font-weight:700;margin-bottom:0;color:#111827}.average-score-container{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.average-score{color:#111827;display:flex;align-items:baseline;gap:8px}.average-score .score-num{font-size:1.5rem;font-weight:700}.average-score .score-text{font-size:1.1rem;font-weight:400;color:#111827}.total-reviews-count{font-weight:600;font-size:1.1rem;display:block}.rating-distribution{flex:1;max-width:480px}.rating-bar-row{display:flex;align-items:center;gap:1.25rem;margin-bottom:.85rem}.star-label{display:flex;align-items:center;justify-content:flex-start;width:35px;line-height:1}.progress-bar-bg{flex:1;height:12px;background-color:#f3f4f6;border-radius:9999px;overflow:hidden}.progress-bar-fill{height:100%;background-color:#eab308;border-radius:9999px}.review-actions-bar-minimal{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.write-review-btn-minimal{padding:.6rem 1.25rem;background:#f8f9fa;color:#4b5563;border:none;border-radius:8px;font-weight:500;font-size:.9rem;cursor:pointer;transition:all .2s}.write-review-btn-minimal:hover{background:#e5e7eb}.sort-dropdown-minimal select{padding:.6rem 2.25rem .6rem 1rem;border:1px solid #d1d5db;border-radius:8px;background:#fff;font-size:.9rem;color:#4b5563;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center;background-size:1rem;cursor:pointer}.reviews-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}.review-card{padding:1.5rem;border:1px solid #e5e7eb;border-radius:12px;background:#fff;box-shadow:none}.review-divider{margin:2rem 0;border:none;border-top:1px solid #f3f4f6}.reviews-header-title{font-size:1.4rem;font-weight:700;color:#111827;margin-bottom:0}.review-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.25rem}.reviewer-info{display:flex;align-items:center;gap:1rem}.reviewer-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#f3f4f6}.reviewer-name{font-weight:600;font-size:.95rem;color:#374151}.review-date-text{font-size:.8rem;color:#9ca3af}.reviewer-name-date{display:flex;flex-direction:row;align-items:center;gap:8px}.review-card-rating{display:flex;gap:2px}.review-card-text{font-size:1rem;line-height:1.7;color:#4b5563}.product-tabs-container{border-bottom:1px solid #f3f4f6;margin-bottom:8px}.tab-item{padding:1rem 0;font-weight:600;font-size:1.1rem;color:#6b7280;cursor:pointer;position:relative;transition:color .2s}.tab-content-pane h3{font-size:1.5rem;font-weight:700;margin-bottom:1.5rem}.tab-content-pane p{color:#4b5563;line-height:1.8;font-size:1.05rem}@media (max-width: 1024px){.reviews-grid{grid-template-columns:1fr}}@media (max-width: 768px){.review-summary-header{flex-direction:column;gap:2rem}.rating-distribution{max-width:100%}.bento-grid{height:auto;display:flex;flex-direction:column}.tabs-list{gap:1.5rem;overflow-x:auto}}.home-appointment-text{font-size:.8rem;color:#4e555e}.home-appointment-text span{font-weight:600}.video-call-img{height:120px;margin:0;padding:0;border-radius:45px}.video-call-img img{border-top-left-radius:12px;border-bottom-left-radius:12px}.discount{background:#fff3f2;padding:15px 15px 20px;margin-top:14px;border-radius:8px;display:flex;flex-direction:column;gap:5px;position:relative}.discount p{margin-bottom:0;color:#4f3267;font-weight:700;font-size:1rem}.discount .offer{color:#eb4f5c}.discount:before{content:\"\";display:block;height:44px;width:4px;background:#eb4f5c;position:absolute;left:0;top:16px;border-top-right-radius:20px;border-bottom-right-radius:20px}.metal-purity{display:flex;flex-direction:column;gap:10px}.scrollable-content{height:100%;max-height:95vh;overflow-y:auto}.style-2-img{max-height:70%;height:100%!important}.ring-size-video{background:#f0ebff;display:flex;justify-content:space-between;align-items:center;height:45px;padding:12px;border-radius:10px;margin-top:20px;margin-bottom:20px}.ring-size-video .text{color:#4f3267;font-size:.9rem}.ring-size-video .learn-how{color:#de57e9;font-weight:700;font-size:1rem;display:flex;gap:5px;align-items:center;cursor:pointer}.ring-size-video .learn-how mat-icon{font-size:20px;display:flex;align-items:center}.ring-size-video p{margin-bottom:0}.video-modal{height:90vh!important;width:90vw!important;max-width:none}.video-modal .modal-body{padding:0}.review-section{border-radius:10px;padding:15px}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.detail-review-container{display:flex;max-width:1200px;margin:0 auto;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px #0000001a}.image-section{flex:1;background:#000;position:relative;min-height:400px}.product-image{width:100%;height:100%;object-fit:cover;background:linear-gradient(135deg,#e8e8e8,#d0d0d0);display:flex;align-items:center;justify-content:center;max-height:400px;position:relative}.product-image img{height:100%;width:100%;object-fit:contain}.earbuds-container{position:relative;width:300px;height:200px}.charging-case{width:200px;height:120px;background:linear-gradient(145deg,#f0f0f0,#e0e0e0);border-radius:25px;position:absolute;top:40px;left:50px;box-shadow:inset 0 4px 8px #0000001a}.charging-case:before{content:\"\";position:absolute;inset:10px;background:linear-gradient(145deg,#e8e8e8,#d8d8d8);border-radius:15px;box-shadow:inset 0 2px 4px #0000001a}.earbud{position:absolute;width:45px;height:15px;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border-radius:8px;box-shadow:0 2px 4px #0003}.earbud:before{content:\"noise\";position:absolute;top:2px;left:50%;transform:translate(-50%);font-size:6px;color:#888;font-weight:300}.earbud.left{top:70px;left:80px}.earbud.right{top:90px;left:130px}.earbud.right:before{color:#ff6b35}.review-section{flex:1;padding:30px;background:#fafafa}.reviewer-header{display:flex;align-items:center;margin-bottom:15px}.reviewer-avatar{width:40px;height:40px;background:#ccc;border-radius:50%;margin-right:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#666}.reviewer-name{font-size:16px;font-weight:500;color:#333}.detail-rating{margin:10px 0}.stars{display:flex;gap:2px;margin-bottom:5px}.star{color:#ff9500;font-size:18px}.thumbs{display:flex;gap:5px}.thumb{color:#ff9500;font-size:16px}.review-date{font-size:14px;color:#666;margin:15px 0}.review-text{font-size:16px;line-height:1.5;color:#333;margin-bottom:25px}.images-section h3{font-size:16px;color:#666;margin-bottom:15px;font-weight:500}.review-images{display:flex;gap:10px}.review-image{width:60px;height:60px;background:#ddd;border-radius:6px;border:2px solid #e0e0e0;cursor:pointer;transition:border-color .3s}.review-image img{width:100%;height:100%}.review-image:hover,.review-image.selected{border-color:#007185}.navigation-arrows{position:absolute;top:20px;right:20px;display:flex;flex-direction:column;gap:10px}.arrow{width:40px;height:40px;background:#fffc;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:#666;transition:background-color .3s;position:absolute;transform:rotate(90deg)}.backward-arrow{left:10px}.forward-arrow{right:10px}.arrow:hover{background:#fff}@media (max-width: 768px){.review-container{flex-direction:column}.image-section{min-height:300px}.review-section{padding:20px}}.review-modal{max-width:none;width:70vw}.review-modal .modal-body{padding:0}@media screen and (max-width: 475px){.offcanvas-small{height:100vh;width:100%;top:0}.review-modal{margin:0;height:100%;width:100%}.detail-review-container{flex-direction:column;height:100%}.product-image{max-height:289px}.image-section{min-height:289px}.video-modal{margin:0;height:100vh!important;width:100vw!important;overflow:hidden}}.modal{z-index:100000033}.breadcrumbs-modern{font-size:.85rem;color:#6b7280;margin-bottom:.5rem}.breadcrumb-item.active{color:#111827;font-weight:500}.product-title-modern{font-size:2rem;font-weight:800;color:#111827;margin:0;line-height:1.2;font-family:var(--website-font-family)}.product-price-modern{font-size:1.75rem;font-weight:700;color:#111827;font-family:var(--website-font-family)}.rating-line-modern{margin-top:.25rem}.rating-score-text{font-weight:700;font-size:1rem;color:#111827}.rating-count-text{font-size:.95rem;color:#10b981;font-weight:600;cursor:pointer}.product-description-brief{font-size:1rem;line-height:1.7;color:#4b5563;margin-top:1.5rem}.low-stock-text{color:#dc2626;font-weight:700;font-size:.875rem}.variants-modern-container{margin:2.5rem 0}.varient-key{font-size:.9rem;font-weight:800;color:#111827;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem}.color-swatch-modern{width:36px;height:36px;border-radius:50%;cursor:pointer;border:3px solid white;box-shadow:0 0 0 1px #e5e7eb;transition:all .25s cubic-bezier(.4,0,.2,1)}.color-swatch-modern:hover{transform:scale(1.15)}.color-swatch-modern.active{box-shadow:0 0 0 2px #111827}.box-varient-modern{padding:.75rem 1.5rem;border:2px solid #f3f4f6;border-radius:10px;font-size:.95rem;font-weight:700;color:#374151;cursor:pointer;transition:all .2s;min-width:70px;text-align:center;background:#fff}.box-varient-modern:hover{border-color:#d1d5db;background:#f9fafb}.box-varient-modern.active{border-color:#111827;background:#111827;color:#fff}.quantity-container{margin-top:1rem}.quantity-selector-modern{border:1px solid #e5e7eb;border-radius:12px;width:fit-content;background:#f9fafb;padding:2px}.qty-btn{width:44px;height:44px;border:none;background:transparent;font-size:1.5rem;color:#111827;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;border-radius:10px}.qty-btn:hover:not(:disabled){background:#fff;box-shadow:0 2px 4px #0000000d}.qty-btn:disabled{color:#d1d5db;cursor:not-allowed}.qty-display{width:50px;text-align:center;font-weight:700;color:#111827;font-size:1.1rem}.out-of-stock-modern{background:#f3f4f6;color:#9ca3af;padding:1.1rem 2.5rem;border:none;border-radius:14px;font-weight:800;font-size:1.1rem;cursor:not-allowed}.wishlist-btn-modern{width:56px;height:56px;border:2px solid #f3f4f6;border-radius:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;background:#fff}.wishlist-btn-modern:hover{background:#fef2f2;border-color:#fecaca}.wishlist-btn-modern mat-icon{font-size:26px}.thumbnail-column{padding-right:15px!important}.thumbnail-list::-webkit-scrollbar{display:none}.thumbnail-list{-ms-overflow-style:none;scrollbar-width:none}.image-section-modern{padding-right:2.5rem!important;padding-left:0!important;width:60%!important;max-width:60%!important;flex:0 0 60%!important;margin-top:0!important}.detail-section-modern{padding-left:.5rem!important;padding-right:0!important;width:40%!important;max-width:40%!important;flex:0 0 40%!important;margin-top:0!important}.thumbnail-column{width:90px!important;flex:0 0 90px!important}.item-img{width:100%!important;max-width:100%;margin:0;border-radius:20px;overflow:hidden;background:#f9fafb;position:relative}lib-ngx-image-zoom{width:100%!important;display:block!important}::ng-deep .ngx-image-zoom-container{width:100%!important;height:auto!important;aspect-ratio:1/1}.style-1-vertical{display:flex;flex-direction:column;width:100%}.main-image-container{width:100%;aspect-ratio:1 / 1}.thumbnail-row{display:flex;gap:8px;overflow-x:auto;padding:12px 0}.thumbnail-img{min-width:80px;width:80px;height:80px;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:pointer;transition:border-color .2s}.active-thumb{border-width:2px;border-style:solid}.bento-grid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:15px;width:100%;aspect-ratio:5/4}.bento-item-large{grid-row:span 2;border-radius:24px;overflow:hidden}.bento-item-small{border-radius:20px;overflow:hidden}.bento-grid img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.bento-grid img:hover{transform:scale(1.05)}@media (max-width: 991px){.image-section-modern,.detail-section-modern{width:100%!important;max-width:100%!important;flex:0 0 100%!important;padding:0!important}.bento-grid{grid-template-columns:1fr;grid-template-rows:auto;aspect-ratio:auto}.bento-item-large{grid-row:span 1}}.bento-masonry-container{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:16px;width:100%}.bento-item-modern{border-radius:16px;overflow:hidden;background:#fdfdfd;aspect-ratio:1 / 1;transition:all .4s cubic-bezier(.4,0,.2,1)}.bento-img-modern{width:100%;height:100%;display:block;object-fit:cover;background:#fdfdfd;cursor:pointer;transition:transform .6s ease}.bento-item-modern:hover{transform:translateY(-4px);box-shadow:0 12px 30px #00000014}.bento-item-modern:hover .bento-img-modern{transform:scale(1.03)}.detail-section-modern{position:sticky;top:0;height:max-content;max-height:calc(100vh - 100px);overflow-y:auto;overflow-x:hidden;padding-left:2rem!important;scrollbar-width:none}.detail-section-modern::-webkit-scrollbar{display:none}.product-hero-card-modern{border:none;box-shadow:none;z-index:10;position:relative}.tabs-list{display:flex;justify-content:flex-start;gap:10px;list-style:none;padding:0;margin-bottom:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap}.tabs-list::-webkit-scrollbar{display:none}.tab-item{font-size:1rem;font-weight:600;color:#6b7280;padding:.5rem 1rem;border-radius:0;cursor:pointer;transition:all .25s;background:transparent;border-bottom:2px solid transparent;white-space:nowrap;flex-shrink:0}.tab-item:hover{background:transparent;color:#111827}.tab-content-pane{padding-top:.5rem}@media (max-width: 1024px){.product-hero-card-modern{padding:25px}.tab-content-pane{width:100%}}@media (max-width: 991px){.bento-masonry-container{grid-template-columns:1fr;grid-auto-rows:auto}.bento-item-modern.featured{grid-row:span 1;aspect-ratio:1 / 1}.product-hero-card-modern{position:static;padding:0;box-shadow:none;border:none;background:transparent;z-index:auto}.detail-section-modern{padding-left:0!important;margin-top:2rem;position:static!important;max-height:none!important;height:auto!important;overflow-y:visible!important;overflow-x:visible!important}.image-section-modern{padding-right:0!important}.tab-item{padding:.6rem 1rem;font-size:.95rem}.product-tabs-container{padding:0 4px}}.product-info-minimal{display:flex;flex-direction:column}.breadcrumbs-modern{display:flex;align-items:center;gap:8px;font-size:.95rem;color:#6b7280;font-weight:500}.breadcrumbs-modern .dot{font-size:1.2rem;line-height:1}.title-price-row-modern{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.product-title-modern{font-size:1.5rem;font-weight:800;color:#111827;margin:0;line-height:1.2}.product-price-modern{font-size:1.5rem;font-weight:500;color:#111827;white-space:nowrap}.rating-row-modern{display:flex;align-items:center;gap:12px;font-size:1rem;flex-wrap:wrap}.rating-score{font-weight:700;color:#111827}.separator{color:#e5e7eb}.reviews-link{font-weight:600}::ng-deep .rating-row-modern p-rating .p-rating-icon.p-rating-icon-active svg,::ng-deep .rating-row-modern p-rating .p-icon{color:#eab308!important;fill:#eab308!important}::ng-deep .rating-row-modern p-rating .p-rating-icon:not(.p-rating-icon-active) svg,::ng-deep .rating-row-modern p-rating .p-rating-icon:not(.p-rating-icon-active) .p-icon{color:#eab308!important;fill:#eab308!important;opacity:.25}.product-brief-modern{font-size:.95rem;line-height:1.7;color:#4b5563;margin-top:.5rem;text-align:justify}.write-review-btn{display:inline-flex;align-items:center;justify-content:center;padding:.65rem 1.75rem;background:#f8f9fa;color:#374151;border:1px solid #e5e7eb;border-radius:10px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;letter-spacing:.02em}.write-review-btn:hover{background:#f1f3f5;border-color:#d1d5db;transform:translateY(-1px);box-shadow:0 2px 8px #00000012}@media (max-width: 991px){.product-title-modern,.product-price-modern{font-size:1.3rem}}@media (max-width: 480px){.title-price-row-modern{flex-direction:column;gap:4px}.product-title-modern{font-size:1.2rem}.product-price-modern{font-size:1.2rem;white-space:normal}.rv-section{padding:1rem 0}.rv-header{gap:1rem}.rv-title{font-size:1.15rem;margin-bottom:.5rem}.rv-avg-num{font-size:1.15rem}.rv-bars{max-width:100%;width:100%}.rv-grid{grid-template-columns:1fr;gap:.75rem}.rv-card{padding:10px}.rv-name{font-size:14px}.tabs-list{gap:0}.tab-item{padding:.55rem 1rem;font-size:.9rem}.header-text{font-size:15px!important}.product-header{flex-wrap:wrap;gap:8px}.pricebreakup-btn{font-size:10px;padding:6px}.write-review-btn{width:100%;padding:.65rem 1rem}}.pb-glass-container{padding:16px;border-radius:16px}.pb-glass-card{background:#fff9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.85);border-radius:12px;margin-bottom:12px;overflow:hidden}.pb-glass-header{padding:10px 16px;font-weight:700;font-size:12px;letter-spacing:1.5px;text-transform:uppercase}.pb-glass-row{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;font-size:14px;border-bottom:1px solid rgba(0,0,0,.04)}.pb-glass-row:last-child{border-bottom:none}.pb-glass-row:nth-child(2n){background:#f8fafc99}.pb-label{color:#6b7280;font-weight:500}.pb-value{font-weight:600;color:#1f2937}.pb-summary-card{background:#ffffffb3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(203,213,225,.5);border-radius:12px;overflow:hidden}.pb-summary-row{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;font-size:14px;color:#374151;border-bottom:1px solid rgba(0,0,0,.05)}.pb-grand-total{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;font-weight:700;font-size:16px;letter-spacing:.5px}.item-code-row{margin-bottom:6px}.item-code-value{display:inline-block;padding:2px 10px;border-radius:999px;background:#f1f5f9;color:#475569;font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;border:1px solid #e2e8f0}.buy-now-btn{background:transparent!important;border:1.5px solid currentColor!important;color:inherit!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.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", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7.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: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { 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: i16.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", "isBrowseProduct", "edit", "customClass", "delete", "nextComponentColor"], outputs: ["changeDetailProduct"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i3$2.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8$3.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId", "itemIndex"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }] }); }
|
|
21469
21366
|
}
|
|
@@ -27090,7 +26987,7 @@ class OverlappingImageComponent extends BaseSection {
|
|
|
27090
26987
|
: `linear-gradient(${bg.accentColor}, ${bg.secondaryAccentColor})`;
|
|
27091
26988
|
}
|
|
27092
26989
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OverlappingImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
27093
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OverlappingImageComponent, isStandalone: true, selector: "simpo-overlapping-image", inputs: { nextComponentColor: "nextComponentColor", data: "data", edit: "edit", index: "index", customClass: "customClass", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"screenWidth > 475\">\r\n <section class=\"cta-section total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div class=\"cta-wrapper\" #mainContainer [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"cta-content w-100 d-flex justify-content-center\">\r\n <div class=\"d-flex flex-column gap-4 section-content position-relative\" [id]=\"data?.id\"\r\n [simpoCorner]=\"styles?.corners\"\r\n [ngStyle]=\"{'align-items' : styles?.layout?.align === 'center' ? 'center' : (styles?.layout?.align === 'left' ? 'start' : 'end'),'background':accentBackground }\"\r\n [ngClass]=\"{'left-image-position' : styles?.layout?.imagePosition === 'Left' , 'right-image-position' : styles?.layout?.imagePosition === 'Right'}\">\r\n <div class=\"cta-image\" [style.left]=\"styles?.layout?.imagePosition === 'Left' ? '-10%' : ''\"\r\n [style.right]=\"styles?.layout?.imagePosition === 'Left' ? '' : '-10%'\"\r\n [style.transform]=\"styles?.layout?.imagePosition === 'Left' ? 'rotate(-6deg)' : 'rotate(6deg)'\">\r\n <img [src]=\" content?.image?.url\" class=\"h-100\" alt=\"Building\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <simpo-text-editor [(value)]=\"content.inputText[0].value\" [editable]=\"edit || false\"\r\n [type]=\"'heading'\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [isRTE]=\"content?.inputText[0]?.isRTE\"></simpo-text-editor>\r\n <simpo-text-editor [(value)]=\"content.inputText[1].value\"\r\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"1\" [isRTE]=\"content?.inputText[1]?.isRTE\"></simpo-text-editor>\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <ng-container *ngIf=\"data?.action?.buttons?.length == 1;else mutipleButtons\">\r\n <app-button-element [buttonContent]=\"data.action.buttons[0].content\"\r\n [buttonStyle]=\"data.action.buttons[0].styles\" [buttonId]=\"data.action.buttons[0].id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #mutipleButtons>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <ng-container *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\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </section>\r\n</ng-container>\r\n<ng-container *ngIf=\"screenWidth < 475\">\r\n <div class=\"feature-card\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\r\n <div class=\"feature-image-wrapper\">\r\n <img [src]=\"content.image.url\" alt=\"Office Building\" class=\"feature-image\">\r\n </div>\r\n <div class=\"feature-content\">\r\n <simpo-text-editor [(value)]=\"content.inputText[0].value\" [editable]=\"false\"\r\n [type]=\"'heading'\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [isRTE]=\"content?.inputText[0]?.isRTE\"></simpo-text-editor>\r\n <simpo-text-editor [(value)]=\"content.inputText[1].value\" [editable]=\"false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"1\" [isRTE]=\"content?.inputText[1]?.isRTE\"></simpo-text-editor>\r\n <div class=\"d-flex w-100 align-items-center justify-content-center\">\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <ng-container *ngIf=\"data?.action?.buttons?.length == 1;else mutipleButtons\">\r\n <app-button-element [buttonContent]=\"data.action.buttons[0].content\"\r\n [buttonStyle]=\"data.action.buttons[0].styles\" [buttonId]=\"data.action.buttons[0].id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #mutipleButtons>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <ng-container *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\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</ng-container>", styles: [".total-container{height:auto;position:relative}.cta-wrapper{display:flex;align-items:center;justify-content:center}.left-image-position{padding-left:13rem;padding-right:30px;margin-left:6rem}.right-image-position{padding-right:13rem;padding-left:30px;margin-right:6rem}.section-content{min-height:260px;width:90%;align-items:center;justify-content:center;padding-top:5px;padding-bottom:10px}.section-content simpo-text-editor{width:100%}.cta-content{color:#fff}.cta-content h2{font-size:36px;margin-bottom:20px}.cta-content p{font-size:16px;line-height:1.7;margin-bottom:30px;max-width:700px}.cta-btn{display:inline-block;background:#001f3f;color:#fff;padding:12px 24px;border-radius:8px;text-decoration:none;font-weight:600;transition:.3s ease}.cta-btn:hover{background:#000}.cta-image{position:absolute;z-index:2;transform:rotate(-6deg);height:340px;top:-9%}.cta-image img{width:280px;border-radius:20px;box-shadow:0 20px 40px #0003}@media (max-width: 992px){.cta-wrapper{flex-direction:column}.cta-content{padding:60px 30px;text-align:center}.cta-image{position:relative;margin-bottom:30px}.cta-image img{width:220px;transform:rotate(0)}}@media (max-width: 576px){.cta-content h2{font-size:24px}.cta-content p{font-size:14px}.cta-btn{padding:10px 20px;font-size:14px}}@media only screen and (min-width:320px) and (max-width:475px){.feature-card{max-width:650px;padding:24px;font-family:Arial,sans-serif}.feature-image-wrapper{width:100%}.feature-image{width:100%;display:block;border-radius:16px}.feature-content{margin-top:24px}.feature-title{font-size:32px;font-weight:600;margin-bottom:16px}.feature-description{font-size:16px;line-height:1.6;margin-bottom:24px}.feature-button{padding:12px 22px;font-size:14px;border:none;border-radius:8px;cursor:pointer}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type:
|
|
26990
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OverlappingImageComponent, isStandalone: true, selector: "simpo-overlapping-image", inputs: { nextComponentColor: "nextComponentColor", data: "data", edit: "edit", index: "index", customClass: "customClass", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"screenWidth > 475\">\r\n <section class=\"cta-section total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div class=\"cta-wrapper\" #mainContainer [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"cta-content w-100 d-flex justify-content-center\">\r\n <div class=\"d-flex flex-column gap-4 section-content position-relative\" [id]=\"data?.id\"\r\n [simpoCorner]=\"styles?.corners\"\r\n [ngStyle]=\"{'align-items' : styles?.layout?.align === 'center' ? 'center' : (styles?.layout?.align === 'left' ? 'start' : 'end'),'background':accentBackground }\"\r\n [ngClass]=\"{'left-image-position' : styles?.layout?.imagePosition === 'Left' , 'right-image-position' : styles?.layout?.imagePosition === 'Right'}\">\r\n <div class=\"cta-image\" [style.left]=\"styles?.layout?.imagePosition === 'Left' ? '-10%' : ''\"\r\n [style.right]=\"styles?.layout?.imagePosition === 'Left' ? '' : '-10%'\"\r\n [style.transform]=\"styles?.layout?.imagePosition === 'Left' ? 'rotate(-6deg)' : 'rotate(6deg)'\">\r\n <img [src]=\" content?.image?.url\" class=\"h-100\" alt=\"Building\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <simpo-text-editor [(value)]=\"content.inputText[0].value\" [editable]=\"edit || false\"\r\n [type]=\"'heading'\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [isRTE]=\"content?.inputText[0]?.isRTE\"></simpo-text-editor>\r\n <simpo-text-editor [(value)]=\"content.inputText[1].value\"\r\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"1\" [isRTE]=\"content?.inputText[1]?.isRTE\"></simpo-text-editor>\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <ng-container *ngIf=\"data?.action?.buttons?.length == 1;else mutipleButtons\">\r\n <app-button-element [buttonContent]=\"data.action.buttons[0].content\"\r\n [buttonStyle]=\"data.action.buttons[0].styles\" [buttonId]=\"data.action.buttons[0].id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #mutipleButtons>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <ng-container *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\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </section>\r\n</ng-container>\r\n<ng-container *ngIf=\"screenWidth < 475\">\r\n <div class=\"feature-card\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\r\n <div class=\"feature-image-wrapper\">\r\n <img [src]=\"content.image.url\" alt=\"Office Building\" class=\"feature-image\">\r\n </div>\r\n <div class=\"feature-content\">\r\n <simpo-text-editor [(value)]=\"content.inputText[0].value\" [editable]=\"false\"\r\n [type]=\"'heading'\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [isRTE]=\"content?.inputText[0]?.isRTE\"></simpo-text-editor>\r\n <simpo-text-editor [(value)]=\"content.inputText[1].value\" [editable]=\"false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"1\" [isRTE]=\"content?.inputText[1]?.isRTE\"></simpo-text-editor>\r\n <div class=\"d-flex w-100 align-items-center justify-content-center\">\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <ng-container *ngIf=\"data?.action?.buttons?.length == 1;else mutipleButtons\">\r\n <app-button-element [buttonContent]=\"data.action.buttons[0].content\"\r\n [buttonStyle]=\"data.action.buttons[0].styles\" [buttonId]=\"data.action.buttons[0].id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #mutipleButtons>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <ng-container *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\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</ng-container>", styles: [".total-container{height:auto;position:relative}.cta-wrapper{display:flex;align-items:center;justify-content:center}.left-image-position{padding-left:13rem;padding-right:30px;margin-left:6rem}.right-image-position{padding-right:13rem;padding-left:30px;margin-right:6rem}.section-content{min-height:260px;width:90%;align-items:center;justify-content:center;padding-top:5px;padding-bottom:10px}.section-content simpo-text-editor{width:100%}.cta-content{color:#fff}.cta-content h2{font-size:36px;margin-bottom:20px}.cta-content p{font-size:16px;line-height:1.7;margin-bottom:30px;max-width:700px}.cta-btn{display:inline-block;background:#001f3f;color:#fff;padding:12px 24px;border-radius:8px;text-decoration:none;font-weight:600;transition:.3s ease}.cta-btn:hover{background:#000}.cta-image{position:absolute;z-index:2;transform:rotate(-6deg);height:340px;top:-9%}.cta-image img{width:280px;border-radius:20px;box-shadow:0 20px 40px #0003}@media (max-width: 992px){.cta-wrapper{flex-direction:column}.cta-content{padding:60px 30px;text-align:center}.cta-image{position:relative;margin-bottom:30px}.cta-image img{width:220px;transform:rotate(0)}}@media (max-width: 576px){.cta-content h2{font-size:24px}.cta-content p{font-size:14px}.cta-btn{padding:10px 20px;font-size:14px}}@media only screen and (min-width:320px) and (max-width:475px){.feature-card{max-width:650px;padding:24px;font-family:Arial,sans-serif}.feature-image-wrapper{width:100%}.feature-image{width:100%;display:block;border-radius:16px}.feature-content{margin-top:24px}.feature-title{font-size:32px;font-weight:600;margin-bottom:16px}.feature-description{font-size:16px;line-height:1.6;margin-bottom:24px}.feature-button{padding:12px 22px;font-size:14px;border:none;border-radius:8px;cursor:pointer}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth", "itemIndex"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type:
|
|
27094
26991
|
//Directives
|
|
27095
26992
|
BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }] }); }
|
|
27096
26993
|
}
|
|
@@ -27150,7 +27047,7 @@ class ImageBackgroundComponent extends BaseSection {
|
|
|
27150
27047
|
return this.styles?.layout?.headingSpacing;
|
|
27151
27048
|
}
|
|
27152
27049
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageBackgroundComponent, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
27153
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageBackgroundComponent, isStandalone: true, selector: "simpo-image-background", inputs: { nextComponentColor: "nextComponentColor", data: "data", edit: "edit", index: "index", customClass: "customClass", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\" [ngClass]=\"{'p-2rem':!styles?.fullWidth}\">\r\n <div class=\"cta-container w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoCorner]=\"!styles?.fullWidth ? styles?.corners : undefined\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoLayout]=\"styles?.layout\"\r\n [ngClass]=\"{'justify-content-start' : styles?.layout?.setContentPosition === 'Left' , 'justify-content-end' : styles?.layout?.setContentPosition === 'Right' }\"\r\n [ngStyle]=\"{\r\n 'background-image': (screenWidth > 1200 ? 'url(' + content?.image?.url + ')' : 'unset !important'),\r\n 'background-size': 'cover',\r\n 'background-position': 'center',\r\n 'background-repeat': 'no-repeat'\r\n }\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [simpoAnimation]=\"styles?.animation\">\r\n <!-- <div class=\"cta-image\">\r\n <img src=\"\" alt=\"Abstract Design\">\r\n </div> -->\r\n <div class=\"cta-content d-flex flex-column gap-3\" (click)=\"$event.stopPropagation()\">\r\n <simpo-text-editor [(value)]=\"content.inputText[0].value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [isRTE]=\"content?.inputText[0]?.isRTE\"></simpo-text-editor>\r\n <simpo-text-editor [(value)]=\"content.inputText[1].value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"1\" [isRTE]=\"content?.inputText[1]?.isRTE\"></simpo-text-editor>\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <ng-container *ngIf=\"data?.action?.buttons?.length == 1;else mutipleButtons\">\r\n <app-button-element [buttonContent]=\"data.action.buttons[0].content\"\r\n [buttonStyle]=\"data.action.buttons[0].styles\" [buttonId]=\"data.action.buttons[0].id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #mutipleButtons>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <ng-container *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\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".cta-content{color:#fff}.total-container{height:auto;position:relative}.cta-container{display:flex;align-items:center;justify-content:space-between;overflow:hidden;background-image:url(https://d2z9497xp8xb12.cloudfront.net/prod-images/284345c1770816953360Artboard_18-1.webp);background-size:cover;background-position:center;background-repeat:no-repeat}.p-2rem{padding:2rem}.cta-image{flex:1}.cta-image img{width:100%;height:100%;object-fit:cover;display:block}.cta-content h1{font-size:40px;line-height:1.3;margin-bottom:20px}.cta-content p{font-size:16px;color:#cbd5e1;margin-bottom:30px;max-width:500px}.cta-button{display:inline-block;padding:12px 24px;background:#000;color:#fff;text-decoration:none;border-radius:8px;font-weight:600;transition:.3s ease}.cta-button:hover{background:#1e293b}@media (max-width: 992px){.cta-content{padding:40px}.cta-content h1{font-size:32px}}@media (min-width:1200px){.cta-content{max-width:50%}}@media (max-width: 768px){.cta-container{flex-direction:column}.cta-image{width:100%;height:300px}.cta-content{padding:30px;text-align:center}.cta-content p{margin:0 auto 25px}}@media (max-width: 480px){.cta-content h1{font-size:24px}.cta-content p{font-size:14px}.cta-button{padding:10px 20px;font-size:14px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type:
|
|
27050
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageBackgroundComponent, isStandalone: true, selector: "simpo-image-background", inputs: { nextComponentColor: "nextComponentColor", data: "data", edit: "edit", index: "index", customClass: "customClass", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\" [ngClass]=\"{'p-2rem':!styles?.fullWidth}\">\r\n <div class=\"cta-container w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoCorner]=\"!styles?.fullWidth ? styles?.corners : undefined\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoLayout]=\"styles?.layout\"\r\n [ngClass]=\"{'justify-content-start' : styles?.layout?.setContentPosition === 'Left' , 'justify-content-end' : styles?.layout?.setContentPosition === 'Right' }\"\r\n [ngStyle]=\"{\r\n 'background-image': (screenWidth > 1200 ? 'url(' + content?.image?.url + ')' : 'unset !important'),\r\n 'background-size': 'cover',\r\n 'background-position': 'center',\r\n 'background-repeat': 'no-repeat'\r\n }\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [simpoAnimation]=\"styles?.animation\">\r\n <!-- <div class=\"cta-image\">\r\n <img src=\"\" alt=\"Abstract Design\">\r\n </div> -->\r\n <div class=\"cta-content d-flex flex-column gap-3\" (click)=\"$event.stopPropagation()\">\r\n <simpo-text-editor [(value)]=\"content.inputText[0].value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [isRTE]=\"content?.inputText[0]?.isRTE\"></simpo-text-editor>\r\n <simpo-text-editor [(value)]=\"content.inputText[1].value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"1\" [isRTE]=\"content?.inputText[1]?.isRTE\"></simpo-text-editor>\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <ng-container *ngIf=\"data?.action?.buttons?.length == 1;else mutipleButtons\">\r\n <app-button-element [buttonContent]=\"data.action.buttons[0].content\"\r\n [buttonStyle]=\"data.action.buttons[0].styles\" [buttonId]=\"data.action.buttons[0].id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #mutipleButtons>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <ng-container *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\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".cta-content{color:#fff}.total-container{height:auto;position:relative}.cta-container{display:flex;align-items:center;justify-content:space-between;overflow:hidden;background-image:url(https://d2z9497xp8xb12.cloudfront.net/prod-images/284345c1770816953360Artboard_18-1.webp);background-size:cover;background-position:center;background-repeat:no-repeat}.p-2rem{padding:2rem}.cta-image{flex:1}.cta-image img{width:100%;height:100%;object-fit:cover;display:block}.cta-content h1{font-size:40px;line-height:1.3;margin-bottom:20px}.cta-content p{font-size:16px;color:#cbd5e1;margin-bottom:30px;max-width:500px}.cta-button{display:inline-block;padding:12px 24px;background:#000;color:#fff;text-decoration:none;border-radius:8px;font-weight:600;transition:.3s ease}.cta-button:hover{background:#1e293b}@media (max-width: 992px){.cta-content{padding:40px}.cta-content h1{font-size:32px}}@media (min-width:1200px){.cta-content{max-width:50%}}@media (max-width: 768px){.cta-container{flex-direction:column}.cta-image{width:100%;height:300px}.cta-content{padding:30px;text-align:center}.cta-content p{margin:0 auto 25px}}@media (max-width: 480px){.cta-content h1{font-size:24px}.cta-content p{font-size:14px}.cta-button{padding:10px 20px;font-size:14px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth", "itemIndex"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type:
|
|
27154
27051
|
//Directives
|
|
27155
27052
|
BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }] }); }
|
|
27156
27053
|
}
|
|
@@ -27206,7 +27103,7 @@ class CondensedAndGradientComponent extends BaseSection {
|
|
|
27206
27103
|
return icon?.backgroundColor;
|
|
27207
27104
|
}
|
|
27208
27105
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CondensedAndGradientComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
27209
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CondensedAndGradientComponent, isStandalone: true, selector: "simpo-condensed-and-gradient", inputs: { edit: "edit", data: "data", customClass: "customClass", nextComponentColor: "nextComponentColor", index: "index", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section>\r\n <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"sale-wrapper total-container\"\r\n [attr.style]=\"customClass\" [simpoBackground]=\"style?.background\">\r\n <div #mainContainer [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"style?.layout\"\r\n class=\"sale-bar\" [simpoOverlay]=\"style?.background\">\r\n\r\n <!-- LEFT -->\r\n <div class=\"left-section\">\r\n <div class=\"logo\"\r\n [style.background]=\"content?.icon?.showBackground ? getIconBackground(content?.icon) : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"content?.icon\" [sectionId]=\"data?.id\" [showIcon]=\"true\">\r\n <div [iconId]=\"data?.id + (content?.icon?.id || '')\" [simpoIconDirective]=\"content?.icon\" class=\"w-75 h-75\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"text\">\r\n <div class=\"sale-text\">\r\n <simpo-text-editor [(value)]=\"content.inputText[0].value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [isRTE]=\"content?.inputText[0]?.isRTE\"></simpo-text-editor>\r\n </div>\r\n\r\n <div class=\"sale-description\">\r\n <simpo-text-editor [(value)]=\"content.inputText[1].value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"1\" [isRTE]=\"content?.inputText[1]?.isRTE\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- RIGHT BUTTON -->\r\n <div class=\"sale-action\" *ngIf=\"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\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\">\r\n </app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Divider -->\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <!-- EDIT SELECTOR -->\r\n <div [ngClass]=\"{ hover_effect: edit }\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\r\n <!-- DELETE -->\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</section>", styles: [".sale-wrapper{width:100%}.total-container{height:auto;position:relative}.sale-bar{width:100%;display:flex;justify-content:space-between;align-items:center;padding:28px 50px}.left-section{display:flex;align-items:center;gap:14px;width:47%;min-width:320px}.sale-text{font-size:26px;font-weight:600;width:100%;display:block;text-align:left}.sale-description{width:100%;display:block;font-size:16px;opacity:.9;text-align:left;min-height:20px}.text{flex:1;width:100%;min-width:260px;text-align:left}.sale-timer{display:flex;gap:18px}.left-section{display:flex;justify-content:space-between;width:47%}.logo{width:60px;height:60px;min-width:60px;border-radius:50%;display:flex;align-items:center;justify-content:center}.time-card{background-color:#fff;color:#1c2a39;padding:6px 14px;border-radius:8px;text-align:center;min-width:60px}.time-card span{display:block;font-size:18px;font-weight:600}.time-card small{font-size:11px;letter-spacing:1px;font-weight:500}.sale-action{display:flex;align-items:center;gap:20px}.shop-button{background-color:#fff;color:#1c2a39;border:none;padding:5px 14px;border-radius:30px;font-size:14px;font-weight:500;cursor:pointer;transition:.3s ease}.shop-button:hover{background-color:#f2f2f2}.close-icon{font-size:20px;cursor:pointer;opacity:.8}.close-icon:hover{opacity:1}@media (max-width: 768px){.sale-bar{flex-direction:column;align-items:center;text-align:center;padding:20px;gap:18px}.left-section{width:100%;flex-direction:row;align-items:center;gap:12px}.logo{width:22%;height:60px}.editor-container{text-align:start}.text{text-align:start;width:100%}.sale-text{font-size:20px}.sale-description{font-size:14px;opacity:.9}.sale-action{width:100%;justify-content:center}}@media (min-width: 769px) and (max-width: 1024px){.sale-bar{padding:22px 30px;gap:20px}.left-section{width:65%;gap:15px}.logo{width:55px;height:55px}.sale-text{font-size:22px}.sale-description{font-size:15px}.sale-action{align-items:center}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { kind: "directive", type: IconDirectiveDirective, selector: "[simpoIconDirective]", inputs: ["simpoIconDirective", "iconId"] }] }); }
|
|
27106
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CondensedAndGradientComponent, isStandalone: true, selector: "simpo-condensed-and-gradient", inputs: { edit: "edit", data: "data", customClass: "customClass", nextComponentColor: "nextComponentColor", index: "index", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section>\r\n <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"sale-wrapper total-container\"\r\n [attr.style]=\"customClass\" [simpoBackground]=\"style?.background\">\r\n <div #mainContainer [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"style?.layout\"\r\n class=\"sale-bar\" [simpoOverlay]=\"style?.background\">\r\n\r\n <!-- LEFT -->\r\n <div class=\"left-section\">\r\n <div class=\"logo\"\r\n [style.background]=\"content?.icon?.showBackground ? getIconBackground(content?.icon) : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"content?.icon\" [sectionId]=\"data?.id\" [showIcon]=\"true\">\r\n <div [iconId]=\"data?.id + (content?.icon?.id || '')\" [simpoIconDirective]=\"content?.icon\" class=\"w-75 h-75\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"text\">\r\n <div class=\"sale-text\">\r\n <simpo-text-editor [(value)]=\"content.inputText[0].value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [isRTE]=\"content?.inputText[0]?.isRTE\"></simpo-text-editor>\r\n </div>\r\n\r\n <div class=\"sale-description\">\r\n <simpo-text-editor [(value)]=\"content.inputText[1].value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"1\" [isRTE]=\"content?.inputText[1]?.isRTE\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- RIGHT BUTTON -->\r\n <div class=\"sale-action\" *ngIf=\"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\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\">\r\n </app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Divider -->\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <!-- EDIT SELECTOR -->\r\n <div [ngClass]=\"{ hover_effect: edit }\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\r\n <!-- DELETE -->\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</section>", styles: [".sale-wrapper{width:100%}.total-container{height:auto;position:relative}.sale-bar{width:100%;display:flex;justify-content:space-between;align-items:center;padding:28px 50px}.left-section{display:flex;align-items:center;gap:14px;width:47%;min-width:320px}.sale-text{font-size:26px;font-weight:600;width:100%;display:block;text-align:left}.sale-description{width:100%;display:block;font-size:16px;opacity:.9;text-align:left;min-height:20px}.text{flex:1;width:100%;min-width:260px;text-align:left}.sale-timer{display:flex;gap:18px}.left-section{display:flex;justify-content:space-between;width:47%}.logo{width:60px;height:60px;min-width:60px;border-radius:50%;display:flex;align-items:center;justify-content:center}.time-card{background-color:#fff;color:#1c2a39;padding:6px 14px;border-radius:8px;text-align:center;min-width:60px}.time-card span{display:block;font-size:18px;font-weight:600}.time-card small{font-size:11px;letter-spacing:1px;font-weight:500}.sale-action{display:flex;align-items:center;gap:20px}.shop-button{background-color:#fff;color:#1c2a39;border:none;padding:5px 14px;border-radius:30px;font-size:14px;font-weight:500;cursor:pointer;transition:.3s ease}.shop-button:hover{background-color:#f2f2f2}.close-icon{font-size:20px;cursor:pointer;opacity:.8}.close-icon:hover{opacity:1}@media (max-width: 768px){.sale-bar{flex-direction:column;align-items:center;text-align:center;padding:20px;gap:18px}.left-section{width:100%;flex-direction:row;align-items:center;gap:12px}.logo{width:22%;height:60px}.editor-container{text-align:start}.text{text-align:start;width:100%}.sale-text{font-size:20px}.sale-description{font-size:14px;opacity:.9}.sale-action{width:100%;justify-content:center}}@media (min-width: 769px) and (max-width: 1024px){.sale-bar{padding:22px 30px;gap:20px}.left-section{width:65%;gap:15px}.logo{width:55px;height:55px}.sale-text{font-size:22px}.sale-description{font-size:15px}.sale-action{align-items:center}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth", "itemIndex"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { kind: "directive", type: IconDirectiveDirective, selector: "[simpoIconDirective]", inputs: ["simpoIconDirective", "iconId"] }] }); }
|
|
27210
27107
|
}
|
|
27211
27108
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CondensedAndGradientComponent, decorators: [{
|
|
27212
27109
|
type: Component,
|
|
@@ -27396,7 +27293,7 @@ class ProductInfoSectionComponent extends BaseSection {
|
|
|
27396
27293
|
});
|
|
27397
27294
|
}
|
|
27398
27295
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductInfoSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
27399
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductInfoSectionComponent, isStandalone: true, selector: "simpo-product-info-section", inputs: { data: "data", index: "index", edit: "edit", nextComponentColor: "nextComponentColor", delete: "delete", customClass: "customClass" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div class=\"chemical-product-details\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\r\n [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"product-container d-flex gap-5 w-100 flex-lg-row\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\">\r\n <!-- [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\" -->\r\n\r\n <!-- Left: Structure Image -->\r\n <div class=\"w-50\" *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 [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg h-100\"\r\n loading=\"lazy\" />\r\n </div>\r\n <!-- Right: Details -->\r\n <div [ngClass]=\"{'w-50' :content?.image?.showImage,'w-100':!content?.image?.showImage }\" [id]=\"data?.id\"\r\n class=\"overflow-y-auto d-flex flex-column\" [simpoContainerAlignment]=\"stylesLayout\"\r\n [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div class=\"w-100 mb-3\">\r\n <simpo-text-editor [(value)]=\"content.inputText[0].value\"\r\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [isRTE]=\"content?.inputText[0]?.isRTE\"></simpo-text-editor>\r\n </div>\r\n <div class=\"table-container\">\r\n\r\n <!-- \u2705 HEADER (ONLY ONCE) -->\r\n <div class=\"d-flex table-header m-0 border-0 flex-nowrap\"\r\n [ngClass]=\"{'w-fit-content' : content?.image?.showImage , 'w-100': !content?.image?.showImage}\"\r\n [ngStyle]=\"{'background':accentBackground}\">\r\n <div class=\"d-flex align-items-center justify-content-center\"\r\n *ngFor=\"let col of content?.productTableDataList[0];let i = index\"\r\n [ngStyle]=\"{'border-right': content?.columnCellBorder && i != content?.productTableDataList[0].length - 1 ? '1px solid lightgrey' : 'none'}\"\r\n [ngClass]=\"{'cell' : !content?.image?.showImage,'image-cell': content?.image?.showImage}\"\r\n [style.color]=\"fontColor\">\r\n <simpo-text-editor [(value)]=\"col.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n\r\n <!-- \u2705 ALL ROWS (DYNAMIC) -->\r\n <div class=\"d-flex m-0 border-grey flex-nowrap\"\r\n [ngClass]=\"{'w-fit-content' : content?.image?.showImage , 'w-100': !content?.image?.showImage}\"\r\n *ngFor=\"let row of content?.productTableDataList; let rowIndex = index\">\r\n <ng-container *ngIf=\"rowIndex !== 0\">\r\n <div class=\"d-flex align-items-center justify-content-center\"\r\n *ngFor=\"let col of row; let colIndex = index\" contenteditable=\"true\"\r\n [ngStyle]=\"{'border-right': content?.columnCellBorder ? '1px solid lightgrey' : 'none'}\"\r\n [ngClass]=\"{'cell' : !content?.image?.showImage,'image-cell': content?.image?.showImage}\"\r\n [style.color]=\"fontColor\">\r\n <simpo-text-editor [(value)]=\"col.value\" [editable]=\"edit || false\"\r\n class=\"w-100\" [sectionId]=\"data?.id\" [inputTextIndex]=\"colIndex\" [itemIndex]=\"rowIndex\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"mt-3 position-absolute button-container\"\r\n [style.width]=\"content?.image?.showImage ? '47%' : '97%'\" *ngIf=\"data?.action?.display\">\r\n <app-button-element [buttonContent]=\"data?.action?.buttons[0]?.content\"\r\n [buttonStyle]=\"data?.action?.buttons[0]?.styles\" [buttonId]=\"data?.action?.buttons[0]?.id\"\r\n [sectionId]=\"data?.id\" [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [isFullWidth]=\"false\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <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: [".chemical-product-details{font-family:Arial,sans-serif;padding:20px}.chemical-product-details .container{display:flex;gap:40px;align-items:flex-start}.w-50{width:50%!important}.chemical-product-details .left{flex:1;display:flex;justify-content:center;align-items:center}.chemical-product-details .left img{max-width:100%;height:auto}.chemical-product-details .right{flex:1}.chemical-product-details .right h2{font-size:28px;color:#2c5aa0;margin-bottom:20px}.info-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #ddd;font-size:14px}.info-row span:first-child{color:#555}.info-row span:last-child{color:#000;font-weight:500}.total-container{height:auto;position:relative}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.table-container{display:flex;flex-direction:column;max-height:82%;height:fit-content;overflow-y:scroll}.button-container{bottom:4%}.border-grey{border-bottom:1px solid #eee;border-right:1px solid lightgrey;border-left:1px solid lightgrey}.image-cell{width:140px;padding:5px 0;outline:none}.row{display:flex}.w-fit-content{width:fit-content!important}.overflow-y-auto{overflow-y:auto!important}.cell{flex:1 1 0;min-width:117px;padding:10px 0;outline:none}.table-header{font-weight:700;border-top-right-radius:7px;border-top-left-radius:7px}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }] }); }
|
|
27296
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductInfoSectionComponent, isStandalone: true, selector: "simpo-product-info-section", inputs: { data: "data", index: "index", edit: "edit", nextComponentColor: "nextComponentColor", delete: "delete", customClass: "customClass" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div class=\"chemical-product-details\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\r\n [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"product-container d-flex gap-5 w-100 flex-lg-row\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\">\r\n <!-- [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\" -->\r\n\r\n <!-- Left: Structure Image -->\r\n <div class=\"w-50\" *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 [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg h-100\"\r\n loading=\"lazy\" />\r\n </div>\r\n <!-- Right: Details -->\r\n <div [ngClass]=\"{'w-50' :content?.image?.showImage,'w-100':!content?.image?.showImage }\" [id]=\"data?.id\"\r\n class=\"overflow-y-auto d-flex flex-column\" [simpoContainerAlignment]=\"stylesLayout\"\r\n [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div class=\"w-100 mb-3\">\r\n <simpo-text-editor [(value)]=\"content.inputText[0].value\"\r\n [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [isRTE]=\"content?.inputText[0]?.isRTE\"></simpo-text-editor>\r\n </div>\r\n <div class=\"table-container\">\r\n\r\n <!-- \u2705 HEADER (ONLY ONCE) -->\r\n <div class=\"d-flex table-header m-0 border-0 flex-nowrap\"\r\n [ngClass]=\"{'w-fit-content' : content?.image?.showImage , 'w-100': !content?.image?.showImage}\"\r\n [ngStyle]=\"{'background':accentBackground}\">\r\n <div class=\"d-flex align-items-center justify-content-center\"\r\n *ngFor=\"let col of content?.productTableDataList[0];let i = index\"\r\n [ngStyle]=\"{'border-right': content?.columnCellBorder && i != content?.productTableDataList[0].length - 1 ? '1px solid lightgrey' : 'none'}\"\r\n [ngClass]=\"{'cell' : !content?.image?.showImage,'image-cell': content?.image?.showImage}\"\r\n [style.color]=\"fontColor\">\r\n <simpo-text-editor [(value)]=\"col.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n\r\n <!-- \u2705 ALL ROWS (DYNAMIC) -->\r\n <div class=\"d-flex m-0 border-grey flex-nowrap\"\r\n [ngClass]=\"{'w-fit-content' : content?.image?.showImage , 'w-100': !content?.image?.showImage}\"\r\n *ngFor=\"let row of content?.productTableDataList; let rowIndex = index\">\r\n <ng-container *ngIf=\"rowIndex !== 0\">\r\n <div class=\"d-flex align-items-center justify-content-center\"\r\n *ngFor=\"let col of row; let colIndex = index\" contenteditable=\"true\"\r\n [ngStyle]=\"{'border-right': content?.columnCellBorder ? '1px solid lightgrey' : 'none'}\"\r\n [ngClass]=\"{'cell' : !content?.image?.showImage,'image-cell': content?.image?.showImage}\"\r\n [style.color]=\"fontColor\">\r\n <simpo-text-editor [(value)]=\"col.value\" [editable]=\"edit || false\"\r\n class=\"w-100\" [sectionId]=\"data?.id\" [inputTextIndex]=\"colIndex\" [itemIndex]=\"rowIndex\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"mt-3 position-absolute button-container\"\r\n [style.width]=\"content?.image?.showImage ? '47%' : '97%'\" *ngIf=\"data?.action?.display\">\r\n <app-button-element [buttonContent]=\"data?.action?.buttons[0]?.content\"\r\n [buttonStyle]=\"data?.action?.buttons[0]?.styles\" [buttonId]=\"data?.action?.buttons[0]?.id\"\r\n [sectionId]=\"data?.id\" [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [isFullWidth]=\"false\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <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: [".chemical-product-details{font-family:Arial,sans-serif;padding:20px}.chemical-product-details .container{display:flex;gap:40px;align-items:flex-start}.w-50{width:50%!important}.chemical-product-details .left{flex:1;display:flex;justify-content:center;align-items:center}.chemical-product-details .left img{max-width:100%;height:auto}.chemical-product-details .right{flex:1}.chemical-product-details .right h2{font-size:28px;color:#2c5aa0;margin-bottom:20px}.info-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #ddd;font-size:14px}.info-row span:first-child{color:#555}.info-row span:last-child{color:#000;font-weight:500}.total-container{height:auto;position:relative}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.table-container{display:flex;flex-direction:column;max-height:82%;height:fit-content;overflow-y:scroll}.button-container{bottom:4%}.border-grey{border-bottom:1px solid #eee;border-right:1px solid lightgrey;border-left:1px solid lightgrey}.image-cell{width:140px;padding:5px 0;outline:none}.row{display:flex}.w-fit-content{width:fit-content!important}.overflow-y-auto{overflow-y:auto!important}.cell{flex:1 1 0;min-width:117px;padding:10px 0;outline:none}.table-header{font-weight:700;border-top-right-radius:7px;border-top-left-radius:7px}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth", "itemIndex"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }] }); }
|
|
27400
27297
|
}
|
|
27401
27298
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductInfoSectionComponent, decorators: [{
|
|
27402
27299
|
type: Component,
|
|
@@ -27446,7 +27343,7 @@ class ButtonGridSectionComponent extends BaseSection {
|
|
|
27446
27343
|
return { ...this.style?.layout };
|
|
27447
27344
|
}
|
|
27448
27345
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonGridSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
27449
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ButtonGridSectionComponent, isStandalone: true, selector: "simpo-button-grid-section", inputs: { edit: "edit", data: "data", customClass: "customClass", nextComponentColor: "nextComponentColor", index: "index", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section>\r\n <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"button-grid-wrapper total-container\"\r\n [attr.style]=\"customClass\" [simpoBackground]=\"style?.background\">\r\n <div #mainContainer [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"style?.layout\"\r\n class=\"button-grid-container d-flex flex-column\" [simpoOverlay]=\"style?.background\"\r\n [simpoAnimation]=\"style?.animation\">\r\n\r\n <div class=\"heading-section\" *ngIf=\"content?.inputText?.length\">\r\n <div class=\"main-heading\" *ngIf=\"content?.inputText?.[0]\">\r\n <simpo-text-editor [(value)]=\"content.inputText[0].value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [isRTE]=\"content?.inputText[0]?.isRTE\"></simpo-text-editor>\r\n </div>\r\n\r\n <div class=\"sub-heading\" *ngIf=\"content?.inputText?.[1] && (content.inputText[1].value || edit)\">\r\n <simpo-text-editor [(value)]=\"content.inputText[1].value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"1\" [isRTE]=\"content?.inputText[1]?.isRTE\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n\r\n <div class=\"buttons-scroll-wrapper w-100\">\r\n <div class=\"buttons-grid\">\r\n <div class=\"grid-button\" *ngFor=\"let item of data.action.buttons; let i = index\">\r\n <app-button-element [buttonContent]=\"item.content\" [buttonStyle]=\"item.styles\" [buttonId]=\"item?.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\">\r\n </app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{ hover_effect: edit }\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{ hover_effect: delete }\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </div>\r\n</section>", styles: [".button-grid-wrapper{width:100%}.total-container{height:auto;position:relative}.button-grid-container{width:100%;padding:50px 40px 35px}.heading-section{text-align:center;margin-bottom:34px;flex-shrink:0}.main-heading{font-size:42px;font-weight:600;line-height:1.2;color:#0a4f9f;margin-bottom:12px}.sub-heading{font-size:16px;line-height:1.6;color:#555;max-width:900px;margin:0 auto}.buttons-scroll-wrapper{max-height:370px;overflow-y:auto;overflow-x:hidden;padding-right:8px}.buttons-scroll-wrapper::-webkit-scrollbar{width:8px}.buttons-scroll-wrapper::-webkit-scrollbar-track{background:transparent}.buttons-scroll-wrapper::-webkit-scrollbar-thumb{background:#0003;border-radius:20px}.buttons-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 36px;padding:5px 0}.grid-button{width:100%;min-width:0;display:flex}.grid-button app-button-element{display:block;width:100%;flex:1}.grid-button ::ng-deep app-button-element>*{width:100%}.grid-button ::ng-deep button,.grid-button ::ng-deep .simpo-btn,.grid-button ::ng-deep a{width:100%!important;min-height:60px;display:flex!important;align-items:center;justify-content:center;text-align:center;font-size:18px;font-weight:600;letter-spacing:.4px;padding:18px 16px!important;line-height:1.4;height:auto;white-space:normal;word-break:break-word;overflow-wrap:anywhere}@media (min-width: 1200px){.button-grid-container{padding:55px 52px 40px}.main-heading{font-size:46px}.buttons-scroll-wrapper{max-height:370px}}@media (min-width: 768px) and (max-width: 1024px){.button-grid-container{padding:38px 26px 30px}.main-heading{font-size:34px}.sub-heading{font-size:15px}.buttons-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}.buttons-scroll-wrapper{max-height:420px}.grid-button ::ng-deep button,.grid-button ::ng-deep .simpo-btn,.grid-button ::ng-deep a{min-height:68px;font-size:16px}}@media (max-width: 767px){.button-grid-container{padding:28px 16px 24px}.heading-section{margin-bottom:22px}.main-heading{font-size:28px;margin-bottom:8px}.sub-heading{font-size:14px}.buttons-grid{grid-template-columns:repeat(1,minmax(0,1fr));gap:14px}.buttons-scroll-wrapper{max-height:360px;padding-right:4px}.grid-button ::ng-deep button,.grid-button ::ng-deep .simpo-btn,.grid-button ::ng-deep a{min-height:58px;font-size:14px;padding:14px 12px!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }] }); }
|
|
27346
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ButtonGridSectionComponent, isStandalone: true, selector: "simpo-button-grid-section", inputs: { edit: "edit", data: "data", customClass: "customClass", nextComponentColor: "nextComponentColor", index: "index", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section>\r\n <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"button-grid-wrapper total-container\"\r\n [attr.style]=\"customClass\" [simpoBackground]=\"style?.background\">\r\n <div #mainContainer [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"style?.layout\"\r\n class=\"button-grid-container d-flex flex-column\" [simpoOverlay]=\"style?.background\"\r\n [simpoAnimation]=\"style?.animation\">\r\n\r\n <div class=\"heading-section\" *ngIf=\"content?.inputText?.length\">\r\n <div class=\"main-heading\" *ngIf=\"content?.inputText?.[0]\">\r\n <simpo-text-editor [(value)]=\"content.inputText[0].value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [isRTE]=\"content?.inputText[0]?.isRTE\"></simpo-text-editor>\r\n </div>\r\n\r\n <div class=\"sub-heading\" *ngIf=\"content?.inputText?.[1] && (content.inputText[1].value || edit)\">\r\n <simpo-text-editor [(value)]=\"content.inputText[1].value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"1\" [isRTE]=\"content?.inputText[1]?.isRTE\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n\r\n <div class=\"buttons-scroll-wrapper w-100\">\r\n <div class=\"buttons-grid\">\r\n <div class=\"grid-button\" *ngFor=\"let item of data.action.buttons; let i = index\">\r\n <app-button-element [buttonContent]=\"item.content\" [buttonStyle]=\"item.styles\" [buttonId]=\"item?.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\">\r\n </app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{ hover_effect: edit }\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{ hover_effect: delete }\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </div>\r\n</section>", styles: [".button-grid-wrapper{width:100%}.total-container{height:auto;position:relative}.button-grid-container{width:100%;padding:50px 40px 35px}.heading-section{text-align:center;margin-bottom:34px;flex-shrink:0}.main-heading{font-size:42px;font-weight:600;line-height:1.2;color:#0a4f9f;margin-bottom:12px}.sub-heading{font-size:16px;line-height:1.6;color:#555;max-width:900px;margin:0 auto}.buttons-scroll-wrapper{max-height:370px;overflow-y:auto;overflow-x:hidden;padding-right:8px}.buttons-scroll-wrapper::-webkit-scrollbar{width:8px}.buttons-scroll-wrapper::-webkit-scrollbar-track{background:transparent}.buttons-scroll-wrapper::-webkit-scrollbar-thumb{background:#0003;border-radius:20px}.buttons-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 36px;padding:5px 0}.grid-button{width:100%;min-width:0;display:flex}.grid-button app-button-element{display:block;width:100%;flex:1}.grid-button ::ng-deep app-button-element>*{width:100%}.grid-button ::ng-deep button,.grid-button ::ng-deep .simpo-btn,.grid-button ::ng-deep a{width:100%!important;min-height:60px;display:flex!important;align-items:center;justify-content:center;text-align:center;font-size:18px;font-weight:600;letter-spacing:.4px;padding:18px 16px!important;line-height:1.4;height:auto;white-space:normal;word-break:break-word;overflow-wrap:anywhere}@media (min-width: 1200px){.button-grid-container{padding:55px 52px 40px}.main-heading{font-size:46px}.buttons-scroll-wrapper{max-height:370px}}@media (min-width: 768px) and (max-width: 1024px){.button-grid-container{padding:38px 26px 30px}.main-heading{font-size:34px}.sub-heading{font-size:15px}.buttons-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}.buttons-scroll-wrapper{max-height:420px}.grid-button ::ng-deep button,.grid-button ::ng-deep .simpo-btn,.grid-button ::ng-deep a{min-height:68px;font-size:16px}}@media (max-width: 767px){.button-grid-container{padding:28px 16px 24px}.heading-section{margin-bottom:22px}.main-heading{font-size:28px;margin-bottom:8px}.sub-heading{font-size:14px}.buttons-grid{grid-template-columns:repeat(1,minmax(0,1fr));gap:14px}.buttons-scroll-wrapper{max-height:360px;padding-right:4px}.grid-button ::ng-deep button,.grid-button ::ng-deep .simpo-btn,.grid-button ::ng-deep a{min-height:58px;font-size:14px;padding:14px 12px!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth", "itemIndex"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }] }); }
|
|
27450
27347
|
}
|
|
27451
27348
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonGridSectionComponent, decorators: [{
|
|
27452
27349
|
type: Component,
|
|
@@ -27591,5 +27488,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
27591
27488
|
* Generated bundle index. Do not edit.
|
|
27592
27489
|
*/
|
|
27593
27490
|
|
|
27594
|
-
export { API_URL, APPOINTMENT_URL, AddNewSectionComponent, AddSectionComponent, AlignContent, AlignmentDirective, AnimationDirective, AppointmentBookingComponent, AppointmentFormComponent, AuthenticateUserComponent, AuthenticationRequiredComponent, BANNERALIGNMENT, BANNERHALIGN, BUCKET_URL, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BookAppointmentComponent, BorderDirective, BrandStorySectionComponent, ButtonDirectiveDirective, ButtonGridSectionComponent, CMIS_URL, CarouselBannerComponent, Cart, CartComponent, Category, CategoryProductComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, CondensedAndGradientComponent, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, CountdownBannerComponent, CustomerReviewComponent, DeviderType, ECOMMERCE_URL, EndUserService, EnrollmentFormComponent, EventsService, FaqColumnsCardsComponent, FaqSectionComponent, FeatureExperienceSectionComponent, FeaturedCategoryComponent, FeaturedCollectionComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterComponent, FooterSectionComponent, FooterType, FooterTypes, FourFeaturesCenteredImageComponent, GradientDirection, HALIGN, HEADER_STYLING, HeaderButtonStyle, HeaderSectionComponent, HeaderTextComponent, Header_Type, HeightDirective, HoverAnimationDirective, HoverDirective, IconDirectiveDirective, ImageBackgroundComponent, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridHotspotComponent, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LOCAL_STORAGE, LocationSectionComponent, LogoGalleryComponent, LogoShowcaseComponent, MapType, Menu_Type, MergeHeaderDirective, Mobile_Menu_Type, MovingTextComponent, NavbarSectionComponent, NewCollectionComponent, NewServicesComponent, NewTestimonialsComponent, NewsLetterComponentComponent, ObjectPositionDirective, OverlappingImageComponent, OverlayDirective, OverlayValue, PASSBOOK_URL, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCardTheme, ProductCategoryListComponent, ProductDescComponent, ProductInfoSectionComponent, ProductListComponent, PropertyComponentComponent, PropertyListComponent,
|
|
27491
|
+
export { API_URL, APPOINTMENT_URL, AddNewSectionComponent, AddSectionComponent, AlignContent, AlignmentDirective, AnimationDirective, AppointmentBookingComponent, AppointmentFormComponent, AuthenticateUserComponent, AuthenticationRequiredComponent, BANNERALIGNMENT, BANNERHALIGN, BUCKET_URL, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BookAppointmentComponent, BorderDirective, BrandStorySectionComponent, ButtonDirectiveDirective, ButtonGridSectionComponent, CMIS_URL, CarouselBannerComponent, Cart, CartComponent, Category, CategoryProductComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, CondensedAndGradientComponent, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, CountdownBannerComponent, CustomerReviewComponent, DeviderType, ECOMMERCE_URL, EndUserService, EnrollmentFormComponent, EventsService, FaqColumnsCardsComponent, FaqSectionComponent, FeatureExperienceSectionComponent, FeaturedCategoryComponent, FeaturedCollectionComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterComponent, FooterSectionComponent, FooterType, FooterTypes, FourFeaturesCenteredImageComponent, GradientDirection, HALIGN, HEADER_STYLING, HeaderButtonStyle, HeaderSectionComponent, HeaderTextComponent, Header_Type, HeightDirective, HoverAnimationDirective, HoverDirective, IconDirectiveDirective, ImageBackgroundComponent, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridHotspotComponent, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LOCAL_STORAGE, LocationSectionComponent, LogoGalleryComponent, LogoShowcaseComponent, MapType, Menu_Type, MergeHeaderDirective, Mobile_Menu_Type, MovingTextComponent, NavbarSectionComponent, NewCollectionComponent, NewServicesComponent, NewTestimonialsComponent, NewsLetterComponentComponent, ObjectPositionDirective, OverlappingImageComponent, OverlayDirective, OverlayValue, PASSBOOK_URL, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCardTheme, ProductCategoryListComponent, ProductDescComponent, ProductInfoSectionComponent, ProductListComponent, PropertyComponentComponent, PropertyListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, ReferEarnComponent, RegistrationFormComponent, RemoveCarouselDirective, ReturnsCalculatorComponent, SPACING$1 as SPACING, SPACINGALIGN, SanitizeHtmlPipe, SchemeDetailComponent, SchemesComponent, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, SpacingAroundDirective, SpacingDirective, Sticky_Type, StoreListComponent, StorePageComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialMasonryComponent, TestimonialSectionComponent, TestimonialSliderComponent, TestimonialVideoComponent, TextBackgroundDirectiveDirective, TextEditorComponent, TextImageSectionComponent, TextPosition, TextSectionComponent, TranslateOnhoverDirective, UserProfileComponent, UspVideoSectionComponent, VALIGN, VerifyComponent, VideoCarouselSectionComponent, VideoGridSectionComponent, VideoRatio, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, cartType, checkItemAlreadyAdded, contentAlignment, fitContent, fitScreen, fontSize, headlineAnimationType, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective, svgData, syncItemToServerDBRequest };
|
|
27595
27492
|
//# sourceMappingURL=simpo-component-library.mjs.map
|