simpo-component-library 1.4.47 → 1.4.48

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.
Files changed (23) hide show
  1. package/esm2022/lib/ecommerce/json/user-cart.json +40 -0
  2. package/esm2022/lib/ecommerce/sections/cart/cart.component.mjs +36 -38
  3. package/esm2022/lib/ecommerce/sections/featured-products/featured-products.component.mjs +27 -35
  4. package/esm2022/lib/ecommerce/sections/product-desc/product-desc.component.mjs +23 -37
  5. package/esm2022/lib/ecommerce/sections/product-list/product-list.component.mjs +11 -37
  6. package/esm2022/lib/sections/navbar-section/navbar-section.component.mjs +3 -3
  7. package/esm2022/lib/services/cart.service.mjs +106 -35
  8. package/esm2022/lib/services/storage.service.mjs +25 -22
  9. package/fesm2022/simpo-component-library.mjs +294 -220
  10. package/fesm2022/simpo-component-library.mjs.map +1 -1
  11. package/lib/directive/background-directive.d.ts +1 -1
  12. package/lib/directive/button-directive.directive.d.ts +1 -1
  13. package/lib/directive/color.directive.d.ts +1 -1
  14. package/lib/ecommerce/sections/cart/cart.component.d.ts +0 -3
  15. package/lib/ecommerce/sections/featured-products/featured-products.component.d.ts +2 -5
  16. package/lib/ecommerce/sections/product-desc/product-desc.component.d.ts +2 -6
  17. package/lib/ecommerce/sections/product-list/product-list.component.d.ts +1 -5
  18. package/lib/sections/pricing-section/pricing-section.component.d.ts +1 -1
  19. package/lib/services/cart.service.d.ts +5 -6
  20. package/lib/services/storage.service.d.ts +42 -3
  21. package/package.json +1 -1
  22. package/simpo-component-library-1.4.48.tgz +0 -0
  23. package/simpo-component-library-1.4.47.tgz +0 -0
package/fesm2022/simpo-component-library.mjs CHANGED
@@ -8,20 +8,20 @@ import { MatButtonModule } from '@angular/material/button';
8
8
  import { MatIconModule, MatIcon } from '@angular/material/icon';
9
9
  import * as i3 from '@angular/material/dialog';
10
10
  import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
11
- import * as i6 from '@angular/forms';
11
+ import * as i2$2 from '@angular/forms';
12
12
  import { FormsModule } from '@angular/forms';
13
- import * as i9 from 'ngx-skeleton-loader';
13
+ import * as i8 from 'ngx-skeleton-loader';
14
14
  import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
15
15
  import * as i1 from '@angular/platform-browser';
16
16
  import { map, forkJoin } from 'rxjs';
17
17
  import * as i1$1 from '@angular/common/http';
18
- import * as i2$2 from '@angular/router';
19
- import * as i2$3 from 'ngx-cookie-service';
20
- import * as i2$4 from '@angular/material/snack-bar';
18
+ import * as i2$3 from '@angular/router';
19
+ import * as i2$4 from 'ngx-cookie-service';
20
+ import * as i2$5 from '@angular/material/snack-bar';
21
21
  import * as mapboxgl from 'mapbox-gl';
22
- import * as i10 from 'ngx-image-zoom';
22
+ import * as i9 from 'ngx-image-zoom';
23
23
  import { NgxImageZoomModule } from 'ngx-image-zoom';
24
- import * as i10$1 from '@angular/material/slider';
24
+ import * as i9$1 from '@angular/material/slider';
25
25
  import { MatSliderModule } from '@angular/material/slider';
26
26
  import { MatSelectModule } from '@angular/material/select';
27
27
  import * as i4 from 'primeng/timeline';
@@ -1163,7 +1163,7 @@ class InputFieldsComponent {
1163
1163
  this.enteredValue = value;
1164
1164
  }
1165
1165
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: InputFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1166
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: InputFieldsComponent, isStandalone: true, selector: "simpo-input-fields", inputs: { feild: "feild", opacity: "opacity", bgColor: "bgColor", sectionId: "sectionId" }, usesOnChanges: true, ngImport: i0, template: "<section [ngSwitch]=\"feild.type\" class=\"mt-15\">\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'text'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <input type=\"text\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\">\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'address'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <input type=\"text\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\">\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'email'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <input type=\"email\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\">\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'password'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <input type=\"password\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\">\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'rating'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <div class=\"d-flex\">\r\n <span class=\"fa fa-star\" *ngFor=\"let _ of [].constructor(5); let idx = index\" [ngClass]=\"{'checked': idx < (ratingHoverIndex ?? feild.value) }\" (mouseenter)=\"ratingHoverIndex = idx +1\" (mouseleave)=\"ratingHoverIndex = null\" (click)=\"feild.value = idx +1\"></span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'date'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <input type=\"date\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\">\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'checkbox'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <div class=\"d-flex align-items-center flex-wrap\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let checkbox of feild.options\">\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n <input type=\"checkbox\" [attr.id]=\"checkbox.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"checkbox.status\">\r\n <label [attr.for]=\"checkbox.value\" class=\"mb-0 mt-1 checkboxFont\">{{ checkbox.value }}</label>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'number'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <input type=\"number\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\">\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'money'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <input type=\"text\" class=\"p-2\" value=\"$\" (keydown)=\"handleMoneyInput($event)\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\">\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'desc'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <textarea class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\"></textarea>\r\n </div>\r\n <div class=\"d-flex flex-column mr-2 position-relative\" *ngSwitchCase=\"'dropdown'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n\r\n <div class=\"position-relative d-flex align-items-center\"> \r\n <input type=\"text\" readonly [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [value]=\"enteredValue\" (click)=\"selectedDropdown = feild.value\" [(ngModel)]=\"feild.inputValue\" class=\"w-100\">\r\n <mat-icon class=\"down-arrow\">{{feild.value != selectedDropdown ? 'keyboard_arrow_down' : 'keyboard_arrow_up'}}</mat-icon>\r\n </div>\r\n <div class=\"container-list position-absolute\" [hidden]=\"feild.value != selectedDropdown\">\r\n <ng-container *ngFor=\"let option of feild.options\">\r\n <div class=\"container\" [ngClass]=\"{'container-selected': option.value == selectedDropdown}\" (click)=\"selectDropdown(option.value)\">{{ option.value }}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</section>\r\n", styles: ["input,textarea,select{border-radius:5px;border:none;outline:none;padding:8px 8px 8px 10px!important;font-size:large;background-color:#000;font-weight:400}.checkboxFont{font-size:16px;font-weight:400}.down-arrow{position:absolute;right:5px}.fa-star{opacity:.3;cursor:pointer;font-size:20px}input[type=checkbox]{height:18px;width:18px}.checked{opacity:1;color:#daa520}.input-field-label{font-size:16px;font-weight:400}.mt-15{margin-top:15px}.container-list{box-shadow:0 0 3px #999;background-color:#fff;border-radius:5px;padding:3px 0;font-weight:400;overflow:hidden;position:absolute;top:70px;width:100%;z-index:1}.container-list .container{cursor:pointer;padding:10px;font-size:18px}.container-list .container-selected{color:#fff;background-color:purple}.container-list .container:hover{color:#fff;background-color:purple;width:100%;font-weight:600!important}sup{color:red}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.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: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
1166
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: InputFieldsComponent, isStandalone: true, selector: "simpo-input-fields", inputs: { feild: "feild", opacity: "opacity", bgColor: "bgColor", sectionId: "sectionId" }, usesOnChanges: true, ngImport: i0, template: "<section [ngSwitch]=\"feild.type\" class=\"mt-15\">\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'text'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <input type=\"text\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\">\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'address'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <input type=\"text\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\">\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'email'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <input type=\"email\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\">\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'password'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <input type=\"password\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\">\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'rating'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <div class=\"d-flex\">\r\n <span class=\"fa fa-star\" *ngFor=\"let _ of [].constructor(5); let idx = index\" [ngClass]=\"{'checked': idx < (ratingHoverIndex ?? feild.value) }\" (mouseenter)=\"ratingHoverIndex = idx +1\" (mouseleave)=\"ratingHoverIndex = null\" (click)=\"feild.value = idx +1\"></span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'date'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <input type=\"date\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\">\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'checkbox'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <div class=\"d-flex align-items-center flex-wrap\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let checkbox of feild.options\">\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n <input type=\"checkbox\" [attr.id]=\"checkbox.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"checkbox.status\">\r\n <label [attr.for]=\"checkbox.value\" class=\"mb-0 mt-1 checkboxFont\">{{ checkbox.value }}</label>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'number'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <input type=\"number\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\">\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'money'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <input type=\"text\" class=\"p-2\" value=\"$\" (keydown)=\"handleMoneyInput($event)\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\">\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'desc'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <textarea class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\"></textarea>\r\n </div>\r\n <div class=\"d-flex flex-column mr-2 position-relative\" *ngSwitchCase=\"'dropdown'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n\r\n <div class=\"position-relative d-flex align-items-center\"> \r\n <input type=\"text\" readonly [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [value]=\"enteredValue\" (click)=\"selectedDropdown = feild.value\" [(ngModel)]=\"feild.inputValue\" class=\"w-100\">\r\n <mat-icon class=\"down-arrow\">{{feild.value != selectedDropdown ? 'keyboard_arrow_down' : 'keyboard_arrow_up'}}</mat-icon>\r\n </div>\r\n <div class=\"container-list position-absolute\" [hidden]=\"feild.value != selectedDropdown\">\r\n <ng-container *ngFor=\"let option of feild.options\">\r\n <div class=\"container\" [ngClass]=\"{'container-selected': option.value == selectedDropdown}\" (click)=\"selectDropdown(option.value)\">{{ option.value }}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</section>\r\n", styles: ["input,textarea,select{border-radius:5px;border:none;outline:none;padding:8px 8px 8px 10px!important;font-size:large;background-color:#000;font-weight:400}.checkboxFont{font-size:16px;font-weight:400}.down-arrow{position:absolute;right:5px}.fa-star{opacity:.3;cursor:pointer;font-size:20px}input[type=checkbox]{height:18px;width:18px}.checked{opacity:1;color:#daa520}.input-field-label{font-size:16px;font-weight:400}.mt-15{margin-top:15px}.container-list{box-shadow:0 0 3px #999;background-color:#fff;border-radius:5px;padding:3px 0;font-weight:400;overflow:hidden;position:absolute;top:70px;width:100%;z-index:1}.container-list .container{cursor:pointer;padding:10px;font-size:18px}.container-list .container-selected{color:#fff;background-color:purple}.container-list .container:hover{color:#fff;background-color:purple;width:100%;font-weight:600!important}sup{color:red}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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: i2$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
1167
1167
  }
1168
1168
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: InputFieldsComponent, decorators: [{
1169
1169
  type: Component,
@@ -2987,6 +2987,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
2987
2987
  args: ['simpoSticky']
2988
2988
  }] } });
2989
2989
 
2990
+ var orderedItems$1 = [
2991
+ ];
2992
+ var cartType$1 = "CART";
2993
+ var billdetails$1 = {
2994
+ totalNetValue: 0,
2995
+ totalGrossValue: 0,
2996
+ totalTax: 0,
2997
+ totalOfferedValue: 0,
2998
+ deliveryCharges: 0,
2999
+ couponId: "",
3000
+ discountAmount: 0,
3001
+ afterDiscountAmount: 0,
3002
+ taxBreakup: {
3003
+ cgstValue: 0,
3004
+ sgstValue: 0,
3005
+ igstValue: 0
3006
+ }
3007
+ };
3008
+ var userDetails = {
3009
+ userId: "",
3010
+ userName: "",
3011
+ mobile: "",
3012
+ email: "",
3013
+ pinCode: ""
3014
+ };
3015
+ var locationDetails$1 = {
3016
+ countryId: "",
3017
+ cityId: "",
3018
+ stateId: "",
3019
+ localityId: "",
3020
+ countryName: "",
3021
+ cityName: "",
3022
+ stateName: "",
3023
+ localityName: "",
3024
+ pinCode: ""
3025
+ };
3026
+ var platform$1 = "WEB";
3027
+ var totalAmount$1 = 0;
3028
+ var cartId = "";
3029
+ var UserCart = {
3030
+ orderedItems: orderedItems$1,
3031
+ cartType: cartType$1,
3032
+ billdetails: billdetails$1,
3033
+ userDetails: userDetails,
3034
+ locationDetails: locationDetails$1,
3035
+ platform: platform$1,
3036
+ totalAmount: totalAmount$1,
3037
+ cartId: cartId
3038
+ };
3039
+
2990
3040
  var user = {
2991
3041
  addressDetailsList: [
2992
3042
  ],
@@ -3170,8 +3220,8 @@ class UserBasicInfoComponent {
3170
3220
  this.router.navigate(['/']);
3171
3221
  });
3172
3222
  }
3173
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserBasicInfoComponent, deps: [{ token: RestService }, { token: i2$2.Router }, { token: i3.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
3174
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: UserBasicInfoComponent, isStandalone: true, selector: "simpo-user-basic-info", ngImport: i0, template: "<section style=\"padding: 20px\" class=\"position-relative\">\r\n <div class=\"d-flex flex-wrap justify-content-between\">\r\n <div class=\"form-control-group-3\">\r\n <div class=\"label\">First Name</div>\r\n <input type=\"text\" placeholder=\"Enter first name\" [(ngModel)]=\"firstName\">\r\n </div>\r\n <div class=\"form-control-group-3\">\r\n <div class=\"label\">Middle Name</div>\r\n <input type=\"text\" placeholder=\"Enter middle name\" [(ngModel)]=\"middleName\">\r\n </div>\r\n <div class=\"form-control-group-3\">\r\n <div class=\"label\">Last Name</div>\r\n <input type=\"text\" placeholder=\"Enter last name\" [(ngModel)]=\"lastName\">\r\n </div>\r\n <div class=\"form-control-group-full\">\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Email</div>\r\n <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"email\">\r\n </div>\r\n </div> \r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Select Gender</div>\r\n <div class=\"d-flex align-items-center\">\r\n <img src=\"https://img.icons8.com/?size=100&id=108296&format=png&color=000000\" alt=\"\" (click)=\"gender = 'MALE'\" [ngClass]=\"{'active': gender == 'MALE' }\">\r\n <img src=\"https://img.icons8.com/?size=100&id=108295&format=png&color=000000\" alt=\"\" (click)=\"gender = 'FEMALE'\" [ngClass]=\"{'active': gender == 'FEMALE'}\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"action-btn\">\r\n <span class=\"skip-btn\" (click)=\"close()\">Skip</span>\r\n <button (click)=\"saveProfile()\">Save Profile</button>\r\n </div>\r\n</section>", styles: [".form-control-group,.form-control-group-3,.form-control-group-full{width:48%}:is(.form-control-group,.form-control-group-3,.form-control-group-full)>input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.label{color:#000}.form-control-group-3{width:32%!important}.form-control-group-full{width:100%}.form-control-group{margin:15px 0}.form-control-group img{height:50px;width:50px;object-fit:cover;margin:0 5px;border:2px solid transparent;cursor:pointer;border-radius:50%}.form-control-group .active{border:2px solid #0267C1}.action-btn{position:absolute;bottom:-35px;right:10px;display:flex;align-items:center;gap:20px}.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
3223
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserBasicInfoComponent, deps: [{ token: RestService }, { token: i2$3.Router }, { token: i3.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
3224
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: UserBasicInfoComponent, isStandalone: true, selector: "simpo-user-basic-info", ngImport: i0, template: "<section style=\"padding: 20px\" class=\"position-relative\">\r\n <div class=\"d-flex flex-wrap justify-content-between\">\r\n <div class=\"form-control-group-3\">\r\n <div class=\"label\">First Name</div>\r\n <input type=\"text\" placeholder=\"Enter first name\" [(ngModel)]=\"firstName\">\r\n </div>\r\n <div class=\"form-control-group-3\">\r\n <div class=\"label\">Middle Name</div>\r\n <input type=\"text\" placeholder=\"Enter middle name\" [(ngModel)]=\"middleName\">\r\n </div>\r\n <div class=\"form-control-group-3\">\r\n <div class=\"label\">Last Name</div>\r\n <input type=\"text\" placeholder=\"Enter last name\" [(ngModel)]=\"lastName\">\r\n </div>\r\n <div class=\"form-control-group-full\">\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Email</div>\r\n <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"email\">\r\n </div>\r\n </div> \r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Select Gender</div>\r\n <div class=\"d-flex align-items-center\">\r\n <img src=\"https://img.icons8.com/?size=100&id=108296&format=png&color=000000\" alt=\"\" (click)=\"gender = 'MALE'\" [ngClass]=\"{'active': gender == 'MALE' }\">\r\n <img src=\"https://img.icons8.com/?size=100&id=108295&format=png&color=000000\" alt=\"\" (click)=\"gender = 'FEMALE'\" [ngClass]=\"{'active': gender == 'FEMALE'}\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"action-btn\">\r\n <span class=\"skip-btn\" (click)=\"close()\">Skip</span>\r\n <button (click)=\"saveProfile()\">Save Profile</button>\r\n </div>\r\n</section>", styles: [".form-control-group,.form-control-group-3,.form-control-group-full{width:48%}:is(.form-control-group,.form-control-group-3,.form-control-group-full)>input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.label{color:#000}.form-control-group-3{width:32%!important}.form-control-group-full{width:100%}.form-control-group{margin:15px 0}.form-control-group img{height:50px;width:50px;object-fit:cover;margin:0 5px;border:2px solid transparent;cursor:pointer;border-radius:50%}.form-control-group .active{border:2px solid #0267C1}.action-btn{position:absolute;bottom:-35px;right:10px;display:flex;align-items:center;gap:20px}.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
3175
3225
  }
3176
3226
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserBasicInfoComponent, decorators: [{
3177
3227
  type: Component,
@@ -3180,7 +3230,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
3180
3230
  MatDialogModule,
3181
3231
  FormsModule
3182
3232
  ], template: "<section style=\"padding: 20px\" class=\"position-relative\">\r\n <div class=\"d-flex flex-wrap justify-content-between\">\r\n <div class=\"form-control-group-3\">\r\n <div class=\"label\">First Name</div>\r\n <input type=\"text\" placeholder=\"Enter first name\" [(ngModel)]=\"firstName\">\r\n </div>\r\n <div class=\"form-control-group-3\">\r\n <div class=\"label\">Middle Name</div>\r\n <input type=\"text\" placeholder=\"Enter middle name\" [(ngModel)]=\"middleName\">\r\n </div>\r\n <div class=\"form-control-group-3\">\r\n <div class=\"label\">Last Name</div>\r\n <input type=\"text\" placeholder=\"Enter last name\" [(ngModel)]=\"lastName\">\r\n </div>\r\n <div class=\"form-control-group-full\">\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Email</div>\r\n <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"email\">\r\n </div>\r\n </div> \r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Select Gender</div>\r\n <div class=\"d-flex align-items-center\">\r\n <img src=\"https://img.icons8.com/?size=100&id=108296&format=png&color=000000\" alt=\"\" (click)=\"gender = 'MALE'\" [ngClass]=\"{'active': gender == 'MALE' }\">\r\n <img src=\"https://img.icons8.com/?size=100&id=108295&format=png&color=000000\" alt=\"\" (click)=\"gender = 'FEMALE'\" [ngClass]=\"{'active': gender == 'FEMALE'}\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"action-btn\">\r\n <span class=\"skip-btn\" (click)=\"close()\">Skip</span>\r\n <button (click)=\"saveProfile()\">Save Profile</button>\r\n </div>\r\n</section>", styles: [".form-control-group,.form-control-group-3,.form-control-group-full{width:48%}:is(.form-control-group,.form-control-group-3,.form-control-group-full)>input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.label{color:#000}.form-control-group-3{width:32%!important}.form-control-group-full{width:100%}.form-control-group{margin:15px 0}.form-control-group img{height:50px;width:50px;object-fit:cover;margin:0 5px;border:2px solid transparent;cursor:pointer;border-radius:50%}.form-control-group .active{border:2px solid #0267C1}.action-btn{position:absolute;bottom:-35px;right:10px;display:flex;align-items:center;gap:20px}.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}\n"] }]
3183
- }], ctorParameters: () => [{ type: RestService }, { type: i2$2.Router }, { type: i3.MatDialogRef }] });
3233
+ }], ctorParameters: () => [{ type: RestService }, { type: i2$3.Router }, { type: i3.MatDialogRef }] });
3184
3234
 
3185
3235
  var orderedItems = [
3186
3236
  ];
@@ -3246,7 +3296,7 @@ class StorageServiceService {
3246
3296
  const request = await this.getUserCart();
3247
3297
  request.onsuccess = async (response) => {
3248
3298
  this.eventService.showLoadingScreen.emit(false);
3249
- // UserCart.orderedItems = await response.target.result;
3299
+ UserCart.orderedItems = await response.target.result;
3250
3300
  };
3251
3301
  };
