simpo-component-library 3.6.525 → 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/esm2022/lib/services/rest.service.mjs +8 -5
- package/esm2022/lib/tokens/api-token.mjs +2 -1
- package/fesm2022/simpo-component-library.mjs +96 -23
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/ecommerce/sections/authentication-required/authentication-required.component.d.ts +1 -1
- package/lib/ecommerce/sections/product-desc/product-desc.component.d.ts +1 -1
- package/lib/ecommerce/sections/schemes/schemes.component.d.ts +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/elements/link-editor/link-editor.component.d.ts +1 -1
- package/lib/sections/image-grid-section/image-grid-section.component.d.ts +14 -0
- package/lib/sections/pricing-section/pricing-section.component.d.ts +1 -1
- package/lib/services/rest.service.d.ts +2 -2
- package/lib/tokens/api-token.d.ts +1 -0
- package/package.json +1 -1
- package/simpo-component-library-3.6.527.tgz +0 -0
- package/simpo-component-library-3.6.525.tgz +0 -0
|
@@ -767,6 +767,7 @@ const ECOMMERCE_URL = new InjectionToken('ecommerceURL');
|
|
|
767
767
|
const CMIS_URL = new InjectionToken('cmisURL');
|
|
768
768
|
const BUCKET_URL = new InjectionToken('bucketURL');
|
|
769
769
|
const PASSBOOK_URL = new InjectionToken('passbookURL');
|
|
770
|
+
const APPOINTMENT_URL = new InjectionToken('appointmentUrl');
|
|
770
771
|
|
|
771
772
|
class ImageUplaodService {
|
|
772
773
|
// region = 'us-east-1'
|
|
@@ -1314,6 +1315,7 @@ class LinkEditorComponent {
|
|
|
1314
1315
|
this.link = this.data.linkData;
|
|
1315
1316
|
this.selectedType = this.link.linkType === RedirectionLinkType.Email || this.link.linkType === RedirectionLinkType.Phone ? RedirectionLinkType.External : this.link.linkType;
|
|
1316
1317
|
this.addLink = false;
|
|
1318
|
+
this.data.buttonStyle.gradientDirection = this.data.buttonStyle?.gradientDirection || GradientDirection.DOWN;
|
|
1317
1319
|
}
|
|
1318
1320
|
this.getTemplatePage();
|
|
1319
1321
|
}
|
|
@@ -1452,11 +1454,11 @@ class ButtonEditorDirective {
|
|
|
1452
1454
|
}
|
|
1453
1455
|
ngOnInit() {
|
|
1454
1456
|
if (this.appButtonEditor) {
|
|
1455
|
-
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';
|
|
1456
1458
|
this.setupEventListeners();
|
|
1457
1459
|
}
|
|
1458
1460
|
else {
|
|
1459
|
-
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';
|
|
1460
1462
|
}
|
|
1461
1463
|
}
|
|
1462
1464
|
ngOnChanges() {
|
|
@@ -1474,7 +1476,7 @@ class ButtonEditorDirective {
|
|
|
1474
1476
|
this.mouseLeaveSub = fromEvent(this.el.nativeElement, 'mouseleave')
|
|
1475
1477
|
.pipe(debounceTime(100))
|
|
1476
1478
|
.subscribe(() => {
|
|
1477
|
-
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';
|
|
1478
1480
|
});
|
|
1479
1481
|
this.clickSub = fromEvent(this.el.nativeElement, 'click')
|
|
1480
1482
|
.pipe(filter(() => !this.matDialog.openDialogs.length))
|
|
@@ -5957,6 +5959,9 @@ class ImageGridSectionComponent extends BaseSection {
|
|
|
5957
5959
|
super();
|
|
5958
5960
|
this._eventService = _eventService;
|
|
5959
5961
|
this._mainContainer = null;
|
|
5962
|
+
this.isOverflowing = false;
|
|
5963
|
+
this.atStart = true;
|
|
5964
|
+
this.atEnd = false;
|
|
5960
5965
|
}
|
|
5961
5966
|
ngOnInit() {
|
|
5962
5967
|
this.content = this.data?.content;
|
|
@@ -5980,10 +5985,59 @@ class ImageGridSectionComponent extends BaseSection {
|
|
|
5980
5985
|
getLength() {
|
|
5981
5986
|
return this.content?.listItem?.data?.length || 0;
|
|
5982
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
|
+
}
|
|
5983
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 }); }
|
|
5984
|
-
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:
|
|
5985
6039
|
//directive
|
|
5986
|
-
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"] }] }); }
|
|
5987
6041
|
}
|
|
5988
6042
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageGridSectionComponent, decorators: [{
|
|
5989
6043
|
type: Component,
|
|
@@ -6017,8 +6071,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
6017
6071
|
ImageEditorDirective,
|
|
6018
6072
|
SpacingHorizontalDirective,
|
|
6019
6073
|
SimpoWrapComntainer,
|
|
6020
|
-
|
|
6021
|
-
|
|
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: [{
|
|
6022
6080
|
type: Input
|
|
6023
6081
|
}], index: [{
|
|
6024
6082
|
type: Input
|
|
@@ -6894,7 +6952,7 @@ class checkItemAlreadyAdded {
|
|
|
6894
6952
|
class RestService {
|
|
6895
6953
|
constructor(http,
|
|
6896
6954
|
// private readonly eventService: EventsService,
|
|
6897
|
-
BASE_URL, ECOMMERCE_URL, CMIS_URL, cookieService, storage, PASSBOOK_URL) {
|
|
6955
|
+
BASE_URL, ECOMMERCE_URL, CMIS_URL, cookieService, storage, PASSBOOK_URL, APPOINTMENT_URL) {
|
|
6898
6956
|
this.http = http;
|
|
6899
6957
|
this.BASE_URL = BASE_URL;
|
|
6900
6958
|
this.ECOMMERCE_URL = ECOMMERCE_URL;
|
|
@@ -6902,6 +6960,7 @@ class RestService {
|
|
|
6902
6960
|
this.cookieService = cookieService;
|
|
6903
6961
|
this.storage = storage;
|
|
6904
6962
|
this.PASSBOOK_URL = PASSBOOK_URL;
|
|
6963
|
+
this.APPOINTMENT_URL = APPOINTMENT_URL;
|
|
6905
6964
|
// private BASE_URL: string = "https://dev-api.simpo.ai/";
|
|
6906
6965
|
// private ECOMMERCE_URL: string = "https://dev-ecommerce.simpo.ai/";
|
|
6907
6966
|
// private CMIS_URL: string = "https://api-cmis.tejsoft.com/"; //production
|
|
@@ -6909,7 +6968,6 @@ class RestService {
|
|
|
6909
6968
|
// private CMIS_URL: string = "https://stageapi-cmis.tejsoft.com/"; //stage
|
|
6910
6969
|
this.environmentTypeSubscriber = null;
|
|
6911
6970
|
this.isJewellery = false;
|
|
6912
|
-
this.APPOINTMENT_URL = "https://prod-appointment.simpo.ai/";
|
|
6913
6971
|
this.orraBaseUrl = 'https://stageapi-orra.letsmobility.com/';
|
|
6914
6972
|
// this.environmentTypeSubscriber = this.eventService.environmentType.subscribe((response) => {
|
|
6915
6973
|
// if (response == "DEV") {
|
|
@@ -7407,7 +7465,7 @@ class RestService {
|
|
|
7407
7465
|
getAppointmentPaymentStatus(orderId) {
|
|
7408
7466
|
return this.http.get(this.APPOINTMENT_URL + `payment/verify/status?orderId=${orderId}`);
|
|
7409
7467
|
}
|
|
7410
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestService, deps: [{ token: i1.HttpClient }, { token: API_URL }, { token: ECOMMERCE_URL }, { token: CMIS_URL }, { token: i2$3.CookieService }, { token: LOCAL_STORAGE }, { token: PASSBOOK_URL }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
7468
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestService, deps: [{ token: i1.HttpClient }, { token: API_URL }, { token: ECOMMERCE_URL }, { token: CMIS_URL }, { token: i2$3.CookieService }, { token: LOCAL_STORAGE }, { token: PASSBOOK_URL }, { token: APPOINTMENT_URL }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
7411
7469
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestService, providedIn: 'root' }); }
|
|
7412
7470
|
}
|
|
7413
7471
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestService, decorators: [{
|
|
@@ -7430,6 +7488,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
7430
7488
|
}] }, { type: undefined, decorators: [{
|
|
7431
7489
|
type: Inject,
|
|
7432
7490
|
args: [PASSBOOK_URL]
|
|
7491
|
+
}] }, { type: undefined, decorators: [{
|
|
7492
|
+
type: Inject,
|
|
7493
|
+
args: [APPOINTMENT_URL]
|
|
7433
7494
|
}] }] });
|
|
7434
7495
|
|
|
7435
7496
|
class Cart {
|
|
@@ -10777,7 +10838,11 @@ class BlogListComponent extends BaseSection {
|
|
|
10777
10838
|
}
|
|
10778
10839
|
ngOnInit() {
|
|
10779
10840
|
for (let blog of this.responseData) {
|
|
10841
|
+
console.log(blog);
|
|
10780
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']);
|
|
10781
10846
|
}
|
|
10782
10847
|
this.style = this.data?.styles;
|
|
10783
10848
|
this.blogContent = this.data?.content;
|
|
@@ -10800,7 +10865,7 @@ class BlogListComponent extends BaseSection {
|
|
|
10800
10865
|
}, 100);
|
|
10801
10866
|
}
|
|
10802
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 }); }
|
|
10803
|
-
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"] }] }); }
|
|
10804
10869
|
}
|
|
10805
10870
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BlogListComponent, decorators: [{
|
|
10806
10871
|
type: Component,
|
|
@@ -10817,7 +10882,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
10817
10882
|
HoverDirective,
|
|
10818
10883
|
HoverElementsComponent,
|
|
10819
10884
|
MatIcon, SvgDividerComponent,
|
|
10820
|
-
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"] }]
|
|
10821
10886
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { responseData: [{
|
|
10822
10887
|
type: Input
|
|
10823
10888
|
}], index: [{
|
|
@@ -11765,11 +11830,11 @@ class ViewBlogComponent {
|
|
|
11765
11830
|
// this._eventService.toggleEditorEvent.emit(false);
|
|
11766
11831
|
}
|
|
11767
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 }); }
|
|
11768
|
-
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"] }] }); }
|
|
11769
11834
|
}
|
|
11770
11835
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ViewBlogComponent, decorators: [{
|
|
11771
11836
|
type: Component,
|
|
11772
|
-
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"] }]
|
|
11773
11838
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { responseData: [{
|
|
11774
11839
|
type: Input
|
|
11775
11840
|
}] } });
|
|
@@ -13120,7 +13185,7 @@ class AppointmentBookingComponent {
|
|
|
13120
13185
|
this.router.navigate(['/admin/appointments/list-appointments']);
|
|
13121
13186
|
}
|
|
13122
13187
|
else {
|
|
13123
|
-
this.router.navigate(['
|
|
13188
|
+
this.router.navigate(['']);
|
|
13124
13189
|
}
|
|
13125
13190
|
}
|
|
13126
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 }); }
|
|
@@ -15610,7 +15675,7 @@ class HeaderSectionComponent {
|
|
|
15610
15675
|
});
|
|
15611
15676
|
}
|
|
15612
15677
|
goToStores() {
|
|
15613
|
-
this.router.navigate(['/
|
|
15678
|
+
this.router.navigate(['/store-list']);
|
|
15614
15679
|
}
|
|
15615
15680
|
applyFilterToList(obj, type) {
|
|
15616
15681
|
if (type == 'price') {
|
|
@@ -15653,7 +15718,7 @@ class HeaderSectionComponent {
|
|
|
15653
15718
|
this.router.navigate(['/login']);
|
|
15654
15719
|
}
|
|
15655
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 }); }
|
|
15656
|
-
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"] }] }); }
|
|
15657
15722
|
}
|
|
15658
15723
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, decorators: [{
|
|
15659
15724
|
type: Component,
|
|
@@ -15677,7 +15742,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
15677
15742
|
SpacingHorizontalDirective,
|
|
15678
15743
|
MovingTextComponent,
|
|
15679
15744
|
ContentFitDirective,
|
|
15680
|
-
], 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"] }]
|
|
15681
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: [{
|
|
15682
15747
|
type: Inject,
|
|
15683
15748
|
args: [LOCAL_STORAGE]
|
|
@@ -21872,6 +21937,9 @@ class StoreListComponent extends BaseSection {
|
|
|
21872
21937
|
this.storePayload.pincode = this.pincode;
|
|
21873
21938
|
this.getStoreDetails();
|
|
21874
21939
|
}
|
|
21940
|
+
get stylesLayout() {
|
|
21941
|
+
return { ...this.styles?.layout };
|
|
21942
|
+
}
|
|
21875
21943
|
getStoreDetails() {
|
|
21876
21944
|
this.submit = true;
|
|
21877
21945
|
this.loader = true;
|
|
@@ -21939,7 +22007,7 @@ class StoreListComponent extends BaseSection {
|
|
|
21939
22007
|
return `rgba(${r}, ${g}, ${b}, ${opacity / 100})`;
|
|
21940
22008
|
}
|
|
21941
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 }); }
|
|
21942
|
-
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"] }] }); }
|
|
21943
22011
|
}
|
|
21944
22012
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StoreListComponent, decorators: [{
|
|
21945
22013
|
type: Component,
|
|
@@ -21956,7 +22024,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
21956
22024
|
NgxSkeletonLoaderModule,
|
|
21957
22025
|
ButtonEditorDirective,
|
|
21958
22026
|
ColorDirective,
|
|
21959
|
-
], 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"] }]
|
|
21960
22030
|
}], ctorParameters: () => [{ type: RestService }, { type: i2$2.Router }], propDecorators: { data: [{
|
|
21961
22031
|
type: Input
|
|
21962
22032
|
}], edit: [{
|
|
@@ -22035,8 +22105,11 @@ class StorePageComponent extends BaseSection {
|
|
|
22035
22105
|
dialNumber(phone) {
|
|
22036
22106
|
window.location.href = `tel:${phone}`;
|
|
22037
22107
|
}
|
|
22108
|
+
get stylesLayout() {
|
|
22109
|
+
return { ...this.styles?.layout };
|
|
22110
|
+
}
|
|
22038
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 }); }
|
|
22039
|
-
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 }] }); }
|
|
22040
22113
|
}
|
|
22041
22114
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StorePageComponent, decorators: [{
|
|
22042
22115
|
type: Component,
|
|
@@ -22055,7 +22128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
22055
22128
|
SpacingHorizontalDirective,
|
|
22056
22129
|
MatIcon,
|
|
22057
22130
|
NgxSkeletonLoaderModule
|
|
22058
|
-
], 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"] }]
|
|
22059
22132
|
}], ctorParameters: () => [{ type: RestService }, { type: i2$2.ActivatedRoute }], propDecorators: { data: [{
|
|
22060
22133
|
type: Input
|
|
22061
22134
|
}], edit: [{
|
|
@@ -22976,5 +23049,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
22976
23049
|
* Generated bundle index. Do not edit.
|
|
22977
23050
|
*/
|
|
22978
23051
|
|
|
22979
|
-
export { API_URL, AddNewSectionComponent, AlignContent, AlignmentDirective, AnimationDirective, AppointmentBookingComponent, AppointmentFormComponent, AuthenticateUserComponent, AuthenticationRequiredComponent, BANNERALIGNMENT, BANNERHALIGN, BUCKET_URL, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BookAppointmentComponent, BorderDirective, ButtonDirectiveDirective, CMIS_URL, CarouselBannerComponent, Cart, CartComponent, Category, CategoryProductComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, CustomerReviewComponent, DeviderType, ECOMMERCE_URL, EndUserService, EnrollmentFormComponent, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedCollectionComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterComponent, FooterSectionComponent, FooterType, FooterTypes, GradientDirection, HALIGN, HEADER_STYLING, HeaderButtonStyle, HeaderSectionComponent, HeaderTextComponent, Header_Type, HeightDirective, HoverAnimationDirective, HoverDirective, IconDirectiveDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LOCAL_STORAGE, LocationSectionComponent, LogoGalleryComponent, LogoShowcaseComponent, MapType, MergeHeaderDirective, MovingTextComponent, NavbarSectionComponent, NewCollectionComponent, NewServicesComponent, NewTestimonialsComponent, NewsLetterComponentComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, PASSBOOK_URL, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCardTheme, ProductCategoryListComponent, ProductDescComponent, ProductListComponent, PropertyComponentComponent, PropertyListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, RegistrationFormComponent, RemoveCarouselDirective, ReturnsCalculatorComponent, SPACING$1 as SPACING, SPACINGALIGN, SanitizeHtmlPipe, SchemeDetailComponent, SchemesComponent, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, SpacingAroundDirective, SpacingDirective, StoreListComponent, StorePageComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TestimonialVideoComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, TranslateOnhoverDirective, UserProfileComponent, UspVideoSectionComponent, VALIGN, VerifyComponent, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, cartType, checkItemAlreadyAdded, contentAlignment, fitContent, fitScreen, fontSize, headlineAnimationType, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective, svgData, syncItemToServerDBRequest };
|
|
23052
|
+
export { API_URL, APPOINTMENT_URL, AddNewSectionComponent, AlignContent, AlignmentDirective, AnimationDirective, AppointmentBookingComponent, AppointmentFormComponent, AuthenticateUserComponent, AuthenticationRequiredComponent, BANNERALIGNMENT, BANNERHALIGN, BUCKET_URL, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BookAppointmentComponent, BorderDirective, ButtonDirectiveDirective, CMIS_URL, CarouselBannerComponent, Cart, CartComponent, Category, CategoryProductComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, CustomerReviewComponent, DeviderType, ECOMMERCE_URL, EndUserService, EnrollmentFormComponent, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedCollectionComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterComponent, FooterSectionComponent, FooterType, FooterTypes, GradientDirection, HALIGN, HEADER_STYLING, HeaderButtonStyle, HeaderSectionComponent, HeaderTextComponent, Header_Type, HeightDirective, HoverAnimationDirective, HoverDirective, IconDirectiveDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LOCAL_STORAGE, LocationSectionComponent, LogoGalleryComponent, LogoShowcaseComponent, MapType, MergeHeaderDirective, MovingTextComponent, NavbarSectionComponent, NewCollectionComponent, NewServicesComponent, NewTestimonialsComponent, NewsLetterComponentComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, PASSBOOK_URL, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCardTheme, ProductCategoryListComponent, ProductDescComponent, ProductListComponent, PropertyComponentComponent, PropertyListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, RegistrationFormComponent, RemoveCarouselDirective, ReturnsCalculatorComponent, SPACING$1 as SPACING, SPACINGALIGN, SanitizeHtmlPipe, SchemeDetailComponent, SchemesComponent, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, SpacingAroundDirective, SpacingDirective, StoreListComponent, StorePageComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TestimonialVideoComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, TranslateOnhoverDirective, UserProfileComponent, UspVideoSectionComponent, VALIGN, VerifyComponent, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, cartType, checkItemAlreadyAdded, contentAlignment, fitContent, fitScreen, fontSize, headlineAnimationType, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective, svgData, syncItemToServerDBRequest };
|
|
22980
23053
|
//# sourceMappingURL=simpo-component-library.mjs.map
|