simpo-component-library 3.6.597 → 3.6.599
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/ecommerce/sections/featured-products/featured-products.component.mjs +3 -3
- package/esm2022/lib/ecommerce/sections/product-desc/product-desc.component.mjs +13 -19
- package/esm2022/lib/ecommerce/sections/product-list/product-list.component.mjs +16 -62
- package/esm2022/lib/elements/image-editor/image-editor.component.mjs +3 -3
- package/esm2022/lib/elements/text-editor/text-editor.component.mjs +7 -6
- package/esm2022/lib/sections/condensed-and-gradient/condensed-and-gradient.component.mjs +68 -0
- package/esm2022/lib/sections/four-features-centered-image/four-features-centered-image.component.mjs +102 -0
- package/esm2022/lib/sections/four-features-centered-image/four-features-centered-image.modal.mjs +2 -0
- package/esm2022/lib/sections/header-section/header-section.component.mjs +3 -3
- package/esm2022/lib/sections/header-text/header-text.component.mjs +3 -3
- package/esm2022/lib/sections/image-background/image-background/image-background.component.mjs +11 -8
- package/esm2022/lib/sections/overlapping-image/overlapping-image.component.mjs +12 -9
- package/esm2022/public-api.mjs +3 -1
- package/fesm2022/simpo-component-library.mjs +176 -233
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/ecommerce/sections/product-desc/product-desc.component.d.ts +1 -3
- package/lib/ecommerce/sections/product-list/product-list.component.d.ts +1 -5
- package/lib/sections/condensed-and-gradient/condensed-and-gradient.component.d.ts +19 -0
- package/lib/sections/four-features-centered-image/four-features-centered-image.component.d.ts +26 -0
- package/lib/sections/four-features-centered-image/four-features-centered-image.modal.d.ts +20 -0
- package/lib/sections/image-background/image-background/image-background.component.d.ts +3 -3
- package/lib/sections/overlapping-image/overlapping-image.component.d.ts +4 -4
- package/package.json +1 -1
- package/public-api.d.ts +2 -0
- package/simpo-component-library-3.6.599.tgz +0 -0
- package/esm2022/lib/services/analytics.service.mjs +0 -152
- package/lib/services/analytics.service.d.ts +0 -31
- package/simpo-component-library-3.6.597.tgz +0 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i4 from '@angular/common';
|
|
2
|
-
import { CommonModule, isPlatformBrowser, NgStyle, NgFor, DatePipe, NgIf
|
|
2
|
+
import { CommonModule, isPlatformBrowser, NgStyle, NgFor, DatePipe, NgIf } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
4
|
import { Component, Input, EventEmitter, Injectable, Directive, HostListener, InjectionToken, Inject, inject, PLATFORM_ID, ViewChild, ElementRef, Renderer2, forwardRef, Output, Pipe, Optional, NgModule, ViewChildren } from '@angular/core';
|
|
5
5
|
import { MatGridListModule } from '@angular/material/grid-list';
|
|
@@ -19,7 +19,7 @@ import * as i6 from '@angular/material/icon';
|
|
|
19
19
|
import { MatIconModule, MatIcon } from '@angular/material/icon';
|
|
20
20
|
import * as i8$1 from '@angular/cdk/scrolling';
|
|
21
21
|
import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
|
|
22
|
-
import { map, startWith, debounceTime, distinctUntilChanged, switchMap, fromEvent, filter, forkJoin, firstValueFrom
|
|
22
|
+
import { map, startWith, debounceTime, distinctUntilChanged, switchMap, fromEvent, filter, forkJoin, firstValueFrom } from 'rxjs';
|
|
23
23
|
import * as i7 from 'ng-lazyload-image';
|
|
24
24
|
import { LazyLoadImageModule } from 'ng-lazyload-image';
|
|
25
25
|
import * as i1 from '@angular/common/http';
|
|
@@ -34,7 +34,7 @@ import * as i10$1 from '@angular/material/progress-spinner';
|
|
|
34
34
|
import { MatProgressSpinner, MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
35
35
|
import { CdkDrag, CdkDragPlaceholder, moveItemInArray } from '@angular/cdk/drag-drop';
|
|
36
36
|
import * as i2$2 from '@angular/router';
|
|
37
|
-
import { RouterLink
|
|
37
|
+
import { RouterLink } from '@angular/router';
|
|
38
38
|
import * as i1$2 from '@angular/platform-browser';
|
|
39
39
|
import * as i7$1 from 'ngx-skeleton-loader';
|
|
40
40
|
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
|
|
@@ -2152,9 +2152,10 @@ class TextEditorComponent {
|
|
|
2152
2152
|
if (!isPlatformBrowser(this.platformId))
|
|
2153
2153
|
return;
|
|
2154
2154
|
event.preventDefault();
|
|
2155
|
-
|
|
2156
|
-
const
|
|
2157
|
-
|
|
2155
|
+
// Get only plain text
|
|
2156
|
+
const text = event.clipboardData?.getData('text/plain') || '';
|
|
2157
|
+
// Insert as plain text
|
|
2158
|
+
document.execCommand('insertText', false, text);
|
|
2158
2159
|
}
|
|
2159
2160
|
stripStyles(html) {
|
|
2160
2161
|
const doc = new DOMParser().parseFromString(html, 'text/html');
|
|
@@ -2174,7 +2175,7 @@ class TextEditorComponent {
|
|
|
2174
2175
|
return this.value;
|
|
2175
2176
|
}
|
|
2176
2177
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextEditorComponent, deps: [{ token: ElementServiceService }, { token: PLATFORM_ID }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2177
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextEditorComponent, isStandalone: true, selector: "simpo-text-editor", inputs: { value: "value", editable: "editable", sectionId: "sectionId", label: "label", type: "type" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "editor", first: true, predicate: ["editor"], descendants: true }, { propertyName: "colorPicker", first: true, predicate: ["colorPicker"], descendants: true }, { propertyName: "parentElement", first: true, predicate: ["parentElement"], descendants: true }, { propertyName: "suggestion", first: true, predicate: ["suggestion"], descendants: true }], ngImport: i0, template: "<div class=\"editor-container\" [ngClass]=\"{'border': editable}\" #parentElement\r\n [class.d-none]=\"!editable && getText() == ''\">\r\n <div [contenteditable]=\"editable\" [(ngModel)]=\"value\" class=\"editable-text\" (mouseup)=\"showToolbar($event)\" #editor\r\n (ngModelChange)=\"updateText($event)\" (mousedown)=\"hideToolbar($event)\" (paste)=\"onPaste($event)\">\r\n </div>\r\n\r\n <div class=\"toolbar\" *ngIf=\"editable && show\" [ngStyle]=\"{'top.px': toolbarY}\"\r\n [style.right]=\"rightZero ? '0px' : 'auto'\" [style.left]=\"!rightZero ? '0px' : 'auto'\" #toolbar cdkDrag>\r\n <!-- <select class=\"tool\" (change)=\"onFormatChange($event)\" [(ngModel)]=\"toolbarData.selectedHeading\">\r\n <option value=\"H1\">Heading1</option>\r\n <option value=\"H2\">Heading2</option>\r\n <option value=\"H3\">Heading3</option>\r\n <option value=\"div\">Text</option>\r\n </select> -->\r\n <button class=\"tool\"> <mat-icon cdkDragHandle>drag_indicator</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('bold')\" [ngClass]=\"{'selectedTool': toolbarData.isBold}\"><mat-icon>\r\n format_bold</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('italic')\" [ngClass]=\"{'selectedTool': toolbarData.isItalic}\"><mat-icon>\r\n format_italic</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('underline')\" [ngClass]=\"{'selectedTool': toolbarData.isUnderlined}\"\r\n *ngIf=\"selectedColorType === 'SOLID'\"><mat-icon> format_underlined</mat-icon></button>\r\n\r\n <select class=\"tool\" (change)=\"changeFontSize($event)\" [(ngModel)]=\"toolbarData.selectedSize\">\r\n <option value=\"\" selected>Default</option>\r\n <option value=\"clamp(0.75rem, 2vw, 1rem)\">Small</option>\r\n <option value=\"clamp(0.75rem, 2vw, 1.25rem)\">Medium</option>\r\n <option value=\"clamp(1rem, 3vw, 1.5rem)\">Semi Large</option>\r\n <option value=\"clamp(1.25rem, 4vw, 2rem)\">Large</option>\r\n <option value=\"clamp(2rem, 5vw, 3rem)\">Extra Large</option>\r\n <option value=\"clamp(3.1rem, 7vw, 4.5rem)\">Huge</option>\r\n </select>\r\n\r\n <button class=\"tool\" (click)=\"formatText('insertOrderedList')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertOrderedList'}\"><mat-icon>format_list_numbered</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('insertUnorderedList')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertUnorderedList'}\"><mat-icon>\r\n format_list_bulleted</mat-icon></button>\r\n\r\n <button class=\"tool\" (click)=\"formatText('justifyLeft')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyLeft'}\"><mat-icon>\r\n format_align_left</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('justifyCenter')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyCenter'}\"><mat-icon>\r\n format_align_center</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('justifyRight')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyRight'}\"><mat-icon>\r\n format_align_right</mat-icon></button>\r\n\r\n <div class=\"colorType\">\r\n <button class=\"solid\" [ngClass]=\"{'solidColorSelected': selectedColorType === 'SOLID'}\"\r\n (mousedown)=\"rememberSelection($event)\" (click)=\"setColorMode('SOLID')\">\r\n Solid\r\n </button>\r\n <button class=\"gradient\" [ngClass]=\"{'gradientColorSelected': selectedColorType === 'GRADIENT'}\"\r\n (mousedown)=\"rememberSelection($event)\" (click)=\"setColorMode('GRADIENT')\">\r\n Gradient\r\n </button>\r\n </div>\r\n\r\n\r\n <button class=\"tool color-picker-btn\" (click)=\"openColorPicker()\" *ngIf=\"selectedColorType === 'SOLID'\">\r\n <mat-icon>format_color_text</mat-icon>\r\n <input type=\"color\" #colorPicker class=\"hidden-color-picker\" (input)=\"changeColor($event)\"\r\n [(ngModel)]=\"toolbarData.selectedColor\">\r\n </button>\r\n\r\n <div class=\"colorType\" *ngIf=\"selectedColorType === 'GRADIENT'\">\r\n <button class=\"tool color-picker-btn\" (click)=\"openColorPicker(); primaryColorPicker.click()\">\r\n <mat-icon [style.color]=\"primaryColor\">format_color_text</mat-icon>\r\n <input type=\"color\" #primaryColorPicker class=\"hidden-color-picker\" (input)=\"changeGradientColor()\"\r\n [(ngModel)]=\"primaryColor\">\r\n </button>\r\n <button class=\"tool color-picker-btn\" (click)=\"openColorPicker(); secondaryColorPicker.click()\">\r\n <mat-icon [style.color]=\"secondaryColor\">format_color_text</mat-icon>\r\n <input type=\"color\" #secondaryColorPicker class=\"hidden-color-picker\" (input)=\"changeGradientColor()\"\r\n [(ngModel)]=\"secondaryColor\">\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"suggestion-box\" [ngStyle]=\"{'top.px': suggestionY}\" [style.right]=\"rightZero ? '0px' : 'auto'\"\r\n [style.left]=\"!rightZero ? '0px' : 'auto'\" *ngIf=\"editable && label && showSuggestion\" #suggestion>\r\n <div class=\"suggestion\" (click)=\"regenerateText()\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/887493c1742273970151Frame%201244831740.png\"\r\n alt=\"\">\r\n <div>\r\n <p class=\"name\">Regenerate Text</p>\r\n <p class=\"desc\">Get a fresh variation of a current text</p>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.editor-container{position:relative;display:inline-block;overflow:visible;width:100%}.editor-container div{outline:none}.editable-text{padding:4px;cursor:text}.toolbar{position:absolute;background:#fff;box-shadow:0 2px 5px #0003;display:flex;gap:5px;align-items:center;z-index:100000;box-shadow:#00000029 0 1px 4px;padding:5px 15px;border-radius:22px}.toolbar:hover{border:1px solid #ccc}.toolbar button{background:none;border:none;padding:5px 8px;cursor:pointer;font-weight:700;display:flex;align-items:center}.toolbar button:hover{background:#ddd}.toolbar select{padding:3px;border:none;outline:none;font-size:14px;font-weight:600;cursor:pointer}.toolbar input[type=color]{border:none;width:30px;height:30px;padding:0;cursor:pointer}.color-picker-btn{position:relative;background:none;border:none;cursor:pointer;padding:5px}.hidden-color-picker{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;cursor:pointer}.border{border:none!important;border-radius:8px}.border:hover{border:1px solid #b9b9b9!important;border-radius:8px}.selectedTool{background:var(--primary-bg-color)!important;color:#fff;border-radius:5px}p{margin-bottom:0rem!important}.suggestion-box{position:absolute;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #0003;z-index:10000;box-shadow:#00000029 0 1px 4px;padding:5px 15px;border-radius:10px}.suggestion{display:flex;gap:10px;width:307px;align-items:center;cursor:pointer}.suggestion img{border-radius:5px;width:32px;height:32px;background:#faf1fc;padding:3px}.suggestion .name{color:#000;font-family:var(--primary-font-family)}.suggestion .desc{color:#000;font-size:12px;color:#918585;font-family:var(--primary-font-family)}.colorType{display:flex;border:1px solid #E9E9E9;border-radius:5px;height:35px}.colorType .solid{border-right:1px solid #E9E9E9;font-size:14px!important;font-family:Mulish}.colorType .gradient{font-size:14px!important;font-family:Mulish}.solidColorSelected{background:var(--primary-bg-color)!important;color:#fff;border-top-left-radius:5px;border-bottom-left-radius:5px}.gradientColorSelected{background:var(--primary-bg-color)!important;color:#fff;border-top-right-radius:5px;border-bottom-right-radius:5px}@media screen and (max-width: 475px){.toolbar{max-width:100%;flex-wrap:wrap;row-gap:15px}.tool{width:max-content!important}}.drag-icon{color:var(--primary-bg-color)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "directive", type: ContenteditableValueAccessor, selector: "[contenteditable][ngModel]", inputs: ["contenteditable"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] }); }
|
|
2178
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextEditorComponent, isStandalone: true, selector: "simpo-text-editor", inputs: { value: "value", editable: "editable", sectionId: "sectionId", label: "label", type: "type" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "editor", first: true, predicate: ["editor"], descendants: true }, { propertyName: "colorPicker", first: true, predicate: ["colorPicker"], descendants: true }, { propertyName: "parentElement", first: true, predicate: ["parentElement"], descendants: true }, { propertyName: "suggestion", first: true, predicate: ["suggestion"], descendants: true }], ngImport: i0, template: "<div class=\"editor-container\" [ngClass]=\"{'border': editable}\" #parentElement\r\n [class.d-none]=\"!editable && getText() == ''\">\r\n <div [contenteditable]=\"editable\" [(ngModel)]=\"value\" class=\"editable-text p-0\" (mouseup)=\"showToolbar($event)\" #editor\r\n (ngModelChange)=\"updateText($event)\" (mousedown)=\"hideToolbar($event)\" (paste)=\"onPaste($event)\">\r\n </div>\r\n\r\n <div class=\"toolbar\" *ngIf=\"editable && show\" [ngStyle]=\"{'top.px': toolbarY}\"\r\n [style.right]=\"rightZero ? '0px' : 'auto'\" [style.left]=\"!rightZero ? '0px' : 'auto'\" #toolbar cdkDrag>\r\n <!-- <select class=\"tool\" (change)=\"onFormatChange($event)\" [(ngModel)]=\"toolbarData.selectedHeading\">\r\n <option value=\"H1\">Heading1</option>\r\n <option value=\"H2\">Heading2</option>\r\n <option value=\"H3\">Heading3</option>\r\n <option value=\"div\">Text</option>\r\n </select> -->\r\n <button class=\"tool\"> <mat-icon cdkDragHandle>drag_indicator</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('bold')\" [ngClass]=\"{'selectedTool': toolbarData.isBold}\"><mat-icon>\r\n format_bold</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('italic')\" [ngClass]=\"{'selectedTool': toolbarData.isItalic}\"><mat-icon>\r\n format_italic</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('underline')\" [ngClass]=\"{'selectedTool': toolbarData.isUnderlined}\"\r\n *ngIf=\"selectedColorType === 'SOLID'\"><mat-icon> format_underlined</mat-icon></button>\r\n\r\n <select class=\"tool\" (change)=\"changeFontSize($event)\" [(ngModel)]=\"toolbarData.selectedSize\">\r\n <option value=\"\" selected>Default</option>\r\n <option value=\"clamp(0.75rem, 2vw, 1rem)\">Small</option>\r\n <option value=\"clamp(0.75rem, 2vw, 1.25rem)\">Medium</option>\r\n <option value=\"clamp(1rem, 3vw, 1.5rem)\">Semi Large</option>\r\n <option value=\"clamp(1.25rem, 4vw, 2rem)\">Large</option>\r\n <option value=\"clamp(2rem, 5vw, 3rem)\">Extra Large</option>\r\n <option value=\"clamp(3.1rem, 7vw, 4.5rem)\">Huge</option>\r\n </select>\r\n\r\n <button class=\"tool\" (click)=\"formatText('insertOrderedList')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertOrderedList'}\"><mat-icon>format_list_numbered</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('insertUnorderedList')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertUnorderedList'}\"><mat-icon>\r\n format_list_bulleted</mat-icon></button>\r\n\r\n <button class=\"tool\" (click)=\"formatText('justifyLeft')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyLeft'}\"><mat-icon>\r\n format_align_left</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('justifyCenter')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyCenter'}\"><mat-icon>\r\n format_align_center</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('justifyRight')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyRight'}\"><mat-icon>\r\n format_align_right</mat-icon></button>\r\n\r\n <div class=\"colorType\">\r\n <button class=\"solid\" [ngClass]=\"{'solidColorSelected': selectedColorType === 'SOLID'}\"\r\n (mousedown)=\"rememberSelection($event)\" (click)=\"setColorMode('SOLID')\">\r\n Solid\r\n </button>\r\n <button class=\"gradient\" [ngClass]=\"{'gradientColorSelected': selectedColorType === 'GRADIENT'}\"\r\n (mousedown)=\"rememberSelection($event)\" (click)=\"setColorMode('GRADIENT')\">\r\n Gradient\r\n </button>\r\n </div>\r\n\r\n\r\n <button class=\"tool color-picker-btn\" (click)=\"openColorPicker()\" *ngIf=\"selectedColorType === 'SOLID'\">\r\n <mat-icon>format_color_text</mat-icon>\r\n <input type=\"color\" #colorPicker class=\"hidden-color-picker\" (input)=\"changeColor($event)\"\r\n [(ngModel)]=\"toolbarData.selectedColor\">\r\n </button>\r\n\r\n <div class=\"colorType\" *ngIf=\"selectedColorType === 'GRADIENT'\">\r\n <button class=\"tool color-picker-btn\" (click)=\"openColorPicker(); primaryColorPicker.click()\">\r\n <mat-icon [style.color]=\"primaryColor\">format_color_text</mat-icon>\r\n <input type=\"color\" #primaryColorPicker class=\"hidden-color-picker\" (input)=\"changeGradientColor()\"\r\n [(ngModel)]=\"primaryColor\">\r\n </button>\r\n <button class=\"tool color-picker-btn\" (click)=\"openColorPicker(); secondaryColorPicker.click()\">\r\n <mat-icon [style.color]=\"secondaryColor\">format_color_text</mat-icon>\r\n <input type=\"color\" #secondaryColorPicker class=\"hidden-color-picker\" (input)=\"changeGradientColor()\"\r\n [(ngModel)]=\"secondaryColor\">\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"suggestion-box\" [ngStyle]=\"{'top.px': suggestionY}\" [style.right]=\"rightZero ? '0px' : 'auto'\"\r\n [style.left]=\"!rightZero ? '0px' : 'auto'\" *ngIf=\"editable && label && showSuggestion\" #suggestion>\r\n <div class=\"suggestion\" (click)=\"regenerateText()\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/887493c1742273970151Frame%201244831740.png\"\r\n alt=\"\">\r\n <div>\r\n <p class=\"name\">Regenerate Text</p>\r\n <p class=\"desc\">Get a fresh variation of a current text</p>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.editor-container{position:relative;display:inline-block;overflow:visible;width:100%}.editor-container div{outline:none}.editable-text{line-height:unset;cursor:text}.toolbar{position:absolute;background:#fff;box-shadow:0 2px 5px #0003;display:flex;gap:5px;align-items:center;z-index:100000;box-shadow:#00000029 0 1px 4px;padding:5px 15px;border-radius:22px}.toolbar:hover{border:1px solid #ccc}.toolbar button{background:none;border:none;padding:5px 8px;cursor:pointer;font-weight:700;display:flex;align-items:center}.toolbar button:hover{background:#ddd}.toolbar select{padding:3px;border:none;outline:none;font-size:14px;font-weight:600;cursor:pointer}.toolbar input[type=color]{border:none;width:30px;height:30px;padding:0;cursor:pointer}.color-picker-btn{position:relative;background:none;border:none;cursor:pointer;padding:5px}.hidden-color-picker{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;cursor:pointer}.border{border:none!important;border-radius:8px}.border:hover{border:1px solid #b9b9b9!important;border-radius:8px}.selectedTool{background:var(--primary-bg-color)!important;color:#fff;border-radius:5px}p{margin-bottom:0rem!important}.suggestion-box{position:absolute;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #0003;z-index:10000;box-shadow:#00000029 0 1px 4px;padding:5px 15px;border-radius:10px}.suggestion{display:flex;gap:10px;width:307px;align-items:center;cursor:pointer}.suggestion img{border-radius:5px;width:32px;height:32px;background:#faf1fc;padding:3px}.suggestion .name{color:#000;font-family:var(--primary-font-family)}.suggestion .desc{color:#000;font-size:12px;color:#918585;font-family:var(--primary-font-family)}.colorType{display:flex;border:1px solid #E9E9E9;border-radius:5px;height:35px}.colorType .solid{border-right:1px solid #E9E9E9;font-size:14px!important;font-family:Mulish}.colorType .gradient{font-size:14px!important;font-family:Mulish}.solidColorSelected{background:var(--primary-bg-color)!important;color:#fff;border-top-left-radius:5px;border-bottom-left-radius:5px}.gradientColorSelected{background:var(--primary-bg-color)!important;color:#fff;border-top-right-radius:5px;border-bottom-right-radius:5px}@media screen and (max-width: 475px){.toolbar{max-width:100%;flex-wrap:wrap;row-gap:15px}.tool{width:max-content!important}}.drag-icon{color:var(--primary-bg-color)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "directive", type: ContenteditableValueAccessor, selector: "[contenteditable][ngModel]", inputs: ["contenteditable"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] }); }
|
|
2178
2179
|
}
|
|
2179
2180
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextEditorComponent, decorators: [{
|
|
2180
2181
|
type: Component,
|
|
@@ -2184,7 +2185,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2184
2185
|
ContenteditableValueAccessor,
|
|
2185
2186
|
MatIconModule,
|
|
2186
2187
|
CdkDrag
|
|
2187
|
-
], template: "<div class=\"editor-container\" [ngClass]=\"{'border': editable}\" #parentElement\r\n [class.d-none]=\"!editable && getText() == ''\">\r\n <div [contenteditable]=\"editable\" [(ngModel)]=\"value\" class=\"editable-text\" (mouseup)=\"showToolbar($event)\" #editor\r\n (ngModelChange)=\"updateText($event)\" (mousedown)=\"hideToolbar($event)\" (paste)=\"onPaste($event)\">\r\n </div>\r\n\r\n <div class=\"toolbar\" *ngIf=\"editable && show\" [ngStyle]=\"{'top.px': toolbarY}\"\r\n [style.right]=\"rightZero ? '0px' : 'auto'\" [style.left]=\"!rightZero ? '0px' : 'auto'\" #toolbar cdkDrag>\r\n <!-- <select class=\"tool\" (change)=\"onFormatChange($event)\" [(ngModel)]=\"toolbarData.selectedHeading\">\r\n <option value=\"H1\">Heading1</option>\r\n <option value=\"H2\">Heading2</option>\r\n <option value=\"H3\">Heading3</option>\r\n <option value=\"div\">Text</option>\r\n </select> -->\r\n <button class=\"tool\"> <mat-icon cdkDragHandle>drag_indicator</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('bold')\" [ngClass]=\"{'selectedTool': toolbarData.isBold}\"><mat-icon>\r\n format_bold</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('italic')\" [ngClass]=\"{'selectedTool': toolbarData.isItalic}\"><mat-icon>\r\n format_italic</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('underline')\" [ngClass]=\"{'selectedTool': toolbarData.isUnderlined}\"\r\n *ngIf=\"selectedColorType === 'SOLID'\"><mat-icon> format_underlined</mat-icon></button>\r\n\r\n <select class=\"tool\" (change)=\"changeFontSize($event)\" [(ngModel)]=\"toolbarData.selectedSize\">\r\n <option value=\"\" selected>Default</option>\r\n <option value=\"clamp(0.75rem, 2vw, 1rem)\">Small</option>\r\n <option value=\"clamp(0.75rem, 2vw, 1.25rem)\">Medium</option>\r\n <option value=\"clamp(1rem, 3vw, 1.5rem)\">Semi Large</option>\r\n <option value=\"clamp(1.25rem, 4vw, 2rem)\">Large</option>\r\n <option value=\"clamp(2rem, 5vw, 3rem)\">Extra Large</option>\r\n <option value=\"clamp(3.1rem, 7vw, 4.5rem)\">Huge</option>\r\n </select>\r\n\r\n <button class=\"tool\" (click)=\"formatText('insertOrderedList')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertOrderedList'}\"><mat-icon>format_list_numbered</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('insertUnorderedList')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertUnorderedList'}\"><mat-icon>\r\n format_list_bulleted</mat-icon></button>\r\n\r\n <button class=\"tool\" (click)=\"formatText('justifyLeft')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyLeft'}\"><mat-icon>\r\n format_align_left</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('justifyCenter')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyCenter'}\"><mat-icon>\r\n format_align_center</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('justifyRight')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyRight'}\"><mat-icon>\r\n format_align_right</mat-icon></button>\r\n\r\n <div class=\"colorType\">\r\n <button class=\"solid\" [ngClass]=\"{'solidColorSelected': selectedColorType === 'SOLID'}\"\r\n (mousedown)=\"rememberSelection($event)\" (click)=\"setColorMode('SOLID')\">\r\n Solid\r\n </button>\r\n <button class=\"gradient\" [ngClass]=\"{'gradientColorSelected': selectedColorType === 'GRADIENT'}\"\r\n (mousedown)=\"rememberSelection($event)\" (click)=\"setColorMode('GRADIENT')\">\r\n Gradient\r\n </button>\r\n </div>\r\n\r\n\r\n <button class=\"tool color-picker-btn\" (click)=\"openColorPicker()\" *ngIf=\"selectedColorType === 'SOLID'\">\r\n <mat-icon>format_color_text</mat-icon>\r\n <input type=\"color\" #colorPicker class=\"hidden-color-picker\" (input)=\"changeColor($event)\"\r\n [(ngModel)]=\"toolbarData.selectedColor\">\r\n </button>\r\n\r\n <div class=\"colorType\" *ngIf=\"selectedColorType === 'GRADIENT'\">\r\n <button class=\"tool color-picker-btn\" (click)=\"openColorPicker(); primaryColorPicker.click()\">\r\n <mat-icon [style.color]=\"primaryColor\">format_color_text</mat-icon>\r\n <input type=\"color\" #primaryColorPicker class=\"hidden-color-picker\" (input)=\"changeGradientColor()\"\r\n [(ngModel)]=\"primaryColor\">\r\n </button>\r\n <button class=\"tool color-picker-btn\" (click)=\"openColorPicker(); secondaryColorPicker.click()\">\r\n <mat-icon [style.color]=\"secondaryColor\">format_color_text</mat-icon>\r\n <input type=\"color\" #secondaryColorPicker class=\"hidden-color-picker\" (input)=\"changeGradientColor()\"\r\n [(ngModel)]=\"secondaryColor\">\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"suggestion-box\" [ngStyle]=\"{'top.px': suggestionY}\" [style.right]=\"rightZero ? '0px' : 'auto'\"\r\n [style.left]=\"!rightZero ? '0px' : 'auto'\" *ngIf=\"editable && label && showSuggestion\" #suggestion>\r\n <div class=\"suggestion\" (click)=\"regenerateText()\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/887493c1742273970151Frame%201244831740.png\"\r\n alt=\"\">\r\n <div>\r\n <p class=\"name\">Regenerate Text</p>\r\n <p class=\"desc\">Get a fresh variation of a current text</p>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.editor-container{position:relative;display:inline-block;overflow:visible;width:100%}.editor-container div{outline:none}.editable-text{
|
|
2188
|
+
], template: "<div class=\"editor-container\" [ngClass]=\"{'border': editable}\" #parentElement\r\n [class.d-none]=\"!editable && getText() == ''\">\r\n <div [contenteditable]=\"editable\" [(ngModel)]=\"value\" class=\"editable-text p-0\" (mouseup)=\"showToolbar($event)\" #editor\r\n (ngModelChange)=\"updateText($event)\" (mousedown)=\"hideToolbar($event)\" (paste)=\"onPaste($event)\">\r\n </div>\r\n\r\n <div class=\"toolbar\" *ngIf=\"editable && show\" [ngStyle]=\"{'top.px': toolbarY}\"\r\n [style.right]=\"rightZero ? '0px' : 'auto'\" [style.left]=\"!rightZero ? '0px' : 'auto'\" #toolbar cdkDrag>\r\n <!-- <select class=\"tool\" (change)=\"onFormatChange($event)\" [(ngModel)]=\"toolbarData.selectedHeading\">\r\n <option value=\"H1\">Heading1</option>\r\n <option value=\"H2\">Heading2</option>\r\n <option value=\"H3\">Heading3</option>\r\n <option value=\"div\">Text</option>\r\n </select> -->\r\n <button class=\"tool\"> <mat-icon cdkDragHandle>drag_indicator</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('bold')\" [ngClass]=\"{'selectedTool': toolbarData.isBold}\"><mat-icon>\r\n format_bold</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('italic')\" [ngClass]=\"{'selectedTool': toolbarData.isItalic}\"><mat-icon>\r\n format_italic</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('underline')\" [ngClass]=\"{'selectedTool': toolbarData.isUnderlined}\"\r\n *ngIf=\"selectedColorType === 'SOLID'\"><mat-icon> format_underlined</mat-icon></button>\r\n\r\n <select class=\"tool\" (change)=\"changeFontSize($event)\" [(ngModel)]=\"toolbarData.selectedSize\">\r\n <option value=\"\" selected>Default</option>\r\n <option value=\"clamp(0.75rem, 2vw, 1rem)\">Small</option>\r\n <option value=\"clamp(0.75rem, 2vw, 1.25rem)\">Medium</option>\r\n <option value=\"clamp(1rem, 3vw, 1.5rem)\">Semi Large</option>\r\n <option value=\"clamp(1.25rem, 4vw, 2rem)\">Large</option>\r\n <option value=\"clamp(2rem, 5vw, 3rem)\">Extra Large</option>\r\n <option value=\"clamp(3.1rem, 7vw, 4.5rem)\">Huge</option>\r\n </select>\r\n\r\n <button class=\"tool\" (click)=\"formatText('insertOrderedList')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertOrderedList'}\"><mat-icon>format_list_numbered</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('insertUnorderedList')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertUnorderedList'}\"><mat-icon>\r\n format_list_bulleted</mat-icon></button>\r\n\r\n <button class=\"tool\" (click)=\"formatText('justifyLeft')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyLeft'}\"><mat-icon>\r\n format_align_left</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('justifyCenter')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyCenter'}\"><mat-icon>\r\n format_align_center</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('justifyRight')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyRight'}\"><mat-icon>\r\n format_align_right</mat-icon></button>\r\n\r\n <div class=\"colorType\">\r\n <button class=\"solid\" [ngClass]=\"{'solidColorSelected': selectedColorType === 'SOLID'}\"\r\n (mousedown)=\"rememberSelection($event)\" (click)=\"setColorMode('SOLID')\">\r\n Solid\r\n </button>\r\n <button class=\"gradient\" [ngClass]=\"{'gradientColorSelected': selectedColorType === 'GRADIENT'}\"\r\n (mousedown)=\"rememberSelection($event)\" (click)=\"setColorMode('GRADIENT')\">\r\n Gradient\r\n </button>\r\n </div>\r\n\r\n\r\n <button class=\"tool color-picker-btn\" (click)=\"openColorPicker()\" *ngIf=\"selectedColorType === 'SOLID'\">\r\n <mat-icon>format_color_text</mat-icon>\r\n <input type=\"color\" #colorPicker class=\"hidden-color-picker\" (input)=\"changeColor($event)\"\r\n [(ngModel)]=\"toolbarData.selectedColor\">\r\n </button>\r\n\r\n <div class=\"colorType\" *ngIf=\"selectedColorType === 'GRADIENT'\">\r\n <button class=\"tool color-picker-btn\" (click)=\"openColorPicker(); primaryColorPicker.click()\">\r\n <mat-icon [style.color]=\"primaryColor\">format_color_text</mat-icon>\r\n <input type=\"color\" #primaryColorPicker class=\"hidden-color-picker\" (input)=\"changeGradientColor()\"\r\n [(ngModel)]=\"primaryColor\">\r\n </button>\r\n <button class=\"tool color-picker-btn\" (click)=\"openColorPicker(); secondaryColorPicker.click()\">\r\n <mat-icon [style.color]=\"secondaryColor\">format_color_text</mat-icon>\r\n <input type=\"color\" #secondaryColorPicker class=\"hidden-color-picker\" (input)=\"changeGradientColor()\"\r\n [(ngModel)]=\"secondaryColor\">\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"suggestion-box\" [ngStyle]=\"{'top.px': suggestionY}\" [style.right]=\"rightZero ? '0px' : 'auto'\"\r\n [style.left]=\"!rightZero ? '0px' : 'auto'\" *ngIf=\"editable && label && showSuggestion\" #suggestion>\r\n <div class=\"suggestion\" (click)=\"regenerateText()\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/887493c1742273970151Frame%201244831740.png\"\r\n alt=\"\">\r\n <div>\r\n <p class=\"name\">Regenerate Text</p>\r\n <p class=\"desc\">Get a fresh variation of a current text</p>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.editor-container{position:relative;display:inline-block;overflow:visible;width:100%}.editor-container div{outline:none}.editable-text{line-height:unset;cursor:text}.toolbar{position:absolute;background:#fff;box-shadow:0 2px 5px #0003;display:flex;gap:5px;align-items:center;z-index:100000;box-shadow:#00000029 0 1px 4px;padding:5px 15px;border-radius:22px}.toolbar:hover{border:1px solid #ccc}.toolbar button{background:none;border:none;padding:5px 8px;cursor:pointer;font-weight:700;display:flex;align-items:center}.toolbar button:hover{background:#ddd}.toolbar select{padding:3px;border:none;outline:none;font-size:14px;font-weight:600;cursor:pointer}.toolbar input[type=color]{border:none;width:30px;height:30px;padding:0;cursor:pointer}.color-picker-btn{position:relative;background:none;border:none;cursor:pointer;padding:5px}.hidden-color-picker{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;cursor:pointer}.border{border:none!important;border-radius:8px}.border:hover{border:1px solid #b9b9b9!important;border-radius:8px}.selectedTool{background:var(--primary-bg-color)!important;color:#fff;border-radius:5px}p{margin-bottom:0rem!important}.suggestion-box{position:absolute;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #0003;z-index:10000;box-shadow:#00000029 0 1px 4px;padding:5px 15px;border-radius:10px}.suggestion{display:flex;gap:10px;width:307px;align-items:center;cursor:pointer}.suggestion img{border-radius:5px;width:32px;height:32px;background:#faf1fc;padding:3px}.suggestion .name{color:#000;font-family:var(--primary-font-family)}.suggestion .desc{color:#000;font-size:12px;color:#918585;font-family:var(--primary-font-family)}.colorType{display:flex;border:1px solid #E9E9E9;border-radius:5px;height:35px}.colorType .solid{border-right:1px solid #E9E9E9;font-size:14px!important;font-family:Mulish}.colorType .gradient{font-size:14px!important;font-family:Mulish}.solidColorSelected{background:var(--primary-bg-color)!important;color:#fff;border-top-left-radius:5px;border-bottom-left-radius:5px}.gradientColorSelected{background:var(--primary-bg-color)!important;color:#fff;border-top-right-radius:5px;border-bottom-right-radius:5px}@media screen and (max-width: 475px){.toolbar{max-width:100%;flex-wrap:wrap;row-gap:15px}.tool{width:max-content!important}}.drag-icon{color:var(--primary-bg-color)!important}\n"] }]
|
|
2188
2189
|
}], ctorParameters: () => [{ type: ElementServiceService }, { type: Object, decorators: [{
|
|
2189
2190
|
type: Inject,
|
|
2190
2191
|
args: [PLATFORM_ID]
|
|
@@ -2425,11 +2426,11 @@ class ImageEditorComponent {
|
|
|
2425
2426
|
}
|
|
2426
2427
|
}
|
|
2427
2428
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageEditorComponent, deps: [{ token: EventsService }, { token: ElementServiceService }, { token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2428
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageEditorComponent, isStandalone: true, selector: "simpo-image-editor", ngImport: i0, template: "<section class=\"main-section\">\r\n <div class=\"header-section d-flex justify-content-between align-items-center\">\r\n <div class=\"head-text\">Image Settings</div>\r\n <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\"\r\n (click)=\"dialogRef.close()\">close</mat-icon>\r\n </div>\r\n <div>\r\n <!-- <p class=\"heading mb-0\">Image</p> -->\r\n <div class=\"upload-image cp\" *ngIf=\"!imageData.url && !iconData.url\" (click)=\"updateImage()\">\r\n <img loading=\"lazy\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\r\n alt=\"\">\r\n <p class=\"upload-text mb-0\">Upload a file</p>\r\n <p class=\"upload-text mb-0\">or select an existing one</p>\r\n <span class=\"upload-text\">up to 32MB</span>\r\n </div>\r\n <div class=\"sec d-flex align-items-center\" *ngIf=\"imageData.url || iconData.url\">\r\n <ng-container *ngIf=\"!imgLoader\">\r\n <img [src]=\"imageData.url || iconData.url\" [alt]=\"imageData.altText ?? ''\"\r\n *ngIf=\"!imageData?.url?.includes('.mp4')\">\r\n <video [src]=\"imageData.url\" class=\"w-100 h-100\" *ngIf=\"imageData?.url?.includes('.mp4')\" muted loop></video>\r\n <div class=\"repalce-image cursor-pointer\" (click)=\"updateImage()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" width=\"24\"\r\n height=\"24\" class=\"icon w-4 h-4\" aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n d=\"m4 16 4.58579-4.5858c.78104-.781 2.04741-.781 2.82841 0L16 16m-2-2 1.5858-1.5858c.781-.781 2.0474-.781 2.8284 0L20 14m-6-6h.01M6 20h12c1.1046 0 2-.8954 2-2V6c0-1.10457-.8954-2-2-2H6c-1.10457 0-2 .89543-2 2v12c0 1.1046.89543 2 2 2Z\">\r\n </path>\r\n </svg>\r\n </div>\r\n\r\n <div class=\"delete-image cursor-pointer \" (click)=\"deleteImage()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"#ffffff\" viewBox=\"0 0 24 24\" width=\"24\"\r\n height=\"24\" class=\"icon h-4 w-4\" aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n d=\"m19 7-.8673 12.1425C18.0579 20.1891 17.187 21 16.1378 21H7.86224c-1.04928 0-1.92016-.8109-1.99492-1.8575L5 7m5 4v6m4-6v6m1-10V4c0-.55228-.4477-1-1-1h-4c-.55228 0-1 .44772-1 1v3M4 7h16\">\r\n </path>\r\n </svg>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"imgLoader\">\r\n <div class=\"upload_spinner d-flex w-100 h-100 justify-content-center align-items-center\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"data.showIcon\">\r\n <span class=\"p-0-10 clr-red\">Note : This Icon Feature Supports SVG and PNG in black and white format only.</span>\r\n </ng-container>\r\n <ng-container *ngIf=\"!data.showIcon\">\r\n <div class=\"w-100 p-0-10 mb-22\" *ngIf=\"imageData.hasOwnProperty('altText')\">\r\n <p class=\"heading mb-2\">Alt text</p>\r\n <input type=\"text\" placeholder=\"Enter alt text\" class=\"input-field w-100\" [(ngModel)]=\"imageData.altText\">\r\n <div class=\"sub-text\">When the image fails to load, this text will be displayed.</div>\r\n </div>\r\n\r\n <div class=\"image mb-22\" *ngIf=\"imageData.hasOwnProperty('position')\">\r\n <p class=\"heading mb-1\">Image Position</p>\r\n <div class=\"horizontal-action\">\r\n <label>Horizontal</label>\r\n <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.x\"\r\n (input)=\"horizontalPosition()\" class=\"w-75\">\r\n </div>\r\n </div>\r\n <div class=\"horizontal-action\" style=\"margin-top: 5px;\">\r\n <label>Vertical</label>\r\n <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.y\"\r\n (input)=\"horizontalPosition()\" class=\"w-75\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"groups cp px-3\">\r\n <div *ngFor=\"let type of linkType\" [ngClass]=\"{'selectedType' : type.type === selectedType}\"\r\n (click)=\"changeType(type.type)\">{{type.type}}</div>\r\n </div>\r\n <div class=\"field-container mt-3 mx-3\">\r\n <div *ngIf=\"link.linkType === RedirectionLink.Page\">\r\n <label class=\"input-label-1 mt-3 mb-2\">Select Page</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.pageId\" (change)=\"onPageChange($event)\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let page of templatePage\" [value]=\"page.id\" style=\"padding: 10px;\">\r\n {{page.pageName}}</option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"pageName == 'Product List'\">\r\n <label class=\"input-label-1 mt-3 mb-2\">Select Collection</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"collectionPath\" (ngModelChange)=\"addCollectionToPath()\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let coll of collectionList\" style=\"padding: 10px;\" [value]=\"coll.collectionName\">\r\n {{coll?.collectionName}}</option>\r\n </select>\r\n </div>\r\n <label class=\"input-label-1 mt-3 mb-2\">Select Category</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"categoryPath\" (ngModelChange)=\"addCategoryToPath()\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let coll of categoryList\" style=\"padding: 10px;\" [value]=\"coll.categoryName\">\r\n {{coll?.categoryName}}</option>\r\n </select>\r\n </div>\r\n </ng-container>\r\n <!-- <div class=\"sub-text\">Select from your existing pages</div> -->\r\n </div>\r\n <div *ngIf=\"link.linkType === RedirectionLink.section\">\r\n <label class=\"mt-3 mb-2 input-label-1\">Section</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.pageId\">\r\n <option value=\"\" selected>Select the Section</option>\r\n <option *ngFor=\"let section of templatePage[0]?.components\" [value]=\"section.id\">{{section.sectionName}}\r\n </option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between mt-10\">\r\n <label class=\"input-label-2\">Open in a new browser tab</label>\r\n <div class=\"form-check form-switch ml-auto\">\r\n <input class=\"form-check-input switch-btn cursor-pointer\" type=\"checkbox\" [(ngModel)]=\"link.newTab\"\r\n role=\"switch\">\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"link.linkType === RedirectionLink.External || link.linkType === RedirectionLink.Email || link.linkType === RedirectionLink.Phone\">\r\n <label class=\"mt-3 mb-2 input-label-1\">Select type</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.linkType\">\r\n <option value=\"\" selected>Select the Type</option>\r\n <option *ngFor=\"let type of externalLinkType\" [value]=\"type.type\">{{type.type}}</option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n </div>\r\n </div>\r\n <label class=\"input-label mb-2\">{{link.linkType === RedirectionLink.External ? 'Website' : link.linkType ===\r\n RedirectionLink.Email ? 'Email Address' : 'Phone Number'}}</label>\r\n <input type=\"text\" class=\"input-text\" [(ngModel)]=\"link.redirectionUrl\"\r\n [placeholder]=\"link.linkType === RedirectionLink.External ? 'example : https://facebook.com': ''\">\r\n </div>\r\n\r\n\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngIf=\"data.showIcon\">\r\n <div class=\"icon-color px-3 mb-3 d-flex flex-column justify-content-center align-items-center\">\r\n <label class=\"input-label-1 mb-4 w-100\">Icon Color</label>\r\n <div [style.backgroundColor]=\"iconData.color\" class=\"custom-input\" (click)=\"colorInput.click()\"></div>\r\n <input type=\"color\" [(ngModel)]=\"iconData.color\" (ngModelChange)=\"changeIconColor()\" class=\"input-text d-none\"\r\n #colorInput />\r\n </div>\r\n\r\n <div class=\"background-on d-flex justify-content-between px-3 mb-2\">\r\n <label class=\"input-label-1\">Show Background</label>\r\n <div class=\"form-check form-switch ml-auto\">\r\n <input class=\"form-check-input switch-btn cursor-pointer\" type=\"checkbox\" [(ngModel)]=\"iconData.showBackground\"\r\n role=\"switch\">\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"tabs d-flex px-3 gap-3 mb-2\" *ngIf=\"iconData.showBackground\">\r\n <div class=\"tab px-3 py-2\" *ngFor=\"let tab of tabs\" (click)=\"iconData.backgroundType = tab\"\r\n [class.selectedTab]=\"iconData.backgroundType == tab\">\r\n {{tab}}\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"icon-background px-3 d-flex flex-column justify-content-center align-items-center\"\r\n *ngIf=\"iconData.showBackground\">\r\n <label class=\"input-label-1 mb-3 w-100\">Icon Background</label>\r\n <div [style.backgroundColor]=\"iconData?.backgroundColor\" class=\"custom-input mb-2\" (click)=\"colorInput1.click()\">\r\n </div>\r\n <input type=\"color\" [(ngModel)]=\"iconData.backgroundColor\" class=\"input-text d-none\" #colorInput1 />\r\n </div>\r\n\r\n <div class=\"icon-background px-3 d-flex flex-column justify-content-center align-items-center\"\r\n *ngIf=\"iconData.showBackground && iconData.backgroundType === 'Gradient'\">\r\n <label class=\"input-label-1 mb-3 w-100\">Icon Secondary Background</label>\r\n <div [style.backgroundColor]=\"iconData?.secondaryColor\" class=\"custom-input\" (click)=\"colorInput2.click()\"></div>\r\n <input type=\"color\" [(ngModel)]=\"iconData.secondaryColor\" class=\"input-text d-none\" #colorInput2 />\r\n </div>\r\n </ng-container>\r\n\r\n\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}:host{--grey-color: rgba(250, 250, 250, 1)}.custom-input{height:35px;width:100%;border-radius:2rem;box-shadow:0 1px 3px #3c404326,0 1px 2px #3c404326}.tab{border:1px solid rgba(44,44,44,.6);border-radius:12px}.selectedTab{background:#39393934;font-weight:700}.clr-red{color:red;font-size:12px;margin-bottom:10px}.heading{color:#000;font-size:17px;font-weight:600}.upload-text{background:var(--primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500}.upload-image{border:3px dashed rgba(44,44,44,.6);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;margin:10px 10px 22px;border-radius:20px;box-shadow:#0000000d 0 1px 2px}.upload-image img{margin-bottom:8px;height:40px}.mb-0{margin-bottom:0!important}.desc{color:#fafafa;font-size:15px}.input-field{font-size:14px;outline:none;border:unset;border-radius:5px;padding:10px;color:#090909e6;background:#fafafa}.horizontal-action{display:flex;justify-content:space-between;align-items:center}.horizontal-action label{width:25%;font-size:14px;font-weight:400!important}.main-section{display:flex;flex-direction:column}.image{display:flex;flex-direction:column;gap:5px;padding:0 10px}.slider{width:70%}.cp{cursor:pointer}.sec{padding:10px 10px 22px;position:relative}.sec img{width:100%;height:200px;border-radius:20px}.delete-image{background-color:#d92d20;width:30px;height:30px;border-radius:6px;display:flex;justify-content:center;align-items:center;position:absolute;top:20px;right:20px}.repalce-image{display:flex;align-items:center;background:#fff;padding:2px;border-radius:6px;position:absolute;bottom:30px;left:20px}.f-18{font-size:18px}.header-section{padding:10px;box-shadow:0 0 4px #00000040}.header-section .head-text{font-weight:600;font-size:15px;color:#000}.header-section mat-icon{color:#2d264b}.p-0-10{padding:0 10px}.sub-text{font-size:13px;font-weight:400;line-height:24px;color:#09090980}.w-75{width:75%}.groups{display:flex;justify-content:space-between;margin-top:25px}.groups div{font-size:15px;font-weight:600;color:#2c2c2c99;padding:6px 30px;cursor:pointer}.selectedType{position:relative;text-align:center;background:var(--primary-bg-color);background-clip:text;box-shadow:0 0 4px #00000040;border-radius:10px}.selectedType:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.field-container{background:var(--grey-color);border-radius:13px;padding:10px}.drop-down-container{padding:10px;border-radius:8px;background:#fff;cursor:pointer}.drop-down-container select{width:90%;appearance:none;position:relative;outline:unset;border:unset;border-right:3px solid rgba(230,230,230,1);background:#fff;font-size:14px;padding:0 10px;border-radius:unset}.drop-down-container .down-arrow{width:10%;padding:0 6px}.input-label-1{font-size:16px;font-weight:600}.input-text{height:37px;width:100%;border:1px solid var(--grey-color);border-radius:5px;outline:none;font-size:14px;padding:10px 20px;font-weight:400;color:#090909e6}.mb-22{margin-bottom:22px}input[type=range]{-webkit-appearance:none;width:100%;height:8px;border-radius:20px;overflow:hidden;background:#fafafa}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:8px;width:10px;background:var(--primary-bg-color);box-shadow:-50rem 0 5rem 20rem #250d5e,-40rem 0 5rem 30rem #0bf,-30rem 0 2rem 25rem #250d5e,-25.5rem 0 0 25rem #0bf;border-radius:50%;cursor:pointer}\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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
2429
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageEditorComponent, isStandalone: true, selector: "simpo-image-editor", ngImport: i0, template: "<section class=\"main-section\">\r\n <div class=\"header-section d-flex justify-content-between align-items-center\">\r\n <div class=\"head-text\">Image Settings</div>\r\n <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\"\r\n (click)=\"dialogRef.close()\">close</mat-icon>\r\n </div>\r\n <div>\r\n <!-- <p class=\"heading mb-0\">Image</p> -->\r\n <div class=\"upload-image cp\" *ngIf=\"!imageData?.url && !iconData?.url\" (click)=\"updateImage()\">\r\n <img loading=\"lazy\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\r\n alt=\"\">\r\n <p class=\"upload-text mb-0\">Upload a file</p>\r\n <p class=\"upload-text mb-0\">or select an existing one</p>\r\n <span class=\"upload-text\">up to 32MB</span>\r\n </div>\r\n <div class=\"sec d-flex align-items-center\" *ngIf=\"imageData?.url || iconData?.url\">\r\n <ng-container *ngIf=\"!imgLoader\">\r\n <img [src]=\"imageData?.url || iconData.url\" [alt]=\"imageData?.altText ?? ''\"\r\n *ngIf=\"!imageData?.url?.includes('.mp4')\">\r\n <video [src]=\"imageData?.url\" class=\"w-100 h-100\" *ngIf=\"imageData?.url?.includes('.mp4')\" muted loop></video>\r\n <div class=\"repalce-image cursor-pointer\" (click)=\"updateImage()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" width=\"24\"\r\n height=\"24\" class=\"icon w-4 h-4\" aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n d=\"m4 16 4.58579-4.5858c.78104-.781 2.04741-.781 2.82841 0L16 16m-2-2 1.5858-1.5858c.781-.781 2.0474-.781 2.8284 0L20 14m-6-6h.01M6 20h12c1.1046 0 2-.8954 2-2V6c0-1.10457-.8954-2-2-2H6c-1.10457 0-2 .89543-2 2v12c0 1.1046.89543 2 2 2Z\">\r\n </path>\r\n </svg>\r\n </div>\r\n\r\n <div class=\"delete-image cursor-pointer \" (click)=\"deleteImage()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"#ffffff\" viewBox=\"0 0 24 24\" width=\"24\"\r\n height=\"24\" class=\"icon h-4 w-4\" aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n d=\"m19 7-.8673 12.1425C18.0579 20.1891 17.187 21 16.1378 21H7.86224c-1.04928 0-1.92016-.8109-1.99492-1.8575L5 7m5 4v6m4-6v6m1-10V4c0-.55228-.4477-1-1-1h-4c-.55228 0-1 .44772-1 1v3M4 7h16\">\r\n </path>\r\n </svg>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"imgLoader\">\r\n <div class=\"upload_spinner d-flex w-100 h-100 justify-content-center align-items-center\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"data.showIcon\">\r\n <span class=\"p-0-10 clr-red\">Note : This Icon Feature Supports SVG and PNG in black and white format only.</span>\r\n </ng-container>\r\n <ng-container *ngIf=\"!data.showIcon\">\r\n <div class=\"w-100 p-0-10 mb-22\" *ngIf=\"imageData?.hasOwnProperty('altText')\">\r\n <p class=\"heading mb-2\">Alt text</p>\r\n <input type=\"text\" placeholder=\"Enter alt text\" class=\"input-field w-100\" [(ngModel)]=\"imageData.altText\">\r\n <div class=\"sub-text\">When the image fails to load, this text will be displayed.</div>\r\n </div>\r\n\r\n <div class=\"image mb-22\" *ngIf=\"imageData?.hasOwnProperty('position')\">\r\n <p class=\"heading mb-1\">Image Position</p>\r\n <div class=\"horizontal-action\">\r\n <label>Horizontal</label>\r\n <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.x\"\r\n (input)=\"horizontalPosition()\" class=\"w-75\">\r\n </div>\r\n </div>\r\n <div class=\"horizontal-action\" style=\"margin-top: 5px;\">\r\n <label>Vertical</label>\r\n <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.y\"\r\n (input)=\"horizontalPosition()\" class=\"w-75\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"groups cp px-3\">\r\n <div *ngFor=\"let type of linkType\" [ngClass]=\"{'selectedType' : type.type === selectedType}\"\r\n (click)=\"changeType(type.type)\">{{type.type}}</div>\r\n </div>\r\n <div class=\"field-container mt-3 mx-3\">\r\n <div *ngIf=\"link.linkType === RedirectionLink.Page\">\r\n <label class=\"input-label-1 mt-3 mb-2\">Select Page</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.pageId\" (change)=\"onPageChange($event)\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let page of templatePage\" [value]=\"page.id\" style=\"padding: 10px;\">\r\n {{page.pageName}}</option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"pageName == 'Product List'\">\r\n <label class=\"input-label-1 mt-3 mb-2\">Select Collection</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"collectionPath\" (ngModelChange)=\"addCollectionToPath()\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let coll of collectionList\" style=\"padding: 10px;\" [value]=\"coll.collectionName\">\r\n {{coll?.collectionName}}</option>\r\n </select>\r\n </div>\r\n <label class=\"input-label-1 mt-3 mb-2\">Select Category</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"categoryPath\" (ngModelChange)=\"addCategoryToPath()\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let coll of categoryList\" style=\"padding: 10px;\" [value]=\"coll.categoryName\">\r\n {{coll?.categoryName}}</option>\r\n </select>\r\n </div>\r\n </ng-container>\r\n <!-- <div class=\"sub-text\">Select from your existing pages</div> -->\r\n </div>\r\n <div *ngIf=\"link.linkType === RedirectionLink.section\">\r\n <label class=\"mt-3 mb-2 input-label-1\">Section</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.pageId\">\r\n <option value=\"\" selected>Select the Section</option>\r\n <option *ngFor=\"let section of templatePage[0]?.components\" [value]=\"section.id\">{{section.sectionName}}\r\n </option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between mt-10\">\r\n <label class=\"input-label-2\">Open in a new browser tab</label>\r\n <div class=\"form-check form-switch ml-auto\">\r\n <input class=\"form-check-input switch-btn cursor-pointer\" type=\"checkbox\" [(ngModel)]=\"link.newTab\"\r\n role=\"switch\">\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"link.linkType === RedirectionLink.External || link.linkType === RedirectionLink.Email || link.linkType === RedirectionLink.Phone\">\r\n <label class=\"mt-3 mb-2 input-label-1\">Select type</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.linkType\">\r\n <option value=\"\" selected>Select the Type</option>\r\n <option *ngFor=\"let type of externalLinkType\" [value]=\"type.type\">{{type.type}}</option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n </div>\r\n </div>\r\n <label class=\"input-label mb-2\">{{link.linkType === RedirectionLink.External ? 'Website' : link.linkType ===\r\n RedirectionLink.Email ? 'Email Address' : 'Phone Number'}}</label>\r\n <input type=\"text\" class=\"input-text\" [(ngModel)]=\"link.redirectionUrl\"\r\n [placeholder]=\"link.linkType === RedirectionLink.External ? 'example : https://facebook.com': ''\">\r\n </div>\r\n\r\n\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngIf=\"data.showIcon\">\r\n <div class=\"icon-color px-3 mb-3 d-flex flex-column justify-content-center align-items-center\">\r\n <label class=\"input-label-1 mb-4 w-100\">Icon Color</label>\r\n <div [style.backgroundColor]=\"iconData.color\" class=\"custom-input\" (click)=\"colorInput.click()\"></div>\r\n <input type=\"color\" [(ngModel)]=\"iconData.color\" (ngModelChange)=\"changeIconColor()\" class=\"input-text d-none\"\r\n #colorInput />\r\n </div>\r\n\r\n <div class=\"background-on d-flex justify-content-between px-3 mb-2\">\r\n <label class=\"input-label-1\">Show Background</label>\r\n <div class=\"form-check form-switch ml-auto\">\r\n <input class=\"form-check-input switch-btn cursor-pointer\" type=\"checkbox\" [(ngModel)]=\"iconData.showBackground\"\r\n role=\"switch\">\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"tabs d-flex px-3 gap-3 mb-2\" *ngIf=\"iconData.showBackground\">\r\n <div class=\"tab px-3 py-2\" *ngFor=\"let tab of tabs\" (click)=\"iconData.backgroundType = tab\"\r\n [class.selectedTab]=\"iconData.backgroundType == tab\">\r\n {{tab}}\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"icon-background px-3 d-flex flex-column justify-content-center align-items-center\"\r\n *ngIf=\"iconData.showBackground\">\r\n <label class=\"input-label-1 mb-3 w-100\">Icon Background</label>\r\n <div [style.backgroundColor]=\"iconData?.backgroundColor\" class=\"custom-input mb-2\" (click)=\"colorInput1.click()\">\r\n </div>\r\n <input type=\"color\" [(ngModel)]=\"iconData.backgroundColor\" class=\"input-text d-none\" #colorInput1 />\r\n </div>\r\n\r\n <div class=\"icon-background px-3 d-flex flex-column justify-content-center align-items-center\"\r\n *ngIf=\"iconData.showBackground && iconData.backgroundType === 'Gradient'\">\r\n <label class=\"input-label-1 mb-3 w-100\">Icon Secondary Background</label>\r\n <div [style.backgroundColor]=\"iconData?.secondaryColor\" class=\"custom-input\" (click)=\"colorInput2.click()\"></div>\r\n <input type=\"color\" [(ngModel)]=\"iconData.secondaryColor\" class=\"input-text d-none\" #colorInput2 />\r\n </div>\r\n </ng-container>\r\n\r\n\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}:host{--grey-color: rgba(250, 250, 250, 1)}.custom-input{height:35px;width:100%;border-radius:2rem;box-shadow:0 1px 3px #3c404326,0 1px 2px #3c404326}.tab{border:1px solid rgba(44,44,44,.6);border-radius:12px}.selectedTab{background:#39393934;font-weight:700}.clr-red{color:red;font-size:12px;margin-bottom:10px}.heading{color:#000;font-size:17px;font-weight:600}.upload-text{background:var(--primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500}.upload-image{border:3px dashed rgba(44,44,44,.6);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;margin:10px 10px 22px;border-radius:20px;box-shadow:#0000000d 0 1px 2px}.upload-image img{margin-bottom:8px;height:40px}.mb-0{margin-bottom:0!important}.desc{color:#fafafa;font-size:15px}.input-field{font-size:14px;outline:none;border:unset;border-radius:5px;padding:10px;color:#090909e6;background:#fafafa}.horizontal-action{display:flex;justify-content:space-between;align-items:center}.horizontal-action label{width:25%;font-size:14px;font-weight:400!important}.main-section{display:flex;flex-direction:column}.image{display:flex;flex-direction:column;gap:5px;padding:0 10px}.slider{width:70%}.cp{cursor:pointer}.sec{padding:10px 10px 22px;position:relative}.sec img{width:100%;height:200px;border-radius:20px}.delete-image{background-color:#d92d20;width:30px;height:30px;border-radius:6px;display:flex;justify-content:center;align-items:center;position:absolute;top:20px;right:20px}.repalce-image{display:flex;align-items:center;background:#fff;padding:2px;border-radius:6px;position:absolute;bottom:30px;left:20px}.f-18{font-size:18px}.header-section{padding:10px;box-shadow:0 0 4px #00000040}.header-section .head-text{font-weight:600;font-size:15px;color:#000}.header-section mat-icon{color:#2d264b}.p-0-10{padding:0 10px}.sub-text{font-size:13px;font-weight:400;line-height:24px;color:#09090980}.w-75{width:75%}.groups{display:flex;justify-content:space-between;margin-top:25px}.groups div{font-size:15px;font-weight:600;color:#2c2c2c99;padding:6px 30px;cursor:pointer}.selectedType{position:relative;text-align:center;background:var(--primary-bg-color);background-clip:text;box-shadow:0 0 4px #00000040;border-radius:10px}.selectedType:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.field-container{background:var(--grey-color);border-radius:13px;padding:10px}.drop-down-container{padding:10px;border-radius:8px;background:#fff;cursor:pointer}.drop-down-container select{width:90%;appearance:none;position:relative;outline:unset;border:unset;border-right:3px solid rgba(230,230,230,1);background:#fff;font-size:14px;padding:0 10px;border-radius:unset}.drop-down-container .down-arrow{width:10%;padding:0 6px}.input-label-1{font-size:16px;font-weight:600}.input-text{height:37px;width:100%;border:1px solid var(--grey-color);border-radius:5px;outline:none;font-size:14px;padding:10px 20px;font-weight:400;color:#090909e6}.mb-22{margin-bottom:22px}input[type=range]{-webkit-appearance:none;width:100%;height:8px;border-radius:20px;overflow:hidden;background:#fafafa}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:8px;width:10px;background:var(--primary-bg-color);box-shadow:-50rem 0 5rem 20rem #250d5e,-40rem 0 5rem 30rem #0bf,-30rem 0 2rem 25rem #250d5e,-25.5rem 0 0 25rem #0bf;border-radius:50%;cursor:pointer}\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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
2429
2430
|
}
|
|
2430
2431
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageEditorComponent, decorators: [{
|
|
2431
2432
|
type: Component,
|
|
2432
|
-
args: [{ selector: 'simpo-image-editor', standalone: true, imports: [CommonModule, FormsModule, MatIconModule, MatSliderModule, MatProgressSpinner], template: "<section class=\"main-section\">\r\n <div class=\"header-section d-flex justify-content-between align-items-center\">\r\n <div class=\"head-text\">Image Settings</div>\r\n <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\"\r\n (click)=\"dialogRef.close()\">close</mat-icon>\r\n </div>\r\n <div>\r\n <!-- <p class=\"heading mb-0\">Image</p> -->\r\n <div class=\"upload-image cp\" *ngIf=\"!imageData.url && !iconData.url\" (click)=\"updateImage()\">\r\n <img loading=\"lazy\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\r\n alt=\"\">\r\n <p class=\"upload-text mb-0\">Upload a file</p>\r\n <p class=\"upload-text mb-0\">or select an existing one</p>\r\n <span class=\"upload-text\">up to 32MB</span>\r\n </div>\r\n <div class=\"sec d-flex align-items-center\" *ngIf=\"imageData.url || iconData.url\">\r\n <ng-container *ngIf=\"!imgLoader\">\r\n <img [src]=\"imageData.url || iconData.url\" [alt]=\"imageData.altText ?? ''\"\r\n *ngIf=\"!imageData?.url?.includes('.mp4')\">\r\n <video [src]=\"imageData.url\" class=\"w-100 h-100\" *ngIf=\"imageData?.url?.includes('.mp4')\" muted loop></video>\r\n <div class=\"repalce-image cursor-pointer\" (click)=\"updateImage()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" width=\"24\"\r\n height=\"24\" class=\"icon w-4 h-4\" aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n d=\"m4 16 4.58579-4.5858c.78104-.781 2.04741-.781 2.82841 0L16 16m-2-2 1.5858-1.5858c.781-.781 2.0474-.781 2.8284 0L20 14m-6-6h.01M6 20h12c1.1046 0 2-.8954 2-2V6c0-1.10457-.8954-2-2-2H6c-1.10457 0-2 .89543-2 2v12c0 1.1046.89543 2 2 2Z\">\r\n </path>\r\n </svg>\r\n </div>\r\n\r\n <div class=\"delete-image cursor-pointer \" (click)=\"deleteImage()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"#ffffff\" viewBox=\"0 0 24 24\" width=\"24\"\r\n height=\"24\" class=\"icon h-4 w-4\" aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n d=\"m19 7-.8673 12.1425C18.0579 20.1891 17.187 21 16.1378 21H7.86224c-1.04928 0-1.92016-.8109-1.99492-1.8575L5 7m5 4v6m4-6v6m1-10V4c0-.55228-.4477-1-1-1h-4c-.55228 0-1 .44772-1 1v3M4 7h16\">\r\n </path>\r\n </svg>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"imgLoader\">\r\n <div class=\"upload_spinner d-flex w-100 h-100 justify-content-center align-items-center\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"data.showIcon\">\r\n <span class=\"p-0-10 clr-red\">Note : This Icon Feature Supports SVG and PNG in black and white format only.</span>\r\n </ng-container>\r\n <ng-container *ngIf=\"!data.showIcon\">\r\n <div class=\"w-100 p-0-10 mb-22\" *ngIf=\"imageData.hasOwnProperty('altText')\">\r\n <p class=\"heading mb-2\">Alt text</p>\r\n <input type=\"text\" placeholder=\"Enter alt text\" class=\"input-field w-100\" [(ngModel)]=\"imageData.altText\">\r\n <div class=\"sub-text\">When the image fails to load, this text will be displayed.</div>\r\n </div>\r\n\r\n <div class=\"image mb-22\" *ngIf=\"imageData.hasOwnProperty('position')\">\r\n <p class=\"heading mb-1\">Image Position</p>\r\n <div class=\"horizontal-action\">\r\n <label>Horizontal</label>\r\n <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.x\"\r\n (input)=\"horizontalPosition()\" class=\"w-75\">\r\n </div>\r\n </div>\r\n <div class=\"horizontal-action\" style=\"margin-top: 5px;\">\r\n <label>Vertical</label>\r\n <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.y\"\r\n (input)=\"horizontalPosition()\" class=\"w-75\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"groups cp px-3\">\r\n <div *ngFor=\"let type of linkType\" [ngClass]=\"{'selectedType' : type.type === selectedType}\"\r\n (click)=\"changeType(type.type)\">{{type.type}}</div>\r\n </div>\r\n <div class=\"field-container mt-3 mx-3\">\r\n <div *ngIf=\"link.linkType === RedirectionLink.Page\">\r\n <label class=\"input-label-1 mt-3 mb-2\">Select Page</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.pageId\" (change)=\"onPageChange($event)\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let page of templatePage\" [value]=\"page.id\" style=\"padding: 10px;\">\r\n {{page.pageName}}</option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"pageName == 'Product List'\">\r\n <label class=\"input-label-1 mt-3 mb-2\">Select Collection</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"collectionPath\" (ngModelChange)=\"addCollectionToPath()\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let coll of collectionList\" style=\"padding: 10px;\" [value]=\"coll.collectionName\">\r\n {{coll?.collectionName}}</option>\r\n </select>\r\n </div>\r\n <label class=\"input-label-1 mt-3 mb-2\">Select Category</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"categoryPath\" (ngModelChange)=\"addCategoryToPath()\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let coll of categoryList\" style=\"padding: 10px;\" [value]=\"coll.categoryName\">\r\n {{coll?.categoryName}}</option>\r\n </select>\r\n </div>\r\n </ng-container>\r\n <!-- <div class=\"sub-text\">Select from your existing pages</div> -->\r\n </div>\r\n <div *ngIf=\"link.linkType === RedirectionLink.section\">\r\n <label class=\"mt-3 mb-2 input-label-1\">Section</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.pageId\">\r\n <option value=\"\" selected>Select the Section</option>\r\n <option *ngFor=\"let section of templatePage[0]?.components\" [value]=\"section.id\">{{section.sectionName}}\r\n </option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between mt-10\">\r\n <label class=\"input-label-2\">Open in a new browser tab</label>\r\n <div class=\"form-check form-switch ml-auto\">\r\n <input class=\"form-check-input switch-btn cursor-pointer\" type=\"checkbox\" [(ngModel)]=\"link.newTab\"\r\n role=\"switch\">\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"link.linkType === RedirectionLink.External || link.linkType === RedirectionLink.Email || link.linkType === RedirectionLink.Phone\">\r\n <label class=\"mt-3 mb-2 input-label-1\">Select type</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.linkType\">\r\n <option value=\"\" selected>Select the Type</option>\r\n <option *ngFor=\"let type of externalLinkType\" [value]=\"type.type\">{{type.type}}</option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n </div>\r\n </div>\r\n <label class=\"input-label mb-2\">{{link.linkType === RedirectionLink.External ? 'Website' : link.linkType ===\r\n RedirectionLink.Email ? 'Email Address' : 'Phone Number'}}</label>\r\n <input type=\"text\" class=\"input-text\" [(ngModel)]=\"link.redirectionUrl\"\r\n [placeholder]=\"link.linkType === RedirectionLink.External ? 'example : https://facebook.com': ''\">\r\n </div>\r\n\r\n\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngIf=\"data.showIcon\">\r\n <div class=\"icon-color px-3 mb-3 d-flex flex-column justify-content-center align-items-center\">\r\n <label class=\"input-label-1 mb-4 w-100\">Icon Color</label>\r\n <div [style.backgroundColor]=\"iconData.color\" class=\"custom-input\" (click)=\"colorInput.click()\"></div>\r\n <input type=\"color\" [(ngModel)]=\"iconData.color\" (ngModelChange)=\"changeIconColor()\" class=\"input-text d-none\"\r\n #colorInput />\r\n </div>\r\n\r\n <div class=\"background-on d-flex justify-content-between px-3 mb-2\">\r\n <label class=\"input-label-1\">Show Background</label>\r\n <div class=\"form-check form-switch ml-auto\">\r\n <input class=\"form-check-input switch-btn cursor-pointer\" type=\"checkbox\" [(ngModel)]=\"iconData.showBackground\"\r\n role=\"switch\">\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"tabs d-flex px-3 gap-3 mb-2\" *ngIf=\"iconData.showBackground\">\r\n <div class=\"tab px-3 py-2\" *ngFor=\"let tab of tabs\" (click)=\"iconData.backgroundType = tab\"\r\n [class.selectedTab]=\"iconData.backgroundType == tab\">\r\n {{tab}}\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"icon-background px-3 d-flex flex-column justify-content-center align-items-center\"\r\n *ngIf=\"iconData.showBackground\">\r\n <label class=\"input-label-1 mb-3 w-100\">Icon Background</label>\r\n <div [style.backgroundColor]=\"iconData?.backgroundColor\" class=\"custom-input mb-2\" (click)=\"colorInput1.click()\">\r\n </div>\r\n <input type=\"color\" [(ngModel)]=\"iconData.backgroundColor\" class=\"input-text d-none\" #colorInput1 />\r\n </div>\r\n\r\n <div class=\"icon-background px-3 d-flex flex-column justify-content-center align-items-center\"\r\n *ngIf=\"iconData.showBackground && iconData.backgroundType === 'Gradient'\">\r\n <label class=\"input-label-1 mb-3 w-100\">Icon Secondary Background</label>\r\n <div [style.backgroundColor]=\"iconData?.secondaryColor\" class=\"custom-input\" (click)=\"colorInput2.click()\"></div>\r\n <input type=\"color\" [(ngModel)]=\"iconData.secondaryColor\" class=\"input-text d-none\" #colorInput2 />\r\n </div>\r\n </ng-container>\r\n\r\n\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}:host{--grey-color: rgba(250, 250, 250, 1)}.custom-input{height:35px;width:100%;border-radius:2rem;box-shadow:0 1px 3px #3c404326,0 1px 2px #3c404326}.tab{border:1px solid rgba(44,44,44,.6);border-radius:12px}.selectedTab{background:#39393934;font-weight:700}.clr-red{color:red;font-size:12px;margin-bottom:10px}.heading{color:#000;font-size:17px;font-weight:600}.upload-text{background:var(--primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500}.upload-image{border:3px dashed rgba(44,44,44,.6);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;margin:10px 10px 22px;border-radius:20px;box-shadow:#0000000d 0 1px 2px}.upload-image img{margin-bottom:8px;height:40px}.mb-0{margin-bottom:0!important}.desc{color:#fafafa;font-size:15px}.input-field{font-size:14px;outline:none;border:unset;border-radius:5px;padding:10px;color:#090909e6;background:#fafafa}.horizontal-action{display:flex;justify-content:space-between;align-items:center}.horizontal-action label{width:25%;font-size:14px;font-weight:400!important}.main-section{display:flex;flex-direction:column}.image{display:flex;flex-direction:column;gap:5px;padding:0 10px}.slider{width:70%}.cp{cursor:pointer}.sec{padding:10px 10px 22px;position:relative}.sec img{width:100%;height:200px;border-radius:20px}.delete-image{background-color:#d92d20;width:30px;height:30px;border-radius:6px;display:flex;justify-content:center;align-items:center;position:absolute;top:20px;right:20px}.repalce-image{display:flex;align-items:center;background:#fff;padding:2px;border-radius:6px;position:absolute;bottom:30px;left:20px}.f-18{font-size:18px}.header-section{padding:10px;box-shadow:0 0 4px #00000040}.header-section .head-text{font-weight:600;font-size:15px;color:#000}.header-section mat-icon{color:#2d264b}.p-0-10{padding:0 10px}.sub-text{font-size:13px;font-weight:400;line-height:24px;color:#09090980}.w-75{width:75%}.groups{display:flex;justify-content:space-between;margin-top:25px}.groups div{font-size:15px;font-weight:600;color:#2c2c2c99;padding:6px 30px;cursor:pointer}.selectedType{position:relative;text-align:center;background:var(--primary-bg-color);background-clip:text;box-shadow:0 0 4px #00000040;border-radius:10px}.selectedType:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.field-container{background:var(--grey-color);border-radius:13px;padding:10px}.drop-down-container{padding:10px;border-radius:8px;background:#fff;cursor:pointer}.drop-down-container select{width:90%;appearance:none;position:relative;outline:unset;border:unset;border-right:3px solid rgba(230,230,230,1);background:#fff;font-size:14px;padding:0 10px;border-radius:unset}.drop-down-container .down-arrow{width:10%;padding:0 6px}.input-label-1{font-size:16px;font-weight:600}.input-text{height:37px;width:100%;border:1px solid var(--grey-color);border-radius:5px;outline:none;font-size:14px;padding:10px 20px;font-weight:400;color:#090909e6}.mb-22{margin-bottom:22px}input[type=range]{-webkit-appearance:none;width:100%;height:8px;border-radius:20px;overflow:hidden;background:#fafafa}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:8px;width:10px;background:var(--primary-bg-color);box-shadow:-50rem 0 5rem 20rem #250d5e,-40rem 0 5rem 30rem #0bf,-30rem 0 2rem 25rem #250d5e,-25.5rem 0 0 25rem #0bf;border-radius:50%;cursor:pointer}\n"] }]
|
|
2433
|
+
args: [{ selector: 'simpo-image-editor', standalone: true, imports: [CommonModule, FormsModule, MatIconModule, MatSliderModule, MatProgressSpinner], template: "<section class=\"main-section\">\r\n <div class=\"header-section d-flex justify-content-between align-items-center\">\r\n <div class=\"head-text\">Image Settings</div>\r\n <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\"\r\n (click)=\"dialogRef.close()\">close</mat-icon>\r\n </div>\r\n <div>\r\n <!-- <p class=\"heading mb-0\">Image</p> -->\r\n <div class=\"upload-image cp\" *ngIf=\"!imageData?.url && !iconData?.url\" (click)=\"updateImage()\">\r\n <img loading=\"lazy\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\r\n alt=\"\">\r\n <p class=\"upload-text mb-0\">Upload a file</p>\r\n <p class=\"upload-text mb-0\">or select an existing one</p>\r\n <span class=\"upload-text\">up to 32MB</span>\r\n </div>\r\n <div class=\"sec d-flex align-items-center\" *ngIf=\"imageData?.url || iconData?.url\">\r\n <ng-container *ngIf=\"!imgLoader\">\r\n <img [src]=\"imageData?.url || iconData.url\" [alt]=\"imageData?.altText ?? ''\"\r\n *ngIf=\"!imageData?.url?.includes('.mp4')\">\r\n <video [src]=\"imageData?.url\" class=\"w-100 h-100\" *ngIf=\"imageData?.url?.includes('.mp4')\" muted loop></video>\r\n <div class=\"repalce-image cursor-pointer\" (click)=\"updateImage()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" width=\"24\"\r\n height=\"24\" class=\"icon w-4 h-4\" aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n d=\"m4 16 4.58579-4.5858c.78104-.781 2.04741-.781 2.82841 0L16 16m-2-2 1.5858-1.5858c.781-.781 2.0474-.781 2.8284 0L20 14m-6-6h.01M6 20h12c1.1046 0 2-.8954 2-2V6c0-1.10457-.8954-2-2-2H6c-1.10457 0-2 .89543-2 2v12c0 1.1046.89543 2 2 2Z\">\r\n </path>\r\n </svg>\r\n </div>\r\n\r\n <div class=\"delete-image cursor-pointer \" (click)=\"deleteImage()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"#ffffff\" viewBox=\"0 0 24 24\" width=\"24\"\r\n height=\"24\" class=\"icon h-4 w-4\" aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n d=\"m19 7-.8673 12.1425C18.0579 20.1891 17.187 21 16.1378 21H7.86224c-1.04928 0-1.92016-.8109-1.99492-1.8575L5 7m5 4v6m4-6v6m1-10V4c0-.55228-.4477-1-1-1h-4c-.55228 0-1 .44772-1 1v3M4 7h16\">\r\n </path>\r\n </svg>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"imgLoader\">\r\n <div class=\"upload_spinner d-flex w-100 h-100 justify-content-center align-items-center\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"data.showIcon\">\r\n <span class=\"p-0-10 clr-red\">Note : This Icon Feature Supports SVG and PNG in black and white format only.</span>\r\n </ng-container>\r\n <ng-container *ngIf=\"!data.showIcon\">\r\n <div class=\"w-100 p-0-10 mb-22\" *ngIf=\"imageData?.hasOwnProperty('altText')\">\r\n <p class=\"heading mb-2\">Alt text</p>\r\n <input type=\"text\" placeholder=\"Enter alt text\" class=\"input-field w-100\" [(ngModel)]=\"imageData.altText\">\r\n <div class=\"sub-text\">When the image fails to load, this text will be displayed.</div>\r\n </div>\r\n\r\n <div class=\"image mb-22\" *ngIf=\"imageData?.hasOwnProperty('position')\">\r\n <p class=\"heading mb-1\">Image Position</p>\r\n <div class=\"horizontal-action\">\r\n <label>Horizontal</label>\r\n <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.x\"\r\n (input)=\"horizontalPosition()\" class=\"w-75\">\r\n </div>\r\n </div>\r\n <div class=\"horizontal-action\" style=\"margin-top: 5px;\">\r\n <label>Vertical</label>\r\n <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.y\"\r\n (input)=\"horizontalPosition()\" class=\"w-75\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"groups cp px-3\">\r\n <div *ngFor=\"let type of linkType\" [ngClass]=\"{'selectedType' : type.type === selectedType}\"\r\n (click)=\"changeType(type.type)\">{{type.type}}</div>\r\n </div>\r\n <div class=\"field-container mt-3 mx-3\">\r\n <div *ngIf=\"link.linkType === RedirectionLink.Page\">\r\n <label class=\"input-label-1 mt-3 mb-2\">Select Page</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.pageId\" (change)=\"onPageChange($event)\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let page of templatePage\" [value]=\"page.id\" style=\"padding: 10px;\">\r\n {{page.pageName}}</option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"pageName == 'Product List'\">\r\n <label class=\"input-label-1 mt-3 mb-2\">Select Collection</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"collectionPath\" (ngModelChange)=\"addCollectionToPath()\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let coll of collectionList\" style=\"padding: 10px;\" [value]=\"coll.collectionName\">\r\n {{coll?.collectionName}}</option>\r\n </select>\r\n </div>\r\n <label class=\"input-label-1 mt-3 mb-2\">Select Category</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"categoryPath\" (ngModelChange)=\"addCategoryToPath()\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let coll of categoryList\" style=\"padding: 10px;\" [value]=\"coll.categoryName\">\r\n {{coll?.categoryName}}</option>\r\n </select>\r\n </div>\r\n </ng-container>\r\n <!-- <div class=\"sub-text\">Select from your existing pages</div> -->\r\n </div>\r\n <div *ngIf=\"link.linkType === RedirectionLink.section\">\r\n <label class=\"mt-3 mb-2 input-label-1\">Section</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.pageId\">\r\n <option value=\"\" selected>Select the Section</option>\r\n <option *ngFor=\"let section of templatePage[0]?.components\" [value]=\"section.id\">{{section.sectionName}}\r\n </option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between mt-10\">\r\n <label class=\"input-label-2\">Open in a new browser tab</label>\r\n <div class=\"form-check form-switch ml-auto\">\r\n <input class=\"form-check-input switch-btn cursor-pointer\" type=\"checkbox\" [(ngModel)]=\"link.newTab\"\r\n role=\"switch\">\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"link.linkType === RedirectionLink.External || link.linkType === RedirectionLink.Email || link.linkType === RedirectionLink.Phone\">\r\n <label class=\"mt-3 mb-2 input-label-1\">Select type</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.linkType\">\r\n <option value=\"\" selected>Select the Type</option>\r\n <option *ngFor=\"let type of externalLinkType\" [value]=\"type.type\">{{type.type}}</option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n </div>\r\n </div>\r\n <label class=\"input-label mb-2\">{{link.linkType === RedirectionLink.External ? 'Website' : link.linkType ===\r\n RedirectionLink.Email ? 'Email Address' : 'Phone Number'}}</label>\r\n <input type=\"text\" class=\"input-text\" [(ngModel)]=\"link.redirectionUrl\"\r\n [placeholder]=\"link.linkType === RedirectionLink.External ? 'example : https://facebook.com': ''\">\r\n </div>\r\n\r\n\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngIf=\"data.showIcon\">\r\n <div class=\"icon-color px-3 mb-3 d-flex flex-column justify-content-center align-items-center\">\r\n <label class=\"input-label-1 mb-4 w-100\">Icon Color</label>\r\n <div [style.backgroundColor]=\"iconData.color\" class=\"custom-input\" (click)=\"colorInput.click()\"></div>\r\n <input type=\"color\" [(ngModel)]=\"iconData.color\" (ngModelChange)=\"changeIconColor()\" class=\"input-text d-none\"\r\n #colorInput />\r\n </div>\r\n\r\n <div class=\"background-on d-flex justify-content-between px-3 mb-2\">\r\n <label class=\"input-label-1\">Show Background</label>\r\n <div class=\"form-check form-switch ml-auto\">\r\n <input class=\"form-check-input switch-btn cursor-pointer\" type=\"checkbox\" [(ngModel)]=\"iconData.showBackground\"\r\n role=\"switch\">\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"tabs d-flex px-3 gap-3 mb-2\" *ngIf=\"iconData.showBackground\">\r\n <div class=\"tab px-3 py-2\" *ngFor=\"let tab of tabs\" (click)=\"iconData.backgroundType = tab\"\r\n [class.selectedTab]=\"iconData.backgroundType == tab\">\r\n {{tab}}\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"icon-background px-3 d-flex flex-column justify-content-center align-items-center\"\r\n *ngIf=\"iconData.showBackground\">\r\n <label class=\"input-label-1 mb-3 w-100\">Icon Background</label>\r\n <div [style.backgroundColor]=\"iconData?.backgroundColor\" class=\"custom-input mb-2\" (click)=\"colorInput1.click()\">\r\n </div>\r\n <input type=\"color\" [(ngModel)]=\"iconData.backgroundColor\" class=\"input-text d-none\" #colorInput1 />\r\n </div>\r\n\r\n <div class=\"icon-background px-3 d-flex flex-column justify-content-center align-items-center\"\r\n *ngIf=\"iconData.showBackground && iconData.backgroundType === 'Gradient'\">\r\n <label class=\"input-label-1 mb-3 w-100\">Icon Secondary Background</label>\r\n <div [style.backgroundColor]=\"iconData?.secondaryColor\" class=\"custom-input\" (click)=\"colorInput2.click()\"></div>\r\n <input type=\"color\" [(ngModel)]=\"iconData.secondaryColor\" class=\"input-text d-none\" #colorInput2 />\r\n </div>\r\n </ng-container>\r\n\r\n\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}:host{--grey-color: rgba(250, 250, 250, 1)}.custom-input{height:35px;width:100%;border-radius:2rem;box-shadow:0 1px 3px #3c404326,0 1px 2px #3c404326}.tab{border:1px solid rgba(44,44,44,.6);border-radius:12px}.selectedTab{background:#39393934;font-weight:700}.clr-red{color:red;font-size:12px;margin-bottom:10px}.heading{color:#000;font-size:17px;font-weight:600}.upload-text{background:var(--primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500}.upload-image{border:3px dashed rgba(44,44,44,.6);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;margin:10px 10px 22px;border-radius:20px;box-shadow:#0000000d 0 1px 2px}.upload-image img{margin-bottom:8px;height:40px}.mb-0{margin-bottom:0!important}.desc{color:#fafafa;font-size:15px}.input-field{font-size:14px;outline:none;border:unset;border-radius:5px;padding:10px;color:#090909e6;background:#fafafa}.horizontal-action{display:flex;justify-content:space-between;align-items:center}.horizontal-action label{width:25%;font-size:14px;font-weight:400!important}.main-section{display:flex;flex-direction:column}.image{display:flex;flex-direction:column;gap:5px;padding:0 10px}.slider{width:70%}.cp{cursor:pointer}.sec{padding:10px 10px 22px;position:relative}.sec img{width:100%;height:200px;border-radius:20px}.delete-image{background-color:#d92d20;width:30px;height:30px;border-radius:6px;display:flex;justify-content:center;align-items:center;position:absolute;top:20px;right:20px}.repalce-image{display:flex;align-items:center;background:#fff;padding:2px;border-radius:6px;position:absolute;bottom:30px;left:20px}.f-18{font-size:18px}.header-section{padding:10px;box-shadow:0 0 4px #00000040}.header-section .head-text{font-weight:600;font-size:15px;color:#000}.header-section mat-icon{color:#2d264b}.p-0-10{padding:0 10px}.sub-text{font-size:13px;font-weight:400;line-height:24px;color:#09090980}.w-75{width:75%}.groups{display:flex;justify-content:space-between;margin-top:25px}.groups div{font-size:15px;font-weight:600;color:#2c2c2c99;padding:6px 30px;cursor:pointer}.selectedType{position:relative;text-align:center;background:var(--primary-bg-color);background-clip:text;box-shadow:0 0 4px #00000040;border-radius:10px}.selectedType:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.field-container{background:var(--grey-color);border-radius:13px;padding:10px}.drop-down-container{padding:10px;border-radius:8px;background:#fff;cursor:pointer}.drop-down-container select{width:90%;appearance:none;position:relative;outline:unset;border:unset;border-right:3px solid rgba(230,230,230,1);background:#fff;font-size:14px;padding:0 10px;border-radius:unset}.drop-down-container .down-arrow{width:10%;padding:0 6px}.input-label-1{font-size:16px;font-weight:600}.input-text{height:37px;width:100%;border:1px solid var(--grey-color);border-radius:5px;outline:none;font-size:14px;padding:10px 20px;font-weight:400;color:#090909e6}.mb-22{margin-bottom:22px}input[type=range]{-webkit-appearance:none;width:100%;height:8px;border-radius:20px;overflow:hidden;background:#fafafa}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:8px;width:10px;background:var(--primary-bg-color);box-shadow:-50rem 0 5rem 20rem #250d5e,-40rem 0 5rem 30rem #0bf,-30rem 0 2rem 25rem #250d5e,-25.5rem 0 0 25rem #0bf;border-radius:50%;cursor:pointer}\n"] }]
|
|
2433
2434
|
}], ctorParameters: () => [{ type: EventsService }, { type: ElementServiceService }, { type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
|
|
2434
2435
|
type: Inject,
|
|
2435
2436
|
args: [MAT_DIALOG_DATA]
|
|
@@ -10839,7 +10840,7 @@ class HeaderTextComponent extends BaseSection {
|
|
|
10839
10840
|
this.screenWidth = window.innerWidth;
|
|
10840
10841
|
}
|
|
10841
10842
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderTextComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10842
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderTextComponent, isStandalone: true, selector: "simpo-header-text", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\"
|
|
10843
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderTextComponent, isStandalone: true, selector: "simpo-header-text", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\"\r\n [simpoBackground]=\"styles?.background\">\r\n <div class=\"col-xxl-8 w-100 d-flex\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\" [ngClass]=\"{\r\n 'justify-content-center': styles?.layout?.align === 'center',\r\n 'justify-content-start': styles?.layout?.align === 'left',\r\n 'justify-content-end': styles?.layout?.align === 'right'\r\n }\">\r\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-center': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\"\r\n [ngStyle]=\"(styles?.devider?.display && screenWidth <= 475) ? {'margin-bottom': '45px'} : {}\">\r\n <div class=\"col px-5 content-side\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <div *ngIf=\"item.label === 'Tagline' || item.label === 'Heading'\" [innerHTML]=\"item.value | sanitizeHtml\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div> -->\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col px-5\" [id]=\"data?.id\">\r\n <!-- <div *ngFor=\"let item of content?.inputText\">\r\n <div *ngIf=\"item.label === 'Subtext'\" [innerHTML]=\"item.value | sanitizeHtml\" class=\"body-large\">\r\n </div>\r\n </div> -->\r\n\r\n\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"d-flex gap-2 d-md-flex mt-15\" [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px;margin-top:15px}.gap-15{gap:15px}.btn-primary{border:none}@media only screen and (max-width: 475px){.col-10{width:100%;height:32vh;padding-right:13px;padding-left:13px}.flex-column{flex-direction:column!important}.d-flex{justify-content:center}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { 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: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
|
10843
10844
|
}
|
|
10844
10845
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderTextComponent, decorators: [{
|
|
10845
10846
|
type: Component,
|
|
@@ -10858,7 +10859,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
10858
10859
|
PositionLayoutDirectiveDirective,
|
|
10859
10860
|
TextEditorComponent,
|
|
10860
10861
|
SpacingHorizontalDirective
|
|
10861
|
-
], template: "<div [id]=\"data?.id\"
|
|
10862
|
+
], template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\"\r\n [simpoBackground]=\"styles?.background\">\r\n <div class=\"col-xxl-8 w-100 d-flex\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\" [ngClass]=\"{\r\n 'justify-content-center': styles?.layout?.align === 'center',\r\n 'justify-content-start': styles?.layout?.align === 'left',\r\n 'justify-content-end': styles?.layout?.align === 'right'\r\n }\">\r\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-center': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\"\r\n [ngStyle]=\"(styles?.devider?.display && screenWidth <= 475) ? {'margin-bottom': '45px'} : {}\">\r\n <div class=\"col px-5 content-side\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <div *ngIf=\"item.label === 'Tagline' || item.label === 'Heading'\" [innerHTML]=\"item.value | sanitizeHtml\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div> -->\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col px-5\" [id]=\"data?.id\">\r\n <!-- <div *ngFor=\"let item of content?.inputText\">\r\n <div *ngIf=\"item.label === 'Subtext'\" [innerHTML]=\"item.value | sanitizeHtml\" class=\"body-large\">\r\n </div>\r\n </div> -->\r\n\r\n\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"d-flex gap-2 d-md-flex mt-15\" [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px;margin-top:15px}.gap-15{gap:15px}.btn-primary{border:none}@media only screen and (max-width: 475px){.col-10{width:100%;height:32vh;padding-right:13px;padding-left:13px}.flex-column{flex-direction:column!important}.d-flex{justify-content:center}}\n"] }]
|
|
10862
10863
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
10863
10864
|
type: Input
|
|
10864
10865
|
}], index: [{
|
|
@@ -15912,7 +15913,7 @@ class HeaderSectionComponent {
|
|
|
15912
15913
|
this.router.navigate(['/login']);
|
|
15913
15914
|
}
|
|
15914
15915
|
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 }); }
|
|
15915
|
-
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 && categoryList?.length == 0\">\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 \r\n <div *ngIf=\"style?.styling === 'Header1' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [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' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [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' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [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' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n\r\n <div [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" *ngIf=\"isEcommerceWebsite\"\r\n [simpoLayout]=\"screenWidth > 475 ? stylesLayout : undefined\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"ecommerce_header\"></ng-container>\r\n </div>\r\n\r\n <!-- <div class=\"input-group mx-2 mb-2 w-96\" *ngIf=\"isMobile && isEcommerceWebsite && !restrictCartBarInPages()\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search for items\" 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\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 && !restrictInPages()\">\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-15]=\"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-15]=\"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-15]=\"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-15]=\"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\"\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\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size + 80\" loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b>{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : \r\n ((content?.logo?.size >= 60 && content?.logo?.size <= 100) ? (20) : ((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\"\r\n [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=\"cart-footer\" [style.background]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n *ngIf=\"getCartItemsCount > 0 && !restrictCartBarInPages()\">\r\n <div class=\"d-flex justify-content-between px-3 py-2 h-100 align-items-center\">\r\n <div class=\"item-count fw-bold\">\r\n {{ getCartItemsCount ?? 3 }} {{ getCartItemsCount > 1 ? 'items' : 'item' }} in cart\r\n <!-- Total : \u20B9{{ getCartTotalAmount }} -->\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2 fw-bold\" (click)=\"goToCart()\">\r\n View Cart <mat-icon [simpoColor]=\"accentColor\">arrow_forward</mat-icon>\r\n </div>\r\n </div>\r\n\r\n </div>\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\" [ngClass]=\"{'justify-content-center' : !passbookAppStatus}\">\r\n <div class=\"input-group w-75 ml-2\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search For Items\" 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 <!-- <span class=\"animated-placeholder position-absolute\" \r\n [class.animate]=\"animatePlaceholder\"\r\n *ngIf=\"style?.searchBarPlaceholderList.length > 1 && style?.smartSearchBar\">\r\n {{ currentPlaceholder }}\r\n </span> -->\r\n <mat-icon class=\"h-100\"\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 </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\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n [ngClass]=\"{'offcanvas-end' : (style?.styling === 'Header1' || style?.styling === 'Header3') && !isEcommerceWebsite, 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4' || isEcommerceWebsite}\">\r\n <div class=\"offcanvas-header\" [simpoBackground]=\"style?.background\">\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-22 px-3 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>{{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\" [class.margin-top-mob]=\"isHeaderSticky\">\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 w-100\">\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\r\n<ng-template #ecommerce_header>\r\n <header class=\"site-header\">\r\n <!-- Top Bar: Logo, Search, User Actions -->\r\n <div class=\"top-bar\">\r\n\r\n <!-- Mobile Menu Toggle (Checkbox Hack) -->\r\n <div [ngClass]=\"{'mobile-header-left-side': screenWidth <= 475}\">\r\n <label for=\"mobile-menu-checkbox\" class=\"mobile-menu-btn\" data-bs-toggle=\"offcanvas\"\r\n data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\r\n <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\r\n <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\r\n </svg>\r\n </label>\r\n\r\n <!-- Logo Section -->\r\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"Logo\" class=\"logo-img\" width=\"160\" height=\"64\">\r\n </a>\r\n\r\n <a class=\"textPluslogo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n && content?.logo?.text?.isText \r\n && content?.logo?.text?.isIcon \r\n && content?.logo?.text?.url\">\r\n\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"Icon\" class=\"logo-icon\">\r\n\r\n <span class=\"logo-text\" [simpoColor]=\"simpoColor\">\r\n {{ content?.siteName?.value }}\r\n </span>\r\n </a>\r\n\r\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n && content?.logo?.text?.isText \r\n && !content?.logo?.text?.isIcon\">\r\n\r\n <span class=\"logo-main\" [simpoColor]=\"simpoColor\">\r\n {{ content?.siteName?.value }}\r\n </span>\r\n </a>\r\n </div>\r\n\r\n <!-- Search Bar -->\r\n <div class=\"search-wrapper\" *ngIf=\"screenWidth > 475\">\r\n <div class=\"search-bar\">\r\n <!-- Search Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n aria-label=\"Search\">\r\n </div>\r\n </div>\r\n\r\n <!-- Right Actions -->\r\n <div class=\"user-actions\">\r\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;showLogin = false\" *ngIf=\"!getPincode\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 17 17\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\r\n stroke=\"currentColor\" fill=\"none\" [simpoColor]=\"simpoColor\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n <path\r\n d=\"M8.5 0.5c-3.032 0-5.5 2.467-5.5 5.5 0 4.373 4.913 10.086 5.122 10.328l0.378 0.435 0.378-0.436c0.209-0.241 5.122-5.954 5.122-10.327 0-3.033-2.468-5.5-5.5-5.5zM8.5 15.215c-1.146-1.424-4.5-5.879-4.5-9.215 0-2.481 2.019-4.5 4.5-4.5s4.5 2.019 4.5 4.5c0 3.333-3.354 7.791-4.5 9.215zM8.5 3.139c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zM8.5 8.139c-1.103 0-2-0.897-2-2s0.897-2 2-2 2 0.897 2 2-0.897 2-2 2z\"\r\n fill=\"#000000\" />\r\n </svg>\r\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">Enter Pincode</span>\r\n\r\n </a>\r\n\r\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7\"></path>\r\n <path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"></path>\r\n <path d=\"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4\"></path>\r\n <path d=\"M2 7h20\"></path>\r\n <path\r\n d=\"M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7\">\r\n </path>\r\n </svg>\r\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">{{\"Delivering to: \" +\r\n getPincode}}</span>\r\n\r\n </a>\r\n\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\r\n <a class=\"action-link icon-only login-btn\" *ngIf=\"!loggedIn\"\r\n (mouseenter)=\"showLogin = true;showPincodeInput = false\" (click)=\"showLogin = !showLogin\">\r\n <!-- User Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n </svg>\r\n </a>\r\n\r\n <a class=\"action-link icon-only\" (click)=\"goToAccount('PROFILE')\" *ngIf=\"loggedIn\">\r\n <!-- User Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n </svg>\r\n </a>\r\n\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\r\n <a class=\"action-link icon-only icon-container wishlist-icon\" (click)=\"goToWishlist()\">\r\n <!-- Heart Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path\r\n d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\">\r\n </path>\r\n </svg>\r\n <!-- <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\">2</span> -->\r\n </a>\r\n\r\n <a class=\"action-link icon-only icon-container cart-icon\" (click)=\"goToCart()\">\r\n <!-- Shopping Bag Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z\"></path>\r\n <path d=\"M3 6h18\"></path>\r\n <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\r\n </svg>\r\n <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"search-wrapper\" *ngIf=\"screenWidth <= 475\">\r\n <div class=\"search-bar\">\r\n <!-- Search Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n aria-label=\"Search\">\r\n </div>\r\n </div>\r\n\r\n </header>\r\n</ng-template>", 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)}.animated-placeholder{left:12%;transform:translateY(-50%);transition:all .4s ease;font-size:14px;top:49%;color:#6f6f6f;font-weight:300}.animated-placeholder.animate{transform:translateY(-150%);opacity:0}.w-5{width:5%}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem;flex:0 0 auto}.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{width:96%;border-radius:12px!important}.input-group mat-icon{width:10%!important}.categories-header{height:unset!important}.margin-top-mob{margin-top:var(--margin-top)}.w-98{width:98%}.w-96{width:96%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.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:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:0;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}.cart-footer{position:fixed;width:96%;height:45px;bottom:65px;z-index:100;left:8px;border-radius:10px}.item-count{align-content:center}.fs-22{font-size:22px}.w-15{width:15%!important}.site-header{width:100%;border-bottom:1px solid transparent}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1440px;margin:0 auto}.logo{display:flex;flex-direction:column;align-items:flex-start;color:#5e4042;line-height:1;text-decoration:auto}.logo-img{display:block;height:auto;max-height:50px;width:auto}.logo-main{font-family:Playfair Display,serif;font-size:32px;font-weight:500;letter-spacing:.5px}.logo-sub{font-family:Montserrat,sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;margin-top:2px;margin-left:2px}.search-wrapper{flex:1;display:flex;justify-content:center;max-width:600px}.search-bar{width:100%;background-color:#f3f3f3;border-radius:8px;display:flex;align-items:center;padding:10px 16px;gap:12px}.search-icon{color:#333;width:18px;height:18px}.search-bar input{border:none;background:transparent;width:100%;font-family:Montserrat,sans-serif;font-size:14px;color:#1a1a1a;outline:none}.search-bar input::placeholder{color:#888;font-weight:400}.user-actions{display:flex;align-items:center;gap:24px}.action-link{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.action-link:hover{color:#5e4042}.store-text{white-space:nowrap}.icon-only svg{display:block;cursor:pointer}.main-nav{border-top:1px solid transparent;padding-bottom:15px}.nav-list{display:flex;justify-content:center;flex-wrap:wrap;gap:32px;padding:10px 40px}.nav-list li{position:relative}.nav-list a{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#333;padding:5px 0;display:inline-block}.nav-list a:hover{color:#5e4042}.has-badge{position:relative}.badge{position:absolute;top:-12px;right:-10px;background-color:#a87b7b;color:#fff;font-size:9px;font-weight:600;padding:2px 6px;border-radius:10px;line-height:1;white-space:nowrap}.mobile-menu-checkbox{display:none}.mobile-menu-btn{display:none;cursor:pointer;color:#333}.hero-placeholder{height:80vh;background-color:#f9f9f9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#5e4042}.hero-placeholder h1{font-family:Playfair Display,serif;font-size:3rem;margin-bottom:1rem}@media (max-width: 1024px){.nav-list{gap:20px}.store-text{display:none}.search-wrapper{margin:0 20px}}@media (max-width: 768px){.top-bar{padding:15px 20px;flex-wrap:wrap}.search-wrapper{order:3;width:100%;max-width:100%;margin:0 0 15px}.user-actions{gap:16px}.main-nav{display:none;width:100%;background:#fff;border-top:1px solid #eee}.nav-list{flex-direction:column;align-items:center;gap:15px;padding:20px}.badge{position:relative;top:-2px;right:auto;margin-left:8px;vertical-align:middle}.mobile-menu-btn{display:block}.mobile-menu-checkbox:checked~.main-nav{display:block}}@media screen and (max-width: 475px){.store-link{display:none}.info-container{width:100vw;top:62%}}.icon-container{position:relative}.count-badge{position:absolute;top:-8px;right:-8px;font-size:10px;font-weight:600;height:18px;width:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #ffffff}.textPluslogo{display:flex;align-items:center;gap:8px;flex-shrink:0;text-decoration:none}.logo-icon{color:#5e4042;width:64px;height:64px}.logo-text{font-size:28px;font-weight:600;color:#1a1a1a;letter-spacing:-.5px}.mobile-header-left-side{display:flex;align-items:center;gap: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"] }] }); }
|
|
15916
|
+
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 && categoryList?.length == 0\">\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\r\n <div *ngIf=\"style?.styling === 'Header1' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [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' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [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' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [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' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n\r\n <div [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" *ngIf=\"isEcommerceWebsite\"\r\n [simpoLayout]=\"screenWidth > 475 ? stylesLayout : undefined\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"ecommerce_header\"></ng-container>\r\n </div>\r\n\r\n <!-- <div class=\"input-group mx-2 mb-2 w-96\" *ngIf=\"isMobile && isEcommerceWebsite && !restrictCartBarInPages()\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search for items\" 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\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 && !restrictInPages()\">\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-15]=\"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-15]=\"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-15]=\"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-15]=\"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\"\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\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size + 80\" loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b>{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : \r\n ((content?.logo?.size >= 60 && content?.logo?.size <= 100) ? (20) : ((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\"\r\n [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=\"cart-footer\" [style.background]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n *ngIf=\"getCartItemsCount > 0 && !restrictCartBarInPages()\">\r\n <div class=\"d-flex justify-content-between px-3 py-2 h-100 align-items-center\">\r\n <div class=\"item-count fw-bold\">\r\n {{ getCartItemsCount ?? 3 }} {{ getCartItemsCount > 1 ? 'items' : 'item' }} in cart\r\n <!-- Total : \u20B9{{ getCartTotalAmount }} -->\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2 fw-bold\" (click)=\"goToCart()\">\r\n View Cart <mat-icon [simpoColor]=\"accentColor\">arrow_forward</mat-icon>\r\n </div>\r\n </div>\r\n\r\n </div>\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\" [ngClass]=\"{'justify-content-center' : !passbookAppStatus}\">\r\n <div class=\"input-group w-75 ml-2\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search For Items\" 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 <!-- <span class=\"animated-placeholder position-absolute\" \r\n [class.animate]=\"animatePlaceholder\"\r\n *ngIf=\"style?.searchBarPlaceholderList.length > 1 && style?.smartSearchBar\">\r\n {{ currentPlaceholder }}\r\n </span> -->\r\n <mat-icon class=\"h-100\"\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 </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\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n [ngClass]=\"{'offcanvas-end' : (style?.styling === 'Header1' || style?.styling === 'Header3') && !isEcommerceWebsite, 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4' || isEcommerceWebsite}\">\r\n <div class=\"offcanvas-header\" [simpoBackground]=\"style?.background\">\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-22 px-3 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>{{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\" [class.margin-top-mob]=\"isHeaderSticky\">\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 w-100\">\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\r\n<ng-template #ecommerce_header>\r\n <header class=\"site-header\">\r\n <!-- Top Bar: Logo, Search, User Actions -->\r\n <div class=\"top-bar\">\r\n\r\n <!-- Mobile Menu Toggle (Checkbox Hack) -->\r\n <div [ngClass]=\"{'mobile-header-left-side': screenWidth <= 475}\">\r\n <label for=\"mobile-menu-checkbox\" class=\"mobile-menu-btn\" data-bs-toggle=\"offcanvas\"\r\n data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\r\n <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\r\n <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\r\n </svg>\r\n </label>\r\n\r\n <!-- Logo Section -->\r\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"Logo\" class=\"logo-img\" width=\"160\" height=\"64\">\r\n </a>\r\n\r\n <a class=\"textPluslogo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n && content?.logo?.text?.isText \r\n && content?.logo?.text?.isIcon \r\n && content?.logo?.text?.url\">\r\n\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"Icon\" class=\"logo-icon\">\r\n\r\n <span class=\"logo-text\" [simpoColor]=\"simpoColor\">\r\n {{ content?.siteName?.value }}\r\n </span>\r\n </a>\r\n\r\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n && content?.logo?.text?.isText \r\n && !content?.logo?.text?.isIcon\">\r\n\r\n <span class=\"logo-main\" [simpoColor]=\"simpoColor\">\r\n {{ content?.siteName?.value }}\r\n </span>\r\n </a>\r\n </div>\r\n\r\n <!-- Search Bar -->\r\n <div class=\"search-wrapper\" *ngIf=\"screenWidth > 475\">\r\n <div class=\"search-bar\">\r\n <!-- Search Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n aria-label=\"Search\">\r\n </div>\r\n </div>\r\n\r\n <!-- Right Actions -->\r\n <div class=\"user-actions\">\r\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;showLogin = false\" *ngIf=\"!getPincode\">\r\n <!-- <svg width=\"20\" height=\"20\" viewBox=\"0 0 17 17\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\r\n stroke=\"currentColor\" fill=\"none\" [simpoColor]=\"simpoColor\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n <path\r\n d=\"M8.5 0.5c-3.032 0-5.5 2.467-5.5 5.5 0 4.373 4.913 10.086 5.122 10.328l0.378 0.435 0.378-0.436c0.209-0.241 5.122-5.954 5.122-10.327 0-3.033-2.468-5.5-5.5-5.5zM8.5 15.215c-1.146-1.424-4.5-5.879-4.5-9.215 0-2.481 2.019-4.5 4.5-4.5s4.5 2.019 4.5 4.5c0 3.333-3.354 7.791-4.5 9.215zM8.5 3.139c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zM8.5 8.139c-1.103 0-2-0.897-2-2s0.897-2 2-2 2 0.897 2 2-0.897 2-2 2z\"\r\n fill=\"#000000\" />\r\n </svg> -->\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 512 512\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"currentColor\">\r\n <g>\r\n <path\r\n d=\"M341.476 338.285c54.483-85.493 47.634-74.827 49.204-77.056C410.516 233.251 421 200.322 421 166 421 74.98 347.139 0 256 0 165.158 0 91 74.832 91 166c0 34.3 10.704 68.091 31.19 96.446l48.332 75.84C118.847 346.227 31 369.892 31 422c0 18.995 12.398 46.065 71.462 67.159C143.704 503.888 198.231 512 256 512c108.025 0 225-30.472 225-90 0-52.117-87.744-75.757-139.524-83.715zm-194.227-92.34a15.57 15.57 0 0 0-.517-.758C129.685 221.735 121 193.941 121 166c0-75.018 60.406-136 135-136 74.439 0 135 61.009 135 136 0 27.986-8.521 54.837-24.646 77.671-1.445 1.906 6.094-9.806-110.354 172.918L147.249 245.945zM256 482c-117.994 0-195-34.683-195-60 0-17.016 39.568-44.995 127.248-55.901l55.102 86.463a14.998 14.998 0 0 0 25.298 0l55.101-86.463C411.431 377.005 451 404.984 451 422c0 25.102-76.313 60-195 60z\">\r\n </path>\r\n <path\r\n d=\"M256 91c-41.355 0-75 33.645-75 75s33.645 75 75 75 75-33.645 75-75-33.645-75-75-75zm0 120c-24.813 0-45-20.187-45-45s20.187-45 45-45 45 20.187 45 45-20.187 45-45 45z\">\r\n </path>\r\n </g>\r\n </svg>\r\n\r\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">Enter Pincode</span>\r\n\r\n </a>\r\n\r\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7\"></path>\r\n <path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"></path>\r\n <path d=\"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4\"></path>\r\n <path d=\"M2 7h20\"></path>\r\n <path\r\n d=\"M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7\">\r\n </path>\r\n </svg>\r\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">{{\"Delivering to: \" +\r\n getPincode}}</span>\r\n\r\n </a>\r\n\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\r\n <a class=\"action-link icon-only login-btn\" *ngIf=\"!loggedIn\"\r\n (mouseenter)=\"showLogin = true;showPincodeInput = false\" (click)=\"showLogin = !showLogin\">\r\n <!-- User Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n </svg>\r\n </a>\r\n\r\n <a class=\"action-link icon-only\" (click)=\"goToAccount('PROFILE')\" *ngIf=\"loggedIn\">\r\n <!-- User Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n </svg>\r\n </a>\r\n\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\r\n <a class=\"action-link icon-only icon-container wishlist-icon\" (click)=\"goToWishlist()\">\r\n <!-- Heart Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path\r\n d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\">\r\n </path>\r\n </svg>\r\n <!-- <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\">2</span> -->\r\n </a>\r\n\r\n <a class=\"action-link icon-only icon-container cart-icon\" (click)=\"goToCart()\">\r\n <!-- Shopping Bag Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z\"></path>\r\n <path d=\"M3 6h18\"></path>\r\n <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\r\n </svg>\r\n <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"search-wrapper\" *ngIf=\"screenWidth <= 475\">\r\n <div class=\"search-bar\">\r\n <!-- Search Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n aria-label=\"Search\">\r\n </div>\r\n </div>\r\n\r\n </header>\r\n</ng-template>", 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)}.animated-placeholder{left:12%;transform:translateY(-50%);transition:all .4s ease;font-size:14px;top:49%;color:#6f6f6f;font-weight:300}.animated-placeholder.animate{transform:translateY(-150%);opacity:0}.w-5{width:5%}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem;flex:0 0 auto}.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{width:96%;border-radius:12px!important}.input-group mat-icon{width:10%!important}.categories-header{height:unset!important}.margin-top-mob{margin-top:var(--margin-top)}.w-98{width:98%}.w-96{width:96%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.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:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:0;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}.cart-footer{position:fixed;width:96%;height:45px;bottom:65px;z-index:100;left:8px;border-radius:10px}.item-count{align-content:center}.fs-22{font-size:22px}.w-15{width:15%!important}.site-header{width:100%;border-bottom:1px solid transparent}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1440px;margin:0 auto}.logo{display:flex;flex-direction:column;align-items:flex-start;color:#5e4042;line-height:1;text-decoration:auto}.logo-img{display:block;height:auto;max-height:50px;width:auto}.logo-main{font-family:Playfair Display,serif;font-size:32px;font-weight:500;letter-spacing:.5px}.logo-sub{font-family:Montserrat,sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;margin-top:2px;margin-left:2px}.search-wrapper{flex:1;display:flex;justify-content:center;max-width:600px}.search-bar{width:100%;background-color:#f3f3f3;border-radius:8px;display:flex;align-items:center;padding:10px 16px;gap:12px}.search-icon{color:#333;width:18px;height:18px}.search-bar input{border:none;background:transparent;width:100%;font-family:Montserrat,sans-serif;font-size:14px;color:#1a1a1a;outline:none}.search-bar input::placeholder{color:#888;font-weight:400}.user-actions{display:flex;align-items:center;gap:24px}.action-link{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.action-link:hover{color:#5e4042}.store-text{white-space:nowrap}.icon-only svg{display:block;cursor:pointer}.main-nav{border-top:1px solid transparent;padding-bottom:15px}.nav-list{display:flex;justify-content:center;flex-wrap:wrap;gap:32px;padding:10px 40px}.nav-list li{position:relative}.nav-list a{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#333;padding:5px 0;display:inline-block}.nav-list a:hover{color:#5e4042}.has-badge{position:relative}.badge{position:absolute;top:-12px;right:-10px;background-color:#a87b7b;color:#fff;font-size:9px;font-weight:600;padding:2px 6px;border-radius:10px;line-height:1;white-space:nowrap}.mobile-menu-checkbox{display:none}.mobile-menu-btn{display:none;cursor:pointer;color:#333}.hero-placeholder{height:80vh;background-color:#f9f9f9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#5e4042}.hero-placeholder h1{font-family:Playfair Display,serif;font-size:3rem;margin-bottom:1rem}@media (max-width: 1024px){.nav-list{gap:20px}.store-text{display:none}.search-wrapper{margin:0 20px}}@media (max-width: 768px){.top-bar{padding:15px 20px;flex-wrap:wrap}.search-wrapper{order:3;width:100%;max-width:100%;margin:0 0 15px}.user-actions{gap:16px}.main-nav{display:none;width:100%;background:#fff;border-top:1px solid #eee}.nav-list{flex-direction:column;align-items:center;gap:15px;padding:20px}.badge{position:relative;top:-2px;right:auto;margin-left:8px;vertical-align:middle}.mobile-menu-btn{display:block}.mobile-menu-checkbox:checked~.main-nav{display:block}}@media screen and (max-width: 475px){.store-link{display:none}.info-container{width:100vw;top:62%}}.icon-container{position:relative}.count-badge{position:absolute;top:-8px;right:-8px;font-size:10px;font-weight:600;height:18px;width:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #ffffff}.textPluslogo{display:flex;align-items:center;gap:8px;flex-shrink:0;text-decoration:none}.logo-icon{color:#5e4042;width:64px;height:64px}.logo-text{font-size:28px;font-weight:600;color:#1a1a1a;letter-spacing:-.5px}.mobile-header-left-side{display:flex;align-items:center;gap: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"] }] }); }
|
|
15916
15917
|
}
|
|
15917
15918
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, decorators: [{
|
|
15918
15919
|
type: Component,
|
|
@@ -15936,7 +15937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
15936
15937
|
SpacingHorizontalDirective,
|
|
15937
15938
|
MovingTextComponent,
|
|
15938
15939
|
ContentFitDirective,
|
|
15939
|
-
], 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 && categoryList?.length == 0\">\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 \r\n <div *ngIf=\"style?.styling === 'Header1' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [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' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [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' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [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' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n\r\n <div [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" *ngIf=\"isEcommerceWebsite\"\r\n [simpoLayout]=\"screenWidth > 475 ? stylesLayout : undefined\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"ecommerce_header\"></ng-container>\r\n </div>\r\n\r\n <!-- <div class=\"input-group mx-2 mb-2 w-96\" *ngIf=\"isMobile && isEcommerceWebsite && !restrictCartBarInPages()\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search for items\" 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\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 && !restrictInPages()\">\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-15]=\"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-15]=\"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-15]=\"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-15]=\"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\"\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\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size + 80\" loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b>{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : \r\n ((content?.logo?.size >= 60 && content?.logo?.size <= 100) ? (20) : ((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\"\r\n [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=\"cart-footer\" [style.background]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n *ngIf=\"getCartItemsCount > 0 && !restrictCartBarInPages()\">\r\n <div class=\"d-flex justify-content-between px-3 py-2 h-100 align-items-center\">\r\n <div class=\"item-count fw-bold\">\r\n {{ getCartItemsCount ?? 3 }} {{ getCartItemsCount > 1 ? 'items' : 'item' }} in cart\r\n <!-- Total : \u20B9{{ getCartTotalAmount }} -->\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2 fw-bold\" (click)=\"goToCart()\">\r\n View Cart <mat-icon [simpoColor]=\"accentColor\">arrow_forward</mat-icon>\r\n </div>\r\n </div>\r\n\r\n </div>\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\" [ngClass]=\"{'justify-content-center' : !passbookAppStatus}\">\r\n <div class=\"input-group w-75 ml-2\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search For Items\" 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 <!-- <span class=\"animated-placeholder position-absolute\" \r\n [class.animate]=\"animatePlaceholder\"\r\n *ngIf=\"style?.searchBarPlaceholderList.length > 1 && style?.smartSearchBar\">\r\n {{ currentPlaceholder }}\r\n </span> -->\r\n <mat-icon class=\"h-100\"\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 </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\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n [ngClass]=\"{'offcanvas-end' : (style?.styling === 'Header1' || style?.styling === 'Header3') && !isEcommerceWebsite, 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4' || isEcommerceWebsite}\">\r\n <div class=\"offcanvas-header\" [simpoBackground]=\"style?.background\">\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-22 px-3 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>{{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\" [class.margin-top-mob]=\"isHeaderSticky\">\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 w-100\">\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\r\n<ng-template #ecommerce_header>\r\n <header class=\"site-header\">\r\n <!-- Top Bar: Logo, Search, User Actions -->\r\n <div class=\"top-bar\">\r\n\r\n <!-- Mobile Menu Toggle (Checkbox Hack) -->\r\n <div [ngClass]=\"{'mobile-header-left-side': screenWidth <= 475}\">\r\n <label for=\"mobile-menu-checkbox\" class=\"mobile-menu-btn\" data-bs-toggle=\"offcanvas\"\r\n data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\r\n <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\r\n <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\r\n </svg>\r\n </label>\r\n\r\n <!-- Logo Section -->\r\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"Logo\" class=\"logo-img\" width=\"160\" height=\"64\">\r\n </a>\r\n\r\n <a class=\"textPluslogo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n && content?.logo?.text?.isText \r\n && content?.logo?.text?.isIcon \r\n && content?.logo?.text?.url\">\r\n\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"Icon\" class=\"logo-icon\">\r\n\r\n <span class=\"logo-text\" [simpoColor]=\"simpoColor\">\r\n {{ content?.siteName?.value }}\r\n </span>\r\n </a>\r\n\r\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n && content?.logo?.text?.isText \r\n && !content?.logo?.text?.isIcon\">\r\n\r\n <span class=\"logo-main\" [simpoColor]=\"simpoColor\">\r\n {{ content?.siteName?.value }}\r\n </span>\r\n </a>\r\n </div>\r\n\r\n <!-- Search Bar -->\r\n <div class=\"search-wrapper\" *ngIf=\"screenWidth > 475\">\r\n <div class=\"search-bar\">\r\n <!-- Search Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n aria-label=\"Search\">\r\n </div>\r\n </div>\r\n\r\n <!-- Right Actions -->\r\n <div class=\"user-actions\">\r\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;showLogin = false\" *ngIf=\"!getPincode\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 17 17\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\r\n stroke=\"currentColor\" fill=\"none\" [simpoColor]=\"simpoColor\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n <path\r\n d=\"M8.5 0.5c-3.032 0-5.5 2.467-5.5 5.5 0 4.373 4.913 10.086 5.122 10.328l0.378 0.435 0.378-0.436c0.209-0.241 5.122-5.954 5.122-10.327 0-3.033-2.468-5.5-5.5-5.5zM8.5 15.215c-1.146-1.424-4.5-5.879-4.5-9.215 0-2.481 2.019-4.5 4.5-4.5s4.5 2.019 4.5 4.5c0 3.333-3.354 7.791-4.5 9.215zM8.5 3.139c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zM8.5 8.139c-1.103 0-2-0.897-2-2s0.897-2 2-2 2 0.897 2 2-0.897 2-2 2z\"\r\n fill=\"#000000\" />\r\n </svg>\r\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">Enter Pincode</span>\r\n\r\n </a>\r\n\r\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7\"></path>\r\n <path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"></path>\r\n <path d=\"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4\"></path>\r\n <path d=\"M2 7h20\"></path>\r\n <path\r\n d=\"M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7\">\r\n </path>\r\n </svg>\r\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">{{\"Delivering to: \" +\r\n getPincode}}</span>\r\n\r\n </a>\r\n\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\r\n <a class=\"action-link icon-only login-btn\" *ngIf=\"!loggedIn\"\r\n (mouseenter)=\"showLogin = true;showPincodeInput = false\" (click)=\"showLogin = !showLogin\">\r\n <!-- User Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n </svg>\r\n </a>\r\n\r\n <a class=\"action-link icon-only\" (click)=\"goToAccount('PROFILE')\" *ngIf=\"loggedIn\">\r\n <!-- User Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n </svg>\r\n </a>\r\n\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\r\n <a class=\"action-link icon-only icon-container wishlist-icon\" (click)=\"goToWishlist()\">\r\n <!-- Heart Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path\r\n d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\">\r\n </path>\r\n </svg>\r\n <!-- <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\">2</span> -->\r\n </a>\r\n\r\n <a class=\"action-link icon-only icon-container cart-icon\" (click)=\"goToCart()\">\r\n <!-- Shopping Bag Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z\"></path>\r\n <path d=\"M3 6h18\"></path>\r\n <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\r\n </svg>\r\n <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"search-wrapper\" *ngIf=\"screenWidth <= 475\">\r\n <div class=\"search-bar\">\r\n <!-- Search Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n aria-label=\"Search\">\r\n </div>\r\n </div>\r\n\r\n </header>\r\n</ng-template>", 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)}.animated-placeholder{left:12%;transform:translateY(-50%);transition:all .4s ease;font-size:14px;top:49%;color:#6f6f6f;font-weight:300}.animated-placeholder.animate{transform:translateY(-150%);opacity:0}.w-5{width:5%}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem;flex:0 0 auto}.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{width:96%;border-radius:12px!important}.input-group mat-icon{width:10%!important}.categories-header{height:unset!important}.margin-top-mob{margin-top:var(--margin-top)}.w-98{width:98%}.w-96{width:96%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.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:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:0;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}.cart-footer{position:fixed;width:96%;height:45px;bottom:65px;z-index:100;left:8px;border-radius:10px}.item-count{align-content:center}.fs-22{font-size:22px}.w-15{width:15%!important}.site-header{width:100%;border-bottom:1px solid transparent}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1440px;margin:0 auto}.logo{display:flex;flex-direction:column;align-items:flex-start;color:#5e4042;line-height:1;text-decoration:auto}.logo-img{display:block;height:auto;max-height:50px;width:auto}.logo-main{font-family:Playfair Display,serif;font-size:32px;font-weight:500;letter-spacing:.5px}.logo-sub{font-family:Montserrat,sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;margin-top:2px;margin-left:2px}.search-wrapper{flex:1;display:flex;justify-content:center;max-width:600px}.search-bar{width:100%;background-color:#f3f3f3;border-radius:8px;display:flex;align-items:center;padding:10px 16px;gap:12px}.search-icon{color:#333;width:18px;height:18px}.search-bar input{border:none;background:transparent;width:100%;font-family:Montserrat,sans-serif;font-size:14px;color:#1a1a1a;outline:none}.search-bar input::placeholder{color:#888;font-weight:400}.user-actions{display:flex;align-items:center;gap:24px}.action-link{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.action-link:hover{color:#5e4042}.store-text{white-space:nowrap}.icon-only svg{display:block;cursor:pointer}.main-nav{border-top:1px solid transparent;padding-bottom:15px}.nav-list{display:flex;justify-content:center;flex-wrap:wrap;gap:32px;padding:10px 40px}.nav-list li{position:relative}.nav-list a{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#333;padding:5px 0;display:inline-block}.nav-list a:hover{color:#5e4042}.has-badge{position:relative}.badge{position:absolute;top:-12px;right:-10px;background-color:#a87b7b;color:#fff;font-size:9px;font-weight:600;padding:2px 6px;border-radius:10px;line-height:1;white-space:nowrap}.mobile-menu-checkbox{display:none}.mobile-menu-btn{display:none;cursor:pointer;color:#333}.hero-placeholder{height:80vh;background-color:#f9f9f9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#5e4042}.hero-placeholder h1{font-family:Playfair Display,serif;font-size:3rem;margin-bottom:1rem}@media (max-width: 1024px){.nav-list{gap:20px}.store-text{display:none}.search-wrapper{margin:0 20px}}@media (max-width: 768px){.top-bar{padding:15px 20px;flex-wrap:wrap}.search-wrapper{order:3;width:100%;max-width:100%;margin:0 0 15px}.user-actions{gap:16px}.main-nav{display:none;width:100%;background:#fff;border-top:1px solid #eee}.nav-list{flex-direction:column;align-items:center;gap:15px;padding:20px}.badge{position:relative;top:-2px;right:auto;margin-left:8px;vertical-align:middle}.mobile-menu-btn{display:block}.mobile-menu-checkbox:checked~.main-nav{display:block}}@media screen and (max-width: 475px){.store-link{display:none}.info-container{width:100vw;top:62%}}.icon-container{position:relative}.count-badge{position:absolute;top:-8px;right:-8px;font-size:10px;font-weight:600;height:18px;width:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #ffffff}.textPluslogo{display:flex;align-items:center;gap:8px;flex-shrink:0;text-decoration:none}.logo-icon{color:#5e4042;width:64px;height:64px}.logo-text{font-size:28px;font-weight:600;color:#1a1a1a;letter-spacing:-.5px}.mobile-header-left-side{display:flex;align-items:center;gap:15px}\n"] }]
|
|
15940
|
+
], 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 && categoryList?.length == 0\">\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\r\n <div *ngIf=\"style?.styling === 'Header1' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [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' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [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' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [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' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n\r\n <div [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" *ngIf=\"isEcommerceWebsite\"\r\n [simpoLayout]=\"screenWidth > 475 ? stylesLayout : undefined\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"ecommerce_header\"></ng-container>\r\n </div>\r\n\r\n <!-- <div class=\"input-group mx-2 mb-2 w-96\" *ngIf=\"isMobile && isEcommerceWebsite && !restrictCartBarInPages()\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search for items\" 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\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 && !restrictInPages()\">\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-15]=\"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-15]=\"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-15]=\"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-15]=\"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\"\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\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size + 80\" loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b>{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : \r\n ((content?.logo?.size >= 60 && content?.logo?.size <= 100) ? (20) : ((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\"\r\n [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=\"cart-footer\" [style.background]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n *ngIf=\"getCartItemsCount > 0 && !restrictCartBarInPages()\">\r\n <div class=\"d-flex justify-content-between px-3 py-2 h-100 align-items-center\">\r\n <div class=\"item-count fw-bold\">\r\n {{ getCartItemsCount ?? 3 }} {{ getCartItemsCount > 1 ? 'items' : 'item' }} in cart\r\n <!-- Total : \u20B9{{ getCartTotalAmount }} -->\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2 fw-bold\" (click)=\"goToCart()\">\r\n View Cart <mat-icon [simpoColor]=\"accentColor\">arrow_forward</mat-icon>\r\n </div>\r\n </div>\r\n\r\n </div>\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\" [ngClass]=\"{'justify-content-center' : !passbookAppStatus}\">\r\n <div class=\"input-group w-75 ml-2\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search For Items\" 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 <!-- <span class=\"animated-placeholder position-absolute\" \r\n [class.animate]=\"animatePlaceholder\"\r\n *ngIf=\"style?.searchBarPlaceholderList.length > 1 && style?.smartSearchBar\">\r\n {{ currentPlaceholder }}\r\n </span> -->\r\n <mat-icon class=\"h-100\"\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 </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\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n [ngClass]=\"{'offcanvas-end' : (style?.styling === 'Header1' || style?.styling === 'Header3') && !isEcommerceWebsite, 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4' || isEcommerceWebsite}\">\r\n <div class=\"offcanvas-header\" [simpoBackground]=\"style?.background\">\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-22 px-3 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>{{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\" [class.margin-top-mob]=\"isHeaderSticky\">\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 w-100\">\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\r\n<ng-template #ecommerce_header>\r\n <header class=\"site-header\">\r\n <!-- Top Bar: Logo, Search, User Actions -->\r\n <div class=\"top-bar\">\r\n\r\n <!-- Mobile Menu Toggle (Checkbox Hack) -->\r\n <div [ngClass]=\"{'mobile-header-left-side': screenWidth <= 475}\">\r\n <label for=\"mobile-menu-checkbox\" class=\"mobile-menu-btn\" data-bs-toggle=\"offcanvas\"\r\n data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\r\n <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\r\n <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\r\n </svg>\r\n </label>\r\n\r\n <!-- Logo Section -->\r\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"Logo\" class=\"logo-img\" width=\"160\" height=\"64\">\r\n </a>\r\n\r\n <a class=\"textPluslogo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n && content?.logo?.text?.isText \r\n && content?.logo?.text?.isIcon \r\n && content?.logo?.text?.url\">\r\n\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"Icon\" class=\"logo-icon\">\r\n\r\n <span class=\"logo-text\" [simpoColor]=\"simpoColor\">\r\n {{ content?.siteName?.value }}\r\n </span>\r\n </a>\r\n\r\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n && content?.logo?.text?.isText \r\n && !content?.logo?.text?.isIcon\">\r\n\r\n <span class=\"logo-main\" [simpoColor]=\"simpoColor\">\r\n {{ content?.siteName?.value }}\r\n </span>\r\n </a>\r\n </div>\r\n\r\n <!-- Search Bar -->\r\n <div class=\"search-wrapper\" *ngIf=\"screenWidth > 475\">\r\n <div class=\"search-bar\">\r\n <!-- Search Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n aria-label=\"Search\">\r\n </div>\r\n </div>\r\n\r\n <!-- Right Actions -->\r\n <div class=\"user-actions\">\r\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;showLogin = false\" *ngIf=\"!getPincode\">\r\n <!-- <svg width=\"20\" height=\"20\" viewBox=\"0 0 17 17\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\r\n stroke=\"currentColor\" fill=\"none\" [simpoColor]=\"simpoColor\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n <path\r\n d=\"M8.5 0.5c-3.032 0-5.5 2.467-5.5 5.5 0 4.373 4.913 10.086 5.122 10.328l0.378 0.435 0.378-0.436c0.209-0.241 5.122-5.954 5.122-10.327 0-3.033-2.468-5.5-5.5-5.5zM8.5 15.215c-1.146-1.424-4.5-5.879-4.5-9.215 0-2.481 2.019-4.5 4.5-4.5s4.5 2.019 4.5 4.5c0 3.333-3.354 7.791-4.5 9.215zM8.5 3.139c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zM8.5 8.139c-1.103 0-2-0.897-2-2s0.897-2 2-2 2 0.897 2 2-0.897 2-2 2z\"\r\n fill=\"#000000\" />\r\n </svg> -->\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 512 512\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"currentColor\">\r\n <g>\r\n <path\r\n d=\"M341.476 338.285c54.483-85.493 47.634-74.827 49.204-77.056C410.516 233.251 421 200.322 421 166 421 74.98 347.139 0 256 0 165.158 0 91 74.832 91 166c0 34.3 10.704 68.091 31.19 96.446l48.332 75.84C118.847 346.227 31 369.892 31 422c0 18.995 12.398 46.065 71.462 67.159C143.704 503.888 198.231 512 256 512c108.025 0 225-30.472 225-90 0-52.117-87.744-75.757-139.524-83.715zm-194.227-92.34a15.57 15.57 0 0 0-.517-.758C129.685 221.735 121 193.941 121 166c0-75.018 60.406-136 135-136 74.439 0 135 61.009 135 136 0 27.986-8.521 54.837-24.646 77.671-1.445 1.906 6.094-9.806-110.354 172.918L147.249 245.945zM256 482c-117.994 0-195-34.683-195-60 0-17.016 39.568-44.995 127.248-55.901l55.102 86.463a14.998 14.998 0 0 0 25.298 0l55.101-86.463C411.431 377.005 451 404.984 451 422c0 25.102-76.313 60-195 60z\">\r\n </path>\r\n <path\r\n d=\"M256 91c-41.355 0-75 33.645-75 75s33.645 75 75 75 75-33.645 75-75-33.645-75-75-75zm0 120c-24.813 0-45-20.187-45-45s20.187-45 45-45 45 20.187 45 45-20.187 45-45 45z\">\r\n </path>\r\n </g>\r\n </svg>\r\n\r\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">Enter Pincode</span>\r\n\r\n </a>\r\n\r\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7\"></path>\r\n <path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"></path>\r\n <path d=\"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4\"></path>\r\n <path d=\"M2 7h20\"></path>\r\n <path\r\n d=\"M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7\">\r\n </path>\r\n </svg>\r\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">{{\"Delivering to: \" +\r\n getPincode}}</span>\r\n\r\n </a>\r\n\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\r\n <a class=\"action-link icon-only login-btn\" *ngIf=\"!loggedIn\"\r\n (mouseenter)=\"showLogin = true;showPincodeInput = false\" (click)=\"showLogin = !showLogin\">\r\n <!-- User Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n </svg>\r\n </a>\r\n\r\n <a class=\"action-link icon-only\" (click)=\"goToAccount('PROFILE')\" *ngIf=\"loggedIn\">\r\n <!-- User Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n </svg>\r\n </a>\r\n\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\r\n <a class=\"action-link icon-only icon-container wishlist-icon\" (click)=\"goToWishlist()\">\r\n <!-- Heart Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path\r\n d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\">\r\n </path>\r\n </svg>\r\n <!-- <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\">2</span> -->\r\n </a>\r\n\r\n <a class=\"action-link icon-only icon-container cart-icon\" (click)=\"goToCart()\">\r\n <!-- Shopping Bag Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z\"></path>\r\n <path d=\"M3 6h18\"></path>\r\n <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\r\n </svg>\r\n <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"search-wrapper\" *ngIf=\"screenWidth <= 475\">\r\n <div class=\"search-bar\">\r\n <!-- Search Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n aria-label=\"Search\">\r\n </div>\r\n </div>\r\n\r\n </header>\r\n</ng-template>", 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)}.animated-placeholder{left:12%;transform:translateY(-50%);transition:all .4s ease;font-size:14px;top:49%;color:#6f6f6f;font-weight:300}.animated-placeholder.animate{transform:translateY(-150%);opacity:0}.w-5{width:5%}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem;flex:0 0 auto}.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{width:96%;border-radius:12px!important}.input-group mat-icon{width:10%!important}.categories-header{height:unset!important}.margin-top-mob{margin-top:var(--margin-top)}.w-98{width:98%}.w-96{width:96%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.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:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:0;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}.cart-footer{position:fixed;width:96%;height:45px;bottom:65px;z-index:100;left:8px;border-radius:10px}.item-count{align-content:center}.fs-22{font-size:22px}.w-15{width:15%!important}.site-header{width:100%;border-bottom:1px solid transparent}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1440px;margin:0 auto}.logo{display:flex;flex-direction:column;align-items:flex-start;color:#5e4042;line-height:1;text-decoration:auto}.logo-img{display:block;height:auto;max-height:50px;width:auto}.logo-main{font-family:Playfair Display,serif;font-size:32px;font-weight:500;letter-spacing:.5px}.logo-sub{font-family:Montserrat,sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;margin-top:2px;margin-left:2px}.search-wrapper{flex:1;display:flex;justify-content:center;max-width:600px}.search-bar{width:100%;background-color:#f3f3f3;border-radius:8px;display:flex;align-items:center;padding:10px 16px;gap:12px}.search-icon{color:#333;width:18px;height:18px}.search-bar input{border:none;background:transparent;width:100%;font-family:Montserrat,sans-serif;font-size:14px;color:#1a1a1a;outline:none}.search-bar input::placeholder{color:#888;font-weight:400}.user-actions{display:flex;align-items:center;gap:24px}.action-link{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.action-link:hover{color:#5e4042}.store-text{white-space:nowrap}.icon-only svg{display:block;cursor:pointer}.main-nav{border-top:1px solid transparent;padding-bottom:15px}.nav-list{display:flex;justify-content:center;flex-wrap:wrap;gap:32px;padding:10px 40px}.nav-list li{position:relative}.nav-list a{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#333;padding:5px 0;display:inline-block}.nav-list a:hover{color:#5e4042}.has-badge{position:relative}.badge{position:absolute;top:-12px;right:-10px;background-color:#a87b7b;color:#fff;font-size:9px;font-weight:600;padding:2px 6px;border-radius:10px;line-height:1;white-space:nowrap}.mobile-menu-checkbox{display:none}.mobile-menu-btn{display:none;cursor:pointer;color:#333}.hero-placeholder{height:80vh;background-color:#f9f9f9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#5e4042}.hero-placeholder h1{font-family:Playfair Display,serif;font-size:3rem;margin-bottom:1rem}@media (max-width: 1024px){.nav-list{gap:20px}.store-text{display:none}.search-wrapper{margin:0 20px}}@media (max-width: 768px){.top-bar{padding:15px 20px;flex-wrap:wrap}.search-wrapper{order:3;width:100%;max-width:100%;margin:0 0 15px}.user-actions{gap:16px}.main-nav{display:none;width:100%;background:#fff;border-top:1px solid #eee}.nav-list{flex-direction:column;align-items:center;gap:15px;padding:20px}.badge{position:relative;top:-2px;right:auto;margin-left:8px;vertical-align:middle}.mobile-menu-btn{display:block}.mobile-menu-checkbox:checked~.main-nav{display:block}}@media screen and (max-width: 475px){.store-link{display:none}.info-container{width:100vw;top:62%}}.icon-container{position:relative}.count-badge{position:absolute;top:-8px;right:-8px;font-size:10px;font-weight:600;height:18px;width:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #ffffff}.textPluslogo{display:flex;align-items:center;gap:8px;flex-shrink:0;text-decoration:none}.logo-icon{color:#5e4042;width:64px;height:64px}.logo-text{font-size:28px;font-weight:600;color:#1a1a1a;letter-spacing:-.5px}.mobile-header-left-side{display:flex;align-items:center;gap:15px}\n"] }]
|
|
15940
15941
|
}], ctorParameters: () => [{ type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i1$1.MatDialog }, { type: StorageServiceService }, { type: RestService }, { type: EventsService }, { type: undefined, decorators: [{
|
|
15941
15942
|
type: Inject,
|
|
15942
15943
|
args: [LOCAL_STORAGE]
|
|
@@ -17428,7 +17429,7 @@ class FeaturedProductsComponent extends BaseSection {
|
|
|
17428
17429
|
this._eventService.buttonRedirection.emit({ data: data });
|
|
17429
17430
|
}
|
|
17430
17431
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeaturedProductsComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$2.Router }, { token: CartService }, { token: StorageServiceService }, { token: i6$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
17431
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FeaturedProductsComponent, isStandalone: true, selector: "simpo-featured-products", inputs: { data: "data", responseData: "responseData", index: "index", isRelatedProduct: "isRelatedProduct", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, outputs: { changeDetailProduct: "changeDetailProduct" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<ng-container>\r\n <section class=\"container-fluid total-container px-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\" [simpoBorder]=\"styles?.border\" [id]=\"data?.id\">\r\n <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoBackground]=\"styles?.background\"\r\n [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div class=\"d-flex flex-column w-100\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"d-flex jc-space align-center content-side\">\r\n <div class=\"input-text content-side\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <ng-container>\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <ng-container *ngIf=\"!apiLoading\">\r\n <div class=\"d-flex gap-md-4 flex-mob-column\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [id]=\"data?.id\">\r\n <div class=\"w-50\" *ngIf=\"content?.image?.showImage\" [class.w-100]=\"screenWidth <= 475\">\r\n <ng-container>\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" alt=\"\" [simpoImageDirective]=\"styles?.image\" class=\"section-image w-100\"\r\n [simpoCorner]=\"styles?.corners\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\"\r\n [sectionId]=\"data?.id\" [class]=\"data?.id+(content?.image?.id || '')\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"product-parent position-relative\" [class.w-50]=\"content?.image?.showImage\"\r\n [class.w-100]=\"!content?.image?.showImage || screenWidth <= 475\">\r\n <div *ngIf=\"responseData && responseData?.length\" [simpoWrapContainer]=\"styles?.direction\"\r\n class=\"d-flex w-100 scroll\" #container>\r\n <div\r\n *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n class=\"product\" [style.padding.px]=\"styles?.theme != theme.Theme1 ? '3' : ''\"\r\n [style.width.%]=\"styles?.theme != theme.Theme1 && isMobile && isRelatedProduct ? '48' : ''\"\r\n [style.minWidth]=\"applyProductWidth() ? getProductWidth() : ''\"\r\n [style.maxWidth]=\"applyProductWidth() ? getProductWidth() : ''\"\r\n >\r\n <!-- [style.width.%]=\"styles?.theme != theme.Theme1 && !isMobile ? '16.667' : ''\" -->\r\n <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n <ng-container *ngTemplateOutlet=\"ProductDes; context: {data: product, idx: idx}\"></ng-container>\r\n </ng-container>\r\n <div *ngIf=\"styles?.theme != theme.Theme1\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [index]=\"idx\"\r\n [isScrollable]=\"this.screenWidth > 475 || (this.screenWidth <= 475 && styles?.direction == 'ROW')\"></simpo-small-product-listing>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <ng-container>\r\n <div class=\"d-flex justify-content-end align-items-center w-100 py-3\">\r\n <div class=\"d-flex justify-content-between align-items-center mt-3 w-100\">\r\n <div class=\"d-flex align-items-center gap-3\" *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"responseData?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"responseData?.length\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </div>\r\n <button class=\"view-all-btn text-center mx-3\" simpoButtonDirective\r\n [id]=\"data?.id+(getBtnId(1) || '')\" [buttonStyle]=\"getBtnStyle(1)\"\r\n [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\" [sectionId]=\"data?.id\" [buttonData]=\"getBtnData(1)\"\r\n [buttonId]=\"getBtnId(1)\" (click)=\"redirectTo(getBtnData(1))\">{{viewAllButton?.content?.label ??\r\n 'See All'}}</button>\r\n\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n </section>\r\n</ng-container>\r\n\r\n<ng-template #VarientList let-product=\"data\">\r\n <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\r\n [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n (click)=\"selectVarient(product, varient)\">\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #AddToCart let-product=\"data\">\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\" [style.marginTop]=\"true ? '10px' : ''\">\r\n <button simpoButtonDirective [id]=\"data?.id+(getBtnId(0) || '')\" [buttonStyle]=\"getBtnStyle(0)\"\r\n [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\"\r\n [sectionId]=\"data?.id\" [buttonId]=\"getBtnId(0)\"\r\n *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to\r\n Cart'}}</button>\r\n <button simpoButtonDirective [id]=\"data?.id+(getBtnId(0) || '')\" [buttonStyle]=\"getBtnStyle(0)\"\r\n [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\"\r\n [sectionId]=\"data?.id\" [buttonId]=\"getBtnId(0)\"\r\n *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && !IsEcommerce\" (click)=\"raiseLead()\">Notify\r\n Me</button>\r\n <div class=\"quantity full-width-quantity\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n </div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductPricing let-product=\"data\">\r\n <div class=\"d-flex justify-content-between align-items-center\" [style.display]=\"true ? 'block!important' : ''\">\r\n <div class=\"price body-large g-10\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\" [ngClass]=\"{\r\n 'text-left': stylesLayout?.align === 'left',\r\n 'text-right': stylesLayout?.align === 'right',\r\n 'text-center': stylesLayout?.align === 'center'\r\n }\">\r\n <div class=\"d-flex gap-2\">\r\n <span [innerHTML]='currency | sanitizeHtml'></span>\r\n <ng-container>{{product.price.sellingPrice |\r\n number:'1.0-0'}}</ng-container>\r\n <span class=\"price\" *ngIf=\"product.price.value - product.price.discountedPrice > 10\"\r\n [class.discount-price]=\"product.price.value - product.price.discountedPrice > 10\">\r\n {{product.price.value}}\r\n </span>\r\n </div>\r\n </div>\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"AddToCart; context: {data: product}\"></ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductDes let-product=\"data\" let-idx=\"idx\">\r\n <div (click)=\"proceedToProductDesc(product)\" class=\"position-relative box-shadow\"\r\n [style.height.px]=\"isMobile ? (styles?.mobileColumn == 1 ? '480' : styles?.mobileColumn == 2 ? '230' : '110' ) : ''\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <image-loading [hash]=\"product.itemImages?.[product.prviewIdx]?.blurhash\" [index]=\"idx\"\r\n [imageUrl]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" [theme]=\"styles?.theme\"></image-loading>\r\n </div>\r\n <div class=\"mt-15 w-100\">\r\n <ng-container *ngTemplateOutlet=\"VarientList; context: {data: product}\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"ProductPricing; context: {data: product}\"></ng-container>\r\n <div class=\"product-name heading-large trim-text w-100\" [id]=\"data?.id\" (click)=\"proceedToProductDesc(product)\"\r\n [simpoColor]=\"styles?.background?.color\">\r\n {{product.name }}</div>\r\n </div>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>", styles: ["div[class*=arrow]{background-color:#fff;color:#000;padding:5px;border-radius:50%;position:sticky;height:fit-content;top:50%;display:flex;align-items:center;justify-content:center;z-index:101;cursor:pointer;box-shadow:#63636333 0 2px 8px}div[class*=arrow] .mat-icon{color:#000}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.left-arrow{left:2px}.right-arrow{right:2px}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.view-all-btn{padding:6px;width:15%!important;font-size:13px!important}.product{padding:10px;cursor:pointer;position:relative;display:flex;flex-direction:column}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:16px!important;line-height:26px;margin-bottom:5px;font-weight:500}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin-left:-40px}.them2-lisiting{min-width:195px;max-width:195px;margin-right:10px}.input-text{width:90%}@media screen and (max-width: 475px){.view-all-btn{width:30%!important}.default-image img{height:250px}.out-of-stock{font-size:12px!important}.input-text{width:100%}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}.jc-space{justify-content:space-between}.align-end{align-items:end}.view-all{font-size:16px;font-weight:600;cursor:pointer}.box-shadow{box-shadow:#0000003d 0 3px 8px;border-radius:10px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.align-center{align-items:center}@media screen and (max-width: 475px){.product-name{font-size:14px}.product-parent{margin-top:unset!important}.scroll::-webkit-scrollbar{display:flex!important;height:3px}.scroll::-webkit-scrollbar-thumb{background:var(--accentColor, #d4d4d4)}}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mb-5{margin-bottom:5px!important}.trim-text{text-align:inherit!important}@media screen and (max-width: 475px){.flex-mob-column{flex-direction:column!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: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { 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:
|
|
17432
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FeaturedProductsComponent, isStandalone: true, selector: "simpo-featured-products", inputs: { data: "data", responseData: "responseData", index: "index", isRelatedProduct: "isRelatedProduct", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, outputs: { changeDetailProduct: "changeDetailProduct" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<ng-container>\r\n <section class=\"container-fluid total-container px-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\" [simpoBorder]=\"styles?.border\" [id]=\"data?.id\">\r\n <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoBackground]=\"styles?.background\"\r\n [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div class=\"d-flex flex-column w-100\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"d-flex jc-space align-center content-side\">\r\n <div class=\"input-text content-side w-100\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <ng-container>\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <ng-container *ngIf=\"!apiLoading\">\r\n <div class=\"d-flex gap-md-4 flex-mob-column\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [id]=\"data?.id\">\r\n <div class=\"w-50\" *ngIf=\"content?.image?.showImage\" [class.w-100]=\"screenWidth <= 475\">\r\n <ng-container>\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" alt=\"\" [simpoImageDirective]=\"styles?.image\" class=\"section-image w-100\"\r\n [simpoCorner]=\"styles?.corners\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\"\r\n [sectionId]=\"data?.id\" [class]=\"data?.id+(content?.image?.id || '')\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"product-parent position-relative\" [class.w-50]=\"content?.image?.showImage\"\r\n [class.w-100]=\"!content?.image?.showImage || screenWidth <= 475\">\r\n <div *ngIf=\"responseData && responseData?.length\" [simpoWrapContainer]=\"styles?.direction\"\r\n class=\"d-flex w-100 scroll\" #container>\r\n <div\r\n *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n class=\"product\" [style.padding.px]=\"styles?.theme != theme.Theme1 ? '3' : ''\"\r\n [style.width.%]=\"styles?.theme != theme.Theme1 && isMobile && isRelatedProduct ? '48' : ''\"\r\n [style.minWidth]=\"applyProductWidth() ? getProductWidth() : ''\"\r\n [style.maxWidth]=\"applyProductWidth() ? getProductWidth() : ''\"\r\n >\r\n <!-- [style.width.%]=\"styles?.theme != theme.Theme1 && !isMobile ? '16.667' : ''\" -->\r\n <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n <ng-container *ngTemplateOutlet=\"ProductDes; context: {data: product, idx: idx}\"></ng-container>\r\n </ng-container>\r\n <div *ngIf=\"styles?.theme != theme.Theme1\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [index]=\"idx\"\r\n [isScrollable]=\"this.screenWidth > 475 || (this.screenWidth <= 475 && styles?.direction == 'ROW')\"></simpo-small-product-listing>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <ng-container>\r\n <div class=\"d-flex justify-content-end align-items-center w-100 py-3\">\r\n <div class=\"d-flex justify-content-between align-items-center mt-3 w-100\">\r\n <div class=\"d-flex align-items-center gap-3\" *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"responseData?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"responseData?.length\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </div>\r\n <button class=\"view-all-btn text-center mx-3\" simpoButtonDirective\r\n [id]=\"data?.id+(getBtnId(1) || '')\" [buttonStyle]=\"getBtnStyle(1)\"\r\n [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\" [sectionId]=\"data?.id\" [buttonData]=\"getBtnData(1)\"\r\n [buttonId]=\"getBtnId(1)\" (click)=\"redirectTo(getBtnData(1))\">{{viewAllButton?.content?.label ??\r\n 'See All'}}</button>\r\n\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n </section>\r\n</ng-container>\r\n\r\n<ng-template #VarientList let-product=\"data\">\r\n <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\r\n [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n (click)=\"selectVarient(product, varient)\">\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #AddToCart let-product=\"data\">\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\" [style.marginTop]=\"true ? '10px' : ''\">\r\n <button simpoButtonDirective [id]=\"data?.id+(getBtnId(0) || '')\" [buttonStyle]=\"getBtnStyle(0)\"\r\n [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\"\r\n [sectionId]=\"data?.id\" [buttonId]=\"getBtnId(0)\"\r\n *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to\r\n Cart'}}</button>\r\n <button simpoButtonDirective [id]=\"data?.id+(getBtnId(0) || '')\" [buttonStyle]=\"getBtnStyle(0)\"\r\n [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\"\r\n [sectionId]=\"data?.id\" [buttonId]=\"getBtnId(0)\"\r\n *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && !IsEcommerce\" (click)=\"raiseLead()\">Notify\r\n Me</button>\r\n <div class=\"quantity full-width-quantity\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n </div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductPricing let-product=\"data\">\r\n <div class=\"d-flex justify-content-between align-items-center\" [style.display]=\"true ? 'block!important' : ''\">\r\n <div class=\"price body-large g-10\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\" [ngClass]=\"{\r\n 'text-left': stylesLayout?.align === 'left',\r\n 'text-right': stylesLayout?.align === 'right',\r\n 'text-center': stylesLayout?.align === 'center'\r\n }\">\r\n <div class=\"d-flex gap-2\">\r\n <span [innerHTML]='currency | sanitizeHtml'></span>\r\n <ng-container>{{product.price.sellingPrice |\r\n number:'1.0-0'}}</ng-container>\r\n <span class=\"price\" *ngIf=\"product.price.value - product.price.discountedPrice > 10\"\r\n [class.discount-price]=\"product.price.value - product.price.discountedPrice > 10\">\r\n {{product.price.value}}\r\n </span>\r\n </div>\r\n </div>\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"AddToCart; context: {data: product}\"></ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductDes let-product=\"data\" let-idx=\"idx\">\r\n <div (click)=\"proceedToProductDesc(product)\" class=\"position-relative box-shadow\"\r\n [style.height.px]=\"isMobile ? (styles?.mobileColumn == 1 ? '480' : styles?.mobileColumn == 2 ? '230' : '110' ) : ''\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <image-loading [hash]=\"product.itemImages?.[product.prviewIdx]?.blurhash\" [index]=\"idx\"\r\n [imageUrl]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" [theme]=\"styles?.theme\"></image-loading>\r\n </div>\r\n <div class=\"mt-15 w-100\">\r\n <ng-container *ngTemplateOutlet=\"VarientList; context: {data: product}\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"ProductPricing; context: {data: product}\"></ng-container>\r\n <div class=\"product-name heading-large trim-text w-100\" [id]=\"data?.id\" (click)=\"proceedToProductDesc(product)\"\r\n [simpoColor]=\"styles?.background?.color\">\r\n {{product.name }}</div>\r\n </div>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>", styles: ["div[class*=arrow]{background-color:#fff;color:#000;padding:5px;border-radius:50%;position:sticky;height:fit-content;top:50%;display:flex;align-items:center;justify-content:center;z-index:101;cursor:pointer;box-shadow:#63636333 0 2px 8px}div[class*=arrow] .mat-icon{color:#000}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.left-arrow{left:2px}.right-arrow{right:2px}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.view-all-btn{padding:6px;width:15%!important;font-size:13px!important}.product{padding:10px;cursor:pointer;position:relative;display:flex;flex-direction:column}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:16px!important;line-height:26px;margin-bottom:5px;font-weight:500}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin-left:-40px}.them2-lisiting{min-width:195px;max-width:195px;margin-right:10px}.input-text{width:90%}@media screen and (max-width: 475px){.view-all-btn{width:30%!important}.default-image img{height:250px}.out-of-stock{font-size:12px!important}.input-text{width:100%}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}.jc-space{justify-content:space-between}.align-end{align-items:end}.view-all{font-size:16px;font-weight:600;cursor:pointer}.box-shadow{box-shadow:#0000003d 0 3px 8px;border-radius:10px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.align-center{align-items:center}@media screen and (max-width: 475px){.product-name{font-size:14px}.product-parent{margin-top:unset!important}.scroll::-webkit-scrollbar{display:flex!important;height:3px}.scroll::-webkit-scrollbar-thumb{background:var(--accentColor, #d4d4d4)}}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mb-5{margin-bottom:5px!important}.trim-text{text-align:inherit!important}@media screen and (max-width: 475px){.flex-mob-column{flex-direction:column!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: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { 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:
|
|
17432
17433
|
//directive
|
|
17433
17434
|
SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SimpoWrapComntainer, selector: "[simpoWrapContainer]", inputs: ["simpoWrapContainer"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: 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: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type:
|
|
17434
17435
|
// MatBottomSheetModule,
|
|
@@ -17466,7 +17467,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
17466
17467
|
SpacingAroundDirective,
|
|
17467
17468
|
ButtonEditorDirective,
|
|
17468
17469
|
ObjectPositionDirective,
|
|
17469
|
-
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<ng-container>\r\n <section class=\"container-fluid total-container px-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\" [simpoBorder]=\"styles?.border\" [id]=\"data?.id\">\r\n <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoBackground]=\"styles?.background\"\r\n [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div class=\"d-flex flex-column w-100\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"d-flex jc-space align-center content-side\">\r\n <div class=\"input-text content-side\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <ng-container>\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <ng-container *ngIf=\"!apiLoading\">\r\n <div class=\"d-flex gap-md-4 flex-mob-column\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [id]=\"data?.id\">\r\n <div class=\"w-50\" *ngIf=\"content?.image?.showImage\" [class.w-100]=\"screenWidth <= 475\">\r\n <ng-container>\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" alt=\"\" [simpoImageDirective]=\"styles?.image\" class=\"section-image w-100\"\r\n [simpoCorner]=\"styles?.corners\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\"\r\n [sectionId]=\"data?.id\" [class]=\"data?.id+(content?.image?.id || '')\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"product-parent position-relative\" [class.w-50]=\"content?.image?.showImage\"\r\n [class.w-100]=\"!content?.image?.showImage || screenWidth <= 475\">\r\n <div *ngIf=\"responseData && responseData?.length\" [simpoWrapContainer]=\"styles?.direction\"\r\n class=\"d-flex w-100 scroll\" #container>\r\n <div\r\n *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n class=\"product\" [style.padding.px]=\"styles?.theme != theme.Theme1 ? '3' : ''\"\r\n [style.width.%]=\"styles?.theme != theme.Theme1 && isMobile && isRelatedProduct ? '48' : ''\"\r\n [style.minWidth]=\"applyProductWidth() ? getProductWidth() : ''\"\r\n [style.maxWidth]=\"applyProductWidth() ? getProductWidth() : ''\"\r\n >\r\n <!-- [style.width.%]=\"styles?.theme != theme.Theme1 && !isMobile ? '16.667' : ''\" -->\r\n <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n <ng-container *ngTemplateOutlet=\"ProductDes; context: {data: product, idx: idx}\"></ng-container>\r\n </ng-container>\r\n <div *ngIf=\"styles?.theme != theme.Theme1\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [index]=\"idx\"\r\n [isScrollable]=\"this.screenWidth > 475 || (this.screenWidth <= 475 && styles?.direction == 'ROW')\"></simpo-small-product-listing>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <ng-container>\r\n <div class=\"d-flex justify-content-end align-items-center w-100 py-3\">\r\n <div class=\"d-flex justify-content-between align-items-center mt-3 w-100\">\r\n <div class=\"d-flex align-items-center gap-3\" *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"responseData?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"responseData?.length\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </div>\r\n <button class=\"view-all-btn text-center mx-3\" simpoButtonDirective\r\n [id]=\"data?.id+(getBtnId(1) || '')\" [buttonStyle]=\"getBtnStyle(1)\"\r\n [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\" [sectionId]=\"data?.id\" [buttonData]=\"getBtnData(1)\"\r\n [buttonId]=\"getBtnId(1)\" (click)=\"redirectTo(getBtnData(1))\">{{viewAllButton?.content?.label ??\r\n 'See All'}}</button>\r\n\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n </section>\r\n</ng-container>\r\n\r\n<ng-template #VarientList let-product=\"data\">\r\n <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\r\n [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n (click)=\"selectVarient(product, varient)\">\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #AddToCart let-product=\"data\">\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\" [style.marginTop]=\"true ? '10px' : ''\">\r\n <button simpoButtonDirective [id]=\"data?.id+(getBtnId(0) || '')\" [buttonStyle]=\"getBtnStyle(0)\"\r\n [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\"\r\n [sectionId]=\"data?.id\" [buttonId]=\"getBtnId(0)\"\r\n *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to\r\n Cart'}}</button>\r\n <button simpoButtonDirective [id]=\"data?.id+(getBtnId(0) || '')\" [buttonStyle]=\"getBtnStyle(0)\"\r\n [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\"\r\n [sectionId]=\"data?.id\" [buttonId]=\"getBtnId(0)\"\r\n *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && !IsEcommerce\" (click)=\"raiseLead()\">Notify\r\n Me</button>\r\n <div class=\"quantity full-width-quantity\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n </div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductPricing let-product=\"data\">\r\n <div class=\"d-flex justify-content-between align-items-center\" [style.display]=\"true ? 'block!important' : ''\">\r\n <div class=\"price body-large g-10\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\" [ngClass]=\"{\r\n 'text-left': stylesLayout?.align === 'left',\r\n 'text-right': stylesLayout?.align === 'right',\r\n 'text-center': stylesLayout?.align === 'center'\r\n }\">\r\n <div class=\"d-flex gap-2\">\r\n <span [innerHTML]='currency | sanitizeHtml'></span>\r\n <ng-container>{{product.price.sellingPrice |\r\n number:'1.0-0'}}</ng-container>\r\n <span class=\"price\" *ngIf=\"product.price.value - product.price.discountedPrice > 10\"\r\n [class.discount-price]=\"product.price.value - product.price.discountedPrice > 10\">\r\n {{product.price.value}}\r\n </span>\r\n </div>\r\n </div>\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"AddToCart; context: {data: product}\"></ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductDes let-product=\"data\" let-idx=\"idx\">\r\n <div (click)=\"proceedToProductDesc(product)\" class=\"position-relative box-shadow\"\r\n [style.height.px]=\"isMobile ? (styles?.mobileColumn == 1 ? '480' : styles?.mobileColumn == 2 ? '230' : '110' ) : ''\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <image-loading [hash]=\"product.itemImages?.[product.prviewIdx]?.blurhash\" [index]=\"idx\"\r\n [imageUrl]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" [theme]=\"styles?.theme\"></image-loading>\r\n </div>\r\n <div class=\"mt-15 w-100\">\r\n <ng-container *ngTemplateOutlet=\"VarientList; context: {data: product}\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"ProductPricing; context: {data: product}\"></ng-container>\r\n <div class=\"product-name heading-large trim-text w-100\" [id]=\"data?.id\" (click)=\"proceedToProductDesc(product)\"\r\n [simpoColor]=\"styles?.background?.color\">\r\n {{product.name }}</div>\r\n </div>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>", styles: ["div[class*=arrow]{background-color:#fff;color:#000;padding:5px;border-radius:50%;position:sticky;height:fit-content;top:50%;display:flex;align-items:center;justify-content:center;z-index:101;cursor:pointer;box-shadow:#63636333 0 2px 8px}div[class*=arrow] .mat-icon{color:#000}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.left-arrow{left:2px}.right-arrow{right:2px}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.view-all-btn{padding:6px;width:15%!important;font-size:13px!important}.product{padding:10px;cursor:pointer;position:relative;display:flex;flex-direction:column}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:16px!important;line-height:26px;margin-bottom:5px;font-weight:500}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin-left:-40px}.them2-lisiting{min-width:195px;max-width:195px;margin-right:10px}.input-text{width:90%}@media screen and (max-width: 475px){.view-all-btn{width:30%!important}.default-image img{height:250px}.out-of-stock{font-size:12px!important}.input-text{width:100%}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}.jc-space{justify-content:space-between}.align-end{align-items:end}.view-all{font-size:16px;font-weight:600;cursor:pointer}.box-shadow{box-shadow:#0000003d 0 3px 8px;border-radius:10px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.align-center{align-items:center}@media screen and (max-width: 475px){.product-name{font-size:14px}.product-parent{margin-top:unset!important}.scroll::-webkit-scrollbar{display:flex!important;height:3px}.scroll::-webkit-scrollbar-thumb{background:var(--accentColor, #d4d4d4)}}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mb-5{margin-bottom:5px!important}.trim-text{text-align:inherit!important}@media screen and (max-width: 475px){.flex-mob-column{flex-direction:column!important}}\n"] }]
|
|
17470
|
+
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<ng-container>\r\n <section class=\"container-fluid total-container px-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\" [simpoBorder]=\"styles?.border\" [id]=\"data?.id\">\r\n <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoBackground]=\"styles?.background\"\r\n [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div class=\"d-flex flex-column w-100\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"d-flex jc-space align-center content-side\">\r\n <div class=\"input-text content-side w-100\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <ng-container>\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <ng-container *ngIf=\"!apiLoading\">\r\n <div class=\"d-flex gap-md-4 flex-mob-column\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [id]=\"data?.id\">\r\n <div class=\"w-50\" *ngIf=\"content?.image?.showImage\" [class.w-100]=\"screenWidth <= 475\">\r\n <ng-container>\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" alt=\"\" [simpoImageDirective]=\"styles?.image\" class=\"section-image w-100\"\r\n [simpoCorner]=\"styles?.corners\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\"\r\n [sectionId]=\"data?.id\" [class]=\"data?.id+(content?.image?.id || '')\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"product-parent position-relative\" [class.w-50]=\"content?.image?.showImage\"\r\n [class.w-100]=\"!content?.image?.showImage || screenWidth <= 475\">\r\n <div *ngIf=\"responseData && responseData?.length\" [simpoWrapContainer]=\"styles?.direction\"\r\n class=\"d-flex w-100 scroll\" #container>\r\n <div\r\n *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n class=\"product\" [style.padding.px]=\"styles?.theme != theme.Theme1 ? '3' : ''\"\r\n [style.width.%]=\"styles?.theme != theme.Theme1 && isMobile && isRelatedProduct ? '48' : ''\"\r\n [style.minWidth]=\"applyProductWidth() ? getProductWidth() : ''\"\r\n [style.maxWidth]=\"applyProductWidth() ? getProductWidth() : ''\"\r\n >\r\n <!-- [style.width.%]=\"styles?.theme != theme.Theme1 && !isMobile ? '16.667' : ''\" -->\r\n <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n <ng-container *ngTemplateOutlet=\"ProductDes; context: {data: product, idx: idx}\"></ng-container>\r\n </ng-container>\r\n <div *ngIf=\"styles?.theme != theme.Theme1\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [index]=\"idx\"\r\n [isScrollable]=\"this.screenWidth > 475 || (this.screenWidth <= 475 && styles?.direction == 'ROW')\"></simpo-small-product-listing>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <ng-container>\r\n <div class=\"d-flex justify-content-end align-items-center w-100 py-3\">\r\n <div class=\"d-flex justify-content-between align-items-center mt-3 w-100\">\r\n <div class=\"d-flex align-items-center gap-3\" *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"responseData?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"responseData?.length\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </div>\r\n <button class=\"view-all-btn text-center mx-3\" simpoButtonDirective\r\n [id]=\"data?.id+(getBtnId(1) || '')\" [buttonStyle]=\"getBtnStyle(1)\"\r\n [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\" [sectionId]=\"data?.id\" [buttonData]=\"getBtnData(1)\"\r\n [buttonId]=\"getBtnId(1)\" (click)=\"redirectTo(getBtnData(1))\">{{viewAllButton?.content?.label ??\r\n 'See All'}}</button>\r\n\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n </section>\r\n</ng-container>\r\n\r\n<ng-template #VarientList let-product=\"data\">\r\n <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\r\n [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n (click)=\"selectVarient(product, varient)\">\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #AddToCart let-product=\"data\">\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\" [style.marginTop]=\"true ? '10px' : ''\">\r\n <button simpoButtonDirective [id]=\"data?.id+(getBtnId(0) || '')\" [buttonStyle]=\"getBtnStyle(0)\"\r\n [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\"\r\n [sectionId]=\"data?.id\" [buttonId]=\"getBtnId(0)\"\r\n *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to\r\n Cart'}}</button>\r\n <button simpoButtonDirective [id]=\"data?.id+(getBtnId(0) || '')\" [buttonStyle]=\"getBtnStyle(0)\"\r\n [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\"\r\n [sectionId]=\"data?.id\" [buttonId]=\"getBtnId(0)\"\r\n *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && !IsEcommerce\" (click)=\"raiseLead()\">Notify\r\n Me</button>\r\n <div class=\"quantity full-width-quantity\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n </div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductPricing let-product=\"data\">\r\n <div class=\"d-flex justify-content-between align-items-center\" [style.display]=\"true ? 'block!important' : ''\">\r\n <div class=\"price body-large g-10\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\" [ngClass]=\"{\r\n 'text-left': stylesLayout?.align === 'left',\r\n 'text-right': stylesLayout?.align === 'right',\r\n 'text-center': stylesLayout?.align === 'center'\r\n }\">\r\n <div class=\"d-flex gap-2\">\r\n <span [innerHTML]='currency | sanitizeHtml'></span>\r\n <ng-container>{{product.price.sellingPrice |\r\n number:'1.0-0'}}</ng-container>\r\n <span class=\"price\" *ngIf=\"product.price.value - product.price.discountedPrice > 10\"\r\n [class.discount-price]=\"product.price.value - product.price.discountedPrice > 10\">\r\n {{product.price.value}}\r\n </span>\r\n </div>\r\n </div>\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"AddToCart; context: {data: product}\"></ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductDes let-product=\"data\" let-idx=\"idx\">\r\n <div (click)=\"proceedToProductDesc(product)\" class=\"position-relative box-shadow\"\r\n [style.height.px]=\"isMobile ? (styles?.mobileColumn == 1 ? '480' : styles?.mobileColumn == 2 ? '230' : '110' ) : ''\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <image-loading [hash]=\"product.itemImages?.[product.prviewIdx]?.blurhash\" [index]=\"idx\"\r\n [imageUrl]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" [theme]=\"styles?.theme\"></image-loading>\r\n </div>\r\n <div class=\"mt-15 w-100\">\r\n <ng-container *ngTemplateOutlet=\"VarientList; context: {data: product}\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"ProductPricing; context: {data: product}\"></ng-container>\r\n <div class=\"product-name heading-large trim-text w-100\" [id]=\"data?.id\" (click)=\"proceedToProductDesc(product)\"\r\n [simpoColor]=\"styles?.background?.color\">\r\n {{product.name }}</div>\r\n </div>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>", styles: ["div[class*=arrow]{background-color:#fff;color:#000;padding:5px;border-radius:50%;position:sticky;height:fit-content;top:50%;display:flex;align-items:center;justify-content:center;z-index:101;cursor:pointer;box-shadow:#63636333 0 2px 8px}div[class*=arrow] .mat-icon{color:#000}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.left-arrow{left:2px}.right-arrow{right:2px}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.view-all-btn{padding:6px;width:15%!important;font-size:13px!important}.product{padding:10px;cursor:pointer;position:relative;display:flex;flex-direction:column}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:16px!important;line-height:26px;margin-bottom:5px;font-weight:500}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin-left:-40px}.them2-lisiting{min-width:195px;max-width:195px;margin-right:10px}.input-text{width:90%}@media screen and (max-width: 475px){.view-all-btn{width:30%!important}.default-image img{height:250px}.out-of-stock{font-size:12px!important}.input-text{width:100%}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}.jc-space{justify-content:space-between}.align-end{align-items:end}.view-all{font-size:16px;font-weight:600;cursor:pointer}.box-shadow{box-shadow:#0000003d 0 3px 8px;border-radius:10px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.align-center{align-items:center}@media screen and (max-width: 475px){.product-name{font-size:14px}.product-parent{margin-top:unset!important}.scroll::-webkit-scrollbar{display:flex!important;height:3px}.scroll::-webkit-scrollbar-thumb{background:var(--accentColor, #d4d4d4)}}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mb-5{margin-bottom:5px!important}.trim-text{text-align:inherit!important}@media screen and (max-width: 475px){.flex-mob-column{flex-direction:column!important}}\n"] }]
|
|
17470
17471
|
}], ctorParameters: () => [{ type: Object, decorators: [{
|
|
17471
17472
|
type: Inject,
|
|
17472
17473
|
args: [PLATFORM_ID]
|
|
@@ -17680,150 +17681,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
17680
17681
|
type: Input
|
|
17681
17682
|
}] } });
|
|
17682
17683
|
|
|
17683
|
-
class AnalyticsService {
|
|
17684
|
-
constructor(http, platformId, document, storageService, API_URL, storage, router) {
|
|
17685
|
-
this.http = http;
|
|
17686
|
-
this.platformId = platformId;
|
|
17687
|
-
this.document = document;
|
|
17688
|
-
this.storageService = storageService;
|
|
17689
|
-
this.API_URL = API_URL;
|
|
17690
|
-
this.storage = storage;
|
|
17691
|
-
this.router = router;
|
|
17692
|
-
this.eventQueue = [];
|
|
17693
|
-
this.BATCH_SIZE = 10;
|
|
17694
|
-
this.FLUSH_INTERVAL = 5000; // 5 seconds
|
|
17695
|
-
// ===== Duration Tracking =====
|
|
17696
|
-
this.currentPage = '';
|
|
17697
|
-
this.currentContextMetadata = null;
|
|
17698
|
-
this.contextStartTime = null;
|
|
17699
|
-
this.contextActiveTime = 0;
|
|
17700
|
-
this.startAutoFlush();
|
|
17701
|
-
this.listenToUnload();
|
|
17702
|
-
this.listenToRouteChange();
|
|
17703
|
-
}
|
|
17704
|
-
startNewContext(metadata) {
|
|
17705
|
-
this.closeCurrentContext(); // close previous filter session
|
|
17706
|
-
this.currentContextMetadata = metadata;
|
|
17707
|
-
this.contextStartTime = Date.now();
|
|
17708
|
-
this.contextActiveTime = 0;
|
|
17709
|
-
}
|
|
17710
|
-
closeCurrentContext(useBeacon = false) {
|
|
17711
|
-
if (!this.currentContextMetadata)
|
|
17712
|
-
return;
|
|
17713
|
-
if (this.contextStartTime) {
|
|
17714
|
-
this.contextActiveTime += Date.now() - this.contextStartTime;
|
|
17715
|
-
}
|
|
17716
|
-
const user = this.storageService.getUser();
|
|
17717
|
-
const requestFrom = this.storage.getItem('REQUEST_FROM');
|
|
17718
|
-
if (!user || requestFrom === 'ECOMMERCE')
|
|
17719
|
-
return;
|
|
17720
|
-
const event = {
|
|
17721
|
-
businessId: this.storage.getItem('bId') || '',
|
|
17722
|
-
businessName: this.storage.getItem('bName') || '',
|
|
17723
|
-
userId: user.userId,
|
|
17724
|
-
createdTimeStamp: new Date().toISOString(),
|
|
17725
|
-
page: this.currentPage,
|
|
17726
|
-
duration: this.contextActiveTime,
|
|
17727
|
-
metadata: this.currentContextMetadata
|
|
17728
|
-
};
|
|
17729
|
-
if (useBeacon) {
|
|
17730
|
-
fetch(this.API_URL + 'ecommerce/analytics/batch', {
|
|
17731
|
-
method: 'POST',
|
|
17732
|
-
body: JSON.stringify([event]),
|
|
17733
|
-
headers: {
|
|
17734
|
-
'Content-Type': 'application/json'
|
|
17735
|
-
},
|
|
17736
|
-
keepalive: true
|
|
17737
|
-
});
|
|
17738
|
-
}
|
|
17739
|
-
else {
|
|
17740
|
-
this.eventQueue.push(event);
|
|
17741
|
-
}
|
|
17742
|
-
this.currentContextMetadata = null;
|
|
17743
|
-
this.contextStartTime = null;
|
|
17744
|
-
this.contextActiveTime = 0;
|
|
17745
|
-
}
|
|
17746
|
-
// ===============================
|
|
17747
|
-
// 🔥 ROUTE CHANGE LISTENER
|
|
17748
|
-
// ===============================
|
|
17749
|
-
listenToRouteChange() {
|
|
17750
|
-
this.router.events.subscribe(event => {
|
|
17751
|
-
if (event instanceof NavigationEnd) {
|
|
17752
|
-
// Close previous page context
|
|
17753
|
-
this.closeCurrentContext();
|
|
17754
|
-
this.currentPage = this.router.url.split('?')[0];
|
|
17755
|
-
this.contextStartTime = Date.now();
|
|
17756
|
-
this.contextActiveTime = 0;
|
|
17757
|
-
}
|
|
17758
|
-
});
|
|
17759
|
-
}
|
|
17760
|
-
trackUser(event) {
|
|
17761
|
-
const user = this.storageService.getUser();
|
|
17762
|
-
const requestFrom = this.storage.getItem('REQUEST_FROM');
|
|
17763
|
-
if (user === null || requestFrom === 'ECOMMERCE') {
|
|
17764
|
-
return;
|
|
17765
|
-
}
|
|
17766
|
-
const page = this.router.url.split('?')[0];
|
|
17767
|
-
this.eventQueue.push({
|
|
17768
|
-
businessId: this.storage.getItem('bId') || '',
|
|
17769
|
-
businessName: this.storage.getItem('bName') || '',
|
|
17770
|
-
userId: user?.userId,
|
|
17771
|
-
createdTimeStamp: new Date().toISOString(),
|
|
17772
|
-
page: page,
|
|
17773
|
-
metadata: event,
|
|
17774
|
-
});
|
|
17775
|
-
if (this.eventQueue.length >= this.BATCH_SIZE) {
|
|
17776
|
-
this.flush();
|
|
17777
|
-
}
|
|
17778
|
-
}
|
|
17779
|
-
startAutoFlush() {
|
|
17780
|
-
interval(this.FLUSH_INTERVAL).subscribe(() => {
|
|
17781
|
-
if (this.eventQueue.length > 0) {
|
|
17782
|
-
this.flush();
|
|
17783
|
-
}
|
|
17784
|
-
});
|
|
17785
|
-
}
|
|
17786
|
-
flush() {
|
|
17787
|
-
const eventsToSend = [...this.eventQueue];
|
|
17788
|
-
this.eventQueue = [];
|
|
17789
|
-
this.http.post(this.API_URL + 'ecommerce/analytics/batch', eventsToSend)
|
|
17790
|
-
.subscribe({ error: () => { } });
|
|
17791
|
-
}
|
|
17792
|
-
listenToUnload() {
|
|
17793
|
-
this.document.addEventListener('visibilitychange', () => {
|
|
17794
|
-
if (this.document.visibilityState === 'visible') {
|
|
17795
|
-
this.contextStartTime = Date.now();
|
|
17796
|
-
}
|
|
17797
|
-
else {
|
|
17798
|
-
if (this.contextStartTime) {
|
|
17799
|
-
this.contextActiveTime += Date.now() - this.contextStartTime;
|
|
17800
|
-
}
|
|
17801
|
-
this.closeCurrentContext(true);
|
|
17802
|
-
}
|
|
17803
|
-
});
|
|
17804
|
-
}
|
|
17805
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnalyticsService, deps: [{ token: i1.HttpClient }, { token: PLATFORM_ID }, { token: DOCUMENT }, { token: StorageServiceService }, { token: API_URL }, { token: LOCAL_STORAGE }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
17806
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnalyticsService, providedIn: 'root' }); }
|
|
17807
|
-
}
|
|
17808
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnalyticsService, decorators: [{
|
|
17809
|
-
type: Injectable,
|
|
17810
|
-
args: [{ providedIn: 'root' }]
|
|
17811
|
-
}], ctorParameters: () => [{ type: i1.HttpClient }, { type: Object, decorators: [{
|
|
17812
|
-
type: Inject,
|
|
17813
|
-
args: [PLATFORM_ID]
|
|
17814
|
-
}] }, { type: Document, decorators: [{
|
|
17815
|
-
type: Inject,
|
|
17816
|
-
args: [DOCUMENT]
|
|
17817
|
-
}] }, { type: StorageServiceService }, { type: undefined, decorators: [{
|
|
17818
|
-
type: Inject,
|
|
17819
|
-
args: [API_URL]
|
|
17820
|
-
}] }, { type: undefined, decorators: [{
|
|
17821
|
-
type: Inject,
|
|
17822
|
-
args: [LOCAL_STORAGE]
|
|
17823
|
-
}] }, { type: i2$2.Router }] });
|
|
17824
|
-
|
|
17825
17684
|
class ProductDescComponent extends BaseSection {
|
|
17826
|
-
constructor(platformId, _eventService, router, activatedRoute, restService, cartService, storageService, messageService, metaTagService, titleService, bottomSheet, renderer, matDialog
|
|
17685
|
+
constructor(platformId, _eventService, router, activatedRoute, restService, cartService, storageService, messageService, metaTagService, titleService, bottomSheet, renderer, matDialog) {
|
|
17827
17686
|
super();
|
|
17828
17687
|
this.platformId = platformId;
|
|
17829
17688
|
this._eventService = _eventService;
|
|
@@ -17838,7 +17697,6 @@ class ProductDescComponent extends BaseSection {
|
|
|
17838
17697
|
this.bottomSheet = bottomSheet;
|
|
17839
17698
|
this.renderer = renderer;
|
|
17840
17699
|
this.matDialog = matDialog;
|
|
17841
|
-
this.analyticsService = analyticsService;
|
|
17842
17700
|
this.isLoading = false;
|
|
17843
17701
|
this.featureProductData = null;
|
|
17844
17702
|
this.recentViewedData = null;
|
|
@@ -17950,10 +17808,6 @@ class ProductDescComponent extends BaseSection {
|
|
|
17950
17808
|
const productId = qParam["id"];
|
|
17951
17809
|
if (productId) {
|
|
17952
17810
|
this.isLoading = true;
|
|
17953
|
-
// Tracking Analytics
|
|
17954
|
-
this.analyticsService.startNewContext({
|
|
17955
|
-
'PRODUCT': productId
|
|
17956
|
-
});
|
|
17957
17811
|
this.isItemAsFavorite = false;
|
|
17958
17812
|
this.restService.getProductDetails(productId).subscribe((response) => {
|
|
17959
17813
|
this.isLoading = false;
|
|
@@ -18672,8 +18526,8 @@ class ProductDescComponent extends BaseSection {
|
|
|
18672
18526
|
get stylesLayout() {
|
|
18673
18527
|
return { ...this.styles?.layout };
|
|
18674
18528
|
}
|
|
18675
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductDescComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: RestService }, { token: CartService }, { token: StorageServiceService }, { token: i6$1.MessageService }, { token: i1$2.Meta }, { token: i1$2.Title }, { token: i8$3.MatBottomSheet }, { token: i0.Renderer2 }, { token: i1$1.MatDialog }
|
|
18676
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "reviewComponent", first: true, predicate: CustomerReviewComponent, descendants: true }, { propertyName: "aboveHeight", first: true, predicate: ["aboveHeight"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "imageSection", first: true, predicate: ["imageSection"], descendants: true }, { propertyName: "detailSection", first: true, predicate: ["detailSection"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n\r\n <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n </div> -->\r\n <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoLayout]=\"styles?.layout\" #container>\r\n <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\r\n (click)=\"routeToHome()\">Home</a> /\r\n <span>{{ responseData?.name | titlecase }}</span>\r\n </div>\r\n <div class=\"row h-100 w-100 h-100\" #aboveHeight class=\"above-height\"\r\n [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\r\n <div class=\"col-lg-7 col-sm-12 h-100 height\" #imageSection>\r\n <div class=\"prod-img-block\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-4 col-sm-12 h-100\" #detailSection>\r\n <ng-container *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngIf=\"toShowInJewellery\">\r\n <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"ecomConfigs?.videoCallEnabled\">\r\n <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"ecomConfigs?.brandPromiseEnabled\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </ng-container>\r\n\r\n\r\n\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\r\n </ng-container>\r\n\r\n <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\r\n [innerHTML]=\"responseData.brief\"></div> -->\r\n <div class=\"product-sku\">\r\n <!-- <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div> -->\r\n <!-- <div\r\n *ngIf=\"responseData?.itemCategorisation?.itemCategories && (responseData?.itemCategorisation?.itemCategories?.length || 0) > 0\">\r\n Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\r\n titlecase}} <ng-container\r\n *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n </a></div> -->\r\n <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n </span></div>\r\n </div>\r\n <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\r\n <!-- <ng-container>\r\n <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\r\n </ng-container> -->\r\n </div>\r\n </div>\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"ReviewsSection\"></ng-container>\r\n </ng-container>\r\n </section>\r\n <!-- <ng-container *ngIf=\"relatedProductData?.length\">\r\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\r\n [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n </ng-container>\r\n <ng-container *ngIf=\"recentViewItemList?.length\">\r\n <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\r\n [isRelatedProduct]=\"true\"></simpo-featured-products>\r\n </ng-container> -->\r\n <!-- <ng-container>\r\n <simpo-customer-review [data]=\"data\"></simpo-customer-review>\r\n </ng-container> -->\r\n\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </section>\r\n</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n\r\n<div class=\"mobile-footer\">\r\n <div class=\"icons\">\r\n <div (click)=\"goToCart()\">\r\n <mat-icon>shopping_cart</mat-icon>\r\n </div>\r\n <div>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n </div>\r\n </div>\r\n <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\">Out of\r\n Stock</button>\r\n <div class=\"quantity\" *ngIf=\"responseData?.quantity && !ecomConfigs?.videoCallEnabled\"\r\n [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\r\n </div>\r\n <button *ngIf=\"responseData?.quantity && ecomConfigs?.videoCallEnabled\" class=\"send-btn w-100\"\r\n [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\r\n <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\r\n <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\r\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\"\r\n (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ReviewSection>\r\n <div class=\"review-sec\">\r\n <div class=\"title\">Customer Review</div>\r\n <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\r\n <span>Be the first to write a review</span>\r\n <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\r\n Review' : 'Cancel Review'}}</button>\r\n <ng-container *ngIf=\"showReview\">\r\n <hr />\r\n <div class=\"user-review\">\r\n <div class=\"title\">Write a review</div>\r\n <span class=\"secondary-text\">RATING</span>\r\n <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\r\n <div>\r\n <span class=\"secondary-text\">Review Title</span>\r\n <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\r\n </div>\r\n <div>\r\n <span class=\"secondary-text\">Review</span>\r\n <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\r\n </div>\r\n <div class=\"review-action-btn\">\r\n <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\r\n <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"addProductReview()\"\r\n [disabled]=\"productReview == 0 && reviewTitle?.length == 0 && reviewDescription?.length == 0\">Submit\r\n review</button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n<ng-template #SocialIcons>\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-socia-icons>\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 #ActionBtn>\r\n <div class=\"button-parent\">\r\n <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\">Out of\r\n Stock</button>\r\n <div class=\"quantity\" *ngIf=\"responseData?.quantity && !ecomConfigs?.videoCallEnabled\"\r\n [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\r\n </div>\r\n <button *ngIf=\"responseData?.quantity && ecomConfigs?.videoCallEnabled\" class=\"send-btn w-100\"\r\n [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\r\n [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\r\n (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\r\n <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\r\n <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75\">\r\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\"\r\n (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && !IsEcommerce\" class=\"w-75\">\r\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\" (click)=\"raiseLead()\"><mat-icon style=\"height:14px !important\">\r\n message</mat-icon>Notify Me</button>\r\n </div>\r\n <div class=\"favourite border-solid\" *ngIf=\"IsEcommerce\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n </div>\r\n <div class=\"share-product\">\r\n <mat-icon class=\"share-icon\" (click)=\"shareProduct()\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n [style.borderColor]=\"data?.styles?.background?.accentColor\">share</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #variants>\r\n <ng-container *ngIf=\"data?.styles?.customization == 'Style1'\">\r\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n <div class=\"mb-15\">\r\n <div class=\"varient-key\">{{varient.key}}</div>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\r\n [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"data?.styles?.customization == 'Style2' && selectedVarient.size > 0\">\r\n <ng-container>\r\n <div class=\"row mt-2 style2-container w-100\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div *ngFor=\"let item of selectedVarient | keyvalue\" class=\"px-3 py-2 varient-item\"\r\n [class]=\"getClass(selectedVarient)\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"variant-head\">{{item.key | titlecase}}</div>\r\n <div class=\"variant-value text-start fw-600\">\r\n {{item.value |\r\n titlecase}}</div>\r\n </div>\r\n <div class=\"cursor-pointer p-0\" [class]=\"getClass(selectedVarient)\">\r\n <div class=\"custom-text d-flex align-items-center justify-content-center h-100 p-2\" data-bs-toggle=\"offcanvas\"\r\n data-bs-target=\"#offcanvasRightVariant\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">CUSTOMISE\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc>\r\n <div class=\"d-flex flex-column\" style=\"margin-top: 15px;\">\r\n <div class=\"rating d-flex justify-content-center gap-2 mb-3\"\r\n *ngIf=\"responseData?.averageRating && responseData?.totalReviewCount\"\r\n [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"rating-no my-1\">{{(responseData?.averageRating | number:'1.1-2')}}\u2B50</div>\r\n <div class=\"total-ratings my-1\">{{responseData?.totalReviewCount == 1 ? '1 Rating' :\r\n getRatings(responseData?.totalReviewCount) + \" \" + \"ratings\"}}</div>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.sellingPrice}\"\r\n *ngIf=\"responseData?.price?.sellingPrice && responseData.price.sellingPrice > 0\"><span\r\n [innerHTML]='currency'></span>\r\n {{responseData?.price?.sellingPrice}}</div>\r\n <div class=\"price\"\r\n [ngClass]=\"{'strike-through': getDifference(responseData?.price?.discountedPrice, responseData?.price?.value) > 2}\"\r\n *ngIf=\"getDifference(responseData?.price?.discountedPrice, responseData?.price?.value) > 2\">\r\n <span [innerHTML]='currency'></span>\r\n {{responseData?.price?.value | number:'1.0-0'}}\r\n </div>\r\n </div>\r\n <div class=\"tax-text\">(MRP Inclusive all taxes)</div>\r\n </div>\r\n <div class=\"heading-large trim-text\" class=\"product-heading\">{{responseData?.name}}</div>\r\n <ng-container *ngIf=\"toShowInJewellery\">\r\n <div class=\"discount\">\r\n <p>Flat 30% off on Diamond Prices</p>\r\n <p class=\"offer\">Offer Expires in 4 days</p>\r\n </div>\r\n <div class=\"ring-size-video\">\r\n <p class=\"text\">Not sure about the ring size?</p>\r\n <p class=\"learn-how\" data-toggle=\"modal\" data-target=\"#exampleModal\">Learn How\r\n <mat-icon>play_circle_outline</mat-icon>\r\n </p>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #descriptors>\r\n <div class=\"row prod-desc mt-2\">\r\n <div>\r\n <div class=\"product-header d-flex align-items-center justify-content-between\">\r\n <span class=\"header-text\" *ngIf=\"responseData?.descriptor || responseData?.materials\">Product Details</span>\r\n <div class=\"pricebreakup-btn d-flex align-items-center justify-content-center cursor-pointer\"\r\n *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\" data-bs-toggle=\"offcanvas\"\r\n data-bs-target=\"#offcanvasRightPriceBreakup\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\r\n <mat-icon>add</mat-icon> PRICE BREAKUP\r\n </div>\r\n </div>\r\n <div class=\"description\">\r\n <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\r\n [innerHTML]=\"responseData?.descriptor?.name\" [style.background]=\"data?.styles?.background?.color\"></div>\r\n </div>\r\n <ng-container *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\">\r\n <div class=\"jewellery-table-container\">\r\n <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n <div class=\"jewel-container mt-2\">\r\n <div class=\"jewel-header\" [style.background]=\"getHeaderColor(ele.materialType)\">\r\n {{ele?.materialName | titlecase}}\r\n </div>\r\n <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor(ele.materialType)\">\r\n <div class=\"col-6 metal-purity\">\r\n <div class=\"row-header\">\r\n Net Weight/{{ele?.unit | titlecase}}\r\n </div>\r\n <div class=\"row-content\">\r\n {{ele.primaryMaterialWeight + \" \" + (ele?.unit | titlecase)}}\r\n </div>\r\n </div>\r\n <div class=\"col-6 metal-purity\">\r\n <div class=\"row-header\">\r\n Purity\r\n </div>\r\n <div class=\"row-content\">\r\n {{ele.purity |\r\n titlecase}}\r\n </div>\r\n </div>\r\n <!-- <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Price/Gram\r\n </div>\r\n <div class=\"row-content\">\r\n \u20B9{{ getPricePerGram(ele.primaryMaterialWeight,ele.materialPrice) |\r\n number:'1.2-2'}}\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Value\r\n </div>\r\n <div class=\"row-content\">\r\n \u20B9{{ele.materialPrice | number:'1.2-2'}}\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- <div class=\"jewel-container mt-2\">\r\n <div class=\"jewel-header\" [style.background]=\"getHeaderColor('Making Charges')\">\r\n Making Charges\r\n </div>\r\n <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor('Making Charges')\">\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Net Weight\r\n </div>\r\n <div class=\"row-content\">\r\n {{responseData?.baseWeight}} </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Making Charge %\r\n </div>\r\n <div class=\"row-content\">\r\n {{responseData?.makingChargePercentage}}\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Value\r\n </div>\r\n <div class=\"row-content\">\r\n \u20B9{{responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <!-- <div class=\"tab-group\">\r\n <div class=\"tab\" data-bs-toggle=\"collapse\" href=\"#collapseExample\" >Description</div>\r\n </div>\r\n <div style=\"margin-top: 10px;\" class=\"body-large collapse\" id=\"collapseExample\" *ngIf=\"responseData?.descriptor\"\r\n [innerHTML]=\"responseData?.descriptor?.name\"></div> -->\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n <ng-container *ngIf=\"!varientLoading && (isMobile || data?.styles?.gridStyle == 'Style1')\">\r\n <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n <ng-container *ngFor=\"let img of itemImages\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\r\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n </ng-container>\r\n </div>\r\n <div class=\"item-img\">\r\n <ng-container *ngIf=\"currentImg\">\r\n\r\n <!-- <mat-icon class=\"share-icon\" (click)=\"shareProduct()\">share</mat-icon> -->\r\n <ng-container *ngIf=\"!isMobile\">\r\n <img [src]=\"currentImg\" class=\"img zoom\" style=\"height: 100%; width: 100%;\" [simpoCorner]=\"styles?.corners\">\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\" [simpoCorner]=\"styles?.corners\" class=\"zoom\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"!currentImg\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\r\n [simpoCorner]=\"styles?.corners\">\r\n </ng-container>\r\n </div>\r\n <div class=\"img-list w-100\" *ngIf=\"screenWidth <= 500\">\r\n <ng-container *ngFor=\"let img of itemImages\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n alt=\"\" class=\"img zoom\" (click)=\"changeImg(img.imgUrl)\"\r\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!varientLoading && (!isMobile && data?.styles?.gridStyle == 'Style2')\">\r\n <div class=\"row h-100 mt-0 w-100\">\r\n <ng-container *ngIf=\"itemImages?.length == 0\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\" class=\"img\"\r\n [simpoCorner]=\"styles?.corners\" class=\"col-12 h-100 p-0\">\r\n </ng-container>\r\n <ng-container *ngFor=\"let img of itemImages\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n alt=\"\" class=\"img col-6 h-75 p-1 style-2-img\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\r\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\"\r\n [class.h-100]=\"screenWidth <= 500\" [class.w-100]=\"itemImages?.length == 1\"\r\n [class.h-100]=\"itemImages?.length == 1\">\r\n </ng-container>\r\n </div>\r\n\r\n </ng-container>\r\n\r\n\r\n\r\n\r\n <div class=\"item-img\" *ngIf=\"varientLoading\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '100%',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #branding>\r\n <div class=\"row w-100\">\r\n <ng-container *ngFor=\"let brand of brandPromises\">\r\n <div class=\"col-4 d-flex flex-column align-items-center g-2\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"brand?.logoUrl\" alt=\"\" class=\"w-h-40 p-0 br-50\">\r\n <div class=\"brand-text w-100 text-center py-2\">\r\n {{brand?.title | titlecase}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #videoCallSchedule>\r\n <!-- *ngIf=\"ecomConfigs?.videoCallEnabled\" -->\r\n <ng-container>\r\n <div class=\"row w-100 video-container\">\r\n <div class=\"col-4 video-call-img\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/355007c175362077266611289-229221023_small.gif\"\r\n alt=\"\" class=\"w-100 h-100 \">\r\n </div>\r\n <div class=\"col-8 align-content-center\">\r\n <div class=\"video-head-text\">\r\n Live Video Call\r\n </div>\r\n <div class=\"sub-text\">\r\n Join a live video call with our consultants to see your favourite designs up close!\r\n </div>\r\n <button class=\"sch-btn text-center cursor-pointer\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(2)\" [buttonId]=\"getButtonId(2)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(2)\" (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\r\n Schedule a Video Call\r\n </button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #DeliverySection>\r\n <div class=\"delivery-container\">\r\n <h2 class=\"delivery-title\">Delivery, Stores & Trial</h2>\r\n\r\n <!-- Location Section -->\r\n <div class=\"location-section\">\r\n <div class=\"location-container d-flex align-items-center justify-content-between\"\r\n [style.borderColor]=\"styles?.background?.accentColor\">\r\n <div class=\"d-flex align-items-center w-90\">\r\n <div class=\"d-flex mx-1\"><mat-icon\r\n class=\"gps d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" class=\"postal-code-input\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\">\r\n </div>\r\n <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">{{pincode ? 'Change' : 'Locate me'}}</button>\r\n </div>\r\n <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\r\n </div>\r\n <ng-container>\r\n <!-- Free Delivery Section -->\r\n <div class=\"delivery-section\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"delivery-icon\">\uD83C\uDF81</span>\r\n\r\n <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Free\r\n Delivery by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }}</span>\r\n\r\n <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\r\n Order will\r\n Deliver by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }} with a Delivery Charge of\r\n \u20B9 {{ecomConfigs?.deliveryCharges | number:'1.2-2'}}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Nearest Store Section -->\r\n <ng-container\r\n *ngIf=\"storeDetails?.nearbyStore?.name && storeDetails?.nearbyStore?.name?.length > 0;else emptyStore\">\r\n <div class=\"store-section\">\r\n <div class=\"d-flex align-items-center store-item\">\r\n <span class=\"store-icon\">\uD83C\uDFEA</span>\r\n <div class=\"store-details\">\r\n <div class=\"store-text\">\r\n <span class=\"store-label\">Nearest Store - </span>\r\n <span class=\"store-name\">{{ storeDetails?.nearbyStore?.name | titlecase}}</span>\r\n <!-- <span class=\"store-distance\"> (4km)</span> -->\r\n </div>\r\n <!-- <div class=\"availability-section\">\r\n <span class=\"availability-badge\">\u23F0 AVAILABLE BY 28 JUN</span>\r\n </div> -->\r\n <!-- <div class=\"other-stores-text\">\r\n Also Available in <span class=\"other-stores-link\">18 other stores</span>\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-center w-100\">\r\n <button class=\"find-store-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(1)\" (click)=\"onFindInStore(storeDetails?.nearbyStore?.storeId)\">FIND IN\r\n STORE</button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #emptyStore>\r\n <div class=\"delivery-section\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"delivery-icon\">\uD83C\uDFEA</span>\r\n <span class=\"delivery-text\">No Stores are available</span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <!-- Try At Home Section -->\r\n <div class=\"try-home-section\">\r\n <div class=\"d-flex align-items-start try-home-item\">\r\n <span class=\"home-icon\">\uD83C\uDFE0</span>\r\n <div class=\"try-home-details\">\r\n <div class=\"try-home-header\">\r\n <span class=\"try-home-text\">Try At Home</span>\r\n <span class=\"free-text\"> (It's Free)</span>\r\n </div>\r\n <div class=\"home-appointment-text\">Home Appointment <span>Available to try from 29 Jul</span></div>\r\n <!-- <div class=\"appointment-text\">\r\n Home Appointment <span class=\"appointment-available\">Available to try from 28 Jun</span>\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\"d-flex-align-items-center justify-content-center w-100\">\r\n <button class=\"book-appointment-btn\" (click)=\"addToTrialCart()\" *ngIf=\"!isItemAddedAsTrial\">Try at\r\n HOME</button>\r\n <button class=\"book-appointment-btn\" *ngIf=\"isItemAddedAsTrial\">HOME APPOINTMENT BOOKED</button>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-variant\" tabindex=\"-1\" id=\"offcanvasRightVariant\"\r\n aria-labelledby=\"offcanvasRightLabel\">\r\n <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon data-bs-dismiss=\"offcanvas\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n <div class=\"varient-price px-3 pb-2\">\r\n <div class=\"price-text\">Price</div>\r\n <div class=\"d-flex g-3 align-items-center\">\r\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\r\n [innerHTML]='currency'></span>\r\n {{responseData?.price?.discountedPrice}}</div>\r\n <div class=\"price\"\r\n *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\"\r\n [ngClass]=\"{'strike-through': responseData?.price?.discountedPrice}\"><span [innerHTML]='currency'></span>\r\n {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\r\n </div>\r\n </div>\r\n <div class=\"varient-container h-100 p-3\">\r\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n <div class=\"varient-data\">\r\n <div class=\"varient-key\">{{varient.key}}</div>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\r\n [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"confirm-btn w-100 p-3 text-center cursor-pointer\" data-bs-dismiss=\"offcanvas\"\r\n [style.background]=\"data?.styles?.background?.accentColor\" style=\"color: white;\">Confirm\r\n Customization</div>\r\n</div>\r\n\r\n<ng-template #dialogBox>\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header d-flex align-item-center\">\r\n <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n <div class=\"schedule-header d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon (click)=\"matCloseDialog()\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"modal-body h-100\">\r\n <div class=\"row h-100 w-100 video-call-container\">\r\n <div class=\"col-6 h-100\" *ngIf=\"!isMobile\">\r\n <img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/557699c1753779503913freepik-overhead-shot-a-person-holding-a-smartphone-with-a-1029_vmg8GqHj (online-video-cutter.com).gif\"\r\n alt=\"\" class=\"w-100 h-100\" style=\"object-fit: cover;\">\r\n </div>\r\n <div class=\"col-6 position-relative h-100 call-details\">\r\n <!-- Name Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n (input)=\"onInputChange('username')\">\r\n </div>\r\n\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n (input)=\"onInputChange('email')\">\r\n </div>\r\n\r\n <!-- Mobile Number Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n <div class=\"sub-text-call\">IN +91</div>\r\n <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n (input)=\"onInputChange('mobileNumber')\">\r\n </div>\r\n\r\n\r\n <!-- Pincode Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n (input)=\"onInputChange('pincode')\">\r\n </div>\r\n <div class=\"language my-3\">\r\n <div class=\"mini-text mb-2\">Language Preference</div>\r\n <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n <ng-container *ngFor=\"let lang of languages\">\r\n <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectedLang = lang\"\r\n [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\r\n {{lang}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n <div class=\"input-field my-3\">\r\n <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n </div>\r\n </ng-container>\r\n <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\" [disabled]=\"isSubmitting\">\r\n <ng-container *ngIf=\"isSubmitting\">\r\n <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n <span class=\"visually-hidden\">Loading...</span>\r\n </div>\r\n SCHEDULING...\r\n </ng-container>\r\n <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n <div (click)=\"scheduleVideoCall()\" class=\"d-flex align-items-center\">\r\n <mat-icon>video_call</mat-icon> \r\n SCHEDULE A VIDEO CALL\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"scheduled\">\r\n <mat-icon>check_circle</mat-icon> \r\n SCHEDULED SUCCESSFULLY\r\n </ng-container>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-small overflow-scroll\" tabindex=\"-1\" id=\"offcanvasRightPriceBreakup\">\r\n <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon data-bs-dismiss=\"offcanvas\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n <div class=\"varient-price p-10-20\">\r\n <div class=\"price-break-header\">{{responseData?.name}}</div>\r\n </div>\r\n <div class=\"price-breakup h-100 w-100\">\r\n <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n <div class=\"price-container mb-3 p-10-20\">\r\n <div class=\"price-container-header\">\r\n {{ ele.materialType + \" BREAKUP\" }}\r\n </div>\r\n <div class=\"row w-100 header-row\">\r\n <div class=\"col-3 text-center\">COMPONENT</div>\r\n <div class=\"col-3 text-center\">RATE</div>\r\n <div class=\"col-3 text-center\">WEIGHT</div>\r\n <div class=\"col-3 text-center\">FINAL VALUE</div>\r\n </div>\r\n <div class=\"row w-100 value-row\">\r\n <div class=\"col-3 text-center\">{{ ele.materialPurity | titlecase }}</div>\r\n <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.primaryMaterialWeight, ele.materialPrice) |\r\n number:'1.2-2' }}</div>\r\n <div class=\"col-3 text-center\">{{ ele.primaryMaterialWeight + \" grams\" }}</div>\r\n <div class=\"col-3 text-center total\">\u20B9{{ ele.materialPrice | number:'1.2-2' }}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"price-container mb-3 p-10-30 py-0 border-unset\">\r\n <div class=\"row w-100 summary-row\">\r\n <div class=\"col-6 text-start\">Making Charges</div>\r\n <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}\r\n </div>\r\n </div>\r\n <div class=\"row w-100 summary-row\">\r\n <div class=\"col-6 text-start\">Tax Amount</div>\r\n <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}\r\n </div>\r\n </div>\r\n <div class=\"row w-100 summary-row\">\r\n <div class=\"col-6 text-start\">Total Amount</div>\r\n <div class=\"col-6 text-end total\">\r\n \u20B9{{(responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) |\r\n number:'1.2-2'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n\r\n<ng-template #ReviewsSection>\r\n <div class=\"w-100 row review-section mt-3\" [style.background]=\"getRGBA(styles?.background?.accentColor, 10)\"\r\n *ngIf=\"reviewsData && reviewsData.length > 0\">\r\n <div class=\"col-md-3 col-sm-12\">\r\n <div class=\"cust-header\">Customer Reviews</div>\r\n <div class=\"d-flex gap-3 mb-1\">\r\n <ng-container *ngIf=\"responseData?.averageRating\">\r\n <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n </ng-container>\r\n <span class=\"rating-text\">{{responseData?.averageRating | number:'1.1-2'}} out of 5</span>\r\n </div>\r\n <div class=\"d-flex mb-3\">{{responseData?.totalReviewCount + \" ratings\"}}</div>\r\n <div class=\"ratings-percentage\">\r\n <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\r\n <div class=\"percentage d-flex align-items-center gap-2 mb-2\">\r\n <span>{{rating + \" star\"}}</span>\r\n <div class=\"w-50 bar\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div [style.width.%]=\"getPercentage(rating)\"\r\n [style.backgroundColor]=\"data?.styles?.background?.accentColor\" class=\"h-100\"></div>\r\n </div>\r\n <span class=\"percentage-text\">{{getPercentage(rating) + \"%\"}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-9 col-sm-12\">\r\n <div class=\"review-header\">Latest Reviews</div>\r\n <div class=\"review-body d-flex flex-column gap-3\">\r\n <ng-container *ngFor=\"let review of reviewsData\">\r\n <div class=\"review-container w-75\">\r\n <div class=\"review-name gap-2 my-2 d-flex align-items-center\">\r\n <img src=\"https://m.media-amazon.com/images/S/amazon-avatars-global/default.png\" alt=\"\"\r\n class=\"width-30 h-25 mr-2\">\r\n <span>{{review?.userName ?? \"-\"}}</span>\r\n </div>\r\n <ng-container *ngIf=\"review?.rating\">\r\n <p-rating [(ngModel)]=\"review.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n </ng-container>\r\n <div class=\"review-desc\">\r\n {{review?.review ?? \"-\"}}\r\n </div>\r\n <div class=\"review-img\">\r\n <img [src]=\"img.imgUrl\" alt=\"\" *ngFor=\"let img of review?.reviewImages ?? []\"\r\n (click)=\"showDetailReview(review)\">\r\n <button style=\"display: none;\" data-toggle=\"modal\" data-target=\"#reviewModal\"\r\n id=\"openReviewDetail\"></button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"w-75 see-more py-3\" (click)=\"loadMoreReviews()\" *ngIf=\"(reviewsData?.length ?? 0) > 3\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">\r\n See more reviews <span>></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" role=\"dialog\"\r\n aria-hidden=\"true\">\r\n <div class=\"modal-dialog modal-dialog-centered video-modal\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-body\" style=\"height: 100%;\">\r\n <video controls muted playsinline style=\"width: 100%; height: 100%;\">\r\n <source\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/371647c1753962084265clideo_editor_48bc93c24e18470888c661bb09e437da (online-video-cutter.com).mp4\"\r\n type=\"video/mp4\">\r\n Your browser does not support the video tag.\r\n </video>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"modal fade\" id=\"reviewModal\" tabindex=\"-1\" aria-labelledby=\"reviewModalLabel\" role=\"dialog\"\r\n aria-hidden=\"true\">\r\n <div class=\"modal-dialog review-modal\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h1 class=\"modal-title fs-5\"></h1>\r\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n </div>\r\n <div class=\"modal-body\">\r\n <div class=\"detail-review-container\">\r\n <div class=\"image-section\">\r\n <div class=\"product-image\">\r\n <div class=\"backward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex-1\"\r\n *ngIf=\"currentImageIndex > 0\">\u25BC</div>\r\n <img [src]=\"selectedReview?.reviewImages?.[currentImageIndex]?.imgUrl\" alt=\"\">\r\n <div class=\"forward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex+1\"\r\n *ngIf=\"currentImageIndex < selectedReview?.images?.length - 1\">\u25B2</div>\r\n <!-- <div class=\"earbuds-container\">\r\n <div class=\"charging-case\"></div>\r\n <div class=\"earbud left\"></div>\r\n <div class=\"earbud right\"></div>\r\n </div> -->\r\n </div>\r\n <!-- <div class=\"navigation-arrows\">\r\n </div> -->\r\n </div>\r\n\r\n <div class=\"review-section\">\r\n <div class=\"reviewer-header\">\r\n <div class=\"reviewer-avatar\">\uD83D\uDC64</div>\r\n <div class=\"reviewer-name\">{{selectedReview?.userName ?? \"-\"}}</div>\r\n </div>\r\n\r\n <div class=\"detail-rating\" *ngIf=\"selectedReview?.rating\">\r\n <p-rating [(ngModel)]=\"selectedReview.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n </div>\r\n\r\n <div class=\"review-date\">\r\n Reviewed in India on 24 July 2025\r\n </div>\r\n\r\n <div class=\"review-text\">\r\n {{selectedReview?.review ?? \"-\"}}\r\n </div>\r\n\r\n <div class=\"images-section\">\r\n <h3>Images in this review</h3>\r\n <div class=\"review-images\">\r\n <div class=\"review-image\" [ngClass]=\"{'selected': currentImageIndex == i}\"\r\n *ngFor=\"let img of selectedReview?.reviewImages ?? [];let i = index\" (click)=\"currentImageIndex = i\">\r\n <img [src]=\"img.imgUrl\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".product-desc{display:flex}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.strike-through{text-decoration:line-through;color:#d3d3d3}::ng-deep .smooth-panel .p-panel-header{cursor:pointer;background:transparent;border:unset;font-size:18px;font-weight:700;padding:0}::ng-deep .smooth-panel .p-panel-content{border:unset;padding:0}.jewel-container{border-radius:12px;box-shadow:#63636333 0 2px 8px}.jewel-header{padding:8px 10px;border-radius:12px 12px 0 0;font-size:15px;font-weight:700;color:#4f3267}.br-p{border-radius:0 0 12px 12px;padding:10px 0}.row-header{font-size:13px;font-weight:700;color:#4f3267}.row-content{color:#4e555e}.jewellery-table-container{border-radius:12px}.jewellery-table{width:100%;border-collapse:collapse;border:1px solid #ddd;transition:all .3s ease}.jewellery-table th,.jewellery-table td{border:1px solid #ddd;padding:12px;text-align:left;transition:background-color .2s ease}.material-header td{background-color:#f8f9fa;font-weight:700;font-size:16px}.column-header{background-color:#f1f1f1}.column-header th{font-weight:600}.material-row:hover{background-color:#f5f5f5}.charges-header th,.total-header th{background-color:#eaeaea;font-weight:700}.total-row td{font-weight:700;font-size:18px;background-color:#f8f8f8}@media screen and (max-width: 600px){.jewellery-table{font-size:14px}.jewellery-table th,.jewellery-table td{padding:8px}}.share-icon{border:1px solid;border-radius:8px;padding:5px;height:43px;width:40px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer}.prod-img-block{height:100%;display:flex;gap:5px}.header-text{font-size:17px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:1% 3%;border-radius:8px;letter-spacing:.5px}.pricebreakup-btn mat-icon{font-size:18px;display:flex;align-items:center}.img-list{display:flex;gap:5px;max-height:460px}.img-list img{height:100px;width:100px;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:100%;height:500px;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.price{font-weight:600;font-size:24px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:1px solid;align-items:center;gap:15px;height:44px;width:75%;justify-content:space-between;border-radius:12px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.fc{font-size:17px;font-weight:700}.trim-text{-webkit-line-clamp:3!important}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;margin-top:.5rem}.tab-group{display:flex;gap:10px}.tab{font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.discount-price{font-size:1.4rem}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#f7f7f7;padding:11px 20px;border-radius:12px;margin-top:unset!important;width:70%!important;border:1px solid #d3d3d347}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#f7f7f7;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:7px 25px;cursor:pointer;font-weight:600}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:5px;height:44px!important;justify-content:space-between;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:14px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.w-h-40{width:40px!important;height:40px!important}.product-detail{margin-top:0;height:100vh}.above-height{height:90vh;max-height:100vh;overflow-y:scroll}.height{height:100vh;overflow-y:auto}.mobile-footer{display:none}video{border-radius:18px}@media (min-width: 1024px){.zoom:hover{transform:scale(1.2);transition:transform .2s ease-in-out;overflow:hidden}.above-height{width:100%;display:flex;margin-top:25px}.product-detail{padding:2%}.product-heading{font-size:20px;font-weight:600;margin-top:5px}.prod-img-block{height:100%;display:flex;flex-direction:column-reverse;justify-content:start;gap:5px}}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:100000001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.product-desc{font-size:13px}.brief-desc{font-size:16px;margin-top:unset!important}.total-container{padding-top:10px!important;padding-bottom:4rem!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important;height:348px}.item-img img{width:100%;height:348px!important}.display-none{display:none}.prod-img-block{flex-direction:column;gap:5px}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.product-detail{margin-top:20px;overflow-x:hidden}.input-field{margin-top:.7rem!important;margin-bottom:.7rem!important}.prod-desc{margin-top:20px}.video-call-container{margin:0!important}.product-img{height:220px}.call-details{width:100%!important;padding:3%!important}.send-btn{padding:.5rem 1rem!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.favourite:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.review-sec :is(input,textarea){width:100%!important}.height{width:100%;height:auto}.above-height{padding:1%;height:unset!important}.product-heading{font-size:23px;font-weight:600}.discount-price{font-size:1.7rem!important}.header-text{font-size:20px!important}}.send-btn{font-size:14px!important;padding:1rem;display:flex;align-items:center;justify-content:center;text-transform:uppercase;font-weight:600}.send-btn mat-icon{height:20px;width:20px;font-size:18px}.favourite .mat-icon{min-height:40px;min-width:40px;font-size:25px;display:flex;align-items:center;justify-content:center;border-radius:5px;cursor:pointer}.favourite:hover,.share-product:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.border-solid{border:1px solid;border-radius:8px}a{text-decoration:none}.brief-desc{font-size:14px;color:#4e555e}.total-container{height:100vh;position:relative;display:block!important;overflow:scroll}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin:unset!important}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}.above-height{width:100%;padding:2%;display:flex;flex-direction:column}.product-detail{padding:0vw 42vw 0vw 2vw}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:911px){.product-detail{padding:0% 34% 0% 2%}.above-height{display:flex}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:1024px){.product-detail{padding:0% 2%}.above-height{display:flex}.product-headig{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}.mb-15{margin-bottom:15px}@media (min-width: 1400px){.container{max-width:unset;width:95%;height:100vh;overflow-y:auto}}.width-max{width:max-content}.width-34{width:33.3%!important}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}.f-18{font-size:18px}.offcanvas-variant{border-radius:30px 0 0 30px}.varient-header,.varient-price{background:#f7f7f7}.varient-header{border-radius:30px 0 0}.confirm-btn{border-radius:0 0 0 30px;position:absolute!important;bottom:0!important}.style2-container{border:1px solid;border-radius:12px;margin:0}.varient-item{border-right:1px solid;align-content:center}.variant-head{font-size:12px;color:#33363e}.varient-data{margin-bottom:25px;border-bottom:1px solid black;padding-bottom:25px}.variant-value{font-size:.9rem;color:#000}.custom-text{border-radius:0 8px 8px 0;font-size:.9rem;font-weight:600}.br-50{border-radius:50%}.w-15{width:22%!important}.scroll-wrap{flex-wrap:nowrap}.brand-text{word-wrap:break-word;white-space:normal;font-size:12px;font-weight:600;line-height:20px}.video-container{border:1px solid rgb(240,240,240);margin:10px 0;border-radius:12px}.video-head-text{font-size:16px;font-weight:700}.sub-text{font-size:11px;color:#6f7377;margin-bottom:10px}.sch-btn{font-size:1.2rem!important;color:#fff;padding:3px 0;margin-top:5px}.tax-text{font-size:.7rem;color:#6f7377}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.delivery-container{margin:35px 0 15px;background-color:transparent}.delivery-title{font-size:16px;font-weight:600;margin:0 0 12px;line-height:1.2}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:10px;margin-bottom:15px;width:100%}.location-icon{width:20px;height:20px;background-color:#374151;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.location-icon:before{content:\"\";width:8px;height:8px;background-color:#fff;border-radius:50%;position:absolute}.postal-code-input{font-size:12px;font-weight:600;letter-spacing:.5px;border:none;outline:none;background:transparent;width:90%}.postal-code-input::placeholder{font-weight:500}.locate-btn{background:none!important;border:none!important;font-weight:500;font-size:12px!important;padding:0!important;box-shadow:none!important;width:20%!important}.gps{font-size:17px}.locate-btn:focus{box-shadow:none!important}.delivery-section{margin-bottom:15px;border:1px solid rgb(240,240,240);padding:10px;border-radius:12px}.delivery-icon{font-size:18px;color:#ec4899;margin-right:14px;width:20px}.delivery-text{font-size:14px;font-weight:700}.store-section{border:1px solid rgb(240,240,240);padding:10px;border-radius:12px;margin-bottom:15px}.store-item{margin-bottom:11px}.store-icon{font-size:18px;color:#f97316;margin-right:14px;margin-top:2px;width:20px}.store-details{flex:1}.store-text{font-size:14px}.store-name{font-weight:700}.availability-section{margin-bottom:6px}.availability-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:#d97706;background-color:#fef3c7;padding:4px 8px;border-radius:12px;letter-spacing:.5px}.other-stores-text{font-size:14px;color:#6b7280;line-height:1.4}.other-stores-link{color:#6b46c1;cursor:pointer;text-decoration:underline}.other-stores-link:hover{color:#553c9a}.find-store-btn{width:100%!important;padding:8px 20px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px}.try-home-section{border-radius:12px;padding:10px;border:1px solid rgb(240,240,240)}.try-home-item{margin-bottom:10px;padding:0}.home-icon{font-size:18px;color:#6b46c1;margin-right:14px;margin-top:2px;width:20px}.try-home-details{flex:1}.try-home-text{font-size:14px;font-weight:700;color:#374151}.free-text{font-size:14px;color:#6b7280}.appointment-text{font-size:14px;color:#6b7280;line-height:1.4}.appointment-available{font-weight:500;color:#374151}.book-appointment-btn{background:linear-gradient(135deg,#8b5cf6,#a855f7);color:#fff;border:none;padding:8px 20px;border-radius:12px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px;transition:all .2s ease}.book-appointment-btn:hover{background:linear-gradient(135deg,#7c3aed,#9333ea);transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}@media (max-width: 480px){.container{display:flex;align-items:center;flex-direction:column}.location-section{padding:12px 0}.try-home-section{padding:20px}}.w-90{width:90%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.w-12{width:12%!important}.w-88{width:88%!important}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.border-unset{border:unset!important}.error-border{border:2px solid #dc3545!important}.offcanvas-small{height:72vh;top:25%;width:35%;border-radius:50px 0 0 50px}.rating{width:max-content;border:1px solid;border-radius:20px;padding:0 10px;margin-bottom:.5rem}.rating-no{padding-right:7px;margin:0;border-right:1px solid;font-size:.75rem}.p-10-20{padding:10px 30px}.price-break-header{font-size:19px;font-weight:600}.price-container{border-bottom:1px solid rgb(233,233,233)}.price-container-header{font-size:14px;font-weight:600;color:#333}.total-ratings{font-size:.75rem}.header-row .col-3{font-size:12px;font-weight:500;color:#666}.value-row .col-3{font-size:14px;font-weight:400;color:#333}.value-row .col-3.total{font-weight:600}.summary-row .col-6{font-size:15px;font-weight:500;color:#333;padding:unset}.summary-row .col-6.total{font-weight:600;padding-right:10px}.summary-row{padding:0 42px}.error-border{border:2px solid #e74c3c!important;box-shadow:0 0 5px #e74c3c4d!important}.form-control,.input-field input{transition:border-color .3s ease,box-shadow .3s ease}.error-border:focus{border-color:#e74c3c!important;box-shadow:0 0 8px #e74c3c80!important}.input-field input:focus{transform:scale(1.02)}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:-.125em;border:.125em solid currentcolor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}.spinner-border-sm{width:.875rem;height:.875rem;border-width:.125em}@keyframes spinner-border{to{transform:rotate(360deg)}}.me-2{margin-right:.5rem}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.width-30{width:30px!important}.review-header{font-size:20px;font-weight:600}.review-desc{font-weight:500}.see-more{font-weight:600;cursor:pointer;border-top:1px solid #d1d1d1}.see-more span{font-size:12px}.cust-header{font-size:24px}.bar{border:1px solid;height:20px;border-radius:5px;overflow:hidden}.bar div{border-radius:2px}.parent-container{height:100%;width:100%;display:flex}.home-appointment-text{font-size:.8rem;color:#4e555e}.home-appointment-text span{font-weight:600}.video-call-img{height:120px;margin:0;padding:0;border-radius:45px}.video-call-img img{border-top-left-radius:12px;border-bottom-left-radius:12px}.discount{background:#fff3f2;padding:15px 15px 20px;margin-top:14px;border-radius:8px;display:flex;flex-direction:column;gap:5px;position:relative}.discount p{margin-bottom:0;color:#4f3267;font-weight:700;font-size:1rem}.discount .offer{color:#eb4f5c}.discount:before{content:\"\";display:block;height:44px;width:4px;background:#eb4f5c;position:absolute;left:0;top:16px;border-top-right-radius:20px;border-bottom-right-radius:20px}.metal-purity{display:flex;flex-direction:column;gap:10px}.scrollable-content{height:100%;max-height:95vh;overflow-y:auto}.style-2-img{max-height:70%;height:100%!important}.ring-size-video{background:#f0ebff;display:flex;justify-content:space-between;align-items:center;height:45px;padding:12px;border-radius:10px;margin-top:20px;margin-bottom:20px}.ring-size-video .text{color:#4f3267;font-size:.9rem}.ring-size-video .learn-how{color:#de57e9;font-weight:700;font-size:1rem;display:flex;gap:5px;align-items:center;cursor:pointer}.ring-size-video .learn-how mat-icon{font-size:20px;display:flex;align-items:center}.ring-size-video p{margin-bottom:0}.video-modal{height:90vh!important;width:90vw!important;max-width:none}.video-modal .modal-body{padding:0}.review-section{border-radius:10px;padding:15px}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.detail-review-container{display:flex;max-width:1200px;margin:0 auto;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px #0000001a}.image-section{flex:1;background:#000;position:relative;min-height:400px}.product-image{width:100%;height:100%;object-fit:cover;background:linear-gradient(135deg,#e8e8e8,#d0d0d0);display:flex;align-items:center;justify-content:center;max-height:400px;position:relative}.product-image img{height:100%;width:100%;object-fit:contain}.earbuds-container{position:relative;width:300px;height:200px}.charging-case{width:200px;height:120px;background:linear-gradient(145deg,#f0f0f0,#e0e0e0);border-radius:25px;position:absolute;top:40px;left:50px;box-shadow:inset 0 4px 8px #0000001a}.charging-case:before{content:\"\";position:absolute;inset:10px;background:linear-gradient(145deg,#e8e8e8,#d8d8d8);border-radius:15px;box-shadow:inset 0 2px 4px #0000001a}.earbud{position:absolute;width:45px;height:15px;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border-radius:8px;box-shadow:0 2px 4px #0003}.earbud:before{content:\"noise\";position:absolute;top:2px;left:50%;transform:translate(-50%);font-size:6px;color:#888;font-weight:300}.earbud.left{top:70px;left:80px}.earbud.right{top:90px;left:130px}.earbud.right:before{color:#ff6b35}.review-section{flex:1;padding:30px;background:#fafafa}.reviewer-header{display:flex;align-items:center;margin-bottom:15px}.reviewer-avatar{width:40px;height:40px;background:#ccc;border-radius:50%;margin-right:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#666}.reviewer-name{font-size:16px;font-weight:500;color:#333}.detail-rating{margin:10px 0}.stars{display:flex;gap:2px;margin-bottom:5px}.star{color:#ff9500;font-size:18px}.thumbs{display:flex;gap:5px}.thumb{color:#ff9500;font-size:16px}.review-date{font-size:14px;color:#666;margin:15px 0}.review-text{font-size:16px;line-height:1.5;color:#333;margin-bottom:25px}.images-section h3{font-size:16px;color:#666;margin-bottom:15px;font-weight:500}.review-images{display:flex;gap:10px}.review-image{width:60px;height:60px;background:#ddd;border-radius:6px;border:2px solid #e0e0e0;cursor:pointer;transition:border-color .3s}.review-image img{width:100%;height:100%}.review-image:hover,.review-image.selected{border-color:#007185}.navigation-arrows{position:absolute;top:20px;right:20px;display:flex;flex-direction:column;gap:10px}.arrow{width:40px;height:40px;background:#fffc;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:#666;transition:background-color .3s;position:absolute;transform:rotate(90deg)}.backward-arrow{left:10px}.forward-arrow{right:10px}.arrow:hover{background:#fff}@media (max-width: 768px){.review-container{flex-direction:column}.image-section{min-height:300px}.review-section{padding:20px}}.review-modal{max-width:none;width:70vw}.review-modal .modal-body{padding:0}@media screen and (max-width: 475px){.offcanvas-small{height:100vh;width:100%;top:0}.review-modal{margin:0;height:100%;width:100%}.detail-review-container{flex-direction:column;height:100%}.product-image{max-height:289px}.image-section{min-height:289px}.video-modal{margin:0;height:100vh!important;width:100vw!important;overflow:hidden}}.modal{z-index:100000033}\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.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i4.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: NgxImageZoomModule }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i7$3.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
|
18529
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductDescComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: RestService }, { token: CartService }, { token: StorageServiceService }, { token: i6$1.MessageService }, { token: i1$2.Meta }, { token: i1$2.Title }, { token: i8$3.MatBottomSheet }, { token: i0.Renderer2 }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18530
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "reviewComponent", first: true, predicate: CustomerReviewComponent, descendants: true }, { propertyName: "aboveHeight", first: true, predicate: ["aboveHeight"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "imageSection", first: true, predicate: ["imageSection"], descendants: true }, { propertyName: "detailSection", first: true, predicate: ["detailSection"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n\r\n <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n </div> -->\r\n <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoLayout]=\"styles?.layout\" #container>\r\n <!-- <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\r\n (click)=\"routeToHome()\">Home</a> /\r\n <span>{{ responseData?.name | titlecase }}</span>\r\n </div> -->\r\n <div class=\"row h-100 w-100 h-100\" #aboveHeight class=\"above-height\"\r\n [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\r\n <div class=\"col-lg-7 col-sm-12 h-100 height\" #imageSection>\r\n <div class=\"prod-img-block\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-4 col-sm-12 h-100\" #detailSection>\r\n <ng-container *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngIf=\"toShowInJewellery\">\r\n <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"ecomConfigs?.videoCallEnabled\">\r\n <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"ecomConfigs?.brandPromiseEnabled\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </ng-container>\r\n\r\n\r\n\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\r\n </ng-container>\r\n\r\n <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\r\n [innerHTML]=\"responseData.brief\"></div> -->\r\n <div class=\"product-sku\">\r\n <!-- <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div> -->\r\n <!-- <div\r\n *ngIf=\"responseData?.itemCategorisation?.itemCategories && (responseData?.itemCategorisation?.itemCategories?.length || 0) > 0\">\r\n Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\r\n titlecase}} <ng-container\r\n *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n </a></div> -->\r\n <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n </span></div>\r\n </div>\r\n <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\r\n <!-- <ng-container>\r\n <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\r\n </ng-container> -->\r\n </div>\r\n </div>\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"ReviewsSection\"></ng-container>\r\n </ng-container>\r\n </section>\r\n <!-- <ng-container *ngIf=\"relatedProductData?.length\">\r\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\r\n [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n </ng-container>\r\n <ng-container *ngIf=\"recentViewItemList?.length\">\r\n <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\r\n [isRelatedProduct]=\"true\"></simpo-featured-products>\r\n </ng-container> -->\r\n <!-- <ng-container>\r\n <simpo-customer-review [data]=\"data\"></simpo-customer-review>\r\n </ng-container> -->\r\n\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </section>\r\n</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n\r\n<div class=\"mobile-footer\">\r\n <div class=\"icons\">\r\n <div (click)=\"goToCart()\">\r\n <mat-icon>shopping_cart</mat-icon>\r\n </div>\r\n <div>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n </div>\r\n </div>\r\n <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\">Out of\r\n Stock</button>\r\n <div class=\"quantity\" *ngIf=\"responseData?.quantity && !ecomConfigs?.videoCallEnabled\"\r\n [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\r\n </div>\r\n <button *ngIf=\"responseData?.quantity && ecomConfigs?.videoCallEnabled\" class=\"send-btn w-100\"\r\n [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\r\n <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\r\n <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\r\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\"\r\n (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ReviewSection>\r\n <div class=\"review-sec\">\r\n <div class=\"title\">Customer Review</div>\r\n <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\r\n <span>Be the first to write a review</span>\r\n <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\r\n Review' : 'Cancel Review'}}</button>\r\n <ng-container *ngIf=\"showReview\">\r\n <hr />\r\n <div class=\"user-review\">\r\n <div class=\"title\">Write a review</div>\r\n <span class=\"secondary-text\">RATING</span>\r\n <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\r\n <div>\r\n <span class=\"secondary-text\">Review Title</span>\r\n <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\r\n </div>\r\n <div>\r\n <span class=\"secondary-text\">Review</span>\r\n <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\r\n </div>\r\n <div class=\"review-action-btn\">\r\n <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\r\n <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"addProductReview()\"\r\n [disabled]=\"productReview == 0 && reviewTitle?.length == 0 && reviewDescription?.length == 0\">Submit\r\n review</button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n<ng-template #SocialIcons>\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-socia-icons>\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 #ActionBtn>\r\n <div class=\"button-parent\">\r\n <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\">Out of\r\n Stock</button>\r\n <div class=\"quantity\" *ngIf=\"responseData?.quantity && !ecomConfigs?.videoCallEnabled\"\r\n [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\r\n </div>\r\n <button *ngIf=\"responseData?.quantity && ecomConfigs?.videoCallEnabled\" class=\"send-btn w-100\"\r\n [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\r\n [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\r\n (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\r\n <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\r\n <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75\">\r\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\"\r\n (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && !IsEcommerce\" class=\"w-75\">\r\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\" (click)=\"raiseLead()\"><mat-icon style=\"height:14px !important\">\r\n message</mat-icon>Notify Me</button>\r\n </div>\r\n <div class=\"favourite border-solid\" *ngIf=\"IsEcommerce\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n </div>\r\n <div class=\"share-product\">\r\n <mat-icon class=\"share-icon\" (click)=\"shareProduct()\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n [style.borderColor]=\"data?.styles?.background?.accentColor\">share</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #variants>\r\n <ng-container *ngIf=\"data?.styles?.customization == 'Style1'\">\r\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n <div class=\"mb-15\">\r\n <div class=\"varient-key\">{{varient.key}}</div>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\r\n [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"data?.styles?.customization == 'Style2' && selectedVarient.size > 0\">\r\n <ng-container>\r\n <div class=\"row mt-2 style2-container w-100\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div *ngFor=\"let item of selectedVarient | keyvalue\" class=\"px-3 py-2 varient-item\"\r\n [class]=\"getClass(selectedVarient)\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"variant-head\">{{item.key | titlecase}}</div>\r\n <div class=\"variant-value text-start fw-600\">\r\n {{item.value |\r\n titlecase}}</div>\r\n </div>\r\n <div class=\"cursor-pointer p-0\" [class]=\"getClass(selectedVarient)\">\r\n <div class=\"custom-text d-flex align-items-center justify-content-center h-100 p-2\" data-bs-toggle=\"offcanvas\"\r\n data-bs-target=\"#offcanvasRightVariant\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">CUSTOMISE\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc>\r\n <div class=\"d-flex flex-column\" style=\"margin-top: 15px;\">\r\n <div class=\"rating d-flex justify-content-center gap-2 mb-3\"\r\n *ngIf=\"responseData?.averageRating && responseData?.totalReviewCount\"\r\n [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"rating-no my-1\">{{(responseData?.averageRating | number:'1.1-2')}}\u2B50</div>\r\n <div class=\"total-ratings my-1\">{{responseData?.totalReviewCount == 1 ? '1 Rating' :\r\n getRatings(responseData?.totalReviewCount) + \" \" + \"ratings\"}}</div>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.sellingPrice}\"\r\n *ngIf=\"responseData?.price?.sellingPrice && responseData.price.sellingPrice > 0\"><span\r\n [innerHTML]='currency'></span>\r\n {{responseData?.price?.sellingPrice}}</div>\r\n <div class=\"price\"\r\n [ngClass]=\"{'strike-through': getDifference(responseData?.price?.discountedPrice, responseData?.price?.value) > 2}\"\r\n *ngIf=\"getDifference(responseData?.price?.discountedPrice, responseData?.price?.value) > 2\">\r\n <span [innerHTML]='currency'></span>\r\n {{responseData?.price?.value | number:'1.0-0'}}\r\n </div>\r\n </div>\r\n <div class=\"tax-text\">(MRP Inclusive all taxes)</div>\r\n </div>\r\n <div class=\"heading-large trim-text\" class=\"product-heading\">{{responseData?.name}}</div>\r\n <ng-container *ngIf=\"toShowInJewellery\">\r\n <div class=\"discount\">\r\n <p>Flat 30% off on Diamond Prices</p>\r\n <p class=\"offer\">Offer Expires in 4 days</p>\r\n </div>\r\n <div class=\"ring-size-video\">\r\n <p class=\"text\">Not sure about the ring size?</p>\r\n <p class=\"learn-how\" data-toggle=\"modal\" data-target=\"#exampleModal\">Learn How\r\n <mat-icon>play_circle_outline</mat-icon>\r\n </p>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #descriptors>\r\n <div class=\"row prod-desc mt-2\">\r\n <div>\r\n <div class=\"product-header d-flex align-items-center justify-content-between\">\r\n <span class=\"header-text\" *ngIf=\"responseData?.descriptor || responseData?.materials\">Product Details</span>\r\n <div class=\"pricebreakup-btn d-flex align-items-center justify-content-center cursor-pointer\"\r\n *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\" data-bs-toggle=\"offcanvas\"\r\n data-bs-target=\"#offcanvasRightPriceBreakup\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\r\n <mat-icon>add</mat-icon> PRICE BREAKUP\r\n </div>\r\n </div>\r\n <div class=\"description\">\r\n <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\r\n [innerHTML]=\"responseData?.descriptor?.name\" [style.background]=\"data?.styles?.background?.color\"></div>\r\n </div>\r\n <ng-container *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\">\r\n <div class=\"jewellery-table-container\">\r\n <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n <div class=\"jewel-container mt-2\">\r\n <div class=\"jewel-header\" [style.background]=\"getHeaderColor(ele.materialType)\">\r\n {{ele?.materialName | titlecase}}\r\n </div>\r\n <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor(ele.materialType)\">\r\n <div class=\"col-6 metal-purity\">\r\n <div class=\"row-header\">\r\n Net Weight/{{ele?.unit | titlecase}}\r\n </div>\r\n <div class=\"row-content\">\r\n {{ele.primaryMaterialWeight + \" \" + (ele?.unit | titlecase)}}\r\n </div>\r\n </div>\r\n <div class=\"col-6 metal-purity\">\r\n <div class=\"row-header\">\r\n Purity\r\n </div>\r\n <div class=\"row-content\">\r\n {{ele.purity |\r\n titlecase}}\r\n </div>\r\n </div>\r\n <!-- <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Price/Gram\r\n </div>\r\n <div class=\"row-content\">\r\n \u20B9{{ getPricePerGram(ele.primaryMaterialWeight,ele.materialPrice) |\r\n number:'1.2-2'}}\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Value\r\n </div>\r\n <div class=\"row-content\">\r\n \u20B9{{ele.materialPrice | number:'1.2-2'}}\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- <div class=\"jewel-container mt-2\">\r\n <div class=\"jewel-header\" [style.background]=\"getHeaderColor('Making Charges')\">\r\n Making Charges\r\n </div>\r\n <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor('Making Charges')\">\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Net Weight\r\n </div>\r\n <div class=\"row-content\">\r\n {{responseData?.baseWeight}} </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Making Charge %\r\n </div>\r\n <div class=\"row-content\">\r\n {{responseData?.makingChargePercentage}}\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Value\r\n </div>\r\n <div class=\"row-content\">\r\n \u20B9{{responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <!-- <div class=\"tab-group\">\r\n <div class=\"tab\" data-bs-toggle=\"collapse\" href=\"#collapseExample\" >Description</div>\r\n </div>\r\n <div style=\"margin-top: 10px;\" class=\"body-large collapse\" id=\"collapseExample\" *ngIf=\"responseData?.descriptor\"\r\n [innerHTML]=\"responseData?.descriptor?.name\"></div> -->\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n <ng-container *ngIf=\"!varientLoading && (isMobile || data?.styles?.gridStyle == 'Style1')\">\r\n <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n <ng-container *ngFor=\"let img of itemImages\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\r\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n </ng-container>\r\n </div>\r\n <div class=\"item-img\">\r\n <ng-container *ngIf=\"currentImg\">\r\n\r\n <!-- <mat-icon class=\"share-icon\" (click)=\"shareProduct()\">share</mat-icon> -->\r\n <ng-container *ngIf=\"!isMobile\">\r\n <img [src]=\"currentImg\" class=\"img zoom\" style=\"height: 100%; width: 100%;\" [simpoCorner]=\"styles?.corners\">\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\" [simpoCorner]=\"styles?.corners\" class=\"zoom\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"!currentImg\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\r\n [simpoCorner]=\"styles?.corners\">\r\n </ng-container>\r\n </div>\r\n <div class=\"img-list w-100\" *ngIf=\"screenWidth <= 500\">\r\n <ng-container *ngFor=\"let img of itemImages\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n alt=\"\" class=\"img zoom\" (click)=\"changeImg(img.imgUrl)\"\r\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!varientLoading && (!isMobile && data?.styles?.gridStyle == 'Style2')\">\r\n <div class=\"row h-100 mt-0 w-100\">\r\n <ng-container *ngIf=\"itemImages?.length == 0\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\" class=\"img\"\r\n [simpoCorner]=\"styles?.corners\" class=\"col-12 h-100 p-0\">\r\n </ng-container>\r\n <ng-container *ngFor=\"let img of itemImages\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n alt=\"\" class=\"img col-6 h-75 p-1 style-2-img\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\r\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\"\r\n [class.h-100]=\"screenWidth <= 500\" [class.w-100]=\"itemImages?.length == 1\"\r\n [class.h-100]=\"itemImages?.length == 1\">\r\n </ng-container>\r\n </div>\r\n\r\n </ng-container>\r\n\r\n\r\n\r\n\r\n <div class=\"item-img\" *ngIf=\"varientLoading\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '100%',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #branding>\r\n <div class=\"row w-100\">\r\n <ng-container *ngFor=\"let brand of brandPromises\">\r\n <div class=\"col-4 d-flex flex-column align-items-center g-2\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"brand?.logoUrl\" alt=\"\" class=\"w-h-40 p-0 br-50\">\r\n <div class=\"brand-text w-100 text-center py-2\">\r\n {{brand?.title | titlecase}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #videoCallSchedule>\r\n <!-- *ngIf=\"ecomConfigs?.videoCallEnabled\" -->\r\n <ng-container>\r\n <div class=\"row w-100 video-container\">\r\n <div class=\"col-4 video-call-img\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/355007c175362077266611289-229221023_small.gif\"\r\n alt=\"\" class=\"w-100 h-100 \">\r\n </div>\r\n <div class=\"col-8 align-content-center\">\r\n <div class=\"video-head-text\">\r\n Live Video Call\r\n </div>\r\n <div class=\"sub-text\">\r\n Join a live video call with our consultants to see your favourite designs up close!\r\n </div>\r\n <button class=\"sch-btn text-center cursor-pointer\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(2)\" [buttonId]=\"getButtonId(2)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(2)\" (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\r\n Schedule a Video Call\r\n </button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #DeliverySection>\r\n <div class=\"delivery-container\">\r\n <h2 class=\"delivery-title\">Delivery, Stores & Trial</h2>\r\n\r\n <!-- Location Section -->\r\n <div class=\"location-section\">\r\n <div class=\"location-container d-flex align-items-center justify-content-between\"\r\n [style.borderColor]=\"styles?.background?.accentColor\">\r\n <div class=\"d-flex align-items-center w-90\">\r\n <div class=\"d-flex mx-1\"><mat-icon\r\n class=\"gps d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" class=\"postal-code-input\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\">\r\n </div>\r\n <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">{{pincode ? 'Change' : 'Locate me'}}</button>\r\n </div>\r\n <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\r\n </div>\r\n <ng-container>\r\n <!-- Free Delivery Section -->\r\n <div class=\"delivery-section\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"delivery-icon\">\uD83C\uDF81</span>\r\n\r\n <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Free\r\n Delivery by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }}</span>\r\n\r\n <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\r\n Order will\r\n Deliver by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }} with a Delivery Charge of\r\n \u20B9 {{ecomConfigs?.deliveryCharges | number:'1.2-2'}}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Nearest Store Section -->\r\n <ng-container\r\n *ngIf=\"storeDetails?.nearbyStore?.name && storeDetails?.nearbyStore?.name?.length > 0;else emptyStore\">\r\n <div class=\"store-section\">\r\n <div class=\"d-flex align-items-center store-item\">\r\n <span class=\"store-icon\">\uD83C\uDFEA</span>\r\n <div class=\"store-details\">\r\n <div class=\"store-text\">\r\n <span class=\"store-label\">Nearest Store - </span>\r\n <span class=\"store-name\">{{ storeDetails?.nearbyStore?.name | titlecase}}</span>\r\n <!-- <span class=\"store-distance\"> (4km)</span> -->\r\n </div>\r\n <!-- <div class=\"availability-section\">\r\n <span class=\"availability-badge\">\u23F0 AVAILABLE BY 28 JUN</span>\r\n </div> -->\r\n <!-- <div class=\"other-stores-text\">\r\n Also Available in <span class=\"other-stores-link\">18 other stores</span>\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-center w-100\">\r\n <button class=\"find-store-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(1)\" (click)=\"onFindInStore(storeDetails?.nearbyStore?.storeId)\">FIND IN\r\n STORE</button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #emptyStore>\r\n <div class=\"delivery-section\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"delivery-icon\">\uD83C\uDFEA</span>\r\n <span class=\"delivery-text\">No Stores are available</span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <!-- Try At Home Section -->\r\n <div class=\"try-home-section\">\r\n <div class=\"d-flex align-items-start try-home-item\">\r\n <span class=\"home-icon\">\uD83C\uDFE0</span>\r\n <div class=\"try-home-details\">\r\n <div class=\"try-home-header\">\r\n <span class=\"try-home-text\">Try At Home</span>\r\n <span class=\"free-text\"> (It's Free)</span>\r\n </div>\r\n <div class=\"home-appointment-text\">Home Appointment <span>Available to try from 29 Jul</span></div>\r\n <!-- <div class=\"appointment-text\">\r\n Home Appointment <span class=\"appointment-available\">Available to try from 28 Jun</span>\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\"d-flex-align-items-center justify-content-center w-100\">\r\n <button class=\"book-appointment-btn\" (click)=\"addToTrialCart()\" *ngIf=\"!isItemAddedAsTrial\">Try at\r\n HOME</button>\r\n <button class=\"book-appointment-btn\" *ngIf=\"isItemAddedAsTrial\">HOME APPOINTMENT BOOKED</button>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-variant\" tabindex=\"-1\" id=\"offcanvasRightVariant\"\r\n aria-labelledby=\"offcanvasRightLabel\">\r\n <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon data-bs-dismiss=\"offcanvas\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n <div class=\"varient-price px-3 pb-2\">\r\n <div class=\"price-text\">Price</div>\r\n <div class=\"d-flex g-3 align-items-center\">\r\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\r\n [innerHTML]='currency'></span>\r\n {{responseData?.price?.discountedPrice}}</div>\r\n <div class=\"price\"\r\n *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\"\r\n [ngClass]=\"{'strike-through': responseData?.price?.discountedPrice}\"><span [innerHTML]='currency'></span>\r\n {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\r\n </div>\r\n </div>\r\n <div class=\"varient-container h-100 p-3\">\r\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n <div class=\"varient-data\">\r\n <div class=\"varient-key\">{{varient.key}}</div>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\r\n [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"confirm-btn w-100 p-3 text-center cursor-pointer\" data-bs-dismiss=\"offcanvas\"\r\n [style.background]=\"data?.styles?.background?.accentColor\" style=\"color: white;\">Confirm\r\n Customization</div>\r\n</div>\r\n\r\n<ng-template #dialogBox>\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header d-flex align-item-center\">\r\n <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n <div class=\"schedule-header d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon (click)=\"matCloseDialog()\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"modal-body h-100\">\r\n <div class=\"row h-100 w-100 video-call-container\">\r\n <div class=\"col-6 h-100\" *ngIf=\"!isMobile\">\r\n <img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/557699c1753779503913freepik-overhead-shot-a-person-holding-a-smartphone-with-a-1029_vmg8GqHj (online-video-cutter.com).gif\"\r\n alt=\"\" class=\"w-100 h-100\" style=\"object-fit: cover;\">\r\n </div>\r\n <div class=\"col-6 position-relative h-100 call-details\">\r\n <!-- Name Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n (input)=\"onInputChange('username')\">\r\n </div>\r\n\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n (input)=\"onInputChange('email')\">\r\n </div>\r\n\r\n <!-- Mobile Number Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n <div class=\"sub-text-call\">IN +91</div>\r\n <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n (input)=\"onInputChange('mobileNumber')\">\r\n </div>\r\n\r\n\r\n <!-- Pincode Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n (input)=\"onInputChange('pincode')\">\r\n </div>\r\n <div class=\"language my-3\">\r\n <div class=\"mini-text mb-2\">Language Preference</div>\r\n <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n <ng-container *ngFor=\"let lang of languages\">\r\n <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectedLang = lang\"\r\n [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\r\n {{lang}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n <div class=\"input-field my-3\">\r\n <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n </div>\r\n </ng-container>\r\n <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\" [disabled]=\"isSubmitting\">\r\n <ng-container *ngIf=\"isSubmitting\">\r\n <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n <span class=\"visually-hidden\">Loading...</span>\r\n </div>\r\n SCHEDULING...\r\n </ng-container>\r\n <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n <div (click)=\"scheduleVideoCall()\" class=\"d-flex align-items-center\">\r\n <mat-icon>video_call</mat-icon> \r\n SCHEDULE A VIDEO CALL\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"scheduled\">\r\n <mat-icon>check_circle</mat-icon> \r\n SCHEDULED SUCCESSFULLY\r\n </ng-container>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-small overflow-scroll\" tabindex=\"-1\" id=\"offcanvasRightPriceBreakup\">\r\n <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon data-bs-dismiss=\"offcanvas\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n <div class=\"varient-price p-10-20\">\r\n <div class=\"price-break-header\">{{responseData?.name}}</div>\r\n </div>\r\n <div class=\"price-breakup h-100 w-100\">\r\n <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n <div class=\"price-container mb-3 p-10-20\">\r\n <div class=\"price-container-header\">\r\n {{ ele.materialType + \" BREAKUP\" }}\r\n </div>\r\n <div class=\"row w-100 header-row\">\r\n <div class=\"col-3 text-center\">COMPONENT</div>\r\n <div class=\"col-3 text-center\">RATE</div>\r\n <div class=\"col-3 text-center\">WEIGHT</div>\r\n <div class=\"col-3 text-center\">FINAL VALUE</div>\r\n </div>\r\n <div class=\"row w-100 value-row\">\r\n <div class=\"col-3 text-center\">{{ ele.materialPurity | titlecase }}</div>\r\n <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.primaryMaterialWeight, ele.materialPrice) |\r\n number:'1.2-2' }}</div>\r\n <div class=\"col-3 text-center\">{{ ele.primaryMaterialWeight + \" grams\" }}</div>\r\n <div class=\"col-3 text-center total\">\u20B9{{ ele.materialPrice | number:'1.2-2' }}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"price-container mb-3 p-10-30 py-0 border-unset\">\r\n <div class=\"row w-100 summary-row\">\r\n <div class=\"col-6 text-start\">Making Charges</div>\r\n <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}\r\n </div>\r\n </div>\r\n <div class=\"row w-100 summary-row\">\r\n <div class=\"col-6 text-start\">Tax Amount</div>\r\n <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}\r\n </div>\r\n </div>\r\n <div class=\"row w-100 summary-row\">\r\n <div class=\"col-6 text-start\">Total Amount</div>\r\n <div class=\"col-6 text-end total\">\r\n \u20B9{{(responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) |\r\n number:'1.2-2'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n\r\n<ng-template #ReviewsSection>\r\n <div class=\"w-100 row review-section mt-3\" [style.background]=\"getRGBA(styles?.background?.accentColor, 10)\"\r\n *ngIf=\"reviewsData && reviewsData.length > 0\">\r\n <div class=\"col-md-3 col-sm-12\">\r\n <div class=\"cust-header\">Customer Reviews</div>\r\n <div class=\"d-flex gap-3 mb-1\">\r\n <ng-container *ngIf=\"responseData?.averageRating\">\r\n <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n </ng-container>\r\n <span class=\"rating-text\">{{responseData?.averageRating | number:'1.1-2'}} out of 5</span>\r\n </div>\r\n <div class=\"d-flex mb-3\">{{responseData?.totalReviewCount + \" ratings\"}}</div>\r\n <div class=\"ratings-percentage\">\r\n <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\r\n <div class=\"percentage d-flex align-items-center gap-2 mb-2\">\r\n <span>{{rating + \" star\"}}</span>\r\n <div class=\"w-50 bar\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div [style.width.%]=\"getPercentage(rating)\"\r\n [style.backgroundColor]=\"data?.styles?.background?.accentColor\" class=\"h-100\"></div>\r\n </div>\r\n <span class=\"percentage-text\">{{getPercentage(rating) + \"%\"}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-9 col-sm-12\">\r\n <div class=\"review-header\">Latest Reviews</div>\r\n <div class=\"review-body d-flex flex-column gap-3\">\r\n <ng-container *ngFor=\"let review of reviewsData\">\r\n <div class=\"review-container w-75\">\r\n <div class=\"review-name gap-2 my-2 d-flex align-items-center\">\r\n <img src=\"https://m.media-amazon.com/images/S/amazon-avatars-global/default.png\" alt=\"\"\r\n class=\"width-30 h-25 mr-2\">\r\n <span>{{review?.userName ?? \"-\"}}</span>\r\n </div>\r\n <ng-container *ngIf=\"review?.rating\">\r\n <p-rating [(ngModel)]=\"review.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n </ng-container>\r\n <div class=\"review-desc\">\r\n {{review?.review ?? \"-\"}}\r\n </div>\r\n <div class=\"review-img\">\r\n <img [src]=\"img.imgUrl\" alt=\"\" *ngFor=\"let img of review?.reviewImages ?? []\"\r\n (click)=\"showDetailReview(review)\">\r\n <button style=\"display: none;\" data-toggle=\"modal\" data-target=\"#reviewModal\"\r\n id=\"openReviewDetail\"></button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"w-75 see-more py-3\" (click)=\"loadMoreReviews()\" *ngIf=\"(reviewsData?.length ?? 0) > 3\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">\r\n See more reviews <span>></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" role=\"dialog\"\r\n aria-hidden=\"true\">\r\n <div class=\"modal-dialog modal-dialog-centered video-modal\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-body\" style=\"height: 100%;\">\r\n <video controls muted playsinline style=\"width: 100%; height: 100%;\">\r\n <source\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/371647c1753962084265clideo_editor_48bc93c24e18470888c661bb09e437da (online-video-cutter.com).mp4\"\r\n type=\"video/mp4\">\r\n Your browser does not support the video tag.\r\n </video>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"modal fade\" id=\"reviewModal\" tabindex=\"-1\" aria-labelledby=\"reviewModalLabel\" role=\"dialog\"\r\n aria-hidden=\"true\">\r\n <div class=\"modal-dialog review-modal\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h1 class=\"modal-title fs-5\"></h1>\r\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n </div>\r\n <div class=\"modal-body\">\r\n <div class=\"detail-review-container\">\r\n <div class=\"image-section\">\r\n <div class=\"product-image\">\r\n <div class=\"backward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex-1\"\r\n *ngIf=\"currentImageIndex > 0\">\u25BC</div>\r\n <img [src]=\"selectedReview?.reviewImages?.[currentImageIndex]?.imgUrl\" alt=\"\">\r\n <div class=\"forward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex+1\"\r\n *ngIf=\"currentImageIndex < selectedReview?.images?.length - 1\">\u25B2</div>\r\n <!-- <div class=\"earbuds-container\">\r\n <div class=\"charging-case\"></div>\r\n <div class=\"earbud left\"></div>\r\n <div class=\"earbud right\"></div>\r\n </div> -->\r\n </div>\r\n <!-- <div class=\"navigation-arrows\">\r\n </div> -->\r\n </div>\r\n\r\n <div class=\"review-section\">\r\n <div class=\"reviewer-header\">\r\n <div class=\"reviewer-avatar\">\uD83D\uDC64</div>\r\n <div class=\"reviewer-name\">{{selectedReview?.userName ?? \"-\"}}</div>\r\n </div>\r\n\r\n <div class=\"detail-rating\" *ngIf=\"selectedReview?.rating\">\r\n <p-rating [(ngModel)]=\"selectedReview.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n </div>\r\n\r\n <div class=\"review-date\">\r\n Reviewed in India on 24 July 2025\r\n </div>\r\n\r\n <div class=\"review-text\">\r\n {{selectedReview?.review ?? \"-\"}}\r\n </div>\r\n\r\n <div class=\"images-section\">\r\n <h3>Images in this review</h3>\r\n <div class=\"review-images\">\r\n <div class=\"review-image\" [ngClass]=\"{'selected': currentImageIndex == i}\"\r\n *ngFor=\"let img of selectedReview?.reviewImages ?? [];let i = index\" (click)=\"currentImageIndex = i\">\r\n <img [src]=\"img.imgUrl\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".product-desc{display:flex}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.strike-through{text-decoration:line-through;color:#d3d3d3}::ng-deep .smooth-panel .p-panel-header{cursor:pointer;background:transparent;border:unset;font-size:18px;font-weight:700;padding:0}::ng-deep .smooth-panel .p-panel-content{border:unset;padding:0}.jewel-container{border-radius:12px;box-shadow:#63636333 0 2px 8px}.jewel-header{padding:8px 10px;border-radius:12px 12px 0 0;font-size:15px;font-weight:700;color:#4f3267}.br-p{border-radius:0 0 12px 12px;padding:10px 0}.row-header{font-size:13px;font-weight:700;color:#4f3267}.row-content{color:#4e555e}.jewellery-table-container{border-radius:12px}.jewellery-table{width:100%;border-collapse:collapse;border:1px solid #ddd;transition:all .3s ease}.jewellery-table th,.jewellery-table td{border:1px solid #ddd;padding:12px;text-align:left;transition:background-color .2s ease}.material-header td{background-color:#f8f9fa;font-weight:700;font-size:16px}.column-header{background-color:#f1f1f1}.column-header th{font-weight:600}.material-row:hover{background-color:#f5f5f5}.charges-header th,.total-header th{background-color:#eaeaea;font-weight:700}.total-row td{font-weight:700;font-size:18px;background-color:#f8f8f8}@media screen and (max-width: 600px){.jewellery-table{font-size:14px}.jewellery-table th,.jewellery-table td{padding:8px}}.share-icon{border:1px solid;border-radius:8px;padding:5px;height:43px;width:40px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer}.prod-img-block{height:100%;display:flex;gap:5px}.header-text{font-size:17px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:1% 3%;border-radius:8px;letter-spacing:.5px}.pricebreakup-btn mat-icon{font-size:18px;display:flex;align-items:center}.img-list{display:flex;gap:5px;max-height:460px}.img-list img{height:100px;width:100px;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:100%;height:500px;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.price{font-weight:600;font-size:24px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:1px solid;align-items:center;gap:15px;height:44px;width:75%;justify-content:space-between;border-radius:12px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.fc{font-size:17px;font-weight:700}.trim-text{-webkit-line-clamp:3!important}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;margin-top:.5rem}.tab-group{display:flex;gap:10px}.tab{font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.discount-price{font-size:1.4rem}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#f7f7f7;padding:11px 20px;border-radius:12px;margin-top:unset!important;width:70%!important;border:1px solid #d3d3d347}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#f7f7f7;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:7px 25px;cursor:pointer;font-weight:600}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:5px;height:44px!important;justify-content:space-between;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:14px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.w-h-40{width:40px!important;height:40px!important}.product-detail{margin-top:0;height:100vh}.above-height{height:90vh;max-height:100vh;overflow-y:scroll}.height{height:100vh;overflow-y:auto}.mobile-footer{display:none}video{border-radius:18px}@media (min-width: 1024px){.zoom:hover{transform:scale(1.2);transition:transform .2s ease-in-out;overflow:hidden}.above-height{width:100%;display:flex;margin-top:25px}.product-detail{padding:2%}.product-heading{font-size:20px;font-weight:600;margin-top:5px}.prod-img-block{height:100%;display:flex;flex-direction:column-reverse;justify-content:start;gap:5px}}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:100000001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.product-desc{font-size:13px}.brief-desc{font-size:16px;margin-top:unset!important}.total-container{padding-top:10px!important;padding-bottom:4rem!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important;height:348px}.item-img img{width:100%;height:348px!important}.display-none{display:none}.prod-img-block{flex-direction:column;gap:5px}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.product-detail{margin-top:20px;overflow-x:hidden}.input-field{margin-top:.7rem!important;margin-bottom:.7rem!important}.prod-desc{margin-top:20px}.video-call-container{margin:0!important}.product-img{height:220px}.call-details{width:100%!important;padding:3%!important}.send-btn{padding:.5rem 1rem!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.favourite:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.review-sec :is(input,textarea){width:100%!important}.height{width:100%;height:auto}.above-height{padding:1%;height:unset!important}.product-heading{font-size:23px;font-weight:600}.discount-price{font-size:1.7rem!important}.header-text{font-size:20px!important}}.send-btn{font-size:14px!important;padding:1rem;display:flex;align-items:center;justify-content:center;text-transform:uppercase;font-weight:600}.send-btn mat-icon{height:20px;width:20px;font-size:18px}.favourite .mat-icon{min-height:40px;min-width:40px;font-size:25px;display:flex;align-items:center;justify-content:center;border-radius:5px;cursor:pointer}.favourite:hover,.share-product:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.border-solid{border:1px solid;border-radius:8px}a{text-decoration:none}.brief-desc{font-size:14px;color:#4e555e}.total-container{height:100vh;position:relative;display:block!important;overflow:scroll}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin:unset!important}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}.above-height{width:100%;padding:2%;display:flex;flex-direction:column}.product-detail{padding:0vw 42vw 0vw 2vw}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:911px){.product-detail{padding:0% 34% 0% 2%}.above-height{display:flex}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:1024px){.product-detail{padding:0% 2%}.above-height{display:flex}.product-headig{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}.mb-15{margin-bottom:15px}@media (min-width: 1400px){.container{max-width:unset;width:95%;height:100vh;overflow-y:auto}}.width-max{width:max-content}.width-34{width:33.3%!important}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}.f-18{font-size:18px}.offcanvas-variant{border-radius:30px 0 0 30px}.varient-header,.varient-price{background:#f7f7f7}.varient-header{border-radius:30px 0 0}.confirm-btn{border-radius:0 0 0 30px;position:absolute!important;bottom:0!important}.style2-container{border:1px solid;border-radius:12px;margin:0}.varient-item{border-right:1px solid;align-content:center}.variant-head{font-size:12px;color:#33363e}.varient-data{margin-bottom:25px;border-bottom:1px solid black;padding-bottom:25px}.variant-value{font-size:.9rem;color:#000}.custom-text{border-radius:0 8px 8px 0;font-size:.9rem;font-weight:600}.br-50{border-radius:50%}.w-15{width:22%!important}.scroll-wrap{flex-wrap:nowrap}.brand-text{word-wrap:break-word;white-space:normal;font-size:12px;font-weight:600;line-height:20px}.video-container{border:1px solid rgb(240,240,240);margin:10px 0;border-radius:12px}.video-head-text{font-size:16px;font-weight:700}.sub-text{font-size:11px;color:#6f7377;margin-bottom:10px}.sch-btn{font-size:1.2rem!important;color:#fff;padding:3px 0;margin-top:5px}.tax-text{font-size:.7rem;color:#6f7377}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.delivery-container{margin:35px 0 15px;background-color:transparent}.delivery-title{font-size:16px;font-weight:600;margin:0 0 12px;line-height:1.2}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:10px;margin-bottom:15px;width:100%}.location-icon{width:20px;height:20px;background-color:#374151;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.location-icon:before{content:\"\";width:8px;height:8px;background-color:#fff;border-radius:50%;position:absolute}.postal-code-input{font-size:12px;font-weight:600;letter-spacing:.5px;border:none;outline:none;background:transparent;width:90%}.postal-code-input::placeholder{font-weight:500}.locate-btn{background:none!important;border:none!important;font-weight:500;font-size:12px!important;padding:0!important;box-shadow:none!important;width:20%!important}.gps{font-size:17px}.locate-btn:focus{box-shadow:none!important}.delivery-section{margin-bottom:15px;border:1px solid rgb(240,240,240);padding:10px;border-radius:12px}.delivery-icon{font-size:18px;color:#ec4899;margin-right:14px;width:20px}.delivery-text{font-size:14px;font-weight:700}.store-section{border:1px solid rgb(240,240,240);padding:10px;border-radius:12px;margin-bottom:15px}.store-item{margin-bottom:11px}.store-icon{font-size:18px;color:#f97316;margin-right:14px;margin-top:2px;width:20px}.store-details{flex:1}.store-text{font-size:14px}.store-name{font-weight:700}.availability-section{margin-bottom:6px}.availability-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:#d97706;background-color:#fef3c7;padding:4px 8px;border-radius:12px;letter-spacing:.5px}.other-stores-text{font-size:14px;color:#6b7280;line-height:1.4}.other-stores-link{color:#6b46c1;cursor:pointer;text-decoration:underline}.other-stores-link:hover{color:#553c9a}.find-store-btn{width:100%!important;padding:8px 20px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px}.try-home-section{border-radius:12px;padding:10px;border:1px solid rgb(240,240,240)}.try-home-item{margin-bottom:10px;padding:0}.home-icon{font-size:18px;color:#6b46c1;margin-right:14px;margin-top:2px;width:20px}.try-home-details{flex:1}.try-home-text{font-size:14px;font-weight:700;color:#374151}.free-text{font-size:14px;color:#6b7280}.appointment-text{font-size:14px;color:#6b7280;line-height:1.4}.appointment-available{font-weight:500;color:#374151}.book-appointment-btn{background:linear-gradient(135deg,#8b5cf6,#a855f7);color:#fff;border:none;padding:8px 20px;border-radius:12px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px;transition:all .2s ease}.book-appointment-btn:hover{background:linear-gradient(135deg,#7c3aed,#9333ea);transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}@media (max-width: 480px){.container{display:flex;align-items:center;flex-direction:column}.location-section{padding:12px 0}.try-home-section{padding:20px}}.w-90{width:90%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.w-12{width:12%!important}.w-88{width:88%!important}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.border-unset{border:unset!important}.error-border{border:2px solid #dc3545!important}.offcanvas-small{height:72vh;top:25%;width:35%;border-radius:50px 0 0 50px}.rating{width:max-content;border:1px solid;border-radius:20px;padding:0 10px;margin-bottom:.5rem}.rating-no{padding-right:7px;margin:0;border-right:1px solid;font-size:.75rem}.p-10-20{padding:10px 30px}.price-break-header{font-size:19px;font-weight:600}.price-container{border-bottom:1px solid rgb(233,233,233)}.price-container-header{font-size:14px;font-weight:600;color:#333}.total-ratings{font-size:.75rem}.header-row .col-3{font-size:12px;font-weight:500;color:#666}.value-row .col-3{font-size:14px;font-weight:400;color:#333}.value-row .col-3.total{font-weight:600}.summary-row .col-6{font-size:15px;font-weight:500;color:#333;padding:unset}.summary-row .col-6.total{font-weight:600;padding-right:10px}.summary-row{padding:0 42px}.error-border{border:2px solid #e74c3c!important;box-shadow:0 0 5px #e74c3c4d!important}.form-control,.input-field input{transition:border-color .3s ease,box-shadow .3s ease}.error-border:focus{border-color:#e74c3c!important;box-shadow:0 0 8px #e74c3c80!important}.input-field input:focus{transform:scale(1.02)}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:-.125em;border:.125em solid currentcolor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}.spinner-border-sm{width:.875rem;height:.875rem;border-width:.125em}@keyframes spinner-border{to{transform:rotate(360deg)}}.me-2{margin-right:.5rem}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.width-30{width:30px!important}.review-header{font-size:20px;font-weight:600}.review-desc{font-weight:500}.see-more{font-weight:600;cursor:pointer;border-top:1px solid #d1d1d1}.see-more span{font-size:12px}.cust-header{font-size:24px}.bar{border:1px solid;height:20px;border-radius:5px;overflow:hidden}.bar div{border-radius:2px}.parent-container{height:100%;width:100%;display:flex}.home-appointment-text{font-size:.8rem;color:#4e555e}.home-appointment-text span{font-weight:600}.video-call-img{height:120px;margin:0;padding:0;border-radius:45px}.video-call-img img{border-top-left-radius:12px;border-bottom-left-radius:12px}.discount{background:#fff3f2;padding:15px 15px 20px;margin-top:14px;border-radius:8px;display:flex;flex-direction:column;gap:5px;position:relative}.discount p{margin-bottom:0;color:#4f3267;font-weight:700;font-size:1rem}.discount .offer{color:#eb4f5c}.discount:before{content:\"\";display:block;height:44px;width:4px;background:#eb4f5c;position:absolute;left:0;top:16px;border-top-right-radius:20px;border-bottom-right-radius:20px}.metal-purity{display:flex;flex-direction:column;gap:10px}.scrollable-content{height:100%;max-height:95vh;overflow-y:auto}.style-2-img{max-height:70%;height:100%!important}.ring-size-video{background:#f0ebff;display:flex;justify-content:space-between;align-items:center;height:45px;padding:12px;border-radius:10px;margin-top:20px;margin-bottom:20px}.ring-size-video .text{color:#4f3267;font-size:.9rem}.ring-size-video .learn-how{color:#de57e9;font-weight:700;font-size:1rem;display:flex;gap:5px;align-items:center;cursor:pointer}.ring-size-video .learn-how mat-icon{font-size:20px;display:flex;align-items:center}.ring-size-video p{margin-bottom:0}.video-modal{height:90vh!important;width:90vw!important;max-width:none}.video-modal .modal-body{padding:0}.review-section{border-radius:10px;padding:15px}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.detail-review-container{display:flex;max-width:1200px;margin:0 auto;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px #0000001a}.image-section{flex:1;background:#000;position:relative;min-height:400px}.product-image{width:100%;height:100%;object-fit:cover;background:linear-gradient(135deg,#e8e8e8,#d0d0d0);display:flex;align-items:center;justify-content:center;max-height:400px;position:relative}.product-image img{height:100%;width:100%;object-fit:contain}.earbuds-container{position:relative;width:300px;height:200px}.charging-case{width:200px;height:120px;background:linear-gradient(145deg,#f0f0f0,#e0e0e0);border-radius:25px;position:absolute;top:40px;left:50px;box-shadow:inset 0 4px 8px #0000001a}.charging-case:before{content:\"\";position:absolute;inset:10px;background:linear-gradient(145deg,#e8e8e8,#d8d8d8);border-radius:15px;box-shadow:inset 0 2px 4px #0000001a}.earbud{position:absolute;width:45px;height:15px;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border-radius:8px;box-shadow:0 2px 4px #0003}.earbud:before{content:\"noise\";position:absolute;top:2px;left:50%;transform:translate(-50%);font-size:6px;color:#888;font-weight:300}.earbud.left{top:70px;left:80px}.earbud.right{top:90px;left:130px}.earbud.right:before{color:#ff6b35}.review-section{flex:1;padding:30px;background:#fafafa}.reviewer-header{display:flex;align-items:center;margin-bottom:15px}.reviewer-avatar{width:40px;height:40px;background:#ccc;border-radius:50%;margin-right:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#666}.reviewer-name{font-size:16px;font-weight:500;color:#333}.detail-rating{margin:10px 0}.stars{display:flex;gap:2px;margin-bottom:5px}.star{color:#ff9500;font-size:18px}.thumbs{display:flex;gap:5px}.thumb{color:#ff9500;font-size:16px}.review-date{font-size:14px;color:#666;margin:15px 0}.review-text{font-size:16px;line-height:1.5;color:#333;margin-bottom:25px}.images-section h3{font-size:16px;color:#666;margin-bottom:15px;font-weight:500}.review-images{display:flex;gap:10px}.review-image{width:60px;height:60px;background:#ddd;border-radius:6px;border:2px solid #e0e0e0;cursor:pointer;transition:border-color .3s}.review-image img{width:100%;height:100%}.review-image:hover,.review-image.selected{border-color:#007185}.navigation-arrows{position:absolute;top:20px;right:20px;display:flex;flex-direction:column;gap:10px}.arrow{width:40px;height:40px;background:#fffc;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:#666;transition:background-color .3s;position:absolute;transform:rotate(90deg)}.backward-arrow{left:10px}.forward-arrow{right:10px}.arrow:hover{background:#fff}@media (max-width: 768px){.review-container{flex-direction:column}.image-section{min-height:300px}.review-section{padding:20px}}.review-modal{max-width:none;width:70vw}.review-modal .modal-body{padding:0}@media screen and (max-width: 475px){.offcanvas-small{height:100vh;width:100%;top:0}.review-modal{margin:0;height:100%;width:100%}.detail-review-container{flex-direction:column;height:100%}.product-image{max-height:289px}.image-section{min-height:289px}.video-modal{margin:0;height:100vh!important;width:100vw!important;overflow:hidden}}.modal{z-index:100000033}\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.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i4.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: NgxImageZoomModule }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i7$3.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
|
18677
18531
|
}
|
|
18678
18532
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductDescComponent, decorators: [{
|
|
18679
18533
|
type: Component,
|
|
@@ -18703,11 +18557,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
18703
18557
|
CornerDirective,
|
|
18704
18558
|
ButtonEditorDirective,
|
|
18705
18559
|
SpacingHorizontalDirective
|
|
18706
|
-
], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n\r\n <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n </div> -->\r\n <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoLayout]=\"styles?.layout\" #container>\r\n <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\r\n (click)=\"routeToHome()\">Home</a> /\r\n <span>{{ responseData?.name | titlecase }}</span>\r\n </div>\r\n <div class=\"row h-100 w-100 h-100\" #aboveHeight class=\"above-height\"\r\n [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\r\n <div class=\"col-lg-7 col-sm-12 h-100 height\" #imageSection>\r\n <div class=\"prod-img-block\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-4 col-sm-12 h-100\" #detailSection>\r\n <ng-container *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngIf=\"toShowInJewellery\">\r\n <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"ecomConfigs?.videoCallEnabled\">\r\n <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"ecomConfigs?.brandPromiseEnabled\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </ng-container>\r\n\r\n\r\n\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\r\n </ng-container>\r\n\r\n <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\r\n [innerHTML]=\"responseData.brief\"></div> -->\r\n <div class=\"product-sku\">\r\n <!-- <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div> -->\r\n <!-- <div\r\n *ngIf=\"responseData?.itemCategorisation?.itemCategories && (responseData?.itemCategorisation?.itemCategories?.length || 0) > 0\">\r\n Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\r\n titlecase}} <ng-container\r\n *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n </a></div> -->\r\n <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n </span></div>\r\n </div>\r\n <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\r\n <!-- <ng-container>\r\n <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\r\n </ng-container> -->\r\n </div>\r\n </div>\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"ReviewsSection\"></ng-container>\r\n </ng-container>\r\n </section>\r\n <!-- <ng-container *ngIf=\"relatedProductData?.length\">\r\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\r\n [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n </ng-container>\r\n <ng-container *ngIf=\"recentViewItemList?.length\">\r\n <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\r\n [isRelatedProduct]=\"true\"></simpo-featured-products>\r\n </ng-container> -->\r\n <!-- <ng-container>\r\n <simpo-customer-review [data]=\"data\"></simpo-customer-review>\r\n </ng-container> -->\r\n\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </section>\r\n</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n\r\n<div class=\"mobile-footer\">\r\n <div class=\"icons\">\r\n <div (click)=\"goToCart()\">\r\n <mat-icon>shopping_cart</mat-icon>\r\n </div>\r\n <div>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n </div>\r\n </div>\r\n <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\">Out of\r\n Stock</button>\r\n <div class=\"quantity\" *ngIf=\"responseData?.quantity && !ecomConfigs?.videoCallEnabled\"\r\n [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\r\n </div>\r\n <button *ngIf=\"responseData?.quantity && ecomConfigs?.videoCallEnabled\" class=\"send-btn w-100\"\r\n [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\r\n <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\r\n <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\r\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\"\r\n (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ReviewSection>\r\n <div class=\"review-sec\">\r\n <div class=\"title\">Customer Review</div>\r\n <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\r\n <span>Be the first to write a review</span>\r\n <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\r\n Review' : 'Cancel Review'}}</button>\r\n <ng-container *ngIf=\"showReview\">\r\n <hr />\r\n <div class=\"user-review\">\r\n <div class=\"title\">Write a review</div>\r\n <span class=\"secondary-text\">RATING</span>\r\n <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\r\n <div>\r\n <span class=\"secondary-text\">Review Title</span>\r\n <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\r\n </div>\r\n <div>\r\n <span class=\"secondary-text\">Review</span>\r\n <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\r\n </div>\r\n <div class=\"review-action-btn\">\r\n <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\r\n <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"addProductReview()\"\r\n [disabled]=\"productReview == 0 && reviewTitle?.length == 0 && reviewDescription?.length == 0\">Submit\r\n review</button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n<ng-template #SocialIcons>\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-socia-icons>\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 #ActionBtn>\r\n <div class=\"button-parent\">\r\n <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\">Out of\r\n Stock</button>\r\n <div class=\"quantity\" *ngIf=\"responseData?.quantity && !ecomConfigs?.videoCallEnabled\"\r\n [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\r\n </div>\r\n <button *ngIf=\"responseData?.quantity && ecomConfigs?.videoCallEnabled\" class=\"send-btn w-100\"\r\n [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\r\n [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\r\n (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\r\n <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\r\n <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75\">\r\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\"\r\n (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && !IsEcommerce\" class=\"w-75\">\r\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\" (click)=\"raiseLead()\"><mat-icon style=\"height:14px !important\">\r\n message</mat-icon>Notify Me</button>\r\n </div>\r\n <div class=\"favourite border-solid\" *ngIf=\"IsEcommerce\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n </div>\r\n <div class=\"share-product\">\r\n <mat-icon class=\"share-icon\" (click)=\"shareProduct()\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n [style.borderColor]=\"data?.styles?.background?.accentColor\">share</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #variants>\r\n <ng-container *ngIf=\"data?.styles?.customization == 'Style1'\">\r\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n <div class=\"mb-15\">\r\n <div class=\"varient-key\">{{varient.key}}</div>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\r\n [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"data?.styles?.customization == 'Style2' && selectedVarient.size > 0\">\r\n <ng-container>\r\n <div class=\"row mt-2 style2-container w-100\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div *ngFor=\"let item of selectedVarient | keyvalue\" class=\"px-3 py-2 varient-item\"\r\n [class]=\"getClass(selectedVarient)\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"variant-head\">{{item.key | titlecase}}</div>\r\n <div class=\"variant-value text-start fw-600\">\r\n {{item.value |\r\n titlecase}}</div>\r\n </div>\r\n <div class=\"cursor-pointer p-0\" [class]=\"getClass(selectedVarient)\">\r\n <div class=\"custom-text d-flex align-items-center justify-content-center h-100 p-2\" data-bs-toggle=\"offcanvas\"\r\n data-bs-target=\"#offcanvasRightVariant\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">CUSTOMISE\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc>\r\n <div class=\"d-flex flex-column\" style=\"margin-top: 15px;\">\r\n <div class=\"rating d-flex justify-content-center gap-2 mb-3\"\r\n *ngIf=\"responseData?.averageRating && responseData?.totalReviewCount\"\r\n [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"rating-no my-1\">{{(responseData?.averageRating | number:'1.1-2')}}\u2B50</div>\r\n <div class=\"total-ratings my-1\">{{responseData?.totalReviewCount == 1 ? '1 Rating' :\r\n getRatings(responseData?.totalReviewCount) + \" \" + \"ratings\"}}</div>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.sellingPrice}\"\r\n *ngIf=\"responseData?.price?.sellingPrice && responseData.price.sellingPrice > 0\"><span\r\n [innerHTML]='currency'></span>\r\n {{responseData?.price?.sellingPrice}}</div>\r\n <div class=\"price\"\r\n [ngClass]=\"{'strike-through': getDifference(responseData?.price?.discountedPrice, responseData?.price?.value) > 2}\"\r\n *ngIf=\"getDifference(responseData?.price?.discountedPrice, responseData?.price?.value) > 2\">\r\n <span [innerHTML]='currency'></span>\r\n {{responseData?.price?.value | number:'1.0-0'}}\r\n </div>\r\n </div>\r\n <div class=\"tax-text\">(MRP Inclusive all taxes)</div>\r\n </div>\r\n <div class=\"heading-large trim-text\" class=\"product-heading\">{{responseData?.name}}</div>\r\n <ng-container *ngIf=\"toShowInJewellery\">\r\n <div class=\"discount\">\r\n <p>Flat 30% off on Diamond Prices</p>\r\n <p class=\"offer\">Offer Expires in 4 days</p>\r\n </div>\r\n <div class=\"ring-size-video\">\r\n <p class=\"text\">Not sure about the ring size?</p>\r\n <p class=\"learn-how\" data-toggle=\"modal\" data-target=\"#exampleModal\">Learn How\r\n <mat-icon>play_circle_outline</mat-icon>\r\n </p>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #descriptors>\r\n <div class=\"row prod-desc mt-2\">\r\n <div>\r\n <div class=\"product-header d-flex align-items-center justify-content-between\">\r\n <span class=\"header-text\" *ngIf=\"responseData?.descriptor || responseData?.materials\">Product Details</span>\r\n <div class=\"pricebreakup-btn d-flex align-items-center justify-content-center cursor-pointer\"\r\n *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\" data-bs-toggle=\"offcanvas\"\r\n data-bs-target=\"#offcanvasRightPriceBreakup\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\r\n <mat-icon>add</mat-icon> PRICE BREAKUP\r\n </div>\r\n </div>\r\n <div class=\"description\">\r\n <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\r\n [innerHTML]=\"responseData?.descriptor?.name\" [style.background]=\"data?.styles?.background?.color\"></div>\r\n </div>\r\n <ng-container *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\">\r\n <div class=\"jewellery-table-container\">\r\n <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n <div class=\"jewel-container mt-2\">\r\n <div class=\"jewel-header\" [style.background]=\"getHeaderColor(ele.materialType)\">\r\n {{ele?.materialName | titlecase}}\r\n </div>\r\n <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor(ele.materialType)\">\r\n <div class=\"col-6 metal-purity\">\r\n <div class=\"row-header\">\r\n Net Weight/{{ele?.unit | titlecase}}\r\n </div>\r\n <div class=\"row-content\">\r\n {{ele.primaryMaterialWeight + \" \" + (ele?.unit | titlecase)}}\r\n </div>\r\n </div>\r\n <div class=\"col-6 metal-purity\">\r\n <div class=\"row-header\">\r\n Purity\r\n </div>\r\n <div class=\"row-content\">\r\n {{ele.purity |\r\n titlecase}}\r\n </div>\r\n </div>\r\n <!-- <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Price/Gram\r\n </div>\r\n <div class=\"row-content\">\r\n \u20B9{{ getPricePerGram(ele.primaryMaterialWeight,ele.materialPrice) |\r\n number:'1.2-2'}}\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Value\r\n </div>\r\n <div class=\"row-content\">\r\n \u20B9{{ele.materialPrice | number:'1.2-2'}}\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- <div class=\"jewel-container mt-2\">\r\n <div class=\"jewel-header\" [style.background]=\"getHeaderColor('Making Charges')\">\r\n Making Charges\r\n </div>\r\n <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor('Making Charges')\">\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Net Weight\r\n </div>\r\n <div class=\"row-content\">\r\n {{responseData?.baseWeight}} </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Making Charge %\r\n </div>\r\n <div class=\"row-content\">\r\n {{responseData?.makingChargePercentage}}\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Value\r\n </div>\r\n <div class=\"row-content\">\r\n \u20B9{{responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <!-- <div class=\"tab-group\">\r\n <div class=\"tab\" data-bs-toggle=\"collapse\" href=\"#collapseExample\" >Description</div>\r\n </div>\r\n <div style=\"margin-top: 10px;\" class=\"body-large collapse\" id=\"collapseExample\" *ngIf=\"responseData?.descriptor\"\r\n [innerHTML]=\"responseData?.descriptor?.name\"></div> -->\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n <ng-container *ngIf=\"!varientLoading && (isMobile || data?.styles?.gridStyle == 'Style1')\">\r\n <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n <ng-container *ngFor=\"let img of itemImages\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\r\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n </ng-container>\r\n </div>\r\n <div class=\"item-img\">\r\n <ng-container *ngIf=\"currentImg\">\r\n\r\n <!-- <mat-icon class=\"share-icon\" (click)=\"shareProduct()\">share</mat-icon> -->\r\n <ng-container *ngIf=\"!isMobile\">\r\n <img [src]=\"currentImg\" class=\"img zoom\" style=\"height: 100%; width: 100%;\" [simpoCorner]=\"styles?.corners\">\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\" [simpoCorner]=\"styles?.corners\" class=\"zoom\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"!currentImg\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\r\n [simpoCorner]=\"styles?.corners\">\r\n </ng-container>\r\n </div>\r\n <div class=\"img-list w-100\" *ngIf=\"screenWidth <= 500\">\r\n <ng-container *ngFor=\"let img of itemImages\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n alt=\"\" class=\"img zoom\" (click)=\"changeImg(img.imgUrl)\"\r\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!varientLoading && (!isMobile && data?.styles?.gridStyle == 'Style2')\">\r\n <div class=\"row h-100 mt-0 w-100\">\r\n <ng-container *ngIf=\"itemImages?.length == 0\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\" class=\"img\"\r\n [simpoCorner]=\"styles?.corners\" class=\"col-12 h-100 p-0\">\r\n </ng-container>\r\n <ng-container *ngFor=\"let img of itemImages\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n alt=\"\" class=\"img col-6 h-75 p-1 style-2-img\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\r\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\"\r\n [class.h-100]=\"screenWidth <= 500\" [class.w-100]=\"itemImages?.length == 1\"\r\n [class.h-100]=\"itemImages?.length == 1\">\r\n </ng-container>\r\n </div>\r\n\r\n </ng-container>\r\n\r\n\r\n\r\n\r\n <div class=\"item-img\" *ngIf=\"varientLoading\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '100%',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #branding>\r\n <div class=\"row w-100\">\r\n <ng-container *ngFor=\"let brand of brandPromises\">\r\n <div class=\"col-4 d-flex flex-column align-items-center g-2\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"brand?.logoUrl\" alt=\"\" class=\"w-h-40 p-0 br-50\">\r\n <div class=\"brand-text w-100 text-center py-2\">\r\n {{brand?.title | titlecase}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #videoCallSchedule>\r\n <!-- *ngIf=\"ecomConfigs?.videoCallEnabled\" -->\r\n <ng-container>\r\n <div class=\"row w-100 video-container\">\r\n <div class=\"col-4 video-call-img\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/355007c175362077266611289-229221023_small.gif\"\r\n alt=\"\" class=\"w-100 h-100 \">\r\n </div>\r\n <div class=\"col-8 align-content-center\">\r\n <div class=\"video-head-text\">\r\n Live Video Call\r\n </div>\r\n <div class=\"sub-text\">\r\n Join a live video call with our consultants to see your favourite designs up close!\r\n </div>\r\n <button class=\"sch-btn text-center cursor-pointer\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(2)\" [buttonId]=\"getButtonId(2)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(2)\" (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\r\n Schedule a Video Call\r\n </button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #DeliverySection>\r\n <div class=\"delivery-container\">\r\n <h2 class=\"delivery-title\">Delivery, Stores & Trial</h2>\r\n\r\n <!-- Location Section -->\r\n <div class=\"location-section\">\r\n <div class=\"location-container d-flex align-items-center justify-content-between\"\r\n [style.borderColor]=\"styles?.background?.accentColor\">\r\n <div class=\"d-flex align-items-center w-90\">\r\n <div class=\"d-flex mx-1\"><mat-icon\r\n class=\"gps d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" class=\"postal-code-input\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\">\r\n </div>\r\n <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">{{pincode ? 'Change' : 'Locate me'}}</button>\r\n </div>\r\n <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\r\n </div>\r\n <ng-container>\r\n <!-- Free Delivery Section -->\r\n <div class=\"delivery-section\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"delivery-icon\">\uD83C\uDF81</span>\r\n\r\n <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Free\r\n Delivery by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }}</span>\r\n\r\n <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\r\n Order will\r\n Deliver by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }} with a Delivery Charge of\r\n \u20B9 {{ecomConfigs?.deliveryCharges | number:'1.2-2'}}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Nearest Store Section -->\r\n <ng-container\r\n *ngIf=\"storeDetails?.nearbyStore?.name && storeDetails?.nearbyStore?.name?.length > 0;else emptyStore\">\r\n <div class=\"store-section\">\r\n <div class=\"d-flex align-items-center store-item\">\r\n <span class=\"store-icon\">\uD83C\uDFEA</span>\r\n <div class=\"store-details\">\r\n <div class=\"store-text\">\r\n <span class=\"store-label\">Nearest Store - </span>\r\n <span class=\"store-name\">{{ storeDetails?.nearbyStore?.name | titlecase}}</span>\r\n <!-- <span class=\"store-distance\"> (4km)</span> -->\r\n </div>\r\n <!-- <div class=\"availability-section\">\r\n <span class=\"availability-badge\">\u23F0 AVAILABLE BY 28 JUN</span>\r\n </div> -->\r\n <!-- <div class=\"other-stores-text\">\r\n Also Available in <span class=\"other-stores-link\">18 other stores</span>\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-center w-100\">\r\n <button class=\"find-store-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(1)\" (click)=\"onFindInStore(storeDetails?.nearbyStore?.storeId)\">FIND IN\r\n STORE</button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #emptyStore>\r\n <div class=\"delivery-section\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"delivery-icon\">\uD83C\uDFEA</span>\r\n <span class=\"delivery-text\">No Stores are available</span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <!-- Try At Home Section -->\r\n <div class=\"try-home-section\">\r\n <div class=\"d-flex align-items-start try-home-item\">\r\n <span class=\"home-icon\">\uD83C\uDFE0</span>\r\n <div class=\"try-home-details\">\r\n <div class=\"try-home-header\">\r\n <span class=\"try-home-text\">Try At Home</span>\r\n <span class=\"free-text\"> (It's Free)</span>\r\n </div>\r\n <div class=\"home-appointment-text\">Home Appointment <span>Available to try from 29 Jul</span></div>\r\n <!-- <div class=\"appointment-text\">\r\n Home Appointment <span class=\"appointment-available\">Available to try from 28 Jun</span>\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\"d-flex-align-items-center justify-content-center w-100\">\r\n <button class=\"book-appointment-btn\" (click)=\"addToTrialCart()\" *ngIf=\"!isItemAddedAsTrial\">Try at\r\n HOME</button>\r\n <button class=\"book-appointment-btn\" *ngIf=\"isItemAddedAsTrial\">HOME APPOINTMENT BOOKED</button>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-variant\" tabindex=\"-1\" id=\"offcanvasRightVariant\"\r\n aria-labelledby=\"offcanvasRightLabel\">\r\n <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon data-bs-dismiss=\"offcanvas\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n <div class=\"varient-price px-3 pb-2\">\r\n <div class=\"price-text\">Price</div>\r\n <div class=\"d-flex g-3 align-items-center\">\r\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\r\n [innerHTML]='currency'></span>\r\n {{responseData?.price?.discountedPrice}}</div>\r\n <div class=\"price\"\r\n *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\"\r\n [ngClass]=\"{'strike-through': responseData?.price?.discountedPrice}\"><span [innerHTML]='currency'></span>\r\n {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\r\n </div>\r\n </div>\r\n <div class=\"varient-container h-100 p-3\">\r\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n <div class=\"varient-data\">\r\n <div class=\"varient-key\">{{varient.key}}</div>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\r\n [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"confirm-btn w-100 p-3 text-center cursor-pointer\" data-bs-dismiss=\"offcanvas\"\r\n [style.background]=\"data?.styles?.background?.accentColor\" style=\"color: white;\">Confirm\r\n Customization</div>\r\n</div>\r\n\r\n<ng-template #dialogBox>\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header d-flex align-item-center\">\r\n <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n <div class=\"schedule-header d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon (click)=\"matCloseDialog()\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"modal-body h-100\">\r\n <div class=\"row h-100 w-100 video-call-container\">\r\n <div class=\"col-6 h-100\" *ngIf=\"!isMobile\">\r\n <img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/557699c1753779503913freepik-overhead-shot-a-person-holding-a-smartphone-with-a-1029_vmg8GqHj (online-video-cutter.com).gif\"\r\n alt=\"\" class=\"w-100 h-100\" style=\"object-fit: cover;\">\r\n </div>\r\n <div class=\"col-6 position-relative h-100 call-details\">\r\n <!-- Name Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n (input)=\"onInputChange('username')\">\r\n </div>\r\n\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n (input)=\"onInputChange('email')\">\r\n </div>\r\n\r\n <!-- Mobile Number Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n <div class=\"sub-text-call\">IN +91</div>\r\n <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n (input)=\"onInputChange('mobileNumber')\">\r\n </div>\r\n\r\n\r\n <!-- Pincode Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n (input)=\"onInputChange('pincode')\">\r\n </div>\r\n <div class=\"language my-3\">\r\n <div class=\"mini-text mb-2\">Language Preference</div>\r\n <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n <ng-container *ngFor=\"let lang of languages\">\r\n <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectedLang = lang\"\r\n [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\r\n {{lang}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n <div class=\"input-field my-3\">\r\n <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n </div>\r\n </ng-container>\r\n <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\" [disabled]=\"isSubmitting\">\r\n <ng-container *ngIf=\"isSubmitting\">\r\n <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n <span class=\"visually-hidden\">Loading...</span>\r\n </div>\r\n SCHEDULING...\r\n </ng-container>\r\n <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n <div (click)=\"scheduleVideoCall()\" class=\"d-flex align-items-center\">\r\n <mat-icon>video_call</mat-icon> \r\n SCHEDULE A VIDEO CALL\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"scheduled\">\r\n <mat-icon>check_circle</mat-icon> \r\n SCHEDULED SUCCESSFULLY\r\n </ng-container>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-small overflow-scroll\" tabindex=\"-1\" id=\"offcanvasRightPriceBreakup\">\r\n <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon data-bs-dismiss=\"offcanvas\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n <div class=\"varient-price p-10-20\">\r\n <div class=\"price-break-header\">{{responseData?.name}}</div>\r\n </div>\r\n <div class=\"price-breakup h-100 w-100\">\r\n <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n <div class=\"price-container mb-3 p-10-20\">\r\n <div class=\"price-container-header\">\r\n {{ ele.materialType + \" BREAKUP\" }}\r\n </div>\r\n <div class=\"row w-100 header-row\">\r\n <div class=\"col-3 text-center\">COMPONENT</div>\r\n <div class=\"col-3 text-center\">RATE</div>\r\n <div class=\"col-3 text-center\">WEIGHT</div>\r\n <div class=\"col-3 text-center\">FINAL VALUE</div>\r\n </div>\r\n <div class=\"row w-100 value-row\">\r\n <div class=\"col-3 text-center\">{{ ele.materialPurity | titlecase }}</div>\r\n <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.primaryMaterialWeight, ele.materialPrice) |\r\n number:'1.2-2' }}</div>\r\n <div class=\"col-3 text-center\">{{ ele.primaryMaterialWeight + \" grams\" }}</div>\r\n <div class=\"col-3 text-center total\">\u20B9{{ ele.materialPrice | number:'1.2-2' }}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"price-container mb-3 p-10-30 py-0 border-unset\">\r\n <div class=\"row w-100 summary-row\">\r\n <div class=\"col-6 text-start\">Making Charges</div>\r\n <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}\r\n </div>\r\n </div>\r\n <div class=\"row w-100 summary-row\">\r\n <div class=\"col-6 text-start\">Tax Amount</div>\r\n <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}\r\n </div>\r\n </div>\r\n <div class=\"row w-100 summary-row\">\r\n <div class=\"col-6 text-start\">Total Amount</div>\r\n <div class=\"col-6 text-end total\">\r\n \u20B9{{(responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) |\r\n number:'1.2-2'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n\r\n<ng-template #ReviewsSection>\r\n <div class=\"w-100 row review-section mt-3\" [style.background]=\"getRGBA(styles?.background?.accentColor, 10)\"\r\n *ngIf=\"reviewsData && reviewsData.length > 0\">\r\n <div class=\"col-md-3 col-sm-12\">\r\n <div class=\"cust-header\">Customer Reviews</div>\r\n <div class=\"d-flex gap-3 mb-1\">\r\n <ng-container *ngIf=\"responseData?.averageRating\">\r\n <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n </ng-container>\r\n <span class=\"rating-text\">{{responseData?.averageRating | number:'1.1-2'}} out of 5</span>\r\n </div>\r\n <div class=\"d-flex mb-3\">{{responseData?.totalReviewCount + \" ratings\"}}</div>\r\n <div class=\"ratings-percentage\">\r\n <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\r\n <div class=\"percentage d-flex align-items-center gap-2 mb-2\">\r\n <span>{{rating + \" star\"}}</span>\r\n <div class=\"w-50 bar\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div [style.width.%]=\"getPercentage(rating)\"\r\n [style.backgroundColor]=\"data?.styles?.background?.accentColor\" class=\"h-100\"></div>\r\n </div>\r\n <span class=\"percentage-text\">{{getPercentage(rating) + \"%\"}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-9 col-sm-12\">\r\n <div class=\"review-header\">Latest Reviews</div>\r\n <div class=\"review-body d-flex flex-column gap-3\">\r\n <ng-container *ngFor=\"let review of reviewsData\">\r\n <div class=\"review-container w-75\">\r\n <div class=\"review-name gap-2 my-2 d-flex align-items-center\">\r\n <img src=\"https://m.media-amazon.com/images/S/amazon-avatars-global/default.png\" alt=\"\"\r\n class=\"width-30 h-25 mr-2\">\r\n <span>{{review?.userName ?? \"-\"}}</span>\r\n </div>\r\n <ng-container *ngIf=\"review?.rating\">\r\n <p-rating [(ngModel)]=\"review.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n </ng-container>\r\n <div class=\"review-desc\">\r\n {{review?.review ?? \"-\"}}\r\n </div>\r\n <div class=\"review-img\">\r\n <img [src]=\"img.imgUrl\" alt=\"\" *ngFor=\"let img of review?.reviewImages ?? []\"\r\n (click)=\"showDetailReview(review)\">\r\n <button style=\"display: none;\" data-toggle=\"modal\" data-target=\"#reviewModal\"\r\n id=\"openReviewDetail\"></button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"w-75 see-more py-3\" (click)=\"loadMoreReviews()\" *ngIf=\"(reviewsData?.length ?? 0) > 3\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">\r\n See more reviews <span>></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" role=\"dialog\"\r\n aria-hidden=\"true\">\r\n <div class=\"modal-dialog modal-dialog-centered video-modal\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-body\" style=\"height: 100%;\">\r\n <video controls muted playsinline style=\"width: 100%; height: 100%;\">\r\n <source\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/371647c1753962084265clideo_editor_48bc93c24e18470888c661bb09e437da (online-video-cutter.com).mp4\"\r\n type=\"video/mp4\">\r\n Your browser does not support the video tag.\r\n </video>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"modal fade\" id=\"reviewModal\" tabindex=\"-1\" aria-labelledby=\"reviewModalLabel\" role=\"dialog\"\r\n aria-hidden=\"true\">\r\n <div class=\"modal-dialog review-modal\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h1 class=\"modal-title fs-5\"></h1>\r\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n </div>\r\n <div class=\"modal-body\">\r\n <div class=\"detail-review-container\">\r\n <div class=\"image-section\">\r\n <div class=\"product-image\">\r\n <div class=\"backward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex-1\"\r\n *ngIf=\"currentImageIndex > 0\">\u25BC</div>\r\n <img [src]=\"selectedReview?.reviewImages?.[currentImageIndex]?.imgUrl\" alt=\"\">\r\n <div class=\"forward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex+1\"\r\n *ngIf=\"currentImageIndex < selectedReview?.images?.length - 1\">\u25B2</div>\r\n <!-- <div class=\"earbuds-container\">\r\n <div class=\"charging-case\"></div>\r\n <div class=\"earbud left\"></div>\r\n <div class=\"earbud right\"></div>\r\n </div> -->\r\n </div>\r\n <!-- <div class=\"navigation-arrows\">\r\n </div> -->\r\n </div>\r\n\r\n <div class=\"review-section\">\r\n <div class=\"reviewer-header\">\r\n <div class=\"reviewer-avatar\">\uD83D\uDC64</div>\r\n <div class=\"reviewer-name\">{{selectedReview?.userName ?? \"-\"}}</div>\r\n </div>\r\n\r\n <div class=\"detail-rating\" *ngIf=\"selectedReview?.rating\">\r\n <p-rating [(ngModel)]=\"selectedReview.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n </div>\r\n\r\n <div class=\"review-date\">\r\n Reviewed in India on 24 July 2025\r\n </div>\r\n\r\n <div class=\"review-text\">\r\n {{selectedReview?.review ?? \"-\"}}\r\n </div>\r\n\r\n <div class=\"images-section\">\r\n <h3>Images in this review</h3>\r\n <div class=\"review-images\">\r\n <div class=\"review-image\" [ngClass]=\"{'selected': currentImageIndex == i}\"\r\n *ngFor=\"let img of selectedReview?.reviewImages ?? [];let i = index\" (click)=\"currentImageIndex = i\">\r\n <img [src]=\"img.imgUrl\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".product-desc{display:flex}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.strike-through{text-decoration:line-through;color:#d3d3d3}::ng-deep .smooth-panel .p-panel-header{cursor:pointer;background:transparent;border:unset;font-size:18px;font-weight:700;padding:0}::ng-deep .smooth-panel .p-panel-content{border:unset;padding:0}.jewel-container{border-radius:12px;box-shadow:#63636333 0 2px 8px}.jewel-header{padding:8px 10px;border-radius:12px 12px 0 0;font-size:15px;font-weight:700;color:#4f3267}.br-p{border-radius:0 0 12px 12px;padding:10px 0}.row-header{font-size:13px;font-weight:700;color:#4f3267}.row-content{color:#4e555e}.jewellery-table-container{border-radius:12px}.jewellery-table{width:100%;border-collapse:collapse;border:1px solid #ddd;transition:all .3s ease}.jewellery-table th,.jewellery-table td{border:1px solid #ddd;padding:12px;text-align:left;transition:background-color .2s ease}.material-header td{background-color:#f8f9fa;font-weight:700;font-size:16px}.column-header{background-color:#f1f1f1}.column-header th{font-weight:600}.material-row:hover{background-color:#f5f5f5}.charges-header th,.total-header th{background-color:#eaeaea;font-weight:700}.total-row td{font-weight:700;font-size:18px;background-color:#f8f8f8}@media screen and (max-width: 600px){.jewellery-table{font-size:14px}.jewellery-table th,.jewellery-table td{padding:8px}}.share-icon{border:1px solid;border-radius:8px;padding:5px;height:43px;width:40px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer}.prod-img-block{height:100%;display:flex;gap:5px}.header-text{font-size:17px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:1% 3%;border-radius:8px;letter-spacing:.5px}.pricebreakup-btn mat-icon{font-size:18px;display:flex;align-items:center}.img-list{display:flex;gap:5px;max-height:460px}.img-list img{height:100px;width:100px;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:100%;height:500px;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.price{font-weight:600;font-size:24px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:1px solid;align-items:center;gap:15px;height:44px;width:75%;justify-content:space-between;border-radius:12px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.fc{font-size:17px;font-weight:700}.trim-text{-webkit-line-clamp:3!important}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;margin-top:.5rem}.tab-group{display:flex;gap:10px}.tab{font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.discount-price{font-size:1.4rem}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#f7f7f7;padding:11px 20px;border-radius:12px;margin-top:unset!important;width:70%!important;border:1px solid #d3d3d347}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#f7f7f7;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:7px 25px;cursor:pointer;font-weight:600}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:5px;height:44px!important;justify-content:space-between;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:14px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.w-h-40{width:40px!important;height:40px!important}.product-detail{margin-top:0;height:100vh}.above-height{height:90vh;max-height:100vh;overflow-y:scroll}.height{height:100vh;overflow-y:auto}.mobile-footer{display:none}video{border-radius:18px}@media (min-width: 1024px){.zoom:hover{transform:scale(1.2);transition:transform .2s ease-in-out;overflow:hidden}.above-height{width:100%;display:flex;margin-top:25px}.product-detail{padding:2%}.product-heading{font-size:20px;font-weight:600;margin-top:5px}.prod-img-block{height:100%;display:flex;flex-direction:column-reverse;justify-content:start;gap:5px}}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:100000001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.product-desc{font-size:13px}.brief-desc{font-size:16px;margin-top:unset!important}.total-container{padding-top:10px!important;padding-bottom:4rem!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important;height:348px}.item-img img{width:100%;height:348px!important}.display-none{display:none}.prod-img-block{flex-direction:column;gap:5px}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.product-detail{margin-top:20px;overflow-x:hidden}.input-field{margin-top:.7rem!important;margin-bottom:.7rem!important}.prod-desc{margin-top:20px}.video-call-container{margin:0!important}.product-img{height:220px}.call-details{width:100%!important;padding:3%!important}.send-btn{padding:.5rem 1rem!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.favourite:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.review-sec :is(input,textarea){width:100%!important}.height{width:100%;height:auto}.above-height{padding:1%;height:unset!important}.product-heading{font-size:23px;font-weight:600}.discount-price{font-size:1.7rem!important}.header-text{font-size:20px!important}}.send-btn{font-size:14px!important;padding:1rem;display:flex;align-items:center;justify-content:center;text-transform:uppercase;font-weight:600}.send-btn mat-icon{height:20px;width:20px;font-size:18px}.favourite .mat-icon{min-height:40px;min-width:40px;font-size:25px;display:flex;align-items:center;justify-content:center;border-radius:5px;cursor:pointer}.favourite:hover,.share-product:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.border-solid{border:1px solid;border-radius:8px}a{text-decoration:none}.brief-desc{font-size:14px;color:#4e555e}.total-container{height:100vh;position:relative;display:block!important;overflow:scroll}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin:unset!important}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}.above-height{width:100%;padding:2%;display:flex;flex-direction:column}.product-detail{padding:0vw 42vw 0vw 2vw}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:911px){.product-detail{padding:0% 34% 0% 2%}.above-height{display:flex}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:1024px){.product-detail{padding:0% 2%}.above-height{display:flex}.product-headig{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}.mb-15{margin-bottom:15px}@media (min-width: 1400px){.container{max-width:unset;width:95%;height:100vh;overflow-y:auto}}.width-max{width:max-content}.width-34{width:33.3%!important}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}.f-18{font-size:18px}.offcanvas-variant{border-radius:30px 0 0 30px}.varient-header,.varient-price{background:#f7f7f7}.varient-header{border-radius:30px 0 0}.confirm-btn{border-radius:0 0 0 30px;position:absolute!important;bottom:0!important}.style2-container{border:1px solid;border-radius:12px;margin:0}.varient-item{border-right:1px solid;align-content:center}.variant-head{font-size:12px;color:#33363e}.varient-data{margin-bottom:25px;border-bottom:1px solid black;padding-bottom:25px}.variant-value{font-size:.9rem;color:#000}.custom-text{border-radius:0 8px 8px 0;font-size:.9rem;font-weight:600}.br-50{border-radius:50%}.w-15{width:22%!important}.scroll-wrap{flex-wrap:nowrap}.brand-text{word-wrap:break-word;white-space:normal;font-size:12px;font-weight:600;line-height:20px}.video-container{border:1px solid rgb(240,240,240);margin:10px 0;border-radius:12px}.video-head-text{font-size:16px;font-weight:700}.sub-text{font-size:11px;color:#6f7377;margin-bottom:10px}.sch-btn{font-size:1.2rem!important;color:#fff;padding:3px 0;margin-top:5px}.tax-text{font-size:.7rem;color:#6f7377}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.delivery-container{margin:35px 0 15px;background-color:transparent}.delivery-title{font-size:16px;font-weight:600;margin:0 0 12px;line-height:1.2}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:10px;margin-bottom:15px;width:100%}.location-icon{width:20px;height:20px;background-color:#374151;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.location-icon:before{content:\"\";width:8px;height:8px;background-color:#fff;border-radius:50%;position:absolute}.postal-code-input{font-size:12px;font-weight:600;letter-spacing:.5px;border:none;outline:none;background:transparent;width:90%}.postal-code-input::placeholder{font-weight:500}.locate-btn{background:none!important;border:none!important;font-weight:500;font-size:12px!important;padding:0!important;box-shadow:none!important;width:20%!important}.gps{font-size:17px}.locate-btn:focus{box-shadow:none!important}.delivery-section{margin-bottom:15px;border:1px solid rgb(240,240,240);padding:10px;border-radius:12px}.delivery-icon{font-size:18px;color:#ec4899;margin-right:14px;width:20px}.delivery-text{font-size:14px;font-weight:700}.store-section{border:1px solid rgb(240,240,240);padding:10px;border-radius:12px;margin-bottom:15px}.store-item{margin-bottom:11px}.store-icon{font-size:18px;color:#f97316;margin-right:14px;margin-top:2px;width:20px}.store-details{flex:1}.store-text{font-size:14px}.store-name{font-weight:700}.availability-section{margin-bottom:6px}.availability-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:#d97706;background-color:#fef3c7;padding:4px 8px;border-radius:12px;letter-spacing:.5px}.other-stores-text{font-size:14px;color:#6b7280;line-height:1.4}.other-stores-link{color:#6b46c1;cursor:pointer;text-decoration:underline}.other-stores-link:hover{color:#553c9a}.find-store-btn{width:100%!important;padding:8px 20px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px}.try-home-section{border-radius:12px;padding:10px;border:1px solid rgb(240,240,240)}.try-home-item{margin-bottom:10px;padding:0}.home-icon{font-size:18px;color:#6b46c1;margin-right:14px;margin-top:2px;width:20px}.try-home-details{flex:1}.try-home-text{font-size:14px;font-weight:700;color:#374151}.free-text{font-size:14px;color:#6b7280}.appointment-text{font-size:14px;color:#6b7280;line-height:1.4}.appointment-available{font-weight:500;color:#374151}.book-appointment-btn{background:linear-gradient(135deg,#8b5cf6,#a855f7);color:#fff;border:none;padding:8px 20px;border-radius:12px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px;transition:all .2s ease}.book-appointment-btn:hover{background:linear-gradient(135deg,#7c3aed,#9333ea);transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}@media (max-width: 480px){.container{display:flex;align-items:center;flex-direction:column}.location-section{padding:12px 0}.try-home-section{padding:20px}}.w-90{width:90%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.w-12{width:12%!important}.w-88{width:88%!important}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.border-unset{border:unset!important}.error-border{border:2px solid #dc3545!important}.offcanvas-small{height:72vh;top:25%;width:35%;border-radius:50px 0 0 50px}.rating{width:max-content;border:1px solid;border-radius:20px;padding:0 10px;margin-bottom:.5rem}.rating-no{padding-right:7px;margin:0;border-right:1px solid;font-size:.75rem}.p-10-20{padding:10px 30px}.price-break-header{font-size:19px;font-weight:600}.price-container{border-bottom:1px solid rgb(233,233,233)}.price-container-header{font-size:14px;font-weight:600;color:#333}.total-ratings{font-size:.75rem}.header-row .col-3{font-size:12px;font-weight:500;color:#666}.value-row .col-3{font-size:14px;font-weight:400;color:#333}.value-row .col-3.total{font-weight:600}.summary-row .col-6{font-size:15px;font-weight:500;color:#333;padding:unset}.summary-row .col-6.total{font-weight:600;padding-right:10px}.summary-row{padding:0 42px}.error-border{border:2px solid #e74c3c!important;box-shadow:0 0 5px #e74c3c4d!important}.form-control,.input-field input{transition:border-color .3s ease,box-shadow .3s ease}.error-border:focus{border-color:#e74c3c!important;box-shadow:0 0 8px #e74c3c80!important}.input-field input:focus{transform:scale(1.02)}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:-.125em;border:.125em solid currentcolor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}.spinner-border-sm{width:.875rem;height:.875rem;border-width:.125em}@keyframes spinner-border{to{transform:rotate(360deg)}}.me-2{margin-right:.5rem}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.width-30{width:30px!important}.review-header{font-size:20px;font-weight:600}.review-desc{font-weight:500}.see-more{font-weight:600;cursor:pointer;border-top:1px solid #d1d1d1}.see-more span{font-size:12px}.cust-header{font-size:24px}.bar{border:1px solid;height:20px;border-radius:5px;overflow:hidden}.bar div{border-radius:2px}.parent-container{height:100%;width:100%;display:flex}.home-appointment-text{font-size:.8rem;color:#4e555e}.home-appointment-text span{font-weight:600}.video-call-img{height:120px;margin:0;padding:0;border-radius:45px}.video-call-img img{border-top-left-radius:12px;border-bottom-left-radius:12px}.discount{background:#fff3f2;padding:15px 15px 20px;margin-top:14px;border-radius:8px;display:flex;flex-direction:column;gap:5px;position:relative}.discount p{margin-bottom:0;color:#4f3267;font-weight:700;font-size:1rem}.discount .offer{color:#eb4f5c}.discount:before{content:\"\";display:block;height:44px;width:4px;background:#eb4f5c;position:absolute;left:0;top:16px;border-top-right-radius:20px;border-bottom-right-radius:20px}.metal-purity{display:flex;flex-direction:column;gap:10px}.scrollable-content{height:100%;max-height:95vh;overflow-y:auto}.style-2-img{max-height:70%;height:100%!important}.ring-size-video{background:#f0ebff;display:flex;justify-content:space-between;align-items:center;height:45px;padding:12px;border-radius:10px;margin-top:20px;margin-bottom:20px}.ring-size-video .text{color:#4f3267;font-size:.9rem}.ring-size-video .learn-how{color:#de57e9;font-weight:700;font-size:1rem;display:flex;gap:5px;align-items:center;cursor:pointer}.ring-size-video .learn-how mat-icon{font-size:20px;display:flex;align-items:center}.ring-size-video p{margin-bottom:0}.video-modal{height:90vh!important;width:90vw!important;max-width:none}.video-modal .modal-body{padding:0}.review-section{border-radius:10px;padding:15px}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.detail-review-container{display:flex;max-width:1200px;margin:0 auto;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px #0000001a}.image-section{flex:1;background:#000;position:relative;min-height:400px}.product-image{width:100%;height:100%;object-fit:cover;background:linear-gradient(135deg,#e8e8e8,#d0d0d0);display:flex;align-items:center;justify-content:center;max-height:400px;position:relative}.product-image img{height:100%;width:100%;object-fit:contain}.earbuds-container{position:relative;width:300px;height:200px}.charging-case{width:200px;height:120px;background:linear-gradient(145deg,#f0f0f0,#e0e0e0);border-radius:25px;position:absolute;top:40px;left:50px;box-shadow:inset 0 4px 8px #0000001a}.charging-case:before{content:\"\";position:absolute;inset:10px;background:linear-gradient(145deg,#e8e8e8,#d8d8d8);border-radius:15px;box-shadow:inset 0 2px 4px #0000001a}.earbud{position:absolute;width:45px;height:15px;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border-radius:8px;box-shadow:0 2px 4px #0003}.earbud:before{content:\"noise\";position:absolute;top:2px;left:50%;transform:translate(-50%);font-size:6px;color:#888;font-weight:300}.earbud.left{top:70px;left:80px}.earbud.right{top:90px;left:130px}.earbud.right:before{color:#ff6b35}.review-section{flex:1;padding:30px;background:#fafafa}.reviewer-header{display:flex;align-items:center;margin-bottom:15px}.reviewer-avatar{width:40px;height:40px;background:#ccc;border-radius:50%;margin-right:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#666}.reviewer-name{font-size:16px;font-weight:500;color:#333}.detail-rating{margin:10px 0}.stars{display:flex;gap:2px;margin-bottom:5px}.star{color:#ff9500;font-size:18px}.thumbs{display:flex;gap:5px}.thumb{color:#ff9500;font-size:16px}.review-date{font-size:14px;color:#666;margin:15px 0}.review-text{font-size:16px;line-height:1.5;color:#333;margin-bottom:25px}.images-section h3{font-size:16px;color:#666;margin-bottom:15px;font-weight:500}.review-images{display:flex;gap:10px}.review-image{width:60px;height:60px;background:#ddd;border-radius:6px;border:2px solid #e0e0e0;cursor:pointer;transition:border-color .3s}.review-image img{width:100%;height:100%}.review-image:hover,.review-image.selected{border-color:#007185}.navigation-arrows{position:absolute;top:20px;right:20px;display:flex;flex-direction:column;gap:10px}.arrow{width:40px;height:40px;background:#fffc;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:#666;transition:background-color .3s;position:absolute;transform:rotate(90deg)}.backward-arrow{left:10px}.forward-arrow{right:10px}.arrow:hover{background:#fff}@media (max-width: 768px){.review-container{flex-direction:column}.image-section{min-height:300px}.review-section{padding:20px}}.review-modal{max-width:none;width:70vw}.review-modal .modal-body{padding:0}@media screen and (max-width: 475px){.offcanvas-small{height:100vh;width:100%;top:0}.review-modal{margin:0;height:100%;width:100%}.detail-review-container{flex-direction:column;height:100%}.product-image{max-height:289px}.image-section{min-height:289px}.video-modal{margin:0;height:100vh!important;width:100vw!important;overflow:hidden}}.modal{z-index:100000033}\n"] }]
|
|
18560
|
+
], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n\r\n <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n </div> -->\r\n <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoLayout]=\"styles?.layout\" #container>\r\n <!-- <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\r\n (click)=\"routeToHome()\">Home</a> /\r\n <span>{{ responseData?.name | titlecase }}</span>\r\n </div> -->\r\n <div class=\"row h-100 w-100 h-100\" #aboveHeight class=\"above-height\"\r\n [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\r\n <div class=\"col-lg-7 col-sm-12 h-100 height\" #imageSection>\r\n <div class=\"prod-img-block\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-4 col-sm-12 h-100\" #detailSection>\r\n <ng-container *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngIf=\"toShowInJewellery\">\r\n <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"ecomConfigs?.videoCallEnabled\">\r\n <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"ecomConfigs?.brandPromiseEnabled\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </ng-container>\r\n\r\n\r\n\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\r\n </ng-container>\r\n\r\n <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\r\n [innerHTML]=\"responseData.brief\"></div> -->\r\n <div class=\"product-sku\">\r\n <!-- <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div> -->\r\n <!-- <div\r\n *ngIf=\"responseData?.itemCategorisation?.itemCategories && (responseData?.itemCategorisation?.itemCategories?.length || 0) > 0\">\r\n Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\r\n titlecase}} <ng-container\r\n *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n </a></div> -->\r\n <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n </span></div>\r\n </div>\r\n <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\r\n <!-- <ng-container>\r\n <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\r\n </ng-container> -->\r\n </div>\r\n </div>\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"ReviewsSection\"></ng-container>\r\n </ng-container>\r\n </section>\r\n <!-- <ng-container *ngIf=\"relatedProductData?.length\">\r\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\r\n [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n </ng-container>\r\n <ng-container *ngIf=\"recentViewItemList?.length\">\r\n <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\r\n [isRelatedProduct]=\"true\"></simpo-featured-products>\r\n </ng-container> -->\r\n <!-- <ng-container>\r\n <simpo-customer-review [data]=\"data\"></simpo-customer-review>\r\n </ng-container> -->\r\n\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </section>\r\n</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n\r\n<div class=\"mobile-footer\">\r\n <div class=\"icons\">\r\n <div (click)=\"goToCart()\">\r\n <mat-icon>shopping_cart</mat-icon>\r\n </div>\r\n <div>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n </div>\r\n </div>\r\n <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\">Out of\r\n Stock</button>\r\n <div class=\"quantity\" *ngIf=\"responseData?.quantity && !ecomConfigs?.videoCallEnabled\"\r\n [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\r\n </div>\r\n <button *ngIf=\"responseData?.quantity && ecomConfigs?.videoCallEnabled\" class=\"send-btn w-100\"\r\n [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\r\n <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\r\n <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\r\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\"\r\n (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ReviewSection>\r\n <div class=\"review-sec\">\r\n <div class=\"title\">Customer Review</div>\r\n <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\r\n <span>Be the first to write a review</span>\r\n <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\r\n Review' : 'Cancel Review'}}</button>\r\n <ng-container *ngIf=\"showReview\">\r\n <hr />\r\n <div class=\"user-review\">\r\n <div class=\"title\">Write a review</div>\r\n <span class=\"secondary-text\">RATING</span>\r\n <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\r\n <div>\r\n <span class=\"secondary-text\">Review Title</span>\r\n <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\r\n </div>\r\n <div>\r\n <span class=\"secondary-text\">Review</span>\r\n <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\r\n </div>\r\n <div class=\"review-action-btn\">\r\n <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\r\n <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"addProductReview()\"\r\n [disabled]=\"productReview == 0 && reviewTitle?.length == 0 && reviewDescription?.length == 0\">Submit\r\n review</button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n<ng-template #SocialIcons>\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-socia-icons>\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 #ActionBtn>\r\n <div class=\"button-parent\">\r\n <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\">Out of\r\n Stock</button>\r\n <div class=\"quantity\" *ngIf=\"responseData?.quantity && !ecomConfigs?.videoCallEnabled\"\r\n [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\r\n </div>\r\n <button *ngIf=\"responseData?.quantity && ecomConfigs?.videoCallEnabled\" class=\"send-btn w-100\"\r\n [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\r\n [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\r\n (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\r\n <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\r\n <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75\">\r\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\"\r\n (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && !IsEcommerce\" class=\"w-75\">\r\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\" (click)=\"raiseLead()\"><mat-icon style=\"height:14px !important\">\r\n message</mat-icon>Notify Me</button>\r\n </div>\r\n <div class=\"favourite border-solid\" *ngIf=\"IsEcommerce\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n </div>\r\n <div class=\"share-product\">\r\n <mat-icon class=\"share-icon\" (click)=\"shareProduct()\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n [style.borderColor]=\"data?.styles?.background?.accentColor\">share</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #variants>\r\n <ng-container *ngIf=\"data?.styles?.customization == 'Style1'\">\r\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n <div class=\"mb-15\">\r\n <div class=\"varient-key\">{{varient.key}}</div>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\r\n [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"data?.styles?.customization == 'Style2' && selectedVarient.size > 0\">\r\n <ng-container>\r\n <div class=\"row mt-2 style2-container w-100\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div *ngFor=\"let item of selectedVarient | keyvalue\" class=\"px-3 py-2 varient-item\"\r\n [class]=\"getClass(selectedVarient)\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"variant-head\">{{item.key | titlecase}}</div>\r\n <div class=\"variant-value text-start fw-600\">\r\n {{item.value |\r\n titlecase}}</div>\r\n </div>\r\n <div class=\"cursor-pointer p-0\" [class]=\"getClass(selectedVarient)\">\r\n <div class=\"custom-text d-flex align-items-center justify-content-center h-100 p-2\" data-bs-toggle=\"offcanvas\"\r\n data-bs-target=\"#offcanvasRightVariant\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">CUSTOMISE\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc>\r\n <div class=\"d-flex flex-column\" style=\"margin-top: 15px;\">\r\n <div class=\"rating d-flex justify-content-center gap-2 mb-3\"\r\n *ngIf=\"responseData?.averageRating && responseData?.totalReviewCount\"\r\n [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"rating-no my-1\">{{(responseData?.averageRating | number:'1.1-2')}}\u2B50</div>\r\n <div class=\"total-ratings my-1\">{{responseData?.totalReviewCount == 1 ? '1 Rating' :\r\n getRatings(responseData?.totalReviewCount) + \" \" + \"ratings\"}}</div>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.sellingPrice}\"\r\n *ngIf=\"responseData?.price?.sellingPrice && responseData.price.sellingPrice > 0\"><span\r\n [innerHTML]='currency'></span>\r\n {{responseData?.price?.sellingPrice}}</div>\r\n <div class=\"price\"\r\n [ngClass]=\"{'strike-through': getDifference(responseData?.price?.discountedPrice, responseData?.price?.value) > 2}\"\r\n *ngIf=\"getDifference(responseData?.price?.discountedPrice, responseData?.price?.value) > 2\">\r\n <span [innerHTML]='currency'></span>\r\n {{responseData?.price?.value | number:'1.0-0'}}\r\n </div>\r\n </div>\r\n <div class=\"tax-text\">(MRP Inclusive all taxes)</div>\r\n </div>\r\n <div class=\"heading-large trim-text\" class=\"product-heading\">{{responseData?.name}}</div>\r\n <ng-container *ngIf=\"toShowInJewellery\">\r\n <div class=\"discount\">\r\n <p>Flat 30% off on Diamond Prices</p>\r\n <p class=\"offer\">Offer Expires in 4 days</p>\r\n </div>\r\n <div class=\"ring-size-video\">\r\n <p class=\"text\">Not sure about the ring size?</p>\r\n <p class=\"learn-how\" data-toggle=\"modal\" data-target=\"#exampleModal\">Learn How\r\n <mat-icon>play_circle_outline</mat-icon>\r\n </p>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #descriptors>\r\n <div class=\"row prod-desc mt-2\">\r\n <div>\r\n <div class=\"product-header d-flex align-items-center justify-content-between\">\r\n <span class=\"header-text\" *ngIf=\"responseData?.descriptor || responseData?.materials\">Product Details</span>\r\n <div class=\"pricebreakup-btn d-flex align-items-center justify-content-center cursor-pointer\"\r\n *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\" data-bs-toggle=\"offcanvas\"\r\n data-bs-target=\"#offcanvasRightPriceBreakup\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\r\n <mat-icon>add</mat-icon> PRICE BREAKUP\r\n </div>\r\n </div>\r\n <div class=\"description\">\r\n <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\r\n [innerHTML]=\"responseData?.descriptor?.name\" [style.background]=\"data?.styles?.background?.color\"></div>\r\n </div>\r\n <ng-container *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\">\r\n <div class=\"jewellery-table-container\">\r\n <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n <div class=\"jewel-container mt-2\">\r\n <div class=\"jewel-header\" [style.background]=\"getHeaderColor(ele.materialType)\">\r\n {{ele?.materialName | titlecase}}\r\n </div>\r\n <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor(ele.materialType)\">\r\n <div class=\"col-6 metal-purity\">\r\n <div class=\"row-header\">\r\n Net Weight/{{ele?.unit | titlecase}}\r\n </div>\r\n <div class=\"row-content\">\r\n {{ele.primaryMaterialWeight + \" \" + (ele?.unit | titlecase)}}\r\n </div>\r\n </div>\r\n <div class=\"col-6 metal-purity\">\r\n <div class=\"row-header\">\r\n Purity\r\n </div>\r\n <div class=\"row-content\">\r\n {{ele.purity |\r\n titlecase}}\r\n </div>\r\n </div>\r\n <!-- <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Price/Gram\r\n </div>\r\n <div class=\"row-content\">\r\n \u20B9{{ getPricePerGram(ele.primaryMaterialWeight,ele.materialPrice) |\r\n number:'1.2-2'}}\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Value\r\n </div>\r\n <div class=\"row-content\">\r\n \u20B9{{ele.materialPrice | number:'1.2-2'}}\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- <div class=\"jewel-container mt-2\">\r\n <div class=\"jewel-header\" [style.background]=\"getHeaderColor('Making Charges')\">\r\n Making Charges\r\n </div>\r\n <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor('Making Charges')\">\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Net Weight\r\n </div>\r\n <div class=\"row-content\">\r\n {{responseData?.baseWeight}} </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Making Charge %\r\n </div>\r\n <div class=\"row-content\">\r\n {{responseData?.makingChargePercentage}}\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Value\r\n </div>\r\n <div class=\"row-content\">\r\n \u20B9{{responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <!-- <div class=\"tab-group\">\r\n <div class=\"tab\" data-bs-toggle=\"collapse\" href=\"#collapseExample\" >Description</div>\r\n </div>\r\n <div style=\"margin-top: 10px;\" class=\"body-large collapse\" id=\"collapseExample\" *ngIf=\"responseData?.descriptor\"\r\n [innerHTML]=\"responseData?.descriptor?.name\"></div> -->\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n <ng-container *ngIf=\"!varientLoading && (isMobile || data?.styles?.gridStyle == 'Style1')\">\r\n <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n <ng-container *ngFor=\"let img of itemImages\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\r\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n </ng-container>\r\n </div>\r\n <div class=\"item-img\">\r\n <ng-container *ngIf=\"currentImg\">\r\n\r\n <!-- <mat-icon class=\"share-icon\" (click)=\"shareProduct()\">share</mat-icon> -->\r\n <ng-container *ngIf=\"!isMobile\">\r\n <img [src]=\"currentImg\" class=\"img zoom\" style=\"height: 100%; width: 100%;\" [simpoCorner]=\"styles?.corners\">\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\" [simpoCorner]=\"styles?.corners\" class=\"zoom\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"!currentImg\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\r\n [simpoCorner]=\"styles?.corners\">\r\n </ng-container>\r\n </div>\r\n <div class=\"img-list w-100\" *ngIf=\"screenWidth <= 500\">\r\n <ng-container *ngFor=\"let img of itemImages\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n alt=\"\" class=\"img zoom\" (click)=\"changeImg(img.imgUrl)\"\r\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!varientLoading && (!isMobile && data?.styles?.gridStyle == 'Style2')\">\r\n <div class=\"row h-100 mt-0 w-100\">\r\n <ng-container *ngIf=\"itemImages?.length == 0\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\" class=\"img\"\r\n [simpoCorner]=\"styles?.corners\" class=\"col-12 h-100 p-0\">\r\n </ng-container>\r\n <ng-container *ngFor=\"let img of itemImages\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n alt=\"\" class=\"img col-6 h-75 p-1 style-2-img\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\r\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\"\r\n [class.h-100]=\"screenWidth <= 500\" [class.w-100]=\"itemImages?.length == 1\"\r\n [class.h-100]=\"itemImages?.length == 1\">\r\n </ng-container>\r\n </div>\r\n\r\n </ng-container>\r\n\r\n\r\n\r\n\r\n <div class=\"item-img\" *ngIf=\"varientLoading\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '100%',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #branding>\r\n <div class=\"row w-100\">\r\n <ng-container *ngFor=\"let brand of brandPromises\">\r\n <div class=\"col-4 d-flex flex-column align-items-center g-2\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"brand?.logoUrl\" alt=\"\" class=\"w-h-40 p-0 br-50\">\r\n <div class=\"brand-text w-100 text-center py-2\">\r\n {{brand?.title | titlecase}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #videoCallSchedule>\r\n <!-- *ngIf=\"ecomConfigs?.videoCallEnabled\" -->\r\n <ng-container>\r\n <div class=\"row w-100 video-container\">\r\n <div class=\"col-4 video-call-img\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/355007c175362077266611289-229221023_small.gif\"\r\n alt=\"\" class=\"w-100 h-100 \">\r\n </div>\r\n <div class=\"col-8 align-content-center\">\r\n <div class=\"video-head-text\">\r\n Live Video Call\r\n </div>\r\n <div class=\"sub-text\">\r\n Join a live video call with our consultants to see your favourite designs up close!\r\n </div>\r\n <button class=\"sch-btn text-center cursor-pointer\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(2)\" [buttonId]=\"getButtonId(2)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(2)\" (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\r\n Schedule a Video Call\r\n </button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #DeliverySection>\r\n <div class=\"delivery-container\">\r\n <h2 class=\"delivery-title\">Delivery, Stores & Trial</h2>\r\n\r\n <!-- Location Section -->\r\n <div class=\"location-section\">\r\n <div class=\"location-container d-flex align-items-center justify-content-between\"\r\n [style.borderColor]=\"styles?.background?.accentColor\">\r\n <div class=\"d-flex align-items-center w-90\">\r\n <div class=\"d-flex mx-1\"><mat-icon\r\n class=\"gps d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" class=\"postal-code-input\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\">\r\n </div>\r\n <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">{{pincode ? 'Change' : 'Locate me'}}</button>\r\n </div>\r\n <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\r\n </div>\r\n <ng-container>\r\n <!-- Free Delivery Section -->\r\n <div class=\"delivery-section\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"delivery-icon\">\uD83C\uDF81</span>\r\n\r\n <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Free\r\n Delivery by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }}</span>\r\n\r\n <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\r\n Order will\r\n Deliver by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }} with a Delivery Charge of\r\n \u20B9 {{ecomConfigs?.deliveryCharges | number:'1.2-2'}}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Nearest Store Section -->\r\n <ng-container\r\n *ngIf=\"storeDetails?.nearbyStore?.name && storeDetails?.nearbyStore?.name?.length > 0;else emptyStore\">\r\n <div class=\"store-section\">\r\n <div class=\"d-flex align-items-center store-item\">\r\n <span class=\"store-icon\">\uD83C\uDFEA</span>\r\n <div class=\"store-details\">\r\n <div class=\"store-text\">\r\n <span class=\"store-label\">Nearest Store - </span>\r\n <span class=\"store-name\">{{ storeDetails?.nearbyStore?.name | titlecase}}</span>\r\n <!-- <span class=\"store-distance\"> (4km)</span> -->\r\n </div>\r\n <!-- <div class=\"availability-section\">\r\n <span class=\"availability-badge\">\u23F0 AVAILABLE BY 28 JUN</span>\r\n </div> -->\r\n <!-- <div class=\"other-stores-text\">\r\n Also Available in <span class=\"other-stores-link\">18 other stores</span>\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-center w-100\">\r\n <button class=\"find-store-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(1)\" (click)=\"onFindInStore(storeDetails?.nearbyStore?.storeId)\">FIND IN\r\n STORE</button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #emptyStore>\r\n <div class=\"delivery-section\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"delivery-icon\">\uD83C\uDFEA</span>\r\n <span class=\"delivery-text\">No Stores are available</span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <!-- Try At Home Section -->\r\n <div class=\"try-home-section\">\r\n <div class=\"d-flex align-items-start try-home-item\">\r\n <span class=\"home-icon\">\uD83C\uDFE0</span>\r\n <div class=\"try-home-details\">\r\n <div class=\"try-home-header\">\r\n <span class=\"try-home-text\">Try At Home</span>\r\n <span class=\"free-text\"> (It's Free)</span>\r\n </div>\r\n <div class=\"home-appointment-text\">Home Appointment <span>Available to try from 29 Jul</span></div>\r\n <!-- <div class=\"appointment-text\">\r\n Home Appointment <span class=\"appointment-available\">Available to try from 28 Jun</span>\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\"d-flex-align-items-center justify-content-center w-100\">\r\n <button class=\"book-appointment-btn\" (click)=\"addToTrialCart()\" *ngIf=\"!isItemAddedAsTrial\">Try at\r\n HOME</button>\r\n <button class=\"book-appointment-btn\" *ngIf=\"isItemAddedAsTrial\">HOME APPOINTMENT BOOKED</button>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-variant\" tabindex=\"-1\" id=\"offcanvasRightVariant\"\r\n aria-labelledby=\"offcanvasRightLabel\">\r\n <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon data-bs-dismiss=\"offcanvas\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n <div class=\"varient-price px-3 pb-2\">\r\n <div class=\"price-text\">Price</div>\r\n <div class=\"d-flex g-3 align-items-center\">\r\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\r\n [innerHTML]='currency'></span>\r\n {{responseData?.price?.discountedPrice}}</div>\r\n <div class=\"price\"\r\n *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\"\r\n [ngClass]=\"{'strike-through': responseData?.price?.discountedPrice}\"><span [innerHTML]='currency'></span>\r\n {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\r\n </div>\r\n </div>\r\n <div class=\"varient-container h-100 p-3\">\r\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n <div class=\"varient-data\">\r\n <div class=\"varient-key\">{{varient.key}}</div>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\r\n [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"confirm-btn w-100 p-3 text-center cursor-pointer\" data-bs-dismiss=\"offcanvas\"\r\n [style.background]=\"data?.styles?.background?.accentColor\" style=\"color: white;\">Confirm\r\n Customization</div>\r\n</div>\r\n\r\n<ng-template #dialogBox>\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header d-flex align-item-center\">\r\n <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n <div class=\"schedule-header d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon (click)=\"matCloseDialog()\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"modal-body h-100\">\r\n <div class=\"row h-100 w-100 video-call-container\">\r\n <div class=\"col-6 h-100\" *ngIf=\"!isMobile\">\r\n <img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/557699c1753779503913freepik-overhead-shot-a-person-holding-a-smartphone-with-a-1029_vmg8GqHj (online-video-cutter.com).gif\"\r\n alt=\"\" class=\"w-100 h-100\" style=\"object-fit: cover;\">\r\n </div>\r\n <div class=\"col-6 position-relative h-100 call-details\">\r\n <!-- Name Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n (input)=\"onInputChange('username')\">\r\n </div>\r\n\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n (input)=\"onInputChange('email')\">\r\n </div>\r\n\r\n <!-- Mobile Number Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n <div class=\"sub-text-call\">IN +91</div>\r\n <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n (input)=\"onInputChange('mobileNumber')\">\r\n </div>\r\n\r\n\r\n <!-- Pincode Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n (input)=\"onInputChange('pincode')\">\r\n </div>\r\n <div class=\"language my-3\">\r\n <div class=\"mini-text mb-2\">Language Preference</div>\r\n <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n <ng-container *ngFor=\"let lang of languages\">\r\n <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectedLang = lang\"\r\n [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\r\n {{lang}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n <div class=\"input-field my-3\">\r\n <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n </div>\r\n </ng-container>\r\n <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\" [disabled]=\"isSubmitting\">\r\n <ng-container *ngIf=\"isSubmitting\">\r\n <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n <span class=\"visually-hidden\">Loading...</span>\r\n </div>\r\n SCHEDULING...\r\n </ng-container>\r\n <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n <div (click)=\"scheduleVideoCall()\" class=\"d-flex align-items-center\">\r\n <mat-icon>video_call</mat-icon> \r\n SCHEDULE A VIDEO CALL\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"scheduled\">\r\n <mat-icon>check_circle</mat-icon> \r\n SCHEDULED SUCCESSFULLY\r\n </ng-container>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-small overflow-scroll\" tabindex=\"-1\" id=\"offcanvasRightPriceBreakup\">\r\n <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon data-bs-dismiss=\"offcanvas\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n <div class=\"varient-price p-10-20\">\r\n <div class=\"price-break-header\">{{responseData?.name}}</div>\r\n </div>\r\n <div class=\"price-breakup h-100 w-100\">\r\n <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n <div class=\"price-container mb-3 p-10-20\">\r\n <div class=\"price-container-header\">\r\n {{ ele.materialType + \" BREAKUP\" }}\r\n </div>\r\n <div class=\"row w-100 header-row\">\r\n <div class=\"col-3 text-center\">COMPONENT</div>\r\n <div class=\"col-3 text-center\">RATE</div>\r\n <div class=\"col-3 text-center\">WEIGHT</div>\r\n <div class=\"col-3 text-center\">FINAL VALUE</div>\r\n </div>\r\n <div class=\"row w-100 value-row\">\r\n <div class=\"col-3 text-center\">{{ ele.materialPurity | titlecase }}</div>\r\n <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.primaryMaterialWeight, ele.materialPrice) |\r\n number:'1.2-2' }}</div>\r\n <div class=\"col-3 text-center\">{{ ele.primaryMaterialWeight + \" grams\" }}</div>\r\n <div class=\"col-3 text-center total\">\u20B9{{ ele.materialPrice | number:'1.2-2' }}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"price-container mb-3 p-10-30 py-0 border-unset\">\r\n <div class=\"row w-100 summary-row\">\r\n <div class=\"col-6 text-start\">Making Charges</div>\r\n <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}\r\n </div>\r\n </div>\r\n <div class=\"row w-100 summary-row\">\r\n <div class=\"col-6 text-start\">Tax Amount</div>\r\n <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}\r\n </div>\r\n </div>\r\n <div class=\"row w-100 summary-row\">\r\n <div class=\"col-6 text-start\">Total Amount</div>\r\n <div class=\"col-6 text-end total\">\r\n \u20B9{{(responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) |\r\n number:'1.2-2'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n\r\n<ng-template #ReviewsSection>\r\n <div class=\"w-100 row review-section mt-3\" [style.background]=\"getRGBA(styles?.background?.accentColor, 10)\"\r\n *ngIf=\"reviewsData && reviewsData.length > 0\">\r\n <div class=\"col-md-3 col-sm-12\">\r\n <div class=\"cust-header\">Customer Reviews</div>\r\n <div class=\"d-flex gap-3 mb-1\">\r\n <ng-container *ngIf=\"responseData?.averageRating\">\r\n <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n </ng-container>\r\n <span class=\"rating-text\">{{responseData?.averageRating | number:'1.1-2'}} out of 5</span>\r\n </div>\r\n <div class=\"d-flex mb-3\">{{responseData?.totalReviewCount + \" ratings\"}}</div>\r\n <div class=\"ratings-percentage\">\r\n <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\r\n <div class=\"percentage d-flex align-items-center gap-2 mb-2\">\r\n <span>{{rating + \" star\"}}</span>\r\n <div class=\"w-50 bar\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div [style.width.%]=\"getPercentage(rating)\"\r\n [style.backgroundColor]=\"data?.styles?.background?.accentColor\" class=\"h-100\"></div>\r\n </div>\r\n <span class=\"percentage-text\">{{getPercentage(rating) + \"%\"}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-9 col-sm-12\">\r\n <div class=\"review-header\">Latest Reviews</div>\r\n <div class=\"review-body d-flex flex-column gap-3\">\r\n <ng-container *ngFor=\"let review of reviewsData\">\r\n <div class=\"review-container w-75\">\r\n <div class=\"review-name gap-2 my-2 d-flex align-items-center\">\r\n <img src=\"https://m.media-amazon.com/images/S/amazon-avatars-global/default.png\" alt=\"\"\r\n class=\"width-30 h-25 mr-2\">\r\n <span>{{review?.userName ?? \"-\"}}</span>\r\n </div>\r\n <ng-container *ngIf=\"review?.rating\">\r\n <p-rating [(ngModel)]=\"review.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n </ng-container>\r\n <div class=\"review-desc\">\r\n {{review?.review ?? \"-\"}}\r\n </div>\r\n <div class=\"review-img\">\r\n <img [src]=\"img.imgUrl\" alt=\"\" *ngFor=\"let img of review?.reviewImages ?? []\"\r\n (click)=\"showDetailReview(review)\">\r\n <button style=\"display: none;\" data-toggle=\"modal\" data-target=\"#reviewModal\"\r\n id=\"openReviewDetail\"></button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"w-75 see-more py-3\" (click)=\"loadMoreReviews()\" *ngIf=\"(reviewsData?.length ?? 0) > 3\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">\r\n See more reviews <span>></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" role=\"dialog\"\r\n aria-hidden=\"true\">\r\n <div class=\"modal-dialog modal-dialog-centered video-modal\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-body\" style=\"height: 100%;\">\r\n <video controls muted playsinline style=\"width: 100%; height: 100%;\">\r\n <source\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/371647c1753962084265clideo_editor_48bc93c24e18470888c661bb09e437da (online-video-cutter.com).mp4\"\r\n type=\"video/mp4\">\r\n Your browser does not support the video tag.\r\n </video>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"modal fade\" id=\"reviewModal\" tabindex=\"-1\" aria-labelledby=\"reviewModalLabel\" role=\"dialog\"\r\n aria-hidden=\"true\">\r\n <div class=\"modal-dialog review-modal\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h1 class=\"modal-title fs-5\"></h1>\r\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n </div>\r\n <div class=\"modal-body\">\r\n <div class=\"detail-review-container\">\r\n <div class=\"image-section\">\r\n <div class=\"product-image\">\r\n <div class=\"backward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex-1\"\r\n *ngIf=\"currentImageIndex > 0\">\u25BC</div>\r\n <img [src]=\"selectedReview?.reviewImages?.[currentImageIndex]?.imgUrl\" alt=\"\">\r\n <div class=\"forward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex+1\"\r\n *ngIf=\"currentImageIndex < selectedReview?.images?.length - 1\">\u25B2</div>\r\n <!-- <div class=\"earbuds-container\">\r\n <div class=\"charging-case\"></div>\r\n <div class=\"earbud left\"></div>\r\n <div class=\"earbud right\"></div>\r\n </div> -->\r\n </div>\r\n <!-- <div class=\"navigation-arrows\">\r\n </div> -->\r\n </div>\r\n\r\n <div class=\"review-section\">\r\n <div class=\"reviewer-header\">\r\n <div class=\"reviewer-avatar\">\uD83D\uDC64</div>\r\n <div class=\"reviewer-name\">{{selectedReview?.userName ?? \"-\"}}</div>\r\n </div>\r\n\r\n <div class=\"detail-rating\" *ngIf=\"selectedReview?.rating\">\r\n <p-rating [(ngModel)]=\"selectedReview.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n </div>\r\n\r\n <div class=\"review-date\">\r\n Reviewed in India on 24 July 2025\r\n </div>\r\n\r\n <div class=\"review-text\">\r\n {{selectedReview?.review ?? \"-\"}}\r\n </div>\r\n\r\n <div class=\"images-section\">\r\n <h3>Images in this review</h3>\r\n <div class=\"review-images\">\r\n <div class=\"review-image\" [ngClass]=\"{'selected': currentImageIndex == i}\"\r\n *ngFor=\"let img of selectedReview?.reviewImages ?? [];let i = index\" (click)=\"currentImageIndex = i\">\r\n <img [src]=\"img.imgUrl\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".product-desc{display:flex}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.strike-through{text-decoration:line-through;color:#d3d3d3}::ng-deep .smooth-panel .p-panel-header{cursor:pointer;background:transparent;border:unset;font-size:18px;font-weight:700;padding:0}::ng-deep .smooth-panel .p-panel-content{border:unset;padding:0}.jewel-container{border-radius:12px;box-shadow:#63636333 0 2px 8px}.jewel-header{padding:8px 10px;border-radius:12px 12px 0 0;font-size:15px;font-weight:700;color:#4f3267}.br-p{border-radius:0 0 12px 12px;padding:10px 0}.row-header{font-size:13px;font-weight:700;color:#4f3267}.row-content{color:#4e555e}.jewellery-table-container{border-radius:12px}.jewellery-table{width:100%;border-collapse:collapse;border:1px solid #ddd;transition:all .3s ease}.jewellery-table th,.jewellery-table td{border:1px solid #ddd;padding:12px;text-align:left;transition:background-color .2s ease}.material-header td{background-color:#f8f9fa;font-weight:700;font-size:16px}.column-header{background-color:#f1f1f1}.column-header th{font-weight:600}.material-row:hover{background-color:#f5f5f5}.charges-header th,.total-header th{background-color:#eaeaea;font-weight:700}.total-row td{font-weight:700;font-size:18px;background-color:#f8f8f8}@media screen and (max-width: 600px){.jewellery-table{font-size:14px}.jewellery-table th,.jewellery-table td{padding:8px}}.share-icon{border:1px solid;border-radius:8px;padding:5px;height:43px;width:40px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer}.prod-img-block{height:100%;display:flex;gap:5px}.header-text{font-size:17px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:1% 3%;border-radius:8px;letter-spacing:.5px}.pricebreakup-btn mat-icon{font-size:18px;display:flex;align-items:center}.img-list{display:flex;gap:5px;max-height:460px}.img-list img{height:100px;width:100px;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:100%;height:500px;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.price{font-weight:600;font-size:24px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:1px solid;align-items:center;gap:15px;height:44px;width:75%;justify-content:space-between;border-radius:12px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.fc{font-size:17px;font-weight:700}.trim-text{-webkit-line-clamp:3!important}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;margin-top:.5rem}.tab-group{display:flex;gap:10px}.tab{font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.discount-price{font-size:1.4rem}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#f7f7f7;padding:11px 20px;border-radius:12px;margin-top:unset!important;width:70%!important;border:1px solid #d3d3d347}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#f7f7f7;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:7px 25px;cursor:pointer;font-weight:600}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:5px;height:44px!important;justify-content:space-between;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:14px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.w-h-40{width:40px!important;height:40px!important}.product-detail{margin-top:0;height:100vh}.above-height{height:90vh;max-height:100vh;overflow-y:scroll}.height{height:100vh;overflow-y:auto}.mobile-footer{display:none}video{border-radius:18px}@media (min-width: 1024px){.zoom:hover{transform:scale(1.2);transition:transform .2s ease-in-out;overflow:hidden}.above-height{width:100%;display:flex;margin-top:25px}.product-detail{padding:2%}.product-heading{font-size:20px;font-weight:600;margin-top:5px}.prod-img-block{height:100%;display:flex;flex-direction:column-reverse;justify-content:start;gap:5px}}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:100000001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.product-desc{font-size:13px}.brief-desc{font-size:16px;margin-top:unset!important}.total-container{padding-top:10px!important;padding-bottom:4rem!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important;height:348px}.item-img img{width:100%;height:348px!important}.display-none{display:none}.prod-img-block{flex-direction:column;gap:5px}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.product-detail{margin-top:20px;overflow-x:hidden}.input-field{margin-top:.7rem!important;margin-bottom:.7rem!important}.prod-desc{margin-top:20px}.video-call-container{margin:0!important}.product-img{height:220px}.call-details{width:100%!important;padding:3%!important}.send-btn{padding:.5rem 1rem!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.favourite:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.review-sec :is(input,textarea){width:100%!important}.height{width:100%;height:auto}.above-height{padding:1%;height:unset!important}.product-heading{font-size:23px;font-weight:600}.discount-price{font-size:1.7rem!important}.header-text{font-size:20px!important}}.send-btn{font-size:14px!important;padding:1rem;display:flex;align-items:center;justify-content:center;text-transform:uppercase;font-weight:600}.send-btn mat-icon{height:20px;width:20px;font-size:18px}.favourite .mat-icon{min-height:40px;min-width:40px;font-size:25px;display:flex;align-items:center;justify-content:center;border-radius:5px;cursor:pointer}.favourite:hover,.share-product:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.border-solid{border:1px solid;border-radius:8px}a{text-decoration:none}.brief-desc{font-size:14px;color:#4e555e}.total-container{height:100vh;position:relative;display:block!important;overflow:scroll}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin:unset!important}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}.above-height{width:100%;padding:2%;display:flex;flex-direction:column}.product-detail{padding:0vw 42vw 0vw 2vw}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:911px){.product-detail{padding:0% 34% 0% 2%}.above-height{display:flex}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:1024px){.product-detail{padding:0% 2%}.above-height{display:flex}.product-headig{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}.mb-15{margin-bottom:15px}@media (min-width: 1400px){.container{max-width:unset;width:95%;height:100vh;overflow-y:auto}}.width-max{width:max-content}.width-34{width:33.3%!important}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}.f-18{font-size:18px}.offcanvas-variant{border-radius:30px 0 0 30px}.varient-header,.varient-price{background:#f7f7f7}.varient-header{border-radius:30px 0 0}.confirm-btn{border-radius:0 0 0 30px;position:absolute!important;bottom:0!important}.style2-container{border:1px solid;border-radius:12px;margin:0}.varient-item{border-right:1px solid;align-content:center}.variant-head{font-size:12px;color:#33363e}.varient-data{margin-bottom:25px;border-bottom:1px solid black;padding-bottom:25px}.variant-value{font-size:.9rem;color:#000}.custom-text{border-radius:0 8px 8px 0;font-size:.9rem;font-weight:600}.br-50{border-radius:50%}.w-15{width:22%!important}.scroll-wrap{flex-wrap:nowrap}.brand-text{word-wrap:break-word;white-space:normal;font-size:12px;font-weight:600;line-height:20px}.video-container{border:1px solid rgb(240,240,240);margin:10px 0;border-radius:12px}.video-head-text{font-size:16px;font-weight:700}.sub-text{font-size:11px;color:#6f7377;margin-bottom:10px}.sch-btn{font-size:1.2rem!important;color:#fff;padding:3px 0;margin-top:5px}.tax-text{font-size:.7rem;color:#6f7377}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.delivery-container{margin:35px 0 15px;background-color:transparent}.delivery-title{font-size:16px;font-weight:600;margin:0 0 12px;line-height:1.2}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:10px;margin-bottom:15px;width:100%}.location-icon{width:20px;height:20px;background-color:#374151;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.location-icon:before{content:\"\";width:8px;height:8px;background-color:#fff;border-radius:50%;position:absolute}.postal-code-input{font-size:12px;font-weight:600;letter-spacing:.5px;border:none;outline:none;background:transparent;width:90%}.postal-code-input::placeholder{font-weight:500}.locate-btn{background:none!important;border:none!important;font-weight:500;font-size:12px!important;padding:0!important;box-shadow:none!important;width:20%!important}.gps{font-size:17px}.locate-btn:focus{box-shadow:none!important}.delivery-section{margin-bottom:15px;border:1px solid rgb(240,240,240);padding:10px;border-radius:12px}.delivery-icon{font-size:18px;color:#ec4899;margin-right:14px;width:20px}.delivery-text{font-size:14px;font-weight:700}.store-section{border:1px solid rgb(240,240,240);padding:10px;border-radius:12px;margin-bottom:15px}.store-item{margin-bottom:11px}.store-icon{font-size:18px;color:#f97316;margin-right:14px;margin-top:2px;width:20px}.store-details{flex:1}.store-text{font-size:14px}.store-name{font-weight:700}.availability-section{margin-bottom:6px}.availability-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:#d97706;background-color:#fef3c7;padding:4px 8px;border-radius:12px;letter-spacing:.5px}.other-stores-text{font-size:14px;color:#6b7280;line-height:1.4}.other-stores-link{color:#6b46c1;cursor:pointer;text-decoration:underline}.other-stores-link:hover{color:#553c9a}.find-store-btn{width:100%!important;padding:8px 20px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px}.try-home-section{border-radius:12px;padding:10px;border:1px solid rgb(240,240,240)}.try-home-item{margin-bottom:10px;padding:0}.home-icon{font-size:18px;color:#6b46c1;margin-right:14px;margin-top:2px;width:20px}.try-home-details{flex:1}.try-home-text{font-size:14px;font-weight:700;color:#374151}.free-text{font-size:14px;color:#6b7280}.appointment-text{font-size:14px;color:#6b7280;line-height:1.4}.appointment-available{font-weight:500;color:#374151}.book-appointment-btn{background:linear-gradient(135deg,#8b5cf6,#a855f7);color:#fff;border:none;padding:8px 20px;border-radius:12px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px;transition:all .2s ease}.book-appointment-btn:hover{background:linear-gradient(135deg,#7c3aed,#9333ea);transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}@media (max-width: 480px){.container{display:flex;align-items:center;flex-direction:column}.location-section{padding:12px 0}.try-home-section{padding:20px}}.w-90{width:90%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.w-12{width:12%!important}.w-88{width:88%!important}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.border-unset{border:unset!important}.error-border{border:2px solid #dc3545!important}.offcanvas-small{height:72vh;top:25%;width:35%;border-radius:50px 0 0 50px}.rating{width:max-content;border:1px solid;border-radius:20px;padding:0 10px;margin-bottom:.5rem}.rating-no{padding-right:7px;margin:0;border-right:1px solid;font-size:.75rem}.p-10-20{padding:10px 30px}.price-break-header{font-size:19px;font-weight:600}.price-container{border-bottom:1px solid rgb(233,233,233)}.price-container-header{font-size:14px;font-weight:600;color:#333}.total-ratings{font-size:.75rem}.header-row .col-3{font-size:12px;font-weight:500;color:#666}.value-row .col-3{font-size:14px;font-weight:400;color:#333}.value-row .col-3.total{font-weight:600}.summary-row .col-6{font-size:15px;font-weight:500;color:#333;padding:unset}.summary-row .col-6.total{font-weight:600;padding-right:10px}.summary-row{padding:0 42px}.error-border{border:2px solid #e74c3c!important;box-shadow:0 0 5px #e74c3c4d!important}.form-control,.input-field input{transition:border-color .3s ease,box-shadow .3s ease}.error-border:focus{border-color:#e74c3c!important;box-shadow:0 0 8px #e74c3c80!important}.input-field input:focus{transform:scale(1.02)}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:-.125em;border:.125em solid currentcolor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}.spinner-border-sm{width:.875rem;height:.875rem;border-width:.125em}@keyframes spinner-border{to{transform:rotate(360deg)}}.me-2{margin-right:.5rem}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.width-30{width:30px!important}.review-header{font-size:20px;font-weight:600}.review-desc{font-weight:500}.see-more{font-weight:600;cursor:pointer;border-top:1px solid #d1d1d1}.see-more span{font-size:12px}.cust-header{font-size:24px}.bar{border:1px solid;height:20px;border-radius:5px;overflow:hidden}.bar div{border-radius:2px}.parent-container{height:100%;width:100%;display:flex}.home-appointment-text{font-size:.8rem;color:#4e555e}.home-appointment-text span{font-weight:600}.video-call-img{height:120px;margin:0;padding:0;border-radius:45px}.video-call-img img{border-top-left-radius:12px;border-bottom-left-radius:12px}.discount{background:#fff3f2;padding:15px 15px 20px;margin-top:14px;border-radius:8px;display:flex;flex-direction:column;gap:5px;position:relative}.discount p{margin-bottom:0;color:#4f3267;font-weight:700;font-size:1rem}.discount .offer{color:#eb4f5c}.discount:before{content:\"\";display:block;height:44px;width:4px;background:#eb4f5c;position:absolute;left:0;top:16px;border-top-right-radius:20px;border-bottom-right-radius:20px}.metal-purity{display:flex;flex-direction:column;gap:10px}.scrollable-content{height:100%;max-height:95vh;overflow-y:auto}.style-2-img{max-height:70%;height:100%!important}.ring-size-video{background:#f0ebff;display:flex;justify-content:space-between;align-items:center;height:45px;padding:12px;border-radius:10px;margin-top:20px;margin-bottom:20px}.ring-size-video .text{color:#4f3267;font-size:.9rem}.ring-size-video .learn-how{color:#de57e9;font-weight:700;font-size:1rem;display:flex;gap:5px;align-items:center;cursor:pointer}.ring-size-video .learn-how mat-icon{font-size:20px;display:flex;align-items:center}.ring-size-video p{margin-bottom:0}.video-modal{height:90vh!important;width:90vw!important;max-width:none}.video-modal .modal-body{padding:0}.review-section{border-radius:10px;padding:15px}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.detail-review-container{display:flex;max-width:1200px;margin:0 auto;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px #0000001a}.image-section{flex:1;background:#000;position:relative;min-height:400px}.product-image{width:100%;height:100%;object-fit:cover;background:linear-gradient(135deg,#e8e8e8,#d0d0d0);display:flex;align-items:center;justify-content:center;max-height:400px;position:relative}.product-image img{height:100%;width:100%;object-fit:contain}.earbuds-container{position:relative;width:300px;height:200px}.charging-case{width:200px;height:120px;background:linear-gradient(145deg,#f0f0f0,#e0e0e0);border-radius:25px;position:absolute;top:40px;left:50px;box-shadow:inset 0 4px 8px #0000001a}.charging-case:before{content:\"\";position:absolute;inset:10px;background:linear-gradient(145deg,#e8e8e8,#d8d8d8);border-radius:15px;box-shadow:inset 0 2px 4px #0000001a}.earbud{position:absolute;width:45px;height:15px;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border-radius:8px;box-shadow:0 2px 4px #0003}.earbud:before{content:\"noise\";position:absolute;top:2px;left:50%;transform:translate(-50%);font-size:6px;color:#888;font-weight:300}.earbud.left{top:70px;left:80px}.earbud.right{top:90px;left:130px}.earbud.right:before{color:#ff6b35}.review-section{flex:1;padding:30px;background:#fafafa}.reviewer-header{display:flex;align-items:center;margin-bottom:15px}.reviewer-avatar{width:40px;height:40px;background:#ccc;border-radius:50%;margin-right:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#666}.reviewer-name{font-size:16px;font-weight:500;color:#333}.detail-rating{margin:10px 0}.stars{display:flex;gap:2px;margin-bottom:5px}.star{color:#ff9500;font-size:18px}.thumbs{display:flex;gap:5px}.thumb{color:#ff9500;font-size:16px}.review-date{font-size:14px;color:#666;margin:15px 0}.review-text{font-size:16px;line-height:1.5;color:#333;margin-bottom:25px}.images-section h3{font-size:16px;color:#666;margin-bottom:15px;font-weight:500}.review-images{display:flex;gap:10px}.review-image{width:60px;height:60px;background:#ddd;border-radius:6px;border:2px solid #e0e0e0;cursor:pointer;transition:border-color .3s}.review-image img{width:100%;height:100%}.review-image:hover,.review-image.selected{border-color:#007185}.navigation-arrows{position:absolute;top:20px;right:20px;display:flex;flex-direction:column;gap:10px}.arrow{width:40px;height:40px;background:#fffc;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:#666;transition:background-color .3s;position:absolute;transform:rotate(90deg)}.backward-arrow{left:10px}.forward-arrow{right:10px}.arrow:hover{background:#fff}@media (max-width: 768px){.review-container{flex-direction:column}.image-section{min-height:300px}.review-section{padding:20px}}.review-modal{max-width:none;width:70vw}.review-modal .modal-body{padding:0}@media screen and (max-width: 475px){.offcanvas-small{height:100vh;width:100%;top:0}.review-modal{margin:0;height:100%;width:100%}.detail-review-container{flex-direction:column;height:100%}.product-image{max-height:289px}.image-section{min-height:289px}.video-modal{margin:0;height:100vh!important;width:100vw!important;overflow:hidden}}.modal{z-index:100000033}\n"] }]
|
|
18707
18561
|
}], ctorParameters: () => [{ type: Object, decorators: [{
|
|
18708
18562
|
type: Inject,
|
|
18709
18563
|
args: [PLATFORM_ID]
|
|
18710
|
-
}] }, { type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: RestService }, { type: CartService }, { type: StorageServiceService }, { type: i6$1.MessageService }, { type: i1$2.Meta }, { type: i1$2.Title }, { type: i8$3.MatBottomSheet }, { type: i0.Renderer2 }, { type: i1$1.MatDialog }
|
|
18564
|
+
}] }, { type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: RestService }, { type: CartService }, { type: StorageServiceService }, { type: i6$1.MessageService }, { type: i1$2.Meta }, { type: i1$2.Title }, { type: i8$3.MatBottomSheet }, { type: i0.Renderer2 }, { type: i1$1.MatDialog }], propDecorators: { reviewComponent: [{
|
|
18711
18565
|
type: ViewChild,
|
|
18712
18566
|
args: [CustomerReviewComponent, { static: false }]
|
|
18713
18567
|
}], aboveHeight: [{
|
|
@@ -18781,7 +18635,7 @@ class ProductListComponent extends BaseSection {
|
|
|
18781
18635
|
onWindowScroll(event) {
|
|
18782
18636
|
this.scrollingValue = window.pageYOffset || document.documentElement.scrollTop;
|
|
18783
18637
|
}
|
|
18784
|
-
constructor(platformId, _eventService, restService, router, activatedRoute, storageService, matBottomSheet, matDialog, cartService, messageService, renderer
|
|
18638
|
+
constructor(platformId, _eventService, restService, router, activatedRoute, storageService, matBottomSheet, matDialog, cartService, messageService, renderer) {
|
|
18785
18639
|
super();
|
|
18786
18640
|
this.platformId = platformId;
|
|
18787
18641
|
this._eventService = _eventService;
|
|
@@ -18794,7 +18648,6 @@ class ProductListComponent extends BaseSection {
|
|
|
18794
18648
|
this.cartService = cartService;
|
|
18795
18649
|
this.messageService = messageService;
|
|
18796
18650
|
this.renderer = renderer;
|
|
18797
|
-
this.analyticsService = analyticsService;
|
|
18798
18651
|
this.responseData = [];
|
|
18799
18652
|
this.isLoading = false;
|
|
18800
18653
|
this.apiLoading = false;
|
|
@@ -19006,7 +18859,6 @@ class ProductListComponent extends BaseSection {
|
|
|
19006
18859
|
this.pageNo = 1;
|
|
19007
18860
|
this.isAllListLoaded = false;
|
|
19008
18861
|
this.responseData = [];
|
|
19009
|
-
this.fetchAnalytics();
|
|
19010
18862
|
this.restService.getFilteredProduct(this.collections.filter(x => x.status).map(x => x.id), this.categories.filter(x => x.status).map(x => x.id), this.searchText, this.pricingMin, this.pricingMax, this.sortBy ?? "", this.pageNo - 1, this.size).subscribe((response) => {
|
|
19011
18863
|
this.responseData = response.data ?? [];
|
|
19012
18864
|
this.totalCount = response.count ?? 0;
|
|
@@ -19103,8 +18955,8 @@ class ProductListComponent extends BaseSection {
|
|
|
19103
18955
|
this.isLoading = response;
|
|
19104
18956
|
});
|
|
19105
18957
|
this.IsEcommerce = localStorage.getItem("websiteType") != 'STATIC' ? true : false;
|
|
19106
|
-
|
|
19107
|
-
|
|
18958
|
+
this.getAllCategories();
|
|
18959
|
+
this.getAllCollections();
|
|
19108
18960
|
this.minProductPrice = this.pricingMin = this.data?.styles.minPrice ?? 0;
|
|
19109
18961
|
this.maxProductPrice = this.pricingMax = this.data?.styles.maxPrice ?? 30000;
|
|
19110
18962
|
this.searchText = this.activatedRoute.snapshot.queryParams["searchTxt"];
|
|
@@ -19114,52 +18966,10 @@ class ProductListComponent extends BaseSection {
|
|
|
19114
18966
|
this.sortBy = qParam["sorting"] ?? "";
|
|
19115
18967
|
this.pricingMin = isNaN(Number(qParam["minPrice"])) ? 0 : Number(qParam["minPrice"]);
|
|
19116
18968
|
this.pricingMax = isNaN(Number(qParam["maxPrice"])) ? 0 : Number(qParam["maxPrice"]);
|
|
19117
|
-
|
|
18969
|
+
this.filterByCategoryCollectionParam(qParam["category"], qParam["collections"]);
|
|
19118
18970
|
});
|
|
19119
18971
|
this.button = this.data?.action?.buttons?.[0];
|
|
19120
|
-
this.
|
|
19121
|
-
// this.filterItemList();
|
|
19122
|
-
}
|
|
19123
|
-
fetchAnalytics() {
|
|
19124
|
-
let analyticsEvent = {};
|
|
19125
|
-
if (this.searchText) {
|
|
19126
|
-
analyticsEvent['SEARCH'] = this.searchText;
|
|
19127
|
-
}
|
|
19128
|
-
if (this.pricingMin) {
|
|
19129
|
-
analyticsEvent['MIN_PRICE'] = this.pricingMin;
|
|
19130
|
-
}
|
|
19131
|
-
if (this.pricingMax) {
|
|
19132
|
-
analyticsEvent['MAX_PRICE'] = this.pricingMax;
|
|
19133
|
-
}
|
|
19134
|
-
if (this.sortBy) {
|
|
19135
|
-
analyticsEvent['SORT_BY'] = this.sortBy;
|
|
19136
|
-
}
|
|
19137
|
-
analyticsEvent['CATEGORIES'] = this.categories.filter(x => x.status).map(x => x.id);
|
|
19138
|
-
analyticsEvent['COLLECTIONS'] = this.collections.filter(x => x.status).map(x => x.id);
|
|
19139
|
-
this.analyticsService.startNewContext(analyticsEvent);
|
|
19140
|
-
}
|
|
19141
|
-
getCategoriesAndCollection() {
|
|
19142
|
-
forkJoin([
|
|
19143
|
-
this.restService.getAllCollections().pipe(catchError(err => {
|
|
19144
|
-
console.error("Collections failed", err);
|
|
19145
|
-
return of([]); // fallback empty array
|
|
19146
|
-
})),
|
|
19147
|
-
this.restService.getAllCategories().pipe(catchError(err => {
|
|
19148
|
-
console.error("Categories failed", err);
|
|
19149
|
-
return of([]); // fallback empty array
|
|
19150
|
-
}))
|
|
19151
|
-
]).subscribe({
|
|
19152
|
-
next: (res) => {
|
|
19153
|
-
this.categories = res[1].filter((category) => category.featuredCollection || true).map((category) => { return { option: category.categoryName, id: category.categoryId, imgUrl: category.imgUrl?.[0], status: false }; });
|
|
19154
|
-
this.collections = res[0].filter((collection) => collection.featuredCategory || true).map((collection) => { return { option: collection.collectionName, id: collection.collectionId, status: false }; });
|
|
19155
|
-
const qParamCollections = this.activatedRoute.snapshot.queryParams["collections"];
|
|
19156
|
-
const qParamCategory = this.activatedRoute.snapshot.queryParams["category"];
|
|
19157
|
-
this.filterByCategoryCollectionParam(qParamCategory, qParamCollections);
|
|
19158
|
-
},
|
|
19159
|
-
error: (res) => {
|
|
19160
|
-
this.filterItemList();
|
|
19161
|
-
}
|
|
19162
|
-
});
|
|
18972
|
+
this.filterItemList();
|
|
19163
18973
|
}
|
|
19164
18974
|
get selectedCategoryCollectionChips() {
|
|
19165
18975
|
const chips = [];
|
|
@@ -19721,7 +19531,7 @@ class ProductListComponent extends BaseSection {
|
|
|
19721
19531
|
const brightness = (r * 299 + g * 587 + b * 114) / 1000;
|
|
19722
19532
|
return brightness > threshold ? '#000000' : '#ffffff';
|
|
19723
19533
|
}
|
|
19724
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductListComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: StorageServiceService }, { token: i8$3.MatBottomSheet }, { token: i1$1.MatDialog }, { token: CartService }, { token: i6$1.MessageService }, { token: i0.Renderer2 }
|
|
19534
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductListComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: StorageServiceService }, { token: i8$3.MatBottomSheet }, { token: i1$1.MatDialog }, { token: CartService }, { token: i6$1.MessageService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
19725
19535
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)", "window:scroll": "onWindowScroll($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "listScrollContainer", first: true, predicate: ["listScrollContainer"], descendants: true }, { propertyName: "filterScroll", first: true, predicate: ["filterScroll"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<!-- <div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\r\n <mat-icon class=\"f-20 d-flex align-item-center justify-content-center\">search</mat-icon>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div> -->\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\"\r\n [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n\r\n <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n <p-speedDial [model]=\"items\" direction=\"up\"\r\n [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\"></p-speedDial>\r\n </div> -->\r\n\r\n <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\r\n <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\"\r\n style=\"width: 20%; padding:1rem 0rem;border-bottom: 1px solid #D8D8D8;\">\r\n <div class=\"filter body-large\">\r\n Filters\r\n </div>\r\n <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\r\n CLEAR ALL\r\n </div>\r\n </div>\r\n <div itemid=\"top-section\" class=\"d-flex align-items-center justify-content-between\"\r\n style=\"width: 77.5%; margin-right: 1%;\">\r\n <div class=\"d-flex gap-15\" style=\"width: 75%; display:flex; flex-wrap:wrap\">\r\n <ng-container *ngFor=\"let filter of filteredChips\">\r\n <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\r\n <span>{{filter.name}}</span>\r\n <span style=\"cursor: pointer; width:20px; height: 20px;\">\r\n <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\r\n </span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <!-- <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n <select [(ngModel)]=\"sortBy\" (change)=\"applyFilter($event, 'SORT')\" style=\"color: black;\">\r\n <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{ filter.name }}</option>\r\n </select>\r\n </div> -->\r\n <div class=\"custom-sort-dropdown\" tabindex=\"0\" (blur)=\"closeDropdown()\" (click)=\"toggleDropdown()\">\r\n <span class=\"sort-label\">Sort By:</span>\r\n <span class=\"selected-value\">{{ getSelectedName() || 'Featured' }}</span>\r\n <span class=\"toggle-icon\" [class.open]=\"isOpen\">▾</span> <!-- Down arrow, rotates open -->\r\n\r\n <div class=\"options\" *ngIf=\"isOpen\">\r\n <div *ngFor=\"let filter of filteringArray\" class=\"option\" [class.selected]=\"filter.value === sortBy\"\r\n (click)=\"selectOption(filter, $event)\">\r\n {{ filter.name }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"isMobile\" class=\"d-flex w-100 onlyMobile gap-15 flex-wrap\">\r\n <ng-container *ngFor=\"let filter of filteredChips\">\r\n <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\r\n <span>{{filter.name}}</span>\r\n <span style=\"cursor: pointer; width:20px; height: 20px;\">\r\n <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\r\n </span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"main-product-section\">\r\n <div class=\"filter-side\">\r\n <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n </div>\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n <ng-container *ngIf=\"!apiLoading\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\"\r\n (scroll)=\"handleProductListScroll()\" #listScrollContainer>\r\n <div *ngFor=\"let product of responseData; let i = index\" class=\"product\"\r\n [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor:pointer; position: relative;\">\r\n <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product, index: i}\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"styles?.theme != theme.Theme1\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"screenWidth > 475\"\r\n [index]=\"i\"></simpo-small-product-listing>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <simpo-card-skeleton-loader *ngIf=\"isListLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n <section class=\"empty-cart\" *ngIf=\"!isListLoading && responseData?.length == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" style=\"height: 150px; width: 150px;\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Product list is empty\r\n </div>\r\n <div class=\"description d-flex justify-content-center mt-4\">\r\n Looks like no item is present with filter. Go ahead & explore top categories.\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-container>\r\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n </div>\r\n\r\n <div class=\"bottom-filter\">\r\n <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n <mat-icon>sort</mat-icon>\r\n <span>Sort by</span>\r\n </div>\r\n <div class=\"divider\"></div>\r\n <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n <mat-icon>filter_list</mat-icon>\r\n <span>Filter</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isEcommerce]=\"true\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\"\r\n [theme]=\"{ width: '100%', height: '40vh', 'border-radius': '10px', 'position': 'relative', 'right': '5px' }\"></ngx-skeleton-loader>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <div class=\"fav-icon-wrapper\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border\r\n </mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite\r\n </mat-icon>\r\n <span class=\"fav-tooltip\">\r\n {{ product.whislist ? 'Remove from wishlist' : 'Add to wishlist' }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n\r\n<ng-template #Tags let-product=\"data\">\r\n <div class=\"tag-icon\" *ngIf=\"product.tags\">{{product.tags}}</div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #FilterSection>\r\n <section>\r\n <div class=\"categories-section\" *ngIf=\"categories?.length\">\r\n <div class=\"categories heading-small\">\r\n <h6><b>Shop by Categories</b></h6>\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let category of displayedCategories\"\r\n (click)=\"applyFilter(category, 'FILTER')\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"category.status\" />\r\n <div class=\"trim-text\">{{category.option | titlecase}}</div>\r\n </div>\r\n <div *ngIf=\"categories.length > 4\" class=\"toggle-categories\" (click)=\"toggleCategories()\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <span class=\"toggle-text\">\r\n {{ showAllCategories ? 'Show Less' : 'Show More' }}\r\n <span class=\"dropdown-icon\">\r\n <ng-container *ngIf=\"!showAllCategories\">\r\n <mat-icon>expand_more</mat-icon>\r\n </ng-container>\r\n <ng-container *ngIf=\"showAllCategories\">\r\n <mat-icon>expand_less</mat-icon>\r\n </ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n <div class=\"categories heading-small\">\r\n <h6><b>Shop by Collections</b></h6>\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let collection of displayedCollections\"\r\n (click)=\"applyFilter(collection, 'FILTER')\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"collection.status\" />\r\n <div class=\"trim-text\">{{collection.option | titlecase}}</div>\r\n </div>\r\n <div *ngIf=\"collections.length > 4\" class=\"toggle-categories\" (click)=\"toggleCollections()\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <span class=\"toggle-text\">\r\n {{ showAllCollections ? 'Show Less' : 'Show More' }}\r\n <span class=\"dropdown-icon\">\r\n <ng-container *ngIf=\"!showAllCollections\"><mat-icon>expand_more</mat-icon></ng-container>\r\n <ng-container *ngIf=\"showAllCollections\"><mat-icon>expand_less</mat-icon></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"categories-section\">\r\n <div class=\"categories heading-small\">\r\n <h6><b>Ratings</b></h6>\r\n </div>\r\n <div class=\"category-options\"\r\n *ngFor=\"let size of ['5 Stars', '4 Stars above', '3 Stars above', '2 Stars above', '1 Star above']\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\" />\r\n <div class=\"trim-text\">{{ size }}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"categories-section\">\r\n <div class=\"categories heading-small\">\r\n <h6><b>Shop by price</b></h6>\r\n </div>\r\n <label class=\"category-options\" *ngFor=\"let range of priceRanges;let i = index\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [(ngModel)]=\"range.selected\" (change)=\"onPriceRangeChange(i)\" />\r\n <div class=\"trim-text\">{{ range.label }}</div>\r\n </label>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small\">\r\n <h6><b>Product Type</b></h6>\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let size of productTypesData\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleProductSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small\">\r\n <h6><b>Shop for</b></h6>\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let size of shopForData\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleShopSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small\">\r\n <h6><b>Material</b></h6>\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let size of materialSizeData\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleMaterialSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small\">\r\n <h6><b>Metal</b></h6>\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let size of metalSizeData\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleMetalSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small\">\r\n <h6><b>Ring Style</b></h6>\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let size of ringSizes\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #SortingSection>\r\n <section style=\"padding: 10px\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n <span>Sort by</span>\r\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n </div>\r\n <mat-radio-group class=\"d-flex flex-column\" [(ngModel)]=\"sortBy\">\r\n <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"selectOption(sortingType, $event)\"\r\n [value]=\"sortingType.value\">{{sortingType.name}}</mat-radio-button>\r\n </mat-radio-group>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc let-product=\"data\" let-index=\"index\">\r\n <ng-template #theme1style1>\r\n <div class=\"product-card position-relative h-100\" [ngClass]=\"{'hover-effect': styles?.theme == theme.Theme1}\">\r\n <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\"\r\n class=\"default-image position-relative\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\r\n (click)=\"proceedToProductDesc(product.itemId)\" [simpoBackground]=\"styles?.background\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\r\n </div>\r\n\r\n <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\"\r\n class=\"default-image position-relative\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"getProductImages(product)\" alt=\"\" class=\"product-img\" [class.fade-out]=\"imageIndex == index\"\r\n (click)=\"proceedToProductDesc(product.itemId)\" [simpoBackground]=\"styles?.background\">\r\n <div class=\"carousel-buttons\" *ngIf=\"product.itemImages?.length > 1\">\r\n <div><mat-icon (click)=\"changeImage(product, 'PREV', index)\">keyboard_arrow_left</mat-icon></div>\r\n <div><mat-icon (click)=\"changeImage(product, 'NEXT', index)\">keyboard_arrow_right</mat-icon></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\r\n </div>\r\n\r\n <div class=\"mt-2 w-100\">\r\n <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\r\n [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n (click)=\"selectVarient(product, varient)\">\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex align-item-center justify-content-between\" [style.display]=\"true ? 'block!important' : ''\">\r\n <div class=\"price body-large text-left d-flex align-items-center g-10\">\r\n <div class=\"fs-16\">\r\n <span [innerHTML]='currency'></span>\r\n {{product?.price?.sellingPrice | number:'1.2-2'}}\r\n </div>\r\n\r\n <div class=\"fs-16 text-start\">\r\n <span *ngIf=\"product?.price?.value - product?.price?.discountedPrice > 2\" class=\"discount-price\">\r\n {{product?.price?.value | number:'1.2-2'}}\r\n </span>\r\n </div>\r\n <!-- <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice < product?.price?.sellingPrice\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.sellingPrice | number:'1.2-2'}}\r\n </div> -->\r\n </div>\r\n\r\n <div class=\"product-name heading-large w-100 text-left trim-text\"\r\n [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n\r\n <div\r\n *ngIf=\"content?.display?.showButton && !ecomConfigs?.appointmentBookingEnabled && product.itemInventory?.openingStock > 0\"\r\n class=\"add-to-cart-btn\">\r\n <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n [id]=\"data?.id+getButtonId(1)\" *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\r\n <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\r\n <div class=\"quantity full-width-quantity\" [style.borderColor]=\"getButtonStyle(1)?.background\"\r\n [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n [style.color]=\"getButtonStyle(1)?.textColor\"\r\n (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n </div>\r\n </div>\r\n <div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n <div class=\"try-button-section\"\r\n *ngIf=\"content?.display?.showButton && ecomConfigs?.appointmentBookingEnabled && product?.itemInventory?.openingStock > 0\">\r\n <div class=\"try-at-home\">\r\n <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\r\n HOME</button>\r\n </div>\r\n <div class=\"video-call-image\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\r\n alt=\"video\" (click)=\"openDialogBox(dialogBox, product.name)\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-container *ngIf=\"screenWidth < 475 && styles?.mobileColumn === 1; else theme1style1\">\r\n <div class=\"row w-100\">\r\n <div class=\"col-8 d-flex flex-column gap-3\">\r\n <div class=\"text-left\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n <div class=\"fs-16 text-start\">\r\n <span [innerHTML]='currency'></span>\r\n {{product?.price?.sellingPrice | number:'1.2-2'}}\r\n </div>\r\n <div class=\"d-flex w-45\">\r\n <div\r\n *ngIf=\"content?.display?.showButton && !ecomConfigs?.appointmentBookingEnabled && product.itemInventory?.openingStock > 0\"\r\n class=\"add-to-cart-btn w-100\">\r\n <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n [id]=\"data?.id+getButtonId(1)\" *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\r\n <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\r\n <div class=\"quantity full-width-quantity br-8\" [style.borderColor]=\"getButtonStyle(1)?.background\"\r\n [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\r\n [style.color]=\"getButtonStyle(1)?.textColor\"\r\n (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\r\n [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n </div>\r\n </div>\r\n <div>\r\n <button disabled class=\"out-of-stock w-100\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n <div class=\"try-button-section w-100\"\r\n *ngIf=\"content?.display?.showButton && ecomConfigs?.appointmentBookingEnabled && product?.itemInventory?.openingStock > 0\">\r\n <div class=\"try-at-home\">\r\n <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\r\n HOME</button>\r\n </div>\r\n <div class=\"video-call-image\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\r\n alt=\"video\" (click)=\"openDialogBox(dialogBox, product.name)\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 h-100 position-relative\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"getProductImages(product)\" alt=\"\" class=\"w-h-110\" [class.fade-out]=\"imageIndex == index\"\r\n (click)=\"proceedToProductDesc(product.itemId)\">\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n </ng-container>\r\n\r\n\r\n\r\n\r\n\r\n</ng-template>\r\n\r\n\r\n\r\n<ng-template #dialogBox>\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header d-flex align-item-center\">\r\n <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n <div class=\"schedule-header d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon (click)=\"matCloseDialog()\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"modal-body h-100\">\r\n <div class=\"row h-100 w-100 video-call-container\">\r\n <div class=\"col-6 h-100\" *ngIf=\"!isMobile\">\r\n <img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/557699c1753779503913freepik-overhead-shot-a-person-holding-a-smartphone-with-a-1029_vmg8GqHj (online-video-cutter.com).gif\"\r\n alt=\"\" class=\"w-100 h-100\" style=\"object-fit: cover;\">\r\n </div>\r\n <div class=\"col-6 position-relative h-100 call-details\">\r\n <!-- Name Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n (input)=\"onInputChange('username')\">\r\n </div>\r\n\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n (input)=\"onInputChange('email')\">\r\n </div>\r\n\r\n <!-- Mobile Number Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n <div class=\"sub-text-call\">IN +91</div>\r\n <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n (input)=\"onInputChange('mobileNumber')\">\r\n </div>\r\n\r\n\r\n <!-- Pincode Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n (input)=\"onInputChange('pincode')\">\r\n </div>\r\n <div class=\"language my-3\">\r\n <div class=\"mini-text mb-2\">Language Preference</div>\r\n <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n <ng-container *ngFor=\"let lang of languages\">\r\n <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectedLang = lang\"\r\n [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\r\n {{lang}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n <div class=\"input-field my-3\">\r\n <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n </div>\r\n </ng-container>\r\n <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\" (click)=\"scheduleVideoCall()\"\r\n [disabled]=\"isSubmitting\">\r\n <ng-container *ngIf=\"isSubmitting\">\r\n <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n <span class=\"visually-hidden\">Loading...</span>\r\n </div>\r\n SCHEDULING...\r\n </ng-container>\r\n <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n <mat-icon>video_call</mat-icon> \r\n SCHEDULE A VIDEO CALL\r\n </ng-container>\r\n <ng-container *ngIf=\"scheduled\">\r\n <mat-icon>check_circle</mat-icon> \r\n SCHEDULED SUCCESSFULLY\r\n </ng-container>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}input[type=checkbox]{accent-color:var(--color)}.total-container{position:relative}.discount-price{color:#d3d3d3;text-decoration:line-through}.custom-sort-dropdown{display:inline-flex;justify-content:flex-end;flex-grow:1;align-items:center;gap:6px;padding:6px 12px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-weight:600;color:#000;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:6px;position:relative;background-color:#fff;width:fit-content;min-width:fit-content;max-width:fit-content;outline:none;border:none}.sort-label{color:#555;white-space:nowrap}.selected-value{flex-shrink:0;white-space:nowrap;color:#000}.toggle-icon{font-size:20px;transition:transform .3s ease;-webkit-user-select:none;user-select:none}.toggle-icon.open{transform:rotate(180deg)}.options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#fff;border:none;border-radius:0 0 6px 6px;box-shadow:0 4px 6px #0000001a;max-height:180px;overflow-y:auto;z-index:100;font-weight:400;text-align:left!important}.option{padding:8px 12px;cursor:pointer;white-space:nowrap;transition:background-color .2s ease}.option:hover{background-color:#fff;color:#000}.option.selected{background-color:#fff;color:#000;font-weight:600}.video-call-container{align-items:center}@media screen and (min-width: 1024px){.add-to-cart-btn{display:none}.add-to-cart-btn button{height:35px;font-size:16px!important}.product-card .add-to-cart-btn,.product-card{display:none}.product-card:hover .add-to-cart-btn,.product-card:hover{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important}.product-card .try-button-section{display:none}.product-card:hover .try-button-section{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important;box-shadow:0 16px 32px #b6b2b233}.product-card .fav-icon{display:none}.product-card:hover .fav-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100!important}}::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:#fff!important}.fav-icon{position:absolute;z-index:100;padding:5px;right:10px;top:10px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.f-20{font-size:20px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.fav-tooltip{visibility:hidden;opacity:0;background:#222;color:#fff;font-size:10px;padding:4px 10px;border-radius:5px;position:absolute;top:40px;right:30px;white-space:nowrap;z-index:200;transition:opacity .2s;pointer-events:none;box-shadow:0 2px 8px #00000026}.fav-icon-wrapper:hover .fav-tooltip{visibility:visible;opacity:1}.discounted-price{margin-top:-3px;font-size:14px!important}.filter-side{width:20%;position:sticky;top:0;overflow-y:auto;height:100%}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.price-ranges{display:flex;flex-direction:column;gap:8px;padding-left:8px;max-width:250px}.send-btn:hover{transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}.price-range-item{font-size:14px;color:#333;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px}.price-range-item input[type=checkbox]{width:16px;height:16px}.categories-section{padding:.8rem 0rem;border-bottom:1px solid #D8D8D8}.categories-section:last-child{padding:.8rem 0rem;border-bottom:none}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.toggle-categories{margin-top:8px;cursor:pointer;font-weight:500;display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none;width:100%}.empty-cart{display:flex;align-items:center;justify-content:center;text-align:center;height:75vh}.toggle-text .dropdown-icon{margin-left:6px;font-size:1em;margin-top:5px}.toggle-text{display:flex;align-items:center}.categories{display:flex;padding:1rem 0rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 0rem;gap:11px;font-weight:400!important}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem 1.5rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px;white-space:nowrap;overflow:hidden}.chip{padding:5px 15px;border-radius:20px;gap:5px;width:max-content;margin:3px 0;transition:.3s opacity ease;border:1px solid}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;flex-direction:column-reverse}.price-range{color:#93959e;font-size:15px;white-space:nowrap}.right-side{width:80%;padding-bottom:50px;height:100vh;overflow-y:auto;flex:1 1 0;min-width:0}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray;cursor:pointer}.varient-list .selected-varient{border:1px solid transparent}:is() .speeddial-linear .p-speeddial-direction-up{position:relative;bottom:0%;right:0}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group-sticky{width:100%;height:57px}.input-group{position:sticky;top:0;width:95%;z-index:100;padding:5px;outline:none;border:none;border-radius:5px;height:7vh;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.back-to-home{background-color:#9b9a9a1c;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:fixed;right:3px;top:50%;cursor:pointer}.back-to-home .mat-icon{font-size:16px;height:16px;width:16px}.try-button-section{display:flex;justify-content:space-between;align-items:center}.try-button-section .try-at-home{width:78%}.try-button-section .try-at-home button{border:1px solid #DE57E5;border-radius:5px;font-size:14px!important;padding:5px 0!important}.try-button-section .video-call-image{width:20%;height:32px}.try-button-section .video-call-image img{width:100%;height:100%}.box-shadow{box-shadow:#0000003d 0 3px 4px;border-radius:10px!important}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mtb-5{margin-top:5px;margin-bottom:5px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.gap-15{gap:15px}.flex-wrap{flex-wrap:wrap}.carousel-buttons{display:flex;position:absolute;bottom:0;left:10px;gap:5px;transform:translateY(-50%);pointer-events:none}.carousel-buttons div{background:#fff;display:flex;align-items:center;border-radius:100%;justify-content:center;pointer-events:auto}.main-product-section{height:100vh;display:flex;position:relative}.filter-side{max-width:20%;width:100%;flex:0 0 20%}.modal-content{height:100%;border:none;border-radius:0!important}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9;border-radius:0!important}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.tag-icon{position:absolute!important;top:10px;left:10px;background:#e9bb18;text-transform:uppercase;padding:5px 10px;border:none;border-radius:8px;font-size:10px;color:#000}.product-parent{width:100%;display:flex;flex-wrap:wrap;padding:10px;z-index:1}.product-parent .product{height:auto;transform:none;z-index:1;border-radius:10px;background-color:#fff}.product-parent .product .product-card{height:100%;padding:10px;display:flex;flex-direction:column;justify-content:flex-start;transition:all .3s ease-in-out}.product-parent .product .product-name{color:#222;font-size:14px!important;line-height:26px;margin-bottom:10px;text-align:left!important;width:220px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:all .3s ease-in-out}.product-parent .product .product-img{border-radius:10px;width:100%;height:180px;z-index:1;border:.5px solid #eee}.product-parent .product .default-image img{width:100%;height:180px;border-radius:10px}.product-parent .product:hover{height:auto!important;transform:scale(1.05);box-shadow:0 16px 32px #b6b2b299;z-index:100!important}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:0!important}.product-name{font-size:14px}.product-parent{gap:10px}.product{padding:10px!important;margin-top:0!important;height:auto!important;transform:none!important;z-index:1!important;box-shadow:0 8px 16px #0003!important}.product .product-card{padding:0!important}.out-of-stock{font-size:12px!important}.discounted-price{font-size:14px!important}.add-to-cart-btn button{font-size:14px!important;padding:5px!important}.call-details{width:100%}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:flex!important;row-gap:0px}.onlyMobile mat-icon{pointer-events:auto!important;z-index:1000}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:100000001;width:100%;margin-left:-5px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:100%}.default-image img{width:100%;height:100%;box-shadow:#0000003d 0 3px 8px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important;height:95%!important;padding-bottom:0!important}.main-product-section{height:auto;display:flex;position:relative;padding-bottom:7rem}}.fs-16{font-size:16px!important}.mobile-filter-chip{display:flex;align-items:center;gap:15px;border:1px solid;border-radius:30px;padding:5px 15px;height:35px}.mobile-filter-chip mat-icon{font-size:20px;display:flex;align-items:center;justify-content:center}.w-h-110{width:110px;height:110px}.w-45{width:45%}.br-8{border-radius:8px}.w-35{width:35%!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: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatSelectModule }, { 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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i7$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass", "index"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
|
19726
19536
|
}
|
|
19727
19537
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductListComponent, decorators: [{
|
|
@@ -19753,7 +19563,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
19753
19563
|
}], ctorParameters: () => [{ type: Object, decorators: [{
|
|
19754
19564
|
type: Inject,
|
|
19755
19565
|
args: [PLATFORM_ID]
|
|
19756
|
-
}] }, { type: EventsService }, { type: RestService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: StorageServiceService }, { type: i8$3.MatBottomSheet }, { type: i1$1.MatDialog }, { type: CartService }, { type: i6$1.MessageService }, { type: i0.Renderer2 }
|
|
19566
|
+
}] }, { type: EventsService }, { type: RestService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: StorageServiceService }, { type: i8$3.MatBottomSheet }, { type: i1$1.MatDialog }, { type: CartService }, { type: i6$1.MessageService }, { type: i0.Renderer2 }], propDecorators: { responseData: [{
|
|
19757
19567
|
type: Input
|
|
19758
19568
|
}], data: [{
|
|
19759
19569
|
type: Input
|
|
@@ -24165,14 +23975,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
24165
23975
|
class OverlappingImageComponent extends BaseSection {
|
|
24166
23976
|
constructor() {
|
|
24167
23977
|
super();
|
|
24168
|
-
this.
|
|
24169
|
-
this.subText = '';
|
|
23978
|
+
this.getScreenSize();
|
|
24170
23979
|
}
|
|
24171
23980
|
ngOnInit() {
|
|
24172
23981
|
this.styles = this.data?.styles;
|
|
24173
23982
|
this.content = this.data?.content;
|
|
24174
|
-
|
|
24175
|
-
|
|
23983
|
+
}
|
|
23984
|
+
getScreenSize() {
|
|
23985
|
+
this.screenWidth = window.innerWidth;
|
|
24176
23986
|
}
|
|
24177
23987
|
get stylesLayout() {
|
|
24178
23988
|
return { ...this.styles?.layout };
|
|
@@ -24194,7 +24004,7 @@ class OverlappingImageComponent extends BaseSection {
|
|
|
24194
24004
|
return ''; // fallback
|
|
24195
24005
|
}
|
|
24196
24006
|
}
|
|
24197
|
-
|
|
24007
|
+
get accentBackground() {
|
|
24198
24008
|
const bg = this.styles?.background;
|
|
24199
24009
|
if (!bg)
|
|
24200
24010
|
return '';
|
|
@@ -24207,7 +24017,7 @@ class OverlappingImageComponent extends BaseSection {
|
|
|
24207
24017
|
: `linear-gradient(${bg.accentColor}, ${bg.secondaryAccentColor})`;
|
|
24208
24018
|
}
|
|
24209
24019
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OverlappingImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
24210
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OverlappingImageComponent, isStandalone: true, selector: "simpo-overlapping-image", inputs: { nextComponentColor: "nextComponentColor", data: "data", edit: "edit", index: "index", customClass: "customClass", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section class=\"cta-section total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"cta-wrapper\" #mainContainer [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"cta-content w-100 d-flex justify-content-center\">\r\n <div class=\"d-flex flex-column gap-4 section-content position-relative\" [id]=\"data?.id\"\r\n [simpoCorner]=\"styles?.corners\"\r\n [ngStyle]=\"{'align-items' : styles?.layout?.align === 'center' ? 'center' : (styles?.layout?.align === 'left' ? 'start' : 'end'),'background':getAccentBackground() }\"\r\n [ngClass]=\"{'left-image-position' : styles?.layout?.imagePosition === 'Left' , 'right-image-position' : styles?.layout?.imagePosition === 'Right'}\">\r\n <div class=\"cta-image\" [style.left]=\"styles?.layout?.imagePosition === 'Left' ? '-10%' : ''\"\r\n [style.right]=\"styles?.layout?.imagePosition === 'Left' ? '' : '-10%'\"\r\n [style.transform]=\"styles?.layout?.imagePosition === 'Left' ? 'rotate(-6deg)' : 'rotate(6deg)'\">\r\n <img [src]=\" content?.image?.url\" class=\"h-100\" alt=\"Building\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <simpo-text-editor [(value)]=\"heading\" [editable]=\"edit || false\"\r\n [type]=\"'heading'\"></simpo-text-editor>\r\n <simpo-text-editor [(value)]=\"subText\" [editable]=\"edit || false\"></simpo-text-editor>\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <ng-container *ngIf=\"data?.action?.buttons?.length == 1;else mutipleButtons\">\r\n <app-button-element [buttonContent]=\"data.action.buttons[0].content\"\r\n [buttonStyle]=\"data.action.buttons[0].styles\" [buttonId]=\"data.action.buttons[0].id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #mutipleButtons>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".total-container{height:auto;position:relative}.cta-wrapper{display:flex;align-items:center;justify-content:center}.left-image-position{padding-left:13rem;padding-right:30px;margin-left:6rem}.right-image-position{padding-right:13rem;padding-left:30px;margin-right:6rem}.section-content{min-height:260px;width:90%;align-items:center;justify-content:center;padding-top:5px}.section-content simpo-text-editor{width:100%}.cta-content{color:#fff}.cta-content h2{font-size:36px;margin-bottom:20px}.cta-content p{font-size:16px;line-height:1.7;margin-bottom:30px;max-width:700px}.cta-btn{display:inline-block;background:#001f3f;color:#fff;padding:12px 24px;border-radius:8px;text-decoration:none;font-weight:600;transition:.3s ease}.cta-btn:hover{background:#000}.cta-image{position:absolute;z-index:2;transform:rotate(-6deg);height:340px;top:-9%}.cta-image img{width:280px;border-radius:20px;box-shadow:0 20px 40px #0003}@media (max-width: 992px){.cta-wrapper{flex-direction:column}.cta-content{padding:60px 30px;text-align:center}.cta-image{position:relative;margin-bottom:30px}.cta-image img{width:220px;transform:rotate(0)}}@media (max-width: 576px){.cta-content h2{font-size:24px}.cta-content p{font-size:14px}.cta-btn{padding:10px 20px;font-size:14px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: 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: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type:
|
|
24020
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OverlappingImageComponent, isStandalone: true, selector: "simpo-overlapping-image", inputs: { nextComponentColor: "nextComponentColor", data: "data", edit: "edit", index: "index", customClass: "customClass", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"screenWidth > 475\">\r\n <section class=\"cta-section total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div class=\"cta-wrapper\" #mainContainer [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"cta-content w-100 d-flex justify-content-center\">\r\n <div class=\"d-flex flex-column gap-4 section-content position-relative\" [id]=\"data?.id\"\r\n [simpoCorner]=\"styles?.corners\"\r\n [ngStyle]=\"{'align-items' : styles?.layout?.align === 'center' ? 'center' : (styles?.layout?.align === 'left' ? 'start' : 'end'),'background':accentBackground }\"\r\n [ngClass]=\"{'left-image-position' : styles?.layout?.imagePosition === 'Left' , 'right-image-position' : styles?.layout?.imagePosition === 'Right'}\">\r\n <div class=\"cta-image\" [style.left]=\"styles?.layout?.imagePosition === 'Left' ? '-10%' : ''\"\r\n [style.right]=\"styles?.layout?.imagePosition === 'Left' ? '' : '-10%'\"\r\n [style.transform]=\"styles?.layout?.imagePosition === 'Left' ? 'rotate(-6deg)' : 'rotate(6deg)'\">\r\n <img [src]=\" content?.image?.url\" class=\"h-100\" alt=\"Building\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <simpo-text-editor [(value)]=\"content.inputText[0].value\" [editable]=\"edit || false\"\r\n [type]=\"'heading'\"></simpo-text-editor>\r\n <simpo-text-editor [(value)]=\"content.inputText[1].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <ng-container *ngIf=\"data?.action?.buttons?.length == 1;else mutipleButtons\">\r\n <app-button-element [buttonContent]=\"data.action.buttons[0].content\"\r\n [buttonStyle]=\"data.action.buttons[0].styles\" [buttonId]=\"data.action.buttons[0].id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #mutipleButtons>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </section>\r\n</ng-container>\r\n<ng-container *ngIf=\"screenWidth < 475\">\r\n <div class=\"feature-card\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\r\n <div class=\"feature-image-wrapper\">\r\n <img [src]=\"content.image.url\" alt=\"Office Building\" class=\"feature-image\">\r\n </div>\r\n <div class=\"feature-content\">\r\n <simpo-text-editor [(value)]=\"content.inputText[0].value\" [editable]=\"false\"\r\n [type]=\"'heading'\"></simpo-text-editor>\r\n <simpo-text-editor [(value)]=\"content.inputText[1].value\" [editable]=\"false\"></simpo-text-editor>\r\n <div class=\"d-flex w-100 align-items-center justify-content-center\">\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <ng-container *ngIf=\"data?.action?.buttons?.length == 1;else mutipleButtons\">\r\n <app-button-element [buttonContent]=\"data.action.buttons[0].content\"\r\n [buttonStyle]=\"data.action.buttons[0].styles\" [buttonId]=\"data.action.buttons[0].id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #mutipleButtons>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</ng-container>", styles: [".total-container{height:auto;position:relative}.cta-wrapper{display:flex;align-items:center;justify-content:center}.left-image-position{padding-left:13rem;padding-right:30px;margin-left:6rem}.right-image-position{padding-right:13rem;padding-left:30px;margin-right:6rem}.section-content{min-height:260px;width:90%;align-items:center;justify-content:center;padding-top:5px;padding-bottom:10px}.section-content simpo-text-editor{width:100%}.cta-content{color:#fff}.cta-content h2{font-size:36px;margin-bottom:20px}.cta-content p{font-size:16px;line-height:1.7;margin-bottom:30px;max-width:700px}.cta-btn{display:inline-block;background:#001f3f;color:#fff;padding:12px 24px;border-radius:8px;text-decoration:none;font-weight:600;transition:.3s ease}.cta-btn:hover{background:#000}.cta-image{position:absolute;z-index:2;transform:rotate(-6deg);height:340px;top:-9%}.cta-image img{width:280px;border-radius:20px;box-shadow:0 20px 40px #0003}@media (max-width: 992px){.cta-wrapper{flex-direction:column}.cta-content{padding:60px 30px;text-align:center}.cta-image{position:relative;margin-bottom:30px}.cta-image img{width:220px;transform:rotate(0)}}@media (max-width: 576px){.cta-content h2{font-size:24px}.cta-content p{font-size:14px}.cta-btn{padding:10px 20px;font-size:14px}}@media only screen and (min-width:320px) and (max-width:475px){.feature-card{max-width:650px;padding:24px;font-family:Arial,sans-serif}.feature-image-wrapper{width:100%}.feature-image{width:100%;display:block;border-radius:16px}.feature-content{margin-top:24px}.feature-title{font-size:32px;font-weight:600;margin-bottom:16px}.feature-description{font-size:16px;line-height:1.6;margin-bottom:24px}.feature-button{padding:12px 22px;font-size:14px;border:none;border-radius:8px;cursor:pointer}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: 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: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type:
|
|
24211
24021
|
//Directives
|
|
24212
24022
|
BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }] }); }
|
|
24213
24023
|
}
|
|
@@ -24227,7 +24037,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
24227
24037
|
CornerDirective,
|
|
24228
24038
|
ImageEditorDirective,
|
|
24229
24039
|
AnimationDirective
|
|
24230
|
-
], template: "<section class=\"cta-section total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n
|
|
24040
|
+
], template: "<ng-container *ngIf=\"screenWidth > 475\">\r\n <section class=\"cta-section total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div class=\"cta-wrapper\" #mainContainer [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"cta-content w-100 d-flex justify-content-center\">\r\n <div class=\"d-flex flex-column gap-4 section-content position-relative\" [id]=\"data?.id\"\r\n [simpoCorner]=\"styles?.corners\"\r\n [ngStyle]=\"{'align-items' : styles?.layout?.align === 'center' ? 'center' : (styles?.layout?.align === 'left' ? 'start' : 'end'),'background':accentBackground }\"\r\n [ngClass]=\"{'left-image-position' : styles?.layout?.imagePosition === 'Left' , 'right-image-position' : styles?.layout?.imagePosition === 'Right'}\">\r\n <div class=\"cta-image\" [style.left]=\"styles?.layout?.imagePosition === 'Left' ? '-10%' : ''\"\r\n [style.right]=\"styles?.layout?.imagePosition === 'Left' ? '' : '-10%'\"\r\n [style.transform]=\"styles?.layout?.imagePosition === 'Left' ? 'rotate(-6deg)' : 'rotate(6deg)'\">\r\n <img [src]=\" content?.image?.url\" class=\"h-100\" alt=\"Building\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <simpo-text-editor [(value)]=\"content.inputText[0].value\" [editable]=\"edit || false\"\r\n [type]=\"'heading'\"></simpo-text-editor>\r\n <simpo-text-editor [(value)]=\"content.inputText[1].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <ng-container *ngIf=\"data?.action?.buttons?.length == 1;else mutipleButtons\">\r\n <app-button-element [buttonContent]=\"data.action.buttons[0].content\"\r\n [buttonStyle]=\"data.action.buttons[0].styles\" [buttonId]=\"data.action.buttons[0].id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #mutipleButtons>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </section>\r\n</ng-container>\r\n<ng-container *ngIf=\"screenWidth < 475\">\r\n <div class=\"feature-card\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\r\n <div class=\"feature-image-wrapper\">\r\n <img [src]=\"content.image.url\" alt=\"Office Building\" class=\"feature-image\">\r\n </div>\r\n <div class=\"feature-content\">\r\n <simpo-text-editor [(value)]=\"content.inputText[0].value\" [editable]=\"false\"\r\n [type]=\"'heading'\"></simpo-text-editor>\r\n <simpo-text-editor [(value)]=\"content.inputText[1].value\" [editable]=\"false\"></simpo-text-editor>\r\n <div class=\"d-flex w-100 align-items-center justify-content-center\">\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <ng-container *ngIf=\"data?.action?.buttons?.length == 1;else mutipleButtons\">\r\n <app-button-element [buttonContent]=\"data.action.buttons[0].content\"\r\n [buttonStyle]=\"data.action.buttons[0].styles\" [buttonId]=\"data.action.buttons[0].id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #mutipleButtons>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</ng-container>", styles: [".total-container{height:auto;position:relative}.cta-wrapper{display:flex;align-items:center;justify-content:center}.left-image-position{padding-left:13rem;padding-right:30px;margin-left:6rem}.right-image-position{padding-right:13rem;padding-left:30px;margin-right:6rem}.section-content{min-height:260px;width:90%;align-items:center;justify-content:center;padding-top:5px;padding-bottom:10px}.section-content simpo-text-editor{width:100%}.cta-content{color:#fff}.cta-content h2{font-size:36px;margin-bottom:20px}.cta-content p{font-size:16px;line-height:1.7;margin-bottom:30px;max-width:700px}.cta-btn{display:inline-block;background:#001f3f;color:#fff;padding:12px 24px;border-radius:8px;text-decoration:none;font-weight:600;transition:.3s ease}.cta-btn:hover{background:#000}.cta-image{position:absolute;z-index:2;transform:rotate(-6deg);height:340px;top:-9%}.cta-image img{width:280px;border-radius:20px;box-shadow:0 20px 40px #0003}@media (max-width: 992px){.cta-wrapper{flex-direction:column}.cta-content{padding:60px 30px;text-align:center}.cta-image{position:relative;margin-bottom:30px}.cta-image img{width:220px;transform:rotate(0)}}@media (max-width: 576px){.cta-content h2{font-size:24px}.cta-content p{font-size:14px}.cta-btn{padding:10px 20px;font-size:14px}}@media only screen and (min-width:320px) and (max-width:475px){.feature-card{max-width:650px;padding:24px;font-family:Arial,sans-serif}.feature-image-wrapper{width:100%}.feature-image{width:100%;display:block;border-radius:16px}.feature-content{margin-top:24px}.feature-title{font-size:32px;font-weight:600;margin-bottom:16px}.feature-description{font-size:16px;line-height:1.6;margin-bottom:24px}.feature-button{padding:12px 22px;font-size:14px;border:none;border-radius:8px;cursor:pointer}}\n"] }]
|
|
24231
24041
|
}], ctorParameters: () => [], propDecorators: { nextComponentColor: [{
|
|
24232
24042
|
type: Input
|
|
24233
24043
|
}], data: [{
|
|
@@ -24240,19 +24050,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
24240
24050
|
type: Input
|
|
24241
24051
|
}], delete: [{
|
|
24242
24052
|
type: Input
|
|
24053
|
+
}], getScreenSize: [{
|
|
24054
|
+
type: HostListener,
|
|
24055
|
+
args: ["window: resize", ["$event"]]
|
|
24243
24056
|
}] } });
|
|
24244
24057
|
|
|
24245
24058
|
class ImageBackgroundComponent extends BaseSection {
|
|
24246
24059
|
constructor() {
|
|
24247
24060
|
super();
|
|
24248
|
-
this.
|
|
24249
|
-
this.subText = '';
|
|
24061
|
+
this.getScreenSize();
|
|
24250
24062
|
}
|
|
24251
24063
|
ngOnInit() {
|
|
24252
24064
|
this.styles = this.data?.styles;
|
|
24253
24065
|
this.content = this.data?.content;
|
|
24254
|
-
|
|
24255
|
-
|
|
24066
|
+
}
|
|
24067
|
+
getScreenSize() {
|
|
24068
|
+
this.screenWidth = window.innerWidth;
|
|
24256
24069
|
}
|
|
24257
24070
|
get stylesLayout() {
|
|
24258
24071
|
return { ...this.styles?.layout };
|
|
@@ -24261,7 +24074,7 @@ class ImageBackgroundComponent extends BaseSection {
|
|
|
24261
24074
|
return this.styles?.layout?.headingSpacing;
|
|
24262
24075
|
}
|
|
24263
24076
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageBackgroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
24264
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageBackgroundComponent, isStandalone: true, selector: "simpo-image-background", inputs: { nextComponentColor: "nextComponentColor", data: "data", edit: "edit", index: "index", customClass: "customClass", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section class=\"
|
|
24077
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageBackgroundComponent, isStandalone: true, selector: "simpo-image-background", inputs: { nextComponentColor: "nextComponentColor", data: "data", edit: "edit", index: "index", customClass: "customClass", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\" [ngClass]=\"{'p-2rem':!styles?.fullWidth}\">\r\n <div class=\"cta-container w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoCorner]=\"!styles?.fullWidth ? styles?.corners : undefined\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoLayout]=\"styles?.layout\"\r\n [ngClass]=\"{'justify-content-start' : styles?.layout?.setContentPosition === 'Left' , 'justify-content-end' : styles?.layout?.setContentPosition === 'Right' }\"\r\n [ngStyle]=\"{\r\n 'background-image': (screenWidth > 1200 ? 'url(' + content?.image?.url + ')' : 'unset !important'),\r\n 'background-size': 'cover',\r\n 'background-position': 'center',\r\n 'background-repeat': 'no-repeat'\r\n }\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [simpoAnimation]=\"styles?.animation\">\r\n <!-- <div class=\"cta-image\">\r\n <img src=\"\" alt=\"Abstract Design\">\r\n </div> -->\r\n <div class=\"cta-content d-flex flex-column gap-3\" (click)=\"$event.stopPropagation()\">\r\n <simpo-text-editor [(value)]=\"content.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n <simpo-text-editor [(value)]=\"content.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <ng-container *ngIf=\"data?.action?.buttons?.length == 1;else mutipleButtons\">\r\n <app-button-element [buttonContent]=\"data.action.buttons[0].content\"\r\n [buttonStyle]=\"data.action.buttons[0].styles\" [buttonId]=\"data.action.buttons[0].id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #mutipleButtons>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".cta-content{color:#fff}.total-container{height:auto;position:relative}.cta-container{display:flex;align-items:center;justify-content:space-between;overflow:hidden;background-image:url(https://d2z9497xp8xb12.cloudfront.net/prod-images/284345c1770816953360Artboard_18-1.webp);background-size:cover;background-position:center;background-repeat:no-repeat}.p-2rem{padding:2rem}.cta-image{flex:1}.cta-image img{width:100%;height:100%;object-fit:cover;display:block}.cta-content h1{font-size:40px;line-height:1.3;margin-bottom:20px}.cta-content p{font-size:16px;color:#cbd5e1;margin-bottom:30px;max-width:500px}.cta-button{display:inline-block;padding:12px 24px;background:#000;color:#fff;text-decoration:none;border-radius:8px;font-weight:600;transition:.3s ease}.cta-button:hover{background:#1e293b}@media (max-width: 992px){.cta-content{padding:40px}.cta-content h1{font-size:32px}}@media (min-width:1200px){.cta-content{max-width:50%}}@media (max-width: 768px){.cta-container{flex-direction:column}.cta-image{width:100%;height:300px}.cta-content{padding:30px;text-align:center}.cta-content p{margin:0 auto 25px}}@media (max-width: 480px){.cta-content h1{font-size:24px}.cta-content p{font-size:14px}.cta-button{padding:10px 20px;font-size:14px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: 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: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type:
|
|
24265
24078
|
//Directives
|
|
24266
24079
|
BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }] }); }
|
|
24267
24080
|
}
|
|
@@ -24280,7 +24093,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
24280
24093
|
CornerDirective,
|
|
24281
24094
|
ImageEditorDirective,
|
|
24282
24095
|
AnimationDirective
|
|
24283
|
-
], template: "<section class=\"
|
|
24096
|
+
], template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\" [ngClass]=\"{'p-2rem':!styles?.fullWidth}\">\r\n <div class=\"cta-container w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoCorner]=\"!styles?.fullWidth ? styles?.corners : undefined\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoLayout]=\"styles?.layout\"\r\n [ngClass]=\"{'justify-content-start' : styles?.layout?.setContentPosition === 'Left' , 'justify-content-end' : styles?.layout?.setContentPosition === 'Right' }\"\r\n [ngStyle]=\"{\r\n 'background-image': (screenWidth > 1200 ? 'url(' + content?.image?.url + ')' : 'unset !important'),\r\n 'background-size': 'cover',\r\n 'background-position': 'center',\r\n 'background-repeat': 'no-repeat'\r\n }\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [simpoAnimation]=\"styles?.animation\">\r\n <!-- <div class=\"cta-image\">\r\n <img src=\"\" alt=\"Abstract Design\">\r\n </div> -->\r\n <div class=\"cta-content d-flex flex-column gap-3\" (click)=\"$event.stopPropagation()\">\r\n <simpo-text-editor [(value)]=\"content.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n <simpo-text-editor [(value)]=\"content.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <ng-container *ngIf=\"data?.action?.buttons?.length == 1;else mutipleButtons\">\r\n <app-button-element [buttonContent]=\"data.action.buttons[0].content\"\r\n [buttonStyle]=\"data.action.buttons[0].styles\" [buttonId]=\"data.action.buttons[0].id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #mutipleButtons>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".cta-content{color:#fff}.total-container{height:auto;position:relative}.cta-container{display:flex;align-items:center;justify-content:space-between;overflow:hidden;background-image:url(https://d2z9497xp8xb12.cloudfront.net/prod-images/284345c1770816953360Artboard_18-1.webp);background-size:cover;background-position:center;background-repeat:no-repeat}.p-2rem{padding:2rem}.cta-image{flex:1}.cta-image img{width:100%;height:100%;object-fit:cover;display:block}.cta-content h1{font-size:40px;line-height:1.3;margin-bottom:20px}.cta-content p{font-size:16px;color:#cbd5e1;margin-bottom:30px;max-width:500px}.cta-button{display:inline-block;padding:12px 24px;background:#000;color:#fff;text-decoration:none;border-radius:8px;font-weight:600;transition:.3s ease}.cta-button:hover{background:#1e293b}@media (max-width: 992px){.cta-content{padding:40px}.cta-content h1{font-size:32px}}@media (min-width:1200px){.cta-content{max-width:50%}}@media (max-width: 768px){.cta-container{flex-direction:column}.cta-image{width:100%;height:300px}.cta-content{padding:30px;text-align:center}.cta-content p{margin:0 auto 25px}}@media (max-width: 480px){.cta-content h1{font-size:24px}.cta-content p{font-size:14px}.cta-button{padding:10px 20px;font-size:14px}}\n"] }]
|
|
24284
24097
|
}], ctorParameters: () => [], propDecorators: { nextComponentColor: [{
|
|
24285
24098
|
type: Input
|
|
24286
24099
|
}], data: [{
|
|
@@ -24293,6 +24106,136 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
24293
24106
|
type: Input
|
|
24294
24107
|
}], delete: [{
|
|
24295
24108
|
type: Input
|
|
24109
|
+
}], getScreenSize: [{
|
|
24110
|
+
type: HostListener,
|
|
24111
|
+
args: ["window: resize", ["$event"]]
|
|
24112
|
+
}] } });
|
|
24113
|
+
|
|
24114
|
+
class CondensedAndGradientComponent extends BaseSection {
|
|
24115
|
+
ngOnInit() {
|
|
24116
|
+
this.content = this.data?.content;
|
|
24117
|
+
this.style = this.data?.styles;
|
|
24118
|
+
}
|
|
24119
|
+
get stylesLayout() {
|
|
24120
|
+
return { ...this.style?.layout };
|
|
24121
|
+
}
|
|
24122
|
+
getIconBackground(icon) {
|
|
24123
|
+
if (icon?.backgroundType === 'Gradient') {
|
|
24124
|
+
const direction = icon?.backgroundGradientDirection || 'to bottom';
|
|
24125
|
+
return `linear-gradient(${direction}, ${icon?.backgroundColor}, ${icon?.secondaryColor})`;
|
|
24126
|
+
}
|
|
24127
|
+
return icon?.backgroundColor;
|
|
24128
|
+
}
|
|
24129
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CondensedAndGradientComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
24130
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CondensedAndGradientComponent, isStandalone: true, selector: "simpo-condensed-and-gradient", inputs: { edit: "edit", data: "data", customClass: "customClass", nextComponentColor: "nextComponentColor", index: "index", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section>\r\n <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"sale-wrapper total-container\"\r\n [attr.style]=\"customClass\" [simpoBackground]=\"style?.background\">\r\n <div #mainContainer [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"style?.layout\"\r\n class=\"sale-bar\">\r\n\r\n <!-- LEFT -->\r\n <div class=\"left-section\">\r\n <div class=\"logo\"\r\n [style.background]=\"content?.icon?.showBackground ? getIconBackground(content?.icon) : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"content?.icon\" [sectionId]=\"data?.id\" [showIcon]=\"true\">\r\n <div [iconId]=\"data?.id + (content?.icon?.id || '')\" [simpoIconDirective]=\"content?.icon\" class=\"w-75 h-75\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"text\">\r\n <div class=\"sale-text\">\r\n <simpo-text-editor [(value)]=\"content.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n\r\n <div class=\"sale-description\">\r\n <simpo-text-editor [(value)]=\"content.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- RIGHT BUTTON -->\r\n <div class=\"sale-action\" *ngIf=\"data?.action?.display\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\">\r\n </app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Divider -->\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <!-- EDIT SELECTOR -->\r\n <div [ngClass]=\"{ hover_effect: edit }\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\r\n <!-- DELETE -->\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{ hover_effect: delete }\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </div>\r\n</section>", styles: [".sale-wrapper{width:100%}.total-container{height:auto;position:relative}.sale-bar{width:100%;display:flex;justify-content:space-between;align-items:center;padding:28px 50px}.left-section{display:flex;align-items:center;gap:14px;width:47%;min-width:320px}.sale-text{font-size:26px;font-weight:600;width:100%;display:block;text-align:left}.sale-description{width:100%;display:block;font-size:16px;opacity:.9;text-align:left;min-height:20px}.text{flex:1;width:100%;min-width:260px;text-align:left}.sale-timer{display:flex;gap:18px}.left-section{display:flex;justify-content:space-between;width:47%}.logo{width:60px;height:60px;min-width:60px;border-radius:50%;display:flex;align-items:center;justify-content:center}.time-card{background-color:#fff;color:#1c2a39;padding:6px 14px;border-radius:8px;text-align:center;min-width:60px}.time-card span{display:block;font-size:18px;font-weight:600}.time-card small{font-size:11px;letter-spacing:1px;font-weight:500}.sale-action{display:flex;align-items:center;gap:20px}.shop-button{background-color:#fff;color:#1c2a39;border:none;padding:5px 14px;border-radius:30px;font-size:14px;font-weight:500;cursor:pointer;transition:.3s ease}.shop-button:hover{background-color:#f2f2f2}.close-icon{font-size:20px;cursor:pointer;opacity:.8}.close-icon:hover{opacity:1}@media (max-width: 768px){.sale-bar{flex-direction:column;align-items:center;text-align:center;padding:20px;gap:18px}.left-section{width:100%;flex-direction:row;align-items:center;gap:12px}.logo{width:22%;height:60px}.editor-container{text-align:start}.text{text-align:start;width:100%}.sale-text{font-size:20px}.sale-description{font-size:14px;opacity:.9}.sale-action{width:100%;justify-content:center}}@media (min-width: 769px) and (max-width: 1024px){.sale-bar{padding:22px 30px;gap:20px}.left-section{width:65%;gap:15px}.logo{width:55px;height:55px}.sale-text{font-size:22px}.sale-description{font-size:15px}.sale-action{align-items:center}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: 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: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: IconDirectiveDirective, selector: "[simpoIconDirective]", inputs: ["simpoIconDirective", "iconId"] }] }); }
|
|
24131
|
+
}
|
|
24132
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CondensedAndGradientComponent, decorators: [{
|
|
24133
|
+
type: Component,
|
|
24134
|
+
args: [{ selector: 'simpo-condensed-and-gradient', standalone: true, imports: [
|
|
24135
|
+
CommonModule,
|
|
24136
|
+
SimpoElementsModule,
|
|
24137
|
+
SimpoComponentModule,
|
|
24138
|
+
TextEditorComponent,
|
|
24139
|
+
BackgroundDirective,
|
|
24140
|
+
HoverDirective,
|
|
24141
|
+
OverlayDirective,
|
|
24142
|
+
SpacingHorizontalDirective,
|
|
24143
|
+
BorderDirective,
|
|
24144
|
+
ContentFitDirective,
|
|
24145
|
+
ImageEditorDirective,
|
|
24146
|
+
IconDirectiveDirective
|
|
24147
|
+
], template: "<section>\r\n <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"sale-wrapper total-container\"\r\n [attr.style]=\"customClass\" [simpoBackground]=\"style?.background\">\r\n <div #mainContainer [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"style?.layout\"\r\n class=\"sale-bar\">\r\n\r\n <!-- LEFT -->\r\n <div class=\"left-section\">\r\n <div class=\"logo\"\r\n [style.background]=\"content?.icon?.showBackground ? getIconBackground(content?.icon) : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"content?.icon\" [sectionId]=\"data?.id\" [showIcon]=\"true\">\r\n <div [iconId]=\"data?.id + (content?.icon?.id || '')\" [simpoIconDirective]=\"content?.icon\" class=\"w-75 h-75\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"text\">\r\n <div class=\"sale-text\">\r\n <simpo-text-editor [(value)]=\"content.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n\r\n <div class=\"sale-description\">\r\n <simpo-text-editor [(value)]=\"content.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- RIGHT BUTTON -->\r\n <div class=\"sale-action\" *ngIf=\"data?.action?.display\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\">\r\n </app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Divider -->\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <!-- EDIT SELECTOR -->\r\n <div [ngClass]=\"{ hover_effect: edit }\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\r\n <!-- DELETE -->\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{ hover_effect: delete }\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </div>\r\n</section>", styles: [".sale-wrapper{width:100%}.total-container{height:auto;position:relative}.sale-bar{width:100%;display:flex;justify-content:space-between;align-items:center;padding:28px 50px}.left-section{display:flex;align-items:center;gap:14px;width:47%;min-width:320px}.sale-text{font-size:26px;font-weight:600;width:100%;display:block;text-align:left}.sale-description{width:100%;display:block;font-size:16px;opacity:.9;text-align:left;min-height:20px}.text{flex:1;width:100%;min-width:260px;text-align:left}.sale-timer{display:flex;gap:18px}.left-section{display:flex;justify-content:space-between;width:47%}.logo{width:60px;height:60px;min-width:60px;border-radius:50%;display:flex;align-items:center;justify-content:center}.time-card{background-color:#fff;color:#1c2a39;padding:6px 14px;border-radius:8px;text-align:center;min-width:60px}.time-card span{display:block;font-size:18px;font-weight:600}.time-card small{font-size:11px;letter-spacing:1px;font-weight:500}.sale-action{display:flex;align-items:center;gap:20px}.shop-button{background-color:#fff;color:#1c2a39;border:none;padding:5px 14px;border-radius:30px;font-size:14px;font-weight:500;cursor:pointer;transition:.3s ease}.shop-button:hover{background-color:#f2f2f2}.close-icon{font-size:20px;cursor:pointer;opacity:.8}.close-icon:hover{opacity:1}@media (max-width: 768px){.sale-bar{flex-direction:column;align-items:center;text-align:center;padding:20px;gap:18px}.left-section{width:100%;flex-direction:row;align-items:center;gap:12px}.logo{width:22%;height:60px}.editor-container{text-align:start}.text{text-align:start;width:100%}.sale-text{font-size:20px}.sale-description{font-size:14px;opacity:.9}.sale-action{width:100%;justify-content:center}}@media (min-width: 769px) and (max-width: 1024px){.sale-bar{padding:22px 30px;gap:20px}.left-section{width:65%;gap:15px}.logo{width:55px;height:55px}.sale-text{font-size:22px}.sale-description{font-size:15px}.sale-action{align-items:center}}\n"] }]
|
|
24148
|
+
}], propDecorators: { edit: [{
|
|
24149
|
+
type: Input
|
|
24150
|
+
}], data: [{
|
|
24151
|
+
type: Input
|
|
24152
|
+
}], customClass: [{
|
|
24153
|
+
type: Input
|
|
24154
|
+
}], nextComponentColor: [{
|
|
24155
|
+
type: Input
|
|
24156
|
+
}], index: [{
|
|
24157
|
+
type: Input
|
|
24158
|
+
}], delete: [{
|
|
24159
|
+
type: Input
|
|
24160
|
+
}] } });
|
|
24161
|
+
|
|
24162
|
+
class FourFeaturesCenteredImageComponent extends BaseSection {
|
|
24163
|
+
constructor() {
|
|
24164
|
+
super(...arguments);
|
|
24165
|
+
this.leftInputText = [];
|
|
24166
|
+
this.rightInputText = [];
|
|
24167
|
+
}
|
|
24168
|
+
get stylesLayout() {
|
|
24169
|
+
return { ...this.style?.layout };
|
|
24170
|
+
}
|
|
24171
|
+
ngOnInit() {
|
|
24172
|
+
this.initializeSection();
|
|
24173
|
+
}
|
|
24174
|
+
ngOnChanges(changes) {
|
|
24175
|
+
if (changes['data']) {
|
|
24176
|
+
this.initializeSection();
|
|
24177
|
+
}
|
|
24178
|
+
}
|
|
24179
|
+
initializeSection() {
|
|
24180
|
+
if (!this.data)
|
|
24181
|
+
return;
|
|
24182
|
+
this.content = this.data.content || {};
|
|
24183
|
+
this.style = this.data.styles || {};
|
|
24184
|
+
this.splitFeatures();
|
|
24185
|
+
}
|
|
24186
|
+
splitFeatures() {
|
|
24187
|
+
if (!this.content?.inputText?.length) {
|
|
24188
|
+
this.leftInputText = [];
|
|
24189
|
+
this.rightInputText = [];
|
|
24190
|
+
return;
|
|
24191
|
+
}
|
|
24192
|
+
const mid = Math.ceil(this.content.inputText.length / 2);
|
|
24193
|
+
this.leftInputText = this.content.inputText.slice(0, mid);
|
|
24194
|
+
this.rightInputText = this.content.inputText.slice(mid);
|
|
24195
|
+
}
|
|
24196
|
+
getIconBackground(icon) {
|
|
24197
|
+
if (icon?.backgroundType === 'Gradient') {
|
|
24198
|
+
const direction = GradientDirection[icon?.backgroundGradientDirection] || GradientDirection.DOWN;
|
|
24199
|
+
return `linear-gradient(${direction}, ${icon?.backgroundColor}, ${icon?.secondaryColor})`;
|
|
24200
|
+
}
|
|
24201
|
+
else {
|
|
24202
|
+
return icon?.backgroundColor;
|
|
24203
|
+
}
|
|
24204
|
+
}
|
|
24205
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FourFeaturesCenteredImageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
24206
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FourFeaturesCenteredImageComponent, isStandalone: true, selector: "simpo-four-features-centered-image", inputs: { edit: "edit", data: "data", customClass: "customClass", nextComponentColor: "nextComponentColor", index: "index", delete: "delete" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<section>\r\n <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\"\r\n [simpoBackground]=\"style?.background\">\r\n <div [id]=\"data?.id\" #mainContainer [simpoBorder]=\"style?.border\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoLayout]=\"style?.layout\" class=\"sale-bar\" [simpoOverlay]=\"style?.background\">\r\n <div class=\"features-wrapper\" [simpoAnimation]=\"style?.animation\">\r\n <div>\r\n <!-- Heading -->\r\n <simpo-text-editor class=\"main-heading fs-1 fw-semibold\" [(value)]=\"content.heading.value\"\r\n [editable]=\"edit || false\">\r\n </simpo-text-editor>\r\n\r\n <!-- Description -->\r\n <simpo-text-editor class=\"main-subheading description\" [(value)]=\"content.description.value\"\r\n [editable]=\"edit || false\">\r\n </simpo-text-editor>\r\n </div>\r\n\r\n <!-- GRID -->\r\n <div class=\"feature-grid\">\r\n <!-- LEFT FEATURES -->\r\n <div class=\"feature-column\">\r\n <div class=\"feature-item d-flex flex-column\" *ngFor=\"let item of leftInputText\">\r\n <!-- <div class=\"logo-img\" [simpoCorner]=\"style?.corners\" [style.height.px]=\"style?.containerHeight\"\r\n [style.width.px]=\"style?.containerWidth\" [appImageEditor]=\"edit || false\" [iconData]=\"item.icon\"\r\n [sectionId]=\"data?.id\" [showIcon]=\"true\"> -->\r\n <div class=\"logo-img\"\r\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n [simpoCorner]=\"style?.corners\" [style.height.px]=\"style?.containerHeight\"\r\n [style.width.px]=\"style?.containerWidth\" [appImageEditor]=\"edit || false\" [iconData]=\"item.icon\"\r\n [sectionId]=\"data?.id\" [showIcon]=\"true\">\r\n <div [iconId]=\"data?.id + item.icon?.id\" [simpoIconDirective]=\"item.icon\" class=\"w-50 h-50\">\r\n </div>\r\n </div>\r\n\r\n <simpo-text-editor class=\"feature-title my-2 fs-5 fw-semibold\" [(value)]=\"item.label\"\r\n [editable]=\"edit || false\">\r\n </simpo-text-editor>\r\n <simpo-text-editor class=\"feature-text\" [(value)]=\"item.value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n\r\n <!-- CENTER IMAGE -->\r\n <div class=\"cta-image center-image\" [simpoCorner]=\"style?.corners\" style=\"overflow:hidden;\">\r\n\r\n <img [src]=\"content?.image?.url\" [simpoCorner]=\"style?.corners\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\" style=\"width:100%; height:100%; object-fit:cover;\">\r\n </div>\r\n\r\n <!-- RIGHT FEATURES -->\r\n <div class=\"feature-column\">\r\n <div class=\"feature-item d-flex flex-column align-items-start text-start\"\r\n *ngFor=\"let item of rightInputText\">\r\n <!-- <div class=\"logo-img\" [simpoCorner]=\"style?.corners\" [style.height.px]=\"style?.containerHeight\"\r\n [style.width.px]=\"style?.containerWidth\" [appImageEditor]=\"edit || false\" [iconData]=\"item.icon\"\r\n [sectionId]=\"data?.id\" [showIcon]=\"true\"> -->\r\n <div class=\"logo-img\"\r\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n [simpoCorner]=\"style?.corners\" [style.height.px]=\"style?.containerHeight\"\r\n [style.width.px]=\"style?.containerWidth\" [appImageEditor]=\"edit || false\" [iconData]=\"item.icon\"\r\n [sectionId]=\"data?.id\" [showIcon]=\"true\">\r\n <div [iconId]=\"data?.id + item.icon?.id\" [simpoIconDirective]=\"item.icon\" class=\"w-50 h-50\">\r\n </div>\r\n </div>\r\n\r\n <simpo-text-editor class=\"feature-title my-2 fs-5 fw-semibold\" [(value)]=\"item.label\"\r\n [editable]=\"edit || false\">\r\n </simpo-text-editor>\r\n <simpo-text-editor class=\"feature-text\" [(value)]=\"item.value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Divider -->\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\">\r\n </simpo-svg-divider>\r\n </ng-container>\r\n\r\n <!-- EDIT SELECTOR -->\r\n <div [ngClass]=\"{ hover_effect: edit }\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\">\r\n </simpo-hover-elements>\r\n </div>\r\n\r\n <!-- DELETE -->\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{ hover_effect: delete }\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\">\r\n </simpo-delete-hover-element>\r\n </div>\r\n\r\n </div>\r\n</section>", styles: [".total-container{position:relative}.sale-bar{padding:45px}.feature-text,.feature-title{width:100%}.main-heading{margin:0 auto;text-align:center}.main-subheading{margin:15px auto 0;text-align:center;line-height:1.6}.features-wrapper{text-align:center;margin-top:15px;width:100%}.feature-grid{display:flex;justify-content:space-between;align-items:center;width:100%;margin:45px 0 40px}.feature-column{display:flex;flex-direction:column;gap:60px;width:35%}.feature-item{width:100%;align-items:end}.feature-column:first-child .feature-item{text-align:right}.feature-column:last-child .feature-item{text-align:left}.logo-img{display:flex;justify-content:center;align-items:center}.logotype-boxed{box-shadow:0 2px 4px #0000002e;padding:10px}.cta-image{width:30%;display:flex;justify-content:center;align-items:center;margin:0 40px}.center-image{display:flex;justify-content:center;align-items:center;overflow:hidden}.center-image img{display:block;max-width:100%;height:auto}.description{display:flex;justify-content:center;text-align:center;padding:0 15%}@media (max-width: 992px){.feature-grid{flex-direction:column;align-items:center;gap:40px;margin:25px 0}.center-image{order:3;width:280px;margin:10px 0 25px}.feature-column{width:100%;align-items:center;gap:35px}.feature-item{text-align:center!important;align-items:center}.description{padding:0 8%}}@media (max-width: 768px){.sale-bar{padding:30px 20px}.center-image{width:230px}.description{padding:0 6%}.feature-column{gap:28px}}@media (max-width: 480px){.sale-bar{padding:25px 15px}.center-image{width:80%}.logo-img{height:70px!important;align-items:center!important;text-align:center!important}simpo-text-editor.fs-1{font-size:28px!important}.feature-item{display:flex;flex-direction:column;gap:8px;text-align:center!important;align-items:center!important}.main-subheading{margin:5px auto 0!important;padding:0!important}.feature-item{gap:0px!important}.cta-image{width:100%!important;height:100%!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: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: IconDirectiveDirective, selector: "[simpoIconDirective]", inputs: ["simpoIconDirective", "iconId"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }] }); }
|
|
24207
|
+
}
|
|
24208
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FourFeaturesCenteredImageComponent, decorators: [{
|
|
24209
|
+
type: Component,
|
|
24210
|
+
args: [{ selector: 'simpo-four-features-centered-image', standalone: true, imports: [
|
|
24211
|
+
CommonModule,
|
|
24212
|
+
SimpoElementsModule,
|
|
24213
|
+
SimpoComponentModule,
|
|
24214
|
+
TextEditorComponent,
|
|
24215
|
+
BackgroundDirective,
|
|
24216
|
+
HoverDirective,
|
|
24217
|
+
OverlayDirective,
|
|
24218
|
+
SpacingHorizontalDirective,
|
|
24219
|
+
BorderDirective,
|
|
24220
|
+
ContentFitDirective,
|
|
24221
|
+
ImageEditorDirective,
|
|
24222
|
+
IconDirectiveDirective,
|
|
24223
|
+
MatIconModule,
|
|
24224
|
+
CornerDirective,
|
|
24225
|
+
AnimationDirective,
|
|
24226
|
+
], template: "<section>\r\n <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\"\r\n [simpoBackground]=\"style?.background\">\r\n <div [id]=\"data?.id\" #mainContainer [simpoBorder]=\"style?.border\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoLayout]=\"style?.layout\" class=\"sale-bar\" [simpoOverlay]=\"style?.background\">\r\n <div class=\"features-wrapper\" [simpoAnimation]=\"style?.animation\">\r\n <div>\r\n <!-- Heading -->\r\n <simpo-text-editor class=\"main-heading fs-1 fw-semibold\" [(value)]=\"content.heading.value\"\r\n [editable]=\"edit || false\">\r\n </simpo-text-editor>\r\n\r\n <!-- Description -->\r\n <simpo-text-editor class=\"main-subheading description\" [(value)]=\"content.description.value\"\r\n [editable]=\"edit || false\">\r\n </simpo-text-editor>\r\n </div>\r\n\r\n <!-- GRID -->\r\n <div class=\"feature-grid\">\r\n <!-- LEFT FEATURES -->\r\n <div class=\"feature-column\">\r\n <div class=\"feature-item d-flex flex-column\" *ngFor=\"let item of leftInputText\">\r\n <!-- <div class=\"logo-img\" [simpoCorner]=\"style?.corners\" [style.height.px]=\"style?.containerHeight\"\r\n [style.width.px]=\"style?.containerWidth\" [appImageEditor]=\"edit || false\" [iconData]=\"item.icon\"\r\n [sectionId]=\"data?.id\" [showIcon]=\"true\"> -->\r\n <div class=\"logo-img\"\r\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n [simpoCorner]=\"style?.corners\" [style.height.px]=\"style?.containerHeight\"\r\n [style.width.px]=\"style?.containerWidth\" [appImageEditor]=\"edit || false\" [iconData]=\"item.icon\"\r\n [sectionId]=\"data?.id\" [showIcon]=\"true\">\r\n <div [iconId]=\"data?.id + item.icon?.id\" [simpoIconDirective]=\"item.icon\" class=\"w-50 h-50\">\r\n </div>\r\n </div>\r\n\r\n <simpo-text-editor class=\"feature-title my-2 fs-5 fw-semibold\" [(value)]=\"item.label\"\r\n [editable]=\"edit || false\">\r\n </simpo-text-editor>\r\n <simpo-text-editor class=\"feature-text\" [(value)]=\"item.value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n\r\n <!-- CENTER IMAGE -->\r\n <div class=\"cta-image center-image\" [simpoCorner]=\"style?.corners\" style=\"overflow:hidden;\">\r\n\r\n <img [src]=\"content?.image?.url\" [simpoCorner]=\"style?.corners\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\" style=\"width:100%; height:100%; object-fit:cover;\">\r\n </div>\r\n\r\n <!-- RIGHT FEATURES -->\r\n <div class=\"feature-column\">\r\n <div class=\"feature-item d-flex flex-column align-items-start text-start\"\r\n *ngFor=\"let item of rightInputText\">\r\n <!-- <div class=\"logo-img\" [simpoCorner]=\"style?.corners\" [style.height.px]=\"style?.containerHeight\"\r\n [style.width.px]=\"style?.containerWidth\" [appImageEditor]=\"edit || false\" [iconData]=\"item.icon\"\r\n [sectionId]=\"data?.id\" [showIcon]=\"true\"> -->\r\n <div class=\"logo-img\"\r\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n [simpoCorner]=\"style?.corners\" [style.height.px]=\"style?.containerHeight\"\r\n [style.width.px]=\"style?.containerWidth\" [appImageEditor]=\"edit || false\" [iconData]=\"item.icon\"\r\n [sectionId]=\"data?.id\" [showIcon]=\"true\">\r\n <div [iconId]=\"data?.id + item.icon?.id\" [simpoIconDirective]=\"item.icon\" class=\"w-50 h-50\">\r\n </div>\r\n </div>\r\n\r\n <simpo-text-editor class=\"feature-title my-2 fs-5 fw-semibold\" [(value)]=\"item.label\"\r\n [editable]=\"edit || false\">\r\n </simpo-text-editor>\r\n <simpo-text-editor class=\"feature-text\" [(value)]=\"item.value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Divider -->\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\">\r\n </simpo-svg-divider>\r\n </ng-container>\r\n\r\n <!-- EDIT SELECTOR -->\r\n <div [ngClass]=\"{ hover_effect: edit }\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\">\r\n </simpo-hover-elements>\r\n </div>\r\n\r\n <!-- DELETE -->\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{ hover_effect: delete }\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\">\r\n </simpo-delete-hover-element>\r\n </div>\r\n\r\n </div>\r\n</section>", styles: [".total-container{position:relative}.sale-bar{padding:45px}.feature-text,.feature-title{width:100%}.main-heading{margin:0 auto;text-align:center}.main-subheading{margin:15px auto 0;text-align:center;line-height:1.6}.features-wrapper{text-align:center;margin-top:15px;width:100%}.feature-grid{display:flex;justify-content:space-between;align-items:center;width:100%;margin:45px 0 40px}.feature-column{display:flex;flex-direction:column;gap:60px;width:35%}.feature-item{width:100%;align-items:end}.feature-column:first-child .feature-item{text-align:right}.feature-column:last-child .feature-item{text-align:left}.logo-img{display:flex;justify-content:center;align-items:center}.logotype-boxed{box-shadow:0 2px 4px #0000002e;padding:10px}.cta-image{width:30%;display:flex;justify-content:center;align-items:center;margin:0 40px}.center-image{display:flex;justify-content:center;align-items:center;overflow:hidden}.center-image img{display:block;max-width:100%;height:auto}.description{display:flex;justify-content:center;text-align:center;padding:0 15%}@media (max-width: 992px){.feature-grid{flex-direction:column;align-items:center;gap:40px;margin:25px 0}.center-image{order:3;width:280px;margin:10px 0 25px}.feature-column{width:100%;align-items:center;gap:35px}.feature-item{text-align:center!important;align-items:center}.description{padding:0 8%}}@media (max-width: 768px){.sale-bar{padding:30px 20px}.center-image{width:230px}.description{padding:0 6%}.feature-column{gap:28px}}@media (max-width: 480px){.sale-bar{padding:25px 15px}.center-image{width:80%}.logo-img{height:70px!important;align-items:center!important;text-align:center!important}simpo-text-editor.fs-1{font-size:28px!important}.feature-item{display:flex;flex-direction:column;gap:8px;text-align:center!important;align-items:center!important}.main-subheading{margin:5px auto 0!important;padding:0!important}.feature-item{gap:0px!important}.cta-image{width:100%!important;height:100%!important}}\n"] }]
|
|
24227
|
+
}], propDecorators: { edit: [{
|
|
24228
|
+
type: Input
|
|
24229
|
+
}], data: [{
|
|
24230
|
+
type: Input
|
|
24231
|
+
}], customClass: [{
|
|
24232
|
+
type: Input
|
|
24233
|
+
}], nextComponentColor: [{
|
|
24234
|
+
type: Input
|
|
24235
|
+
}], index: [{
|
|
24236
|
+
type: Input
|
|
24237
|
+
}], delete: [{
|
|
24238
|
+
type: Input
|
|
24296
24239
|
}] } });
|
|
24297
24240
|
|
|
24298
24241
|
class EndUserService {
|
|
@@ -24351,5 +24294,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
24351
24294
|
* Generated bundle index. Do not edit.
|
|
24352
24295
|
*/
|
|
24353
24296
|
|
|
24354
|
-
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, CountdownBannerComponent, 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, ImageBackgroundComponent, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridHotspotComponent, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LOCAL_STORAGE, LocationSectionComponent, LogoGalleryComponent, LogoShowcaseComponent, MapType, MergeHeaderDirective, MovingTextComponent, NavbarSectionComponent, NewCollectionComponent, NewServicesComponent, NewTestimonialsComponent, NewsLetterComponentComponent, ObjectPositionDirective, OverlappingImageComponent, 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, VideoGridSectionComponent, VideoRatio, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, cartType, checkItemAlreadyAdded, contentAlignment, fitContent, fitScreen, fontSize, headlineAnimationType, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective, svgData, syncItemToServerDBRequest };
|
|
24297
|
+
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, CondensedAndGradientComponent, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, CountdownBannerComponent, CustomerReviewComponent, DeviderType, ECOMMERCE_URL, EndUserService, EnrollmentFormComponent, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedCollectionComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterComponent, FooterSectionComponent, FooterType, FooterTypes, FourFeaturesCenteredImageComponent, GradientDirection, HALIGN, HEADER_STYLING, HeaderButtonStyle, HeaderSectionComponent, HeaderTextComponent, Header_Type, HeightDirective, HoverAnimationDirective, HoverDirective, IconDirectiveDirective, ImageBackgroundComponent, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridHotspotComponent, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LOCAL_STORAGE, LocationSectionComponent, LogoGalleryComponent, LogoShowcaseComponent, MapType, MergeHeaderDirective, MovingTextComponent, NavbarSectionComponent, NewCollectionComponent, NewServicesComponent, NewTestimonialsComponent, NewsLetterComponentComponent, ObjectPositionDirective, OverlappingImageComponent, 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, VideoGridSectionComponent, VideoRatio, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, cartType, checkItemAlreadyAdded, contentAlignment, fitContent, fitScreen, fontSize, headlineAnimationType, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective, svgData, syncItemToServerDBRequest };
|
|
24355
24298
|
//# sourceMappingURL=simpo-component-library.mjs.map
|