3252
3302
  request.onupgradeneeded = (event) => {
@@ -3260,8 +3310,8 @@ class StorageServiceService {
3260
3310
  this.eventService.showLoadingScreen.emit(true);
3261
3311
  const request = await this.getUserCart();
3262
3312
  request.onsuccess = async (response) => {
3263
- // UserCart.orderedItems = await response.target.result;
3264
- // console.log("Car", UserCart);
3313
+ UserCart.orderedItems = await response.target.result;
3314
+ console.log("Car", UserCart);
3265
3315
  const favRequest = await this.getUserWhishlist();
3266
3316
  favRequest.onsuccess = async (favResponse) => {
3267
3317
  UserFavourite.orderedItems = await favResponse.target.result;
@@ -3271,18 +3321,18 @@ class StorageServiceService {
3271
3321
  };
3272
3322
  }
3273
3323
  calculateBillingDetails() {
3274
- // UserCart.billdetails.totalGrossValue = 0;
3275
- // UserCart.billdetails.totalNetValue = 0;
3276
- // UserCart.billdetails.deliveryCharges = 0;
3277
- // UserCart.billdetails.discountAmount = 0;
3278
- // UserCart.billdetails.totalOfferedValue = 0;
3279
- // UserCart.billdetails.totalTax = 0;
3280
- // UserCart.orderedItems.forEach((item: OrderedItems)=> {
3281
- // UserCart.billdetails.totalGrossValue += (item.price * item.quantity);
3282
- // UserCart.billdetails.totalTax += (item.itemTax * item.quantity);
3283
- // })
3284
- // UserCart.billdetails.totalNetValue = (UserCart.billdetails.totalGrossValue + UserCart.billdetails.totalTax + UserCart.billdetails.deliveryCharges) - UserCart.billdetails.discountAmount;
3285
- // return UserCart;
3324
+ UserCart.billdetails.totalGrossValue = 0;
3325
+ UserCart.billdetails.totalNetValue = 0;
3326
+ UserCart.billdetails.deliveryCharges = 0;
3327
+ UserCart.billdetails.discountAmount = 0;
3328
+ UserCart.billdetails.totalOfferedValue = 0;
3329
+ UserCart.billdetails.totalTax = 0;
3330
+ UserCart.orderedItems.forEach((item) => {
3331
+ UserCart.billdetails.totalGrossValue += (item.price * item.quantity);
3332
+ UserCart.billdetails.totalTax += (item.itemTax * item.quantity);
3333
+ });
3334
+ UserCart.billdetails.totalNetValue = (UserCart.billdetails.totalGrossValue + UserCart.billdetails.totalTax + UserCart.billdetails.deliveryCharges) - UserCart.billdetails.discountAmount;
3335
+ return UserCart;
3286
3336
  }
3287
3337
  updateAllData() {
3288
3338
  const userDetails = this.getUser();
@@ -3294,18 +3344,21 @@ class StorageServiceService {
3294
3344
  ]);
3295
3345
  request.subscribe((cartResponse) => {
3296
3346
  console.log("Cart Response : ", cartResponse);
3347
+ UserCart.orderedItems = [];
3348
+ UserFavourite.orderedItems = [];
3297
3349
  cartResponse?.[0].data?.orderedItems?.forEach((item) => {
3298
3350
  this.addProductToCart(item);
3351
+ UserCart.orderedItems.push(item);
3352
+ });
3353
+ cartResponse?.[1].data?.orderedItems?.forEach((item) => {
3354
+ this.addProductToWishlist(item);
3355
+ UserFavourite.orderedItems.push(item);
3299
3356
  });
3300
- // cartResponse?.[1].data?.orderedItems?.forEach((item: OrderedItems)=> {
3301
- // this.addProductToWishlist(item);
3302
- // UserFavourite.orderedItems.push(item as never);
3303
- // })
3304
3357
  this.eventService.showLoadingScreen.emit(false);
3305
3358
  });
3306
3359
  }
3307
3360
  else {
3308
- // this.storeDataToJSON();
3361
+ this.storeDataToJSON();
3309
3362
  }
3310
3363
  }
3311
3364
  // CART SERVICE
@@ -3358,7 +3411,7 @@ class StorageServiceService {
3358
3411
  storePaymentFor(paymentFor) {
3359
3412
  this.cookieService.set("paymentFor", paymentFor, 7);
3360
3413
  }
3361
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: StorageServiceService, deps: [{ token: EventsService }, { token: i2$3.CookieService }, { token: RestService }], target: i0.ɵɵFactoryTarget.Injectable }); }
3414
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: StorageServiceService, deps: [{ token: EventsService }, { token: i2$4.CookieService }, { token: RestService }], target: i0.ɵɵFactoryTarget.Injectable }); }
3362
3415
  static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: StorageServiceService, providedIn: 'root' }); }
3363
3416
  }
3364
3417
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: StorageServiceService, decorators: [{
@@ -3366,7 +3419,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
3366
3419
  args: [{
3367
3420
  providedIn: 'root'
3368
3421
  }]
3369
- }], ctorParameters: () => [{ type: EventsService }, { type: i2$3.CookieService }, { type: RestService }] });
3422
+ }], ctorParameters: () => [{ type: EventsService }, { type: i2$4.CookieService }, { type: RestService }] });
3370
3423
 
3371
3424
  class AuthenticateUserComponent {
3372
3425
  constructor(matData, restService, router, matDialog, storageService, dialogRef, _eventService) {
@@ -3443,8 +3496,8 @@ class AuthenticateUserComponent {
3443
3496
  get isMobile() {
3444
3497
  return window.innerWidth <= 475;
3445
3498
  }
3446
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AuthenticateUserComponent, deps: [{ token: MAT_DIALOG_DATA, optional: true }, { token: RestService }, { token: i2$2.Router }, { token: i3.MatDialog }, { token: StorageServiceService }, { token: i3.MatDialogRef, optional: true }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
3447
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AuthenticateUserComponent, isStandalone: true, selector: "simpo-authenticate-user", inputs: { data: "data", responseData: "responseData" }, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <div [style.height.vh]=\"isMobile ? '90' : ''\">\r\n <ng-container [ngSwitch]=\"screen\">\r\n <section style=\"padding: 15px;\"\r\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n *ngSwitchCase=\"'LOGIN'\"[ngClass]=\"{'fullSection': isMobile}\">\r\n <h5 class=\"text-center onlyDesktop\">Excee Fashion</h5>\r\n <h2 class=\"text-center\">Welcome</h2>\r\n <p class=\"text-center\">Log or Signup in to your account</p>\r\n <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\">\r\n <p class=\"text-center\">You will receive an SMS verification</p>\r\n\r\n <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n <button class=\"btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n [color]=\"styles?.background?.accentColor\" (click)=\"generateOTP()\">Continue</button>\r\n <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles.background?.accentColor\">Use email\r\n instead</div>\r\n </div>\r\n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </section>\r\n <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\r\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\" [ngClass]=\"{'fullSection': isMobile}\">\r\n <h5 class=\"text-center onlyDesktop\">Excee Fashion</h5>\r\n <h2 class=\"text-center\">Verify OTP</h2>\r\n <p class=\"text-center\">Enter the 6-digit that we have sent via the phone number +{{ countryCode }}{{ mobile\r\n }}</p>\r\n <div class=\"otpContainer\">\r\n <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\r\n <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" (keyup)=\"move($event, idx)\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n <button class=\"btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n [color]=\"styles?.background?.accentColor\" (click)=\"verifyOTP()\">Continue</button>\r\n <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles.background?.accentColor\"\r\n (click)=\"resendOTP()\">Resend code</div>\r\n </div>\r\n\r\n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n <div class=\"back-btn\" (click)=\"goBack()\">\r\n <mat-icon>keyboard_backspace</mat-icon>\r\n </div>\r\n </section>\r\n </ng-container>\r\n </div>\r\n</ng-container>\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: ["input,button{width:80%!important;margin:10px auto}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}.close-btn{position:absolute;top:10px;right:10px;cursor:pointer}.otpContainer{display:flex;gap:4px;margin:auto}.otpContainer .otp{border-radius:50%;padding:5px;height:50px;width:50px!important;margin:5px!important;text-align:center}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.back-btn{position:absolute;top:10px;left:10px;cursor:pointer}@media screen and (max-width: 475px){.onlyDesktop{display:none}.text-center{text-align:left!important}button,input{width:100%!important}.fullSection{justify-content:start!important}.action-btn{position:absolute;bottom:50px;width:95%}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.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: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i9.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }] }); }
3499
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AuthenticateUserComponent, deps: [{ token: MAT_DIALOG_DATA, optional: true }, { token: RestService }, { token: i2$3.Router }, { token: i3.MatDialog }, { token: StorageServiceService }, { token: i3.MatDialogRef, optional: true }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
3500
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AuthenticateUserComponent, isStandalone: true, selector: "simpo-authenticate-user", inputs: { data: "data", responseData: "responseData" }, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <div [style.height.vh]=\"isMobile ? '90' : ''\">\r\n <ng-container [ngSwitch]=\"screen\">\r\n <section style=\"padding: 15px;\"\r\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n *ngSwitchCase=\"'LOGIN'\"[ngClass]=\"{'fullSection': isMobile}\">\r\n <h5 class=\"text-center onlyDesktop\">Excee Fashion</h5>\r\n <h2 class=\"text-center\">Welcome</h2>\r\n <p class=\"text-center\">Log or Signup in to your account</p>\r\n <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\">\r\n <p class=\"text-center\">You will receive an SMS verification</p>\r\n\r\n <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n <button class=\"btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n [color]=\"styles?.background?.accentColor\" (click)=\"generateOTP()\">Continue</button>\r\n <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles.background?.accentColor\">Use email\r\n instead</div>\r\n </div>\r\n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </section>\r\n <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\r\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\" [ngClass]=\"{'fullSection': isMobile}\">\r\n <h5 class=\"text-center onlyDesktop\">Excee Fashion</h5>\r\n <h2 class=\"text-center\">Verify OTP</h2>\r\n <p class=\"text-center\">Enter the 6-digit that we have sent via the phone number +{{ countryCode }}{{ mobile\r\n }}</p>\r\n <div class=\"otpContainer\">\r\n <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\r\n <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" (keyup)=\"move($event, idx)\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n <button class=\"btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n [color]=\"styles?.background?.accentColor\" (click)=\"verifyOTP()\">Continue</button>\r\n <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles.background?.accentColor\"\r\n (click)=\"resendOTP()\">Resend code</div>\r\n </div>\r\n\r\n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n <div class=\"back-btn\" (click)=\"goBack()\">\r\n <mat-icon>keyboard_backspace</mat-icon>\r\n </div>\r\n </section>\r\n </ng-container>\r\n </div>\r\n</ng-container>\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: ["input,button{width:80%!important;margin:10px auto}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}.close-btn{position:absolute;top:10px;right:10px;cursor:pointer}.otpContainer{display:flex;gap:4px;margin:auto}.otpContainer .otp{border-radius:50%;padding:5px;height:50px;width:50px!important;margin:5px!important;text-align:center}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.back-btn{position:absolute;top:10px;left:10px;cursor:pointer}@media screen and (max-width: 475px){.onlyDesktop{display:none}.text-center{text-align:left!important}button,input{width:100%!important}.fullSection{justify-content:start!important}.action-btn{position:absolute;bottom:50px;width:95%}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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: i2$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i8.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }] }); }
3448
3501
  }
3449
3502
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AuthenticateUserComponent, decorators: [{
3450
3503
  type: Component,
@@ -3460,7 +3513,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
3460
3513
  }, {
3461
3514
  type: Inject,
3462
3515
  args: [MAT_DIALOG_DATA]
3463
- }] }, { type: RestService }, { type: i2$2.Router }, { type: i3.MatDialog }, { type: StorageServiceService }, { type: i3.MatDialogRef, decorators: [{
3516
+ }] }, { type: RestService }, { type: i2$3.Router }, { type: i3.MatDialog }, { type: StorageServiceService }, { type: i3.MatDialogRef, decorators: [{
3464
3517
  type: Optional
3465
3518
  }] }, { type: EventsService }], propDecorators: { data: [{
3466
3519
  type: Input
@@ -3596,7 +3649,7 @@ class NavbarSectionComponent {
3596
3649
  }, 100);
3597
3650
  }
3598
3651
  get getCartItemsCount() {
3599
- return 0;
3652
+ return UserCart?.orderedItems?.length;
3600
3653
  }
3601
3654
  getKeys(object) {
3602
3655
  return Object.keys(object);
@@ -3606,8 +3659,8 @@ class NavbarSectionComponent {
3606
3659
  object.forEach((key) => keys.push(Object.values(key)));
3607
3660
  return [...new Set(keys)];
3608
3661
  }
3609
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: NavbarSectionComponent, deps: [{ token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i3.MatDialog }, { token: i2$3.CookieService }, { token: StorageServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
3610
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: NavbarSectionComponent, isStandalone: true, selector: "simpo-navbar-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n <div class=\"container-fluid position-relative \">\r\n <div class=\"w-50 left-logo-text d-flex\">\r\n <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"(click)=\"goToHome()\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"isEcommerceWebsite && screenWidth > 768\">\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <a class=\"nav-link dropdown-toggle mx-2\" href=\"#\" [id]=\"'navbarDropdownMenuLink_' + idx\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">{{ link | uppercase }}</a>\r\n <ul class=\"dropdown-menu fs-6 position-absolute\" [attr.aria-labelledby]=\"'navbarDropdownMenuLink_'+idx\">\r\n <li *ngFor=\"let value of getValues(content?.ecomLinks?.[link])\"><a class=\"dropdown-item\" (click)=\"applyFilter(value, link)\">{{value}}</a></li>\r\n </ul>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n <div *ngIf=\"screenWidth <= 768 && isEcommerceWebsite\" class=\"d-flex align-items-center justify-content-around\">\r\n <i class=\"fa fa-search mx-2\" aria-hidden=\"true\"></i>\r\n <mat-icon class=\"mx-2\">add_shopping_cart</mat-icon>\r\n <mat-icon class=\"mx-2\">person_outline</mat-icon>\r\n </div>\r\n <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"simpoColor\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769\"\r\n aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n <hr>\r\n <hr>\r\n <hr>\r\n </button>\r\n </div>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n <div class=\"navbar-nav align-items-center\">\r\n <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n [bgColor]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\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]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <button class=\"button\" (click)=\"redirectTo(button?.content)\" simpoButtonDirective [scrollValue]=\"scrollValue\" [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button.styles\" [color]=\"accentColor\">{{button?.content?.label}}</button>\r\n <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth <= 768\">\r\n <div class=\"inner-height p-4\">\r\n <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex flex-column w-100\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"title-row\">\r\n <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\"\r\n *ngIf=\"content?.logo?.isImage\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n\r\n </div>\r\n <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n <div class=\"d-flex flex-column gap-4 w-100\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column\">\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]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-4\">\r\n <div *ngIf=\"action?.display\" class=\"button-display\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <div class=\"collapse navbar-collapse position-absolute pr-0\" style=\"right: 0px;\" *ngIf=\"screenWidth > 768\">\r\n <div class=\"container-fluid justify-content-between pr-0 d-flex\" style=\"max-width: 50vw;\">\r\n <div class=\"input-group\">\r\n <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon>favorite_border</mat-icon>\r\n <span class=\"text-dark fw-normal fs-6\">Favourite</span>\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center mx-3 position-relative\" style=\"width: 60px; cursor: pointer;\" (click)=\"goToCart()\">\r\n <mat-icon>add_shopping_cart</mat-icon>\r\n <span class=\"text-dark fw-normal fs-6\">Bag</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n <mat-icon>person_outline</mat-icon>\r\n <span class=\"text-dark fw-normal fs-6\">Account</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </nav>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n</div>\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important}.right-btn{width:15%!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:-10px;right:10px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px}.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}.mat-icon{color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: SimpoFooterLayoutDirective, selector: "[simpoFooterLayout]", inputs: ["simpoFooterLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
3662
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: NavbarSectionComponent, deps: [{ token: EventsService }, { token: i2$3.Router }, { token: i2$3.ActivatedRoute }, { token: i3.MatDialog }, { token: i2$4.CookieService }, { token: StorageServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
3663
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: NavbarSectionComponent, isStandalone: true, selector: "simpo-navbar-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n <div class=\"container-fluid position-relative \">\r\n <div class=\"w-50 left-logo-text d-flex\">\r\n <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"(click)=\"goToHome()\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"isEcommerceWebsite && screenWidth > 768\">\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <a class=\"nav-link dropdown-toggle mx-2\" href=\"#\" [id]=\"'navbarDropdownMenuLink_' + idx\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">{{ link | uppercase }}</a>\r\n <ul class=\"dropdown-menu fs-6 position-absolute\" [attr.aria-labelledby]=\"'navbarDropdownMenuLink_'+idx\">\r\n <li *ngFor=\"let value of getValues(content?.ecomLinks?.[link])\"><a class=\"dropdown-item\" (click)=\"applyFilter(value, link)\">{{value}}</a></li>\r\n </ul>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n <div *ngIf=\"screenWidth <= 768 && isEcommerceWebsite\" class=\"d-flex align-items-center justify-content-around\">\r\n <i class=\"fa fa-search mx-2\" aria-hidden=\"true\"></i>\r\n <mat-icon class=\"mx-2\">add_shopping_cart</mat-icon>\r\n <mat-icon class=\"mx-2\">person_outline</mat-icon>\r\n </div>\r\n <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"simpoColor\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769\"\r\n aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n <hr>\r\n <hr>\r\n <hr>\r\n </button>\r\n </div>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n <div class=\"navbar-nav align-items-center\">\r\n <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n [bgColor]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\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]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <button class=\"button\" (click)=\"redirectTo(button?.content)\" simpoButtonDirective [scrollValue]=\"scrollValue\" [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button.styles\" [color]=\"accentColor\">{{button?.content?.label}}</button>\r\n <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth <= 768\">\r\n <div class=\"inner-height p-4\">\r\n <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex flex-column w-100\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"title-row\">\r\n <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\"\r\n *ngIf=\"content?.logo?.isImage\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n\r\n </div>\r\n <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n <div class=\"d-flex flex-column gap-4 w-100\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column\">\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]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-4\">\r\n <div *ngIf=\"action?.display\" class=\"button-display\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <div class=\"collapse navbar-collapse position-absolute pr-0\" style=\"right: 0px;\" *ngIf=\"screenWidth > 768\">\r\n <div class=\"container-fluid justify-content-between pr-0 d-flex\" style=\"max-width: 50vw;\">\r\n <div class=\"input-group\">\r\n <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon>favorite_border</mat-icon>\r\n <span class=\"text-dark fw-normal fs-6\">Favourite</span>\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center mx-3 position-relative\" style=\"width: 60px; cursor: pointer;\" (click)=\"goToCart()\">\r\n <mat-icon>add_shopping_cart</mat-icon>\r\n <span class=\"text-dark fw-normal fs-6\">Bag</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n <mat-icon>person_outline</mat-icon>\r\n <span class=\"text-dark fw-normal fs-6\">Account</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </nav>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n</div>\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important}.right-btn{width:15%!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:-10px;right:10px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px}.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}.mat-icon{color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: SimpoFooterLayoutDirective, selector: "[simpoFooterLayout]", inputs: ["simpoFooterLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
3611
3664
  }
3612
3665
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: NavbarSectionComponent, decorators: [{
3613
3666
  type: Component,
@@ -3638,7 +3691,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
3638
3691
  TextBackgroundDirectiveDirective,
3639
3692
  ColorDirective
3640
3693
  ], template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n <div class=\"container-fluid position-relative \">\r\n <div class=\"w-50 left-logo-text d-flex\">\r\n <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"(click)=\"goToHome()\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"isEcommerceWebsite && screenWidth > 768\">\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <a class=\"nav-link dropdown-toggle mx-2\" href=\"#\" [id]=\"'navbarDropdownMenuLink_' + idx\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">{{ link | uppercase }}</a>\r\n <ul class=\"dropdown-menu fs-6 position-absolute\" [attr.aria-labelledby]=\"'navbarDropdownMenuLink_'+idx\">\r\n <li *ngFor=\"let value of getValues(content?.ecomLinks?.[link])\"><a class=\"dropdown-item\" (click)=\"applyFilter(value, link)\">{{value}}</a></li>\r\n </ul>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n <div *ngIf=\"screenWidth <= 768 && isEcommerceWebsite\" class=\"d-flex align-items-center justify-content-around\">\r\n <i class=\"fa fa-search mx-2\" aria-hidden=\"true\"></i>\r\n <mat-icon class=\"mx-2\">add_shopping_cart</mat-icon>\r\n <mat-icon class=\"mx-2\">person_outline</mat-icon>\r\n </div>\r\n <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"simpoColor\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769\"\r\n aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n <hr>\r\n <hr>\r\n <hr>\r\n </button>\r\n </div>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n <div class=\"navbar-nav align-items-center\">\r\n <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n [bgColor]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\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]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <button class=\"button\" (click)=\"redirectTo(button?.content)\" simpoButtonDirective [scrollValue]=\"scrollValue\" [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button.styles\" [color]=\"accentColor\">{{button?.content?.label}}</button>\r\n <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth <= 768\">\r\n <div class=\"inner-height p-4\">\r\n <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex flex-column w-100\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"title-row\">\r\n <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\"\r\n *ngIf=\"content?.logo?.isImage\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n\r\n </div>\r\n <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n <div class=\"d-flex flex-column gap-4 w-100\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column\">\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]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-4\">\r\n <div *ngIf=\"action?.display\" class=\"button-display\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <div class=\"collapse navbar-collapse position-absolute pr-0\" style=\"right: 0px;\" *ngIf=\"screenWidth > 768\">\r\n <div class=\"container-fluid justify-content-between pr-0 d-flex\" style=\"max-width: 50vw;\">\r\n <div class=\"input-group\">\r\n <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon>favorite_border</mat-icon>\r\n <span class=\"text-dark fw-normal fs-6\">Favourite</span>\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center mx-3 position-relative\" style=\"width: 60px; cursor: pointer;\" (click)=\"goToCart()\">\r\n <mat-icon>add_shopping_cart</mat-icon>\r\n <span class=\"text-dark fw-normal fs-6\">Bag</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n <mat-icon>person_outline</mat-icon>\r\n <span class=\"text-dark fw-normal fs-6\">Account</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </nav>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n</div>\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important}.right-btn{width:15%!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:-10px;right:10px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px}.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}.mat-icon{color:#000}\n"] }]
3641
- }], ctorParameters: () => [{ type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i3.MatDialog }, { type: i2$3.CookieService }, { type: StorageServiceService }], propDecorators: { data: [{
3694
+ }], ctorParameters: () => [{ type: EventsService }, { type: i2$3.Router }, { type: i2$3.ActivatedRoute }, { type: i3.MatDialog }, { type: i2$4.CookieService }, { type: StorageServiceService }], propDecorators: { data: [{
3642
3695
  type: Input
3643
3696
  }], nextComponent: [{
3644
3697
  type: Input
@@ -3731,7 +3784,7 @@ class ContactUsComponent extends BaseSection {
3731
3784
  canShowContactField(field) {
3732
3785
  return Object.hasOwn(field, "status") ? field.status : true;
3733
3786
  }
3734
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ContactUsComponent, deps: [{ token: EventsService }, { token: PLATFORM_ID }, { token: i2$4.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
3787
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ContactUsComponent, deps: [{ token: EventsService }, { token: PLATFORM_ID }, { token: i2$5.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
3735
3788
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ContactUsComponent, isStandalone: true, selector: "simpo-contact-us", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "screenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\r\n <div *ngIf=\"content?.image?.showImage === false\" class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\">\r\n <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"col-12 d-flex justify-content-evenly\" style=\"gap: 3rem;\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{'align-items-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"d-flex flex-column col-5 pt-5\">\r\n <div *ngFor=\"let item of content?.inputText\" [innerHTML]=\"item.value\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" >\r\n </div>\r\n </div>\r\n <div class=\"col-5 d-flex flex-wrap\" style=\"gap: 1rem;height: fit-content;\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\" [feild]=\"feild\" [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\" *ngIf=\"canShowContactField(feild)\"></simpo-input-fields>\r\n </ng-container>\r\n <div class=\"w-100\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button }}</button>\r\n </div>\r\n <!-- <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button }}</button> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"content?.image?.showImage === true\" class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"g-5 mobile-display\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'align-items-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"col-10 col-sm-8 col-lg-6 mobile-image\" *ngIf=\"content?.image?.showImage\">\r\n <img [src]=\"content?.image?.url\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [simpoCorner]=\"styles?.corners\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n class=\"d-block mx-lg-auto img-fluid h-100\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\"\r\n loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column mobile-text\" style=\"width: 46%;\" [ngClass]=\"{'pt-5': styles?.positionLayout?.value === 'top'}\" [id]=\"data?.id\">\r\n <div class=\"d-flex flex-column\">\r\n <div *ngFor=\"let item of content?.inputText\" [innerHTML]=\"item.value\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n </div>\r\n <div class=\"d-flex flex-wrap\" style=\"gap: 1rem;height: fit-content;\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\" [feild]=\"feild\"\r\n [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\"></simpo-input-fields>\r\n </ng-container>\r\n <div class=\"w-100\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button\r\n }}</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <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", styles: [".send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.w-100{width:100%}@media only screen and (max-width: 475px){.col-12{display:flex;flex-direction:column-reverse}.pt-5{width:100%}.pt-5 div{font-size:24px}.col-5{width:100%}.send-btn{margin-left:0}.mobile-display{display:flex!important;flex-direction:column!important}.mobile-image{width:100%!important;padding:0!important}.mobile-text{width:100%!important;margin-top:3rem}.mobile-text .d-flex div{font-size:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: InputFieldsComponent, selector: "simpo-input-fields", inputs: ["feild", "opacity", "bgColor", "sectionId"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type:
3736
3789
  //directive
3737
3790
  AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }] }); }
@@ -3767,7 +3820,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
3767
3820
  }], ctorParameters: () => [{ type: EventsService }, { type: Object, decorators: [{
3768
3821
  type: Inject,
3769
3822
  args: [PLATFORM_ID]
3770
- }] }, { type: i2$4.MatSnackBar }], propDecorators: { data: [{
3823
+ }] }, { type: i2$5.MatSnackBar }], propDecorators: { data: [{
3771
3824
  type: Input
3772
3825
  }], index: [{
3773
3826
  type: Input
@@ -3782,7 +3835,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
3782
3835
 
3783
3836
  class SkeletonLoaderSectionComponent {
3784
3837
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SkeletonLoaderSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3785
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: SkeletonLoaderSectionComponent, isStandalone: true, selector: "simpo-skeleton-loader-section", inputs: { sectionType: "sectionType" }, ngImport: i0, template: "<div class=\"p-15\" style=\"width: 100%;\">\r\n <div class=\"skeleton-parent\"\r\n *ngIf=\"sectionType === 'service' || sectionType === 'teammember' || sectionType === 'imagegrid'\">\r\n <div class=\"skeleton\">\r\n <ngx-skeleton-loader 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 <div class=\"second-section-wrapper\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '80%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"skeleton\">\r\n <ngx-skeleton-loader 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 <div class=\"second-section-wrapper\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '80%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"skeleton\">\r\n <ngx-skeleton-loader 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 <div class=\"second-section-wrapper\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '80%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"banner-skeleton\" *ngIf=\"sectionType === 'banner' || sectionType === 'text_image'\">\r\n <div style=\"width: 50%;\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '90%',\r\n height: '400px',\r\n 'border-radius': '10px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n <div class=\"second-section-wrapper\" style=\"width: 50%;padding-top: 50px;\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '80%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div style=\"margin-top: 50px;\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '130px',\r\n height: '45px',\r\n 'border-radius': '10px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-skeleton\" *ngIf=\"sectionType === 'text'\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '80%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div style=\"margin-top: 50px;\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '130px',\r\n height: '45px',\r\n 'border-radius': '10px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n\r\n <div class=\"testimonial-skeleton\" *ngIf=\"sectionType === 'testimonial'\">\r\n <div>\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{ width: '80px', height: '80px' }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\" style=\"margin-top: 20px;\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '80%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div style=\"margin-top: 50px;\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '130px',\r\n height: '45px',\r\n 'border-radius': '10px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n\r\n <div class=\"image-skeleton\"\r\n *ngIf=\"sectionType === 'imageCarousel' || sectionType === 'image' || sectionType === 'contact us'\">\r\n <ngx-skeleton-loader count=\"1\" [theme]=\"{\r\n 'border-radius': '5px',\r\n height: '50vh',\r\n width: '100%'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n</div>\r\n", styles: [".main-section{position:relative;left:25px}.p-15{padding:15px}.wrapper{width:100%;flex:1}.second-section-wrapper{width:100%;height:auto;flex:1}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border:1px solid #e5e7eb;width:33.33%;border-radius:10px}.banner-skeleton{display:flex;gap:10px}.text-skeleton,.testimonial-skeleton{text-align:center}.image-skeleton{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i9.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }] }); }
3838
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: SkeletonLoaderSectionComponent, isStandalone: true, selector: "simpo-skeleton-loader-section", inputs: { sectionType: "sectionType" }, ngImport: i0, template: "<div class=\"p-15\" style=\"width: 100%;\">\r\n <div class=\"skeleton-parent\"\r\n *ngIf=\"sectionType === 'service' || sectionType === 'teammember' || sectionType === 'imagegrid'\">\r\n <div class=\"skeleton\">\r\n <ngx-skeleton-loader 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 <div class=\"second-section-wrapper\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '80%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"skeleton\">\r\n <ngx-skeleton-loader 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 <div class=\"second-section-wrapper\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '80%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"skeleton\">\r\n <ngx-skeleton-loader 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 <div class=\"second-section-wrapper\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '80%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"banner-skeleton\" *ngIf=\"sectionType === 'banner' || sectionType === 'text_image'\">\r\n <div style=\"width: 50%;\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '90%',\r\n height: '400px',\r\n 'border-radius': '10px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n <div class=\"second-section-wrapper\" style=\"width: 50%;padding-top: 50px;\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '80%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div style=\"margin-top: 50px;\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '130px',\r\n height: '45px',\r\n 'border-radius': '10px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-skeleton\" *ngIf=\"sectionType === 'text'\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '80%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div style=\"margin-top: 50px;\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '130px',\r\n height: '45px',\r\n 'border-radius': '10px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n\r\n <div class=\"testimonial-skeleton\" *ngIf=\"sectionType === 'testimonial'\">\r\n <div>\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{ width: '80px', height: '80px' }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\" style=\"margin-top: 20px;\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '80%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div style=\"margin-top: 50px;\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '130px',\r\n height: '45px',\r\n 'border-radius': '10px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n\r\n <div class=\"image-skeleton\"\r\n *ngIf=\"sectionType === 'imageCarousel' || sectionType === 'image' || sectionType === 'contact us'\">\r\n <ngx-skeleton-loader count=\"1\" [theme]=\"{\r\n 'border-radius': '5px',\r\n height: '50vh',\r\n width: '100%'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n</div>\r\n", styles: [".main-section{position:relative;left:25px}.p-15{padding:15px}.wrapper{width:100%;flex:1}.second-section-wrapper{width:100%;height:auto;flex:1}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border:1px solid #e5e7eb;width:33.33%;border-radius:10px}.banner-skeleton{display:flex;gap:10px}.text-skeleton,.testimonial-skeleton{text-align:center}.image-skeleton{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i8.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }] }); }
3786
3839
  }
3787
3840
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SkeletonLoaderSectionComponent, decorators: [{
3788
3841
  type: Component,
@@ -4190,7 +4243,7 @@ class RecentBlogPostSectionComponent extends BaseSection {
4190
4243
  }, 100);
4191
4244
  }
4192
4245
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RecentBlogPostSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
4193
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: RecentBlogPostSectionComponent, isStandalone: true, selector: "simpo-recent-blog-post-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", responseData: "responseData" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\r\n <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\" [ngStyle]=\"{'width' : (responseData.length || 0) == 0 ? '100%' : ''}\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n <div class=\"row\">\r\n <div (click)=\"getBlogById(content.id)\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n class=\"individual-cards\"\r\n *ngFor=\"let content of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\">\r\n <div class=\"image\">\r\n <img [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoCorner]=\"style?.corners\" class=\"d-block mx-lg-auto img-fluid h-100\" alt=\"\" *ngIf=\"content.img\"\r\n loading=\"lazy\">\r\n <img [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\r\n alt=\"\" *ngIf=\"!content.img\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium title mt-4\">\r\n {{content.postTitle}}\r\n </div>\r\n <div class=\"body-large adate mt-3\">\r\n {{content.createdTimeStamp | date:'EEEE, MMM, d, y'}}\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"responseData?.length == 0\" class=\"row\">\r\n <div class=\"no-blog-post\">\r\n <mat-icon>info</mat-icon>This section won't be visible because you have no published blog posts.\r\n </div>\r\n <div class=\"skeleton\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let i of [1,2,3]\">\r\n <ngx-skeleton-loader 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 <div class=\"second-section-wrapper\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '100%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px',\r\n 'display' : 'flex'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px',\r\n 'display' : 'flex'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button-section mt-3rem\">\r\n <button class=\"button\" (click)=\"openBlogList()\" simpoButtonDirective [id]=\"data?.id+(buttonData?.id || '')\"\r\n [buttonStyle]=\"buttonData?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\">{{buttonData?.content?.label}}</button>\r\n </div>\r\n\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\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.individual-cards{padding-bottom:30px}.individual-cards img{width:100%;height:37vh}.title{font-weight:500}.mt-3rem{margin-top:3rem}@media only screen and (max-width: 475px){.cards{flex-direction:column}.individual-cards{width:100%}.title{font-size:26px}}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border-radius:10px}.second-section-wrapper{width:100%;height:auto;flex:1}.wrapper{width:100%;flex:1}.no-blog-post{color:#5185ad;text-align:left;display:flex;align-items:center;gap:15px;height:55px;background:#f6fbff;font-size:16px;font-weight:600}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i9.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"] }] }); }
4246
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: RecentBlogPostSectionComponent, isStandalone: true, selector: "simpo-recent-blog-post-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", responseData: "responseData" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\r\n <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\" [ngStyle]=\"{'width' : (responseData.length || 0) == 0 ? '100%' : ''}\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n <div class=\"row\">\r\n <div (click)=\"getBlogById(content.id)\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n class=\"individual-cards\"\r\n *ngFor=\"let content of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\">\r\n <div class=\"image\">\r\n <img [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoCorner]=\"style?.corners\" class=\"d-block mx-lg-auto img-fluid h-100\" alt=\"\" *ngIf=\"content.img\"\r\n loading=\"lazy\">\r\n <img [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\r\n alt=\"\" *ngIf=\"!content.img\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium title mt-4\">\r\n {{content.postTitle}}\r\n </div>\r\n <div class=\"body-large adate mt-3\">\r\n {{content.createdTimeStamp | date:'EEEE, MMM, d, y'}}\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"responseData?.length == 0\" class=\"row\">\r\n <div class=\"no-blog-post\">\r\n <mat-icon>info</mat-icon>This section won't be visible because you have no published blog posts.\r\n </div>\r\n <div class=\"skeleton\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let i of [1,2,3]\">\r\n <ngx-skeleton-loader 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 <div class=\"second-section-wrapper\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '100%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px',\r\n 'display' : 'flex'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px',\r\n 'display' : 'flex'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button-section mt-3rem\">\r\n <button class=\"button\" (click)=\"openBlogList()\" simpoButtonDirective [id]=\"data?.id+(buttonData?.id || '')\"\r\n [buttonStyle]=\"buttonData?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\">{{buttonData?.content?.label}}</button>\r\n </div>\r\n\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\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.individual-cards{padding-bottom:30px}.individual-cards img{width:100%;height:37vh}.title{font-weight:500}.mt-3rem{margin-top:3rem}@media only screen and (max-width: 475px){.cards{flex-direction:column}.individual-cards{width:100%}.title{font-size:26px}}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border-radius:10px}.second-section-wrapper{width:100%;height:auto;flex:1}.wrapper{width:100%;flex:1}.no-blog-post{color:#5185ad;text-align:left;display:flex;align-items:center;gap:15px;height:55px;background:#f6fbff;font-size:16px;font-weight:600}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i8.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"] }] }); }
4194
4247
  }
