simpo-component-library 3.6.597 → 3.6.598
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 +12 -18
- 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/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-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 +166 -224
- 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.598.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';
|
|
@@ -2425,11 +2425,11 @@ class ImageEditorComponent {
|
|
|
2425
2425
|
}
|
|
2426
2426
|
}
|
|
2427
2427
|
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"] }] }); }
|
|
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
2429
|
}
|
|
2430
2430
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageEditorComponent, decorators: [{
|
|
2431
2431
|
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"] }]
|
|
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
2433
|
}], ctorParameters: () => [{ type: EventsService }, { type: ElementServiceService }, { type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
|
|
2434
2434
|
type: Inject,
|
|
2435
2435
|
args: [MAT_DIALOG_DATA]
|
|
@@ -10839,7 +10839,7 @@ class HeaderTextComponent extends BaseSection {
|
|
|
10839
10839
|
this.screenWidth = window.innerWidth;
|
|
10840
10840
|
}
|
|
10841
10841
|
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\"
|
|
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\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\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>\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
10843
|
}
|
|
10844
10844
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderTextComponent, decorators: [{
|
|
10845
10845
|
type: Component,
|
|
@@ -10858,7 +10858,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
10858
10858
|
PositionLayoutDirectiveDirective,
|
|
10859
10859
|
TextEditorComponent,
|
|
10860
10860
|
SpacingHorizontalDirective
|
|
10861
|
-
], template: "<div [id]=\"data?.id\"
|
|
10861
|
+
], template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\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>\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
10862
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
10863
10863
|
type: Input
|
|
10864
10864
|
}], index: [{
|
|
@@ -17428,7 +17428,7 @@ class FeaturedProductsComponent extends BaseSection {
|
|
|
17428
17428
|
this._eventService.buttonRedirection.emit({ data: data });
|
|
17429
17429
|
}
|
|
17430
17430
|
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:
|
|
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 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
17432
|
//directive
|
|
17433
17433
|
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
17434
|
// MatBottomSheetModule,
|
|
@@ -17466,7 +17466,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
17466
17466
|
SpacingAroundDirective,
|
|
17467
17467
|
ButtonEditorDirective,
|
|
17468
17468
|
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"] }]
|
|
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 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
17470
|
}], ctorParameters: () => [{ type: Object, decorators: [{
|
|
17471
17471
|
type: Inject,
|
|
17472
17472
|
args: [PLATFORM_ID]
|
|
@@ -17680,150 +17680,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
17680
17680
|
type: Input
|
|
17681
17681
|
}] } });
|
|
17682
17682
|
|
|
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
17683
|
class ProductDescComponent extends BaseSection {
|
|
17826
|
-
constructor(platformId, _eventService, router, activatedRoute, restService, cartService, storageService, messageService, metaTagService, titleService, bottomSheet, renderer, matDialog
|
|
17684
|
+
constructor(platformId, _eventService, router, activatedRoute, restService, cartService, storageService, messageService, metaTagService, titleService, bottomSheet, renderer, matDialog) {
|
|
17827
17685
|
super();
|
|
17828
17686
|
this.platformId = platformId;
|
|
17829
17687
|
this._eventService = _eventService;
|
|
@@ -17838,7 +17696,6 @@ class ProductDescComponent extends BaseSection {
|
|
|
17838
17696
|
this.bottomSheet = bottomSheet;
|
|
17839
17697
|
this.renderer = renderer;
|
|
17840
17698
|
this.matDialog = matDialog;
|
|
17841
|
-
this.analyticsService = analyticsService;
|
|
17842
17699
|
this.isLoading = false;
|
|
17843
17700
|
this.featureProductData = null;
|
|
17844
17701
|
this.recentViewedData = null;
|
|
@@ -17950,10 +17807,6 @@ class ProductDescComponent extends BaseSection {
|
|
|
17950
17807
|
const productId = qParam["id"];
|
|
17951
17808
|
if (productId) {
|
|
17952
17809
|
this.isLoading = true;
|
|
17953
|
-
// Tracking Analytics
|
|
17954
|
-
this.analyticsService.startNewContext({
|
|
17955
|
-
'PRODUCT': productId
|
|
17956
|
-
});
|
|
17957
17810
|
this.isItemAsFavorite = false;
|
|
17958
17811
|
this.restService.getProductDetails(productId).subscribe((response) => {
|
|
17959
17812
|
this.isLoading = false;
|
|
@@ -18672,7 +18525,7 @@ class ProductDescComponent extends BaseSection {
|
|
|
18672
18525
|
get stylesLayout() {
|
|
18673
18526
|
return { ...this.styles?.layout };
|
|
18674
18527
|
}
|
|
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 }
|
|
18528
|
+
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 }); }
|
|
18676
18529
|
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
18530
|
}
|
|
18678
18531
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductDescComponent, decorators: [{
|
|
@@ -18707,7 +18560,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
18707
18560
|
}], ctorParameters: () => [{ type: Object, decorators: [{
|
|
18708
18561
|
type: Inject,
|
|
18709
18562
|
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 }
|
|
18563
|
+
}] }, { 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
18564
|
type: ViewChild,
|
|
18712
18565
|
args: [CustomerReviewComponent, { static: false }]
|
|
18713
18566
|
}], aboveHeight: [{
|
|
@@ -18781,7 +18634,7 @@ class ProductListComponent extends BaseSection {
|
|
|
18781
18634
|
onWindowScroll(event) {
|
|
18782
18635
|
this.scrollingValue = window.pageYOffset || document.documentElement.scrollTop;
|
|
18783
18636
|
}
|
|
18784
|
-
constructor(platformId, _eventService, restService, router, activatedRoute, storageService, matBottomSheet, matDialog, cartService, messageService, renderer
|
|
18637
|
+
constructor(platformId, _eventService, restService, router, activatedRoute, storageService, matBottomSheet, matDialog, cartService, messageService, renderer) {
|
|
18785
18638
|
super();
|
|
18786
18639
|
this.platformId = platformId;
|
|
18787
18640
|
this._eventService = _eventService;
|
|
@@ -18794,7 +18647,6 @@ class ProductListComponent extends BaseSection {
|
|
|
18794
18647
|
this.cartService = cartService;
|
|
18795
18648
|
this.messageService = messageService;
|
|
18796
18649
|
this.renderer = renderer;
|
|
18797
|
-
this.analyticsService = analyticsService;
|
|
18798
18650
|
this.responseData = [];
|
|
18799
18651
|
this.isLoading = false;
|
|
18800
18652
|
this.apiLoading = false;
|
|
@@ -19006,7 +18858,6 @@ class ProductListComponent extends BaseSection {
|
|
|
19006
18858
|
this.pageNo = 1;
|
|
19007
18859
|
this.isAllListLoaded = false;
|
|
19008
18860
|
this.responseData = [];
|
|
19009
|
-
this.fetchAnalytics();
|
|
19010
18861
|
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
18862
|
this.responseData = response.data ?? [];
|
|
19012
18863
|
this.totalCount = response.count ?? 0;
|
|
@@ -19103,8 +18954,8 @@ class ProductListComponent extends BaseSection {
|
|
|
19103
18954
|
this.isLoading = response;
|
|
19104
18955
|
});
|
|
19105
18956
|
this.IsEcommerce = localStorage.getItem("websiteType") != 'STATIC' ? true : false;
|
|
19106
|
-
|
|
19107
|
-
|
|
18957
|
+
this.getAllCategories();
|
|
18958
|
+
this.getAllCollections();
|
|
19108
18959
|
this.minProductPrice = this.pricingMin = this.data?.styles.minPrice ?? 0;
|
|
19109
18960
|
this.maxProductPrice = this.pricingMax = this.data?.styles.maxPrice ?? 30000;
|
|
19110
18961
|
this.searchText = this.activatedRoute.snapshot.queryParams["searchTxt"];
|
|
@@ -19114,52 +18965,10 @@ class ProductListComponent extends BaseSection {
|
|
|
19114
18965
|
this.sortBy = qParam["sorting"] ?? "";
|
|
19115
18966
|
this.pricingMin = isNaN(Number(qParam["minPrice"])) ? 0 : Number(qParam["minPrice"]);
|
|
19116
18967
|
this.pricingMax = isNaN(Number(qParam["maxPrice"])) ? 0 : Number(qParam["maxPrice"]);
|
|
19117
|
-
|
|
18968
|
+
this.filterByCategoryCollectionParam(qParam["category"], qParam["collections"]);
|
|
19118
18969
|
});
|
|
19119
18970
|
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
|
-
});
|
|
18971
|
+
this.filterItemList();
|
|
19163
18972
|
}
|
|
19164
18973
|
get selectedCategoryCollectionChips() {
|
|
19165
18974
|
const chips = [];
|
|
@@ -19721,7 +19530,7 @@ class ProductListComponent extends BaseSection {
|
|
|
19721
19530
|
const brightness = (r * 299 + g * 587 + b * 114) / 1000;
|
|
19722
19531
|
return brightness > threshold ? '#000000' : '#ffffff';
|
|
19723
19532
|
}
|
|
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 }
|
|
19533
|
+
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
19534
|
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
19535
|
}
|
|
19727
19536
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductListComponent, decorators: [{
|
|
@@ -19753,7 +19562,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
19753
19562
|
}], ctorParameters: () => [{ type: Object, decorators: [{
|
|
19754
19563
|
type: Inject,
|
|
19755
19564
|
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 }
|
|
19565
|
+
}] }, { 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
19566
|
type: Input
|
|
19758
19567
|
}], data: [{
|
|
19759
19568
|
type: Input
|
|
@@ -24165,14 +23974,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
24165
23974
|
class OverlappingImageComponent extends BaseSection {
|
|
24166
23975
|
constructor() {
|
|
24167
23976
|
super();
|
|
24168
|
-
this.
|
|
24169
|
-
this.subText = '';
|
|
23977
|
+
this.getScreenSize();
|
|
24170
23978
|
}
|
|
24171
23979
|
ngOnInit() {
|
|
24172
23980
|
this.styles = this.data?.styles;
|
|
24173
23981
|
this.content = this.data?.content;
|
|
24174
|
-
|
|
24175
|
-
|
|
23982
|
+
}
|
|
23983
|
+
getScreenSize() {
|
|
23984
|
+
this.screenWidth = window.innerWidth;
|
|
24176
23985
|
}
|
|
24177
23986
|
get stylesLayout() {
|
|
24178
23987
|
return { ...this.styles?.layout };
|
|
@@ -24194,7 +24003,7 @@ class OverlappingImageComponent extends BaseSection {
|
|
|
24194
24003
|
return ''; // fallback
|
|
24195
24004
|
}
|
|
24196
24005
|
}
|
|
24197
|
-
|
|
24006
|
+
get accentBackground() {
|
|
24198
24007
|
const bg = this.styles?.background;
|
|
24199
24008
|
if (!bg)
|
|
24200
24009
|
return '';
|
|
@@ -24207,7 +24016,7 @@ class OverlappingImageComponent extends BaseSection {
|
|
|
24207
24016
|
: `linear-gradient(${bg.accentColor}, ${bg.secondaryAccentColor})`;
|
|
24208
24017
|
}
|
|
24209
24018
|
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:
|
|
24019
|
+
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\" [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':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
24020
|
//Directives
|
|
24212
24021
|
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
24022
|
}
|
|
@@ -24227,7 +24036,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
24227
24036
|
CornerDirective,
|
|
24228
24037
|
ImageEditorDirective,
|
|
24229
24038
|
AnimationDirective
|
|
24230
|
-
], template: "<section class=\"cta-section total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n
|
|
24039
|
+
], 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\" [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':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
24040
|
}], ctorParameters: () => [], propDecorators: { nextComponentColor: [{
|
|
24232
24041
|
type: Input
|
|
24233
24042
|
}], data: [{
|
|
@@ -24240,19 +24049,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
24240
24049
|
type: Input
|
|
24241
24050
|
}], delete: [{
|
|
24242
24051
|
type: Input
|
|
24052
|
+
}], getScreenSize: [{
|
|
24053
|
+
type: HostListener,
|
|
24054
|
+
args: ["window: resize", ["$event"]]
|
|
24243
24055
|
}] } });
|
|
24244
24056
|
|
|
24245
24057
|
class ImageBackgroundComponent extends BaseSection {
|
|
24246
24058
|
constructor() {
|
|
24247
24059
|
super();
|
|
24248
|
-
this.
|
|
24249
|
-
this.subText = '';
|
|
24060
|
+
this.getScreenSize();
|
|
24250
24061
|
}
|
|
24251
24062
|
ngOnInit() {
|
|
24252
24063
|
this.styles = this.data?.styles;
|
|
24253
24064
|
this.content = this.data?.content;
|
|
24254
|
-
|
|
24255
|
-
|
|
24065
|
+
}
|
|
24066
|
+
getScreenSize() {
|
|
24067
|
+
this.screenWidth = window.innerWidth;
|
|
24256
24068
|
}
|
|
24257
24069
|
get stylesLayout() {
|
|
24258
24070
|
return { ...this.styles?.layout };
|
|
@@ -24261,7 +24073,7 @@ class ImageBackgroundComponent extends BaseSection {
|
|
|
24261
24073
|
return this.styles?.layout?.headingSpacing;
|
|
24262
24074
|
}
|
|
24263
24075
|
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=\"
|
|
24076
|
+
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 [simpoCorner]=\"styles?.corners\"\r\n [spacingHorizontal]=\"stylesLayout\" [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;border-radius:20px;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
24077
|
//Directives
|
|
24266
24078
|
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
24079
|
}
|
|
@@ -24280,7 +24092,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
24280
24092
|
CornerDirective,
|
|
24281
24093
|
ImageEditorDirective,
|
|
24282
24094
|
AnimationDirective
|
|
24283
|
-
], template: "<section class=\"
|
|
24095
|
+
], 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 [simpoCorner]=\"styles?.corners\"\r\n [spacingHorizontal]=\"stylesLayout\" [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;border-radius:20px;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
24096
|
}], ctorParameters: () => [], propDecorators: { nextComponentColor: [{
|
|
24285
24097
|
type: Input
|
|
24286
24098
|
}], data: [{
|
|
@@ -24293,6 +24105,136 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
24293
24105
|
type: Input
|
|
24294
24106
|
}], delete: [{
|
|
24295
24107
|
type: Input
|
|
24108
|
+
}], getScreenSize: [{
|
|
24109
|
+
type: HostListener,
|
|
24110
|
+
args: ["window: resize", ["$event"]]
|
|
24111
|
+
}] } });
|
|
24112
|
+
|
|
24113
|
+
class CondensedAndGradientComponent extends BaseSection {
|
|
24114
|
+
ngOnInit() {
|
|
24115
|
+
this.content = this.data?.content;
|
|
24116
|
+
this.style = this.data?.styles;
|
|
24117
|
+
}
|
|
24118
|
+
get stylesLayout() {
|
|
24119
|
+
return { ...this.style?.layout };
|
|
24120
|
+
}
|
|
24121
|
+
getIconBackground(icon) {
|
|
24122
|
+
if (icon?.backgroundType === 'Gradient') {
|
|
24123
|
+
const direction = icon?.backgroundGradientDirection || 'to bottom';
|
|
24124
|
+
return `linear-gradient(${direction}, ${icon?.backgroundColor}, ${icon?.secondaryColor})`;
|
|
24125
|
+
}
|
|
24126
|
+
return icon?.backgroundColor;
|
|
24127
|
+
}
|
|
24128
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CondensedAndGradientComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
24129
|
+
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\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\"\r\n [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"style?.layout\" 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%;color:#fff;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: 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"] }] }); }
|
|
24130
|
+
}
|
|
24131
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CondensedAndGradientComponent, decorators: [{
|
|
24132
|
+
type: Component,
|
|
24133
|
+
args: [{ selector: 'simpo-condensed-and-gradient', standalone: true, imports: [
|
|
24134
|
+
CommonModule,
|
|
24135
|
+
SimpoElementsModule,
|
|
24136
|
+
SimpoComponentModule,
|
|
24137
|
+
TextEditorComponent,
|
|
24138
|
+
BackgroundDirective,
|
|
24139
|
+
HoverDirective,
|
|
24140
|
+
OverlayDirective,
|
|
24141
|
+
SpacingHorizontalDirective,
|
|
24142
|
+
BorderDirective,
|
|
24143
|
+
ContentFitDirective,
|
|
24144
|
+
ImageEditorDirective,
|
|
24145
|
+
IconDirectiveDirective
|
|
24146
|
+
], 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\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\"\r\n [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"style?.layout\" 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%;color:#fff;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"] }]
|
|
24147
|
+
}], propDecorators: { edit: [{
|
|
24148
|
+
type: Input
|
|
24149
|
+
}], data: [{
|
|
24150
|
+
type: Input
|
|
24151
|
+
}], customClass: [{
|
|
24152
|
+
type: Input
|
|
24153
|
+
}], nextComponentColor: [{
|
|
24154
|
+
type: Input
|
|
24155
|
+
}], index: [{
|
|
24156
|
+
type: Input
|
|
24157
|
+
}], delete: [{
|
|
24158
|
+
type: Input
|
|
24159
|
+
}] } });
|
|
24160
|
+
|
|
24161
|
+
class FourFeaturesCenteredImageComponent extends BaseSection {
|
|
24162
|
+
constructor() {
|
|
24163
|
+
super(...arguments);
|
|
24164
|
+
this.leftInputText = [];
|
|
24165
|
+
this.rightInputText = [];
|
|
24166
|
+
}
|
|
24167
|
+
get stylesLayout() {
|
|
24168
|
+
return { ...this.style?.layout };
|
|
24169
|
+
}
|
|
24170
|
+
ngOnInit() {
|
|
24171
|
+
this.initializeSection();
|
|
24172
|
+
}
|
|
24173
|
+
ngOnChanges(changes) {
|
|
24174
|
+
if (changes['data']) {
|
|
24175
|
+
this.initializeSection();
|
|
24176
|
+
}
|
|
24177
|
+
}
|
|
24178
|
+
initializeSection() {
|
|
24179
|
+
if (!this.data)
|
|
24180
|
+
return;
|
|
24181
|
+
this.content = this.data.content || {};
|
|
24182
|
+
this.style = this.data.styles || {};
|
|
24183
|
+
this.splitFeatures();
|
|
24184
|
+
}
|
|
24185
|
+
splitFeatures() {
|
|
24186
|
+
if (!this.content?.inputText?.length) {
|
|
24187
|
+
this.leftInputText = [];
|
|
24188
|
+
this.rightInputText = [];
|
|
24189
|
+
return;
|
|
24190
|
+
}
|
|
24191
|
+
const mid = Math.ceil(this.content.inputText.length / 2);
|
|
24192
|
+
this.leftInputText = this.content.inputText.slice(0, mid);
|
|
24193
|
+
this.rightInputText = this.content.inputText.slice(mid);
|
|
24194
|
+
}
|
|
24195
|
+
getIconBackground(icon) {
|
|
24196
|
+
if (icon?.backgroundType === 'Gradient') {
|
|
24197
|
+
const direction = GradientDirection[icon?.backgroundGradientDirection] || GradientDirection.DOWN;
|
|
24198
|
+
return `linear-gradient(${direction}, ${icon?.backgroundColor}, ${icon?.secondaryColor})`;
|
|
24199
|
+
}
|
|
24200
|
+
else {
|
|
24201
|
+
return icon?.backgroundColor;
|
|
24202
|
+
}
|
|
24203
|
+
}
|
|
24204
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FourFeaturesCenteredImageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
24205
|
+
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\" [simpoOverlay]=\"style?.background\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoLayout]=\"style?.layout\" class=\"sale-bar\">\r\n <div class=\"features-wrapper\" [simpoAnimation]=\"style?.animation\">\r\n\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}.main-heading,.main-subheading{word-break:break-word;overflow-wrap:anywhere}.features-wrapper{text-align:center;margin-top:15px}.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"] }] }); }
|
|
24206
|
+
}
|
|
24207
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FourFeaturesCenteredImageComponent, decorators: [{
|
|
24208
|
+
type: Component,
|
|
24209
|
+
args: [{ selector: 'simpo-four-features-centered-image', standalone: true, imports: [
|
|
24210
|
+
CommonModule,
|
|
24211
|
+
SimpoElementsModule,
|
|
24212
|
+
SimpoComponentModule,
|
|
24213
|
+
TextEditorComponent,
|
|
24214
|
+
BackgroundDirective,
|
|
24215
|
+
HoverDirective,
|
|
24216
|
+
OverlayDirective,
|
|
24217
|
+
SpacingHorizontalDirective,
|
|
24218
|
+
BorderDirective,
|
|
24219
|
+
ContentFitDirective,
|
|
24220
|
+
ImageEditorDirective,
|
|
24221
|
+
IconDirectiveDirective,
|
|
24222
|
+
MatIconModule,
|
|
24223
|
+
CornerDirective,
|
|
24224
|
+
AnimationDirective,
|
|
24225
|
+
], template: "<section>\r\n <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\"\r\n [simpoBackground]=\"style?.background\" [simpoOverlay]=\"style?.background\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoLayout]=\"style?.layout\" class=\"sale-bar\">\r\n <div class=\"features-wrapper\" [simpoAnimation]=\"style?.animation\">\r\n\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}.main-heading,.main-subheading{word-break:break-word;overflow-wrap:anywhere}.features-wrapper{text-align:center;margin-top:15px}.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"] }]
|
|
24226
|
+
}], propDecorators: { edit: [{
|
|
24227
|
+
type: Input
|
|
24228
|
+
}], data: [{
|
|
24229
|
+
type: Input
|
|
24230
|
+
}], customClass: [{
|
|
24231
|
+
type: Input
|
|
24232
|
+
}], nextComponentColor: [{
|
|
24233
|
+
type: Input
|
|
24234
|
+
}], index: [{
|
|
24235
|
+
type: Input
|
|
24236
|
+
}], delete: [{
|
|
24237
|
+
type: Input
|
|
24296
24238
|
}] } });
|
|
24297
24239
|
|
|
24298
24240
|
class EndUserService {
|
|
@@ -24351,5 +24293,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
24351
24293
|
* Generated bundle index. Do not edit.
|
|
24352
24294
|
*/
|
|
24353
24295
|
|
|
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 };
|
|
24296
|
+
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
24297
|
//# sourceMappingURL=simpo-component-library.mjs.map
|