simpo-component-library 3.6.526 → 3.6.527
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/button-editor.directive.mjs +4 -4
- package/esm2022/lib/ecommerce/sections/store-list/store-list.component.mjs +10 -3
- package/esm2022/lib/ecommerce/sections/store-page/store-page.component.mjs +6 -3
- package/esm2022/lib/elements/link-editor/link-editor.component.mjs +2 -1
- package/esm2022/lib/sections/appointment-form/appointment-booking/appointment-booking/appointment-booking.component.mjs +2 -2
- package/esm2022/lib/sections/blog-list/blog-list.component.mjs +7 -3
- package/esm2022/lib/sections/header-section/header-section.component.mjs +4 -4
- package/esm2022/lib/sections/image-grid-section/image-grid-section.component.mjs +62 -5
- package/esm2022/lib/sections/view-blog/view-blog.component.mjs +3 -3
- package/fesm2022/simpo-component-library.mjs +88 -19
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/ecommerce/sections/store-list/store-list.component.d.ts +2 -1
- package/lib/ecommerce/sections/store-page/store-page.component.d.ts +2 -0
- package/lib/sections/image-grid-section/image-grid-section.component.d.ts +14 -0
- package/package.json +1 -1
- package/simpo-component-library-3.6.527.tgz +0 -0
- package/simpo-component-library-3.6.526.tgz +0 -0
|
@@ -1315,6 +1315,7 @@ class LinkEditorComponent {
|
|
|
1315
1315
|
this.link = this.data.linkData;
|
|
1316
1316
|
this.selectedType = this.link.linkType === RedirectionLinkType.Email || this.link.linkType === RedirectionLinkType.Phone ? RedirectionLinkType.External : this.link.linkType;
|
|
1317
1317
|
this.addLink = false;
|
|
1318
|
+
this.data.buttonStyle.gradientDirection = this.data.buttonStyle?.gradientDirection || GradientDirection.DOWN;
|
|
1318
1319
|
}
|
|
1319
1320
|
this.getTemplatePage();
|
|
1320
1321
|
}
|
|
@@ -1453,11 +1454,11 @@ class ButtonEditorDirective {
|
|
|
1453
1454
|
}
|
|
1454
1455
|
ngOnInit() {
|
|
1455
1456
|
if (this.appButtonEditor) {
|
|
1456
|
-
this.el.nativeElement.style.border = this.buttonStyle?.type == 'Outline' ? `2px solid ${this.
|
|
1457
|
+
this.el.nativeElement.style.border = this.buttonStyle?.type == 'Outline' ? `2px solid ${this.buttonStyle?.background}` : 'unset';
|
|
1457
1458
|
this.setupEventListeners();
|
|
1458
1459
|
}
|
|
1459
1460
|
else {
|
|
1460
|
-
this.el.nativeElement.style.border = this.buttonStyle?.type == 'Outline' ? `2px solid ${this.
|
|
1461
|
+
this.el.nativeElement.style.border = this.buttonStyle?.type == 'Outline' ? `2px solid ${this.buttonStyle?.background}` : 'unset';
|
|
1461
1462
|
}
|
|
1462
1463
|
}
|
|
1463
1464
|
ngOnChanges() {
|
|
@@ -1475,7 +1476,7 @@ class ButtonEditorDirective {
|
|
|
1475
1476
|
this.mouseLeaveSub = fromEvent(this.el.nativeElement, 'mouseleave')
|
|
1476
1477
|
.pipe(debounceTime(100))
|
|
1477
1478
|
.subscribe(() => {
|
|
1478
|
-
this.el.nativeElement.style.border = this.buttonStyle?.type == 'Outline' ? `2px solid ${this.
|
|
1479
|
+
this.el.nativeElement.style.border = this.buttonStyle?.type == 'Outline' ? `2px solid ${this.buttonStyle?.background}` : 'unset';
|
|
1479
1480
|
});
|
|
1480
1481
|
this.clickSub = fromEvent(this.el.nativeElement, 'click')
|
|
1481
1482
|
.pipe(filter(() => !this.matDialog.openDialogs.length))
|
|
@@ -5958,6 +5959,9 @@ class ImageGridSectionComponent extends BaseSection {
|
|
|
5958
5959
|
super();
|
|
5959
5960
|
this._eventService = _eventService;
|
|
5960
5961
|
this._mainContainer = null;
|
|
5962
|
+
this.isOverflowing = false;
|
|
5963
|
+
this.atStart = true;
|
|
5964
|
+
this.atEnd = false;
|
|
5961
5965
|
}
|
|
5962
5966
|
ngOnInit() {
|
|
5963
5967
|
this.content = this.data?.content;
|
|
@@ -5981,10 +5985,59 @@ class ImageGridSectionComponent extends BaseSection {
|
|
|
5981
5985
|
getLength() {
|
|
5982
5986
|
return this.content?.listItem?.data?.length || 0;
|
|
5983
5987
|
}
|
|
5988
|
+
getJustifyContent() {
|
|
5989
|
+
const el = this.imagegrid?.nativeElement;
|
|
5990
|
+
if (!el)
|
|
5991
|
+
return '';
|
|
5992
|
+
const isOverflowing = el.scrollWidth > el.clientWidth;
|
|
5993
|
+
if (isOverflowing) {
|
|
5994
|
+
return 'flex-start';
|
|
5995
|
+
}
|
|
5996
|
+
return this.style?.layout?.align || '';
|
|
5997
|
+
}
|
|
5998
|
+
get scrollStep() { return Math.round((this.imagegrid?.nativeElement?.clientWidth || 300) * 0.8); }
|
|
5999
|
+
scrollRight() {
|
|
6000
|
+
const el = this.imagegrid?.nativeElement;
|
|
6001
|
+
if (!el)
|
|
6002
|
+
return;
|
|
6003
|
+
el.scrollBy({ left: this.scrollStep, behavior: 'smooth' });
|
|
6004
|
+
setTimeout(() => this.updateEdges(), 300);
|
|
6005
|
+
}
|
|
6006
|
+
ngAfterViewInit() {
|
|
6007
|
+
// initial check
|
|
6008
|
+
setTimeout(() => this.checkOverflow(), 50);
|
|
6009
|
+
if (this.imagegrid?.nativeElement) {
|
|
6010
|
+
this.ro = new ResizeObserver(() => this.checkOverflow());
|
|
6011
|
+
this.ro.observe(this.imagegrid.nativeElement);
|
|
6012
|
+
}
|
|
6013
|
+
}
|
|
6014
|
+
ngOnDestroy() { this.ro?.disconnect(); }
|
|
6015
|
+
updateEdges() {
|
|
6016
|
+
const el = this.imagegrid?.nativeElement;
|
|
6017
|
+
if (!el)
|
|
6018
|
+
return;
|
|
6019
|
+
this.atStart = el.scrollLeft <= 5;
|
|
6020
|
+
this.atEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 5;
|
|
6021
|
+
}
|
|
6022
|
+
checkOverflow() {
|
|
6023
|
+
const el = this.imagegrid?.nativeElement;
|
|
6024
|
+
if (!el)
|
|
6025
|
+
return;
|
|
6026
|
+
this.isOverflowing = el.scrollWidth > el.clientWidth + 1;
|
|
6027
|
+
this.updateEdges();
|
|
6028
|
+
}
|
|
6029
|
+
onScroll() { this.updateEdges(); }
|
|
6030
|
+
scrollLeft() {
|
|
6031
|
+
const el = this.imagegrid?.nativeElement;
|
|
6032
|
+
if (!el)
|
|
6033
|
+
return;
|
|
6034
|
+
el.scrollBy({ left: -this.scrollStep, behavior: 'smooth' });
|
|
6035
|
+
setTimeout(() => this.updateEdges(), 300);
|
|
6036
|
+
}
|
|
5984
6037
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageGridSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5985
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageGridSectionComponent, isStandalone: true, selector: "simpo-image-grid-section", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", delete: "delete", 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)\"\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\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n [ngStyle]=\"style?.fullWidth ? {'padding': '0px'} : {}\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <ng-container *ngIf=\"edit || (text.value && text.value.length > 0)\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.gridStyle == 'Style1'\">\r\n <
|
|
6038
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageGridSectionComponent, isStandalone: true, selector: "simpo-image-grid-section", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "imagegrid", first: true, predicate: ["imagegrid"], descendants: true }, { propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [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\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n [ngStyle]=\"style?.fullWidth ? {'padding': '0px'} : {}\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <ng-container *ngIf=\"edit || (text.value && text.value.length > 0)\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.gridStyle == 'Style1'\">\r\n <button class=\"scroll-btn left p-0 d-flex align-items-center justify-content-center\"\r\n *ngIf=\"style?.direction === 'ROW' && isOverflowing\" (click)=\"scrollLeft()\"\r\n [disabled]=\"atStart\"><mat-icon>keyboard_arrow_left</mat-icon>\r\n </button>\r\n <div class=\"main-image-section d-flex position-relative\" [class.row]=\"style?.direction == 'ROW' \"\r\n [class.wrap-scroll]=\"style?.direction == 'ROW'\" [class.flex-wrap]=\"style?.direction == 'COLUMN'\"\r\n [id]=\"data?.id\" #imagegrid [style.justifyContent]=\"getJustifyContent()\" (scroll)=\"onScroll()\">\r\n <div class=\"image-section p-3\" *ngFor=\"let img of content?.listItem?.data\"\r\n [simpoColumnDirective]=\"style?.size\" [id]=\"data?.id\"\r\n [attr.style]=\"style?.removeGaps ? 'padding: 0px !important; margin: 0px !important;' : {}\">\r\n <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"\r\n [class]=\"data?.id+img.image.id\" [simpoObjectPosition]=\"img.image.position\" [src]=\"img.image.url\"\r\n [alt]=\"img.image.altText\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\"\r\n [sectionId]=\"data?.id\" class=\"w-100\" />\r\n </div>\r\n </div>\r\n <button class=\"scroll-btn right p-0 d-flex align-items-center justify-content-center\"\r\n *ngIf=\"style?.direction === 'ROW' && isOverflowing\" (click)=\"scrollRight()\"\r\n [disabled]=\"atEnd\"><mat-icon>keyboard_arrow_right</mat-icon>\r\n </button>\r\n\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.gridStyle == 'Style2'\">\r\n <div class=\"grid h-100\" [class.remove-gap]=\"style?.removeGaps\" [class.p-0]=\"style?.fullWidth\">\r\n <ng-container *ngFor=\"let img of content?.listItem?.data\">\r\n <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"\r\n [class]=\"data?.id+img.image.id\" [simpoObjectPosition]=\"img.image.position\" [src]=\"img.image.url\"\r\n [alt]=\"img.image.altText\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\"\r\n [sectionId]=\"data?.id\" class=\"w-100\" />\r\n </ng-container>\r\n </div>\r\n\r\n\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\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}.main-image-section{margin-bottom:1.5rem}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.wrap-scroll{overflow:scroll;flex-wrap:nowrap}@media screen and (min-width : 1200px){.grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;grid-gap:5px}.grid img:first-child:last-child{grid-column:1 / span 2}.grid img:first-child:nth-last-child(2),.grid img:nth-child(2):last-child{grid-column:span 1;height:100%}.grid img:nth-child(3n+1):not(:last-child){grid-column:1;grid-row:span 2;height:100%}.grid img:nth-child(3n+2){grid-column:2}.grid img:nth-child(3n+3){grid-column:2;align-self:end}.grid img:nth-child(3n+4){grid-column:1 / span 2}}.remove-gap{grid-gap:0!important}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}.main-image-container{width:100%}@media screen and (max-width: 760px){.scroll-btn{display:none!important}}.right-column-container{display:flex;flex-direction:column;height:100%;padding:0}.image-half-height{height:50%!important;flex:1}.image-half-height:first-child{margin-bottom:2px}.scroll-btn{position:absolute;top:50%;z-index:10;font-size:18px;width:36px!important;height:36px!important;border-radius:50%;border:none}.scroll-btn.left{left:8px}.scroll-btn.right{right:8px}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type:
|
|
5986
6039
|
//directive
|
|
5987
|
-
AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
|
6040
|
+
AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
5988
6041
|
}
|
|
5989
6042
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageGridSectionComponent, decorators: [{
|
|
5990
6043
|
type: Component,
|
|
@@ -6018,8 +6071,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
6018
6071
|
ImageEditorDirective,
|
|
6019
6072
|
SpacingHorizontalDirective,
|
|
6020
6073
|
SimpoWrapComntainer,
|
|
6021
|
-
|
|
6022
|
-
|
|
6074
|
+
MatIcon
|
|
6075
|
+
], 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\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n [ngStyle]=\"style?.fullWidth ? {'padding': '0px'} : {}\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <ng-container *ngIf=\"edit || (text.value && text.value.length > 0)\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.gridStyle == 'Style1'\">\r\n <button class=\"scroll-btn left p-0 d-flex align-items-center justify-content-center\"\r\n *ngIf=\"style?.direction === 'ROW' && isOverflowing\" (click)=\"scrollLeft()\"\r\n [disabled]=\"atStart\"><mat-icon>keyboard_arrow_left</mat-icon>\r\n </button>\r\n <div class=\"main-image-section d-flex position-relative\" [class.row]=\"style?.direction == 'ROW' \"\r\n [class.wrap-scroll]=\"style?.direction == 'ROW'\" [class.flex-wrap]=\"style?.direction == 'COLUMN'\"\r\n [id]=\"data?.id\" #imagegrid [style.justifyContent]=\"getJustifyContent()\" (scroll)=\"onScroll()\">\r\n <div class=\"image-section p-3\" *ngFor=\"let img of content?.listItem?.data\"\r\n [simpoColumnDirective]=\"style?.size\" [id]=\"data?.id\"\r\n [attr.style]=\"style?.removeGaps ? 'padding: 0px !important; margin: 0px !important;' : {}\">\r\n <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"\r\n [class]=\"data?.id+img.image.id\" [simpoObjectPosition]=\"img.image.position\" [src]=\"img.image.url\"\r\n [alt]=\"img.image.altText\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\"\r\n [sectionId]=\"data?.id\" class=\"w-100\" />\r\n </div>\r\n </div>\r\n <button class=\"scroll-btn right p-0 d-flex align-items-center justify-content-center\"\r\n *ngIf=\"style?.direction === 'ROW' && isOverflowing\" (click)=\"scrollRight()\"\r\n [disabled]=\"atEnd\"><mat-icon>keyboard_arrow_right</mat-icon>\r\n </button>\r\n\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.gridStyle == 'Style2'\">\r\n <div class=\"grid h-100\" [class.remove-gap]=\"style?.removeGaps\" [class.p-0]=\"style?.fullWidth\">\r\n <ng-container *ngFor=\"let img of content?.listItem?.data\">\r\n <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"\r\n [class]=\"data?.id+img.image.id\" [simpoObjectPosition]=\"img.image.position\" [src]=\"img.image.url\"\r\n [alt]=\"img.image.altText\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\"\r\n [sectionId]=\"data?.id\" class=\"w-100\" />\r\n </ng-container>\r\n </div>\r\n\r\n\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\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}.main-image-section{margin-bottom:1.5rem}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.wrap-scroll{overflow:scroll;flex-wrap:nowrap}@media screen and (min-width : 1200px){.grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;grid-gap:5px}.grid img:first-child:last-child{grid-column:1 / span 2}.grid img:first-child:nth-last-child(2),.grid img:nth-child(2):last-child{grid-column:span 1;height:100%}.grid img:nth-child(3n+1):not(:last-child){grid-column:1;grid-row:span 2;height:100%}.grid img:nth-child(3n+2){grid-column:2}.grid img:nth-child(3n+3){grid-column:2;align-self:end}.grid img:nth-child(3n+4){grid-column:1 / span 2}}.remove-gap{grid-gap:0!important}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}.main-image-container{width:100%}@media screen and (max-width: 760px){.scroll-btn{display:none!important}}.right-column-container{display:flex;flex-direction:column;height:100%;padding:0}.image-half-height{height:50%!important;flex:1}.image-half-height:first-child{margin-bottom:2px}.scroll-btn{position:absolute;top:50%;z-index:10;font-size:18px;width:36px!important;height:36px!important;border-radius:50%;border:none}.scroll-btn.left{left:8px}.scroll-btn.right{right:8px}\n"] }]
|
|
6076
|
+
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { imagegrid: [{
|
|
6077
|
+
type: ViewChild,
|
|
6078
|
+
args: ['imagegrid', { static: false }]
|
|
6079
|
+
}], data: [{
|
|
6023
6080
|
type: Input
|
|
6024
6081
|
}], index: [{
|
|
6025
6082
|
type: Input
|
|
@@ -10781,7 +10838,11 @@ class BlogListComponent extends BaseSection {
|
|
|
10781
10838
|
}
|
|
10782
10839
|
ngOnInit() {
|
|
10783
10840
|
for (let blog of this.responseData) {
|
|
10841
|
+
console.log(blog);
|
|
10784
10842
|
blog['img'] = blog.blocks.find((x) => x.type === 'image')?.data?.file?.url;
|
|
10843
|
+
if (blog?.keyWords?.content?.length > 0)
|
|
10844
|
+
blog['tags'] = blog?.keyWords?.content?.split(',') || [];
|
|
10845
|
+
console.log(blog['tags']);
|
|
10785
10846
|
}
|
|
10786
10847
|
this.style = this.data?.styles;
|
|
10787
10848
|
this.blogContent = this.data?.content;
|
|
@@ -10804,7 +10865,7 @@ class BlogListComponent extends BaseSection {
|
|
|
10804
10865
|
}, 100);
|
|
10805
10866
|
}
|
|
10806
10867
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BlogListComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10807
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BlogListComponent, isStandalone: true, selector: "simpo-blog-list", inputs: { responseData: "responseData", index: "index", edit: "edit", customClass: "customClass", data: "data", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" class=\"total-container\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" *ngIf=\"(responseData?.length || 0) > 0;else elseBlock\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\"\r\n [simpoAnimation]=\"style?.animation\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"container-fluid\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row gap-20\">\r\n <div [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let content of responseData\"\r\n class=\"d-flex\">\r\n <a [routerLink]=\"['/blog', content.newPostTitle]\" (click)=\"getBlogById(content.newPostTitle)\">\r\n <div class=\"cards h-100\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\">\r\n <img loading=\"lazy\" [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoCorner]=\"style?.corners\" alt=\"\" *ngIf=\"content.img\" loading=\"lazy\">\r\n <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\r\n alt=\"\" *ngIf=\"!content.img\" loading=\"lazy\">\r\n <div class=\"p-30\">\r\n <div class=\"heading-medium title mt-
|
|
10868
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BlogListComponent, isStandalone: true, selector: "simpo-blog-list", inputs: { responseData: "responseData", index: "index", edit: "edit", customClass: "customClass", data: "data", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" class=\"total-container\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" *ngIf=\"(responseData?.length || 0) > 0;else elseBlock\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\"\r\n [simpoAnimation]=\"style?.animation\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"container-fluid\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row gap-20\">\r\n <div [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let content of responseData\"\r\n class=\"d-flex\">\r\n <a [routerLink]=\"['/blog', content.newPostTitle]\" (click)=\"getBlogById(content.newPostTitle)\">\r\n <div class=\"cards h-100\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\">\r\n <img loading=\"lazy\" [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoCorner]=\"style?.corners\" alt=\"\" *ngIf=\"content.img\" loading=\"lazy\">\r\n <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\r\n alt=\"\" *ngIf=\"!content.img\" loading=\"lazy\">\r\n <div class=\"p-30\">\r\n <div class=\"d-flex flex-wrap align-items-center gap-2\">\r\n <ng-container *ngFor=\"let tag of content?.tags | slice:0:4\">\r\n <p class=\"mb-0 p-2 border\">{{ tag }}</p>\r\n </ng-container>\r\n </div>\r\n <div class=\"heading-medium title mt-2 fs-20\" *ngIf=\"blogContent?.display?.showHeading\">\r\n {{content.postTitle.length > 100 ? content.postTitle.substring(0,100)+'...\"' : content.postTitle}}\r\n <!-- {{content.postTitle}} -->\r\n </div>\r\n <ng-container>\r\n <div class=\"body-large mt-4 pb-15\" *ngIf=\"blogContent?.display?.showContent\">\r\n {{ content.postSummary.length > 250 ? content.postSummary.substring(0, 250) + '...' :\r\n content.postSummary }}\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end p-2 align-items-center\" *ngIf=\"content?.author?.content && content?.author?.content.length > 0\">\r\n <p>- {{content?.author?.content | titlecase}}</p>\r\n </div>\r\n\r\n <!-- <div class=\"authors\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n <div>\r\n <mat-icon>person</mat-icon> <span class=\"body-large\">{{content?.author?.content | titlecase}}</span>\r\n </div>\r\n <div class=\"calendar_today\">\r\n <mat-icon>calendar_today</mat-icon> <span class=\"body-large\">{{content.createdTimeStamp |\r\n date:'EEEE, MMM, d, y'}}</span>\r\n </div>\r\n </div>\r\n <div class=\"button heading-large\" (click)=\"getBlogById(content.newPostTitle)\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n Read More <mat-icon>arrow_right_alt</mat-icon>\r\n </div> -->\r\n </div>\r\n </div>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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</section>\r\n<ng-template #elseBlock>\r\n <div class=\"no-blog-text heading-medium\">Sorry there are no blog posts.</div>\r\n</ng-template>", styles: [".cards{box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.cards img{width:100%;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.p-30{padding:10px 15px 0}.border{border:1px solid;border-radius:8px}.authors{display:flex;gap:35px;margin-top:40px}.authors div{display:flex}.authors .calendar_today{align-items:center}.authors .calendar_today mat-icon{font-size:20px}.button{font-size:15px;display:flex;align-items:center;gap:10px;cursor:pointer;font-family:interReg;font-weight:500;justify-content:end}.mt-20{margin-top:20px}.total-container{position:relative;height:auto}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.no-blog-text{font-size:24px;line-height:36px;height:40vh;display:flex;align-items:center;justify-content:center}.justify-content-right{justify-content:right}.h-100{height:100%}.gap-20{gap:20px 0px!important}.fs-20{font-size:20px!important}.pb-15{padding-bottom:15px}.ar-none{aspect-ratio:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
|
|
10808
10869
|
}
|
|
10809
10870
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BlogListComponent, decorators: [{
|
|
10810
10871
|
type: Component,
|
|
@@ -10821,7 +10882,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
10821
10882
|
HoverDirective,
|
|
10822
10883
|
HoverElementsComponent,
|
|
10823
10884
|
MatIcon, SvgDividerComponent,
|
|
10824
|
-
SpacingHorizontalDirective, RouterLink], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" class=\"total-container\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" *ngIf=\"(responseData?.length || 0) > 0;else elseBlock\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\"\r\n [simpoAnimation]=\"style?.animation\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"container-fluid\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row gap-20\">\r\n <div [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let content of responseData\"\r\n class=\"d-flex\">\r\n <a [routerLink]=\"['/blog', content.newPostTitle]\" (click)=\"getBlogById(content.newPostTitle)\">\r\n <div class=\"cards h-100\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\">\r\n <img loading=\"lazy\" [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoCorner]=\"style?.corners\" alt=\"\" *ngIf=\"content.img\" loading=\"lazy\">\r\n <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\r\n alt=\"\" *ngIf=\"!content.img\" loading=\"lazy\">\r\n <div class=\"p-30\">\r\n <div class=\"heading-medium title mt-
|
|
10885
|
+
SpacingHorizontalDirective, RouterLink], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" class=\"total-container\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" *ngIf=\"(responseData?.length || 0) > 0;else elseBlock\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\"\r\n [simpoAnimation]=\"style?.animation\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"container-fluid\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row gap-20\">\r\n <div [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let content of responseData\"\r\n class=\"d-flex\">\r\n <a [routerLink]=\"['/blog', content.newPostTitle]\" (click)=\"getBlogById(content.newPostTitle)\">\r\n <div class=\"cards h-100\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\">\r\n <img loading=\"lazy\" [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoCorner]=\"style?.corners\" alt=\"\" *ngIf=\"content.img\" loading=\"lazy\">\r\n <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\r\n alt=\"\" *ngIf=\"!content.img\" loading=\"lazy\">\r\n <div class=\"p-30\">\r\n <div class=\"d-flex flex-wrap align-items-center gap-2\">\r\n <ng-container *ngFor=\"let tag of content?.tags | slice:0:4\">\r\n <p class=\"mb-0 p-2 border\">{{ tag }}</p>\r\n </ng-container>\r\n </div>\r\n <div class=\"heading-medium title mt-2 fs-20\" *ngIf=\"blogContent?.display?.showHeading\">\r\n {{content.postTitle.length > 100 ? content.postTitle.substring(0,100)+'...\"' : content.postTitle}}\r\n <!-- {{content.postTitle}} -->\r\n </div>\r\n <ng-container>\r\n <div class=\"body-large mt-4 pb-15\" *ngIf=\"blogContent?.display?.showContent\">\r\n {{ content.postSummary.length > 250 ? content.postSummary.substring(0, 250) + '...' :\r\n content.postSummary }}\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end p-2 align-items-center\" *ngIf=\"content?.author?.content && content?.author?.content.length > 0\">\r\n <p>- {{content?.author?.content | titlecase}}</p>\r\n </div>\r\n\r\n <!-- <div class=\"authors\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n <div>\r\n <mat-icon>person</mat-icon> <span class=\"body-large\">{{content?.author?.content | titlecase}}</span>\r\n </div>\r\n <div class=\"calendar_today\">\r\n <mat-icon>calendar_today</mat-icon> <span class=\"body-large\">{{content.createdTimeStamp |\r\n date:'EEEE, MMM, d, y'}}</span>\r\n </div>\r\n </div>\r\n <div class=\"button heading-large\" (click)=\"getBlogById(content.newPostTitle)\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n Read More <mat-icon>arrow_right_alt</mat-icon>\r\n </div> -->\r\n </div>\r\n </div>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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</section>\r\n<ng-template #elseBlock>\r\n <div class=\"no-blog-text heading-medium\">Sorry there are no blog posts.</div>\r\n</ng-template>", styles: [".cards{box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.cards img{width:100%;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.p-30{padding:10px 15px 0}.border{border:1px solid;border-radius:8px}.authors{display:flex;gap:35px;margin-top:40px}.authors div{display:flex}.authors .calendar_today{align-items:center}.authors .calendar_today mat-icon{font-size:20px}.button{font-size:15px;display:flex;align-items:center;gap:10px;cursor:pointer;font-family:interReg;font-weight:500;justify-content:end}.mt-20{margin-top:20px}.total-container{position:relative;height:auto}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.no-blog-text{font-size:24px;line-height:36px;height:40vh;display:flex;align-items:center;justify-content:center}.justify-content-right{justify-content:right}.h-100{height:100%}.gap-20{gap:20px 0px!important}.fs-20{font-size:20px!important}.pb-15{padding-bottom:15px}.ar-none{aspect-ratio:0!important}\n"] }]
|
|
10825
10886
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { responseData: [{
|
|
10826
10887
|
type: Input
|
|
10827
10888
|
}], index: [{
|
|
@@ -11769,11 +11830,11 @@ class ViewBlogComponent {
|
|
|
11769
11830
|
// this._eventService.toggleEditorEvent.emit(false);
|
|
11770
11831
|
}
|
|
11771
11832
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ViewBlogComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11772
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ViewBlogComponent, isStandalone: true, selector: "simpo-view-blog", inputs: { responseData: "responseData" }, ngImport: i0, template: "<section class=\"main-section\">\r\n <div class=\"blog-details\">\r\n <h1 class=\"blog-title\">{{responseData.postTitle}}</h1
|
|
11833
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ViewBlogComponent, isStandalone: true, selector: "simpo-view-blog", inputs: { responseData: "responseData" }, ngImport: i0, template: "<section class=\"main-section\">\r\n <div class=\"blog-details\">\r\n <!-- <h1 class=\"blog-title\">{{responseData.postTitle}}</h1> -->\r\n <div style=\"margin-top: 20px;\">\r\n <ng-container *ngFor=\"let item of responseData?.blocks\">\r\n <div *ngIf=\"item.type=='header'\">\r\n <h1 *ngIf=\"item.data.level==1\" [innerHTML]=\"item.data.text\"></h1>\r\n <h2 *ngIf=\"item.data.level==2\" [innerHTML]=\"item.data.text\"></h2>\r\n <h3 *ngIf=\"item.data.level==3\" [innerHTML]=\"item.data.text\"></h3>\r\n <h4 *ngIf=\"item.data.level==4\" [innerHTML]=\"item.data.text\"></h4>\r\n <h5 *ngIf=\"item.data.level==5\" [innerHTML]=\"item.data.text\"></h5>\r\n <h6 *ngIf=\"item.data.level==6\" [innerHTML]=\"item.data.text\"></h6>\r\n </div>\r\n <div *ngIf=\"item.type=='paragraph'\">\r\n <p class=\"inner-text\" [innerHTML]=\"item.data.text\"></p>\r\n </div>\r\n <div *ngIf=\"item.type=='list'\">\r\n <div *ngIf=\"item.type=='list'\">\r\n <div *ngIf=\"item.data.style=='ordered'\">\r\n <ol class=\"list-style\">\r\n <ng-container *ngFor=\"let list of item.data.items\">\r\n <li>{{ list }}</li>\r\n </ng-container>\r\n </ol>\r\n </div>\r\n <div *ngIf=\"item.data.style=='unordered'\">\r\n <ul class=\"list-style\">\r\n <ng-container *ngFor=\"let list of item.data.items\">\r\n <li>{{ list }}</li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"item.type=='delimiter'\" class=\"ce-delimiter\">\r\n </div>\r\n <div *ngIf=\"item.type=='image'\" class=\"image-container\">\r\n <img loading=\"lazy\" [src]=\"item.data.file.url\" alt=\"\" loading=\"lazy\">\r\n </div>\r\n <div *ngIf=\"item.type=='table'\">\r\n\r\n <table>\r\n <ng-container *ngFor=\"let data of item.data.content\">\r\n <tr>\r\n <ng-container *ngFor=\"let item of data\">\r\n <td>{{ item }}</td>\r\n </ng-container>\r\n </tr>\r\n </ng-container>\r\n </table>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</section>\r\n", styles: [".main-section{padding:5%;background-color:#fff}.blog-details{width:60%;margin:0 auto;font-family:jakartaMedium}.delimiter{display:flex;justify-content:center}.ce-delimiter:before{display:inline-block;content:\"***\";font-size:30px;line-height:65px;height:30px;letter-spacing:.2em}p{line-height:1.6em}.back-text{@include body16r();margin-left:9px;margin-top:1px;cursor:pointer}table{border-collapse:collapse;width:100%}th,td{border:1px solid black;text-align:center}.header{margin-top:8px;margin-bottom:14px;padding-left:20px}.header img,.configuration-tab img{cursor:pointer}.blogs-totalsection{background:#eee;position:absolute;top:55px;height:calc(100vh - 55px);width:81.7%;z-index:10;overflow-y:scroll;padding:14px}.blog-title{line-height:35px}.image-container{width:100%;margin:10px 0}.image-container img{width:100%;height:350px}h1,h2,h3,h4,h5,h6{padding:.6em 0 3px}.h1,.h2,.h3,h1,h2,h3{margin-top:0}.list-style{list-style-position:unset}.list-style li{text-align:left}@media only screen and (max-width :500px){.blog-details{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
11773
11834
|
}
|
|
11774
11835
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ViewBlogComponent, decorators: [{
|
|
11775
11836
|
type: Component,
|
|
11776
|
-
args: [{ selector: 'simpo-view-blog', standalone: true, imports: [CommonModule], template: "<section class=\"main-section\">\r\n <div class=\"blog-details\">\r\n <h1 class=\"blog-title\">{{responseData.postTitle}}</h1
|
|
11837
|
+
args: [{ selector: 'simpo-view-blog', standalone: true, imports: [CommonModule], template: "<section class=\"main-section\">\r\n <div class=\"blog-details\">\r\n <!-- <h1 class=\"blog-title\">{{responseData.postTitle}}</h1> -->\r\n <div style=\"margin-top: 20px;\">\r\n <ng-container *ngFor=\"let item of responseData?.blocks\">\r\n <div *ngIf=\"item.type=='header'\">\r\n <h1 *ngIf=\"item.data.level==1\" [innerHTML]=\"item.data.text\"></h1>\r\n <h2 *ngIf=\"item.data.level==2\" [innerHTML]=\"item.data.text\"></h2>\r\n <h3 *ngIf=\"item.data.level==3\" [innerHTML]=\"item.data.text\"></h3>\r\n <h4 *ngIf=\"item.data.level==4\" [innerHTML]=\"item.data.text\"></h4>\r\n <h5 *ngIf=\"item.data.level==5\" [innerHTML]=\"item.data.text\"></h5>\r\n <h6 *ngIf=\"item.data.level==6\" [innerHTML]=\"item.data.text\"></h6>\r\n </div>\r\n <div *ngIf=\"item.type=='paragraph'\">\r\n <p class=\"inner-text\" [innerHTML]=\"item.data.text\"></p>\r\n </div>\r\n <div *ngIf=\"item.type=='list'\">\r\n <div *ngIf=\"item.type=='list'\">\r\n <div *ngIf=\"item.data.style=='ordered'\">\r\n <ol class=\"list-style\">\r\n <ng-container *ngFor=\"let list of item.data.items\">\r\n <li>{{ list }}</li>\r\n </ng-container>\r\n </ol>\r\n </div>\r\n <div *ngIf=\"item.data.style=='unordered'\">\r\n <ul class=\"list-style\">\r\n <ng-container *ngFor=\"let list of item.data.items\">\r\n <li>{{ list }}</li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"item.type=='delimiter'\" class=\"ce-delimiter\">\r\n </div>\r\n <div *ngIf=\"item.type=='image'\" class=\"image-container\">\r\n <img loading=\"lazy\" [src]=\"item.data.file.url\" alt=\"\" loading=\"lazy\">\r\n </div>\r\n <div *ngIf=\"item.type=='table'\">\r\n\r\n <table>\r\n <ng-container *ngFor=\"let data of item.data.content\">\r\n <tr>\r\n <ng-container *ngFor=\"let item of data\">\r\n <td>{{ item }}</td>\r\n </ng-container>\r\n </tr>\r\n </ng-container>\r\n </table>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</section>\r\n", styles: [".main-section{padding:5%;background-color:#fff}.blog-details{width:60%;margin:0 auto;font-family:jakartaMedium}.delimiter{display:flex;justify-content:center}.ce-delimiter:before{display:inline-block;content:\"***\";font-size:30px;line-height:65px;height:30px;letter-spacing:.2em}p{line-height:1.6em}.back-text{@include body16r();margin-left:9px;margin-top:1px;cursor:pointer}table{border-collapse:collapse;width:100%}th,td{border:1px solid black;text-align:center}.header{margin-top:8px;margin-bottom:14px;padding-left:20px}.header img,.configuration-tab img{cursor:pointer}.blogs-totalsection{background:#eee;position:absolute;top:55px;height:calc(100vh - 55px);width:81.7%;z-index:10;overflow-y:scroll;padding:14px}.blog-title{line-height:35px}.image-container{width:100%;margin:10px 0}.image-container img{width:100%;height:350px}h1,h2,h3,h4,h5,h6{padding:.6em 0 3px}.h1,.h2,.h3,h1,h2,h3{margin-top:0}.list-style{list-style-position:unset}.list-style li{text-align:left}@media only screen and (max-width :500px){.blog-details{width:100%}}\n"] }]
|
|
11777
11838
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { responseData: [{
|
|
11778
11839
|
type: Input
|
|
11779
11840
|
}] } });
|
|
@@ -13124,7 +13185,7 @@ class AppointmentBookingComponent {
|
|
|
13124
13185
|
this.router.navigate(['/admin/appointments/list-appointments']);
|
|
13125
13186
|
}
|
|
13126
13187
|
else {
|
|
13127
|
-
this.router.navigate(['
|
|
13188
|
+
this.router.navigate(['']);
|
|
13128
13189
|
}
|
|
13129
13190
|
}
|
|
13130
13191
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppointmentBookingComponent, deps: [{ token: RestService }, { token: EventsService }, { token: i2$2.Router }, { token: i6$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -15614,7 +15675,7 @@ class HeaderSectionComponent {
|
|
|
15614
15675
|
});
|
|
15615
15676
|
}
|
|
15616
15677
|
goToStores() {
|
|
15617
|
-
this.router.navigate(['/
|
|
15678
|
+
this.router.navigate(['/store-list']);
|
|
15618
15679
|
}
|
|
15619
15680
|
applyFilterToList(obj, type) {
|
|
15620
15681
|
if (type == 'price') {
|
|
@@ -15657,7 +15718,7 @@ class HeaderSectionComponent {
|
|
|
15657
15718
|
this.router.navigate(['/login']);
|
|
15658
15719
|
}
|
|
15659
15720
|
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$1.MatDialog }, { token: StorageServiceService }, { token: RestService }, { token: EventsService }, { token: LOCAL_STORAGE }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15660
|
-
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:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\r\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n [class.margin-bottom]=\"isHeaderSticky && isMobile && !isEcommerceWebsite\">\r\n <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\r\n simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\r\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\r\n <ng-container *ngIf=\"style?.headline?.display\">\r\n <div>\r\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">search</mat-icon>\r\n </div> -->\r\n <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\r\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\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>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\r\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n <div class=\"header1\">\r\n <div [class.w-5]=\"content?.logo?.isImage\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 94 : ''\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n <div class=\"header1\">\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"text-end\" [class.w-5]=\"content?.logo?.isImage\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n <div class=\"header1\">\r\n <div [class.w-5]=\"content?.logo?.isImage\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n <div class=\"header1\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container> </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"text-end\" [class.w-5]=\"content?.logo?.isImage\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer mx-1\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\r\n (click)=\"!edit ? 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\"\r\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n <div class=\"d-flex gap-3\"\r\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\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 category-btn\" type=\"button\"\r\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | lowercase | titlecase}}\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])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n\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\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\r\n (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\" [style.borderColor]=\"backgroundInfo?.accentColor\">\r\n <mat-icon>person_outline</mat-icon>\r\n Login\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn && !isMobile\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\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 #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n </div> -->\r\n <div class=\"w-75 d-flex align-items-center\">\r\n <div class=\"input-group w-75 ml-2\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\r\n [style.color]=\"backgroundInfo?.accentColor\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : backgroundInfo.background?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n height=\"30\" version=\"1.1\">\r\n <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\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\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\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\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\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\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\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\"\r\n [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\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\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n </g>\r\n </svg>\r\n <div [style.color]=\"accentColor\">Schemes</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\">\r\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\r\n Pincode\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\r\n getPincode}}</div>\r\n\r\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your PIN Code unlocks\r\n </div>\r\n <div class=\"sub-text text-center f-14 pincode-text\">\r\n Fastest delivery date, Try-at-Home availability,\r\n Nearest store and In-store design!\r\n </div>\r\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n [class.error-border]=\"pinError\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n class=\"w-75 p-0\">\r\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n </div>\r\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n Please enter a valid pincode\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n </div>\r\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n {{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\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\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\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\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\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\"\r\n stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n </div>\r\n <!-- (mouseleave)=\"showLogin = false\" -->\r\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your Account\r\n </div>\r\n <div class=\"sub-text text-center f-14\">\r\n Access account & manage your orders.\r\n </div>\r\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">Sign Up</div>\r\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n <!-- <div> -->\r\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\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;\"\r\n [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 [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [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\" id=\"link\"\r\n 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])\"\r\n (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<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n <div class=\"offcanvas-header\">\r\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\r\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n </div>\r\n <div class=\"offcanvas-body\">\r\n <div class=\"pages\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"offcanvas-footer\">\r\n <div class=\"canvas-button\">\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 py-1\"\r\n (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n\r\n\r\n <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\">\r\n\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\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 [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\r\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\r\n {{ele?.categoryName | titlecase}}\r\n </div>\r\n <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\r\n *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n [simpoColor]=\"data?.styles?.headline?.color\">\r\n Collections\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showList = false\" -->\r\n <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\r\n <div class=\"row w-100 h-100\">\r\n <div class=\"col-7 row\">\r\n <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n <div class=\"list-header mb-3\">By Price</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n <div class=\"each-price cursor-pointer\"\r\n (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n {{price | titlecase}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-4 h-100 overflow-scroll\"\r\n *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\r\n <div class=\"list-header mb-3\">By Style</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\r\n |\r\n titlecase}}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"list-header mb-3\">By Metal & Stone</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let collection of byMetalAndStone\">\r\n <div class=\"d-flex gap-2 align-items-center\">\r\n <div style=\"width: 15px;height: 20px;\">\r\n <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\r\n </div>\r\n <div class=\"each-price cursor-pointer\">{{collection.name\r\n |\r\n titlecase}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n <ng-container *ngFor=\"let image of selectedCategory?.imageUrls | slice:0:2; let i = index\">\r\n <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showCollections = false\" -->\r\n <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\r\n <div class=\"row w-100 h-100\">\r\n <div class=\"col-7 row\">\r\n <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n <div class=\"collection row col-3 align-items-center\"\r\n (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n <div class=\"col-imag col-4\">\r\n <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n </div>\r\n <div class=\"col-8 text-overflow\">\r\n {{collection?.collectionName | titlecase}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\r\n <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\r\n <div class=\"image-container h-100 col-6 position-relative\" *ngIf=\"image\"\r\n (click)=\"applyFilterToList(image, 'collections')\">\r\n <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\r\n <div class=\"text-center p-2 btm-col-name position-absolute\"\r\n [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileCategoryHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n <div class=\"cat-img d-flex justify-content-center align-items-center\">\r\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n </div>\r\n <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.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{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.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}.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}}.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:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.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:50vh;position:absolute;width:100%;z-index:1001}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.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:8px}.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:130%;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:-15px;top:130%;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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { 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"] }, { 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"] }] }); }
|
|
15721
|
+
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:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\r\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n [class.margin-bottom]=\"isHeaderSticky && isMobile && !isEcommerceWebsite\">\r\n <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\r\n simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\r\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\r\n <ng-container *ngIf=\"style?.headline?.display\">\r\n <div>\r\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">search</mat-icon>\r\n </div> -->\r\n <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\r\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\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>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\r\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n <div class=\"header1\">\r\n <div [class.w-5]=\"content?.logo?.isImage\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 94 : ''\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n <div class=\"header1\">\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"text-end\" [class.w-5]=\"content?.logo?.isImage\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n <div class=\"header1\">\r\n <div [class.w-5]=\"content?.logo?.isImage\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n <div class=\"header1\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container> </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"text-end\" [class.w-5]=\"content?.logo?.isImage\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer mx-1\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\r\n (click)=\"!edit ? 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\"\r\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n <div class=\"d-flex gap-3\"\r\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\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 category-btn\" type=\"button\"\r\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | lowercase | titlecase}}\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])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n\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\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\r\n (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\" [style.borderColor]=\"backgroundInfo?.accentColor\">\r\n <mat-icon>person_outline</mat-icon>\r\n Login\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn && !isMobile\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\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 #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n </div> -->\r\n <div class=\"w-75 d-flex align-items-center\">\r\n <div class=\"input-group w-75 ml-2\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\r\n [style.color]=\"backgroundInfo?.accentColor\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : backgroundInfo.background?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n height=\"30\" version=\"1.1\">\r\n <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\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\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\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\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\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\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\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\"\r\n [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\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\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n </g>\r\n </svg>\r\n <div [style.color]=\"accentColor\">Schemes</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\">\r\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\r\n Pincode\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\r\n getPincode}}</div>\r\n\r\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your PIN Code unlocks\r\n </div>\r\n <div class=\"sub-text text-center f-14 pincode-text\">\r\n Fastest delivery date, Try-at-Home availability,\r\n Nearest store and In-store design!\r\n </div>\r\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n [class.error-border]=\"pinError\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n class=\"w-75 p-0\">\r\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n </div>\r\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n Please enter a valid pincode\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n </div>\r\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n {{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\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\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\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\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\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\"\r\n stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n </div>\r\n <!-- (mouseleave)=\"showLogin = false\" -->\r\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your Account\r\n </div>\r\n <div class=\"sub-text text-center f-14\">\r\n Access account & manage your orders.\r\n </div>\r\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">Sign Up</div>\r\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n <!-- <div> -->\r\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\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;\"\r\n [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 [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [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\" id=\"link\"\r\n 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])\"\r\n (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<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n <div class=\"offcanvas-header\">\r\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\r\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n </div>\r\n <div class=\"offcanvas-body\">\r\n <div class=\"pages\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"offcanvas-footer\">\r\n <div class=\"canvas-button\">\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 py-1\"\r\n (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n\r\n\r\n <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\">\r\n\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\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 [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\r\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\r\n {{ele?.categoryName | titlecase}}\r\n </div>\r\n <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\r\n *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n [simpoColor]=\"data?.styles?.headline?.color\">\r\n Collections\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showList = false\" -->\r\n <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\r\n <div class=\"row w-100 h-100\">\r\n <div class=\"col-7 row\">\r\n <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n <div class=\"list-header mb-3\">By Price</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n <div class=\"each-price cursor-pointer\"\r\n (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n {{price | titlecase}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-4 h-100 overflow-scroll\"\r\n *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\r\n <div class=\"list-header mb-3\">By Style</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\r\n |\r\n titlecase}}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"list-header mb-3\">By Metal & Stone</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let collection of byMetalAndStone\">\r\n <div class=\"d-flex gap-2 align-items-center\">\r\n <div style=\"width: 15px;height: 20px;\">\r\n <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\r\n </div>\r\n <div class=\"each-price cursor-pointer\">{{collection.name\r\n |\r\n titlecase}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n <ng-container *ngFor=\"let image of selectedCategory?.imageUrls | slice:0:2; let i = index\">\r\n <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showCollections = false\" -->\r\n <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\" >\r\n <div class=\"row w-100\">\r\n <div class=\"col-7 row h-100 overflow-scroll\">\r\n <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n <div class=\"collection row col-3 align-items-center mb-3\"\r\n (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n <div class=\"col-imag col-4\">\r\n <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n </div>\r\n <div class=\"col-8 text-overflow\">\r\n {{collection?.collectionName | titlecase}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-5 row\" *ngIf=\"collectionList?.imageUrls\">\r\n <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\r\n <div class=\"image-container col-6 position-relative h-45\" *ngIf=\"image\"\r\n (click)=\"applyFilterToList(image, 'collections')\">\r\n <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\r\n <div class=\"text-center p-2 btm-col-name position-absolute\"\r\n [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileCategoryHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n <div class=\"cat-img d-flex justify-content-center align-items-center\">\r\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n </div>\r\n <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.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{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.w-5{width:100%!important}.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.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}.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}}.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:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.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:50vh;position:absolute;width:100%;z-index:1001}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.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:130%;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:-15px;top:130%;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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { 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"] }, { 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"] }] }); }
|
|
15661
15722
|
}
|
|
15662
15723
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, decorators: [{
|
|
15663
15724
|
type: Component,
|
|
@@ -15681,7 +15742,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
15681
15742
|
SpacingHorizontalDirective,
|
|
15682
15743
|
MovingTextComponent,
|
|
15683
15744
|
ContentFitDirective,
|
|
15684
|
-
], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\r\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n [class.margin-bottom]=\"isHeaderSticky && isMobile && !isEcommerceWebsite\">\r\n <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\r\n simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\r\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\r\n <ng-container *ngIf=\"style?.headline?.display\">\r\n <div>\r\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">search</mat-icon>\r\n </div> -->\r\n <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\r\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\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>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\r\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n <div class=\"header1\">\r\n <div [class.w-5]=\"content?.logo?.isImage\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 94 : ''\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n <div class=\"header1\">\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"text-end\" [class.w-5]=\"content?.logo?.isImage\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n <div class=\"header1\">\r\n <div [class.w-5]=\"content?.logo?.isImage\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n <div class=\"header1\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container> </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"text-end\" [class.w-5]=\"content?.logo?.isImage\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer mx-1\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\r\n (click)=\"!edit ? 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\"\r\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n <div class=\"d-flex gap-3\"\r\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\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 category-btn\" type=\"button\"\r\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | lowercase | titlecase}}\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])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n\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\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\r\n (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\" [style.borderColor]=\"backgroundInfo?.accentColor\">\r\n <mat-icon>person_outline</mat-icon>\r\n Login\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn && !isMobile\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\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 #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n </div> -->\r\n <div class=\"w-75 d-flex align-items-center\">\r\n <div class=\"input-group w-75 ml-2\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\r\n [style.color]=\"backgroundInfo?.accentColor\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : backgroundInfo.background?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n height=\"30\" version=\"1.1\">\r\n <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\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\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\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\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\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\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\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\"\r\n [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\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\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n </g>\r\n </svg>\r\n <div [style.color]=\"accentColor\">Schemes</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\">\r\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\r\n Pincode\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\r\n getPincode}}</div>\r\n\r\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your PIN Code unlocks\r\n </div>\r\n <div class=\"sub-text text-center f-14 pincode-text\">\r\n Fastest delivery date, Try-at-Home availability,\r\n Nearest store and In-store design!\r\n </div>\r\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n [class.error-border]=\"pinError\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n class=\"w-75 p-0\">\r\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n </div>\r\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n Please enter a valid pincode\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n </div>\r\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n {{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\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\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\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\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\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\"\r\n stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n </div>\r\n <!-- (mouseleave)=\"showLogin = false\" -->\r\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your Account\r\n </div>\r\n <div class=\"sub-text text-center f-14\">\r\n Access account & manage your orders.\r\n </div>\r\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">Sign Up</div>\r\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n <!-- <div> -->\r\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\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;\"\r\n [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 [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [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\" id=\"link\"\r\n 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])\"\r\n (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<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n <div class=\"offcanvas-header\">\r\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\r\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n </div>\r\n <div class=\"offcanvas-body\">\r\n <div class=\"pages\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"offcanvas-footer\">\r\n <div class=\"canvas-button\">\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 py-1\"\r\n (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n\r\n\r\n <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\">\r\n\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\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 [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\r\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\r\n {{ele?.categoryName | titlecase}}\r\n </div>\r\n <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\r\n *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n [simpoColor]=\"data?.styles?.headline?.color\">\r\n Collections\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showList = false\" -->\r\n <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\r\n <div class=\"row w-100 h-100\">\r\n <div class=\"col-7 row\">\r\n <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n <div class=\"list-header mb-3\">By Price</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n <div class=\"each-price cursor-pointer\"\r\n (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n {{price | titlecase}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-4 h-100 overflow-scroll\"\r\n *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\r\n <div class=\"list-header mb-3\">By Style</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\r\n |\r\n titlecase}}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"list-header mb-3\">By Metal & Stone</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let collection of byMetalAndStone\">\r\n <div class=\"d-flex gap-2 align-items-center\">\r\n <div style=\"width: 15px;height: 20px;\">\r\n <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\r\n </div>\r\n <div class=\"each-price cursor-pointer\">{{collection.name\r\n |\r\n titlecase}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n <ng-container *ngFor=\"let image of selectedCategory?.imageUrls | slice:0:2; let i = index\">\r\n <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showCollections = false\" -->\r\n <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\r\n <div class=\"row w-100 h-100\">\r\n <div class=\"col-7 row\">\r\n <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n <div class=\"collection row col-3 align-items-center\"\r\n (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n <div class=\"col-imag col-4\">\r\n <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n </div>\r\n <div class=\"col-8 text-overflow\">\r\n {{collection?.collectionName | titlecase}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\r\n <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\r\n <div class=\"image-container h-100 col-6 position-relative\" *ngIf=\"image\"\r\n (click)=\"applyFilterToList(image, 'collections')\">\r\n <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\r\n <div class=\"text-center p-2 btm-col-name position-absolute\"\r\n [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileCategoryHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n <div class=\"cat-img d-flex justify-content-center align-items-center\">\r\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n </div>\r\n <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.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{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.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}.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}}.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:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.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:50vh;position:absolute;width:100%;z-index:1001}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.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:8px}.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:130%;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:-15px;top:130%;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}\n"] }]
|
|
15745
|
+
], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\r\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n [class.margin-bottom]=\"isHeaderSticky && isMobile && !isEcommerceWebsite\">\r\n <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\r\n simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\r\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\r\n <ng-container *ngIf=\"style?.headline?.display\">\r\n <div>\r\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">search</mat-icon>\r\n </div> -->\r\n <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\r\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\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>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\r\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n <div class=\"header1\">\r\n <div [class.w-5]=\"content?.logo?.isImage\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 94 : ''\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n <div class=\"header1\">\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"text-end\" [class.w-5]=\"content?.logo?.isImage\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n <div class=\"header1\">\r\n <div [class.w-5]=\"content?.logo?.isImage\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n <div class=\"header1\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container> </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"text-end\" [class.w-5]=\"content?.logo?.isImage\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer mx-1\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\r\n (click)=\"!edit ? 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\"\r\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n <div class=\"d-flex gap-3\"\r\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\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 category-btn\" type=\"button\"\r\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | lowercase | titlecase}}\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])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n\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\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\r\n (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\" [style.borderColor]=\"backgroundInfo?.accentColor\">\r\n <mat-icon>person_outline</mat-icon>\r\n Login\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn && !isMobile\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\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 #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n </div> -->\r\n <div class=\"w-75 d-flex align-items-center\">\r\n <div class=\"input-group w-75 ml-2\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\r\n [style.color]=\"backgroundInfo?.accentColor\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : backgroundInfo.background?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n height=\"30\" version=\"1.1\">\r\n <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\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\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\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\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\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\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\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\"\r\n [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\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\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n </g>\r\n </svg>\r\n <div [style.color]=\"accentColor\">Schemes</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\">\r\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\r\n Pincode\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\r\n getPincode}}</div>\r\n\r\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your PIN Code unlocks\r\n </div>\r\n <div class=\"sub-text text-center f-14 pincode-text\">\r\n Fastest delivery date, Try-at-Home availability,\r\n Nearest store and In-store design!\r\n </div>\r\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n [class.error-border]=\"pinError\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n class=\"w-75 p-0\">\r\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n </div>\r\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n Please enter a valid pincode\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n </div>\r\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n {{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\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\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\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\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\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\"\r\n stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n </div>\r\n <!-- (mouseleave)=\"showLogin = false\" -->\r\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your Account\r\n </div>\r\n <div class=\"sub-text text-center f-14\">\r\n Access account & manage your orders.\r\n </div>\r\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">Sign Up</div>\r\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n <!-- <div> -->\r\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\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;\"\r\n [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 [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [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\" id=\"link\"\r\n 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])\"\r\n (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<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n <div class=\"offcanvas-header\">\r\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\r\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n </div>\r\n <div class=\"offcanvas-body\">\r\n <div class=\"pages\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"offcanvas-footer\">\r\n <div class=\"canvas-button\">\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 py-1\"\r\n (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n\r\n\r\n <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\">\r\n\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\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 [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\r\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\r\n {{ele?.categoryName | titlecase}}\r\n </div>\r\n <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\r\n *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n [simpoColor]=\"data?.styles?.headline?.color\">\r\n Collections\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showList = false\" -->\r\n <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\r\n <div class=\"row w-100 h-100\">\r\n <div class=\"col-7 row\">\r\n <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n <div class=\"list-header mb-3\">By Price</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n <div class=\"each-price cursor-pointer\"\r\n (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n {{price | titlecase}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-4 h-100 overflow-scroll\"\r\n *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\r\n <div class=\"list-header mb-3\">By Style</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\r\n |\r\n titlecase}}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"list-header mb-3\">By Metal & Stone</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let collection of byMetalAndStone\">\r\n <div class=\"d-flex gap-2 align-items-center\">\r\n <div style=\"width: 15px;height: 20px;\">\r\n <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\r\n </div>\r\n <div class=\"each-price cursor-pointer\">{{collection.name\r\n |\r\n titlecase}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n <ng-container *ngFor=\"let image of selectedCategory?.imageUrls | slice:0:2; let i = index\">\r\n <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showCollections = false\" -->\r\n <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\" >\r\n <div class=\"row w-100\">\r\n <div class=\"col-7 row h-100 overflow-scroll\">\r\n <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n <div class=\"collection row col-3 align-items-center mb-3\"\r\n (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n <div class=\"col-imag col-4\">\r\n <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n </div>\r\n <div class=\"col-8 text-overflow\">\r\n {{collection?.collectionName | titlecase}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-5 row\" *ngIf=\"collectionList?.imageUrls\">\r\n <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\r\n <div class=\"image-container col-6 position-relative h-45\" *ngIf=\"image\"\r\n (click)=\"applyFilterToList(image, 'collections')\">\r\n <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\r\n <div class=\"text-center p-2 btm-col-name position-absolute\"\r\n [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileCategoryHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n <div class=\"cat-img d-flex justify-content-center align-items-center\">\r\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n </div>\r\n <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.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{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.w-5{width:100%!important}.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.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}.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}}.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:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.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:50vh;position:absolute;width:100%;z-index:1001}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.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:130%;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:-15px;top:130%;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}\n"] }]
|
|
15685
15746
|
}], ctorParameters: () => [{ type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i1$1.MatDialog }, { type: StorageServiceService }, { type: RestService }, { type: EventsService }, { type: undefined, decorators: [{
|
|
15686
15747
|
type: Inject,
|
|
15687
15748
|
args: [LOCAL_STORAGE]
|
|
@@ -21876,6 +21937,9 @@ class StoreListComponent extends BaseSection {
|
|
|
21876
21937
|
this.storePayload.pincode = this.pincode;
|
|
21877
21938
|
this.getStoreDetails();
|
|
21878
21939
|
}
|
|
21940
|
+
get stylesLayout() {
|
|
21941
|
+
return { ...this.styles?.layout };
|
|
21942
|
+
}
|
|
21879
21943
|
getStoreDetails() {
|
|
21880
21944
|
this.submit = true;
|
|
21881
21945
|
this.loader = true;
|
|
@@ -21943,7 +22007,7 @@ class StoreListComponent extends BaseSection {
|
|
|
21943
22007
|
return `rgba(${r}, ${g}, ${b}, ${opacity / 100})`;
|
|
21944
22008
|
}
|
|
21945
22009
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StoreListComponent, deps: [{ token: RestService }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
21946
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StoreListComponent, isStandalone: true, selector: "simpo-store-list", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index" }, usesInheritance: true, ngImport: i0, template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div class=\"top-section w-100 d-flex align-items-center justify-content-center text-center flex-column\"\r\n [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <ng-container *ngIf=\"!loader\">\r\n <div class=\"store-header mb-3\">\r\n {{ submit && showMessage == true && pincode && pincode?.toString()?.length == 6 ? \"Stores in \" +\r\n pincode :\r\n \"Find a Store Near You\"}}\r\n </div>\r\n <div class=\"sub-text\">\r\n {{ submit && showMessage == true && pincode && pincode?.toString()?.length == 6 ? 'We have ' +\r\n totalCount\r\n + ' stores in this locality, scroll down to view the stores\r\n and browse the designs available.' : 'Locate a store near you \u2014 our presence is expanding every day,\r\n and\r\n we look forward to serving you.' }}\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"loader\">\r\n <div class=\"sub-text\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '35%',\r\n height: '3vh',\r\n 'border-radius': '12px',\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"sub-text w-75\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '35%',\r\n height: '2vh',\r\n 'border-radius': '12px',\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </ng-container>\r\n <div class=\"location-container d-flex align-items-center justify-content-between w-25\"\r\n [class.error-border]=\"error\">\r\n <div class=\"d-flex align-items-center w-90\">\r\n <div class=\"d-flex mx-1\"><mat-icon class=\"d-flex align-items-center justify-content-center f-20\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" placeholder=\"Pin Code\" [(ngModel)]=\"pincode\" class=\"w-90\"\r\n [style.backgroundColor]=\"data?.styles?.background?.color\"\r\n [style.color]=\"getTextColor(data?.styles?.background?.color)\"\r\n (ngModelChange)=\"pincode.toString().length != 6 ? submit = false : error = false;\" />\r\n </div>\r\n <div (click)=\"getDataWithPincode()\" class=\"f-13 cursor-pointer\">Submit</div>\r\n </div>\r\n <span class=\"f-12 w-25 text-start mt-2\" *ngIf=\"error\" [style.color]=\"'#dc3545'\">Invalid Pincode\r\n (Ex:500088)</span>\r\n </div>\r\n <div class=\"bottom-container row mx-auto mt-3\">\r\n <div class=\"state-container row gap-3 justify-content-center mb-5\" *ngIf=\"showState && !pincode\">\r\n <ng-container *ngFor=\"let state of stateList; let i = index\">\r\n <div class=\"state-card p-2 col-sm-6\" (click)=\"setStateData(state)\">\r\n <ng-container *ngIf=\"state?.stateImage; else noImage\">\r\n <img class=\"w-100 h-75\" [src]=\"state?.stateImage\">\r\n </ng-container>\r\n <ng-template #noImage>\r\n <img class=\"w-100 h-75\"\r\n src=\"https://cdn.caratlane.com/media/static/images/Find_In_Store/city_5.svg\">\r\n </ng-template>\r\n <div class=\"text-center mt-2 state-name\">{{state?.stateName}}</div>\r\n <div class=\"store-count text-center mb-3 mt-1\">{{state?.storeCount + \" stores\"}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"w-100 d-flex align-items-center justify-content-center mb-3\"\r\n *ngIf=\"submit && showMessage == false && pincode && pincode.toString().length ==6 && !loader\">\r\n <div class=\"text-center not-available-text\">We are not available in this location currently</div>\r\n </div>\r\n <ng-container *ngIf=\"loader\">\r\n <div class=\"sub-text w-100 text-center\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '35%',\r\n height: '6vh',\r\n 'border-radius': '12px',\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </ng-container>\r\n <div class=\"bottom-sub-text d-flex align-items-center justify-content-center mb-3 w-100 f-20 fw-bold\"> {{\r\n submit &&\r\n showMessage == true && pincode ? \"Showing \" + totalCount + \" Stores in \" + pincode :\r\n \"Showing All Stores\"}}</div>\r\n <ng-container *ngIf=\"!loader;else loaderScreen\">\r\n <div class=\"row d-flex\">\r\n <div class=\"col-4 p-2 store d-flex flex-column \" style=\"border-radius: 12px; border: none;\"\r\n *ngFor=\"let ele of storesList; let i = index\">\r\n <div class=\"card-body position-relative d-flex flex-column h-100\">\r\n <!-- Content -->\r\n <div class=\"h-100 p-3 pb-0\">\r\n <div class=\"d-flex justify-content-between align-items-start mb-2\">\r\n <div class=\"d-flex flex-column mb-2 bb-1 w-100 pb-2\">\r\n <h6 class=\"card-title fw-bold mb-1 w-100\">{{ele?.storeName}}</h6>\r\n <div class=\"f-11\">\r\n \u2B504.{{ele?.star}} • {{ele?.reviewCount}} Google Reviews\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mb-2 f-11\">\r\n <p class=\"mb-1 text-dark fw-medium\">{{ele?.addressDetails?.addressLine}},</p>\r\n <p class=\"mb-1 text-dark fw-medium\">\r\n {{ele?.addressDetails?.city}},\r\n {{ele?.addressDetails?.state}},{{ele?.addressDetails?.pincode}},\r\n </p>\r\n <p class=\"mb-0 fw-bold\">Phone-\r\n <span\r\n [style.color]=\"data?.styles?.background?.accentColor\">{{ele?.storeContactDetails?.mobile}}</span>\r\n </p>\r\n </div>\r\n <div class=\"mb-2 f-11\">\r\n <p class=\"mb-0 fw-bold\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n STORE HOURS -\r\n {{getTime(ele?.storeHours,'OPEN')}} to {{getTime(ele?.storeHours,'CLOSE')}}\r\n </p>\r\n </div>\r\n </div>\r\n <!-- Fixed bottom buttons -->\r\n <div class=\"d-flex gap-3 align-items-center justify-content-between p-3 w-100 br-20\" [style.backgroundColor]=\"getRGBA(styles?.background?.accentColor,10)\">\r\n <div class=\"br-12 d-flex align-items-center justify-content-center\"\r\n style=\"width: 30px; height: 30px;\" (click)=\"openWhatsapp(ele?.storeContactDetails?.mobile)\"\r\n [style.backgroundColor]=\"data?.styles?.background?.accentColor\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" style=\"height: 20px;cursor: pointer;\">\r\n <path [attr.fill]=\"getTextColor(data?.styles?.background?.accentColor)\"\r\n d=\"M380.9 97.1c-41.9-42-97.7-65.1-157-65.1-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480 117.7 449.1c32.4 17.7 68.9 27 106.1 27l.1 0c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3 18.6-68.1-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1s56.2 81.2 56.1 130.5c0 101.8-84.9 184.6-186.6 184.6zM325.1 300.5c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8s-14.3 18-17.6 21.8c-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7s-12.5-30.1-17.1-41.2c-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2s-9.7 1.4-14.8 6.9c-5.1 5.6-19.4 19-19.4 46.3s19.9 53.7 22.6 57.4c2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4s4.6-24.1 3.2-26.4c-1.3-2.5-5-3.9-10.5-6.6z\" />\r\n </svg>\r\n </div>\r\n <button class=\"btn w-50\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n [buttonId]=\"button?.id ?? ''\" (click)=\"viewStore(ele.id)\">\r\n {{button?.content?.label}}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n <ng-template #loaderScreen>\r\n <div class=\"row loader-container\">\r\n <ng-container *ngFor=\"let ele of [1,2,3,4,5,6]\">\r\n <ngx-skeleton-loader class=\"col-4 loader-column\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '12px',\r\n }\"></ngx-skeleton-loader>\r\n </ng-container>\r\n </div>\r\n </ng-template>\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\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: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.store-header{font-size:27px;font-weight:700}.sub-text{font-size:16px;width:35%;margin-bottom:15px}.location-container{border:1px solid;padding:8px;border-radius:12px;background:#fff}.location-container input{border:unset;appearance:unset;outline:unset;background:#fff;font-size:13px}.f-11{font-size:11px}.f-14{font-size:14px}.not-available-text{color:#ff5151;font-weight:600;border-radius:22px;text-align:center;padding:12px;background:#ff51511a;width:35%}.f-20{font-size:20px}.f-13{font-size:13px}.w-90{width:90%}.card-body{box-shadow:#0000000d 0 0 0 1px;border-radius:24px;height:100%}.card-bottom{POSITION:ABSOLUTE;width:90%;bottom:15px}.br-12{border-radius:12px}.btn{font-size:12px!important}.error-border{border:2px solid #dc3545!important}.f-12{font-size:12px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.bottom-container{width:80%}@media (max-width:475px){.sub-text{width:100%!important}.loader-container{flex-direction:column;padding-right:0!important}.loader-column,.not-available-text{width:100%!important}.location-container{width:55%!important}.bottom-container{flex-direction:column;margin:0!important;width:100%!important}.store{width:100%!important}.state-container{margin:unset!important}.state-container .state-card{width:45%}}.main-container{padding-bottom:9%}.state-card{width:13%;box-shadow:#0000000d 0 0 0 1px;border-radius:20px;cursor:pointer}.state-card img{border-bottom:1px solid rgba(0,0,0,.05)}.state-card .state-name{font-size:14px;font-weight:600}.state-card .store-count{font-size:13px}.bb-1{border-bottom:2px solid rgba(0,0,0,.05)}.br-20{border-radius:0 0 20px 20px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: ReactiveFormsModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
|
|
22010
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StoreListComponent, isStandalone: true, selector: "simpo-store-list", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index" }, usesInheritance: true, ngImport: i0, template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div class=\"top-section w-100 d-flex align-items-center justify-content-center text-center flex-column\"\r\n [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"stylesLayout\">\r\n <ng-container *ngIf=\"!loader\">\r\n <div class=\"store-header mb-3\">\r\n {{ submit && showMessage == true && pincode && pincode?.toString()?.length == 6 ? \"Stores in \" +\r\n pincode :\r\n \"Find a Store Near You\"}}\r\n </div>\r\n <div class=\"sub-text\">\r\n {{ submit && showMessage == true && pincode && pincode?.toString()?.length == 6 ? 'We have ' +\r\n totalCount\r\n + ' stores in this locality, scroll down to view the stores\r\n and browse the designs available.' : 'Locate a store near you \u2014 our presence is expanding every day,\r\n and\r\n we look forward to serving you.' }}\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"loader\">\r\n <div class=\"sub-text\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '35%',\r\n height: '3vh',\r\n 'border-radius': '12px',\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"sub-text w-75\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '35%',\r\n height: '2vh',\r\n 'border-radius': '12px',\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </ng-container>\r\n <div class=\"location-container d-flex align-items-center justify-content-between w-25\"\r\n [class.error-border]=\"error\">\r\n <div class=\"d-flex align-items-center w-90\">\r\n <div class=\"d-flex mx-1\"><mat-icon class=\"d-flex align-items-center justify-content-center f-20\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" placeholder=\"Pin Code\" [(ngModel)]=\"pincode\" class=\"w-90\"\r\n [style.backgroundColor]=\"'#ffffff'\"\r\n (ngModelChange)=\"pincode.toString().length != 6 ? submit = false : error = false;\" />\r\n </div>\r\n <div (click)=\"getDataWithPincode()\" class=\"f-13 cursor-pointer\">Submit</div>\r\n </div>\r\n <span class=\"f-12 w-25 text-start mt-2\" *ngIf=\"error\" [style.color]=\"'#dc3545'\">Invalid Pincode\r\n (Ex:500088)</span>\r\n </div>\r\n <div class=\"bottom-container row mt-3 w-100\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n [id]=\"data?.id\">\r\n <div class=\"state-container row gap-3 justify-content-center mb-5\" *ngIf=\"showState && !pincode\">\r\n <ng-container *ngFor=\"let state of stateList; let i = index\">\r\n <div class=\"state-card p-2 col-sm-6\" (click)=\"setStateData(state)\">\r\n <ng-container *ngIf=\"state?.stateImage; else noImage\">\r\n <img class=\"w-100 h-75\" [src]=\"state?.stateImage\">\r\n </ng-container>\r\n <ng-template #noImage>\r\n <img class=\"w-100 h-75\"\r\n src=\"https://cdn.caratlane.com/media/static/images/Find_In_Store/city_5.svg\">\r\n </ng-template>\r\n <div class=\"text-center mt-2 state-name\">{{state?.stateName}}</div>\r\n <div class=\"store-count text-center mb-3 mt-1\">{{state?.storeCount + \" stores\"}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"w-100 d-flex align-items-center justify-content-center mb-3\"\r\n *ngIf=\"submit && showMessage == false && pincode && pincode.toString().length ==6 && !loader\">\r\n <div class=\"text-center not-available-text\">We are not available in this location currently</div>\r\n </div>\r\n <ng-container *ngIf=\"loader\">\r\n <div class=\"sub-text w-100 text-center\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '35%',\r\n height: '6vh',\r\n 'border-radius': '12px',\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </ng-container>\r\n <div class=\"bottom-sub-text d-flex align-items-center justify-content-center mb-3 w-100 f-20 fw-bold\"> {{\r\n submit &&\r\n showMessage == true && pincode ? \"Showing \" + totalCount + \" Stores in \" + pincode :\r\n \"Showing All Stores\"}}</div>\r\n <ng-container *ngIf=\"!loader;else loaderScreen\">\r\n <div class=\"row d-flex\">\r\n <div class=\"col-4 p-2 store d-flex flex-column\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n *ngFor=\"let ele of storesList; let i = index\">\r\n <div class=\"card-body position-relative d-flex flex-column h-100\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\">\r\n <!-- Content -->\r\n <div class=\"h-100 p-3 pb-0\">\r\n <div class=\"d-flex justify-content-between align-items-start mb-2\">\r\n <div class=\"d-flex flex-column mb-2 bb-1 w-100 pb-2\">\r\n <h6 class=\"card-title fw-bold mb-1 w-100\">{{ele?.storeName}}</h6>\r\n <div class=\"f-11\">\r\n \u2B504.{{ele?.star}} • {{ele?.reviewCount}} Google\r\n Reviews\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mb-2 f-11\">\r\n <p class=\"mb-1 text-dark fw-medium\">{{ele?.addressDetails?.addressLine}},</p>\r\n <p class=\"mb-1 text-dark fw-medium\">\r\n {{ele?.addressDetails?.city}},\r\n {{ele?.addressDetails?.state}},{{ele?.addressDetails?.pincode}},\r\n </p>\r\n <p class=\"mb-0 fw-bold\">Phone-\r\n <span\r\n [style.color]=\"data?.styles?.background?.accentColor\">{{ele?.storeContactDetails?.mobile}}</span>\r\n </p>\r\n </div>\r\n <div class=\"mb-2 f-11\">\r\n <p class=\"mb-0 fw-bold\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n STORE HOURS -\r\n {{getTime(ele?.storeHours,'OPEN')}} to {{getTime(ele?.storeHours,'CLOSE')}}\r\n </p>\r\n </div>\r\n </div>\r\n <!-- Fixed bottom buttons -->\r\n <div class=\"d-flex gap-3 align-items-center justify-content-between p-3 w-100 br-20\"\r\n [style.backgroundColor]=\"getRGBA(styles?.background?.accentColor,10)\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\">\r\n <div class=\"br-12 d-flex align-items-center justify-content-center\"\r\n style=\"width: 30px; height: 30px;\"\r\n (click)=\"openWhatsapp(ele?.storeContactDetails?.mobile)\"\r\n [style.backgroundColor]=\"data?.styles?.background?.accentColor\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"\r\n style=\"height: 20px;cursor: pointer;\">\r\n <path [attr.fill]=\"getTextColor(data?.styles?.background?.accentColor)\"\r\n d=\"M380.9 97.1c-41.9-42-97.7-65.1-157-65.1-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480 117.7 449.1c32.4 17.7 68.9 27 106.1 27l.1 0c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3 18.6-68.1-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1s56.2 81.2 56.1 130.5c0 101.8-84.9 184.6-186.6 184.6zM325.1 300.5c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8s-14.3 18-17.6 21.8c-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7s-12.5-30.1-17.1-41.2c-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2s-9.7 1.4-14.8 6.9c-5.1 5.6-19.4 19-19.4 46.3s19.9 53.7 22.6 57.4c2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4s4.6-24.1 3.2-26.4c-1.3-2.5-5-3.9-10.5-6.6z\" />\r\n </svg>\r\n </div>\r\n <button class=\"btn w-50\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n [buttonId]=\"button?.id ?? ''\" (click)=\"viewStore(ele.id)\">\r\n {{button?.content?.label}}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n <ng-template #loaderScreen>\r\n <div class=\"row loader-container\">\r\n <ng-container *ngFor=\"let ele of [1,2,3,4,5,6]\">\r\n <ngx-skeleton-loader class=\"col-4 loader-column\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '12px',\r\n }\"></ngx-skeleton-loader>\r\n </ng-container>\r\n </div>\r\n </ng-template>\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\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: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.store-header{font-size:27px;font-weight:700}.sub-text{font-size:16px;width:35%;margin-bottom:15px}.location-container{border:1px solid;padding:8px;border-radius:12px;background:#fff}.location-container input{border:unset;appearance:unset;outline:unset;background:#fff;font-size:13px}.f-11{font-size:11px}.f-14{font-size:14px}.not-available-text{color:#ff5151;font-weight:600;border-radius:22px;text-align:center;padding:12px;background:#ff51511a;width:35%}.f-20{font-size:20px}.f-13{font-size:13px}.w-90{width:90%}.card-body{box-shadow:#0000000d 0 0 0 1px;height:100%}.card-bottom{POSITION:ABSOLUTE;width:90%;bottom:15px}.br-12{border-radius:12px}.btn{font-size:12px!important}.error-border{border:2px solid #dc3545!important}.f-12{font-size:12px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}@media (max-width:475px){.sub-text{width:100%!important}.loader-container{flex-direction:column;padding-right:0!important}.loader-column,.not-available-text{width:100%!important}.location-container{width:55%!important}.bottom-container{flex-direction:column;margin:0!important;width:100%!important}.store{width:100%!important}.state-container{margin:unset!important}.state-container .state-card{width:45%}}.main-container{padding-bottom:9%}.state-card{width:13%;box-shadow:#0000000d 0 0 0 1px;border-radius:20px;cursor:pointer}.state-card img{border-bottom:1px solid rgba(0,0,0,.05)}.state-card .state-name{font-size:14px;font-weight:600}.state-card .store-count{font-size:13px}.bb-1{border-bottom:2px solid rgba(0,0,0,.05)}.br-20{border-top-left-radius:unset!important;border-top-right-radius:unset!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: ReactiveFormsModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }] }); }
|
|
21947
22011
|
}
|
|
21948
22012
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StoreListComponent, decorators: [{
|
|
21949
22013
|
type: Component,
|
|
@@ -21960,7 +22024,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
21960
22024
|
NgxSkeletonLoaderModule,
|
|
21961
22025
|
ButtonEditorDirective,
|
|
21962
22026
|
ColorDirective,
|
|
21963
|
-
], template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div class=\"top-section w-100 d-flex align-items-center justify-content-center text-center flex-column\"\r\n [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <ng-container *ngIf=\"!loader\">\r\n <div class=\"store-header mb-3\">\r\n {{ submit && showMessage == true && pincode && pincode?.toString()?.length == 6 ? \"Stores in \" +\r\n pincode :\r\n \"Find a Store Near You\"}}\r\n </div>\r\n <div class=\"sub-text\">\r\n {{ submit && showMessage == true && pincode && pincode?.toString()?.length == 6 ? 'We have ' +\r\n totalCount\r\n + ' stores in this locality, scroll down to view the stores\r\n and browse the designs available.' : 'Locate a store near you \u2014 our presence is expanding every day,\r\n and\r\n we look forward to serving you.' }}\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"loader\">\r\n <div class=\"sub-text\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '35%',\r\n height: '3vh',\r\n 'border-radius': '12px',\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"sub-text w-75\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '35%',\r\n height: '2vh',\r\n 'border-radius': '12px',\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </ng-container>\r\n <div class=\"location-container d-flex align-items-center justify-content-between w-25\"\r\n [class.error-border]=\"error\">\r\n <div class=\"d-flex align-items-center w-90\">\r\n <div class=\"d-flex mx-1\"><mat-icon class=\"d-flex align-items-center justify-content-center f-20\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" placeholder=\"Pin Code\" [(ngModel)]=\"pincode\" class=\"w-90\"\r\n [style.backgroundColor]=\"data?.styles?.background?.color\"\r\n [style.color]=\"getTextColor(data?.styles?.background?.color)\"\r\n (ngModelChange)=\"pincode.toString().length != 6 ? submit = false : error = false;\" />\r\n </div>\r\n <div (click)=\"getDataWithPincode()\" class=\"f-13 cursor-pointer\">Submit</div>\r\n </div>\r\n <span class=\"f-12 w-25 text-start mt-2\" *ngIf=\"error\" [style.color]=\"'#dc3545'\">Invalid Pincode\r\n (Ex:500088)</span>\r\n </div>\r\n <div class=\"bottom-container row mx-auto mt-3\">\r\n <div class=\"state-container row gap-3 justify-content-center mb-5\" *ngIf=\"showState && !pincode\">\r\n <ng-container *ngFor=\"let state of stateList; let i = index\">\r\n <div class=\"state-card p-2 col-sm-6\" (click)=\"setStateData(state)\">\r\n <ng-container *ngIf=\"state?.stateImage; else noImage\">\r\n <img class=\"w-100 h-75\" [src]=\"state?.stateImage\">\r\n </ng-container>\r\n <ng-template #noImage>\r\n <img class=\"w-100 h-75\"\r\n src=\"https://cdn.caratlane.com/media/static/images/Find_In_Store/city_5.svg\">\r\n </ng-template>\r\n <div class=\"text-center mt-2 state-name\">{{state?.stateName}}</div>\r\n <div class=\"store-count text-center mb-3 mt-1\">{{state?.storeCount + \" stores\"}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"w-100 d-flex align-items-center justify-content-center mb-3\"\r\n *ngIf=\"submit && showMessage == false && pincode && pincode.toString().length ==6 && !loader\">\r\n <div class=\"text-center not-available-text\">We are not available in this location currently</div>\r\n </div>\r\n <ng-container *ngIf=\"loader\">\r\n <div class=\"sub-text w-100 text-center\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '35%',\r\n height: '6vh',\r\n 'border-radius': '12px',\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </ng-container>\r\n <div class=\"bottom-sub-text d-flex align-items-center justify-content-center mb-3 w-100 f-20 fw-bold\"> {{\r\n submit &&\r\n showMessage == true && pincode ? \"Showing \" + totalCount + \" Stores in \" + pincode :\r\n \"Showing All Stores\"}}</div>\r\n <ng-container *ngIf=\"!loader;else loaderScreen\">\r\n <div class=\"row d-flex\">\r\n <div class=\"col-4 p-2 store d-flex flex-column \" style=\"border-radius: 12px; border: none;\"\r\n *ngFor=\"let ele of storesList; let i = index\">\r\n <div class=\"card-body position-relative d-flex flex-column h-100\">\r\n <!-- Content -->\r\n <div class=\"h-100 p-3 pb-0\">\r\n <div class=\"d-flex justify-content-between align-items-start mb-2\">\r\n <div class=\"d-flex flex-column mb-2 bb-1 w-100 pb-2\">\r\n <h6 class=\"card-title fw-bold mb-1 w-100\">{{ele?.storeName}}</h6>\r\n <div class=\"f-11\">\r\n \u2B504.{{ele?.star}} • {{ele?.reviewCount}} Google Reviews\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mb-2 f-11\">\r\n <p class=\"mb-1 text-dark fw-medium\">{{ele?.addressDetails?.addressLine}},</p>\r\n <p class=\"mb-1 text-dark fw-medium\">\r\n {{ele?.addressDetails?.city}},\r\n {{ele?.addressDetails?.state}},{{ele?.addressDetails?.pincode}},\r\n </p>\r\n <p class=\"mb-0 fw-bold\">Phone-\r\n <span\r\n [style.color]=\"data?.styles?.background?.accentColor\">{{ele?.storeContactDetails?.mobile}}</span>\r\n </p>\r\n </div>\r\n <div class=\"mb-2 f-11\">\r\n <p class=\"mb-0 fw-bold\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n STORE HOURS -\r\n {{getTime(ele?.storeHours,'OPEN')}} to {{getTime(ele?.storeHours,'CLOSE')}}\r\n </p>\r\n </div>\r\n </div>\r\n <!-- Fixed bottom buttons -->\r\n <div class=\"d-flex gap-3 align-items-center justify-content-between p-3 w-100 br-20\" [style.backgroundColor]=\"getRGBA(styles?.background?.accentColor,10)\">\r\n <div class=\"br-12 d-flex align-items-center justify-content-center\"\r\n style=\"width: 30px; height: 30px;\" (click)=\"openWhatsapp(ele?.storeContactDetails?.mobile)\"\r\n [style.backgroundColor]=\"data?.styles?.background?.accentColor\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" style=\"height: 20px;cursor: pointer;\">\r\n <path [attr.fill]=\"getTextColor(data?.styles?.background?.accentColor)\"\r\n d=\"M380.9 97.1c-41.9-42-97.7-65.1-157-65.1-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480 117.7 449.1c32.4 17.7 68.9 27 106.1 27l.1 0c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3 18.6-68.1-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1s56.2 81.2 56.1 130.5c0 101.8-84.9 184.6-186.6 184.6zM325.1 300.5c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8s-14.3 18-17.6 21.8c-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7s-12.5-30.1-17.1-41.2c-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2s-9.7 1.4-14.8 6.9c-5.1 5.6-19.4 19-19.4 46.3s19.9 53.7 22.6 57.4c2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4s4.6-24.1 3.2-26.4c-1.3-2.5-5-3.9-10.5-6.6z\" />\r\n </svg>\r\n </div>\r\n <button class=\"btn w-50\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n [buttonId]=\"button?.id ?? ''\" (click)=\"viewStore(ele.id)\">\r\n {{button?.content?.label}}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n <ng-template #loaderScreen>\r\n <div class=\"row loader-container\">\r\n <ng-container *ngFor=\"let ele of [1,2,3,4,5,6]\">\r\n <ngx-skeleton-loader class=\"col-4 loader-column\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '12px',\r\n }\"></ngx-skeleton-loader>\r\n </ng-container>\r\n </div>\r\n </ng-template>\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\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: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.store-header{font-size:27px;font-weight:700}.sub-text{font-size:16px;width:35%;margin-bottom:15px}.location-container{border:1px solid;padding:8px;border-radius:12px;background:#fff}.location-container input{border:unset;appearance:unset;outline:unset;background:#fff;font-size:13px}.f-11{font-size:11px}.f-14{font-size:14px}.not-available-text{color:#ff5151;font-weight:600;border-radius:22px;text-align:center;padding:12px;background:#ff51511a;width:35%}.f-20{font-size:20px}.f-13{font-size:13px}.w-90{width:90%}.card-body{box-shadow:#0000000d 0 0 0 1px;border-radius:24px;height:100%}.card-bottom{POSITION:ABSOLUTE;width:90%;bottom:15px}.br-12{border-radius:12px}.btn{font-size:12px!important}.error-border{border:2px solid #dc3545!important}.f-12{font-size:12px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.bottom-container{width:80%}@media (max-width:475px){.sub-text{width:100%!important}.loader-container{flex-direction:column;padding-right:0!important}.loader-column,.not-available-text{width:100%!important}.location-container{width:55%!important}.bottom-container{flex-direction:column;margin:0!important;width:100%!important}.store{width:100%!important}.state-container{margin:unset!important}.state-container .state-card{width:45%}}.main-container{padding-bottom:9%}.state-card{width:13%;box-shadow:#0000000d 0 0 0 1px;border-radius:20px;cursor:pointer}.state-card img{border-bottom:1px solid rgba(0,0,0,.05)}.state-card .state-name{font-size:14px;font-weight:600}.state-card .store-count{font-size:13px}.bb-1{border-bottom:2px solid rgba(0,0,0,.05)}.br-20{border-radius:0 0 20px 20px}\n"] }]
|
|
22027
|
+
SpacingHorizontalDirective,
|
|
22028
|
+
CornerDirective,
|
|
22029
|
+
], template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div class=\"top-section w-100 d-flex align-items-center justify-content-center text-center flex-column\"\r\n [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"stylesLayout\">\r\n <ng-container *ngIf=\"!loader\">\r\n <div class=\"store-header mb-3\">\r\n {{ submit && showMessage == true && pincode && pincode?.toString()?.length == 6 ? \"Stores in \" +\r\n pincode :\r\n \"Find a Store Near You\"}}\r\n </div>\r\n <div class=\"sub-text\">\r\n {{ submit && showMessage == true && pincode && pincode?.toString()?.length == 6 ? 'We have ' +\r\n totalCount\r\n + ' stores in this locality, scroll down to view the stores\r\n and browse the designs available.' : 'Locate a store near you \u2014 our presence is expanding every day,\r\n and\r\n we look forward to serving you.' }}\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"loader\">\r\n <div class=\"sub-text\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '35%',\r\n height: '3vh',\r\n 'border-radius': '12px',\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"sub-text w-75\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '35%',\r\n height: '2vh',\r\n 'border-radius': '12px',\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </ng-container>\r\n <div class=\"location-container d-flex align-items-center justify-content-between w-25\"\r\n [class.error-border]=\"error\">\r\n <div class=\"d-flex align-items-center w-90\">\r\n <div class=\"d-flex mx-1\"><mat-icon class=\"d-flex align-items-center justify-content-center f-20\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" placeholder=\"Pin Code\" [(ngModel)]=\"pincode\" class=\"w-90\"\r\n [style.backgroundColor]=\"'#ffffff'\"\r\n (ngModelChange)=\"pincode.toString().length != 6 ? submit = false : error = false;\" />\r\n </div>\r\n <div (click)=\"getDataWithPincode()\" class=\"f-13 cursor-pointer\">Submit</div>\r\n </div>\r\n <span class=\"f-12 w-25 text-start mt-2\" *ngIf=\"error\" [style.color]=\"'#dc3545'\">Invalid Pincode\r\n (Ex:500088)</span>\r\n </div>\r\n <div class=\"bottom-container row mt-3 w-100\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n [id]=\"data?.id\">\r\n <div class=\"state-container row gap-3 justify-content-center mb-5\" *ngIf=\"showState && !pincode\">\r\n <ng-container *ngFor=\"let state of stateList; let i = index\">\r\n <div class=\"state-card p-2 col-sm-6\" (click)=\"setStateData(state)\">\r\n <ng-container *ngIf=\"state?.stateImage; else noImage\">\r\n <img class=\"w-100 h-75\" [src]=\"state?.stateImage\">\r\n </ng-container>\r\n <ng-template #noImage>\r\n <img class=\"w-100 h-75\"\r\n src=\"https://cdn.caratlane.com/media/static/images/Find_In_Store/city_5.svg\">\r\n </ng-template>\r\n <div class=\"text-center mt-2 state-name\">{{state?.stateName}}</div>\r\n <div class=\"store-count text-center mb-3 mt-1\">{{state?.storeCount + \" stores\"}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"w-100 d-flex align-items-center justify-content-center mb-3\"\r\n *ngIf=\"submit && showMessage == false && pincode && pincode.toString().length ==6 && !loader\">\r\n <div class=\"text-center not-available-text\">We are not available in this location currently</div>\r\n </div>\r\n <ng-container *ngIf=\"loader\">\r\n <div class=\"sub-text w-100 text-center\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '35%',\r\n height: '6vh',\r\n 'border-radius': '12px',\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </ng-container>\r\n <div class=\"bottom-sub-text d-flex align-items-center justify-content-center mb-3 w-100 f-20 fw-bold\"> {{\r\n submit &&\r\n showMessage == true && pincode ? \"Showing \" + totalCount + \" Stores in \" + pincode :\r\n \"Showing All Stores\"}}</div>\r\n <ng-container *ngIf=\"!loader;else loaderScreen\">\r\n <div class=\"row d-flex\">\r\n <div class=\"col-4 p-2 store d-flex flex-column\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n *ngFor=\"let ele of storesList; let i = index\">\r\n <div class=\"card-body position-relative d-flex flex-column h-100\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\">\r\n <!-- Content -->\r\n <div class=\"h-100 p-3 pb-0\">\r\n <div class=\"d-flex justify-content-between align-items-start mb-2\">\r\n <div class=\"d-flex flex-column mb-2 bb-1 w-100 pb-2\">\r\n <h6 class=\"card-title fw-bold mb-1 w-100\">{{ele?.storeName}}</h6>\r\n <div class=\"f-11\">\r\n \u2B504.{{ele?.star}} • {{ele?.reviewCount}} Google\r\n Reviews\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mb-2 f-11\">\r\n <p class=\"mb-1 text-dark fw-medium\">{{ele?.addressDetails?.addressLine}},</p>\r\n <p class=\"mb-1 text-dark fw-medium\">\r\n {{ele?.addressDetails?.city}},\r\n {{ele?.addressDetails?.state}},{{ele?.addressDetails?.pincode}},\r\n </p>\r\n <p class=\"mb-0 fw-bold\">Phone-\r\n <span\r\n [style.color]=\"data?.styles?.background?.accentColor\">{{ele?.storeContactDetails?.mobile}}</span>\r\n </p>\r\n </div>\r\n <div class=\"mb-2 f-11\">\r\n <p class=\"mb-0 fw-bold\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n STORE HOURS -\r\n {{getTime(ele?.storeHours,'OPEN')}} to {{getTime(ele?.storeHours,'CLOSE')}}\r\n </p>\r\n </div>\r\n </div>\r\n <!-- Fixed bottom buttons -->\r\n <div class=\"d-flex gap-3 align-items-center justify-content-between p-3 w-100 br-20\"\r\n [style.backgroundColor]=\"getRGBA(styles?.background?.accentColor,10)\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\">\r\n <div class=\"br-12 d-flex align-items-center justify-content-center\"\r\n style=\"width: 30px; height: 30px;\"\r\n (click)=\"openWhatsapp(ele?.storeContactDetails?.mobile)\"\r\n [style.backgroundColor]=\"data?.styles?.background?.accentColor\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"\r\n style=\"height: 20px;cursor: pointer;\">\r\n <path [attr.fill]=\"getTextColor(data?.styles?.background?.accentColor)\"\r\n d=\"M380.9 97.1c-41.9-42-97.7-65.1-157-65.1-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480 117.7 449.1c32.4 17.7 68.9 27 106.1 27l.1 0c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3 18.6-68.1-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1s56.2 81.2 56.1 130.5c0 101.8-84.9 184.6-186.6 184.6zM325.1 300.5c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8s-14.3 18-17.6 21.8c-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7s-12.5-30.1-17.1-41.2c-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2s-9.7 1.4-14.8 6.9c-5.1 5.6-19.4 19-19.4 46.3s19.9 53.7 22.6 57.4c2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4s4.6-24.1 3.2-26.4c-1.3-2.5-5-3.9-10.5-6.6z\" />\r\n </svg>\r\n </div>\r\n <button class=\"btn w-50\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n [buttonId]=\"button?.id ?? ''\" (click)=\"viewStore(ele.id)\">\r\n {{button?.content?.label}}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n <ng-template #loaderScreen>\r\n <div class=\"row loader-container\">\r\n <ng-container *ngFor=\"let ele of [1,2,3,4,5,6]\">\r\n <ngx-skeleton-loader class=\"col-4 loader-column\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '12px',\r\n }\"></ngx-skeleton-loader>\r\n </ng-container>\r\n </div>\r\n </ng-template>\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\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: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.store-header{font-size:27px;font-weight:700}.sub-text{font-size:16px;width:35%;margin-bottom:15px}.location-container{border:1px solid;padding:8px;border-radius:12px;background:#fff}.location-container input{border:unset;appearance:unset;outline:unset;background:#fff;font-size:13px}.f-11{font-size:11px}.f-14{font-size:14px}.not-available-text{color:#ff5151;font-weight:600;border-radius:22px;text-align:center;padding:12px;background:#ff51511a;width:35%}.f-20{font-size:20px}.f-13{font-size:13px}.w-90{width:90%}.card-body{box-shadow:#0000000d 0 0 0 1px;height:100%}.card-bottom{POSITION:ABSOLUTE;width:90%;bottom:15px}.br-12{border-radius:12px}.btn{font-size:12px!important}.error-border{border:2px solid #dc3545!important}.f-12{font-size:12px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}@media (max-width:475px){.sub-text{width:100%!important}.loader-container{flex-direction:column;padding-right:0!important}.loader-column,.not-available-text{width:100%!important}.location-container{width:55%!important}.bottom-container{flex-direction:column;margin:0!important;width:100%!important}.store{width:100%!important}.state-container{margin:unset!important}.state-container .state-card{width:45%}}.main-container{padding-bottom:9%}.state-card{width:13%;box-shadow:#0000000d 0 0 0 1px;border-radius:20px;cursor:pointer}.state-card img{border-bottom:1px solid rgba(0,0,0,.05)}.state-card .state-name{font-size:14px;font-weight:600}.state-card .store-count{font-size:13px}.bb-1{border-bottom:2px solid rgba(0,0,0,.05)}.br-20{border-top-left-radius:unset!important;border-top-right-radius:unset!important}\n"] }]
|
|
21964
22030
|
}], ctorParameters: () => [{ type: RestService }, { type: i2$2.Router }], propDecorators: { data: [{
|
|
21965
22031
|
type: Input
|
|
21966
22032
|
}], edit: [{
|
|
@@ -22039,8 +22105,11 @@ class StorePageComponent extends BaseSection {
|
|
|
22039
22105
|
dialNumber(phone) {
|
|
22040
22106
|
window.location.href = `tel:${phone}`;
|
|
22041
22107
|
}
|
|
22108
|
+
get stylesLayout() {
|
|
22109
|
+
return { ...this.styles?.layout };
|
|
22110
|
+
}
|
|
22042
22111
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StorePageComponent, deps: [{ token: RestService }, { token: i2$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
22043
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StorePageComponent, isStandalone: true, selector: "simpo-store-page", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index" }, usesInheritance: true, ngImport: i0, template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n <div class=\"main-container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"styles?.layout\">\r\n <div class=\"w-100 row store-details\" *ngIf=\"!loading\">\r\n <div class=\"col-4 store-img\">\r\n <img [src]=\"storeData?.storeImageUrls[0]\" alt=\"Image\" class=\"w-100 h-100\" [simpoCorner]=\"styles?.corners\"\r\n [id]=\"data?.id\">\r\n </div>\r\n <div class=\"col-8 px-3 details-container\">\r\n <div class=\"address-container\">\r\n <div class=\"d-flex align-items-start mb-4 p-3 mt-3 store-container\">\r\n <div class=\"flex-grow-1 me-3\">\r\n <h4 class=\"store-name mb-2\">{{storeData?.storeName}}\r\n </h4>\r\n <p class=\"store-address mb-2 f-14\">{{storeData?.addressDetails?.addressLine}} ,\r\n {{storeData?.addressDetails?.city}} , {{storeData?.addressDetails?.state}} ,\r\n {{storeData?.addressDetails?.pincode}}</p>\r\n <a [href]=\"storeData?.addressDetails?.mapUrl\" class=\"view-directions\" target=\"_blank\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">VIEW\r\n DIRECTIONS</a>\r\n </div>\r\n <div class=\"d-flex gap-2\">\r\n <button class=\"btn btn-success rounded d-flex align-items-center justify-content-center p-0 cursor-pointer\"\r\n style=\" width: 30px !important;height: 33px; background-color: #25d366 !important; border-color: #25d366 !important;\"\r\n (click)=\"openWhatsapp(storeData?.storeContactDetails?.mobile)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" style=\"height: 20px;\">\r\n <path fill=\"#ffffff\"\r\n d=\"M380.9 97.1c-41.9-42-97.7-65.1-157-65.1-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480 117.7 449.1c32.4 17.7 68.9 27 106.1 27l.1 0c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3 18.6-68.1-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1s56.2 81.2 56.1 130.5c0 101.8-84.9 184.6-186.6 184.6zM325.1 300.5c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8s-14.3 18-17.6 21.8c-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7s-12.5-30.1-17.1-41.2c-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2s-9.7 1.4-14.8 6.9c-5.1 5.6-19.4 19-19.4 46.3s19.9 53.7 22.6 57.4c2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4s4.6-24.1 3.2-26.4c-1.3-2.5-5-3.9-10.5-6.6z\" />\r\n </svg> </button>\r\n <button class=\"btn btn-light rounded d-flex align-items-center justify-content-center p-0 cursor-pointer\"\r\n style=\"width: 30px !important; height: 33px;\" (click)=\"dialNumber(storeData?.storeContactDetails?.mobile)\">\r\n <mat-icon> phone</mat-icon>\r\n <!-- <button class=\"btn book-visit-btn\">BOOK A VISIT</button> -->\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"mb-3 px-2\">\r\n <h5 class=\"mb-3\">Facilities</h5>\r\n <div class=\"d-flex flex-wrap gap-3\">\r\n <div class=\"d-flex align-items-center gap- facility-text\">\r\n <mat-icon\r\n class=\"f-18 d-flex align-items-center justify-content-center\">access_time</mat-icon>\r\n <span> {{getTime(storeData?.storeHours)}}\r\n </span>\r\n </div>\r\n <div class=\"facility-text align-content-center\"\r\n *ngFor=\"let ele of storeData?.facilities; let i = index\">{{ele | titlecase}}</div>\r\n </div>\r\n </div>\r\n <div class=\"px-2 mb-2\">\r\n <h5 class=\"mb-3\">Walk-In Services</h5>\r\n <div class=\"row g-3\">\r\n <div class=\"col-md-3\" *ngFor=\"let ele of storeData?.services; let i = index\">\r\n <div class=\"service-card old-gold h-100 py-2\" *ngIf=\"ele?.isAvailable\">\r\n <p class=\"mb-2 f-14\">{{(removeUnderScore(ele?.serviceType) | titlecase)}}</p>\r\n <p class=\"mb-0 f-13\">{{ele?.description}}</p>\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 <div class=\"w-100 row store-details\" *ngIf=\"loading\">\r\n <!-- Image skeleton -->\r\n <div class=\"col-4 store-img\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '8px',\r\n 'height': '100%',\r\n 'width': '100%'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n \r\n <!-- Details skeleton -->\r\n <div class=\"col-8 px-3 details-container\">\r\n <div class=\"address-container\">\r\n <!-- Store info skeleton -->\r\n <div class=\"d-flex align-items-start mb-4 p-3 mt-3\">\r\n <div class=\"flex-grow-1 me-3\">\r\n <!-- Store name -->\r\n <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '24px',\r\n 'width': '60%',\r\n 'margin-bottom': '8px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n \r\n <!-- Address lines -->\r\n <ngx-skeleton-loader count=\"2\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '16px',\r\n 'width': '80%',\r\n 'margin-bottom': '4px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n \r\n <!-- View directions link -->\r\n <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '16px',\r\n 'width': '40%',\r\n 'margin-top': '8px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n \r\n <!-- Action buttons skeleton -->\r\n <div class=\"d-flex gap-2\">\r\n <ngx-skeleton-loader count=\"2\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '33px',\r\n 'width': '30px',\r\n 'margin-right': '8px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n \r\n <!-- Facilities section skeleton -->\r\n <div class=\"mb-3 px-2\">\r\n <!-- Facilities title -->\r\n <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '20px',\r\n 'width': '25%',\r\n 'margin-bottom': '12px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n \r\n <!-- Facilities items -->\r\n <div class=\"d-flex flex-wrap gap-3\">\r\n <ngx-skeleton-loader count=\"4\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '24px',\r\n 'width': '120px',\r\n 'margin-right': '12px',\r\n 'margin-bottom': '8px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n \r\n <!-- Walk-in services section skeleton -->\r\n <div class=\"px-2 mb-2\">\r\n <!-- Services title -->\r\n <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '20px',\r\n 'width': '30%',\r\n 'margin-bottom': '12px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n \r\n <!-- Service cards -->\r\n <div class=\"row g-3\">\r\n <div class=\"col-md-3\" *ngFor=\"let item of [1,2,3,4]\">\r\n <div class=\"h-100 py-2\">\r\n <!-- Service type -->\r\n <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '16px',\r\n 'width': '80%',\r\n 'margin-bottom': '8px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n \r\n <!-- Service description -->\r\n <ngx-skeleton-loader count=\"2\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '14px',\r\n 'width': '100%',\r\n 'margin-bottom': '4px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\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\r\n </div>\r\n</div>", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.text-hidden{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.store-container{background:#fff;color:#000;border-radius:12px;box-shadow:#0000001a 0 0 5px,#0000001a 0 0 1px}.service-card{border-radius:12px;background:#fff;padding:10px;box-shadow:#0000001a 0 0 5px,#0000001a 0 0 1px}.view-directions{font-weight:600;font-size:12px;cursor:pointer}.cursor-pointer{cursor:pointer}.f-18{font-size:18px}.f-13{font-size:13px}.f-14{font-size:14px}.facility-text{background:#fff;color:#000;border-radius:12px;padding:4px 12px;font-size:13px;box-shadow:#0000001a 0 0 5px,#0000001a 0 0 1px}@media (max-width:475px){.store-details{flex-direction:column}.store-img{width:100%!important;max-height:250px!important}.details-container{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { 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: "ngmodule", type: NgxSkeletonLoaderModule }] }); }
|
|
22112
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StorePageComponent, isStandalone: true, selector: "simpo-store-page", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index" }, usesInheritance: true, ngImport: i0, template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n <div class=\"main-container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoBackground]=\"styles?.background\" [simpoLayout]=\"stylesLayout\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"w-100 row store-details\" *ngIf=\"!loading\">\r\n <div class=\"col-4 store-img\">\r\n <img [src]=\"storeData?.storeImageUrls[0]\" alt=\"Image\" class=\"w-100 h-100\" [simpoCorner]=\"styles?.corners\"\r\n [id]=\"data?.id\">\r\n </div>\r\n <div class=\"col-8 px-3 details-container\">\r\n <div class=\"address-container\">\r\n <div class=\"d-flex align-items-start mb-4 p-3 mt-3 store-container\">\r\n <div class=\"flex-grow-1 me-3\">\r\n <h4 class=\"store-name mb-2\">{{storeData?.storeName}}\r\n </h4>\r\n <p class=\"store-address mb-2 f-14\">{{storeData?.addressDetails?.addressLine}} ,\r\n {{storeData?.addressDetails?.city}} , {{storeData?.addressDetails?.state}} ,\r\n {{storeData?.addressDetails?.pincode}}</p>\r\n <a [href]=\"storeData?.addressDetails?.mapUrl\" class=\"view-directions\" target=\"_blank\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">VIEW\r\n DIRECTIONS</a>\r\n </div>\r\n <div class=\"d-flex gap-2\">\r\n <button class=\"btn btn-success rounded d-flex align-items-center justify-content-center p-0 cursor-pointer\"\r\n style=\" width: 30px !important;height: 33px; background-color: #25d366 !important; border-color: #25d366 !important;\"\r\n (click)=\"openWhatsapp(storeData?.storeContactDetails?.mobile)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" style=\"height: 20px;\">\r\n <path fill=\"#ffffff\"\r\n d=\"M380.9 97.1c-41.9-42-97.7-65.1-157-65.1-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480 117.7 449.1c32.4 17.7 68.9 27 106.1 27l.1 0c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3 18.6-68.1-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1s56.2 81.2 56.1 130.5c0 101.8-84.9 184.6-186.6 184.6zM325.1 300.5c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8s-14.3 18-17.6 21.8c-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7s-12.5-30.1-17.1-41.2c-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2s-9.7 1.4-14.8 6.9c-5.1 5.6-19.4 19-19.4 46.3s19.9 53.7 22.6 57.4c2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4s4.6-24.1 3.2-26.4c-1.3-2.5-5-3.9-10.5-6.6z\" />\r\n </svg> </button>\r\n <button class=\"btn btn-light rounded d-flex align-items-center justify-content-center p-0 cursor-pointer\"\r\n style=\"width: 30px !important; height: 33px;\" (click)=\"dialNumber(storeData?.storeContactDetails?.mobile)\">\r\n <mat-icon> phone</mat-icon>\r\n <!-- <button class=\"btn book-visit-btn\">BOOK A VISIT</button> -->\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"mb-3 px-2\">\r\n <h5 class=\"mb-3\">Facilities</h5>\r\n <div class=\"d-flex flex-wrap gap-3\">\r\n <div class=\"d-flex align-items-center gap- facility-text\">\r\n <mat-icon\r\n class=\"f-18 d-flex align-items-center justify-content-center\">access_time</mat-icon>\r\n <span> {{getTime(storeData?.storeHours)}}\r\n </span>\r\n </div>\r\n <div class=\"facility-text align-content-center\"\r\n *ngFor=\"let ele of storeData?.facilities; let i = index\">{{ele | titlecase}}</div>\r\n </div>\r\n </div>\r\n <div class=\"px-2 mb-2\">\r\n <h5 class=\"mb-3\">Walk-In Services</h5>\r\n <div class=\"row g-3\">\r\n <div class=\"col-md-3\" *ngFor=\"let ele of storeData?.services; let i = index\">\r\n <div class=\"service-card old-gold h-100 py-2\" *ngIf=\"ele?.isAvailable\">\r\n <p class=\"mb-2 f-14\">{{(removeUnderScore(ele?.serviceType) | titlecase)}}</p>\r\n <p class=\"mb-0 f-13\">{{ele?.description}}</p>\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 <div class=\"w-100 row store-details\" *ngIf=\"loading\">\r\n <!-- Image skeleton -->\r\n <div class=\"col-4 store-img\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '8px',\r\n 'height': '100%',\r\n 'width': '100%'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n \r\n <!-- Details skeleton -->\r\n <div class=\"col-8 px-3 details-container\">\r\n <div class=\"address-container\">\r\n <!-- Store info skeleton -->\r\n <div class=\"d-flex align-items-start mb-4 p-3 mt-3\">\r\n <div class=\"flex-grow-1 me-3\">\r\n <!-- Store name -->\r\n <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '24px',\r\n 'width': '60%',\r\n 'margin-bottom': '8px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n \r\n <!-- Address lines -->\r\n <ngx-skeleton-loader count=\"2\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '16px',\r\n 'width': '80%',\r\n 'margin-bottom': '4px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n \r\n <!-- View directions link -->\r\n <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '16px',\r\n 'width': '40%',\r\n 'margin-top': '8px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n \r\n <!-- Action buttons skeleton -->\r\n <div class=\"d-flex gap-2\">\r\n <ngx-skeleton-loader count=\"2\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '33px',\r\n 'width': '30px',\r\n 'margin-right': '8px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n \r\n <!-- Facilities section skeleton -->\r\n <div class=\"mb-3 px-2\">\r\n <!-- Facilities title -->\r\n <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '20px',\r\n 'width': '25%',\r\n 'margin-bottom': '12px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n \r\n <!-- Facilities items -->\r\n <div class=\"d-flex flex-wrap gap-3\">\r\n <ngx-skeleton-loader count=\"4\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '24px',\r\n 'width': '120px',\r\n 'margin-right': '12px',\r\n 'margin-bottom': '8px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n \r\n <!-- Walk-in services section skeleton -->\r\n <div class=\"px-2 mb-2\">\r\n <!-- Services title -->\r\n <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '20px',\r\n 'width': '30%',\r\n 'margin-bottom': '12px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n \r\n <!-- Service cards -->\r\n <div class=\"row g-3\">\r\n <div class=\"col-md-3\" *ngFor=\"let item of [1,2,3,4]\">\r\n <div class=\"h-100 py-2\">\r\n <!-- Service type -->\r\n <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '16px',\r\n 'width': '80%',\r\n 'margin-bottom': '8px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n \r\n <!-- Service description -->\r\n <ngx-skeleton-loader count=\"2\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '14px',\r\n 'width': '100%',\r\n 'margin-bottom': '4px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\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\r\n </div>\r\n</div>", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.text-hidden{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.store-container{background:#fff;color:#000;border-radius:12px;box-shadow:#0000001a 0 0 5px,#0000001a 0 0 1px}.service-card{border-radius:12px;background:#fff;padding:10px;box-shadow:#0000001a 0 0 5px,#0000001a 0 0 1px}.view-directions{font-weight:600;font-size:12px;cursor:pointer}.cursor-pointer{cursor:pointer}.f-18{font-size:18px}.f-13{font-size:13px}.f-14{font-size:14px}.facility-text{background:#fff;color:#000;border-radius:12px;padding:4px 12px;font-size:13px;box-shadow:#0000001a 0 0 5px,#0000001a 0 0 1px}@media (max-width:475px){.store-details{flex-direction:column}.store-img{width:100%!important;max-height:250px!important}.details-container{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { 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: "ngmodule", type: NgxSkeletonLoaderModule }] }); }
|
|
22044
22113
|
}
|
|
22045
22114
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StorePageComponent, decorators: [{
|
|
22046
22115
|
type: Component,
|
|
@@ -22059,7 +22128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
22059
22128
|
SpacingHorizontalDirective,
|
|
22060
22129
|
MatIcon,
|
|
22061
22130
|
NgxSkeletonLoaderModule
|
|
22062
|
-
], template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n <div class=\"main-container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"styles?.layout\">\r\n <div class=\"w-100 row store-details\" *ngIf=\"!loading\">\r\n <div class=\"col-4 store-img\">\r\n <img [src]=\"storeData?.storeImageUrls[0]\" alt=\"Image\" class=\"w-100 h-100\" [simpoCorner]=\"styles?.corners\"\r\n [id]=\"data?.id\">\r\n </div>\r\n <div class=\"col-8 px-3 details-container\">\r\n <div class=\"address-container\">\r\n <div class=\"d-flex align-items-start mb-4 p-3 mt-3 store-container\">\r\n <div class=\"flex-grow-1 me-3\">\r\n <h4 class=\"store-name mb-2\">{{storeData?.storeName}}\r\n </h4>\r\n <p class=\"store-address mb-2 f-14\">{{storeData?.addressDetails?.addressLine}} ,\r\n {{storeData?.addressDetails?.city}} , {{storeData?.addressDetails?.state}} ,\r\n {{storeData?.addressDetails?.pincode}}</p>\r\n <a [href]=\"storeData?.addressDetails?.mapUrl\" class=\"view-directions\" target=\"_blank\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">VIEW\r\n DIRECTIONS</a>\r\n </div>\r\n <div class=\"d-flex gap-2\">\r\n <button class=\"btn btn-success rounded d-flex align-items-center justify-content-center p-0 cursor-pointer\"\r\n style=\" width: 30px !important;height: 33px; background-color: #25d366 !important; border-color: #25d366 !important;\"\r\n (click)=\"openWhatsapp(storeData?.storeContactDetails?.mobile)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" style=\"height: 20px;\">\r\n <path fill=\"#ffffff\"\r\n d=\"M380.9 97.1c-41.9-42-97.7-65.1-157-65.1-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480 117.7 449.1c32.4 17.7 68.9 27 106.1 27l.1 0c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3 18.6-68.1-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1s56.2 81.2 56.1 130.5c0 101.8-84.9 184.6-186.6 184.6zM325.1 300.5c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8s-14.3 18-17.6 21.8c-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7s-12.5-30.1-17.1-41.2c-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2s-9.7 1.4-14.8 6.9c-5.1 5.6-19.4 19-19.4 46.3s19.9 53.7 22.6 57.4c2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4s4.6-24.1 3.2-26.4c-1.3-2.5-5-3.9-10.5-6.6z\" />\r\n </svg> </button>\r\n <button class=\"btn btn-light rounded d-flex align-items-center justify-content-center p-0 cursor-pointer\"\r\n style=\"width: 30px !important; height: 33px;\" (click)=\"dialNumber(storeData?.storeContactDetails?.mobile)\">\r\n <mat-icon> phone</mat-icon>\r\n <!-- <button class=\"btn book-visit-btn\">BOOK A VISIT</button> -->\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"mb-3 px-2\">\r\n <h5 class=\"mb-3\">Facilities</h5>\r\n <div class=\"d-flex flex-wrap gap-3\">\r\n <div class=\"d-flex align-items-center gap- facility-text\">\r\n <mat-icon\r\n class=\"f-18 d-flex align-items-center justify-content-center\">access_time</mat-icon>\r\n <span> {{getTime(storeData?.storeHours)}}\r\n </span>\r\n </div>\r\n <div class=\"facility-text align-content-center\"\r\n *ngFor=\"let ele of storeData?.facilities; let i = index\">{{ele | titlecase}}</div>\r\n </div>\r\n </div>\r\n <div class=\"px-2 mb-2\">\r\n <h5 class=\"mb-3\">Walk-In Services</h5>\r\n <div class=\"row g-3\">\r\n <div class=\"col-md-3\" *ngFor=\"let ele of storeData?.services; let i = index\">\r\n <div class=\"service-card old-gold h-100 py-2\" *ngIf=\"ele?.isAvailable\">\r\n <p class=\"mb-2 f-14\">{{(removeUnderScore(ele?.serviceType) | titlecase)}}</p>\r\n <p class=\"mb-0 f-13\">{{ele?.description}}</p>\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 <div class=\"w-100 row store-details\" *ngIf=\"loading\">\r\n <!-- Image skeleton -->\r\n <div class=\"col-4 store-img\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '8px',\r\n 'height': '100%',\r\n 'width': '100%'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n \r\n <!-- Details skeleton -->\r\n <div class=\"col-8 px-3 details-container\">\r\n <div class=\"address-container\">\r\n <!-- Store info skeleton -->\r\n <div class=\"d-flex align-items-start mb-4 p-3 mt-3\">\r\n <div class=\"flex-grow-1 me-3\">\r\n <!-- Store name -->\r\n <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '24px',\r\n 'width': '60%',\r\n 'margin-bottom': '8px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n \r\n <!-- Address lines -->\r\n <ngx-skeleton-loader count=\"2\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '16px',\r\n 'width': '80%',\r\n 'margin-bottom': '4px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n \r\n <!-- View directions link -->\r\n <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '16px',\r\n 'width': '40%',\r\n 'margin-top': '8px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n \r\n <!-- Action buttons skeleton -->\r\n <div class=\"d-flex gap-2\">\r\n <ngx-skeleton-loader count=\"2\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '33px',\r\n 'width': '30px',\r\n 'margin-right': '8px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n \r\n <!-- Facilities section skeleton -->\r\n <div class=\"mb-3 px-2\">\r\n <!-- Facilities title -->\r\n <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '20px',\r\n 'width': '25%',\r\n 'margin-bottom': '12px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n \r\n <!-- Facilities items -->\r\n <div class=\"d-flex flex-wrap gap-3\">\r\n <ngx-skeleton-loader count=\"4\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '24px',\r\n 'width': '120px',\r\n 'margin-right': '12px',\r\n 'margin-bottom': '8px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n \r\n <!-- Walk-in services section skeleton -->\r\n <div class=\"px-2 mb-2\">\r\n <!-- Services title -->\r\n <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '20px',\r\n 'width': '30%',\r\n 'margin-bottom': '12px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n \r\n <!-- Service cards -->\r\n <div class=\"row g-3\">\r\n <div class=\"col-md-3\" *ngFor=\"let item of [1,2,3,4]\">\r\n <div class=\"h-100 py-2\">\r\n <!-- Service type -->\r\n <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '16px',\r\n 'width': '80%',\r\n 'margin-bottom': '8px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n \r\n <!-- Service description -->\r\n <ngx-skeleton-loader count=\"2\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '14px',\r\n 'width': '100%',\r\n 'margin-bottom': '4px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\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\r\n </div>\r\n</div>", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.text-hidden{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.store-container{background:#fff;color:#000;border-radius:12px;box-shadow:#0000001a 0 0 5px,#0000001a 0 0 1px}.service-card{border-radius:12px;background:#fff;padding:10px;box-shadow:#0000001a 0 0 5px,#0000001a 0 0 1px}.view-directions{font-weight:600;font-size:12px;cursor:pointer}.cursor-pointer{cursor:pointer}.f-18{font-size:18px}.f-13{font-size:13px}.f-14{font-size:14px}.facility-text{background:#fff;color:#000;border-radius:12px;padding:4px 12px;font-size:13px;box-shadow:#0000001a 0 0 5px,#0000001a 0 0 1px}@media (max-width:475px){.store-details{flex-direction:column}.store-img{width:100%!important;max-height:250px!important}.details-container{width:100%}}\n"] }]
|
|
22131
|
+
], template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n <div class=\"main-container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoBackground]=\"styles?.background\" [simpoLayout]=\"stylesLayout\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"w-100 row store-details\" *ngIf=\"!loading\">\r\n <div class=\"col-4 store-img\">\r\n <img [src]=\"storeData?.storeImageUrls[0]\" alt=\"Image\" class=\"w-100 h-100\" [simpoCorner]=\"styles?.corners\"\r\n [id]=\"data?.id\">\r\n </div>\r\n <div class=\"col-8 px-3 details-container\">\r\n <div class=\"address-container\">\r\n <div class=\"d-flex align-items-start mb-4 p-3 mt-3 store-container\">\r\n <div class=\"flex-grow-1 me-3\">\r\n <h4 class=\"store-name mb-2\">{{storeData?.storeName}}\r\n </h4>\r\n <p class=\"store-address mb-2 f-14\">{{storeData?.addressDetails?.addressLine}} ,\r\n {{storeData?.addressDetails?.city}} , {{storeData?.addressDetails?.state}} ,\r\n {{storeData?.addressDetails?.pincode}}</p>\r\n <a [href]=\"storeData?.addressDetails?.mapUrl\" class=\"view-directions\" target=\"_blank\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">VIEW\r\n DIRECTIONS</a>\r\n </div>\r\n <div class=\"d-flex gap-2\">\r\n <button class=\"btn btn-success rounded d-flex align-items-center justify-content-center p-0 cursor-pointer\"\r\n style=\" width: 30px !important;height: 33px; background-color: #25d366 !important; border-color: #25d366 !important;\"\r\n (click)=\"openWhatsapp(storeData?.storeContactDetails?.mobile)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" style=\"height: 20px;\">\r\n <path fill=\"#ffffff\"\r\n d=\"M380.9 97.1c-41.9-42-97.7-65.1-157-65.1-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480 117.7 449.1c32.4 17.7 68.9 27 106.1 27l.1 0c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3 18.6-68.1-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1s56.2 81.2 56.1 130.5c0 101.8-84.9 184.6-186.6 184.6zM325.1 300.5c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8s-14.3 18-17.6 21.8c-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7s-12.5-30.1-17.1-41.2c-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2s-9.7 1.4-14.8 6.9c-5.1 5.6-19.4 19-19.4 46.3s19.9 53.7 22.6 57.4c2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4s4.6-24.1 3.2-26.4c-1.3-2.5-5-3.9-10.5-6.6z\" />\r\n </svg> </button>\r\n <button class=\"btn btn-light rounded d-flex align-items-center justify-content-center p-0 cursor-pointer\"\r\n style=\"width: 30px !important; height: 33px;\" (click)=\"dialNumber(storeData?.storeContactDetails?.mobile)\">\r\n <mat-icon> phone</mat-icon>\r\n <!-- <button class=\"btn book-visit-btn\">BOOK A VISIT</button> -->\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"mb-3 px-2\">\r\n <h5 class=\"mb-3\">Facilities</h5>\r\n <div class=\"d-flex flex-wrap gap-3\">\r\n <div class=\"d-flex align-items-center gap- facility-text\">\r\n <mat-icon\r\n class=\"f-18 d-flex align-items-center justify-content-center\">access_time</mat-icon>\r\n <span> {{getTime(storeData?.storeHours)}}\r\n </span>\r\n </div>\r\n <div class=\"facility-text align-content-center\"\r\n *ngFor=\"let ele of storeData?.facilities; let i = index\">{{ele | titlecase}}</div>\r\n </div>\r\n </div>\r\n <div class=\"px-2 mb-2\">\r\n <h5 class=\"mb-3\">Walk-In Services</h5>\r\n <div class=\"row g-3\">\r\n <div class=\"col-md-3\" *ngFor=\"let ele of storeData?.services; let i = index\">\r\n <div class=\"service-card old-gold h-100 py-2\" *ngIf=\"ele?.isAvailable\">\r\n <p class=\"mb-2 f-14\">{{(removeUnderScore(ele?.serviceType) | titlecase)}}</p>\r\n <p class=\"mb-0 f-13\">{{ele?.description}}</p>\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 <div class=\"w-100 row store-details\" *ngIf=\"loading\">\r\n <!-- Image skeleton -->\r\n <div class=\"col-4 store-img\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '8px',\r\n 'height': '100%',\r\n 'width': '100%'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n \r\n <!-- Details skeleton -->\r\n <div class=\"col-8 px-3 details-container\">\r\n <div class=\"address-container\">\r\n <!-- Store info skeleton -->\r\n <div class=\"d-flex align-items-start mb-4 p-3 mt-3\">\r\n <div class=\"flex-grow-1 me-3\">\r\n <!-- Store name -->\r\n <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '24px',\r\n 'width': '60%',\r\n 'margin-bottom': '8px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n \r\n <!-- Address lines -->\r\n <ngx-skeleton-loader count=\"2\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '16px',\r\n 'width': '80%',\r\n 'margin-bottom': '4px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n \r\n <!-- View directions link -->\r\n <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '16px',\r\n 'width': '40%',\r\n 'margin-top': '8px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n \r\n <!-- Action buttons skeleton -->\r\n <div class=\"d-flex gap-2\">\r\n <ngx-skeleton-loader count=\"2\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '33px',\r\n 'width': '30px',\r\n 'margin-right': '8px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n \r\n <!-- Facilities section skeleton -->\r\n <div class=\"mb-3 px-2\">\r\n <!-- Facilities title -->\r\n <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '20px',\r\n 'width': '25%',\r\n 'margin-bottom': '12px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n \r\n <!-- Facilities items -->\r\n <div class=\"d-flex flex-wrap gap-3\">\r\n <ngx-skeleton-loader count=\"4\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '24px',\r\n 'width': '120px',\r\n 'margin-right': '12px',\r\n 'margin-bottom': '8px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n \r\n <!-- Walk-in services section skeleton -->\r\n <div class=\"px-2 mb-2\">\r\n <!-- Services title -->\r\n <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '20px',\r\n 'width': '30%',\r\n 'margin-bottom': '12px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n \r\n <!-- Service cards -->\r\n <div class=\"row g-3\">\r\n <div class=\"col-md-3\" *ngFor=\"let item of [1,2,3,4]\">\r\n <div class=\"h-100 py-2\">\r\n <!-- Service type -->\r\n <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '16px',\r\n 'width': '80%',\r\n 'margin-bottom': '8px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n \r\n <!-- Service description -->\r\n <ngx-skeleton-loader count=\"2\" appearance=\"custom-content\" [theme]=\"{\r\n 'background-color': '#f0f0f0',\r\n 'border-radius': '4px',\r\n 'height': '14px',\r\n 'width': '100%',\r\n 'margin-bottom': '4px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\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\r\n </div>\r\n</div>", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.text-hidden{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.store-container{background:#fff;color:#000;border-radius:12px;box-shadow:#0000001a 0 0 5px,#0000001a 0 0 1px}.service-card{border-radius:12px;background:#fff;padding:10px;box-shadow:#0000001a 0 0 5px,#0000001a 0 0 1px}.view-directions{font-weight:600;font-size:12px;cursor:pointer}.cursor-pointer{cursor:pointer}.f-18{font-size:18px}.f-13{font-size:13px}.f-14{font-size:14px}.facility-text{background:#fff;color:#000;border-radius:12px;padding:4px 12px;font-size:13px;box-shadow:#0000001a 0 0 5px,#0000001a 0 0 1px}@media (max-width:475px){.store-details{flex-direction:column}.store-img{width:100%!important;max-height:250px!important}.details-container{width:100%}}\n"] }]
|
|
22063
22132
|
}], ctorParameters: () => [{ type: RestService }, { type: i2$2.ActivatedRoute }], propDecorators: { data: [{
|
|
22064
22133
|
type: Input
|
|
22065
22134
|
}], edit: [{
|