4195
4248
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RecentBlogPostSectionComponent, decorators: [{
4196
4249
  type: Component,
@@ -4807,48 +4860,93 @@ class CartService {
4807
4860
  }
4808
4861
  addItemFromCartPage(product) {
4809
4862
  if (product.quantity) {
4810
- // let productIdx: number = -1;
4811
- // UserCart.orderedItems.forEach((item: OrderedItems, idx)=> {
4812
- // if (item.itemId == product.itemId)
4813
- // productIdx = idx;
4814
- // });
4863
+ let productIdx = -1;
4864
+ UserCart.orderedItems.forEach((item, idx) => {
4865
+ if (item.itemId == product.itemId)
4866
+ productIdx = idx;
4867
+ });
4815
4868
  this.storageService.addProductToCart(product);
4816
- // return this.restService.addItemToDB(UserCart);
4869
+ return this.restService.addItemToDB(UserCart);
4817
4870
  }
4818
4871
  else {
4819
4872
  // remove item from cart
4820
4873
  this.removeItemFromCart(product);
4821
- // return this.restService.addItemToDB(UserCart);
4874
+ return this.restService.addItemToDB(UserCart);
4822
4875
  }
4823
4876
  }
4824
- addItemToCart(product) {
4877
+ addItemToCart(product, isFromCart = false) {
4825
4878
  if (product.quantity) {
4826
- const orderedItem = this.objectMapper(product);
4827
- return this.storageService.addProductToCart(orderedItem);
4879
+ const orderedItem = !isFromCart ? this.objectMapper(product) : product;
4880
+ let productIdx = -1;
4881
+ UserCart.orderedItems.forEach((item, idx) => {
4882
+ if (item.itemId == product.itemId)
4883
+ productIdx = idx;
4884
+ });
4885
+ if (productIdx >= 0) {
4886
+ UserCart.orderedItems[productIdx].quantity = product.quantity;
4887
+ }
4888
+ else {
4889
+ UserCart.orderedItems.push(orderedItem);
4890
+ }
4891
+ console.log(UserCart);
4892
+ this.storageService.addProductToCart(orderedItem);
4828
4893
  }
4829
4894
  else {
4830
- return this.removeItemFromCart(product);
4895
+ // remove item from cart
4896
+ this.removeItemFromCart(product);
4831
4897
  }
4832
4898
  }
4833
4899
  addItemToFavourite(product) {
4834
4900
  const orderedItem = this.objectMapper(product);
4901
+ let productIdx = -1;
4902
+ UserFavourite.orderedItems.forEach((item, idx) => {
4903
+ if (item.itemId == product.itemId)
4904
+ productIdx = idx;
4905
+ });
4906
+ if (productIdx >= 0) {
4907
+ UserFavourite.orderedItems[productIdx].quantity = product.quantity;
4908
+ }
4909
+ else {
4910
+ UserFavourite.orderedItems.push(orderedItem);
4911
+ }
4835
4912
  this.storageService.addProductToWishlist(orderedItem);
4836
4913
  }
4837
4914
  removeItemFromFavourite(product) {
4838
- this.storageService.removeProductFromWishlist(product.itemId);
4915
+ const index = this.getItemIdxJSON(product.itemId, 'FAVOURITE');
4916
+ if (index >= 0) {
4917
+ const item = UserFavourite.orderedItems.splice(index, 1)[0];
4918
+ // UserFavourites.orderedItems.push(item as never);
4919
+ this.storageService.removeProductFromWishlist(product.itemId);
4920
+ }
4839
4921
  }
4840
4922
  removeItemFromCart(product) {
4841
- this.storageService.removeProductFromCart(product.itemId);
4842
- }
4843
- getItemIdxJSON(id, type) {
4844
- return this.storageService.getProductFromCart(id);
4845
- }
4923
+ const index = this.getItemIdxJSON(product.itemId, 'CART');
4924
+ if (index >= 0) {
4925
+ const item = UserCart.orderedItems.splice(index, 1)[0];
4926
+ // UserCart.orderedItems.push(item as never);
4927
+ this.storageService.removeProductFromCart(product.itemId);
4928
+ }
4929
+ }
4930
+ // public convertFavToCart(product: OrderedItems) {
4931
+ // const index = this.getItemIdxJSON(product.getItemId, UserFavourites);
4932
+ // if (index >= 0) {
4933
+ // const item = UserFavourites.orderedItems.splice(index, 1)[0];
4934
+ // UserCart.orderedItems.push(item as never);
4935
+ // }
4936
+ // }
4937
+ // public convertCartToFav(product: OrderedItems) {
4938
+ // const index = this.getItemIdxJSON(product.getItemId, UserCart);
4939
+ // if (index >= 0) {
4940
+ // const item = UserCart.orderedItems.splice(index, 1)[0];
4941
+ // UserFavourites.orderedItems.push(item as never);
4942
+ // }
4943
+ // }
4846
4944
  storeItemToDB(product, type) {
4847
4945
  if (type == "CART") {
4848
4946
  const orderProduct = this.objectMapper(this.storageService.getProductFromCart(product.itemId));
4849
4947
  if (orderProduct) {
4850
4948
  this.storageService.addProductToCart(orderProduct);
4851
- // UserCart.orderedItems.push(orderProduct as never);
4949
+ UserCart.orderedItems.push(orderProduct);
4852
4950
  }
4853
4951
  }
4854
4952
  else {
@@ -4859,30 +4957,55 @@ class CartService {
4859
4957
  }
4860
4958
  }
4861
4959
  }
4960
+ getItemIdxJSON(itemId, type) {
4961
+ const json = (type == "FAVOURITE") ? UserFavourite : UserCart;
4962
+ let productIndex = -1;
4963
+ json.orderedItems.forEach((p, idx) => {
4964
+ if (p.itemId == itemId)
4965
+ productIndex = idx;
4966
+ });
4967
+ return productIndex;
4968
+ }
4862
4969
  getItemByIdx(itemId, type) {
4863
4970
  const productIdx = this.getItemIdxJSON(itemId, type);
4864
- // console.log(type, productIdx);
4865
- // const json = (type == "FAVOURITE") ? UserFavourites : UserCart;
4866
- // if (productIdx >= 0)
4867
- // return json.orderedItems[productIdx];
4971
+ console.log(type, productIdx);
4972
+ const json = (type == "FAVOURITE") ? UserFavourite : UserCart;
4973
+ if (productIdx >= 0)
4974
+ return json.orderedItems[productIdx];
4868
4975
  return null;
4869
4976
  }
4870
4977
  objectMapper(product) {
4871
4978
  return new OrderedItems(product);
4872
4979
  }
4873
- storeCartDataToServer(cart) {
4874
- }
4875
4980
  storeDataToServer() {
4876
- // const userCart = UserCart as never as Cart;
4877
- // const userWishlist = UserFavourites as never as Cart;
4878
- // if (userCart.cartId?.length == 0)
4879
- // delete userCart.cartId;
4880
- // if (userWishlist.cartId?.length == 0)
4881
- // delete userWishlist.cartId;
4882
- // return forkJoin([
4883
- // this.restService.addItemToDB(UserCart),
4884
- // this.restService.addItemToDB(UserFavourites)
4885
- // ]);
4981
+ const userCart = UserCart;
4982
+ const userWishlist = UserFavourite;
4983
+ if (userCart.cartId?.length == 0)
4984
+ delete userCart.cartId;
4985
+ if (userWishlist.cartId?.length == 0)
4986
+ delete userWishlist.cartId;
4987
+ return forkJoin([
4988
+ this.restService.addItemToDB(UserCart),
4989
+ this.restService.addItemToDB(UserFavourite)
4990
+ ]);
4991
+ }
4992
+ storeDBToJSON() {
4993
+ // this.storageService.getUserCart().then((response)=> {
4994
+ //
4995
+ // })
4996
+ // const userId = UserDetails.user?.userId;
4997
+ // if (!userId)
4998
+ // return;
4999
+ // this.restService.getUserItems(userId, "CART").subscribe((response: any)=> {
5000
+ // UserCart.orderedItems = response.data.orderedItems;
5001
+ // UserCart.billdetails = response.data.billdetails;
5002
+ // UserCart.totalAmount = response.totalAmount;
5003
+ // })
5004
+ // this.restService.getUserItems(userId, "WISHLIST").subscribe((response: any)=> {
5005
+ // UserFavourites.orderedItems = response.data.orderedItems;
5006
+ // UserFavourites.billdetails = response.data.billdetails;
5007
+ // UserFavourites.totalAmount = response.totalAmount;
5008
+ // })
4886
5009
  }
4887
5010
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CartService, deps: [{ token: StorageServiceService }, { token: RestService }], target: i0.ɵɵFactoryTarget.Injectable }); }
4888
5011
  static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CartService, providedIn: 'root' }); }
@@ -4895,21 +5018,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
4895
5018
  }], ctorParameters: () => [{ type: StorageServiceService }, { type: RestService }] });
4896
5019
 
4897
5020
  class FeaturedProductsComponent extends BaseSection {
4898
- constructor(platformId, _eventService, restService, router, cartService, storageService) {
5021
+ constructor(platformId, _eventService, restService, router, cartService) {
4899
5022
  super();
4900
5023
  this.platformId = platformId;
4901
5024
  this._eventService = _eventService;
4902
5025
  this.restService = restService;
4903
5026
  this.router = router;
4904
5027
  this.cartService = cartService;
4905
- this.storageService = storageService;
4906
5028
  this.isRelatedProduct = false;
4907
5029
  this.isLoading = false;
4908
5030
  this.edit = true;
4909
5031
  this._eventSubscriber = null;
4910
5032
  this.screenWidth = 0;
4911
- this.USER_CART = null;
4912
- this.USER_WISHLIST = null;
4913
5033
  if (isPlatformBrowser(this.platformId)) {
4914
5034
  this.getScreenSize();
4915
5035
  }
@@ -4921,7 +5041,9 @@ class FeaturedProductsComponent extends BaseSection {
4921
5041
  this.content = this.data?.content;
4922
5042
  this.styles = this.data?.styles;
4923
5043
  this.button = this.data?.action.buttons[0];
5044
+ // if (this.isRelatedProduct) {
4924
5045
  this.getFeatureProduct();
5046
+ // }
4925
5047
  this._eventSubscriber = this._eventService.featureCollectionList.subscribe((response) => {
4926
5048
  this.getFeatureProduct();
4927
5049
  });
@@ -4942,27 +5064,11 @@ class FeaturedProductsComponent extends BaseSection {
4942
5064
  getFeatureProduct() {
4943
5065
  this.restService.getFeaturedProduct(this.content?.collectionId).subscribe((response) => {
4944
5066
  this.responseData = response;
4945
- this.storageService.getUserCart().then((cartResponse) => {
4946
- cartResponse.onsuccess = (cartData) => {
4947
- this.USER_CART = cartData;
4948
- this.responseData?.forEach((product) => {
4949
- this.USER_CART?.forEach((item) => {
4950
- if (item.itemId == product.itemId)
4951
- product.quantity = item.quantity;
4952
- });
4953
- });
4954
- };
4955
- });
4956
- this.storageService.getUserWhishlist().then((wishlistResponse) => {
4957
- wishlistResponse.onsuccess = (whislistData) => {
4958
- this.USER_WISHLIST = whislistData;
4959
- this.responseData?.forEach((product) => {
4960
- this.USER_WISHLIST?.forEach((item) => {
4961
- if (item.itemId == product.itemId)
4962
- product.wishlist = true;
4963
- });
4964
- });
4965
- };
5067
+ this.responseData?.forEach((product) => {
5068
+ UserCart.orderedItems.forEach((item) => {
5069
+ if (item.itemId == product.itemId)
5070
+ product.quantity = item.quantity;
5071
+ });
4966
5072
  });
4967
5073
  });
4968
5074
  }
@@ -4980,6 +5086,9 @@ class FeaturedProductsComponent extends BaseSection {
4980
5086
  this.router.navigate([`details`], { queryParams: { id: productId } });
4981
5087
  // this._eventService.redirectToPage.emit({redirectTo: '/details', data: {productId: productId}})
4982
5088
  }
5089
+ isItemFav(product) {
5090
+ return this.cartService.getItemIdxJSON(product.itemId, 'FAVOURITE') > -1;
5091
+ }
4983
5092
  togglePreviewImage(product, idx) {
4984
5093
  const element = document.getElementById('preview_' + idx);
4985
5094
  element?.classList.add("transition-preivew");
@@ -4988,8 +5097,11 @@ class FeaturedProductsComponent extends BaseSection {
4988
5097
  element?.classList.remove('transition-preivew');
4989
5098
  }, 50);
4990
5099
  }
4991
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturedProductsComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$2.Router }, { token: CartService }, { token: StorageServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
4992
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FeaturedProductsComponent, isStandalone: true, selector: "simpo-featured-products", inputs: { data: "data", responseData: "responseData", index: "index", isRelatedProduct: "isRelatedProduct", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <img src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n <div *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\" class=\"product\"\r\n [style.width]=\"getProductWidth()\">\r\n <div *ngIf=\"!(product.itemImages.length > 0 && product.itemImages[0].imgUrl)\" class=\"default-image\"(click)=\"proceedToProductDesc(product.itemId)\">\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n </div>\r\n <div *ngIf=\"product.itemImages.length > 0 && product.itemImages[0].imgUrl\"(click)=\"proceedToProductDesc(product.itemId)\">\r\n <img [id]=\"'preview_'+idx\" [src]=\"product.itemImages[product.prviewIdx]?.imgUrl\" alt=\"\" class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\" (mouseleave)=\"product.prviewIdx = 0\">\r\n </div>\r\n <div class=\"mt-15\">\r\n <div class=\"product-name heading-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n {{product.name}}</div>\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"price body-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n &#8377;\r\n {{product.price.sellingPrice}}\r\n </div>\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity\" (click)=\"addItemToCart(product, 'ADD')\">{{content?.button}}</button>\r\n <div class=\"quantity\" *ngIf=\"product.quantity\">\r\n <span (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n <span>{{product.quantity}}</span>\r\n <span (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <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<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: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.add-product-button{width:20%}.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 lightgray;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:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i9.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type:
5100
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturedProductsComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$3.Router }, { token: CartService }], target: i0.ɵɵFactoryTarget.Component }); }
5101
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FeaturedProductsComponent, isStandalone: true, selector: "simpo-featured-products", inputs: { data: "data", responseData: "responseData", index: "index", isRelatedProduct: "isRelatedProduct", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <img src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n <div *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\" class=\"product\"\r\n [style.width]=\"getProductWidth()\">\r\n <div *ngIf=\"!(product.itemImages.length > 0 && product.itemImages[0].imgUrl)\" class=\"default-image\"(click)=\"proceedToProductDesc(product.itemId)\">\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n </div>\r\n <div *ngIf=\"product.itemImages.length > 0 && product.itemImages[0].imgUrl\"(click)=\"proceedToProductDesc(product.itemId)\">\r\n <img [id]=\"'preview_'+idx\" [src]=\"product.itemImages[product.prviewIdx]?.imgUrl\" alt=\"\" class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\" (mouseleave)=\"product.prviewIdx = 0\">\r\n </div>\r\n <div class=\"mt-15\">\r\n <div class=\"product-name heading-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n {{product.name}}</div>\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"price body-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n &#8377;\r\n {{product.price.sellingPrice}}\r\n </div>\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'ADD')\" *ngIf=\"!isItemFav(product)\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'REMOVE')\" *ngIf=\"isItemFav(product)\">favorite</mat-icon>\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity\" (click)=\"addItemToCart(product, 'ADD')\">{{content?.button}}</button>\r\n <div class=\"quantity\" *ngIf=\"product.quantity\">\r\n <span (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n <span>{{product.quantity}}</span>\r\n <span (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <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<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", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.add-product-button{width:20%}.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 lightgray;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:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i8.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type:
5102
+ // TODO: `HttpClientModule` should not be imported into a component directly.
5103
+ // Please refactor the code to add `provideHttpClient()` call to the provider list in the
5104
+ // application bootstrap logic and remove the `HttpClientModule` import from this component.
4993
5105
  //directive
4994
5106
  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: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { 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: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }] }); }
4995
5107
  }
@@ -4999,6 +5111,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
4999
5111
  CommonModule,
5000
5112
  FormsModule,
5001
5113
  SimpoComponentModule,
5114
+ // TODO: `HttpClientModule` should not be imported into a component directly.
5115
+ // Please refactor the code to add `provideHttpClient()` call to the provider list in the
5116
+ // application bootstrap logic and remove the `HttpClientModule` import from this component.
5002
5117
  //directive
5003
5118
  MatIcon,
5004
5119
  AnimationDirective,
@@ -5011,11 +5126,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
5011
5126
  TextBackgroundDirectiveDirective,
5012
5127
  ColorDirective,
5013
5128
  ButtonDirectiveDirective
5014
- ], template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <img src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n <div *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\" class=\"product\"\r\n [style.width]=\"getProductWidth()\">\r\n <div *ngIf=\"!(product.itemImages.length > 0 && product.itemImages[0].imgUrl)\" class=\"default-image\"(click)=\"proceedToProductDesc(product.itemId)\">\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n </div>\r\n <div *ngIf=\"product.itemImages.length > 0 && product.itemImages[0].imgUrl\"(click)=\"proceedToProductDesc(product.itemId)\">\r\n <img [id]=\"'preview_'+idx\" [src]=\"product.itemImages[product.prviewIdx]?.imgUrl\" alt=\"\" class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\" (mouseleave)=\"product.prviewIdx = 0\">\r\n </div>\r\n <div class=\"mt-15\">\r\n <div class=\"product-name heading-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n {{product.name}}</div>\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"price body-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n &#8377;\r\n {{product.price.sellingPrice}}\r\n </div>\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity\" (click)=\"addItemToCart(product, 'ADD')\">{{content?.button}}</button>\r\n <div class=\"quantity\" *ngIf=\"product.quantity\">\r\n <span (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n <span>{{product.quantity}}</span>\r\n <span (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <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<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: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.add-product-button{width:20%}.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 lightgray;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:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}}.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}\n"] }]
5129
+ ], template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <img src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n <div *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\" class=\"product\"\r\n [style.width]=\"getProductWidth()\">\r\n <div *ngIf=\"!(product.itemImages.length > 0 && product.itemImages[0].imgUrl)\" class=\"default-image\"(click)=\"proceedToProductDesc(product.itemId)\">\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n </div>\r\n <div *ngIf=\"product.itemImages.length > 0 && product.itemImages[0].imgUrl\"(click)=\"proceedToProductDesc(product.itemId)\">\r\n <img [id]=\"'preview_'+idx\" [src]=\"product.itemImages[product.prviewIdx]?.imgUrl\" alt=\"\" class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\" (mouseleave)=\"product.prviewIdx = 0\">\r\n </div>\r\n <div class=\"mt-15\">\r\n <div class=\"product-name heading-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n {{product.name}}</div>\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"price body-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n &#8377;\r\n {{product.price.sellingPrice}}\r\n </div>\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'ADD')\" *ngIf=\"!isItemFav(product)\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'REMOVE')\" *ngIf=\"isItemFav(product)\">favorite</mat-icon>\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity\" (click)=\"addItemToCart(product, 'ADD')\">{{content?.button}}</button>\r\n <div class=\"quantity\" *ngIf=\"product.quantity\">\r\n <span (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n <span>{{product.quantity}}</span>\r\n <span (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <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<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", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.add-product-button{width:20%}.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 lightgray;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:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}}.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}\n"] }]
5015
5130
  }], ctorParameters: () => [{ type: Object, decorators: [{
5016
5131
  type: Inject,
5017
5132
  args: [PLATFORM_ID]
5018
- }] }, { type: EventsService }, { type: RestService }, { type: i2$2.Router }, { type: CartService }, { type: StorageServiceService }], propDecorators: { data: [{
5133
+ }] }, { type: EventsService }, { type: RestService }, { type: i2$3.Router }, { type: CartService }], propDecorators: { data: [{
5019
5134
  type: Input
5020
5135
  }], responseData: [{
5021
5136
  type: Input
@@ -5060,8 +5175,8 @@ class FeaturedCategoryComponent extends BaseSection {
5060
5175
  this.responseData = response.filter((category) => category.featuredCollection || true);
5061
5176
  });
5062
5177
  }
5063
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturedCategoryComponent, deps: [{ token: PLATFORM_ID }, { token: i2$2.Router }, { token: RestService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
5064
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FeaturedCategoryComponent, isStandalone: true, selector: "simpo-featured-category", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n [simpoLayout]=\"styles?.layout\">\r\n <div [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <img src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <div class=\"category-parent\">\r\n <div *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\" (click)=\"redirectToListPage(data.categoryName)\">\r\n <img [src]=\"data.imgUrl[0] ?? 'https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg'\" alt=\"\" class=\"category-image\">\r\n <div class=\"category-name body-large\">{{data.categoryName}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <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<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", styles: [".mt-15{margin-top:15px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{display:flex;margin-top:25px;gap:25px;overflow-x:scroll;justify-content:center;cursor:pointer}.category-image{height:230px;width:230px;border-radius:100%;margin-bottom:15px}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.category-image{height:75px;width:75px}.header{gap:7px}.category-parent{gap:15px;margin-top:15px;padding-left:0!important;padding-right:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i9.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type:
5178
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturedCategoryComponent, deps: [{ token: PLATFORM_ID }, { token: i2$3.Router }, { token: RestService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
5179
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FeaturedCategoryComponent, isStandalone: true, selector: "simpo-featured-category", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n [simpoLayout]=\"styles?.layout\">\r\n <div [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <img src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <div class=\"category-parent\">\r\n <div *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\" (click)=\"redirectToListPage(data.categoryName)\">\r\n <img [src]=\"data.imgUrl[0] ?? 'https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg'\" alt=\"\" class=\"category-image\">\r\n <div class=\"category-name body-large\">{{data.categoryName}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <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<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", styles: [".mt-15{margin-top:15px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{display:flex;margin-top:25px;gap:25px;overflow-x:scroll;justify-content:center;cursor:pointer}.category-image{height:230px;width:230px;border-radius:100%;margin-bottom:15px}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.category-image{height:75px;width:75px}.header{gap:7px}.category-parent{gap:15px;margin-top:15px;padding-left:0!important;padding-right:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i8.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type:
5065
5180
  //directive
5066
5181
  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: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }] }); }
5067
5182
  }
@@ -5083,7 +5198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
5083
5198
  }], ctorParameters: () => [{ type: Object, decorators: [{
5084
5199
  type: Inject,
5085
5200
  args: [PLATFORM_ID]
5086
- }] }, { type: i2$2.Router }, { type: RestService }, { type: EventsService }], propDecorators: { data: [{
5201
+ }] }, { type: i2$3.Router }, { type: RestService }, { type: EventsService }], propDecorators: { data: [{
5087
5202
  type: Input
5088
5203
  }], responseData: [{
5089
5204
  type: Input
@@ -5099,7 +5214,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
5099
5214
  // import { RestService } from '../../../services/rest.service';
5100
5215
  // import { HttpClientModule } from '@angular/common/http';
5101
5216
  class ProductDescComponent extends BaseSection {
5102
- constructor(platformId, _eventService, router, activatedRoute, restService, cartService, storageService) {
5217
+ constructor(platformId, _eventService, router, activatedRoute, restService, cartService) {
5103
5218
  super();
5104
5219
  this.platformId = platformId;
5105
5220
  this._eventService = _eventService;
@@ -5107,12 +5222,8 @@ class ProductDescComponent extends BaseSection {
5107
5222
  this.activatedRoute = activatedRoute;
5108
5223
  this.restService = restService;
5109
5224
  this.cartService = cartService;
5110
- this.storageService = storageService;
5111
5225
  this.isLoading = true;
5112
5226
  this.relatedProductData = [];
5113
- this.isItemAsFavorite = false;
5114
- this.USER_CART = null;
5115
- this.USER_WISHLIST = null;
5116
5227
  if (isPlatformBrowser(this.platformId)) {
5117
5228
  this.getScreenSize();
5118
5229
  }
@@ -5132,25 +5243,13 @@ class ProductDescComponent extends BaseSection {
5132
5243
  this.restService.getProductDetails(productId).subscribe((response) => {
5133
5244
  this.responseData = response[0];
5134
5245
  if (this.responseData) {
5246
+ const cartItem = this.cartService.getItemByIdx(this.responseData?.itemId, "CART");
5247
+ const favItem = this.cartService.getItemByIdx(this.responseData?.itemId, "FAVOURITE");
5135
5248
  this.responseData.quantity = 0;
5136
- this.storageService.getUserCart().then((cartResponse) => {
5137
- cartResponse.onsuccess = (cartData) => {
5138
- this.USER_CART = cartData;
5139
- this.USER_CART?.forEach((item) => {
5140
- if (item.itemId == productId)
5141
- this.responseData.quantity = item.quantity;
5142
- });
5143
- };
5144
- });
5145
- this.storageService.getUserWhishlist().then((wishlistResponse) => {
5146
- wishlistResponse.onsuccess = (whislistData) => {
5147
- this.USER_WISHLIST = whislistData;
5148
- this.USER_WISHLIST?.forEach((item) => {
5149
- if (item.itemId == productId)
5150
- this.isItemAsFavorite = true;
5151
- });
5152
- };
5153
- });
5249
+ if (cartItem)
5250
+ this.responseData.quantity = cartItem.quantity;
5251
+ if (favItem)
5252
+ this.responseData.quantity = favItem.quantity;
5154
5253
  this.currentImg = this.responseData?.itemImages[0].imgUrl;
5155
5254
  this.getProductByCategory();
5156
5255
  }
@@ -5188,18 +5287,21 @@ class ProductDescComponent extends BaseSection {
5188
5287
  removeToFavourite() {
5189
5288
  this.cartService.removeItemFromFavourite(this.responseData);
5190
5289
  }
5290
+ get isItemAsFavorite() {
5291
+ return this.cartService.getItemIdxJSON(this.responseData?.itemId, "FAVOURITE") > -1;
5292
+ }
5191
5293
  get getFeatureProductData() {
5192
5294
  return this.data;
5193
5295
  }
5194
5296
  getProductByCategory() {
5195
- this.restService.getProductByCategoryId(this.responseData?.categoryId ?? "").subscribe((response) => {
5196
- this.relatedProductData = response.data?.data;
5297
+ this.restService.getProductByCategoryId(this.responseData?.categoryId ?? "1ef4ffc0-559e-6ec5-8ea9-65f5dbff53c1").subscribe((response) => {
5298
+ this.relatedProductData = response.data.data;
5197
5299
  });
5198
5300
  }
5199
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductDescComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: RestService }, { token: CartService }, { token: StorageServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
5200
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> / <span>{{ responseData?.name | titlecase }}</span></div>\r\n <div class=\"row\">\r\n <div class=\"col-lg-6 col-12\">\r\n <div class=\"prod-img-block\">\r\n <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!img.imgUrl\">\r\n </ng-container>\r\n </div>\r\n <div class=\"item-img\">\r\n <lib-ngx-image-zoom\r\n [thumbImage]=\"currentImg\" \r\n [fullImage]=\"currentImg\" \r\n [zoomMode]=\"'hover'\"\r\n [magnification]=\"2\" \r\n [lensHeight]=\"100\"\r\n [lensWidth]=\"100\"\r\n style=\"height: 100%; width: 100%;\"\r\n ></lib-ngx-image-zoom>\r\n <!-- <img [src]=\"currentImg\" alt=\"\" *ngIf=\"currentImg\"> -->\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!currentImg\">\r\n </div>\r\n <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!img.imgUrl\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 col-12 product-detail\">\r\n <div class=\"heading-large\">{{responseData?.name}}</div>\r\n <div class=\"price\">&#8377; {{responseData?.price?.sellingPrice}}</div>\r\n <div class=\"product-desc body-large\" *ngIf=\"responseData?.brief\">{{responseData.brief}}</div>\r\n\r\n <div class=\"button-parent\">\r\n <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n <!-- <input type=\"number\" (keyup)=\"changeQuantity(quantity.value)\" [value]=\"addedQuantity\" #quantity> -->\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n </div>\r\n <div *ngIf=\"!responseData?.quantity\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\">{{data?.content?.button}}</button>\r\n </div>\r\n <div class=\"favourite\">\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\" *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"product-sku\">\r\n <div *ngIf=\"responseData?.itemInventory\">SKU :\r\n {{responseData.itemInventory.openingStock}}</div>\r\n <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName | titlecase}} <ng-container *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 </div>\r\n </div>\r\n <div class=\"row prod-desc\">\r\n <div class=\"tab-group\">\r\n <div class=\"tab\">Description</div>\r\n </div>\r\n <div style=\"margin-top: 10px;\" class=\"body-large\" *ngIf=\"responseData?.properties?.description\">{{responseData?.properties?.description}}</div>\r\n </div>\r\n </section>\r\n <ng-container *ngIf=\"relatedProductData?.length\">\r\n <simpo-featured-products [data]=\"getFeatureProductData\" [responseData]=\"relatedProductData\" [isRelatedProduct]=\"true\"></simpo-featured-products>\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<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: [".product-desc{display:flex}.row{margin-top:25px}.prod-img-block{display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px}.img-list img{height:100px;width:100%;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:500px;height:460px;overflow:hidden}.item-img img{width:100%}.price{font-weight:600;font-family:Poppins;font-size:20px;margin-top:15px}.product-desc{margin-top:15px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;color:#848484;font-family:Poppins;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-family:Poppins;font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black}@media screen and (max-width: 500px){.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column}.img-list{flex-direction:row;overflow-y:scroll}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.favourite .mat-icon{min-height:55px;min-width:55px;font-size:35px;display:flex;align-items:center;justify-content:center;border:1.5px solid lightgray;border-radius:5px;padding:30px 25px 25px;position:relative;top:5px;cursor:pointer}a{text-decoration:none}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i9.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:
5301
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductDescComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$3.Router }, { token: i2$3.ActivatedRoute }, { token: RestService }, { token: CartService }], target: i0.ɵɵFactoryTarget.Component }); }
5302
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> / <span>{{ responseData?.name | titlecase }}</span></div>\r\n <div class=\"row\">\r\n <div class=\"col-lg-6 col-12\">\r\n <div class=\"prod-img-block\">\r\n <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!img.imgUrl\">\r\n </ng-container>\r\n </div>\r\n <div class=\"item-img\">\r\n <lib-ngx-image-zoom\r\n [thumbImage]=\"currentImg\"\r\n [fullImage]=\"currentImg\"\r\n [zoomMode]=\"'hover'\"\r\n [magnification]=\"2\"\r\n [lensHeight]=\"100\"\r\n [lensWidth]=\"100\"\r\n style=\"height: 100%; width: 100%;\"\r\n ></lib-ngx-image-zoom>\r\n <!-- <img [src]=\"currentImg\" alt=\"\" *ngIf=\"currentImg\"> -->\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!currentImg\">\r\n </div>\r\n <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!img.imgUrl\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 col-12 product-detail\">\r\n <div class=\"heading-large\">{{responseData?.name}}</div>\r\n <div class=\"price\">&#8377; {{responseData?.price?.sellingPrice}}</div>\r\n <div class=\"product-desc body-large\" *ngIf=\"responseData?.brief\">{{responseData.brief}}</div>\r\n\r\n <div class=\"button-parent\">\r\n <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n <!-- <input type=\"number\" (keyup)=\"changeQuantity(quantity.value)\" [value]=\"addedQuantity\" #quantity> -->\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n </div>\r\n <div *ngIf=\"!responseData?.quantity\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\">{{data?.content?.button}}</button>\r\n </div>\r\n <div class=\"favourite\">\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\" *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"product-sku\">\r\n <div *ngIf=\"responseData?.itemInventory\">SKU :\r\n {{responseData.itemInventory.openingStock}}</div>\r\n <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName | titlecase}} <ng-container *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 </div>\r\n </div>\r\n <div class=\"row prod-desc\">\r\n <div class=\"tab-group\">\r\n <div class=\"tab\">Description</div>\r\n </div>\r\n <div style=\"margin-top: 10px;\" class=\"body-large\" *ngIf=\"responseData?.properties?.description\">{{responseData?.properties?.description}}</div>\r\n </div>\r\n </section>\r\n <ng-container *ngIf=\"relatedProductData?.length\">\r\n <simpo-featured-products [data]=\"getFeatureProductData\" [responseData]=\"relatedProductData\" [isRelatedProduct]=\"true\"></simpo-featured-products>\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<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", styles: [".product-desc{display:flex}.row{margin-top:25px}.prod-img-block{display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px}.img-list img{height:100px;width:100%;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:500px;height:460px;overflow:hidden}.item-img img{width:100%}.price{font-weight:600;font-family:Poppins;font-size:20px;margin-top:15px}.product-desc{margin-top:15px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;color:#848484;font-family:Poppins;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-family:Poppins;font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black}@media screen and (max-width: 500px){.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column}.img-list{flex-direction:row;overflow-y:scroll}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.favourite .mat-icon{min-height:55px;min-width:55px;font-size:35px;display:flex;align-items:center;justify-content:center;border:1.5px solid lightgray;border-radius:5px;padding:30px 25px 25px;position:relative;top:5px;cursor:pointer}a{text-decoration:none}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i8.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:
5201
5303
  //DIRECTIVE
5202
- ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: NgxImageZoomModule }, { kind: "component", type: i10.NgxImageZoomComponent, selector: "lib-ngx-image-zoom", inputs: ["thumbImage", "fullImage", "zoomMode", "magnification", "minZoomRatio", "maxZoomRatio", "scrollStepSize", "enableLens", "lensWidth", "lensHeight", "circularLens", "enableScrollZoom", "altText", "titleText"], outputs: ["zoomScroll", "zoomPosition", "imagesLoaded"] }, { kind: "component", type: FeaturedProductsComponent, selector: "simpo-featured-products", inputs: ["data", "responseData", "index", "isRelatedProduct", "delete"] }] }); }
5304
+ ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: NgxImageZoomModule }, { kind: "component", type: i9.NgxImageZoomComponent, selector: "lib-ngx-image-zoom", inputs: ["thumbImage", "fullImage", "zoomMode", "magnification", "minZoomRatio", "maxZoomRatio", "scrollStepSize", "enableLens", "lensWidth", "lensHeight", "circularLens", "enableScrollZoom", "altText", "titleText"], outputs: ["zoomScroll", "zoomPosition", "imagesLoaded"] }, { kind: "component", type: FeaturedProductsComponent, selector: "simpo-featured-products", inputs: ["data", "responseData", "index", "isRelatedProduct", "delete"] }] }); }
5203
5305
  }
5204
5306
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductDescComponent, decorators: [{
5205
5307
  type: Component,
@@ -5215,11 +5317,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
5215
5317
  HoverDirective,
5216
5318
  NgxImageZoomModule,
5217
5319
  FeaturedProductsComponent,
5218
- ], template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> / <span>{{ responseData?.name | titlecase }}</span></div>\r\n <div class=\"row\">\r\n <div class=\"col-lg-6 col-12\">\r\n <div class=\"prod-img-block\">\r\n <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!img.imgUrl\">\r\n </ng-container>\r\n </div>\r\n <div class=\"item-img\">\r\n <lib-ngx-image-zoom\r\n [thumbImage]=\"currentImg\" \r\n [fullImage]=\"currentImg\" \r\n [zoomMode]=\"'hover'\"\r\n [magnification]=\"2\" \r\n [lensHeight]=\"100\"\r\n [lensWidth]=\"100\"\r\n style=\"height: 100%; width: 100%;\"\r\n ></lib-ngx-image-zoom>\r\n <!-- <img [src]=\"currentImg\" alt=\"\" *ngIf=\"currentImg\"> -->\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!currentImg\">\r\n </div>\r\n <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!img.imgUrl\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 col-12 product-detail\">\r\n <div class=\"heading-large\">{{responseData?.name}}</div>\r\n <div class=\"price\">&#8377; {{responseData?.price?.sellingPrice}}</div>\r\n <div class=\"product-desc body-large\" *ngIf=\"responseData?.brief\">{{responseData.brief}}</div>\r\n\r\n <div class=\"button-parent\">\r\n <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n <!-- <input type=\"number\" (keyup)=\"changeQuantity(quantity.value)\" [value]=\"addedQuantity\" #quantity> -->\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n </div>\r\n <div *ngIf=\"!responseData?.quantity\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\">{{data?.content?.button}}</button>\r\n </div>\r\n <div class=\"favourite\">\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\" *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"product-sku\">\r\n <div *ngIf=\"responseData?.itemInventory\">SKU :\r\n {{responseData.itemInventory.openingStock}}</div>\r\n <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName | titlecase}} <ng-container *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 </div>\r\n </div>\r\n <div class=\"row prod-desc\">\r\n <div class=\"tab-group\">\r\n <div class=\"tab\">Description</div>\r\n </div>\r\n <div style=\"margin-top: 10px;\" class=\"body-large\" *ngIf=\"responseData?.properties?.description\">{{responseData?.properties?.description}}</div>\r\n </div>\r\n </section>\r\n <ng-container *ngIf=\"relatedProductData?.length\">\r\n <simpo-featured-products [data]=\"getFeatureProductData\" [responseData]=\"relatedProductData\" [isRelatedProduct]=\"true\"></simpo-featured-products>\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<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: [".product-desc{display:flex}.row{margin-top:25px}.prod-img-block{display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px}.img-list img{height:100px;width:100%;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:500px;height:460px;overflow:hidden}.item-img img{width:100%}.price{font-weight:600;font-family:Poppins;font-size:20px;margin-top:15px}.product-desc{margin-top:15px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;color:#848484;font-family:Poppins;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-family:Poppins;font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black}@media screen and (max-width: 500px){.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column}.img-list{flex-direction:row;overflow-y:scroll}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.favourite .mat-icon{min-height:55px;min-width:55px;font-size:35px;display:flex;align-items:center;justify-content:center;border:1.5px solid lightgray;border-radius:5px;padding:30px 25px 25px;position:relative;top:5px;cursor:pointer}a{text-decoration:none}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"] }]
5320
+ ], template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> / <span>{{ responseData?.name | titlecase }}</span></div>\r\n <div class=\"row\">\r\n <div class=\"col-lg-6 col-12\">\r\n <div class=\"prod-img-block\">\r\n <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!img.imgUrl\">\r\n </ng-container>\r\n </div>\r\n <div class=\"item-img\">\r\n <lib-ngx-image-zoom\r\n [thumbImage]=\"currentImg\"\r\n [fullImage]=\"currentImg\"\r\n [zoomMode]=\"'hover'\"\r\n [magnification]=\"2\"\r\n [lensHeight]=\"100\"\r\n [lensWidth]=\"100\"\r\n style=\"height: 100%; width: 100%;\"\r\n ></lib-ngx-image-zoom>\r\n <!-- <img [src]=\"currentImg\" alt=\"\" *ngIf=\"currentImg\"> -->\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!currentImg\">\r\n </div>\r\n <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!img.imgUrl\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 col-12 product-detail\">\r\n <div class=\"heading-large\">{{responseData?.name}}</div>\r\n <div class=\"price\">&#8377; {{responseData?.price?.sellingPrice}}</div>\r\n <div class=\"product-desc body-large\" *ngIf=\"responseData?.brief\">{{responseData.brief}}</div>\r\n\r\n <div class=\"button-parent\">\r\n <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n <!-- <input type=\"number\" (keyup)=\"changeQuantity(quantity.value)\" [value]=\"addedQuantity\" #quantity> -->\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n </div>\r\n <div *ngIf=\"!responseData?.quantity\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\">{{data?.content?.button}}</button>\r\n </div>\r\n <div class=\"favourite\">\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\" *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"product-sku\">\r\n <div *ngIf=\"responseData?.itemInventory\">SKU :\r\n {{responseData.itemInventory.openingStock}}</div>\r\n <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName | titlecase}} <ng-container *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 </div>\r\n </div>\r\n <div class=\"row prod-desc\">\r\n <div class=\"tab-group\">\r\n <div class=\"tab\">Description</div>\r\n </div>\r\n <div style=\"margin-top: 10px;\" class=\"body-large\" *ngIf=\"responseData?.properties?.description\">{{responseData?.properties?.description}}</div>\r\n </div>\r\n </section>\r\n <ng-container *ngIf=\"relatedProductData?.length\">\r\n <simpo-featured-products [data]=\"getFeatureProductData\" [responseData]=\"relatedProductData\" [isRelatedProduct]=\"true\"></simpo-featured-products>\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<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", styles: [".product-desc{display:flex}.row{margin-top:25px}.prod-img-block{display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px}.img-list img{height:100px;width:100%;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:500px;height:460px;overflow:hidden}.item-img img{width:100%}.price{font-weight:600;font-family:Poppins;font-size:20px;margin-top:15px}.product-desc{margin-top:15px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;color:#848484;font-family:Poppins;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-family:Poppins;font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black}@media screen and (max-width: 500px){.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column}.img-list{flex-direction:row;overflow-y:scroll}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.favourite .mat-icon{min-height:55px;min-width:55px;font-size:35px;display:flex;align-items:center;justify-content:center;border:1.5px solid lightgray;border-radius:5px;padding:30px 25px 25px;position:relative;top:5px;cursor:pointer}a{text-decoration:none}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"] }]
5219
5321
  }], ctorParameters: () => [{ type: Object, decorators: [{
5220
5322
  type: Inject,
5221
5323
  args: [PLATFORM_ID]
5222
- }] }, { type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: RestService }, { type: CartService }, { type: StorageServiceService }], propDecorators: { data: [{
5324
+ }] }, { type: EventsService }, { type: i2$3.Router }, { type: i2$3.ActivatedRoute }, { type: RestService }, { type: CartService }], propDecorators: { data: [{
5223
5325
  type: Input
5224
5326
  }], responseData: [{
5225
5327
  type: Input
@@ -5253,7 +5355,7 @@ class PagninationComponent {
5253
5355
  this.currentPage = index + 1;
5254
5356
  this.router.navigate([''], { queryParams: { pageNo: this.currentPage } });
5255
5357
  }
5256
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PagninationComponent, deps: [{ token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
5358
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PagninationComponent, deps: [{ token: i2$3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
5257
5359
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PagninationComponent, isStandalone: true, selector: "simpo-pagnination", inputs: { totalPages: "totalPages", currentPage: "currentPage" }, ngImport: i0, template: "<section class=\"d-flex w-100 justify-content-center\">\r\n <div class=\"pagniation-btn\" (click)=\"goToPrev()\" [style.visibility]=\"currentPage == 1 ? 'hidden' : 'visible'\">Prev</div>\r\n <ng-container *ngFor=\"let _ of [].constructor(totalPages); let idx = index\">\r\n <span class=\"pagniation-btn\" [ngClass]=\"{'selected-page': (idx +1) == currentPage}\" *ngIf=\"idx < 5\">{{idx +1}}</span>\r\n </ng-container>\r\n <div *ngIf=\"totalPages > 6\" class=\"d-flex align-items-center\">\r\n <span class=\"pagniation-btn fs-2\">...</span>\r\n <span class=\"pagniation-btn\">{{totalPages}}</span>\r\n </div>\r\n <div class=\"pagniation-btn\" (click)=\"goToNext()\" [style.visibility]=\"currentPage == totalPages ? 'hidden' : 'visible'\">Next</div>\r\n</section>", styles: [".pagniation-btn{font-size:14px;padding:5px;border-radius:2px;width:45px;height:40px;cursor:pointer;display:flex;align-items:center;justify-content:center}.selected-page{background-color:#000;color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
5258
5360
  }
5259
5361
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PagninationComponent, decorators: [{
@@ -5261,27 +5363,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
5261
5363
  args: [{ selector: 'simpo-pagnination', standalone: true, imports: [
5262
5364
  CommonModule
5263
5365
  ], template: "<section class=\"d-flex w-100 justify-content-center\">\r\n <div class=\"pagniation-btn\" (click)=\"goToPrev()\" [style.visibility]=\"currentPage == 1 ? 'hidden' : 'visible'\">Prev</div>\r\n <ng-container *ngFor=\"let _ of [].constructor(totalPages); let idx = index\">\r\n <span class=\"pagniation-btn\" [ngClass]=\"{'selected-page': (idx +1) == currentPage}\" *ngIf=\"idx < 5\">{{idx +1}}</span>\r\n </ng-container>\r\n <div *ngIf=\"totalPages > 6\" class=\"d-flex align-items-center\">\r\n <span class=\"pagniation-btn fs-2\">...</span>\r\n <span class=\"pagniation-btn\">{{totalPages}}</span>\r\n </div>\r\n <div class=\"pagniation-btn\" (click)=\"goToNext()\" [style.visibility]=\"currentPage == totalPages ? 'hidden' : 'visible'\">Next</div>\r\n</section>", styles: [".pagniation-btn{font-size:14px;padding:5px;border-radius:2px;width:45px;height:40px;cursor:pointer;display:flex;align-items:center;justify-content:center}.selected-page{background-color:#000;color:#fff}\n"] }]
5264
- }], ctorParameters: () => [{ type: i2$2.Router }], propDecorators: { totalPages: [{
5366
+ }], ctorParameters: () => [{ type: i2$3.Router }], propDecorators: { totalPages: [{
5265
5367
  type: Input
5266
5368
  }], currentPage: [{
5267
5369
  type: Input
5268
5370
  }] } });
5269
5371
 
5270
5372
  class ProductListComponent extends BaseSection {
5271
- constructor(platformId, _eventService, restService, router, activatedRoute, storageService) {
5373
+ constructor(platformId, _eventService, restService, router, activatedRoute) {
5272
5374
  super();
5273
5375
  this.platformId = platformId;
5274
5376
  this._eventService = _eventService;
5275
5377
  this.restService = restService;
5276
5378
  this.router = router;
5277
5379
  this.activatedRoute = activatedRoute;
5278
- this.storageService = storageService;
5279
5380
  this.isLoading = false;
5280
5381
  this.pricingMin = 0;
5281
5382
  this.pricingMax = 100;
5282
5383
  this.sortBy = null;
5283
- this.USER_CART = null;
5284
- this.USER_WISHLIST = null;
5285
5384
  // will come from backend as shop and resturant can have diffrent filters
5286
5385
  this.filteringArray = [
5287
5386
  { name: "Lowest First", value: "lowestPrice" },
@@ -5400,36 +5499,14 @@ class ProductListComponent extends BaseSection {
5400
5499
  const categoryIds = this.categories.filter((category) => category.status).map((category) => category.id);
5401
5500
  this.restService.getFilteredProduct(collectionIds, categoryIds, this.searchTxt, this.pricingMin, this.pricingMax, this.sortBy ?? "", this.pageNo, this.size).subscribe((response) => {
5402
5501
  this.responseData = response.data.data;
5403
- this.storageService.getUserCart().then((cartResponse) => {
5404
- cartResponse.onsuccess = (cartData) => {
5405
- this.USER_CART = cartData;
5406
- this.responseData?.forEach((product) => {
5407
- this.USER_CART?.forEach((item) => {
5408
- if (item.itemId == product.itemId)
5409
- product.quantity = item.quantity;
5410
- });
5411
- });
5412
- };
5413
- });
5414
- this.storageService.getUserWhishlist().then((wishlistResponse) => {
5415
- wishlistResponse.onsuccess = (whislistData) => {
5416
- this.USER_WISHLIST = whislistData;
5417
- this.responseData?.forEach((product) => {
5418
- this.USER_WISHLIST?.forEach((item) => {
5419
- if (item.itemId == product.itemId)
5420
- product.wishlist = true;
5421
- });
5422
- });
5423
- };
5424
- });
5425
5502
  this.totalCount = response.data.count;
5426
5503
  });
5427
5504
  }
5428
5505
  get getTotalPage() {
5429
5506
  return Math.ceil(this.totalCount / this.size);
5430
5507
  }
5431
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductListComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: StorageServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
5432
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n (hovering)=\"showEditTabs($event)\">\r\n <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 20%;\">\r\n <div class=\"filter body-large\">\r\n Filters\r\n </div>\r\n <div class=\"clear\" (click)=\"clearFilter()\">\r\n Clear all\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center justify-content-between\" style=\"width: 80%;\">\r\n <div style=\"color: #6c757d82;\" class=\"fs-6 fw-normal\">Showing {{pageNo*size +1}}-{{size}} of {{ totalCount }} Results</div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n <div class=\"fs-6 fw-normal mr-3\" style=\"color: #6c757d82;\">Sort by</div>\r\n <select (change)=\"applyFilter($event, 'SORT')\">\r\n <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{filter.name}}</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"filter-side\">\r\n\r\n <div class=\"d-flex flex-column m-auto\" style=\"width: 95%;\">\r\n <ng-container *ngFor=\"let filter of filterList\">\r\n <div class=\"d-flex justify-content-between w-100 chip\">\r\n <span>{{filter.name}}</span>\r\n <span style=\"cursor: pointer;\" (click)=\"removeFilter(filter)\">X</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"categories-section\" *ngIf=\"categories?.length\">\r\n <div class=\"categories heading-small\">\r\n Shop by categories\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let category of categories\" (click)=\"applyFilter(category, 'FILTER')\">\r\n <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"category.status\" />\r\n <div>{{category.option | uppercase}}</div>\r\n </div>\r\n </div>\r\n <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n <div class=\"categories heading-small\">\r\n Shop by collections\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let collection of collections\" (click)=\"applyFilter(collection, 'FILTER')\">\r\n <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"collection.status\" />\r\n <div>{{collection.option | uppercase}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"price-section\">\r\n <div class=\"categories heading-small\">\r\n Shop by price\r\n </div>\r\n <div>\r\n <mat-slider min=\"0\" max=\"1000\" style=\"width: 250px;\">\r\n <input matSliderStartThumb [(ngModel)]=\"pricingMin\">\r\n <input matSliderEndThumb [(ngModel)]=\"pricingMax\">\r\n </mat-slider>\r\n </div>\r\n <div class=\"price-button-section\">\r\n <div class=\"button-section\">\r\n <button (click)=\"applyFilter()\">Filter</button>\r\n </div>\r\n <div class=\"price-range\">\r\n Price: ${{ pricingMin }} - ${{ pricingMax }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"getProductWidth()\" (click)=\"proceedToProductDesc(product.itemId)\" style=\"cursor: pointer;\">\r\n <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image\">\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n </div>\r\n <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\">\r\n <img [src]=\"product.itemImages?.[0]?.imgUrl\" alt=\"\" class=\"product-img\">\r\n </div>\r\n <div class=\"mt-2\">\r\n <div class=\"product-name heading-large text-left\">\r\n {{product.name}}</div>\r\n <div class=\"price body-large text-left\">\r\n ${{product.price.sellingPrice}}\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\">{{content?.button}}</button>\r\n </div> -->\r\n <simpo-pagnination style=\"width: 100%;\" class=\"mt-15\" [totalPages]=\"getTotalPage\" [currentPage]=\"pageNo +1\" ></simpo-pagnination>\r\n </div>\r\n \r\n <section class=\"empty-cart\" *ngIf=\"responseData?.length == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img style=\"height: 150px; width: 150px;\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" 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 </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\"></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<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: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal;text-align:left}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;text-align:left}.add-product-button{width:20%}.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!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.add-to-cart-btn{margin-top:15px}.add-to-cart-btn button{height:35px;font-size:16px!important}.filter-side{width:20%}.filter-top-section{padding:0 2rem}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.categories{display:flex;padding:1rem 2rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;background:#0267c1;color:#fff;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{background:#0267c1;padding:8px 15px;border-radius:3px;margin:3px 0;color:#fff;transition:.3s opacity ease}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;justify-content:space-between}.price-range{padding-right:22px;color:#93959e;font-size:15px}.right-side{width:80%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}.filter-side{display:none}.right-side{width:100%}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.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"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i9.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i10$1.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i10$1.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "component", type: PagninationComponent, selector: "simpo-pagnination", inputs: ["totalPages", "currentPage"] }, { kind: "directive", type:
5508
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductListComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$3.Router }, { token: i2$3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
5509
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n (hovering)=\"showEditTabs($event)\">\r\n <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 20%;\">\r\n <div class=\"filter body-large\">\r\n Filters\r\n </div>\r\n <div class=\"clear\" (click)=\"clearFilter()\">\r\n Clear all\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center justify-content-between\" style=\"width: 80%;\">\r\n <div style=\"color: #6c757d82;\" class=\"fs-6 fw-normal\">Showing {{pageNo*size +1}}-{{size}} of {{ totalCount }} Results</div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n <div class=\"fs-6 fw-normal mr-3\" style=\"color: #6c757d82;\">Sort by</div>\r\n <select (change)=\"applyFilter($event, 'SORT')\">\r\n <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{filter.name}}</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"filter-side\">\r\n\r\n <div class=\"d-flex flex-column m-auto\" style=\"width: 95%;\">\r\n <ng-container *ngFor=\"let filter of filterList\">\r\n <div class=\"d-flex justify-content-between w-100 chip\">\r\n <span>{{filter.name}}</span>\r\n <span style=\"cursor: pointer;\" (click)=\"removeFilter(filter)\">X</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"categories-section\" *ngIf=\"categories?.length\">\r\n <div class=\"categories heading-small\">\r\n Shop by categories\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let category of categories\" (click)=\"applyFilter(category, 'FILTER')\">\r\n <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"category.status\" />\r\n <div>{{category.option | uppercase}}</div>\r\n </div>\r\n </div>\r\n <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n <div class=\"categories heading-small\">\r\n Shop by collections\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let collection of collections\" (click)=\"applyFilter(collection, 'FILTER')\">\r\n <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"collection.status\" />\r\n <div>{{collection.option | uppercase}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"price-section\">\r\n <div class=\"categories heading-small\">\r\n Shop by price\r\n </div>\r\n <div>\r\n <mat-slider min=\"0\" max=\"1000\" style=\"width: 250px;\">\r\n <input matSliderStartThumb [(ngModel)]=\"pricingMin\">\r\n <input matSliderEndThumb [(ngModel)]=\"pricingMax\">\r\n </mat-slider>\r\n </div>\r\n <div class=\"price-button-section\">\r\n <div class=\"button-section\">\r\n <button (click)=\"applyFilter()\">Filter</button>\r\n </div>\r\n <div class=\"price-range\">\r\n Price: ${{ pricingMin }} - ${{ pricingMax }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"getProductWidth()\" (click)=\"proceedToProductDesc(product.itemId)\" style=\"cursor: pointer;\">\r\n <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image\">\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n </div>\r\n <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\">\r\n <img [src]=\"product.itemImages?.[0]?.imgUrl\" alt=\"\" class=\"product-img\">\r\n </div>\r\n <div class=\"mt-2\">\r\n <div class=\"product-name heading-large text-left\">\r\n {{product.name}}</div>\r\n <div class=\"price body-large text-left\">\r\n ${{product.price.sellingPrice}}\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\">{{content?.button}}</button>\r\n </div> -->\r\n <simpo-pagnination style=\"width: 100%;\" class=\"mt-15\" [totalPages]=\"getTotalPage\" [currentPage]=\"pageNo +1\" ></simpo-pagnination>\r\n </div>\r\n \r\n <section class=\"empty-cart\" *ngIf=\"responseData?.length == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img style=\"height: 150px; width: 150px;\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" 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 </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\"></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<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: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal;text-align:left}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;text-align:left}.add-product-button{width:20%}.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!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.add-to-cart-btn{margin-top:15px}.add-to-cart-btn button{height:35px;font-size:16px!important}.filter-side{width:20%}.filter-top-section{padding:0 2rem}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.categories{display:flex;padding:1rem 2rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;background:#0267c1;color:#fff;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{background:#0267c1;padding:8px 15px;border-radius:3px;margin:3px 0;color:#fff;transition:.3s opacity ease}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;justify-content:space-between}.price-range{padding-right:22px;color:#93959e;font-size:15px}.right-side{width:80%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}.filter-side{display:none}.right-side{width:100%}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i8.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i9$1.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i9$1.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "component", type: PagninationComponent, selector: "simpo-pagnination", inputs: ["totalPages", "currentPage"] }, { kind: "directive", type:
5433
5510
  //directive
5434
5511
  AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }] }); }
5435
5512
  }
@@ -5452,7 +5529,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
5452
5529
  }], ctorParameters: () => [{ type: Object, decorators: [{
5453
5530
  type: Inject,
5454
5531
  args: [PLATFORM_ID]
5455
- }] }, { type: EventsService }, { type: RestService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: StorageServiceService }], propDecorators: { responseData: [{
5532
+ }] }, { type: EventsService }, { type: RestService }, { type: i2$3.Router }, { type: i2$3.ActivatedRoute }], propDecorators: { responseData: [{
5456
5533
  type: Input
5457
5534
  }], data: [{
5458
5535
  type: Input
@@ -5612,8 +5689,8 @@ class AddressComponent {
5612
5689
  }
5613
5690
  }
5614
5691
  }
5615
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AddressComponent, deps: [{ token: i0.NgZone }, { token: RestService }, { token: i3.MatDialog }, { token: i2$2.Router }, { token: StorageServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
5616
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AddressComponent, isStandalone: true, selector: "simpo-address", inputs: { responseData: "responseData", data: "data", isCart: "isCart", selectedAddressIdx: "selectedAddressIdx" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"address-sec\">\r\n <div class=\"header\">\r\n <h3>{{isCart ? 'Shipping To' : 'New Address'}}</h3>\r\n <mat-icon (click)=\"close()\" *ngIf=\"!isCart\">close</mat-icon>\r\n <span class=\"add-address\" *ngIf=\"addressList.length && !addNewAddress\" (click)=\"addNewAddress = true\">+ add address</span>\r\n </div>\r\n <ng-container *ngIf=\"!addressList?.length || addNewAddress\">\r\n <p (click)=\"getCurrentLocation()\" class=\"d-flex align-items-center\" style=\"cursor: pointer;\">\r\n <mat-icon>my_location</mat-icon>\r\n <span>take my current location</span>\r\n </p>\r\n <div class=\"forms d-flex flex-wrap\">\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Name</div>\r\n <input type=\"text\" placeholder=\"Enter name\" [(ngModel)]=\"address.receiverName\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Mobile</div>\r\n <input type=\"text\" placeholder=\"Enter mobile\" [(ngModel)]=\"address.receiverPhone\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Email</div>\r\n <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"address.receiverEmail\">\r\n </div>\r\n <div class=\"form-control-full-group\">\r\n <div class=\"label\">Address</div>\r\n <input type=\"text\" placeholder=\"Enter address\" matGoogleMapsAutocomplete\r\n (onAutocompleteSelected)=\"onAutocompleteSelected($event)\"\r\n (onLocationSelected)=\"onLocationSelected($event)\" [(ngModel)]=\"address.addressLine1\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Locality</div>\r\n <input type=\"text\" placeholder=\"Enter locality\" [(ngModel)]=\"address.localityName\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Landmark</div>\r\n <input type=\"text\" placeholder=\"Enter landmark\" [(ngModel)]=\"address.landmark\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Pincode</div>\r\n <input type=\"text\" placeholder=\"Enter pincode\" [(ngModel)]=\"address.zipCode\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">City</div>\r\n <input type=\"text\" placeholder=\"Enter city\" [(ngModel)]=\"address.cityName\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">State</div>\r\n <input type=\"text\" placeholder=\"Enter state\" [(ngModel)]=\"address.stateName\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Address Type</div>\r\n <div class=\"d-flex\">\r\n <ng-container *ngFor=\"let address of addessType\">\r\n <span class=\"address-type\" (click)=\"checkAddressType(address)\" [ngClass]=\"{'active-address': address.status}\">{{address.key}}</span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"address-list\" *ngIf=\"addressList.length && !addNewAddress\">\r\n <ng-container *ngFor=\"let address of addressList; let idx = index\">\r\n <div class=\"address\" (click)=\"selectedAddressIdx = idx\" [ngClass]=\"{'selected-address': selectedAddressIdx == idx}\">\r\n <div class=\"address-left\">\r\n <div class=\"top\">\r\n <span class=\"fw-bold mr-2\">{{address?.receiverName}}</span>\r\n <span class=\"address-type\">{{address?.addressType}}</span>\r\n </div>\r\n <div class=\"address-det\">{{address.addressLine1}}</div>\r\n <div class=\"phone\">\r\n <span>Phone:</span>\r\n <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n </div>\r\n </div>\r\n <div class=\"address-right\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"action-btn\" *ngIf=\"!addressList.length || addNewAddress\">\r\n <button (click)=\"updateAddress()\">Update</button>\r\n </div>\r\n</section>", styles: [".address-sec{padding:20px;position:relative}.address-sec .header{display:flex;justify-content:space-between;margin-bottom:20px}.mat-icon{cursor:pointer;margin-right:5px}.action-btn{position:absolute;bottom:-50px;right:10px}.action-btn button{background-color:#0267c1;color:#fff;padding:10px;width:200px!important;border:none}.label:after{content:\"*\"}.active-address{background-color:#0267c1!important;color:#fff!important}.forms{gap:10px;justify-content:space-between}.form-control-group,.form-control-full-group{width:48%}:is(.form-control-group,.form-control-full-group) input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.form-control-full-group{width:100%!important}.address-type{width:150px;padding:10px;background-color:#d3d3d35c;color:#000;text-align:center;border-radius:5px;margin:0 5px;cursor:pointer}.address-list{display:flex;flex-direction:column;gap:10px}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1}.address-list .address-left{width:80%}.address-list .address-right{width:20%}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.add-address{color:#0267c1;cursor:pointer;font-weight:600}.address-active{background-color:#0267c1;color:#fff}.selected-address{border:2px solid #0267C1!important}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }] }); }
5692
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AddressComponent, deps: [{ token: i0.NgZone }, { token: RestService }, { token: i3.MatDialog }, { token: i2$3.Router }, { token: StorageServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
5693
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AddressComponent, isStandalone: true, selector: "simpo-address", inputs: { responseData: "responseData", data: "data", isCart: "isCart", selectedAddressIdx: "selectedAddressIdx" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"address-sec\">\r\n <div class=\"header\">\r\n <h3>{{isCart ? 'Shipping To' : 'New Address'}}</h3>\r\n <mat-icon (click)=\"close()\" *ngIf=\"!isCart\">close</mat-icon>\r\n <span class=\"add-address\" *ngIf=\"addressList.length && !addNewAddress\" (click)=\"addNewAddress = true\">+ add address</span>\r\n </div>\r\n <ng-container *ngIf=\"!addressList?.length || addNewAddress\">\r\n <p (click)=\"getCurrentLocation()\" class=\"d-flex align-items-center\" style=\"cursor: pointer;\">\r\n <mat-icon>my_location</mat-icon>\r\n <span>take my current location</span>\r\n </p>\r\n <div class=\"forms d-flex flex-wrap\">\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Name</div>\r\n <input type=\"text\" placeholder=\"Enter name\" [(ngModel)]=\"address.receiverName\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Mobile</div>\r\n <input type=\"text\" placeholder=\"Enter mobile\" [(ngModel)]=\"address.receiverPhone\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Email</div>\r\n <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"address.receiverEmail\">\r\n </div>\r\n <div class=\"form-control-full-group\">\r\n <div class=\"label\">Address</div>\r\n <input type=\"text\" placeholder=\"Enter address\" matGoogleMapsAutocomplete\r\n (onAutocompleteSelected)=\"onAutocompleteSelected($event)\"\r\n (onLocationSelected)=\"onLocationSelected($event)\" [(ngModel)]=\"address.addressLine1\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Locality</div>\r\n <input type=\"text\" placeholder=\"Enter locality\" [(ngModel)]=\"address.localityName\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Landmark</div>\r\n <input type=\"text\" placeholder=\"Enter landmark\" [(ngModel)]=\"address.landmark\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Pincode</div>\r\n <input type=\"text\" placeholder=\"Enter pincode\" [(ngModel)]=\"address.zipCode\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">City</div>\r\n <input type=\"text\" placeholder=\"Enter city\" [(ngModel)]=\"address.cityName\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">State</div>\r\n <input type=\"text\" placeholder=\"Enter state\" [(ngModel)]=\"address.stateName\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Address Type</div>\r\n <div class=\"d-flex\">\r\n <ng-container *ngFor=\"let address of addessType\">\r\n <span class=\"address-type\" (click)=\"checkAddressType(address)\" [ngClass]=\"{'active-address': address.status}\">{{address.key}}</span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"address-list\" *ngIf=\"addressList.length && !addNewAddress\">\r\n <ng-container *ngFor=\"let address of addressList; let idx = index\">\r\n <div class=\"address\" (click)=\"selectedAddressIdx = idx\" [ngClass]=\"{'selected-address': selectedAddressIdx == idx}\">\r\n <div class=\"address-left\">\r\n <div class=\"top\">\r\n <span class=\"fw-bold mr-2\">{{address?.receiverName}}</span>\r\n <span class=\"address-type\">{{address?.addressType}}</span>\r\n </div>\r\n <div class=\"address-det\">{{address.addressLine1}}</div>\r\n <div class=\"phone\">\r\n <span>Phone:</span>\r\n <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n </div>\r\n </div>\r\n <div class=\"address-right\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"action-btn\" *ngIf=\"!addressList.length || addNewAddress\">\r\n <button (click)=\"updateAddress()\">Update</button>\r\n </div>\r\n</section>", styles: [".address-sec{padding:20px;position:relative}.address-sec .header{display:flex;justify-content:space-between;margin-bottom:20px}.mat-icon{cursor:pointer;margin-right:5px}.action-btn{position:absolute;bottom:-50px;right:10px}.action-btn button{background-color:#0267c1;color:#fff;padding:10px;width:200px!important;border:none}.label:after{content:\"*\"}.active-address{background-color:#0267c1!important;color:#fff!important}.forms{gap:10px;justify-content:space-between}.form-control-group,.form-control-full-group{width:48%}:is(.form-control-group,.form-control-full-group) input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.form-control-full-group{width:100%!important}.address-type{width:150px;padding:10px;background-color:#d3d3d35c;color:#000;text-align:center;border-radius:5px;margin:0 5px;cursor:pointer}.address-list{display:flex;flex-direction:column;gap:10px}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1}.address-list .address-left{width:80%}.address-list .address-right{width:20%}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.add-address{color:#0267c1;cursor:pointer;font-weight:600}.address-active{background-color:#0267c1;color:#fff}.selected-address{border:2px solid #0267C1!important}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }] }); }
5617
5694
  }
5618
5695
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AddressComponent, decorators: [{
5619
5696
  type: Component,
@@ -5623,7 +5700,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
5623
5700
  FormsModule,
5624
5701
  MatDialogModule
5625
5702
  ], template: "<section class=\"address-sec\">\r\n <div class=\"header\">\r\n <h3>{{isCart ? 'Shipping To' : 'New Address'}}</h3>\r\n <mat-icon (click)=\"close()\" *ngIf=\"!isCart\">close</mat-icon>\r\n <span class=\"add-address\" *ngIf=\"addressList.length && !addNewAddress\" (click)=\"addNewAddress = true\">+ add address</span>\r\n </div>\r\n <ng-container *ngIf=\"!addressList?.length || addNewAddress\">\r\n <p (click)=\"getCurrentLocation()\" class=\"d-flex align-items-center\" style=\"cursor: pointer;\">\r\n <mat-icon>my_location</mat-icon>\r\n <span>take my current location</span>\r\n </p>\r\n <div class=\"forms d-flex flex-wrap\">\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Name</div>\r\n <input type=\"text\" placeholder=\"Enter name\" [(ngModel)]=\"address.receiverName\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Mobile</div>\r\n <input type=\"text\" placeholder=\"Enter mobile\" [(ngModel)]=\"address.receiverPhone\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Email</div>\r\n <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"address.receiverEmail\">\r\n </div>\r\n <div class=\"form-control-full-group\">\r\n <div class=\"label\">Address</div>\r\n <input type=\"text\" placeholder=\"Enter address\" matGoogleMapsAutocomplete\r\n (onAutocompleteSelected)=\"onAutocompleteSelected($event)\"\r\n (onLocationSelected)=\"onLocationSelected($event)\" [(ngModel)]=\"address.addressLine1\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Locality</div>\r\n <input type=\"text\" placeholder=\"Enter locality\" [(ngModel)]=\"address.localityName\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Landmark</div>\r\n <input type=\"text\" placeholder=\"Enter landmark\" [(ngModel)]=\"address.landmark\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Pincode</div>\r\n <input type=\"text\" placeholder=\"Enter pincode\" [(ngModel)]=\"address.zipCode\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">City</div>\r\n <input type=\"text\" placeholder=\"Enter city\" [(ngModel)]=\"address.cityName\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">State</div>\r\n <input type=\"text\" placeholder=\"Enter state\" [(ngModel)]=\"address.stateName\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Address Type</div>\r\n <div class=\"d-flex\">\r\n <ng-container *ngFor=\"let address of addessType\">\r\n <span class=\"address-type\" (click)=\"checkAddressType(address)\" [ngClass]=\"{'active-address': address.status}\">{{address.key}}</span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"address-list\" *ngIf=\"addressList.length && !addNewAddress\">\r\n <ng-container *ngFor=\"let address of addressList; let idx = index\">\r\n <div class=\"address\" (click)=\"selectedAddressIdx = idx\" [ngClass]=\"{'selected-address': selectedAddressIdx == idx}\">\r\n <div class=\"address-left\">\r\n <div class=\"top\">\r\n <span class=\"fw-bold mr-2\">{{address?.receiverName}}</span>\r\n <span class=\"address-type\">{{address?.addressType}}</span>\r\n </div>\r\n <div class=\"address-det\">{{address.addressLine1}}</div>\r\n <div class=\"phone\">\r\n <span>Phone:</span>\r\n <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n </div>\r\n </div>\r\n <div class=\"address-right\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"action-btn\" *ngIf=\"!addressList.length || addNewAddress\">\r\n <button (click)=\"updateAddress()\">Update</button>\r\n </div>\r\n</section>", styles: [".address-sec{padding:20px;position:relative}.address-sec .header{display:flex;justify-content:space-between;margin-bottom:20px}.mat-icon{cursor:pointer;margin-right:5px}.action-btn{position:absolute;bottom:-50px;right:10px}.action-btn button{background-color:#0267c1;color:#fff;padding:10px;width:200px!important;border:none}.label:after{content:\"*\"}.active-address{background-color:#0267c1!important;color:#fff!important}.forms{gap:10px;justify-content:space-between}.form-control-group,.form-control-full-group{width:48%}:is(.form-control-group,.form-control-full-group) input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.form-control-full-group{width:100%!important}.address-type{width:150px;padding:10px;background-color:#d3d3d35c;color:#000;text-align:center;border-radius:5px;margin:0 5px;cursor:pointer}.address-list{display:flex;flex-direction:column;gap:10px}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1}.address-list .address-left{width:80%}.address-list .address-right{width:20%}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.add-address{color:#0267c1;cursor:pointer;font-weight:600}.address-active{background-color:#0267c1;color:#fff}.selected-address{border:2px solid #0267C1!important}\n"] }]
5626
- }], ctorParameters: () => [{ type: i0.NgZone }, { type: RestService }, { type: i3.MatDialog }, { type: i2$2.Router }, { type: StorageServiceService }], propDecorators: { responseData: [{
5703
+ }], ctorParameters: () => [{ type: i0.NgZone }, { type: RestService }, { type: i3.MatDialog }, { type: i2$3.Router }, { type: StorageServiceService }], propDecorators: { responseData: [{
5627
5704
  type: Input
5628
5705
  }], data: [{
5629
5706
  type: Input
@@ -5647,47 +5724,43 @@ class CartComponent extends BaseSection {
5647
5724
  this.selectedAddressIdx = -1;
5648
5725
  this.currentTab = "BAG";
5649
5726
  this.loadingItems = [];
5650
- this.userDetails = null;
5651
- this.userCart = null;
5652
- this.USER_CART_ITEMS = null;
5653
5727
  }
5654
5728
  ngOnInit() {
5655
5729
  this._eventService.showLoadingScreen.subscribe((response) => {
5656
5730
  this.isLoading = response;
5657
5731
  });
5658
5732
  if (this.storageService.getUser()) {
5659
- this.userDetails = this.storageService.getUser();
5660
- this.storageService.getUserCart().then((cartResponse) => {
5661
- cartResponse.onsuccess = (cartData) => {
5662
- this.USER_CART_ITEMS = cartData;
5663
- this.responseData = this.USER_CART_ITEMS;
5664
- if (this.userCart) {
5665
- this.userCart.orderedItems = this.USER_CART_ITEMS;
5666
- this.userCart.cartId = this.cookieService.get("cartId") ?? null;
5667
- this.restService.addItemToDB(this.userCart).subscribe((response) => { });
5668
- }
5669
- };
5733
+ const userDetails = this.storageService.getUser();
5734
+ console.log("user deatils", userDetails);
5735
+ UserInfo.user.addressDetailsList = userDetails.addressDetailsList;
5736
+ UserCart.userDetails = { ...UserCart.userDetails, ...UserInfo.user.contact, userId: userDetails.userId };
5737
+ this.cartService.storeDataToServer().subscribe((response) => {
5738
+ console.log("a: ", UserCart, this.responseData, response);
5739
+ if (response[0].data) {
5740
+ UserCart.billdetails = response[0].data.billdetails;
5741
+ UserCart.cartId = response[0].data.cartId;
5742
+ UserCart.orderedItems = response[0].data.orderedItems;
5743
+ }
5744
+ console.log("a: ", UserCart, this.responseData, response);
5745
+ this.responseData = this.storageService.calculateBillingDetails();
5670
5746
  });
5671
- // console.log("user deatils", userDetails);
5672
- // UserInfo.user.addressDetailsList = userDetails.addressDetailsList as never;
5673
- // UserCart.userDetails = {...UserCart.userDetails, ...UserInfo.user.contact, userId: userDetails.userId};
5674
- // this.cartService.storeDataToServer().subscribe((response: any)=> {
5675
- // console.log("a: ", UserCart, this.responseData, response);
5676
- // if (response[0].data) {
5677
- // UserCart.billdetails = response[0].data.billdetails;
5678
- // UserCart.cartId = response[0].data.cartId;
5679
- // UserCart.orderedItems = response[0].data.orderedItems;
5680
- // }
5681
- // console.log("a: ", UserCart, this.responseData, response);
5682
- // this.responseData = this.storageService.calculateBillingDetails();
5683
- // })
5684
5747
  }
5685
5748
  else {
5749
+ console.log("B");
5686
5750
  this.responseData = this.storageService.calculateBillingDetails();
5687
5751
  console.log(this.responseData);
5688
5752
  }
5689
5753
  this.styles = this.data?.styles;
5690
5754
  }
5755
+ // userDetails: any;
5756
+ // getUserInfo() {
5757
+ // const userId = "dc915bd4-fa6f-446e-bce2-440b6804af22";
5758
+ //
5759
+ // return this.restService.getUserInfo(userId).subscribe((response: any)=> {
5760
+ // this.userDetails = response.data;
5761
+ //
5762
+ // })
5763
+ // }
5691
5764
  proceedToCheckout() {
5692
5765
  if (this.storageService.getUser()) {
5693
5766
  this.currentTab = "ADDRESS";
@@ -5705,15 +5778,16 @@ class CartComponent extends BaseSection {
5705
5778
  }
5706
5779
  }
5707
5780
  proceedToListPage() {
5781
+ // this._eventService.redirectToPage.emit({ redirectTo: '/list'});
5708
5782
  this.router.navigate(['/']);
5709
5783
  }
5710
5784
  removeItem(item) {
5711
5785
  item.quantity = 0;
5712
5786
  this.loadingItems.push(item.itemId);
5713
- // this.cartService.addItemFromCartPage(item).subscribe((response)=> {
5714
- // this.loadingItems = this.loadingItems.filter((idx: string)=> idx != item.itemId);
5715
- // this.responseData = this.storageService.calculateBillingDetails();
5716
- // })
5787
+ this.cartService.addItemFromCartPage(item).subscribe((response) => {
5788
+ this.loadingItems = this.loadingItems.filter((idx) => idx != item.itemId);
5789
+ this.responseData = this.storageService.calculateBillingDetails();
5790
+ });
5717
5791
  }
5718
5792
  addToCart(item, type) {
5719
5793
  if (type == 'ADD') {
@@ -5723,10 +5797,10 @@ class CartComponent extends BaseSection {
5723
5797
  item.quantity -= 1;
5724
5798
  }
5725
5799
  this.loadingItems.push(item.itemId);
5726
- // this.cartService.addItemFromCartPage(item).subscribe((response)=> {
5727
- // this.loadingItems = this.loadingItems.filter((idx: string)=> idx != item.itemId);
5728
- // this.responseData = this.storageService.calculateBillingDetails();
5729
- // })
5800
+ this.cartService.addItemFromCartPage(item).subscribe((response) => {
5801
+ this.loadingItems = this.loadingItems.filter((idx) => idx != item.itemId);
5802
+ this.responseData = this.storageService.calculateBillingDetails();
5803
+ });
5730
5804
  }
5731
5805
  proceedToPayment() {
5732
5806
  if (!this.storageService.getUser()) {
@@ -5736,10 +5810,10 @@ class CartComponent extends BaseSection {
5736
5810
  const userDetail = this.storageService.getUser();
5737
5811
  console.log("User Details", userDetail);
5738
5812
  const address = UserInfo.user.addressDetailsList[0];
5739
- // console.log("a: ", UserCart, this.responseData);
5813
+ console.log("a: ", UserCart, this.responseData);
5740
5814
  const payload = {
5741
5815
  "userId": userDetail.userId ?? UserInfo.user.userId,
5742
- "cartId": localStorage.getItem('cartId'),
5816
+ "cartId": UserCart.cartId,
5743
5817
  "orderAmount": this.responseData.billdetails.totalNetValue,
5744
5818
  "contactDetails": {
5745
5819
  "name": address.receiverName,
@@ -5758,8 +5832,8 @@ class CartComponent extends BaseSection {
5758
5832
  get getAddressList() {
5759
5833
  return UserInfo.user ? [...UserInfo.user?.addressDetailsList] : [];
5760
5834
  }
5761
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CartComponent, deps: [{ token: EventsService }, { token: CartService }, { token: i2$2.Router }, { token: RestService }, { token: i3.MatDialog }, { token: StorageServiceService }, { token: i2$3.CookieService }], target: i0.ɵɵFactoryTarget.Component }); }
5762
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" >\r\n <div class=\"d-flex align-items-center justify-content-center mb-4\" style=\"margin-top: 50px;\" *ngIf=\"responseData?.orderedItems?.length\">\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"currentTab = 'ADDRESS'\">Address</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" (click)=\"currentTab = 'PAYMENT'\">Payment</span>\r\n </div>\r\n <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container [ngSwitch]=\"currentTab\">\r\n <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\r\n <div class=\"my-bag\">\r\n My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n </div>\r\n <div class=\"cart-items\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <div class=\"row item-parent\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"col-md-6 h-100\">\r\n <div class=\"lh-23\">\r\n <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n <div class=\"price-with-tax\">\r\n &#8377; {{item.price + (item.itemTax ?? 0)}}\r\n </div>\r\n <div class=\"item-quantity\">\r\n <ng-container *ngIf=\"!isItemLoading(item.itemId)\">\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n </ng-container>\r\n <ng-container *ngIf=\"isItemLoading(item.itemId)\">\r\n <div class=\"d-flex\"> <i class=\"fa fa-spinner fa-spin\" style=\"font-size:24px; margin-right: 10px;\"></i> <span>Loading...</span></div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 position-relative\" style=\"margin-left: auto;\">\r\n <div class=\"item-price\">&#8377; {{(item.price + (item.itemTax ?? 0)) * item.quantity}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\">delete</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\r\n <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\" [selectedAddressIdx]=\"selectedAddressIdx\"></simpo-address>\r\n </div>\r\n <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\r\n </ng-container>\r\n <div class=\"right-panel\">\r\n <div class=\"my-bag\">\r\n Price Details\r\n </div>\r\n <div class=\"price-details\">\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\r\n <div class=\"price-type\">Total Price</div>\r\n <div class=\"price-value\">&#8377; {{responseData.billdetails.totalNetValue}}</div>\r\n </div>\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\r\n <div class=\"price-type\">Total Tax</div>\r\n <div class=\"price-value\">&#8377; {{responseData?.billdetails?.totalTax}}</div>\r\n </div>\r\n <div class=\"price-parent-block\"\r\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <div class=\"price-type\">Delivery Charge</div>\r\n <div class=\"price-value\">&#8377; {{responseData.billdetails.deliveryCharges}}</div>\r\n </div>\r\n <hr>\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.totalAmount\">\r\n <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n <div class=\"price-value\" style=\"font-weight: 600;\">&#8377; {{responseData.totalAmount}}</div>\r\n </div>\r\n\r\n <div class=\"button-parent\">\r\n <ng-container *ngIf=\"currentTab == 'BAG'\">\r\n <div class=\"btn\" (click)=\"proceedToCheckout()\">Checkout Cart</div>\r\n <div class=\"btn\" (click)=\"proceedToListPage()\">Continue Shopping</div>\r\n </ng-container>\r\n \r\n <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\r\n <div class=\"btn\" (click)=\"proceedToPayment()\">Place Order</div>\r\n </ng-container>\r\n <!-- <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\r\n <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Your cart is empty\r\n </div>\r\n <div class=\"description d-flex mt-4\">\r\n Looks like you have not added anything to your cart. Go ahead & explore top categories.\r\n </div>\r\n </div>\r\n </div>\r\n </section>\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 </section>\r\n</ng-container>\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", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important;border:1px solid lightgray}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel,.right-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i9.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: AddressComponent, selector: "simpo-address", inputs: ["responseData", "data", "isCart", "selectedAddressIdx"] }] }); }
5835
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CartComponent, deps: [{ token: EventsService }, { token: CartService }, { token: i2$3.Router }, { token: RestService }, { token: i3.MatDialog }, { token: StorageServiceService }, { token: i2$4.CookieService }], target: i0.ɵɵFactoryTarget.Component }); }
5836
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" >\r\n <div class=\"d-flex align-items-center justify-content-center mb-4\" style=\"margin-top: 50px;\" *ngIf=\"responseData?.orderedItems?.length\">\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"currentTab = 'ADDRESS'\">Address</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" (click)=\"currentTab = 'PAYMENT'\">Payment</span>\r\n </div>\r\n <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container [ngSwitch]=\"currentTab\">\r\n <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\r\n <div class=\"my-bag\">\r\n My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n </div>\r\n <div class=\"cart-items\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <div class=\"row item-parent\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"col-md-6 h-100\">\r\n <div class=\"lh-23\">\r\n <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n <div class=\"price-with-tax\">\r\n &#8377; {{item.price + (item.itemTax ?? 0)}}\r\n </div>\r\n <div class=\"item-quantity\">\r\n <ng-container *ngIf=\"!isItemLoading(item.itemId)\">\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n </ng-container>\r\n <ng-container *ngIf=\"isItemLoading(item.itemId)\">\r\n <div class=\"d-flex\"> <i class=\"fa fa-spinner fa-spin\" style=\"font-size:24px; margin-right: 10px;\"></i> <span>Loading...</span></div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 position-relative\" style=\"margin-left: auto;\">\r\n <div class=\"item-price\">&#8377; {{(item.price + (item.itemTax ?? 0)) * item.quantity}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\">delete</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\r\n <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\" [selectedAddressIdx]=\"selectedAddressIdx\"></simpo-address>\r\n </div>\r\n <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\r\n </ng-container>\r\n <div class=\"right-panel\">\r\n <div class=\"my-bag\">\r\n Price Details\r\n </div>\r\n <div class=\"price-details\">\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\r\n <div class=\"price-type\">Total Price</div>\r\n <div class=\"price-value\">&#8377; {{responseData.billdetails.totalNetValue}}</div>\r\n </div>\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\r\n <div class=\"price-type\">Total Tax</div>\r\n <div class=\"price-value\">&#8377; {{responseData?.billdetails?.totalTax}}</div>\r\n </div>\r\n <div class=\"price-parent-block\"\r\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <div class=\"price-type\">Delivery Charge</div>\r\n <div class=\"price-value\">&#8377; {{responseData.billdetails.deliveryCharges}}</div>\r\n </div>\r\n <hr>\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.totalAmount\">\r\n <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n <div class=\"price-value\" style=\"font-weight: 600;\">&#8377; {{responseData.totalAmount}}</div>\r\n </div>\r\n\r\n <div class=\"button-parent\">\r\n <ng-container *ngIf=\"currentTab == 'BAG'\">\r\n <div class=\"btn\" (click)=\"proceedToCheckout()\">Checkout Cart</div>\r\n <div class=\"btn\" (click)=\"proceedToListPage()\">Continue Shopping</div>\r\n </ng-container>\r\n \r\n <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\r\n <div class=\"btn\" (click)=\"proceedToPayment()\">Place Order</div>\r\n </ng-container>\r\n <!-- <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\r\n <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Your cart is empty\r\n </div>\r\n <div class=\"description d-flex mt-4\">\r\n Looks like you have not added anything to your cart. Go ahead & explore top categories.\r\n </div>\r\n </div>\r\n </div>\r\n </section>\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 </section>\r\n</ng-container>\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", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important;border:1px solid lightgray}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel,.right-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i8.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: AddressComponent, selector: "simpo-address", inputs: ["responseData", "data", "isCart", "selectedAddressIdx"] }] }); }
5763
5837
  }
5764
5838
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CartComponent, decorators: [{
5765
5839
  type: Component,
@@ -5776,7 +5850,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
5776
5850
  HoverDirective,
5777
5851
  AddressComponent,
5778
5852
  ], template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" >\r\n <div class=\"d-flex align-items-center justify-content-center mb-4\" style=\"margin-top: 50px;\" *ngIf=\"responseData?.orderedItems?.length\">\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"currentTab = 'ADDRESS'\">Address</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" (click)=\"currentTab = 'PAYMENT'\">Payment</span>\r\n </div>\r\n <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container [ngSwitch]=\"currentTab\">\r\n <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\r\n <div class=\"my-bag\">\r\n My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n </div>\r\n <div class=\"cart-items\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <div class=\"row item-parent\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"col-md-6 h-100\">\r\n <div class=\"lh-23\">\r\n <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n <div class=\"price-with-tax\">\r\n &#8377; {{item.price + (item.itemTax ?? 0)}}\r\n </div>\r\n <div class=\"item-quantity\">\r\n <ng-container *ngIf=\"!isItemLoading(item.itemId)\">\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n </ng-container>\r\n <ng-container *ngIf=\"isItemLoading(item.itemId)\">\r\n <div class=\"d-flex\"> <i class=\"fa fa-spinner fa-spin\" style=\"font-size:24px; margin-right: 10px;\"></i> <span>Loading...</span></div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 position-relative\" style=\"margin-left: auto;\">\r\n <div class=\"item-price\">&#8377; {{(item.price + (item.itemTax ?? 0)) * item.quantity}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\">delete</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\r\n <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\" [selectedAddressIdx]=\"selectedAddressIdx\"></simpo-address>\r\n </div>\r\n <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\r\n </ng-container>\r\n <div class=\"right-panel\">\r\n <div class=\"my-bag\">\r\n Price Details\r\n </div>\r\n <div class=\"price-details\">\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\r\n <div class=\"price-type\">Total Price</div>\r\n <div class=\"price-value\">&#8377; {{responseData.billdetails.totalNetValue}}</div>\r\n </div>\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\r\n <div class=\"price-type\">Total Tax</div>\r\n <div class=\"price-value\">&#8377; {{responseData?.billdetails?.totalTax}}</div>\r\n </div>\r\n <div class=\"price-parent-block\"\r\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <div class=\"price-type\">Delivery Charge</div>\r\n <div class=\"price-value\">&#8377; {{responseData.billdetails.deliveryCharges}}</div>\r\n </div>\r\n <hr>\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.totalAmount\">\r\n <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n <div class=\"price-value\" style=\"font-weight: 600;\">&#8377; {{responseData.totalAmount}}</div>\r\n </div>\r\n\r\n <div class=\"button-parent\">\r\n <ng-container *ngIf=\"currentTab == 'BAG'\">\r\n <div class=\"btn\" (click)=\"proceedToCheckout()\">Checkout Cart</div>\r\n <div class=\"btn\" (click)=\"proceedToListPage()\">Continue Shopping</div>\r\n </ng-container>\r\n \r\n <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\r\n <div class=\"btn\" (click)=\"proceedToPayment()\">Place Order</div>\r\n </ng-container>\r\n <!-- <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\r\n <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Your cart is empty\r\n </div>\r\n <div class=\"description d-flex mt-4\">\r\n Looks like you have not added anything to your cart. Go ahead & explore top categories.\r\n </div>\r\n </div>\r\n </div>\r\n </section>\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 </section>\r\n</ng-container>\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", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important;border:1px solid lightgray}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel,.right-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}}\n"] }]
5779
- }], ctorParameters: () => [{ type: EventsService }, { type: CartService }, { type: i2$2.Router }, { type: RestService }, { type: i3.MatDialog }, { type: StorageServiceService }, { type: i2$3.CookieService }], propDecorators: { data: [{
5853
+ }], ctorParameters: () => [{ type: EventsService }, { type: CartService }, { type: i2$3.Router }, { type: RestService }, { type: i3.MatDialog }, { type: StorageServiceService }, { type: i2$4.CookieService }], propDecorators: { data: [{
5780
5854
  type: Input
5781
5855
  }], responseData: [{
5782
5856
  type: Input
@@ -5808,7 +5882,7 @@ class CheckoutComponent extends BaseSection {
5808
5882
  this._eventService.placeOrder.emit({ cartData: this.responseData });
5809
5883
  }
5810
5884
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CheckoutComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
5811
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CheckoutComponent, isStandalone: true, selector: "simpo-checkout", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div class=\"row\">\r\n <div class=\"col-md-7 col-12\" *ngIf=\"editDeliveryAddress\">\r\n <div class=\"shipping-label heading-large\">Shipping To</div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Name</label>\r\n <input [(ngModel)]=\"responseData.userDetails.userName\" type=\"text\" placeholder=\"Enter Name\"\r\n class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Mobile Number</label>\r\n <input [(ngModel)]=\"responseData.userDetails.mobile\" type=\"number\" placeholder=\"Enter number\"\r\n class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Email</label>\r\n <input [(ngModel)]=\"responseData.userDetails.email\" type=\"email\" placeholder=\"Enter email\"\r\n class=\"input-field\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"shipping-label\" style=\"margin-top: 15px;\">Shipping Address</div>\r\n <div class=\"row\">\r\n <div class=\"col-12 input-parent\">\r\n <label for=\"\">Address</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.addressLine1\" type=\"text\"\r\n placeholder=\"Flat/House No, Building, Colony\" class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Locality/Area</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.localityName\" type=\"text\"\r\n placeholder=\"Eg: Jaybheri Enclave, Gachibowli\" class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Landmark</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.landmark\" type=\"text\"\r\n placeholder=\"Eg: Near SBI Bank\" class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Pincode</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.zipCode\" type=\"number\" placeholder=\"Eg: 500032\"\r\n class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">City</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.cityName\" type=\"text\"\r\n placeholder=\"Eg: Hyderabad\" class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">State</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.stateName\" type=\"text\"\r\n placeholder=\"Eg: Telanghana\" class=\"input-field\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-7 col-12\" *ngIf=\"!editDeliveryAddress\">\r\n <div class=\"shipping-label\">Delivery Address</div>\r\n <div class=\"delivery-address\">\r\n <div style=\"position: absolute;right: 15px;\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/library-media/813827c1709186499689edit%201.png\"\r\n alt=\"\" style=\"cursor: pointer;\" (click)=\"editDeliveryAddress = true\">\r\n </div>\r\n <div class=\"userName\">{{responseData?.userDetails.userName}}</div>\r\n <div class=\"user-details\" style=\"margin-top: 5px;\">\r\n {{responseData?.userDetails.deliveryAddress?.addressLine1}},\r\n {{responseData?.userDetails.deliveryAddress?.localityName}}</div>\r\n <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.cityName}},\r\n {{responseData?.userDetails.deliveryAddress?.stateName}}</div>\r\n <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.countryName}} -\r\n {{responseData?.userDetails.deliveryAddress?.zipCode}}</div>\r\n <div class=\"user-details\" style=\"margin-top: 5px;\">Phone : <span\r\n style=\"font-weight: 500;\">{{responseData?.userDetails.mobile}}</span></div>\r\n </div>\r\n </div>\r\n <div class=\"offset-md-1 col-md-4 col-12 right-section\">\r\n <div class=\"shipping-label heading-large lh-normal\">\r\n Price Details\r\n </div>\r\n <div class=\"price-details\">\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\r\n <div class=\"price-type\">Total MRP</div>\r\n <div class=\"price-value\">&#8377; {{responseData.billdetails.totalNetValue}}</div>\r\n </div>\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\r\n <div class=\"price-type\">Total Tax</div>\r\n <div class=\"price-value\">&#8377; {{responseData?.billdetails?.totalTax}}</div>\r\n </div>\r\n <div class=\"price-parent-block\"\r\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <div class=\"price-type\">Delivery Charge</div>\r\n <div class=\"price-value\">&#8377; {{responseData.billdetails.deliveryCharges}}</div>\r\n </div>\r\n <hr>\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.totalAmount\">\r\n <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n <div class=\"price-value\" style=\"font-weight: 600;\">&#8377; {{responseData.totalAmount}}</div>\r\n </div>\r\n\r\n <div class=\"button-parent\">\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" (click)=\"placeOrder()\">{{content?.button}}</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <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<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", styles: [".container{margin-top:30px}.shipping-label{font-weight:600;font-size:18px;color:#141514;margin-bottom:5px}.input-parent{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}.input-label{font-family:Inter;font-weight:400;font-size:14px;color:#141514}.input-field{height:40px;border:2px solid#D0D5DD;border-radius:5px;padding-left:10px;font-size:14px;outline:none}.my-bag{font-size:16px;font-weight:600;font-family:Poppins;color:#000}.my-bag span{color:#939393}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px;font-family:Poppins}.coupon-desc{color:#939393;font-size:12px;font-family:Poppins;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600;font-family:Poppins}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:14px;font-family:Poppins;color:#434443}.price-value{font-weight:500;font-family:Poppins;font-size:16px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}.button-parent button{padding-top:7px!important;padding-bottom:7px!important;font-size:16px!important}.delivery-address{border:1px solid#D0D5DD;padding:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;position:relative}.userName{font-size:18px;font-weight:500;font-family:Poppins;color:#000}.user-details{font-weight:400;font-size:16px;font-family:Poppins}.lh-normal{line-height:normal}hr{border:1px solid #E8E8E8}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width : 500px){.right-section{margin-top:15px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.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: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i9.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type:
5885
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CheckoutComponent, isStandalone: true, selector: "simpo-checkout", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div class=\"row\">\r\n <div class=\"col-md-7 col-12\" *ngIf=\"editDeliveryAddress\">\r\n <div class=\"shipping-label heading-large\">Shipping To</div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Name</label>\r\n <input [(ngModel)]=\"responseData.userDetails.userName\" type=\"text\" placeholder=\"Enter Name\"\r\n class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Mobile Number</label>\r\n <input [(ngModel)]=\"responseData.userDetails.mobile\" type=\"number\" placeholder=\"Enter number\"\r\n class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Email</label>\r\n <input [(ngModel)]=\"responseData.userDetails.email\" type=\"email\" placeholder=\"Enter email\"\r\n class=\"input-field\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"shipping-label\" style=\"margin-top: 15px;\">Shipping Address</div>\r\n <div class=\"row\">\r\n <div class=\"col-12 input-parent\">\r\n <label for=\"\">Address</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.addressLine1\" type=\"text\"\r\n placeholder=\"Flat/House No, Building, Colony\" class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Locality/Area</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.localityName\" type=\"text\"\r\n placeholder=\"Eg: Jaybheri Enclave, Gachibowli\" class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Landmark</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.landmark\" type=\"text\"\r\n placeholder=\"Eg: Near SBI Bank\" class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Pincode</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.zipCode\" type=\"number\" placeholder=\"Eg: 500032\"\r\n class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">City</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.cityName\" type=\"text\"\r\n placeholder=\"Eg: Hyderabad\" class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">State</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.stateName\" type=\"text\"\r\n placeholder=\"Eg: Telanghana\" class=\"input-field\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-7 col-12\" *ngIf=\"!editDeliveryAddress\">\r\n <div class=\"shipping-label\">Delivery Address</div>\r\n <div class=\"delivery-address\">\r\n <div style=\"position: absolute;right: 15px;\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/library-media/813827c1709186499689edit%201.png\"\r\n alt=\"\" style=\"cursor: pointer;\" (click)=\"editDeliveryAddress = true\">\r\n </div>\r\n <div class=\"userName\">{{responseData?.userDetails.userName}}</div>\r\n <div class=\"user-details\" style=\"margin-top: 5px;\">\r\n {{responseData?.userDetails.deliveryAddress?.addressLine1}},\r\n {{responseData?.userDetails.deliveryAddress?.localityName}}</div>\r\n <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.cityName}},\r\n {{responseData?.userDetails.deliveryAddress?.stateName}}</div>\r\n <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.countryName}} -\r\n {{responseData?.userDetails.deliveryAddress?.zipCode}}</div>\r\n <div class=\"user-details\" style=\"margin-top: 5px;\">Phone : <span\r\n style=\"font-weight: 500;\">{{responseData?.userDetails.mobile}}</span></div>\r\n </div>\r\n </div>\r\n <div class=\"offset-md-1 col-md-4 col-12 right-section\">\r\n <div class=\"shipping-label heading-large lh-normal\">\r\n Price Details\r\n </div>\r\n <div class=\"price-details\">\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\r\n <div class=\"price-type\">Total MRP</div>\r\n <div class=\"price-value\">&#8377; {{responseData.billdetails.totalNetValue}}</div>\r\n </div>\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\r\n <div class=\"price-type\">Total Tax</div>\r\n <div class=\"price-value\">&#8377; {{responseData?.billdetails?.totalTax}}</div>\r\n </div>\r\n <div class=\"price-parent-block\"\r\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <div class=\"price-type\">Delivery Charge</div>\r\n <div class=\"price-value\">&#8377; {{responseData.billdetails.deliveryCharges}}</div>\r\n </div>\r\n <hr>\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.totalAmount\">\r\n <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n <div class=\"price-value\" style=\"font-weight: 600;\">&#8377; {{responseData.totalAmount}}</div>\r\n </div>\r\n\r\n <div class=\"button-parent\">\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" (click)=\"placeOrder()\">{{content?.button}}</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <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<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", styles: [".container{margin-top:30px}.shipping-label{font-weight:600;font-size:18px;color:#141514;margin-bottom:5px}.input-parent{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}.input-label{font-family:Inter;font-weight:400;font-size:14px;color:#141514}.input-field{height:40px;border:2px solid#D0D5DD;border-radius:5px;padding-left:10px;font-size:14px;outline:none}.my-bag{font-size:16px;font-weight:600;font-family:Poppins;color:#000}.my-bag span{color:#939393}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px;font-family:Poppins}.coupon-desc{color:#939393;font-size:12px;font-family:Poppins;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600;font-family:Poppins}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:14px;font-family:Poppins;color:#434443}.price-value{font-weight:500;font-family:Poppins;font-size:16px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}.button-parent button{padding-top:7px!important;padding-bottom:7px!important;font-size:16px!important}.delivery-address{border:1px solid#D0D5DD;padding:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;position:relative}.userName{font-size:18px;font-weight:500;font-family:Poppins;color:#000}.user-details{font-weight:400;font-size:16px;font-family:Poppins}.lh-normal{line-height:normal}hr{border:1px solid #E8E8E8}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width : 500px){.right-section{margin-top:15px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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: i2$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i8.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type:
5812
5886
  //DIRECTIVE
5813
5887
  ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }] }); }
5814
5888
  }
@@ -5861,7 +5935,7 @@ class WhislistComponent {
5861
5935
  this.cartService.addItemToFavourite(item);
5862
5936
  }
5863
5937
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: WhislistComponent, deps: [{ token: CartService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
5864
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: WhislistComponent, isStandalone: true, selector: "simpo-whislist", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div class=\"left-panel\">\r\n <div class=\"my-bag\">\r\n My Whislist&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n </div>\r\n \r\n <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <div class=\"cart-items\">\r\n <div class=\"row item-parent\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"col-md-6 h-100 item-desc\">\r\n <div class=\"lh-23\">\r\n <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n <div class=\"price-with-tax\">\r\n &#8377; {{item.price + (item.itemTax ?? 0)}}\r\n </div>\r\n <div class=\"item-quantity\">\r\n <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"position-relative itemPrice\" style=\"margin-left: auto; width: 30%;\">\r\n <div class=\"item-price\">&#8377; {{(item.price + (item.itemTax ?? 0)) * item.quantity}}</div>\r\n <div>\r\n <mat-icon class=\"cart-item\" (click)=\"moveToCart(item)\">add_shopping_cart</mat-icon>\r\n <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\">delete</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Your Whislist is empty\r\n </div>\r\n <div class=\"description d-flex mt-4\">\r\n Looks like you have not added anything to your Whislist. Go ahead & explore top categories.\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n \r\n </section>\r\n</ng-container>\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: [".cart-parent{display:flex;flex-wrap:wrap;margin-top:15px;gap:20px}.left-panel{width:100%}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;display:flex;width:90px;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.item-parent{flex-direction:row!important;flex-wrap:nowrap!important}.cart-items,.left-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-desc{width:50%}.itemPrice{width:25%}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i9.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }] }); }
5938
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: WhislistComponent, isStandalone: true, selector: "simpo-whislist", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div class=\"left-panel\">\r\n <div class=\"my-bag\">\r\n My Whislist&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n </div>\r\n \r\n <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <div class=\"cart-items\">\r\n <div class=\"row item-parent\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"col-md-6 h-100 item-desc\">\r\n <div class=\"lh-23\">\r\n <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n <div class=\"price-with-tax\">\r\n &#8377; {{item.price + (item.itemTax ?? 0)}}\r\n </div>\r\n <div class=\"item-quantity\">\r\n <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"position-relative itemPrice\" style=\"margin-left: auto; width: 30%;\">\r\n <div class=\"item-price\">&#8377; {{(item.price + (item.itemTax ?? 0)) * item.quantity}}</div>\r\n <div>\r\n <mat-icon class=\"cart-item\" (click)=\"moveToCart(item)\">add_shopping_cart</mat-icon>\r\n <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\">delete</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Your Whislist is empty\r\n </div>\r\n <div class=\"description d-flex mt-4\">\r\n Looks like you have not added anything to your Whislist. Go ahead & explore top categories.\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n \r\n </section>\r\n</ng-container>\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: [".cart-parent{display:flex;flex-wrap:wrap;margin-top:15px;gap:20px}.left-panel{width:100%}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;display:flex;width:90px;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.item-parent{flex-direction:row!important;flex-wrap:nowrap!important}.cart-items,.left-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-desc{width:50%}.itemPrice{width:25%}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i8.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }] }); }
5865
5939
  }
5866
5940
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: WhislistComponent, decorators: [{
5867
5941
  type: Component,
@@ -5904,7 +5978,7 @@ class OrderDetailsComponent {
5904
5978
  });
5905
5979
  }
5906
5980
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: OrderDetailsComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
5907
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: OrderDetailsComponent, isStandalone: true, selector: "simpo-order-details", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"d-flex justify-content-between\" style=\"width: 80%; margin: auto;\">\r\n <div class=\"left\" style=\"width: 60%;\">\r\n <h1 class=\"fs-3 fw-normal mb-5 d-flex align-items-center onlyDesktop\" style=\"margin-left: -30px;\">\r\n <mat-icon style=\"cursor: pointer;\">keyboard_arrow_left</mat-icon>\r\n <span>Order Details</span>\r\n </h1>\r\n <div class=\"d-flex justify-content-between align-items-end\">\r\n <div class=\"d-flex flex-column\">\r\n <span class=\"text-dark fs-5\">Order {{ responseData.orderId }}</span>\r\n <span class=\"text-muted fs-6\">{{ responseData.orderDate | date }}, {{ responseData.items }} items | &#x20b9; {{responseData.amount}}</span>\r\n </div>\r\n <span class=\"text-dark fw-bold fs-5\">{{responseData.store}}</span>\r\n </div>\r\n <hr />\r\n <div class=\"timeline\">\r\n <p-timeline [value]=\"orderTimiline\">\r\n <ng-template pTemplate=\"content\" let-event>\r\n <div class=\"d-flex\">\r\n <mat-icon style=\"margin-right: 10px;\">{{ event.icon }}</mat-icon> \r\n <div class=\"d-flex flex-column ml-2\">\r\n <span class=\"fw-normal fs-6\">{{ event.name }}</span> \r\n <div class=\"fs-6 text-muted\">{{event.desc}}</div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-timeline>\r\n </div>\r\n <hr />\r\n <div>\r\n <div *ngFor=\"let item of responseData.itemList\" class=\"d-flex\" style=\"gap: 10px; width: 100%;\">\r\n <img [src]=\"item.itemImages[0].imgUrl\" alt=\"\" style=\"height: 85px;width: 85px;\">\r\n <div class=\"d-flex flex-column justify-content-center\" style=\"gap: 6px; width: 89%;\">\r\n <span class=\"text-dark fw-bold fs-6\">{{item.name}}</span>\r\n <span class=\"fs-6\">Size: XS</span>\r\n <div class=\"d-flex justify-content-between fs-6\">\r\n <span>1 X &#x20b9; <span class=\"text-dark fw-bold\">{{item.price.sellingPrice}}</span></span>\r\n <span> &#x20b9; <span class=\"text-dark fw-bold\">{{item.price.sellingPrice}}</span></span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <hr />\r\n <div class=\"fs-6\">\r\n <div class=\"d-flex justify-content-between my-2\">\r\n <span class=\"fw-normal\">Item Total</span>\r\n <span class=\"fw-bold\">&#x20b9; {{responseData.amount}}</span>\r\n </div>\r\n \r\n <div class=\"d-flex justify-content-between my-2\">\r\n <span>Delivery</span>\r\n <span>FREE</span>\r\n </div>\r\n \r\n <div class=\"d-flex justify-content-between my-2\">\r\n <span class=\"fw-normal\">Grand Total</span>\r\n <span class=\"fw-bold\">&#x20b9; {{responseData.amount}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right\" style=\"width: 25%; mt-2\">\r\n <h1 class=\"mb-3 fs-5\">Your Details</h1>\r\n <div class=\"my-2 fs-6\">\r\n <span style=\"margin-right: 10px\">Name:</span>\r\n <span class=\"fw-bold pl-2\">Shruti</span>\r\n </div>\r\n <div class=\"my-2 fs-6\">\r\n <span style=\"margin-right: 10px\">Phone:</span>\r\n <span class=\"fw-bold pl-2\">940495483938</span>\r\n </div>\r\n <div class=\"my-2 fs-6\">\r\n <span style=\"margin-right: 10px\">Address:</span>\r\n <span class=\"fw-bold pl-2\">The 27 building, Jayabheri Enclave</span>\r\n </div>\r\n <div class=\"my-2 fs-6\">\r\n <span style=\"margin-right: 10px\">Payment:</span>\r\n <span class=\"fw-bold pl-2\">Manual Payment</span>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-container>\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", styles: [".right{height:240px;padding:15px;background-color:#f8f8f8;border-radius:8px}hr{border-top-width:2px;margin:15px 0}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}@media screen and (max-width: 475px){.onlyDesktop{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i9.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i4.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "directive", type: i5.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
5981
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: OrderDetailsComponent, isStandalone: true, selector: "simpo-order-details", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"d-flex justify-content-between\" style=\"width: 80%; margin: auto;\">\r\n <div class=\"left\" style=\"width: 60%;\">\r\n <h1 class=\"fs-3 fw-normal mb-5 d-flex align-items-center onlyDesktop\" style=\"margin-left: -30px;\">\r\n <mat-icon style=\"cursor: pointer;\">keyboard_arrow_left</mat-icon>\r\n <span>Order Details</span>\r\n </h1>\r\n <div class=\"d-flex justify-content-between align-items-end\">\r\n <div class=\"d-flex flex-column\">\r\n <span class=\"text-dark fs-5\">Order {{ responseData.orderId }}</span>\r\n <span class=\"text-muted fs-6\">{{ responseData.orderDate | date }}, {{ responseData.items }} items | &#x20b9; {{responseData.amount}}</span>\r\n </div>\r\n <span class=\"text-dark fw-bold fs-5\">{{responseData.store}}</span>\r\n </div>\r\n <hr />\r\n <div class=\"timeline\">\r\n <p-timeline [value]=\"orderTimiline\">\r\n <ng-template pTemplate=\"content\" let-event>\r\n <div class=\"d-flex\">\r\n <mat-icon style=\"margin-right: 10px;\">{{ event.icon }}</mat-icon> \r\n <div class=\"d-flex flex-column ml-2\">\r\n <span class=\"fw-normal fs-6\">{{ event.name }}</span> \r\n <div class=\"fs-6 text-muted\">{{event.desc}}</div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-timeline>\r\n </div>\r\n <hr />\r\n <div>\r\n <div *ngFor=\"let item of responseData.itemList\" class=\"d-flex\" style=\"gap: 10px; width: 100%;\">\r\n <img [src]=\"item.itemImages[0].imgUrl\" alt=\"\" style=\"height: 85px;width: 85px;\">\r\n <div class=\"d-flex flex-column justify-content-center\" style=\"gap: 6px; width: 89%;\">\r\n <span class=\"text-dark fw-bold fs-6\">{{item.name}}</span>\r\n <span class=\"fs-6\">Size: XS</span>\r\n <div class=\"d-flex justify-content-between fs-6\">\r\n <span>1 X &#x20b9; <span class=\"text-dark fw-bold\">{{item.price.sellingPrice}}</span></span>\r\n <span> &#x20b9; <span class=\"text-dark fw-bold\">{{item.price.sellingPrice}}</span></span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <hr />\r\n <div class=\"fs-6\">\r\n <div class=\"d-flex justify-content-between my-2\">\r\n <span class=\"fw-normal\">Item Total</span>\r\n <span class=\"fw-bold\">&#x20b9; {{responseData.amount}}</span>\r\n </div>\r\n \r\n <div class=\"d-flex justify-content-between my-2\">\r\n <span>Delivery</span>\r\n <span>FREE</span>\r\n </div>\r\n \r\n <div class=\"d-flex justify-content-between my-2\">\r\n <span class=\"fw-normal\">Grand Total</span>\r\n <span class=\"fw-bold\">&#x20b9; {{responseData.amount}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right\" style=\"width: 25%; mt-2\">\r\n <h1 class=\"mb-3 fs-5\">Your Details</h1>\r\n <div class=\"my-2 fs-6\">\r\n <span style=\"margin-right: 10px\">Name:</span>\r\n <span class=\"fw-bold pl-2\">Shruti</span>\r\n </div>\r\n <div class=\"my-2 fs-6\">\r\n <span style=\"margin-right: 10px\">Phone:</span>\r\n <span class=\"fw-bold pl-2\">940495483938</span>\r\n </div>\r\n <div class=\"my-2 fs-6\">\r\n <span style=\"margin-right: 10px\">Address:</span>\r\n <span class=\"fw-bold pl-2\">The 27 building, Jayabheri Enclave</span>\r\n </div>\r\n <div class=\"my-2 fs-6\">\r\n <span style=\"margin-right: 10px\">Payment:</span>\r\n <span class=\"fw-bold pl-2\">Manual Payment</span>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-container>\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", styles: [".right{height:240px;padding:15px;background-color:#f8f8f8;border-radius:8px}hr{border-top-width:2px;margin:15px 0}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}@media screen and (max-width: 475px){.onlyDesktop{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i8.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i4.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "directive", type: i5.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
5908
5982
  }
5909
5983
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: OrderDetailsComponent, decorators: [{
5910
5984
  type: Component,
@@ -5985,8 +6059,8 @@ class UserProfileComponent {
5985
6059
  get isMobile() {
5986
6060
  return window.innerWidth <= 475;
5987
6061
  }
5988
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserProfileComponent, deps: [{ token: i2$2.Router }, { token: EventsService }, { token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
5989
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, ngImport: i0, template: "<section *ngIf=\"!isLoading\" class=\"d-flex\" style=\"width: 85%; margin: auto; margin-top: 1rem\" [style.width.%]=\"isMobile ? '90' : ''\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"p-3\" style=\"background-color: #F8F8F8; width: 25%; border-radius: 10px; height: fit-content;\">\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\r\n <img [src]=\"getUserDetails ?? ''\" alt=\"\" class=\"rounded-circle h-100\" style=\"width: 70px;\">\r\n <div>\r\n <h4 class=\"text-dark font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n </div>\r\n </div>\r\n <div class=\"tabs\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\">\r\n <mat-icon>{{tab.icon}}</mat-icon>\r\n <div class=\"tab text-muted font-weight-normal\">{{tab.value}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"orders-sec\">\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <div class=\"w-100 position-relative\" style=\"height: 80vh;\">\r\n <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\r\n <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\" (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n </div>\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"''\">\r\n <section class=\"top-sec\">\r\n <img [src]=\"getUserDetails\" alt=\"\" class=\"rounded-circle\" style=\"width: 50px; height: 50px;\">\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <h4 class=\"text-dark font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n </div>\r\n </section>\r\n <section class=\"list-sec\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n <mat-icon>{{tab.icon}}</mat-icon>\r\n <div class=\"tab text-muted font-weight-normal\">{{tab.value}}</div>\r\n </div>\r\n </ng-container>\r\n </section>\r\n </ng-container>\r\n \r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n <h1 class=\"onlyDesktop\">My Orders</h1>\r\n <div class=\"d-flex my-3 orderlist\">\r\n <ng-container *ngFor=\"let tab of tabs\">\r\n <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">{{tab.value}}</div>\r\n </ng-container>\r\n </div>\r\n <div class=\"order-list\">\r\n <div class=\"order\" *ngFor=\"let order of orderList\">\r\n <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n <simpo-order-details></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n <div class=\"d-flex justify-content-between mb-2 onlyDesktop\">\r\n <h1>My Address</h1>\r\n <button class=\"address-btn\">{{button?.content?.label}}</button>\r\n </div>\r\n <div class=\"address-list\">\r\n <ng-container *ngFor=\"let address of addressList\">\r\n <div class=\"address\">\r\n <div class=\"address-left\">\r\n <div class=\"top\">\r\n <span class=\"fw-bold mr-2\">{{address.name}}</span>\r\n <span class=\"address-type\">{{address.type}}</span>\r\n </div>\r\n <div class=\"address-det\">{{address.address}}</div>\r\n <div class=\"phone\">\r\n <span>Phone:</span>\r\n <span class=\"address-phone\">{{address.phone}}</span>\r\n </div>\r\n </div>\r\n <div class=\"address-right\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n <h1 class=\"onlyDesktop\">My Accounts</h1>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n <h1 class=\"onlyDesktop\">Logout</h1>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n <div (click)=\"selectedSidePanelTab = 'Orders_Details'\">\r\n <div class=\"top\">\r\n <span class=\"text-muted font-weight-normal\">{{order.displayId}}</span>\r\n <mat-icon>arrow_forward_ios</mat-icon>\r\n </div>\r\n <div class=\"middle my-2\">\r\n <span>{{order.date | date}}</span>\r\n <span class=\"text-dark font-weight-bold\">{{order.store | titlecase}}</span>\r\n </div>\r\n <hr />\r\n <div class=\"bottom\">\r\n <span class=\"text-muted font-weight-normal\">Amount: <span class=\"text-dark\">{{ order.amount }}</span></span>\r\n <span class=\"text-muted font-weight-normal\">{{ order.status }}</span>\r\n </div>\r\n </div>\r\n</ng-template>\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>", styles: [".mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{color:#000!important;font-weight:600!important}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:70%;margin-left:auto}.order{width:95%;border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-direction:column;gap:10px}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1}.address-list .address-left{width:80%}.address-list .address-right{width:20%}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:200px!important;background-color:#0267c1;color:#fff;border-radius:3px;border:none}.profileDet{display:flex;flex-direction:column}@media screen and (max-width: 475px){.onlyDesktop{display:none}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d3;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:40px;margin-left:-5%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i9.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }] }); }
6062
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserProfileComponent, deps: [{ token: i2$3.Router }, { token: EventsService }, { token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
6063
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, ngImport: i0, template: "<section *ngIf=\"!isLoading\" class=\"d-flex\" style=\"width: 85%; margin: auto; margin-top: 1rem\" [style.width.%]=\"isMobile ? '90' : ''\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"p-3\" style=\"background-color: #F8F8F8; width: 25%; border-radius: 10px; height: fit-content;\">\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\r\n <img [src]=\"getUserDetails ?? ''\" alt=\"\" class=\"rounded-circle h-100\" style=\"width: 70px;\">\r\n <div>\r\n <h4 class=\"text-dark font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n </div>\r\n </div>\r\n <div class=\"tabs\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\">\r\n <mat-icon>{{tab.icon}}</mat-icon>\r\n <div class=\"tab text-muted font-weight-normal\">{{tab.value}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"orders-sec\">\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <div class=\"w-100 position-relative\" style=\"height: 80vh;\">\r\n <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\r\n <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\" (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n </div>\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"''\">\r\n <section class=\"top-sec\">\r\n <img [src]=\"getUserDetails\" alt=\"\" class=\"rounded-circle\" style=\"width: 50px; height: 50px;\">\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <h4 class=\"text-dark font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n </div>\r\n </section>\r\n <section class=\"list-sec\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n <mat-icon>{{tab.icon}}</mat-icon>\r\n <div class=\"tab text-muted font-weight-normal\">{{tab.value}}</div>\r\n </div>\r\n </ng-container>\r\n </section>\r\n </ng-container>\r\n \r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n <h1 class=\"onlyDesktop\">My Orders</h1>\r\n <div class=\"d-flex my-3 orderlist\">\r\n <ng-container *ngFor=\"let tab of tabs\">\r\n <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">{{tab.value}}</div>\r\n </ng-container>\r\n </div>\r\n <div class=\"order-list\">\r\n <div class=\"order\" *ngFor=\"let order of orderList\">\r\n <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n <simpo-order-details></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n <div class=\"d-flex justify-content-between mb-2 onlyDesktop\">\r\n <h1>My Address</h1>\r\n <button class=\"address-btn\">{{button?.content?.label}}</button>\r\n </div>\r\n <div class=\"address-list\">\r\n <ng-container *ngFor=\"let address of addressList\">\r\n <div class=\"address\">\r\n <div class=\"address-left\">\r\n <div class=\"top\">\r\n <span class=\"fw-bold mr-2\">{{address.name}}</span>\r\n <span class=\"address-type\">{{address.type}}</span>\r\n </div>\r\n <div class=\"address-det\">{{address.address}}</div>\r\n <div class=\"phone\">\r\n <span>Phone:</span>\r\n <span class=\"address-phone\">{{address.phone}}</span>\r\n </div>\r\n </div>\r\n <div class=\"address-right\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n <h1 class=\"onlyDesktop\">My Accounts</h1>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n <h1 class=\"onlyDesktop\">Logout</h1>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n <div (click)=\"selectedSidePanelTab = 'Orders_Details'\">\r\n <div class=\"top\">\r\n <span class=\"text-muted font-weight-normal\">{{order.displayId}}</span>\r\n <mat-icon>arrow_forward_ios</mat-icon>\r\n </div>\r\n <div class=\"middle my-2\">\r\n <span>{{order.date | date}}</span>\r\n <span class=\"text-dark font-weight-bold\">{{order.store | titlecase}}</span>\r\n </div>\r\n <hr />\r\n <div class=\"bottom\">\r\n <span class=\"text-muted font-weight-normal\">Amount: <span class=\"text-dark\">{{ order.amount }}</span></span>\r\n <span class=\"text-muted font-weight-normal\">{{ order.status }}</span>\r\n </div>\r\n </div>\r\n</ng-template>\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>", styles: [".mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{color:#000!important;font-weight:600!important}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:70%;margin-left:auto}.order{width:95%;border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-direction:column;gap:10px}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1}.address-list .address-left{width:80%}.address-list .address-right{width:20%}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:200px!important;background-color:#0267c1;color:#fff;border-radius:3px;border:none}.profileDet{display:flex;flex-direction:column}@media screen and (max-width: 475px){.onlyDesktop{display:none}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d3;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:40px;margin-left:-5%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i8.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }] }); }
5990
6064
  }
5991
6065
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserProfileComponent, decorators: [{
5992
6066
  type: Component,
@@ -6001,7 +6075,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
6001
6075
  OrderDetailsComponent,
6002
6076
  NgxSkeletonLoaderModule
6003
6077
  ], template: "<section *ngIf=\"!isLoading\" class=\"d-flex\" style=\"width: 85%; margin: auto; margin-top: 1rem\" [style.width.%]=\"isMobile ? '90' : ''\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"p-3\" style=\"background-color: #F8F8F8; width: 25%; border-radius: 10px; height: fit-content;\">\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\r\n <img [src]=\"getUserDetails ?? ''\" alt=\"\" class=\"rounded-circle h-100\" style=\"width: 70px;\">\r\n <div>\r\n <h4 class=\"text-dark font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n </div>\r\n </div>\r\n <div class=\"tabs\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\">\r\n <mat-icon>{{tab.icon}}</mat-icon>\r\n <div class=\"tab text-muted font-weight-normal\">{{tab.value}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"orders-sec\">\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <div class=\"w-100 position-relative\" style=\"height: 80vh;\">\r\n <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\r\n <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\" (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n </div>\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"''\">\r\n <section class=\"top-sec\">\r\n <img [src]=\"getUserDetails\" alt=\"\" class=\"rounded-circle\" style=\"width: 50px; height: 50px;\">\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <h4 class=\"text-dark font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n </div>\r\n </section>\r\n <section class=\"list-sec\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n <mat-icon>{{tab.icon}}</mat-icon>\r\n <div class=\"tab text-muted font-weight-normal\">{{tab.value}}</div>\r\n </div>\r\n </ng-container>\r\n </section>\r\n </ng-container>\r\n \r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n <h1 class=\"onlyDesktop\">My Orders</h1>\r\n <div class=\"d-flex my-3 orderlist\">\r\n <ng-container *ngFor=\"let tab of tabs\">\r\n <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">{{tab.value}}</div>\r\n </ng-container>\r\n </div>\r\n <div class=\"order-list\">\r\n <div class=\"order\" *ngFor=\"let order of orderList\">\r\n <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n <simpo-order-details></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n <div class=\"d-flex justify-content-between mb-2 onlyDesktop\">\r\n <h1>My Address</h1>\r\n <button class=\"address-btn\">{{button?.content?.label}}</button>\r\n </div>\r\n <div class=\"address-list\">\r\n <ng-container *ngFor=\"let address of addressList\">\r\n <div class=\"address\">\r\n <div class=\"address-left\">\r\n <div class=\"top\">\r\n <span class=\"fw-bold mr-2\">{{address.name}}</span>\r\n <span class=\"address-type\">{{address.type}}</span>\r\n </div>\r\n <div class=\"address-det\">{{address.address}}</div>\r\n <div class=\"phone\">\r\n <span>Phone:</span>\r\n <span class=\"address-phone\">{{address.phone}}</span>\r\n </div>\r\n </div>\r\n <div class=\"address-right\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n <h1 class=\"onlyDesktop\">My Accounts</h1>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n <h1 class=\"onlyDesktop\">Logout</h1>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n <div (click)=\"selectedSidePanelTab = 'Orders_Details'\">\r\n <div class=\"top\">\r\n <span class=\"text-muted font-weight-normal\">{{order.displayId}}</span>\r\n <mat-icon>arrow_forward_ios</mat-icon>\r\n </div>\r\n <div class=\"middle my-2\">\r\n <span>{{order.date | date}}</span>\r\n <span class=\"text-dark font-weight-bold\">{{order.store | titlecase}}</span>\r\n </div>\r\n <hr />\r\n <div class=\"bottom\">\r\n <span class=\"text-muted font-weight-normal\">Amount: <span class=\"text-dark\">{{ order.amount }}</span></span>\r\n <span class=\"text-muted font-weight-normal\">{{ order.status }}</span>\r\n </div>\r\n </div>\r\n</ng-template>\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>", styles: [".mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{color:#000!important;font-weight:600!important}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:70%;margin-left:auto}.order{width:95%;border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-direction:column;gap:10px}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1}.address-list .address-left{width:80%}.address-list .address-right{width:20%}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:200px!important;background-color:#0267c1;color:#fff;border-radius:3px;border:none}.profileDet{display:flex;flex-direction:column}@media screen and (max-width: 475px){.onlyDesktop{display:none}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d3;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:40px;margin-left:-5%}\n"] }]
6004
- }], ctorParameters: () => [{ type: i2$2.Router }, { type: EventsService }, { type: RestService }], propDecorators: { responseData: [{
6078
+ }], ctorParameters: () => [{ type: i2$3.Router }, { type: EventsService }, { type: RestService }], propDecorators: { responseData: [{
6005
6079
  type: Input
6006
6080
  }], data: [{
6007
6081
  type: Input